From f31611ab5343aef6d2f9fa042355b7bb651bbb75 Mon Sep 17 00:00:00 2001 From: matthewlipski Date: Thu, 14 Nov 2024 15:43:19 +0100 Subject: [PATCH 1/3] Made column resize bars get disabled when editor is non-editable --- .../src/extensions/ColumnResize/ColumnResizeExtension.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/xl-multi-column/src/extensions/ColumnResize/ColumnResizeExtension.ts b/packages/xl-multi-column/src/extensions/ColumnResize/ColumnResizeExtension.ts index aed630092..34ed9b1c2 100644 --- a/packages/xl-multi-column/src/extensions/ColumnResize/ColumnResizeExtension.ts +++ b/packages/xl-multi-column/src/extensions/ColumnResize/ColumnResizeExtension.ts @@ -56,6 +56,10 @@ class ColumnResizePluginView implements PluginView { getColumnHoverOrDefaultState = ( event: MouseEvent ): ColumnDefaultState | ColumnHoverState => { + if (!this.editor.isEditable) { + return { type: "default" }; + } + const target = event.target as HTMLElement; // Do nothing if the event target is outside the editor. From 1274d83fea0ca2c22586c478a93e2875cc19542b Mon Sep 17 00:00:00 2001 From: matthewlipski Date: Thu, 14 Nov 2024 16:00:38 +0100 Subject: [PATCH 2/3] Made table resize bars get disabled when editor is non-editable --- .../TableBlockContent/TableBlockContent.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index 174cf0654..8a8bfbd2a 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -3,7 +3,8 @@ import { TableCell } from "@tiptap/extension-table-cell"; import { TableHeader } from "@tiptap/extension-table-header"; import { TableRow } from "@tiptap/extension-table-row"; import { Node as PMNode } from "prosemirror-model"; -import { TableView } from "prosemirror-tables"; +import { Plugin } from "prosemirror-state"; +import { columnResizingPluginKey, TableView } from "prosemirror-tables"; import { createBlockSpecFromStronglyTypedTiptapNode, @@ -14,6 +15,8 @@ import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js"; import { defaultProps } from "../defaultProps.js"; import { EMPTY_CELL_WIDTH, TableExtension } from "./TableExtension.js"; +import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js"; + export const tablePropSchema = { textColor: defaultProps.textColor, }; @@ -42,6 +45,25 @@ export const TableBlockContent = createStronglyTypedTiptapNode({ ); }, + // Since we're using ProseMirror's default table column resizing plugin, we + // can't easily modify the code to prevent it from functioning when the editor + // isn't editable. Therefore, we instead filter out transactions that are + // created by the plugin as a workaround. + addProseMirrorPlugins() { + const editor: BlockNoteEditor = this.options.editor; + return [ + new Plugin({ + filterTransaction(tr) { + if (!editor.isEditable) { + return !tr.getMeta(columnResizingPluginKey); + } + + return true; + }, + }), + ]; + }, + // This node view is needed for the `columnResizing` plugin. By default, the // plugin adds its own node view, which overrides how the node is rendered vs // `renderHTML`. This means that the wrapping `blockContent` HTML element is From f8bb293fc27bc97e9ef2fa2428544e8ca18465a7 Mon Sep 17 00:00:00 2001 From: matthewlipski Date: Fri, 15 Nov 2024 20:02:00 +0100 Subject: [PATCH 3/3] Removed table non-editable fix --- .../TableBlockContent/TableBlockContent.ts | 24 +------------------ 1 file changed, 1 insertion(+), 23 deletions(-) diff --git a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts index 8a8bfbd2a..174cf0654 100644 --- a/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts +++ b/packages/core/src/blocks/TableBlockContent/TableBlockContent.ts @@ -3,8 +3,7 @@ import { TableCell } from "@tiptap/extension-table-cell"; import { TableHeader } from "@tiptap/extension-table-header"; import { TableRow } from "@tiptap/extension-table-row"; import { Node as PMNode } from "prosemirror-model"; -import { Plugin } from "prosemirror-state"; -import { columnResizingPluginKey, TableView } from "prosemirror-tables"; +import { TableView } from "prosemirror-tables"; import { createBlockSpecFromStronglyTypedTiptapNode, @@ -15,8 +14,6 @@ import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js"; import { defaultProps } from "../defaultProps.js"; import { EMPTY_CELL_WIDTH, TableExtension } from "./TableExtension.js"; -import { BlockNoteEditor } from "../../editor/BlockNoteEditor.js"; - export const tablePropSchema = { textColor: defaultProps.textColor, }; @@ -45,25 +42,6 @@ export const TableBlockContent = createStronglyTypedTiptapNode({ ); }, - // Since we're using ProseMirror's default table column resizing plugin, we - // can't easily modify the code to prevent it from functioning when the editor - // isn't editable. Therefore, we instead filter out transactions that are - // created by the plugin as a workaround. - addProseMirrorPlugins() { - const editor: BlockNoteEditor = this.options.editor; - return [ - new Plugin({ - filterTransaction(tr) { - if (!editor.isEditable) { - return !tr.getMeta(columnResizingPluginKey); - } - - return true; - }, - }), - ]; - }, - // This node view is needed for the `columnResizing` plugin. By default, the // plugin adds its own node view, which overrides how the node is rendered vs // `renderHTML`. This means that the wrapping `blockContent` HTML element is