feat(tables,react-tables): remove table plugins if view in not editab…

…le (#1905)
remirror · Oct 14, 2022 · 7dbd1ae · 7dbd1ae · github-actions · Oct 14, 2022
1 parent 03e16b5
commit 7dbd1ae
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 4 deletions.
diff --git a/.changeset/bright-ways-heal.md b/.changeset/bright-ways-heal.md
@@ -0,0 +1,6 @@
+---
+'@remirror/extension-react-tables': minor
+'@remirror/extension-tables': minor
+---
+
+Prevent table plugins (such as column resizing) from loading, if the view is not editable
diff --git a/packages/remirror__extension-react-tables/src/components/table-components.tsx b/packages/remirror__extension-react-tables/src/components/table-components.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { useHelpers } from '@remirror/react-core';
 
 import { TableCellMenu, TableCellMenuProps } from './table-cell-menu';
 import {
@@ -53,6 +54,12 @@ export const TableComponents: React.FC<TableComponentsProps> = ({
   tableDeleteRowColumnButtonProps,
   tableDeleteButtonProps,
 }) => {
+  const { isViewEditable } = useHelpers();
+
+  if (!isViewEditable()) {
+    return null;
+  }
+
   return (
     <>
       {enableTableCellMenu && <TableCellMenu {...tableCellMenuProps} />}

diff --git a/packages/remirror__extension-react-tables/src/components/table-controller-cell.ts b/packages/remirror__extension-react-tables/src/components/table-controller-cell.ts
@@ -26,12 +26,15 @@ const TableControllerCell = ({
 
   const events = createControllerEvents({ view, findTable });
 
+  const childNodes = view.editable
+    ? [...TableInsertButtonTrigger({ view, findTable }), ...TableInsertMark()]
+    : [];
+
   const wrapper = h(
     'div',
     { contentEditable: 'false', className: ExtensionTablesTheme.TABLE_CONTROLLER_WRAPPER },
     contentDOM,
-    ...TableInsertButtonTrigger({ view, findTable }),
-    ...TableInsertMark(),
+    ...childNodes,
   );
 
   return h(

diff --git a/packages/remirror__extension-react-tables/src/table-extensions.tsx b/packages/remirror__extension-react-tables/src/table-extensions.tsx
@@ -67,7 +67,11 @@ export class TableExtension extends BaseTableExtension {
    * Add the table plugins to the editor.
    */
   createExternalPlugins(): ProsemirrorPlugin[] {
-    const plugins = [];
+    const plugins: ProsemirrorPlugin[] = [];
+
+    if (this.store.isMounted() && this.store.helpers.isViewEditable() === false) {
+      return plugins;
+    }
 
     if (this.options.resizable) {
       // Add first to avoid highlighting cells while resizing
@@ -127,6 +131,8 @@ export class TableExtension extends BaseTableExtension {
   }
 
   onView(view: EditorView): void {
+    super.onView(view);
+
     // We have multiple node types which share a eom table_row in this
     // extension. In order to make the function `tableNodeTypes` from
     // `prosemirror-extension-tables` return the correct node type, we

diff --git a/packages/remirror__extension-tables/src/table-extensions.ts b/packages/remirror__extension-tables/src/table-extensions.ts
@@ -5,6 +5,7 @@ import {
   CommandFunctionProps,
   convertCommand,
   EditorState,
+  EditorView,
   extension,
   ExtensionPriority,
   ExtensionTag,
@@ -102,11 +103,21 @@ export class TableExtension extends NodeExtension<TableOptions> {
     }
   }
 
+  onView(_: EditorView): void {
+    if (this.store.helpers.isViewEditable() === false) {
+      this.store.updateExtensionPlugins(this);
+    }
+  }
+
   /**
    * Add the table plugins to the editor.
    */
   createExternalPlugins(): ProsemirrorPlugin[] {
-    const plugins = [];
+    const plugins: ProsemirrorPlugin[] = [];
+
+    if (this.store.isMounted() && this.store.helpers.isViewEditable() === false) {
+      return plugins;
+    }
 
     if (this.options.resizable) {
       // Add first to avoid highlighting cells while resizing