fix(rich-text): revert upgrade slate, slate-react and add slate-dom (#2010)

This reverts commit 3a5b6fc.

Author: YvesRijckaert

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

@@ -147,8 +147,18 @@ describe('Rich Text Editor', { viewportHeight: 2000, viewportWidth: 1000 }, () =
         .parent()
         .parent()
         .dragTo(() => richText.editor.findByText('some text.'));
-
-      richText.expectValue(doc(entryBlock(), paragraph, emptyParagraph()));
+      if (Cypress.browser.name === 'firefox') {
+        richText.expectValue(doc(entryBlock(), paragraph, emptyParagraph()));
+      } else {
+        richText.expectValue(
+          doc(
+            block(BLOCKS.PARAGRAPH, {}, text('some')),
+            entryBlock(),
+            block(BLOCKS.PARAGRAPH, {}, text(' text.')),
+            emptyParagraph(),
+          ),
+        );
+      }
 
       // undo
       // Ensures that drag&drop was recorded in a separate history batch,

packages/rich-text/README.md

@@ -11,6 +11,33 @@ import 'codemirror/lib/codemirror.css';
 import { RichTextEditor } from '@contentful/field-editor-rich-text';
 ```
 
+## ⚠️ Important: Package Configuration
+
+Due to peer dependency resolution in npm, you must add the following to your `package.json` to ensure compatible versions are installed:
+This is a temporary workaround until we have upgraded the underlying rich text packages.
+
+**For npm:**
+
+```json
+{
+  "overrides": {
+    "slate": "0.94.1",
+    "slate-react": "0.102.0"
+  }
+}
+```
+
+**For yarn:**
+
+```json
+{
+  "resolutions": {
+    "slate": "0.94.1",
+    "slate-react": "0.102.0"
+  }
+}
+```
+
 ## Migrating to v2
 
 To bring support for Rich Text Tables we rewrote most of the internals of this package to adapt the latest version of [Slate][slate]. We are releasing this change as v2.0.0.

packages/rich-text/package.json

@@ -68,11 +68,10 @@
     "moment": "^2.20.0",
     "p-debounce": "^2.1.0",
     "react-popper": "^2.3.0",
-    "slate": "0.118.1",
-    "slate-dom": "0.118.1",
+    "slate": "0.94.1",
     "slate-history": "0.100.0",
     "slate-hyperscript": "0.77.0",
-    "slate-react": "0.118.2"
+    "slate-react": "0.102.0"
   },
   "peerDependencies": {
     "@lingui/core": "^5.3.0",

packages/rich-text/src/RichTextEditor.tsx

@@ -4,14 +4,14 @@ 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 { defaultScrollSelectionIntoView } from 'slate-react';
 
 import { CharConstraints } from './CharConstraints';
 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';
@@ -111,7 +111,9 @@ export const ConnectedRichTextEditor = (props: ConnectedRichTextProps) => {
                 id={id}
                 className={classNames}
                 readOnly={props.isDisabled}
-                scrollSelectionIntoView={defaultScrollSelectionIntoView}
+                scrollSelectionIntoView={
+                  defaultScrollSelectionIntoView as PlateContentProps['scrollSelectionIntoView']
+                }
               />
               {props.withCharValidation && <CharConstraints />}
             </Plate>

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

@@ -4,8 +4,8 @@
 import { MARKS } from '@contentful/rich-text-types';
 import * as p from '@udecode/plate-common';
 import * as s from 'slate';
-import { DOMRange as SlateReactDomRange } from 'slate-dom';
 import * as sr from 'slate-react';
+import { DOMRange as SlateReactDomRange } from 'slate-react/dist/utils/dom';
 import type {
   SelectionMoveOptions as SlateSelectionMoveOptions,
   SelectionCollapseOptions as SlateSelectionCollapseOptions,

yarn.lock

@@ -7646,7 +7646,7 @@
   resolved "https://registry.yarnpkg.com/@types/is-empty/-/is-empty-1.2.3.tgz#a2d55ea8a5ec57bf61e411ba2a9e5132fe4f0899"
   integrity sha512-4J1l5d79hoIvsrKh5VUKVRA1aIdsOb10Hu5j3J2VfP/msDnfTdGPmNp2E1Wg+vs97Bktzo+MZePFFXSGoykYJw==
 
-"@types/is-hotkey@^0.1.6":
+"@types/is-hotkey@^0.1.6", "@types/is-hotkey@^0.1.8":
   version "0.1.10"
   resolved "https://registry.yarnpkg.com/@types/is-hotkey/-/is-hotkey-0.1.10.tgz#cf440fab9bf75ffba4e1a16e8df28938de0778c9"
   integrity sha512-RvC8KMw5BCac1NvRRyaHgMMEtBaZ6wh0pyPTBu7izn4Sj/AX9Y4aXU5c7rX8PnM/knsuUpC1IeoBkANtxBypsQ==
@@ -7730,7 +7730,7 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
   integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
 
-"@types/lodash@^4.14.167":
+"@types/lodash@^4.14.167", "@types/lodash@^4.14.200":
   version "4.17.0"
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.0.tgz#d774355e41f372d5350a4d0714abb48194a489c3"
   integrity sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==
@@ -15631,7 +15631,7 @@ immer@^10.0.3:
   resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.4.tgz#09af41477236b99449f9d705369a4daaf780362b"
   integrity sha512-cuBuGK40P/sk5IzWa9QPUaAdvPHjkk1c+xYsd9oZw+YQQEV+10G0P5uMpGctZZKnyQ+ibRO08bD25nWLmYi2pw==
 
-immer@^9.0.7:
+immer@^9.0.6, immer@^9.0.7:
   version "9.0.21"
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
@@ -23879,19 +23879,6 @@ slash@^4.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-4.0.0.tgz#2422372176c4c6c5addb5e2ada885af984b396a7"
   integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
 
-[email protected]:
-  version "0.118.1"
-  resolved "https://registry.yarnpkg.com/slate-dom/-/slate-dom-0.118.1.tgz#162f79e9d1c02270f8cdc0c5991492d9a5ba60bb"
-  integrity sha512-D6J0DF9qdJrXnRDVhYZfHzzpVxzqKRKFfS0Wcin2q0UC+OnQZ0lbCGJobatVbisOlbSe7dYFHBp9OZ6v1lEcbQ==
-  dependencies:
-    "@juggle/resize-observer" "^3.4.0"
-    direction "^1.0.4"
-    is-hotkey "^0.2.0"
-    is-plain-object "^5.0.0"
-    lodash "^4.17.21"
-    scroll-into-view-if-needed "^3.1.0"
-    tiny-invariant "1.3.1"
-
 [email protected]:
   version "0.100.0"
   resolved "https://registry.yarnpkg.com/slate-history/-/slate-history-0.100.0.tgz#a8549af61182a18db2dfedff6ebab7452c841666"
@@ -23906,24 +23893,28 @@ [email protected]:
   dependencies:
     is-plain-object "^5.0.0"
 
-slate-react@0.118.2:
-  version "0.118.2"
-  resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.118.2.tgz#5e4ca05c63895a6a39d566dc750bd38d9bf97213"
-  integrity sha512-D7eQVZGgiqV36mooozu8sNWuCkzJqcHQWERQn9FxqmugnbEOKaPBj5OX1x5WGAVexfrxAT5dTAHUaRb0lGqFDw==
+slate-react@0.102.0:
+  version "0.102.0"
+  resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.102.0.tgz#8f4539055f336019abbbe8b52acc23ff02c9601b"
+  integrity sha512-SAcFsK5qaOxXjm0hr/t2pvIxfRv6HJGzmWkG58TdH4LdJCsgKS1n6hQOakHPlRVCwPgwvngB6R+t3pPjv8MqwA==
   dependencies:
     "@juggle/resize-observer" "^3.4.0"
+    "@types/is-hotkey" "^0.1.8"
+    "@types/lodash" "^4.14.200"
     direction "^1.0.4"
     is-hotkey "^0.2.0"
+    is-plain-object "^5.0.0"
     lodash "^4.17.21"
     scroll-into-view-if-needed "^3.1.0"
     tiny-invariant "1.3.1"
 
-slate@0.118.1:
-  version "0.118.1"
-  resolved "https://registry.yarnpkg.com/slate/-/slate-0.118.1.tgz#8403a5604994d02b4fb2a9db4435ce034c42d774"
-  integrity sha512-6H1DNgnSwAFhq/pIgf+tLvjNzH912M5XrKKhP9Frmbds2zFXdSJ6L/uFNyVKxQIkPzGWPD0m+wdDfmEuGFH5Tg==
+slate@0.94.1:
+  version "0.94.1"
+  resolved "https://registry.yarnpkg.com/slate/-/slate-0.94.1.tgz#13b0ba7d0a7eeb0ec89a87598e9111cbbd685696"
+  integrity sha512-GH/yizXr1ceBoZ9P9uebIaHe3dC/g6Plpf9nlUwnvoyf6V1UOYrRwkabtOCd3ZfIGxomY4P7lfgLr7FPH8/BKA==
   dependencies:
-    immer "^10.0.3"
+    immer "^9.0.6"
+    is-plain-object "^5.0.0"
     tiny-warning "^1.0.3"
 
 [email protected]: