React Quill - HTML Element with ID not Rendering Inside Editor

Question

I am using React Quill (https://github.com/zenoamaro/react-quill) as a rich text editor in my React project.

Im running into an issue when inserting the below html span element to the editor with an ID: <span id='incInsert'></span>

The value of the text editor is contained within React State and when console.logging state i can see the span element in there:

However, the span element doesnt exist when inspecting via chrome dev tools and thus in the DOM.

The reason why I need this element to exist in the DOM is because i need to use document.getElementById('incInsert') to insert HTML into the span element which is done later in my submit function.

TIA

Answer 1

I had the same problem, I solved it as follows:

import React, { useState, useRef } from "react";
import ReactQuill, { Quill } from "react-quill"; // ES6

import "react-quill/dist/quill.snow.css";

const Inline = Quill.import("blots/inline");

function MyComponent() {
  const [content, setContent] = useState("");
  const reactQuillRef = useRef(null);

  const createElementWithClassName = () => {
    class SpanBlock extends Inline {
      static create() {
        let node = super.create();
        node.setAttribute("class", "spanblock");
        node.setAttribute("id", "myId")

        return node;
      }
    }
    SpanBlock.blotName = "spanblock";
    SpanBlock.tagName = "div";
    Quill.register(SpanBlock);

    const div = document.createElement("div");
    var quill = new Quill(div);

    quill.setContents([
      {
        insert: "hello",
        attributes: {
          spanblock: true,
        },
      },
    ]);

    const result = quill.root.innerHTML;
    console.log(result);
    return result;
  };

  const buttonClick = () => {
    const quill = reactQuillRef.current.getEditor();
    const oldHtml = quill.root.innerHTML;
    const newElement = createElementWithClassName();
    const newHtml = oldHtml + newElement;

    setContent(newHtml);
  };

  return (
    <div>
      <ReactQuill
        ref={reactQuillRef}
        modules={{
          toolbar: [
            [{ font: [] }, { size: ["small", false, "large", "huge"] }], // custom dropdown

            ["bold", "italic", "underline", "strike"],

            [{ color: [] }, { background: [] }],

            [{ script: "sub" }, { script: "super" }],

            [{ header: 1 }, { header: 2 }, "blockquote", "code-block"],

            [
              { list: "ordered" },
              { list: "bullet" },
              { indent: "-1" },
              { indent: "+1" },
            ],

            [{ direction: "rtl" }, { align: [] }],

            ["link", "image", "video", "formula"],

            ["clean"],
          ],
        }}
        value={content}
        onChange={(content) => {
          setContent(content);
        }}
      />
      <button onClick={buttonClick}>click me</button>
    </div>
  );
}

export default MyComponent;