Denotation char span in blot is being flattened by setting innerText

[crabmusket]

Currently, the MentionBlot adds the value using innerText:

quill-mention/src/blots/mention.js

Line 26 in f2801f2

node.innerText += data.value;

Previously, this was innerHTML:

quill-mention/src/blots/mention.js

Line 21 in 312704e

node.innerHTML += data.value;

I assume this change was made for safety reasons. However, this means the resulting HTML has changed from

<span class="mention" data-denotation-char="@" data-value="Mentioned Name" data-id="...">
  <span>
    <span class="ql-mention-denotation-char">@</span>
    Mentioned Name
  </span>
</span>

To

<span class="mention" data-denotation-char="@" data-value="Mentioned Name" data-id="...">
  <span>@Mentioned Name</span>
</span>

This isn't the end of the world, but I think it'd be nice to maintain existing behaviour. I suspect the solution is something like:

    if (typeof this.render === "function") {
      node.appendChild(this.render(data));
    } else {
      node.appendChild(document.createTextNode(data.value));
    }

I'm happy to PR this if you agree! Otherwise it might be worth noting this in the readme for others upgrading from 3.x

[csculley]

I'd be in favor of putting back the previous HTML structure with a minor version, but it might not be necessary due to the major version being upgraded.

[rupeshdeotale97]

@crabmusket / @csculley Any update so far over above issue I'm also facing this issue. We are dynamically replacing placeholder with class="ql-mention-denotation-char" name but now it's not coming in latest version.

[csculley]

@rupeshdeotale97 Can you make a new Q&A question for that issue with more information here? You should have full access to how list items and mention blot nodes are displayed. The docs webpage also has an example of overriding the mention item however you'd like which might be helpful here