How to allow iframe tags?

[Hereward]

Another stupid question sorry. I want to allow iframes for YouTube embeds. I can find no documentation for this entity type on the draftjs.org website.

There seems to be no information resource listing all the available entity types?

[thibaudcolas]

@Hereward I’m not sure there is docs for this, but at the moment Draft.js only transforms images (IMAGE entity from img tag) and links (LINK entity from a tag). If you want to be able to copy-paste iframes / YouTube embeds directly into the editor, you’ll need to create your own custom entities for this.

Then for the filters, all that’s needed would be to whitelist the entities. Something like:

        entities: [
          {
            type: "EMBED",
            attributes: ["url"],
          },
          // [...]
        ],

If that helps, I have an example of an "embed" entity in my open-source editor: https://github.com/springload/draftail/blob/b6583bdcc33eb5b115d2ab224afc06270f4a3f2b/examples/examples.story.js#L64-L93, https://github.com/springload/draftail/blob/master/examples/examples.story.js#L64-L93. See also https://demo.draftail.org/storybook/?path=/story/plugins--auto-embed.

[Hereward]

@thibaudcolas - thanks. I am thinking about migrating my project over to your text editor. I've been using react-draft-wysiwyg for a while now but there has been an endless stream of bugs with it. I think the reason I did not use your editor before was due to lack of default support for inserting images, but I notice your demo has an image option now.

One problem that comes up randomly in my current editor when pasting rich text is a fatal error "Uncaught Invariant Violation: Unknown DraftEntity key: null." This is not a paste from word - it's just fairly basic HTML.

When I have time I may see if I can integrate your editor with my code. Thanks :)

[Hereward]

FYI - the "Invariant Violation" error happens when I try to paste HTML containing the <figure> tag.

[thibaudcolas]

Hmmm that issue sounds like the copy-paste processing trying to create an image, and then the editor not being able to render it for some reason (a missing entity key would mean the image block is there, but not linked to any image data?).

My editor doesn’t support as many things as react-draft-wysiwyg, but it’s built with https://www.draft-js-plugins.com/, so you may be able to use things from there? Otherwise yes the demos have an example of an image block. It’s limited but it works :) The main reason why this isn’t built-in is that how images should work depends a lot on where the editor is integrated (e.g. a CMS, blog comments, etc).

[Hereward]

OK thanks :)