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 لعرض المحتوى cooked. يبدو أن هذا الخطأ صادر عن محرك عرض Ember، والذي ربما يكون قد أربكه تغيير عنصر DOM من قبل شيء آخر.

لتجنب هذه المشكلة، أقترح ألا تقوم بحذف أي عُقد باستخدام remove()، بل قم بإخفائها باستخدام display:none; أو ما شابه ذلك.

5

شكرًا لك. هذا حل بديل كنت أفكر فيه، لكنني سأقدر لو يمكنك تأكيد ما إذا كان هذا خطأ أم لا.

6

معاينة المُنشئ هي مزيج غير عادي من عرض Ember ووظائف ‘decorateCooked’ المخصصة. يبدو أن هذا سمة من سمات هذا التنفيذ. لا نخطط لتغيير طريقة عمله في الوقت الحالي، خاصةً أن الحل البديل بسيط وواضح.

7

@j.jaffeux لاحظت أنك تمرر دالة cleanUp هذه إلى api.cleanupStream عند استخدامك لـ WidgetGlue.

أواجه الخطأ المذكور في المنشور الأصلي (OP) عند محاولة الكتابة في المحرر بعد إرفاق الودجت. ومن الجدير بالذكر أن عنصر div data-wrap الأصلي قد اختفى تمامًا بعد استهدافه باستخدام WidgetGlue.appendTo()…

تحرير: تم الحل. قمت بإنشاء عقدة <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);