feat: bumping plate to v30 [TOL-1834] (#1605)

cypress/e2e/rich-text/RichTextEditor.Tables.spec.ts

@@ -12,10 +12,6 @@ import { RichTextPage } from './RichTextPage';
 describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
   let richText: RichTextPage;
 
-  // copied from the 'is-hotkey' library we use for RichText shortcuts
-  const IS_MAC =
-    typeof window != 'undefined' && /Mac|iPod|iPhone|iPad/.test(window.navigator.platform);
-  const mod = IS_MAC ? 'meta' : 'control';
   const buildHelper =
     (type) =>
     (...children) =>
@@ -177,10 +173,15 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
       );
     });
 
-    it('does not delete table header cells when selecting the whole table', () => {
+    it('does not delete table header cells when selecting the whole header row', () => {
       insertTable();
 
-      richText.editor.type(`hey{${mod}}a{backspace}`);
+      richText.editor
+        .type(`hey`)
+        .type('{shift}{downarrow}', {
+          delay: 100,
+        })
+        .type('{backspace}');
 
       richText.expectValue(
         doc(

cypress/e2e/rich-text/RichTextEditor.Tracking.spec.ts

@@ -129,7 +129,7 @@ describe('Rich Text Editor - Tracking', { viewportHeight: 2000 }, () => {
 
       richText.expectTrackingValue([
         action('paste', 'shortcut-or-viewport', {
-          characterCountAfter: 14,
+          characterCountAfter: 11,
           characterCountBefore: 0,
           characterCountSelection: 0,
           source: 'Apple Notes',

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

@@ -34,7 +34,7 @@ export default {
           marks: [],
           nodeType: 'text',
           value:
-            " is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ",
+            " is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. ",
         },
         {
           data: {},

packages/rich-text/package.json

@@ -49,18 +49,18 @@
     "@contentful/rich-text-plain-text-renderer": "^16.0.4",
     "@contentful/rich-text-types": "16.3.0",
     "@popperjs/core": "^2.11.5",
-    "@udecode/plate-basic-marks": "23.7.0",
-    "@udecode/plate-break": "23.7.0",
-    "@udecode/plate-common": "23.7.0",
-    "@udecode/plate-core": "23.6.0",
-    "@udecode/plate-list": "23.7.0",
-    "@udecode/plate-paragraph": "23.7.0",
-    "@udecode/plate-reset-node": "23.7.0",
-    "@udecode/plate-select": "23.7.0",
+    "@udecode/plate-basic-marks": "30.1.2",
+    "@udecode/plate-break": "30.1.2",
+    "@udecode/plate-common": "30.1.2",
+    "@udecode/plate-core": "30.1.2",
+    "@udecode/plate-list": "30.1.2",
+    "@udecode/plate-paragraph": "30.1.2",
+    "@udecode/plate-reset-node": "30.1.2",
+    "@udecode/plate-select": "30.1.2",
     "@udecode/plate-serializer-docx": "23.7.0",
-    "@udecode/plate-serializer-html": "23.7.0",
-    "@udecode/plate-table": "23.7.0",
-    "@udecode/plate-trailing-block": "23.7.0",
+    "@udecode/plate-serializer-html": "30.1.2",
+    "@udecode/plate-table": "30.1.2",
+    "@udecode/plate-trailing-block": "30.1.2",
     "constate": "3.2.0",
     "fast-deep-equal": "^3.1.3",
     "is-hotkey": "^0.2.0",
@@ -69,7 +69,7 @@
     "slate": "0.94.1",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.77.0",
-    "slate-react": "0.98.3"
+    "slate-react": "0.102.0"
   },
   "peerDependencies": {
     "react": ">=16.14.0",

packages/rich-text/src/RichTextEditor.tsx

@@ -4,7 +4,7 @@ import { FieldAppSDK } from '@contentful/app-sdk';
 import { EntityProvider } from '@contentful/field-editor-reference';
 import { FieldConnector } from '@contentful/field-editor-shared';
 import * as Contentful from '@contentful/rich-text-types';
-import { Plate, PlateProvider } from '@udecode/plate-common';
+import { PlateContent, Plate, PlatePlugin } from '@udecode/plate-common';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
@@ -64,10 +64,10 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
     <SdkProvider sdk={sdk}>
       <ContentfulEditorIdProvider value={id}>
         <div className={styles.root} data-test-id="rich-text-editor">
-          <PlateProvider
+          <Plate
             id={id}
             initialValue={initialValue}
-            plugins={plugins}
+            plugins={plugins as PlatePlugin[]}
             disableCorePlugins={disableCorePlugins}
           >
             {!props.isToolbarHidden && (
@@ -76,14 +76,8 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
               </StickyToolbarWrapper>
             )}
             <SyncEditorChanges incomingValue={initialValue} onChange={props.onChange} />
-            <Plate
-              id={id}
-              editableProps={{
-                className: classNames,
-                readOnly: props.isDisabled,
-              }}
-            />
-          </PlateProvider>
+            <PlateContent id={id} className={classNames} readOnly={props.isDisabled} />
+          </Plate>
         </div>
       </ContentfulEditorIdProvider>
     </SdkProvider>

packages/rich-text/src/SyncEditorChanges.tsx

@@ -7,14 +7,14 @@ import equal from 'fast-deep-equal';
 import { createOnChangeCallback } from './helpers/callbacks';
 import { usePlateSelectors } from './internal/hooks';
 import { setEditorValue } from './internal/transforms';
-import { Value } from './internal/types';
+import { PlateEditor, Value } from './internal/types';
 
 /**
  * A hook responsible for keeping the editor state in sync with incoming
  * changes (aka. external updates
  */
 const useAcceptIncomingChanges = (incomingValue?: Value) => {
-  const editor = usePlateSelectors().editor();
+  const editor = usePlateSelectors().editor() as PlateEditor;
 
   // Cache latest editor value to avoid unnecessary updates
   const lastIncomingValue = React.useRef(incomingValue);
@@ -39,19 +39,17 @@ const useOnValueChanged = (onChange?: (doc: Contentful.Document) => unknown) =>
   React.useEffect(() => {
     const cb = createOnChangeCallback(onChange);
 
-    setEditorOnChange({
-      fn: (document) => {
-        // Skip irrelevant events e.g. mouse selection
-        const operations = editor?.operations.filter((op) => {
-          return op.type !== 'set_selection';
-        });
+    setEditorOnChange((document) => {
+      // Skip irrelevant events e.g. mouse selection
+      const operations = editor?.operations.filter((op) => {
+        return op.type !== 'set_selection';
+      });
 
-        if (operations.length === 0) {
-          return;
-        }
+      if (operations.length === 0) {
+        return;
+      }
 
-        cb(document);
-      },
+      cb(document);
     });
   }, [editor, onChange, setEditorOnChange]);
 };

packages/rich-text/src/internal/hooks.ts

@@ -6,15 +6,15 @@ import { PlateEditor, Value } from './types';
 export const useReadOnly = sr.useReadOnly;
 
 export const usePlateEditorRef = (id?: string) => {
-  return p.usePlateEditorRef<Value, PlateEditor>(id);
+  return p.useEditorRef<Value, PlateEditor>(id);
 };
 
 export const usePlateEditorState = (id?: string) => {
-  return p.usePlateEditorState<Value, PlateEditor>(id);
+  return p.useEditorState<Value, PlateEditor>(id);
 };
 
 export const usePlateSelectors = (id?: string) => {
-  return p.usePlateSelectors<Value, PlateEditor>(id);
+  return p.usePlateSelectors(id);
 };
 
 export const useFocused = () => {

packages/rich-text/src/plugins/List/withList.ts

@@ -15,7 +15,7 @@ export const withList: WithOverride = (editor) => {
   const { deleteForward, deleteFragment } = editor;
 
   editor.deleteForward = (unit) => {
-    if (deleteForwardList(editor)) return;
+    if (deleteForwardList(editor, deleteForward, unit)) return;
 
     deleteForward(unit);
   };

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

@@ -5,8 +5,13 @@ import {
   ELEMENT_TD,
   ELEMENT_TH,
   ELEMENT_TR,
-  withTable,
   TablePlugin,
+  withDeleteTable,
+  withGetFragmentTable,
+  withInsertTextTable,
+  withSelectionTable,
+  withSetFragmentDataTable,
+  withInsertFragmentTable,
 } 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 { withInsertFragmentTableOverride } from './withInsertFragmentTableOverride';
 
 export const createTablePlugin = (): PlatePlugin =>
   createDefaultTablePlugin<TablePlugin<Value>, Value, PlateEditor>({
@@ -38,7 +44,14 @@ export const createTablePlugin = (): PlatePlugin =>
     withOverrides: (editor, plugin) => {
       const { normalizeNode } = editor;
       // injects important fixes from plate's original table plugin
-      withTable(editor, plugin);
+      editor = withDeleteTable(editor);
+      editor = withGetFragmentTable(editor);
+      editor = withInsertFragmentTable(editor, plugin);
+      // overrides insertFragment to handle table insertion to not add empty paragraph before table
+      editor = withInsertFragmentTableOverride(editor);
+      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/onKeyDownTable.ts

@@ -5,7 +5,7 @@ import { getTableEntries, onKeyDownTable as defaultKeyDownTable } from '@udecode
 
 import { insertEmptyParagraph } from '../../helpers/editor';
 import { blurEditor } from '../../internal/misc';
-import { getAboveNode, isLastChildPath, getText, isFirstChild } from '../../internal/queries';
+import { getAboveNode, getText, isFirstChild, isLastChildPath } from '../../internal/queries';
 import { KeyboardHandler, HotkeyPlugin, NodeEntry } from '../../internal/types';
 import { addRowBelow } from './actions';
 

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

@@ -0,0 +1,32 @@
+import { ELEMENT_DEFAULT, getPluginType, getTEditor, TElement } from '@udecode/plate-common';
+import { ELEMENT_TABLE } from '@udecode/plate-table';
+
+import { insertNodes, PlateEditor } from '../../internal';
+
+export const withInsertFragmentTableOverride = (editor: PlateEditor) => {
+  const myEditor = getTEditor(editor);
+
+  const upstreamInsertFragment = myEditor.insertFragment;
+  myEditor.insertFragment = (fragment) => {
+    const insertedTable = fragment.find(
+      (n) => (n as TElement).type === getPluginType(editor, ELEMENT_TABLE)
+    );
+
+    // Overriding https://github.com/udecode/plate/blob/aa5ad441cb72cfb6704315237c430f9a43570ffe/packages/table/src/withInsertFragmentTable.ts#L159C9-L163C8
+    // as we don't want the empty paragraph before the table when inserting a table
+    if (insertedTable && fragment.length === 1 && fragment[0].type === ELEMENT_TABLE) {
+      // needed to insert as node, otherwise it will be inserted as text
+      insertNodes(editor, fragment, {
+        removeEmpty: {
+          // removes empty paragraph before table
+          exclude: [ELEMENT_DEFAULT],
+        },
+      });
+      return;
+    } else {
+      upstreamInsertFragment(fragment);
+    }
+  };
+
+  return editor;
+};