Table improvements (#6958)

* Header toggling, resizable columns

* Allow all blocks in table cells, disable column resizing in read-only

* Fixed dynamic scroll shadows

* Refactor, scroll styling

* fix scrolling, tweaks

* fix: Table layout lost on sort

* fix: Caching of grip decorators

* refactor

* stash

* fix first render shadows

* stash

* First add column grip, styles

* Just add column/row click handlers left

* fix: isTableSelected for single cell table

* Refactor mousedown handlers

* fix: 'Add row before' command missing on first row

* fix overflow on rhs

* fix: Error clicking column grip when menu is open

* Hide table controls when printing

* Restore table header background

* fix: Header behavior when adding columns and rows at the edges

* Tweak header styling

* fix: Serialize and parsing of column attributes when copy/pasting
fix: Column width is lost when changing column alignment

shared/editor/nodes/Table.ts

@@ -1,28 +1,35 @@
 import { chainCommands } from "prosemirror-commands";
 import { NodeSpec, Node as ProsemirrorNode } from "prosemirror-model";
-import { Plugin } from "prosemirror-state";
 import {
   addColumnAfter,
-  addColumnBefore,
+  addRowAfter,
+  columnResizing,
   deleteColumn,
   deleteRow,
   deleteTable,
   goToNextCell,
   tableEditing,
-  toggleHeaderCell,
-  toggleHeaderColumn,
-  toggleHeaderRow,
+  toggleHeader,
 } from "prosemirror-tables";
-import { Decoration, DecorationSet } from "prosemirror-view";
 import {
+  addRowBefore,
+  addColumnBefore,
   addRowAndMoveSelection,
   setColumnAttr,
   createTable,
   sortTable,
+  setTableAttr,
 } from "../commands/table";
 import { MarkdownSerializerState } from "../lib/markdown/serializer";
 import tablesRule from "../rules/tables";
+import { EditorStyleHelper } from "../styles/EditorStyleHelper";
+import { TableLayout } from "../types";
 import Node from "./Node";
+import { TableView } from "./TableView";
+
+export type TableAttrs = {
+  layout: TableLayout | null;
+};
 
 export default class Table extends Node {
   get name() {
@@ -36,15 +43,17 @@ export default class Table extends Node {
       isolating: true,
       group: "block",
       parseDOM: [{ tag: "table" }],
+      attrs: {
+        layout: {
+          default: null,
+        },
+      },
       toDOM() {
+        // Note: This is overridden by TableView
         return [
           "div",
-          { class: "scrollable-wrapper table-wrapper" },
-          [
-            "div",
-            { class: "scrollable" },
-            ["table", { class: "rme-table" }, ["tbody", 0]],
-          ],
+          { class: EditorStyleHelper.table },
+          ["table", {}, ["tbody", 0]],
         ];
       },
     };
@@ -58,16 +67,17 @@ export default class Table extends Node {
     return {
       createTable,
       setColumnAttr,
+      setTableAttr,
       sortTable,
-      addColumnBefore: () => addColumnBefore,
+      addColumnBefore,
       addColumnAfter: () => addColumnAfter,
       deleteColumn: () => deleteColumn,
-      addRowAfter: addRowAndMoveSelection,
+      addRowBefore,
+      addRowAfter: () => addRowAfter,
       deleteRow: () => deleteRow,
       deleteTable: () => deleteTable,
-      toggleHeaderColumn: () => toggleHeaderColumn,
-      toggleHeaderRow: () => toggleHeaderRow,
-      toggleHeaderCell: () => toggleHeaderCell,
+      toggleHeaderColumn: () => toggleHeader("column"),
+      toggleHeaderRow: () => toggleHeader("row"),
     };
   }
 
@@ -90,52 +100,12 @@ export default class Table extends Node {
 
   get plugins() {
     return [
-      tableEditing(),
-      new Plugin({
-        props: {
-          decorations: (state) => {
-            const { doc } = state;
-            const decorations: Decoration[] = [];
-            let index = 0;
-
-            doc.descendants((node, pos) => {
-              if (node.type.name !== this.name) {
-                return;
-              }
-
-              const elements = document.getElementsByClassName("rme-table");
-              const table = elements[index];
-              if (!table) {
-                return;
-              }
-
-              const element = table.parentElement;
-              const shadowRight = !!(
-                element && element.scrollWidth > element.clientWidth
-              );
-
-              if (shadowRight) {
-                decorations.push(
-                  Decoration.widget(
-                    pos + 1,
-                    () => {
-                      const shadow = document.createElement("div");
-                      shadow.className = "scrollable-shadow right";
-                      return shadow;
-                    },
-                    {
-                      key: "table-shadow-right",
-                    }
-                  )
-                );
-              }
-              index++;
-            });
-
-            return DecorationSet.create(doc, decorations);
-          },
-        },
+      // Note: Important to register columnResizing before tableEditing
+      columnResizing({
+        View: TableView,
+        lastColumnResizable: false,
       }),
+      tableEditing(),
     ];
   }
 }