fix: readonly editor table responsiveness

packages/editor-ext/src/lib/table/table.ts

@@ -1,29 +1,34 @@
 import Table from "@tiptap/extension-table";
 import { Editor } from "@tiptap/core";
+import { DOMOutputSpec } from "@tiptap/pm/model";
 
 const LIST_TYPES = ["bulletList", "orderedList", "taskList"];
 
 function isInList(editor: Editor): boolean {
   const { $from } = editor.state.selection;
-  
+
   for (let depth = $from.depth; depth > 0; depth--) {
     const node = $from.node(depth);
     if (LIST_TYPES.includes(node.type.name)) {
       return true;
     }
   }
-  
+
   return false;
 }
 
 function handleListIndent(editor: Editor): boolean {
-  return editor.commands.sinkListItem("listItem") || 
-         editor.commands.sinkListItem("taskItem");
+  return (
+    editor.commands.sinkListItem("listItem") ||
+    editor.commands.sinkListItem("taskItem")
+  );
 }
 
 function handleListOutdent(editor: Editor): boolean {
-  return editor.commands.liftListItem("listItem") || 
-         editor.commands.liftListItem("taskItem");
+  return (
+    editor.commands.liftListItem("listItem") ||
+    editor.commands.liftListItem("taskItem")
+  );
 }
 
 export const CustomTable = Table.extend({
@@ -62,4 +67,15 @@ export const CustomTable = Table.extend({
       },
     };
   },
-});
+
+  renderHTML({ node, HTMLAttributes }) {
+    // https://github.com/ueberdosis/tiptap/issues/4872#issuecomment-2717554498
+    const originalRender = this.parent?.({ node, HTMLAttributes });
+    const wrapper: DOMOutputSpec = [
+      "div",
+      { class: "tableWrapper" },
+      originalRender,
+    ];
+    return wrapper;
+  },
+});