prefer dependency injection for slate-react

docs/components/docs/DocumentEditorDemo.tsx

@@ -4,13 +4,19 @@ import React, { type ReactNode, useContext, useEffect, useMemo, useState } from
 import { type DocumentFeatures } from '@keystone-6/fields-document/views'
 import {
   type ComponentBlock,
-  fields,
   type InferRenderersForComponentBlocks,
+  fields,
 } from '@keystone-6/fields-document/component-blocks'
 import { Global, jsx } from '@emotion/react'
+
 import { getInitialPropsValue } from '../../../packages/fields-document/src/DocumentEditor/component-blocks/initial-values'
 import { DocumentEditor, } from '../../../packages/fields-document/src/DocumentEditor'
-import { createDocumentEditor, Editor } from '../../../packages/fields-document/src/DocumentEditor/editor-shared'
+import {
+  createDocumentEditor,
+  Editor,
+  ReactEditor,
+  withReact
+} from '../../../packages/fields-document/src/DocumentEditor/demo'
 import { FormValueContentFromPreviewProps } from '../../../packages/fields-document/src/DocumentEditor/component-blocks/form-from-preview'
 import { createGetPreviewProps } from '../../../packages/fields-document/src/DocumentEditor/component-blocks/preview-props'
 import { componentBlocks as componentBlocksInSandboxProject } from '../../../tests/sandbox/component-blocks'
@@ -276,7 +282,10 @@ export const DocumentEditorDemo = () => {
   useEffect(() => {
     // we want to force normalize when the document features change so
     // that no invalid things exist after a user changes something
-    const editor = createDocumentEditor(documentFeatures, componentBlocks, emptyObj)
+    const editor = createDocumentEditor(documentFeatures, componentBlocks, emptyObj, {
+      ReactEditor: ReactEditor as any, // TODO: somehow incompatible
+      withReact
+    })
     editor.children = value
     Editor.normalize(editor, { force: true })
     setValue(editor.children)

packages/fields-document/src/DocumentEditor/demo.ts

@@ -0,0 +1,12 @@
+// the docs site needs access to Editor and importing slate would use the version from the content field
+// so we're exporting it from here (note that this is not at all visible in the published version)
+export { Editor } from 'slate'
+
+export {
+  ReactEditor,
+  withReact,
+} from 'slate-react'
+
+export {
+  createDocumentEditor
+} from './editor-shared'

packages/fields-document/src/DocumentEditor/editor-shared.ts

@@ -10,7 +10,6 @@ import {
   createEditor,
 } from 'slate'
 import { withHistory } from 'slate-history'
-import { withReact } from 'slate-react'
 
 import { type ComponentBlock } from './component-blocks/api-shared'
 import { type DocumentFeatures } from '../views-shared'
@@ -36,10 +35,6 @@ import { withInsertMenu } from './insert-menu-shared'
 import { withBlockMarkdownShortcuts } from './block-markdown-shortcuts'
 import { withPasting } from './pasting'
 
-// the docs site needs access to Editor and importing slate would use the version from the content field
-// so we're exporting it from here (note that this is not at all visible in the published version)
-export { Editor } from 'slate'
-
 export type Block = Exclude<Element, { type: 'relationship' | 'link' }>
 
 const blockquoteChildren = [
@@ -139,7 +134,13 @@ export function isInlineContainer (node: Node): node is Block & { type: InlineCo
 export function createDocumentEditor (
   documentFeatures: DocumentFeatures,
   componentBlocks: Record<string, ComponentBlock>,
-  relationships: Relationships
+  relationships: Relationships,
+  slate?: {
+    withReact: (editor: Editor) => any,
+    ReactEditor: {
+      focus: (editor: Editor) => void,
+    },
+  },
 ) {
   return withPasting(
     withSoftBreaks(
@@ -170,7 +171,7 @@ export function createDocumentEditor (
                                     withDocumentFeaturesNormalization(
                                       documentFeatures,
                                       relationships,
-                                      withHistory(withReact(createEditor()))
+                                      withHistory(slate?.withReact(createEditor()) ?? createEditor())
                                     )
                                   )
                                 )
@@ -289,9 +290,7 @@ function handleNodeInInvalidPosition (
   const childNodeInfo = editorSchema[nodeType]
   // the parent of a block will never be an inline so this casting is okay
   const parentNode = Node.get(editor, parentPath) as Block | Editor
-
   const parentNodeType = Editor.isEditor(parentNode) ? 'editor' : parentNode.type
-
   const parentNodeInfo = editorSchema[parentNodeType]
 
   if (!childNodeInfo || childNodeInfo.invalidPositionHandleMode === 'unwrap') {

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

@@ -15,7 +15,13 @@ import {
   Element,
   Text,
 } from 'slate'
-import { Editable, ReactEditor, Slate, useSlate } from 'slate-react'
+import {
+  Editable,
+  ReactEditor,
+  Slate,
+  withReact,
+  useSlate,
+} from 'slate-react'
 
 import { type EditableProps } from 'slate-react/dist/components/editable'
 import { type ComponentBlock } from '../component-blocks'
@@ -140,7 +146,10 @@ export function DocumentEditor ({
   const { radii, colors, spacing, fields } = useTheme()
   const [expanded, setExpanded] = useState(initialExpanded)
   const editor = useMemo(
-    () => createDocumentEditor(documentFeatures, componentBlocks, relationships),
+    () => createDocumentEditor(documentFeatures, componentBlocks, relationships, {
+      ReactEditor,
+      withReact
+    }),
     [documentFeatures, componentBlocks, relationships]
   )
 

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

@@ -11,7 +11,12 @@ import {
   Range,
   Text,
 } from 'slate'
-import { Slate } from 'slate-react'
+import {
+  Slate,
+  ReactEditor,
+  withReact,
+} from 'slate-react'
+
 import React from 'react'
 import { act, render } from '@testing-library/react'
 import { diff } from 'jest-diff'
@@ -70,7 +75,6 @@ function formatEditor (editor: Node) {
 
 declare global {
   namespace jest {
-
     interface Matchers<R, T> {
       toEqualEditor(
         expected: [T] extends [Editor] ? Editor : 'toEqualEditor only accepts an Editor'
@@ -191,7 +195,7 @@ function EditorComp ({
   )
 }
 
-export const makeEditor = (
+export function makeEditor (
   node: Node,
   {
     documentFeatures = defaultDocumentFeatures,
@@ -207,15 +211,17 @@ export const makeEditor = (
     isShiftPressedRef?: MutableRefObject<boolean>
     skipRenderingDOM?: boolean
   } = {}
-): Editor & { container?: HTMLElement } => {
+): Editor & { container?: HTMLElement } {
   if (!Editor.isEditor(node)) {
     throw new Error('Unexpected non-editor passed to makeEditor')
   }
-  let editor = createDocumentEditor(documentFeatures, componentBlocks, relationships) as Editor & {
-    container?: HTMLElement
-  };
+  const editor = createDocumentEditor(documentFeatures, componentBlocks, relationships, {
+    ReactEditor,
+    withReact
+  })
+
   // for validation
-  (editor as any).__config = {
+  ;(editor as any).__config = {
     documentFeatures,
     componentBlocks,
     relationships,
@@ -277,7 +283,8 @@ export const makeEditor = (
         relationships={relationships}
       />
     )
-    editor.container = container
+
+    ;(editor as any).container = container
   }
   return editor
 }

packages/fields-document/src/DocumentEditor/utils.ts

@@ -10,7 +10,6 @@ import {
   Text,
   Transforms,
 } from 'slate'
-import { ReactEditor } from 'slate-react'
 import { type ElementFromValidation } from '../structure-validation'
 
 export type Mark =
@@ -77,7 +76,12 @@ export function moveChildren (
 
 export function insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading (
   editor: Editor,
-  nodes: Node | Node[]
+  nodes: Node | Node[],
+  slate?: {
+    ReactEditor: {
+      focus: (editor: Editor) => void,
+    },
+  },
 ) {
   let pathRefForEmptyNodeAtCursor: PathRef | undefined
   const entry = Editor.above(editor, {
@@ -92,7 +96,7 @@ export function insertNodesButReplaceIfSelectionIsAtEmptyParagraphOrHeading (
     Transforms.removeNodes(editor, { at: path })
     // even though the selection is in the right place after the removeNodes
     // for some reason the editor blurs so we need to focus it again
-    ReactEditor.focus(editor)
+    slate?.ReactEditor.focus(editor)
   }
 }