Update React app state from React Quill content element node on click

I want to allow a specific element in the body of a React Quill editor to update the app context on click.

How can I do it?

Here is the custom blot I’ve made:

/* Mention blot config
  ====================== */
class MentionBlot extends BlockEmbed {
  static create(data) {
    const node = super.create();
    const denotationChar = document.createElement("span");
    denotationChar.className = "ql-mention-denotation-char";
    denotationChar.innerHTML = data.denotationChar;
    node.appendChild(denotationChar);
    node.innerHTML += data.value;
    return MentionBlot.setDataValues(node, data);
  }

  static setDataValues(element, data) {
    const domNode = element;
    Object.keys(data).forEach((key) => {
      domNode.dataset[key] = data[key];
    });
    return domNode;
  }

  static value(domNode) {
    return domNode.dataset;
  }
}

MentionBlot.blotName = "mentionCustom";
MentionBlot.tagName = "span";
MentionBlot.className = "mention";

Quill.register("formats/mentionCustom", MentionBlot);

And here is a screenshot of the elements in question:

Thank you 😃

Ticket due diligence

• I have verified that the issue persists under ReactQuill v2.0.0-beta.2
• I can’t use the beta version for other reasons

ReactQuill version

• master
• v2.0.0-beta.2
• v2.0.0-beta.1
• 1.3.5
• 1.3.4 or older
• Other (fork)

[raw-brt]

Thank you very much, Alex.

I’ll give it a try.

Thank you.

Best, Roberto.

[alexkrolick]

Closing as this isn’t an issue with the library itself