테마 컴포넌트를 개발했습니다:
이것은 BBCode를 SVG로 대체합니다. 에디터 미리보기에서도 작동합니다.
제 문제는 에디터에서 문자를 입력할 때 경우에 따라 오류가 발생한다는 것입니다:
NotFoundError: Node.removeChild: The node to be removed is not a child of this node
일부 요소를 제거했기 때문에 이 오류가 발생하는 것이라 확신합니다. 아무것도 제거하지 않으면 오류가 발생하지 않기 때문입니다.
수정: 제거 작업을 수행할 때 발생하는 것이 아니라, 제거 작업 후 에디터에서 첫 번째 문자를 입력할 때 발생합니다.
제 질문은 요소를 제거하는 것이 허용되지 않는다는 것인지요?
허용된다면, 이 오류가 발생하는 이유에 대해 어떤 아이디어가 있으신가요?
이것이 다소 모호하다는 것을 알고 있습니다. 필요하면 더 많은 세부 정보를 제공할 수 있습니다.
스택 트레이스는 여기서 볼 수 있습니다:
수정 2: 제가 제거하는 것은 요소뿐이 아닙니다. 때로는 텍스트 노드만 제거하기도 합니다.
이 간단한 테마 컴포넌트로 이 문제를 재현할 수 있습니다:
<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>
컴포저 미리보기는 cooked 콘텐츠를 렌더링하기 위해 ember를 사용합니다. 해당 오류는 DOM이 다른什么东西에 의해 변경되어 혼란에 빠진 것으로 보이는 ember 렌더링 엔진에서 발생하는 것 같습니다.
이 문제를 피하려면 노드를 remove()하지 말고, 대신 display:none; 또는 유사한 방법으로 숨기는 것을 권장합니다.
감사합니다. 제가 계속 생각해 왔던 우회 방법인데요, 이것이 버그인지 아닌지 확인해 주시면 감사하겠습니다.
컴포저 미리보기는 Ember 렌더링과 사용자 정의 ‘decorateCooked’ 함수의 특이한 조합입니다. 이는 해당 구현 방식의 특징으로 보입니다. 현재로서는 동작 방식을 변경할 계획이 없으며, 특히 우회 방법이 간단하고 편리하기 때문입니다.
@j.jaffeux WidgetGlue를 사용할 때 cleanUp 함수가 api.cleanupStream에 전달되고 있는 것을 확인했습니다.
위젯이 부착된 후 컴포저에 입력을 시도하면 OP에서 언급된 오류가 발생합니다. 특히 WidgetGlue.appendTo()로 [wrap=dice] div를 타겟팅한 후 원래의 div data-wrap가 완전히 사라집니다…
수정: 해결했습니다. 위젯이 소비할 제물용 <div> 노드를 생성하여 [wrap=dice] div를 살아 있게 유지할 수 있도록 했습니다.
// 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);