fix: react removeChild error

ui/src/components/Editor/utils/index.ts

@@ -114,19 +114,8 @@ export function htmlRender(el: HTMLElement | null) {
     },
   );
 
-  el.querySelectorAll('table').forEach((table) => {
-    if (
-      (table.parentNode as HTMLDivElement)?.classList.contains(
-        'table-responsive',
-      )
-    ) {
-      return;
-    }
-
-    table.classList.add('table', 'table-bordered');
-    const div = document.createElement('div');
-    div.className = 'table-responsive';
-    table.parentNode?.replaceChild(div, table);
-    div.appendChild(table);
-  });
+  // remove change table style to htmlToReact function
+  /**
+   * @description: You modify the DOM with other scripts after React has rendered the DOM. This way, on the next render cycle (re-render), React cannot find the DOM node it rendered before, because it has been modified or removed by other scripts.
+   */
 }

ui/src/utils/common.ts

@@ -237,7 +237,26 @@ function htmlToReact(html: string) {
   const cleanedHtml = DOMPurify.sanitize(html, {
     USE_PROFILES: { html: true },
   });
-  return parse(cleanedHtml);
+
+  const ele = document.createElement('div');
+  ele.innerHTML = cleanedHtml;
+
+  ele.querySelectorAll('table').forEach((table) => {
+    if (
+      (!table || (table.parentNode as HTMLDivElement))?.classList.contains(
+        'table-responsive',
+      )
+    ) {
+      return;
+    }
+
+    table.classList.add('table', 'table-bordered');
+    const div = document.createElement('div');
+    div.className = 'table-responsive';
+    table.parentNode?.replaceChild(div, table);
+    div.appendChild(table);
+  });
+  return parse(ele.innerHTML);
 }
 
 export {