NotFoundError: Node.removeChild: Удаляемый узел не является дочерним для этого узла

Разработка
1

Я разработал компонент темы:

Он заменяет BBCode на SVG. Это также работает в предпросмотре редактора.

Моя проблема в том, что в некоторых случаях при вводе символа в редакторе возникает ошибка:

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

Я почти уверен, что это связано с тем, что я удаляю некоторые элементы, потому что если я ничего не удаляю, ошибки не возникает.

РЕДАКТИРОВАНИЕ: Ошибка возникает не в момент удаления, а при вводе первого символа в редакторе после удаления.

Мой вопрос: не разрешено ли удаление элементов?

Если разрешено: есть ли у вас идеи, почему возникает эта ошибка?

Понимаю, что вопрос довольно общий. При необходимости я могу предоставить более подробную информацию.

Стек вызовов можно увидеть здесь:

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

2

РЕДАКТИРОВАНИЕ 2: Я удаляю не только элементы. Иногда я удаляю только текстовые узлы.

3

Я могу воспроизвести это с помощью этого простого компонента темы:

<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. Создайте новую тему.
  2. Начните печатать. Ошибка появляется в консоли разработчика при вводе второго символа.
4

Предпросмотр композитора использует Ember для отображения «обработанного» контента. Похоже, что эта ошибка исходит из движка рендеринга Ember, который, вероятно, запутался из-за того, что DOM был изменён чем-то другим.

Чтобы избежать этой проблемы, я рекомендую не удалять (remove()) узлы, а скрывать их, используя display: none; или что-то подобное.

5

Спасибо. Это обходной путь, о котором я думал, но я был бы признателен, если бы вы подтвердили, является ли это действительно ошибкой или нет.

6

Предпросмотр композитора — это необычное сочетание рендеринга Ember и пользовательских функций ‘decorateCooked’. Похоже, это особенность данной реализации. На данный момент у нас нет планов изменять способ его работы, особенно учитывая, что обходной путь прост и удобен.

7

@j.jaffeux Я заметил, что вы передали эту функцию cleanUp в api.cleanupStream, когда использовали WidgetGlue.

Я получаю ошибку из первого сообщения, когда пытаюсь писать в редакторе после прикрепления виджета. Примечательно, что исходный div data-wrap полностью исчезает после того, как я обращаюсь к нему через WidgetGlue.appendTo()…

РЕДАКТИРОВАНИЕ: Решено. Я создаю жертвенный узел <div> для потребления виджетом, чтобы оставить div [wrap=dice] живым.

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