NotFoundError: Node.removeChild: Il nodo da rimuovere non è un figlio di questo nodo

Sviluppatore
1

Ho sviluppato un componente tema:

Sostituisce i BBCode con SVG. Questo funziona anche nell’anteprima dell’editor.

Il mio problema è che in alcuni casi ricevo un errore quando digito un carattere nell’editor:

NotFoundError: Node.removeChild: Il nodo da rimuovere non è un figlio di questo nodo

Sono abbastanza sicuro che questo sia legato al fatto che ho rimosso alcuni elementi, perché se non rimuovo nulla, non ricevo l’errore.

MODIFICA: Non si verifica quando effettuo la rimozione, ma quando digito il primo carattere nell’editor dopo la rimozione.

La mia domanda è se la rimozione degli elementi non è consentita?

Se lo è; Avete qualche idea sul motivo per cui ricevo questo errore?

Mi rendo conto che è un po’ vago. Potrei essere in grado di fornire maggiori dettagli se necessario.

Lo stack trace è visibile qui:

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

2

EDIT 2: Non rimuovo solo gli elementi. A volte rimuovo solo i nodi di testo.

3

Posso riprodurre il problema con questo semplice componente del tema:

<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 nuovo argomento
  2. Inizia a digitare. L’errore appare nella console di sviluppo per il secondo carattere digitato.
4

L’anteprima del compositore utilizza Ember per renderizzare il contenuto cooked. Sembra che quell’errore provenga dal motore di rendering di Ember, che probabilmente viene confuso dal fatto che il DOM venga modificato da qualcos’altro.

Per evitare il problema, ti suggerisco di non remove() alcun nodo, ma di nasconderli invece utilizzando display:none; o qualcosa di simile.

5

Grazie. È una soluzione alternativa che stavo pensando di adottare, ma apprezzerei se potessi confermare se questo è un bug o meno.

6

L’anteprima del compositore è una combinazione insolita di rendering di Ember e funzioni personalizzate ‘decorateCooked’. Sembra che questo sia un comportamento specifico di tale implementazione. Al momento non abbiamo piani per modificare il suo funzionamento, soprattutto perché l’aggiornamento è semplice ed efficace.

7

@j.jaffeux Ho notato che hai passato questa funzione cleanUp a api.cleanupStream quando hai usato WidgetGlue.

Sto riscontrando l’errore nell’OP quando provo a scrivere nel composer dopo che il mio widget si è attaccato. In particolare, il div data-wrap originale è completamente scomparso dopo averlo selezionato con WidgetGlue.appendTo()…

EDIT: Risolto. Ho creato un nodo <div> sacrificale da far consumare al Widget, in modo da poter lasciare il div [wrap=dice] attivo.

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