getHTML/getSemanticHTML strips embed, replaces with hyperlink

[enzedonline]

When using the video module to embed a YouTube clip, quill.editor.getHTML(0, quill.getLenth()) or quill.getSemanticHTML() converts the iframe to a hyperlink.

Steps for Reproduction

Quill playground link.

const quill = new Quill('#editor', {
  modules: {
    toolbar: [
      ['video'],
    ],
  },
  placeholder: 'Compose an epic...',
  theme: 'snow', // or 'bubble'
});
const divOutput = document.createElement('div');
quill.container.insertAdjacentElement('afterend', divOutput);
divOutput.textContent = 'Insert video';
quill.on('text-change', () => {
    divOutput.textContent = quill.getSemanticHTML();
});

Example editor video html:

 <iframe 
  class="ql-video ql-iframe-align-right" 
  frameborder="0" allowfullscreen="true" 
  src="https://www.youtube.com/embed/eDRgzEVwVEc?showinfo=0" 
  height="270.27734436035155" width="542">
</iframe>

getSemanticHTML output:

<a href="https://www.youtube.com/embed/eDRgzEVwVEc?showinfo=0"
  target="_blank" rel="nofollow noopener">
  https://www.youtube.com/embed/eDRgzEVwVEc?showinfo=0
</a>

Expected behavior: embeds and their attributes (i.e. src, height, width, classList etc) should be preserved

Actual behavior: it's converted to an hyperlink. Outputting as a hyperlink makes getHTML and getSemanticHTML() unusable for its intended purpose since this should be a direct HTML representation of the editor contents.

Platforms: quilljs 2.0.2, windows 10, chrome

Version: 2.0.2

[enzedonline]

see #4829

[skillcapesoftware]

@enzedonline Your link is broken from the comment above to a potential fix. Could you reply with where to find the suggested workaround?

[enzedonline]

@skillcapesoftware weird, I can link to other issues in that comment but not that issue, but it works here ... #4289.

This issue isn't resolved, it's just combined with a few other issues with getSemanticHTML listed on the other one. It's caused by the html method of Quill's video embed.

The workaround for video is to create a custom embed extending the video embed and overriding the html method. Something like:

const VideoEmbed = Quill.import("formats/video") as any;

class Video extends VideoEmbed {
    html () {
        return this.domNode.outerHTML;
    }
}

Quill.register(Video, true);