React Quill - HTML Element with ID not Rendering Inside Editor - reactjs

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;