feat: bumping plate to v30 [TOL-1834]

cypress/e2e/rich-text/document-mocks/googleDocs.js

@@ -1,18 +1,6 @@
 export default {
   nodeType: 'document',
   content: [
-    {
-      content: [
-        {
-          data: {},
-          marks: [],
-          nodeType: 'text',
-          value: '',
-        },
-      ],
-      data: {},
-      nodeType: 'paragraph',
-    },
     {
       content: [
         {

packages/rich-text/src/plugins/Table/createTablePlugin.ts

@@ -5,8 +5,13 @@ import {
   ELEMENT_TD,
   ELEMENT_TH,
   ELEMENT_TR,
-  withTable,
   TablePlugin,
+  withNormalizeTable,
+  withDeleteTable,
+  withGetFragmentTable,
+  withInsertTextTable,
+  withSelectionTable,
+  withSetFragmentDataTable,
 } from '@udecode/plate-table';
 
 import { isRootLevel } from '../../helpers/editor';
@@ -27,6 +32,7 @@ import { createEmptyTableCells, getNoOfMissingTableCellsInRow, isNotEmpty } from
 import { insertTableFragment } from './insertTableFragment';
 import { onKeyDownTable } from './onKeyDownTable';
 import { addTableTrackingEvents, withInvalidCellChildrenTracking } from './tableTracking';
+import { withInsertFragmentTable } from './withInsertFragmentTable';
 
 export const createTablePlugin = (): PlatePlugin =>
   createDefaultTablePlugin<TablePlugin<Value>, Value, PlateEditor>({
@@ -38,7 +44,13 @@ export const createTablePlugin = (): PlatePlugin =>
     withOverrides: (editor, plugin) => {
       const { normalizeNode } = editor;
       // injects important fixes from plate's original table plugin
-      withTable(editor, plugin);
+      editor = withNormalizeTable(editor);
+      editor = withDeleteTable(editor);
+      editor = withGetFragmentTable(editor);
+      editor = withInsertFragmentTable(editor, plugin);
+      editor = withInsertTextTable(editor, plugin);
+      editor = withSelectionTable(editor);
+      editor = withSetFragmentDataTable(editor);
 
       // Resets all normalization rules added by @udecode/plate-table as
       // they conflict with our own

packages/rich-text/src/plugins/Table/withInsertFragmentTable.ts

@@ -0,0 +1,166 @@
+// Copied from https://github.com/udecode/plate/blob/main/packages/table/src/withInsertFragmentTable.ts
+import {
+  getEndPoint,
+  getPluginType,
+  getStartPoint,
+  getTEditor,
+  hasNode,
+  PlateEditor,
+  replaceNodeChildren,
+  select,
+  TElement,
+  Value,
+  withoutNormalizing,
+  WithPlatePlugin,
+} from '@udecode/plate-common';
+import { ELEMENT_TABLE, getTableAbove, getTableGridAbove, TablePlugin } from '@udecode/plate-table';
+import cloneDeep from 'lodash/cloneDeep.js';
+import { Path } from 'slate';
+
+/**
+ * If inserting a table,
+ * If block above anchor is a table,
+ * - Replace each cell above by the inserted table until out of bounds.
+ * - Select the inserted cells.
+ */
+export const withInsertFragmentTable = <
+  V extends Value = Value,
+  E extends PlateEditor<V> = PlateEditor<V>
+>(
+  editor: E,
+  { options }: WithPlatePlugin<TablePlugin<V>, V, E>
+) => {
+  const { insertFragment } = editor;
+  const { disableExpandOnInsert, insertColumn, insertRow } = options;
+
+  const myEditor = getTEditor(editor);
+
+  myEditor.insertFragment = (fragment) => {
+    const insertedTable = fragment.find(
+      (n) => (n as TElement).type === getPluginType(editor, ELEMENT_TABLE)
+    );
+
+    if (!insertedTable) {
+      const tableEntry = getTableAbove(editor, {
+        at: editor.selection?.anchor,
+      });
+
+      if (tableEntry) {
+        const cellEntries = getTableGridAbove(editor, {
+          format: 'cell',
+        });
+
+        if (cellEntries.length > 1) {
+          cellEntries.forEach((cellEntry) => {
+            if (cellEntry) {
+              const [, cellPath] = cellEntry;
+
+              replaceNodeChildren(editor, {
+                at: cellPath,
+                nodes: cloneDeep(fragment) as any,
+              });
+            }
+          });
+
+          select(editor, {
+            anchor: getStartPoint(editor, cellEntries[0][1]),
+            focus: getEndPoint(editor, cellEntries.at(-1)![1]),
+          });
+          return;
+        }
+      }
+    }
+
+    if (insertedTable) {
+      const tableEntry = getTableAbove(editor, {
+        at: editor.selection?.anchor,
+      });
+
+      // inserting inside table
+      if (tableEntry) {
+        const [cellEntry] = getTableGridAbove(editor, {
+          at: editor.selection?.anchor,
+          format: 'cell',
+        });
+
+        if (cellEntry) {
+          withoutNormalizing(editor, () => {
+            const [, startCellPath] = cellEntry;
+            const cellPath = [...startCellPath];
+
+            const startColIndex = cellPath.at(-1)!;
+            let lastCellPath: Path | null = null;
+
+            let initRow = true;
+            const insertedRows = (insertedTable as TElement).children as TElement[];
+            insertedRows.forEach((row) => {
+              cellPath[cellPath.length - 1] = startColIndex;
+
+              // last inserted row
+              if (!initRow) {
+                const fromRow = cellPath.slice(0, -1);
+                cellPath[cellPath.length - 2] += 1;
+
+                if (!hasNode(editor, cellPath)) {
+                  if (disableExpandOnInsert) {
+                    return;
+                  } else {
+                    insertRow?.(editor, {
+                      fromRow,
+                    });
+                  }
+                }
+              }
+              initRow = false;
+
+              const insertedCells = row.children as TElement[];
+              let initCell = true;
+
+              insertedCells.forEach((cell) => {
+                if (!initCell) {
+                  const fromCell = [...cellPath];
+                  cellPath[cellPath.length - 1] += 1;
+
+                  if (!hasNode(editor, cellPath)) {
+                    if (disableExpandOnInsert) {
+                      return;
+                    } else {
+                      insertColumn?.(editor, {
+                        fromCell,
+                      });
+                    }
+                  }
+                }
+                initCell = false;
+
+                replaceNodeChildren(editor, {
+                  at: cellPath,
+                  nodes: cloneDeep(cell.children as any),
+                });
+
+                lastCellPath = [...cellPath];
+              });
+            });
+
+            if (lastCellPath) {
+              select(editor, {
+                anchor: getStartPoint(editor, startCellPath),
+                focus: getEndPoint(editor, lastCellPath),
+              });
+            }
+          });
+
+          return;
+        }
+      } else if (fragment.length === 1 && fragment[0].type === ELEMENT_TABLE) {
+        // NOTE adjusting this from insertNode to insertFragment to removing preceding empty paragraph
+        insertFragment(fragment);
+        return;
+      }
+    }
+
+    insertFragment(fragment);
+  };
+
+  return editor;
+};