From 4991bdf689e876e8b7b5f7886c09c07724781d89 Mon Sep 17 00:00:00 2001
From: 01zulfi <85733202+01zulfi@users.noreply.github.com>
Date: Tue, 25 Nov 2025 13:34:11 +0500
Subject: [PATCH] editor: readonly table fixes * fix tables not hiding under
 collapsed headings in readonly view * allow column resizing in readonly view
 * fix scrollbar not showing in readonly view

Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
---
 .../editor/src/extensions/table/component.tsx | 24 +++++++++++--------
 .../prosemirror-tables/columnresizing.ts      |  2 --
 packages/editor/src/extensions/table/table.ts | 15 ++++++++----
 3 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/packages/editor/src/extensions/table/component.tsx b/packages/editor/src/extensions/table/component.tsx
index d9ee1f43a..5ee339fae 100644
--- a/packages/editor/src/extensions/table/component.tsx
+++ b/packages/editor/src/extensions/table/component.tsx
@@ -90,16 +90,20 @@ export function TableComponent(
   return (
     <>
       <DesktopOnly>
-        <TableRowToolbar
-          editor={editor}
-          table={tableRef}
-          textDirection={textDirection}
-        />
-        <TableColumnToolbar
-          editor={editor}
-          table={tableRef}
-          textDirection={textDirection}
-        />
+        {editor.isEditable ? (
+          <>
+            <TableRowToolbar
+              editor={editor}
+              table={tableRef}
+              textDirection={textDirection}
+            />
+            <TableColumnToolbar
+              editor={editor}
+              table={tableRef}
+              textDirection={textDirection}
+            />
+          </>
+        ) : null}
         <SimpleBar autoHide style={{ overflowY: "hidden" }}>
           <div dir={textDirection}>
             <table
diff --git a/packages/editor/src/extensions/table/prosemirror-tables/columnresizing.ts b/packages/editor/src/extensions/table/prosemirror-tables/columnresizing.ts
index f51120747..382033d96 100644
--- a/packages/editor/src/extensions/table/prosemirror-tables/columnresizing.ts
+++ b/packages/editor/src/extensions/table/prosemirror-tables/columnresizing.ts
@@ -143,8 +143,6 @@ function handleMouseDown(
   cellMinWidth: number,
   defaultCellMinWidth: number
 ): boolean {
-  if (!view.editable) return false;
-
   const win = view.dom.ownerDocument.defaultView ?? window;
 
   const pluginState = columnResizingPluginKey.getState(view.state);
diff --git a/packages/editor/src/extensions/table/table.ts b/packages/editor/src/extensions/table/table.ts
index e344c10db..0ec79387f 100644
--- a/packages/editor/src/extensions/table/table.ts
+++ b/packages/editor/src/extensions/table/table.ts
@@ -19,6 +19,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 
 import {
   callOrReturn,
+  Editor,
   getExtensionField,
   mergeAttributes,
   Node,
@@ -30,7 +31,6 @@ import { EditorView, NodeView } from "@tiptap/pm/view";
 import { createColGroup } from "./utilities/createColGroup.js";
 import { createTable } from "./utilities/createTable.js";
 import { deleteTableWhenAllCellsSelected } from "./utilities/deleteTableWhenAllCellsSelected.js";
-import { TableView } from "./TableView.js";
 import { TableNodeView } from "./component.js";
 import {
   addColumnAfter,
@@ -477,7 +477,7 @@ export const Table = Node.create<TableOptions>({
   },
 
   addProseMirrorPlugins() {
-    const isResizable = this.options.resizable && this.editor.isEditable;
+    const isResizable = this.options.resizable;
 
     return [
       ...(isResizable
@@ -489,7 +489,7 @@ export const Table = Node.create<TableOptions>({
                 this.options.showResizeHandleOnSelection
             })
           ]
-        : [tiptapTableView(this.options.cellMinWidth)]),
+        : [tiptapTableView(this.editor, this.options.cellMinWidth)]),
       tableEditing({
         allowTableNodeSelection: this.options.allowTableNodeSelection
       })
@@ -512,11 +512,16 @@ export const Table = Node.create<TableOptions>({
 });
 
 const TiptapTableViewPluginKey = new PluginKey("TiptapTableView");
-function tiptapTableView(cellMinWidth: number): Plugin {
+function tiptapTableView(editor: Editor, cellMinWidth: number): Plugin {
   return new Plugin({
     key: TiptapTableViewPluginKey,
     props: {
-      nodeViews: { [Table.name]: (node) => new TableView(node, cellMinWidth) }
+      nodeViews: {
+        [Table.name]: (node, view) => {
+          const View = TableNodeView(editor);
+          return new View(node, cellMinWidth, view);
+        }
+      }
     }
   });
 }