NotFoundError: Node.removeChild: Der zu entfernende Knoten ist kein Kind dieses Knotens

Entwickler
1

Ich habe eine Theme-Komponente entwickelt:

Sie ersetzt BBCode durch SVG. Das funktioniert auch in der Editor-Vorschau.

Mein Problem ist, dass ich in einigen Fällen einen Fehler bekomme, wenn ich im Editor ein Zeichen eingebe:

NotFoundError: Node.removeChild: The node to be removed is not a child of this node

Ich bin mir ziemlich sicher, dass dies damit zusammenhängt, dass ich einige Elemente entfernt habe, denn wenn ich nichts entferne, tritt der Fehler nicht auf.

EDIT: Der Fehler tritt nicht beim Entfernen auf, sondern wenn ich das erste Zeichen im Editor nach dem Entfernen eingebe.

Meine Frage ist: Ist das Entfernen von Elementen nicht erlaubt?

Wenn ja: Haben Sie eine Idee, warum ich diesen Fehler bekomme?

Mir ist bewusst, dass dies etwas vage ist. Falls nötig, kann ich gerne weitere Details liefern.

Der Stack-Trace ist hier zu sehen:

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

2

EDIT 2: Es sind nicht nur Elemente, die ich entferne. Manchmal entferne ich nur Textknoten.

3

Ich kann dies mit dieser einfachen Theme-Komponente reproduzieren:

<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. Erstellen Sie ein neues Thema.
  2. Beginnen Sie mit der Eingabe. Der Fehler erscheint in der Entwicklerkonsole beim zweiten eingegebenen Zeichen.
4

Die Vorschau des Komponisten verwendet Ember, um den cooked-Inhalt darzustellen. Es scheint, als käme dieser Fehler aus der Ember-Rendering-Engine, die wahrscheinlich verwirrt ist, weil das DOM von etwas anderem verändert wird.

Um das Problem zu vermeiden, schlage ich vor, dass Sie keine Knoten mit remove() entfernen, sondern sie stattdessen mit display:none; oder Ähnlichem ausblenden.

5

Danke. Das ist ein Workaround, an den ich bereits gedacht habe, aber ich würde mich freuen, wenn Sie bestätigen könnten, ob dies tatsächlich ein Fehler ist oder nicht.

6

Die Composer-Vorschau ist eine ungewöhnliche Kombination aus Ember-Rendering und benutzerdefinierten „decorateCooked“-Funktionen. Es scheint, als sei dies eine Eigenheit dieser Implementierung. Wir haben derzeit keine Pläne, die Funktionsweise zu ändern, zumal der Workaround angenehm und einfach ist.

7

@j.jaffeux Ich sehe, dass du diese cleanUp-Funktion an api.cleanupStream übergibst, wenn du WidgetGlue verwendest.

Ich bekomme den Fehler im ursprünglichen Beitrag, wenn ich versuche, im Composer zu schreiben, nachdem mein Widget angehängt wurde. Auffällig ist, dass das ursprüngliche div data-wrap nach dem Targeting mit WidgetGlue.appendTo() komplett verschwunden ist…

EDIT: Gelöst. Ich erstelle einen opferbereiten <div>-Knoten für das Widget, damit ich das [wrap=dice]-div am Leben lassen kann.

  // 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);