Embed Youtube, IG, TW and FB

[literakl]

The task is to enhance TipTap editor with new plugin (extension) to insert a link with preview. A user clicks the embed button within the editor and pastes the URL from the supported providers (Facebook, Twitter, Youtube, Instagram). If URL is unknown, the plugin will render the URL as a normal link in a DIV. The preview HTML will either use provider's JS to display the preview or use some 3rd party library. The link preview must be visible either in WYSIWYG editor when creating / editing the post and in the post view itself. The result must be mobile friendly and responsive.

The implementation shall download all data in the client's browser. The backend must not download from the URL. I prefer that backend stores only the URL / provider type and all fetching / rendering will be done in a client. This is safe from intellectual properties point of view and there is no risk of blocking the server (deny TCPIP list, too much requests).

Some helpful links:

• https://www.tiptap.dev/
• https://www.tiptap.dev/api/extensions/ - HOWTO
• Community Extensions ueberdosis/tiptap#819 - list of extensions

Some libraries with similar purpose. I do not know if they can be probably reused, but they me inspire you:

• https://www.npmjs.com/package/embedza
• https://andrejgajdos.com/how-to-create-a-link-preview/
• https://github.com/editor-js/link - very nice plugin from different WYSIWYG editor
• https://github.com/ranemihir/editorjs-social-post-plugin

Providers API:

• https://developers.google.com/youtube/iframe_api_reference YT
• https://developers.facebook.com/docs/features-reference/oembed_read FB/IG
• https://developer.twitter.com/en/docs/twitter-for-websites/embedded-tweets/overview TW

[literakl]

Errors found in console during testing:

Embedding Twitter URL ends up with a paragraph containing the URL and there is an error. See undefined in URL.

Uncaught TypeError: invalid json response body at http://localhost:8080/p/1feofh53uk/b/final-test/undefined/twitter-html?url=https://twitter.com/pelikanekcz/status/1434445742211469313 reason: Unexpected token < in JSON at position 0
at Response.json (browser.js:146)
at Iframe.getOEmbed (Iframe.js:185)

This error happen when you embed IG URL (in editor, without saving), for example https://www.youtube.com/watch?v=-VSS366Vhhk

www.instagram.com/static/bundles/es6/EmbedSimple.js/58fc7131a5e5.js:129 ErrorUtils caught an error:
Non-object thrown: undefined
Subsequent non-fatal errors won't be logged; see https://fburl.com/debugjs.