editor: remove table view

* 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>

packages/editor/src/extensions/table/TableView.ts

@@ -1,49 +0,0 @@
-import { Node as ProseMirrorNode } from "@tiptap/pm/model";
-import { NodeView } from "@tiptap/pm/view";
-import { updateColumnsOnResize } from "./prosemirror-tables/tableview.js";
-
-export class TableView implements NodeView {
-  node: ProseMirrorNode;
-
-  cellMinWidth: number;
-
-  dom: HTMLElement;
-
-  table: HTMLTableElement;
-
-  colgroup: HTMLTableColElement;
-
-  contentDOM: HTMLElement;
-
-  constructor(node: ProseMirrorNode, cellMinWidth: number) {
-    this.node = node;
-    this.cellMinWidth = cellMinWidth;
-    this.dom = document.createElement("div");
-    this.dom.className = "tableWrapper";
-    this.table = this.dom.appendChild(document.createElement("table"));
-    this.colgroup = this.table.appendChild(document.createElement("colgroup"));
-    updateColumnsOnResize(node, this.colgroup, this.table, cellMinWidth);
-    this.contentDOM = this.table.appendChild(document.createElement("tbody"));
-  }
-
-  update(node: ProseMirrorNode) {
-    if (node.type !== this.node.type) {
-      return false;
-    }
-
-    this.node = node;
-    updateColumnsOnResize(node, this.colgroup, this.table, this.cellMinWidth);
-
-    return true;
-  }
-
-  ignoreMutation(
-    mutation: MutationRecord | { type: "selection"; target: Element }
-  ) {
-    return (
-      mutation.type === "attributes" &&
-      (mutation.target === this.table ||
-        this.colgroup.contains(mutation.target))
-    );
-  }
-}

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

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);

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);
+        }
+      }
     }
   });
 }