Like what we’re doing? Star us on GitHub!

How to build a custom rich-text element with multiple options?

dodov
4 weeks ago
3

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.

  • agenericguy
    4 weeks ago

    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/video
  • dodov
    4 weeks ago

    I actually managed to make my own embed element:

    https://github.com/hdodov/payload-rich-text-tweet

    It even supports both light and dark mode. 🤘

  • zubricks
    Payload Team
    4 weeks ago

    Nice work! This is pretty cool!

Open the post
Continue the discussion in Discord
Can't find what you're looking for?
Get help straight from the Payload team with an Enterprise License.Learn More