fix: skip set_selection onChange events (#1443)

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

@@ -57,7 +57,7 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
   ];
 
   beforeEach(() => {
-    cy.viewport(1000, 2000);
+    cy.viewport(1280, 720);
     richText = new RichTextPage();
     richText.visit();
   });
@@ -145,6 +145,7 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
     });
 
     it('correctly undoes after drag&drop', () => {
+      cy.viewport(1200, 1200);
       cy.shouldConfirm(true);
       const paragraph = block(BLOCKS.PARAGRAPH, {}, text('some text.'));
       const docBeforeDragAndDrop = doc(paragraph, entryBlock(), emptyParagraph());
@@ -390,9 +391,7 @@ describe('Rich Text Editor', { viewportHeight: 2000 }, () => {
       getIframe().find('li').contains('some text more text');
     });
 
-    // temporarily skipped. Snapshots don't match. Will be fixed in a follow up PR
-    // eslint-disable-next-line
-    it.skip('runs initial normalization without triggering a value change', () => {
+    it('runs initial normalization without triggering a value change', () => {
       cy.setInitialValue(validDocumentThatRequiresNormalization);
 
       cy.reload();

packages/rich-text/src/RichTextEditor.tsx

@@ -4,21 +4,19 @@ import { FieldExtensionSDK } 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 { Document } from '@contentful/rich-text-types';
 import { Plate, PlateProvider } from '@udecode/plate-core';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
 
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
-import { createOnChangeCallback } from './helpers/callbacks';
 import { toSlateValue } from './helpers/toSlateValue';
 import { normalizeInitialValue } from './internal/misc';
 import { getPlugins, disableCorePlugins } from './plugins';
 import { RichTextTrackingActionHandler } from './plugins/Tracking';
 import { styles } from './RichTextEditor.styles';
 import { SdkProvider } from './SdkProvider';
-import { SyncEditorValue } from './SyncEditorValue';
+import { SyncEditorChanges } from './SyncEditorChanges';
 import Toolbar from './Toolbar';
 import StickyToolbarWrapper from './Toolbar/components/StickyToolbarWrapper';
 
@@ -44,8 +42,6 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
     [sdk, onAction, restrictedMarks]
   );
 
-  const handleChange = props.onChange;
-
   const initialValue = React.useMemo(() => {
     return normalizeInitialValue(
       {
@@ -56,14 +52,6 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
     );
   }, [props.value, plugins]);
 
-  const onChange = React.useMemo(
-    () =>
-      createOnChangeCallback((document: Document) => {
-        handleChange?.(document);
-      }),
-    [handleChange]
-  );
-
   const classNames = cx(
     styles.editor,
     props.minHeight !== undefined ? css({ minHeight: props.minHeight }) : undefined,
@@ -81,14 +69,13 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
             initialValue={initialValue}
             plugins={plugins}
             disableCorePlugins={disableCorePlugins}
-            onChange={onChange}
           >
             {!props.isToolbarHidden && (
               <StickyToolbarWrapper isDisabled={props.isDisabled}>
                 <Toolbar isDisabled={props.isDisabled} />
               </StickyToolbarWrapper>
             )}
-            <SyncEditorValue incomingValue={initialValue} />
+            <SyncEditorChanges incomingValue={initialValue} onChange={props.onChange} />
             <Plate
               id={id}
               editableProps={{

packages/rich-text/src/SyncEditorChanges.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import * as Contentful from '@contentful/rich-text-types';
+import { usePlateActions } from '@udecode/plate-core';
+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';
+
+/**
+ * A hook responsible for keeping the editor state in sync with incoming
+ * changes (aka. external updates
+ */
+const useAcceptIncomingChanges = (incomingValue?: Value) => {
+  const editor = usePlateSelectors().editor();
+
+  // Cache latest editor value to avoid unnecessary updates
+  const lastIncomingValue = React.useRef(incomingValue);
+
+  React.useEffect(() => {
+    if (equal(lastIncomingValue.current, incomingValue)) {
+      return;
+    }
+
+    lastIncomingValue.current = incomingValue;
+    setEditorValue(editor, incomingValue);
+  }, [editor, incomingValue]);
+};
+
+/**
+ * Attaches a custom onChange callback that
+ */
+const useOnValueChanged = (onChange?: (doc: Contentful.Document) => unknown) => {
+  const editor = usePlateSelectors().editor();
+  const setEditorOnChange = usePlateActions().onChange();
+
+  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';
+        });
+
+        if (operations.length === 0) {
+          return;
+        }
+
+        cb(document);
+      },
+    });
+  }, [editor, onChange, setEditorOnChange]);
+};
+
+export type SyncEditorStateProps = {
+  incomingValue?: Value;
+  onChange?: (doc: Contentful.Document) => unknown;
+};
+
+/**
+ * A void component that's responsible for keeping the editor
+ * state in sync with incoming changes (aka. external updates) and
+ * triggering onChange events.
+ *
+ * This component is a hack to work around the limitation of Plate v17+
+ * where we can no longer access the editor instance outside the Plate
+ * provider.
+ */
+export const SyncEditorChanges = ({ incomingValue, onChange }: SyncEditorStateProps) => {
+  useAcceptIncomingChanges(incomingValue);
+  useOnValueChanged(onChange);
+
+  return null;
+};

packages/rich-text/src/helpers/callbacks.ts

@@ -1,35 +1,20 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { toContentfulDocument } from '@contentful/contentful-slatejs-adapter';
 import { Document } from '@contentful/rich-text-types';
-import equal from 'fast-deep-equal';
 import debounce from 'lodash/debounce';
 
 import schema from '../constants/Schema';
 import { removeInternalMarks } from './removeInternalMarks';
 
-export const createOnChangeCallback = (handler?: (value: Document) => void) => {
-  // Cache previous value to avoid firing the handler unnecessarily
-  //
-  // Note: We are not using lodash/memoize here to avoid memory leaks
-  // due to having an infinite cache while we only care about the last
-  // value.
-  let cache: unknown = null;
-
-  return debounce((document: unknown) => {
-    if (equal(document, cache)) {
-      return;
-    }
-
-    cache = document;
+export const createOnChangeCallback = (handler?: (value: Document) => void) =>
+  debounce((document: unknown) => {
     const doc = removeInternalMarks(
       toContentfulDocument({
-        // eslint-disable-next-line -- parameter type is not exported @typescript-eslint/no-explicit-any
         document: document as any,
         schema: schema,
-        // eslint-disable-next-line -- parameter type is not exported @typescript-eslint/no-explicit-any
       }) as any
     );
-    // eslint-disable-next-line -- correct parameter type is not defined @typescript-eslint/no-explicit-any
+
     const cleanedDocument = removeInternalMarks(doc as Record<string, any>);
     handler?.(cleanedDocument);
   }, 500);
-};

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

@@ -53,10 +53,6 @@ export const normalizeInitialValue = (
   return editor.children;
 };
 
-export const withoutNormalizing = (editor: PlateEditor, fn: () => boolean | void) => {
-  return p.withoutNormalizing(editor, fn);
-};
-
 export const focusEditor = (editor: PlateEditor, target?: Location) => {
   p.focusEditor(editor, target);
 };

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

@@ -2,6 +2,7 @@ import * as p from '@udecode/plate-core';
 import * as s from 'slate';
 import { Except } from 'type-fest';
 
+import { getEndPoint, isNode } from './queries';
 import {
   PlateEditor,
   Node,
@@ -29,6 +30,10 @@ export const normalize = (
   return p.normalizeEditor(editor, options);
 };
 
+export const withoutNormalizing = (editor: PlateEditor, fn: () => boolean | void) => {
+  return p.withoutNormalizing(editor, fn);
+};
+
 /**
  * Set the selection to a location
  */
@@ -149,3 +154,30 @@ export const deleteFragment = (
 ) => {
   return p.deleteFragment(editor, options);
 };
+
+/**
+ * Plate api doesn't allow to modify (easily) the editor value
+ * programmatically after the editor instance is created.
+ *
+ * This function is inspired by:
+ * https://github.com/udecode/plate/issues/1269#issuecomment-1057643622
+ */
+export const setEditorValue = (editor: PlateEditor, nodes?: Node[]): void => {
+  // Replaces editor content while keeping change history
+  withoutNormalizing(editor, () => {
+    const children = [...editor.children];
+    children.forEach((node) => editor.apply({ type: 'remove_node', path: [0], node }));
+
+    if (nodes) {
+      const nodesArray = isNode(nodes) ? [nodes] : nodes;
+      nodesArray.forEach((node, i) => {
+        editor.apply({ type: 'insert_node', path: [i], node });
+      });
+    }
+
+    const point = getEndPoint(editor, []);
+    if (point) {
+      select(editor, point);
+    }
+  });
+};

packages/rich-text/src/plugins/List/transforms/moveListItemDown.ts

@@ -4,7 +4,7 @@
  */
 import { getListTypes } from '@udecode/plate-list';
 
-import { withoutNormalizing } from '../../../internal/misc';
+import { withoutNormalizing } from '../../../internal';
 import {
   getNodeEntry,
   getNodeChildren,

packages/rich-text/src/plugins/List/transforms/moveListItems.ts

@@ -4,7 +4,7 @@
  */
 import { isListNested, ELEMENT_LIC, getListItemEntry, moveListItemUp } from '@udecode/plate-list';
 
-import { withoutNormalizing } from '../../../internal/misc';
+import { withoutNormalizing } from '../../../internal';
 import {
   getNodeEntries,
   getPluginType,

packages/rich-text/src/plugins/List/transforms/toggleList.ts

@@ -6,8 +6,8 @@ import { BLOCKS } from '@contentful/rich-text-types';
 import { ELEMENT_LIC } from '@udecode/plate-list';
 import { getListItemEntry } from '@udecode/plate-list';
 
+import { withoutNormalizing } from '../../../internal';
 import { ELEMENT_DEFAULT } from '../../../internal/constants';
-import { withoutNormalizing } from '../../../internal/misc';
 import {
   findNode,
   getNodeEntries,