Update Slate (keystonejs#7701)

Co-authored-by: Daniel Cousens <[email protected]>

.changeset/smooth-mugs-divide.md

@@ -0,0 +1,5 @@
+---
+'@keystone-6/fields-document': patch
+---
+
+Updates slate and slate-react to ^0.81.1

docs/components/docs/DocumentEditorDemo.tsx

@@ -1,7 +1,6 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { getInitialPropsValue } from '@keystone-6/fields-document/src/DocumentEditor/component-blocks/initial-values';
-import { useKeyDownRef } from '@keystone-6/fields-document/src/DocumentEditor/soft-breaks';
 import React, { ReactNode, useContext, useEffect, useMemo, useState } from 'react';
 import { Toolbar } from '@keystone-6/fields-document/src/DocumentEditor/Toolbar';
 import { DocumentFeatures } from '@keystone-6/fields-document/views';
@@ -279,18 +278,17 @@ export const DocumentEditorDemo = () => {
   const [value, setValue] = useState(initialContent as any);
   const { documentFeatures, formValue } = useContext(DocumentFeaturesContext);
 
-  const isShiftPressedRef = useKeyDownRef('Shift');
   const editor = useMemo(
-    () => createDocumentEditor(documentFeatures, componentBlocks, emptyObj, isShiftPressedRef),
-    [documentFeatures, isShiftPressedRef]
+    () => createDocumentEditor(documentFeatures, componentBlocks, emptyObj),
+    [documentFeatures]
   );
 
   // this is why we're creating the editor ourselves and not using the DocumentEditor component
   useEffect(() => {
     // we want to force normalize when the document features change so
     // that no invalid things exist after a user changes something
     Editor.normalize(editor, { force: true });
-  }, [editor, documentFeatures, isShiftPressedRef]);
+  }, [editor, documentFeatures]);
 
   return (
     <div

packages/fields-document/package.json

@@ -53,9 +53,9 @@
     "micromark-extension-gfm-strikethrough": "0.6.5",
     "react": "^18.1.0",
     "scroll-into-view-if-needed": "^2.2.28",
-    "slate": "^0.67.1",
+    "slate": "^0.81.1",
     "slate-history": "^0.66.0",
-    "slate-react": "^0.69.0"
+    "slate-react": "^0.81.0"
   },
   "repository": "https://github.com/keystonejs/keystone/tree/main/packages/fields-document",
   "devDependencies": {

packages/fields-document/src/DocumentEditor/index.tsx

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 
 import { jsx, useTheme } from '@keystone-ui/core';
-import { KeyboardEvent, MutableRefObject, ReactNode, useContext, useState } from 'react';
+import { KeyboardEvent, ReactNode, useContext, useState } from 'react';
 import isHotkey from 'is-hotkey';
 import { useCallback, useMemo } from 'react';
 import {
@@ -39,7 +39,7 @@ import { withDivider } from './divider';
 import { withCodeBlock } from './code-block';
 import { withMarks } from './marks';
 import { renderLeaf } from './leaf';
-import { useKeyDownRef, withSoftBreaks } from './soft-breaks';
+import { withSoftBreaks } from './soft-breaks';
 import { withShortcuts } from './shortcuts';
 import { withDocumentFeaturesNormalization } from './document-features-normalization';
 import { ToolbarStateProvider } from './toolbar-state';
@@ -119,12 +119,10 @@ const getKeyDownHandler = (editor: Editor) => (event: KeyboardEvent) => {
 export function createDocumentEditor(
   documentFeatures: DocumentFeatures,
   componentBlocks: Record<string, ComponentBlock>,
-  relationships: Relationships,
-  isShiftPressedRef: MutableRefObject<boolean>
+  relationships: Relationships
 ) {
   return withPasting(
     withSoftBreaks(
-      isShiftPressedRef,
       withBlocksSchema(
         withLink(
           documentFeatures,
@@ -187,12 +185,11 @@ export function DocumentEditor({
   relationships: Relationships;
   documentFeatures: DocumentFeatures;
 } & Omit<EditableProps, 'value' | 'onChange'>) {
-  const isShiftPressedRef = useKeyDownRef('Shift');
   const { colors, spacing } = useTheme();
   const [expanded, setExpanded] = useState(false);
   const editor = useMemo(
-    () => createDocumentEditor(documentFeatures, componentBlocks, relationships, isShiftPressedRef),
-    [documentFeatures, componentBlocks, relationships, isShiftPressedRef]
+    () => createDocumentEditor(documentFeatures, componentBlocks, relationships),
+    [documentFeatures, componentBlocks, relationships]
   );
 
   return (

packages/fields-document/src/DocumentEditor/soft-breaks.test.tsx

@@ -13,11 +13,10 @@ test('basic soft break', () => {
           <cursor />
         </text>
       </paragraph>
-    </editor>,
-    { isShiftPressedRef: { current: true } }
+    </editor>
   );
 
-  editor.insertBreak();
+  editor.insertSoftBreak();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <paragraph>
@@ -42,11 +41,10 @@ test('soft break deletes selection', () => {
           nt
         </text>
       </paragraph>
-    </editor>,
-    { isShiftPressedRef: { current: true } }
+    </editor>
   );
 
-  editor.insertBreak();
+  editor.insertSoftBreak();
   expect(editor).toMatchInlineSnapshot(`
     <editor>
       <paragraph>

packages/fields-document/src/DocumentEditor/soft-breaks.tsx

@@ -1,44 +1,9 @@
-import { MutableRefObject, useEffect, useRef } from 'react';
 import { Transforms, Editor } from 'slate';
 
-export function withSoftBreaks(
-  isShiftPressedRef: MutableRefObject<boolean>,
-  editor: Editor
-): Editor {
-  const { insertBreak } = editor;
+export function withSoftBreaks(editor: Editor): Editor {
   // TODO: should soft breaks only work in particular places
-  editor.insertBreak = () => {
-    if (isShiftPressedRef.current) {
-      Transforms.insertText(editor, '\n');
-    } else {
-      insertBreak();
-    }
+  editor.insertSoftBreak = () => {
+    Transforms.insertText(editor, '\n');
   };
   return editor;
 }
-
-export function useKeyDownRef(targetKey: string) {
-  const ref = useRef(false);
-
-  useEffect(() => {
-    const handleKeyDown = (e: globalThis.KeyboardEvent) => {
-      if (e.key !== targetKey) return;
-      ref.current = true;
-    };
-
-    const handleKeyUp = (e: globalThis.KeyboardEvent) => {
-      if (e.key !== targetKey) return;
-      ref.current = false;
-    };
-
-    document.addEventListener('keydown', handleKeyDown, { passive: true });
-    document.addEventListener('keyup', handleKeyUp, { passive: true });
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown);
-      document.removeEventListener('keyup', handleKeyUp);
-    };
-  }, [targetKey]);
-
-  return ref;
-}

packages/fields-document/src/DocumentEditor/tests/utils.tsx

@@ -184,7 +184,6 @@ export const makeEditor = (
     documentFeatures = defaultDocumentFeatures,
     componentBlocks = {},
     normalization = 'disallow-non-normalized',
-    isShiftPressedRef = { current: false },
     relationships = {},
     skipRenderingDOM,
   }: {
@@ -199,12 +198,9 @@ export const makeEditor = (
   if (!Editor.isEditor(node)) {
     throw new Error('Unexpected non-editor passed to makeEditor');
   }
-  let editor = createDocumentEditor(
-    documentFeatures,
-    componentBlocks,
-    relationships,
-    isShiftPressedRef
-  ) as Editor & { container?: HTMLElement };
+  let editor = createDocumentEditor(documentFeatures, componentBlocks, relationships) as Editor & {
+    container?: HTMLElement;
+  };
   // for validation
   (editor as any).__config = {
     documentFeatures,

packages/fields-document/src/validation.ts

@@ -185,9 +185,7 @@ export function validateAndNormalizeDocument(
   const children = value.map(x =>
     getValidatedNodeWithNormalizedComponentFormProps(x, componentBlocks, relationships)
   );
-  const editor = createDocumentEditor(documentFeatures, componentBlocks, relationships, {
-    current: false,
-  });
+  const editor = createDocumentEditor(documentFeatures, componentBlocks, relationships);
   editor.children = children;
   Editor.normalize(editor, { force: true });
   return editor.children;

packages/fields-document/src/views.tsx

@@ -187,8 +187,7 @@ export const controller = (
       const editor = createDocumentEditor(
         config.fieldMeta.documentFeatures,
         componentBlocks,
-        config.customViews.componentBlocks,
-        { current: false }
+        config.customViews.componentBlocks
       );
       editor.children = documentFromServer;
       Editor.normalize(editor, { force: true });

yarn.lock

@@ -13005,10 +13005,10 @@ slate-hyperscript@^0.67.0:
   dependencies:
     is-plain-object "^5.0.0"
 
-slate-react@^0.69.0:
-  version "0.69.0"
-  resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.69.0.tgz#6a444b8f0f854b6ffbfc07ab554a8d497b735baa"
-  integrity sha512-qz3w4dTRuiv9HHBUmQ1mcaaZ1il/7vm8fOCF4ccTqGGsOfwriY9pKX9lTFG06QCqkKaRrSvPHELL+V0oZJIF0g==
+slate-react@^0.81.0:
+  version "0.81.0"
+  resolved "https://registry.yarnpkg.com/slate-react/-/slate-react-0.81.0.tgz#248eb688ce01f23680ce2554625fd60676614962"
+  integrity sha512-bwryad4EvOmc7EFKb8aGg9DWNDh3KvToaggGieIgGTTbHJYHc9ADFC3A87Ittlpd5XUVopR0MpChQ3g3ODyvqw==
   dependencies:
     "@types/is-hotkey" "^0.1.1"
     "@types/lodash" "^4.14.149"
@@ -13019,10 +13019,10 @@ slate-react@^0.69.0:
     scroll-into-view-if-needed "^2.2.20"
     tiny-invariant "1.0.6"
 
-slate@^0.67.1:
-  version "0.67.1"
-  resolved "https://registry.yarnpkg.com/slate/-/slate-0.67.1.tgz#b1b4c0ffefaa4d4b680394136d66a084cf522c2d"
-  integrity sha512-BLBg9/rmlrlSXgWFXHxIsMiHBx3jE0s1txF1Ny5DhgapOYL5buUX3CUFSn9/+7f5TXbA/W3FjegZGjsoU5GeQg==
+slate@^0.81.1:
+  version "0.81.1"
+  resolved "https://registry.yarnpkg.com/slate/-/slate-0.81.1.tgz#98d9f87b1ea2d648bfbab2739dcb1ba897f3bba0"
+  integrity sha512-nmqphQb2qnlJpPMKsoxeWShpa+pOlKfy6XVdmlTuOtgWeGethM6SMPSRTrhh5UF/G+3/IoXhfbKF7o3iDZCbWw==
   dependencies:
     immer "^9.0.6"
     is-plain-object "^5.0.0"