Aquí está la reproducción de Code Sandbox.

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

Tengo un lugar en mi aplicación, donde necesito insertar los contenidos para el editor de pluma (uno deshabilitado) para que un usuario pueda obtener una vista previa de un correo electrónico compuesto antes de enviarlo.

Hay una hinchazón personalizada llamada "Variable". Se utiliza como marcador de posición y se sustituye por algunos datos reales en el servidor (cuando se envía un correo electrónico a varios destinatarios). Está representado por estos rectángulos azules en la foto. arriba.

El problema es el siguiente. Incluso si no uso ninguno de estos bloats personalizados, si todo el cuerpo del mensaje se ve como una sola cadena con al menos dos bloques de formato, aparece el mensaje de error especificado en el encabezado: "after.appendChild no es una función ":

Esto es lo que tengo en el paso 3 (al editar)

Y esto es cuando se previsualiza en el paso 4 (se inserta con el método quillInstance.setContents ).

Y la consola.

Entonces qué hice. Tomé el objeto de datos real que se inserta en esa nueva instancia del editor de pluma a través del método .setContents e intenté reproducir el problema de forma aislada (consulte el enlace de reproducción de Code Sandbox en la parte superior).

Y encontré algo interesante. Resulta que el problema se resuelve si comentas las siguientes líneas:

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

Entonces parece que ni siquiera importa si se usa la hinchazón o no; solo importa si la hinchazón está registrada. Y si es así, entonces el código no funciona correctamente.

contra

Entonces, ¿qué puedo hacer al respecto ? ¡Agradecería cualquier ayuda!