fix: overriding scrollselectionintoview to stop scrolling [] (#1887)

Author: aodhagan-cf

packages/rich-text/src/RichTextEditor.tsx

@@ -4,12 +4,13 @@ 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 { PlateContent, Plate, PlatePlugin } from '@udecode/plate-common';
+import { PlateContent, Plate, PlatePlugin, PlateContentProps } from '@udecode/plate-common';
 import { css, cx } from 'emotion';
 import deepEquals from 'fast-deep-equal';
 import noop from 'lodash/noop';
 
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
+import { defaultScrollSelectionIntoView } from './editor-overrides';
 import { toSlateValue } from './helpers/toSlateValue';
 import { normalizeInitialValue } from './internal/misc';
 import { getPlugins, disableCorePlugins } from './plugins';
@@ -58,7 +59,7 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
   const id = getContentfulEditorId(sdk);
   const plugins = React.useMemo(
     () => getPlugins(sdk, onAction ?? noop, restrictedMarks),
-    [sdk, onAction, restrictedMarks]
+    [sdk, onAction, restrictedMarks],
   );
 
   const initialValue = React.useMemo(() => {
@@ -67,7 +68,7 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
         plugins,
         disableCorePlugins,
       },
-      toSlateValue(props.value)
+      toSlateValue(props.value),
     );
   }, [props.value, plugins]);
 
@@ -80,7 +81,7 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
     props.maxHeight !== undefined ? css({ maxHeight: props.maxHeight }) : undefined,
     props.isDisabled ? styles.disabled : styles.enabled,
     props.isToolbarHidden && styles.hiddenToolbar,
-    direction === 'rtl' ? styles.rtl : styles.ltr
+    direction === 'rtl' ? styles.rtl : styles.ltr,
   );
 
   return (
@@ -103,7 +104,14 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
                 </StickyToolbarWrapper>
               )}
               <SyncEditorChanges incomingValue={initialValue} onChange={props.onChange} />
-              <PlateContent id={id} className={classNames} readOnly={props.isDisabled} />
+              <PlateContent
+                id={id}
+                className={classNames}
+                readOnly={props.isDisabled}
+                scrollSelectionIntoView={
+                  defaultScrollSelectionIntoView as PlateContentProps['scrollSelectionIntoView']
+                }
+              />
             </Plate>
           </div>
         </ContentfulEditorIdProvider>
@@ -124,7 +132,7 @@ const RichTextEditor = (props: RichTextProps) => {
   } = props;
   const isEmptyValue = React.useCallback(
     (value) => !value || deepEquals(value, Contentful.EMPTY_DOCUMENT),
-    []
+    [],
   );
   React.useEffect(() => {
     if (!onChange) {

packages/rich-text/src/editor-overrides/index.ts

@@ -0,0 +1 @@
+export * from './scroll-selection-into-view';

packages/rich-text/src/editor-overrides/scroll-selection-into-view.ts

@@ -0,0 +1,43 @@
+/**
+ * TODO: This is an override from a later version of slate-react
+ * ultimately instead of overriding we want to upgrade the version
+ *
+ * https://github.com/ianstormtaylor/slate/pull/5902/files
+ */
+import scrollIntoView from 'scroll-into-view-if-needed';
+
+import { DOMRange, ReactEditor, Range } from '../internal';
+
+export const defaultScrollSelectionIntoView = (editor: ReactEditor, domRange: DOMRange) => {
+  // This was affecting the selection of multiple blocks and dragging behavior,
+  // so enabled only if the selection has been collapsed.
+  if (
+    domRange.getBoundingClientRect &&
+    (!editor.selection || (editor.selection && Range.isCollapsed(editor.selection)))
+  ) {
+    const leafEl = domRange.startContainer.parentElement!;
+
+    // COMPAT: In Chrome, domRange.getBoundingClientRect() can return zero dimensions for valid ranges (e.g. line breaks).
+    // When this happens, do not scroll like most editors do.
+    const domRect = domRange.getBoundingClientRect();
+    const isZeroDimensionRect =
+      domRect.width === 0 && domRect.height === 0 && domRect.x === 0 && domRect.y === 0;
+
+    if (isZeroDimensionRect) {
+      const leafRect = leafEl.getBoundingClientRect();
+      const leafHasDimensions = leafRect.width > 0 || leafRect.height > 0;
+
+      if (leafHasDimensions) {
+        return;
+      }
+    }
+
+    // Default behavior: use domRange's getBoundingClientRect
+    leafEl.getBoundingClientRect = domRange.getBoundingClientRect.bind(domRange);
+    scrollIntoView(leafEl, {
+      scrollMode: 'if-needed',
+    });
+    // @ts-expect-error an unorthodox delete D:
+    delete leafEl.getBoundingClientRect;
+  }
+};

packages/rich-text/src/internal/types/editor.ts

@@ -5,6 +5,7 @@ import { MARKS } from '@contentful/rich-text-types';
 import * as p from '@udecode/plate-common';
 import * as s from 'slate';
 import * as sr from 'slate-react';
+import { DOMRange as SlateReactDomRange } from 'slate-react/dist/utils/dom';
 import type {
   SelectionMoveOptions as SlateSelectionMoveOptions,
   SelectionCollapseOptions as SlateSelectionCollapseOptions,
@@ -67,3 +68,6 @@ export type Span = p.TSpan;
 export type BasePoint = s.BasePoint;
 export type BaseSelection = s.BaseSelection;
 export type PathRef = s.PathRef;
+export type DOMRange = SlateReactDomRange;
+
+export const Range = s.Range;

yarn.lock

@@ -22247,7 +22247,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -22265,15 +22265,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.0.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -22412,7 +22403,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -22440,13 +22431,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.0, strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -24533,7 +24517,7 @@ workerpool@^6.5.1:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.5.1.tgz#060f73b39d0caf97c6db64da004cd01b4c099544"
   integrity sha512-Fs4dNYcsdpYSAfVxhnl1L5zTksjvOJxtC5hzMNl+1t9B8hTJTdKDyZ5ju7ztgPy+ft9tBFXoOlDNiOT9WUXZlA==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -24568,15 +24552,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"