Users (especially Gabo) want to display tweets in the editor because Twitter (X) is the source of tons of information. While they can always copy and paste the text from the tweet we can improve the presentation and make the app more inclusive by supporting content from other platforms.
Solution
There are a lot of libraries that make embedding tweets very easy to implement. For example, react-tweet, react-tweet-embed, react-twitter-embed. The react-tweet library was released in 2023 by Vercel and seems to be very popular, so it is probably the best choice.
The implementation would include:
•
Creating a tweet embed block, which would render <Tweet> component from react-tweet and adding it to the editor schema.
•
When a link is pasted, checking if the link is from twitter (X).
•
Adding an option to the link dropdown to embed tweet.
•
Getting the tweet ID from the link.
•
Rendering the tweet embed block in the editor with the tweet ID if the dropdown options was selected.
We could also add a form state of the tweet block like in other block type blocks, where users would be able to paste a link or a tweet ID.