Why does QuillJS/React-Quill ignore my dangerouslyPasteHTML? (Video Embedding)

440 Views Asked by At

  const youTubeVideoHandler = () => {
    const editor = quillRef.current.getEditor();
    let url = prompt("Enter Video URL: ");
    url = getVideoUrl(url);
    // console.log("URL", url);
    const newHTML = `<iframe class="ql-video" frameborder="0" allowfullscreen="true" src=${url}></iframe>`;
    let range = editor.getSelection();
    editor.clipboard.dangerouslyPasteHTML(range, newHTML);
    // if (url != null) {
    //   editor.insertEmbed(range, "video", url);
    // }
  };

I am using quill-upload to allow users to upload their own videos and images to the editor (works great) but I also wanted them to be able to embed YouTube links and this is where things get crazy.

I have a button for this, and the code for the handler is above.

The clipboard.dangerouslyPasteHTML and the commented-out insertEmbed methods both fail for me in spectacular ways that I don't understand.

For dangerouslyPasteHTML, if 'newHTML' was something benign like Hello

then it works as expected. With my example however quill completely ignores that I want an iframe and gives me a video instead with the "quill-upload-video" class which makes it useless as I can't embed the YouTube link at this point as it requires an iframe.

For insertEmbed, the same thing happens. It gives me a element with the "quill-upload-video" class.

I am certain that something about the quill-upload package is telling Quill to do this but I can't understand what. Is there a hacky-way to force raw HTML in some other way or override what quill-upload is doing to influence this?

0

There are 0 best solutions below