NotFoundError: Node.removeChild: El nodo a eliminar no es un hijo de este nodo

Desarrollador
1

He desarrollado un componente de tema:

Reemplaza el BBCode por SVG. Esto también funciona en la vista previa del editor.

Mi problema es que en algunos casos obtengo un error cuando escribo un carácter en el editor:

NotFoundError: Node.removeChild: El nodo que se va a eliminar no es un hijo de este nodo

Estoy bastante seguro de que esto está relacionado con el hecho de que he eliminado algunos elementos, porque si no elimino nada, no obtengo el error.

EDIT: No ocurre cuando realizo la eliminación, sino cuando escribo el primer carácter en el editor después de la eliminación.

Mi pregunta es si eliminar elementos no está permitido.

Si lo está; ¿Tienen alguna idea de por qué obtengo este error?

Me doy cuenta de que esto es un poco vago. Puedo proporcionar más detalles si es necesario.

La traza de la pila se puede ver aquí:

Screenshot from 2020-06-13 11-34-55
Screenshot from 2020-06-13 11-34-551846×984 186 KB

2

EDIT 2: No solo elimino elementos. A veces elimino solo nodos de texto.

3

Puedo reproducir esto con este componente de tema simple:

<script type="text/discourse-plugin" version="0.8">

  api.decorateCooked($elem => {
    if ($elem.get(0).className == 'd-editor-preview') {
      const $paragraphs = $elem.children('p');
      $.each($paragraphs, (paragraphIndex, paragraph) => {
        paragraph.remove();
      });
    }
  });

</script>
  1. Crea un nuevo tema
  2. Empieza a escribir. El error aparece en la consola de desarrollo para el segundo carácter que se escribe.
4

La vista previa del compositor utiliza Ember para renderizar el contenido cooked. Parece que ese error proviene del motor de renderizado de Ember, que probablemente se confunde porque el DOM está siendo modificado por otra cosa.

Para evitar el problema, sugiero que no remove() ningún nodo y, en su lugar, los ocultes usando display:none; o algo similar.

5

Gracias. Es una solución alternativa que he estado considerando, pero agradecería que confirmaras si esto es un error o no.

6

La vista previa del compositor es una combinación inusual de renderizado de Ember y funciones personalizadas ‘decorateCooked’. Parece que esto es una peculiaridad de esa implementación. No tenemos planes de cambiar su funcionamiento por ahora, especialmente porque la solución alternativa es agradable y sencilla.

7

@j.jaffeux Noto que pasas esta función cleanUp a api.cleanupStream cuando usas WidgetGlue.

Estoy obteniendo el error en el mensaje original cuando intento escribir en el compositor después de que se adjunta mi widget. Cabe destacar que el div data-wrap original desaparece por completo después de que lo apunto con WidgetGlue.appendTo()…

EDIT: Resuelto. Creo un nodo <div> sacrificial para que el widget lo consuma, de modo que pueda dejar el div [wrap=dice] activo.

  // elem: <div class="d-wrap" data-wrap="dice">

  //- const glue = new WidgetGlue("dice-result", register, attrs);
  elem.innerHTML = "";
  //- glue.appendTo(elem);
  const sacrificial = document.createElement("div");
  elem.appendChild(sacrificial);
  attachDiceWidget(sacrificial, attrs);