From 60a373f4889cb561196d144356c1442da0fe6686 Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sun, 31 Aug 2025 12:04:27 -0700
Subject: [PATCH] fix: readonly editor table responsiveness

---
 packages/editor-ext/src/lib/table/table.ts | 30 +++++++++++++++++-----
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/packages/editor-ext/src/lib/table/table.ts b/packages/editor-ext/src/lib/table/table.ts
index 549847b8..87053832 100644
--- a/packages/editor-ext/src/lib/table/table.ts
+++ b/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({
       },
     };
   },
-});
\ No newline at end of file
+
+  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;
+  },
+});