YouTube <iframe> gone after switching to HTML or WYSIWYG mode

[AbrahamAriel]

I have some contents that embeds YouTube videos in it with the YouTube iframe embed code. I thought it'd be a good idea to have woofmark previews it in the WYSIWYG mode but then it never appeared. Switching to HTML mode also shows that it's gone.

Markdown to HTML = iframe gone Markdown to WYSIWYG = iframe gone Start in HTML/WYSIWYG = iframe gone

[bevacqua]

I presume this is because the <iframe> is sanitized away. Have you configured the sanitizer in your Markdown parser to support iframes?

[jywarren]

I need this myself, and this is possible by configuring sanitizers in megamark, which is often paired with woofmark as a markdown parser: https://github.com/bevacqua/megamark#optionssanitizer

These are then passed to insane (https://github.com/bevacqua/insane), but the format for megamark is:

 megamark('**foo**', {
    allowedTags: ['iframe']
});

I'm testing this out in a moment in PublicLab.Editor, which uses woofmark. I'll update here if it works with a link to a code example.

[jywarren]

This worked. I'll share code shortly but now we also need to allow iframe on the HTML parser, which for me is domador. Perhaps it's the allowFrame setting?

https://github.com/bevacqua/domador#allowframe

[jywarren]

Hm, I'm not able to get that to work, passing a function to allowFrame that returns true. Trying just the value true now. Also noting that woofmark (on my local, so possibly needs update) uses domador v2.4.2 and allowFrame was added in v2.2.0 so we should be OK.

[jywarren]

Still not working. I'll create an issue on domador to find out more.

[jywarren]

Posted at https://github.com/bevacqua/domador/issues/10 -- any help appreciated! Thanks :-)

[jywarren]

Relaying back; @bevacqua sez:

Thus, the issue is probably in that you're allowing frames on domador but then woofmark isn't configured to support YouTube iframes at the sanitizer level, and then they are stripped out. That would be my guess.

Looking into sanitizing code/config in woofmark now, to check this idea out.

[jywarren]

I'm having some success adding to the transform function:

        transform: function (el) {
          if (el.tagName === 'IFRAME') {
            return '\n\n' + el.outerHTML;
          }
        }

This seems to work.

[jywarren]

OK, posting solution in https://github.com/publiclab/PublicLab.Editor/pull/107; this is possible via configuration, although it's about ~20 lines of code due to having to rewrite the allowedTags and allowedAttributes defaults.