Quill - after.appendChild is not a function

Here's the Code Sandbox reproduction.

https://codesandbox.io/s/intelligent-chihiro-9rp0d?file=/src/index.js:1285-1329

---

I've got a place in my application, where I need to insert the contents for the quill editor (a disabled one) so that a user could preview a composed Email before sending it.

There's a custom bloat called "Variable". It's used as a placeholder and gets substituted with some real data on the server (when sending an email to multiple recepients). It's represented by these blue rectangles on the pic. above.

The problem is the following. Even if I don't use any of these cutom bloats, if the whole message body looks like a single string with at least two formatting blocks in it, I get the error message specified in the header: "after.appendChild is not a function":

This is what I have on the step 3 (when editing)

And this is when previewed on the step 4 (it's inserted with the quillInstance.setContents method).

And the console.

So what did I do. I took the actual data object which gets inserted into that new quill editor instance via the .setContents method and tried to reproduce the issue in isolation (see the Code Sandbox repro link at the top).

And I found an interesting thing. It turns out that the problem resolves if you comment out the following lines:

Quill.register({
  "formats/Variable": Variable
});

So it looks like it doesn't even matter if the bloat is used or not; it only matters if the bloat is registered at all. And if it is, then the code doesn't work properly.

vs.

So, what can I do about it? Would appreciate any help!

In my case I set the tagName to div instead of span and the problem now seems to be fixed.

In your example move Variable to the last entry in the formats array.