"Payload has transformed the way our clients manage content. It's an indispensable tool for any modern agency."
Microsoft chose Payload to tell the world about AI.
How to build a custom rich-text element with multiple options?
I want to provide editors with the ability to embed Twitter posts, while also being able to provide fallback text. How would I do that?
My guess is that I should to something similar to what the upload/relationship elements do - render a component with some buttons that then open modals for the various options.
I something similar recently.
Basically think what you want the resulting slate node to look like. I guess
{type: "tweet", twitterId: "someid", fallback: "My fallback text"}In that case, you create a button that opens the modal with some fields where you can enter this info, and confirming the modal adds a void node (it doesn't have children) with these properties.
Have a look too at the video element on the website example:
https://github.com/payloadcms/public-demo/tree/master/src/fields/richText/videoI actually managed to make my own embed element:
https://github.com/hdodov/payload-rich-text-tweetIt even supports both light and dark mode. 🤘
Nice work! This is pretty cool!
Star
Discord
online
Get dedicated engineering support directly from the Payload team.