@portabletext/editor 1.1.4 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -46,60 +46,65 @@
     "debug": "^4.3.4",
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
-    "slate": "0.103.0",
-    "slate-react": "0.110.1",
+    "slate": "0.110.2",
+    "slate-react": "0.110.2",
     "xstate": "^5.18.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@playwright/test": "1.47.2",
+    "@playwright/test": "1.48.1",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.55.0",
+    "@sanity/block-tools": "^3.62.1",
     "@sanity/diff-match-patch": "^3.1.1",
-    "@sanity/pkg-utils": "^6.11.2",
-    "@sanity/schema": "^3.55.0",
-    "@sanity/types": "^3.55.0",
-    "@sanity/ui": "^2.8.9",
-    "@sanity/util": "^3.55.0",
+    "@sanity/pkg-utils": "^6.11.4",
+    "@sanity/schema": "^3.62.1",
+    "@sanity/types": "^3.62.1",
+    "@sanity/ui": "^2.8.10",
+    "@sanity/util": "^3.62.1",
     "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/jest-dom": "^6.6.2",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.5",
-    "@types/lodash": "^4.17.7",
+    "@types/lodash": "^4.17.12",
     "@types/node": "^18.19.8",
     "@types/node-ipc": "^9.2.3",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/ws": "~8.5.12",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "@vitest/browser": "^2.1.3",
+    "@xstate/react": "^4.1.3",
     "dotenv": "^16.4.5",
-    "express": "^4.19.2",
+    "express": "^4.21.1",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
     "jest-dev-server": "^10.1.1",
     "jest-environment-node": "^29.7.0",
     "jsdom": "^25.0.1",
     "node-ipc": "npm:@node-ipc/compat@9.2.5",
+    "playwright": "^1.48.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13",
     "ts-node": "^10.9.2",
-    "typescript": "5.6.2",
-    "vite": "^5.4.2",
-    "vitest": "^2.1.1",
+    "typescript": "5.6.3",
+    "vite": "^5.4.10",
+    "vitest": "^2.1.3",
+    "vitest-browser-react": "^0.0.3",
     "@sanity/gherkin-driver": "^0.0.1"
   },
   "peerDependencies": {
-    "@sanity/block-tools": "^3.47.1",
-    "@sanity/schema": "^3.47.1",
-    "@sanity/types": "^3.47.1",
-    "@sanity/util": "^3.47.1",
+    "@sanity/block-tools": "^3.62.1",
+    "@sanity/schema": "^3.62.1",
+    "@sanity/types": "^3.62.1",
+    "@sanity/util": "^3.62.1",
     "react": "^16.9 || ^17 || ^18",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.13"

package/src/editor/Editable.tsx

@@ -11,8 +11,6 @@ import {
   type ClipboardEvent,
   type CSSProperties,
   type FocusEventHandler,
-  type ForwardedRef,
-  type HTMLProps,
   type KeyboardEvent,
   type MutableRefObject,
   type TextareaHTMLAttributes,
@@ -66,7 +64,6 @@ import {
 import {Element} from './components/Element'
 import {Leaf} from './components/Leaf'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
-import {usePortableTextEditorKeyGenerator} from './hooks/usePortableTextEditorKeyGenerator'
 import {usePortableTextEditorReadOnlyStatus} from './hooks/usePortableTextReadOnly'
 import {createWithHotkeys, createWithInsertData} from './plugins'
 import {PortableTextEditor} from './PortableTextEditor'
@@ -113,11 +110,10 @@ export type PortableTextEditableProps = Omit<
 /**
  * @public
  */
-export const PortableTextEditable = forwardRef(function PortableTextEditable(
-  props: PortableTextEditableProps &
-    Omit<HTMLProps<HTMLDivElement>, 'as' | 'onPaste' | 'onBeforeInput'>,
-  forwardedRef: ForwardedRef<HTMLDivElement>,
-) {
+export const PortableTextEditable = forwardRef<
+  Omit<HTMLDivElement, 'as' | 'onPaste' | 'onBeforeInput'>,
+  PortableTextEditableProps
+>(function PortableTextEditable(props, forwardedRef) {
   const {
     hotkeys,
     onBlur,
@@ -142,7 +138,6 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
 
   const portableTextEditor = usePortableTextEditor()
   const readOnly = usePortableTextEditorReadOnlyStatus()
-  const keyGenerator = usePortableTextEditorKeyGenerator()
   const ref = useRef<HTMLDivElement | null>(null)
   const [editableElement, setEditableElement] = useState<HTMLDivElement | null>(
     null,
@@ -167,8 +162,8 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
 
   // React/UI-specific plugins
   const withInsertData = useMemo(
-    () => createWithInsertData(editorActor, schemaTypes, keyGenerator),
-    [editorActor, keyGenerator, schemaTypes],
+    () => createWithInsertData(editorActor, schemaTypes),
+    [editorActor, schemaTypes],
   )
   const withHotKeys = useMemo(
     () => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
@@ -639,6 +634,11 @@ export const PortableTextEditable = forwardRef(function PortableTextEditable(
         props.onKeyDown(event)
       }
       if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'key down',
+          nativeEvent: event.nativeEvent,
+          editor: slateEditor,
+        })
         slateEditor.pteWithHotKeys(event)
       }
     },

package/src/editor/PortableTextEditor.tsx

@@ -24,16 +24,14 @@ import type {
 import {debugWithName} from '../utils/debug'
 import {getPortableTextMemberSchemaTypes} from '../utils/getPortableTextMemberSchemaTypes'
 import {compileType} from '../utils/schema'
+import {coreBehaviors} from './behavior/behavior.core'
 import {SlateContainer} from './components/SlateContainer'
 import {Synchronizer} from './components/Synchronizer'
 import {editorMachine, type EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
-import {
-  defaultKeyGenerator,
-  PortableTextEditorKeyGeneratorContext,
-} from './hooks/usePortableTextEditorKeyGenerator'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {PortableTextEditorReadOnlyContext} from './hooks/usePortableTextReadOnly'
+import {defaultKeyGenerator} from './key-generator'
 
 const debug = debugWithName('component:PortableTextEditor')
 
@@ -125,14 +123,20 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
       )
     }
 
-    this.editorActor = createActor(editorMachine)
-    this.editorActor.start()
-
     this.schemaTypes = getPortableTextMemberSchemaTypes(
       props.schemaType.hasOwnProperty('jsonType')
         ? props.schemaType
         : compileType(props.schemaType),
     )
+
+    this.editorActor = createActor(editorMachine, {
+      input: {
+        behaviors: coreBehaviors,
+        keyGenerator: props.keyGenerator || defaultKeyGenerator,
+        schema: this.schemaTypes,
+      },
+    })
+    this.editorActor.start()
   }
 
   componentDidUpdate(prevProps: PortableTextEditorProps) {
@@ -143,7 +147,13 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
           ? this.props.schemaType
           : compileType(this.props.schemaType),
       )
+
+      this.editorActor.send({
+        type: 'update schema',
+        schema: this.schemaTypes,
+      })
     }
+
     if (this.props.editorRef !== prevProps.editorRef && this.props.editorRef) {
       this.props.editorRef.current = this
     }
@@ -171,39 +181,34 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
         : Number.parseInt(this.props.maxBlocks.toString(), 10) || undefined
 
     const readOnly = Boolean(this.props.readOnly)
-    const keyGenerator = this.props.keyGenerator || defaultKeyGenerator
+
     return (
       <SlateContainer
-        keyGenerator={keyGenerator}
         maxBlocks={maxBlocks}
         patches$={_patches$}
         portableTextEditor={this}
         readOnly={readOnly}
       >
-        <PortableTextEditorKeyGeneratorContext.Provider value={keyGenerator}>
-          <PortableTextEditorContext.Provider value={this}>
-            <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
-              <PortableTextEditorSelectionProvider
+        <PortableTextEditorContext.Provider value={this}>
+          <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
+            <PortableTextEditorSelectionProvider editorActor={this.editorActor}>
+              <Synchronizer
                 editorActor={this.editorActor}
-              >
-                <Synchronizer
-                  editorActor={this.editorActor}
-                  getValue={this.getValue}
-                  onChange={(change) => {
-                    this.props.onChange(change)
-                    /**
-                     * For backwards compatibility, we relay all changes to the
-                     * `change$` Subject as well.
-                     */
-                    this.change$.next(change)
-                  }}
-                  value={value}
-                />
-                {children}
-              </PortableTextEditorSelectionProvider>
-            </PortableTextEditorReadOnlyContext.Provider>
-          </PortableTextEditorContext.Provider>
-        </PortableTextEditorKeyGeneratorContext.Provider>
+                getValue={this.getValue}
+                onChange={(change) => {
+                  this.props.onChange(change)
+                  /**
+                   * For backwards compatibility, we relay all changes to the
+                   * `change$` Subject as well.
+                   */
+                  this.change$.next(change)
+                }}
+                value={value}
+              />
+              {children}
+            </PortableTextEditorSelectionProvider>
+          </PortableTextEditorReadOnlyContext.Provider>
+        </PortableTextEditorContext.Provider>
       </SlateContainer>
     )
   }

package/src/editor/__tests__/self-solving.test.tsx

@@ -4,7 +4,7 @@ import type {PortableTextBlock, PortableTextSpan} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type ComponentProps, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
-import {getTextSelection} from '../../../e2e-tests/__tests__/gherkin-step-helpers'
+import {getTextSelection} from '../../../gherkin-tests/gherkin-step-helpers'
 import {PortableTextEditable} from '../Editable'
 import {PortableTextEditor} from '../PortableTextEditor'
 

package/src/editor/behavior/behavior.actions.ts

@@ -0,0 +1,39 @@
+import {Editor} from 'slate'
+import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+import type {BehaviorAction, PickFromUnion} from './behavior.types'
+
+type BehaviorActionContext = {
+  keyGenerator: () => string
+  schema: PortableTextMemberSchemaTypes
+}
+
+export function inserText({
+  event,
+}: {
+  context: BehaviorActionContext
+  event: PickFromUnion<BehaviorAction, 'type', 'insert text'>
+}) {
+  Editor.insertText(event.editor, event.text)
+}
+
+export function inserTextBlock({
+  context,
+  event,
+}: {
+  context: BehaviorActionContext
+  event: PickFromUnion<BehaviorAction, 'type', 'insert text block'>
+}) {
+  Editor.insertNode(event.editor, {
+    _key: context.keyGenerator(),
+    _type: context.schema.block.name,
+    style: context.schema.styles[0].value ?? 'normal',
+    markDefs: [],
+    children: [
+      {
+        _key: context.keyGenerator(),
+        _type: 'span',
+        text: '',
+      },
+    ],
+  })
+}

package/src/editor/behavior/behavior.core.ts

@@ -0,0 +1,37 @@
+import {isHotkey} from 'is-hotkey-esm'
+import {defineBehavior} from './behavior.types'
+import {getFocusBlockObject} from './behavior.utils'
+
+const overwriteSoftReturn = defineBehavior({
+  on: 'key down',
+  guard: ({event}) => isHotkey('shift+enter', event.nativeEvent),
+  actions: [
+    ({event}) => {
+      event.nativeEvent.preventDefault()
+      return {type: 'insert text', text: '\n'}
+    },
+  ],
+})
+
+const enterOnVoidBlock = defineBehavior({
+  on: 'key down',
+  guard: ({context, event}) => {
+    const isEnter = isHotkey('enter', event.nativeEvent)
+
+    if (!isEnter) {
+      return false
+    }
+
+    const focusBlockObject = getFocusBlockObject(context)
+
+    return !!focusBlockObject
+  },
+  actions: [
+    ({event}) => {
+      event.nativeEvent.preventDefault()
+      return {type: 'insert text block', decorators: []}
+    },
+  ],
+})
+
+export const coreBehaviors = [overwriteSoftReturn, enterOnVoidBlock]

package/src/editor/behavior/behavior.types.ts

@@ -0,0 +1,106 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {
+  EditorSelection,
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
+} from '../../types/editor'
+
+/**
+ * @alpha
+ */
+export type BehaviorContext = {
+  schema: PortableTextMemberSchemaTypes
+  value: Array<PortableTextBlock>
+  selection: NonNullable<EditorSelection>
+}
+
+/**
+ * @alpha
+ */
+export type BehaviorEvent = {
+  type: 'key down'
+  nativeEvent: KeyboardEvent
+  editor: PortableTextSlateEditor
+}
+
+/**
+ * @alpha
+ */
+export type BehaviorGuard<
+  TBehaviorEvent extends BehaviorEvent,
+  TGuardResponse,
+> = ({
+  context,
+  event,
+}: {
+  event: TBehaviorEvent
+  context: BehaviorContext
+}) => TGuardResponse | false
+
+/**
+ * @alpha
+ */
+export type BehaviorActionIntend =
+  | {
+      type: 'insert text'
+      text: string
+    }
+  | {
+      type: 'insert text block'
+      decorators: Array<string>
+    }
+
+/**
+ * @alpha
+ */
+export type BehaviorAction = BehaviorActionIntend & {
+  editor: PortableTextSlateEditor
+}
+
+/**
+ * @alpha
+ */
+export type Behavior<
+  TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
+  TGuardResponse = true,
+> = {
+  on: TBehaviorEventType
+  guard?: BehaviorGuard<
+    PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+    TGuardResponse
+  >
+  actions: Array<RaiseBehaviorActionIntend<TBehaviorEventType, TGuardResponse>>
+}
+
+/**
+ * @alpha
+ */
+export type RaiseBehaviorActionIntend<
+  TBehaviorEventType extends BehaviorEvent['type'] = BehaviorEvent['type'],
+  TGuardResponse = true,
+> = (
+  {
+    context,
+    event,
+  }: {
+    context: BehaviorContext
+    event: PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
+  },
+  guardResponse: TGuardResponse,
+) => BehaviorActionIntend | void
+
+export function defineBehavior<
+  TBehaviorEventType extends BehaviorEvent['type'],
+  TGuardResponse = true,
+>(behavior: Behavior<TBehaviorEventType, TGuardResponse>): Behavior {
+  return behavior as unknown as Behavior
+}
+
+/**
+ * @alpha
+ */
+export type PickFromUnion<
+  TUnion,
+  TTagKey extends keyof TUnion,
+  TPickedTags extends TUnion[TTagKey],
+> = TUnion extends Record<TTagKey, TPickedTags> ? TUnion : never

package/src/editor/behavior/behavior.utils.ts

@@ -0,0 +1,34 @@
+import {
+  isKeySegment,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+  type PortableTextObject,
+} from '@sanity/types'
+import type {BehaviorContext} from './behavior.types'
+
+export function getFocusBlock(
+  context: BehaviorContext,
+): {node: PortableTextBlock; path: [KeyedSegment]} | undefined {
+  const key = context.selection
+    ? isKeySegment(context.selection.focus.path[0])
+      ? context.selection.focus.path[0]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? context.value.find((block) => block._key === key)
+    : undefined
+
+  return node && key ? {node, path: [{_key: key}]} : undefined
+}
+
+export function getFocusBlockObject(
+  context: BehaviorContext,
+): {node: PortableTextObject; path: [KeyedSegment]} | undefined {
+  const focusBlock = getFocusBlock(context)
+
+  return focusBlock && !isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}

package/src/editor/components/SlateContainer.tsx

@@ -13,7 +13,6 @@ const debug = debugWithName('component:PortableTextEditor:SlateContainer')
  * @internal
  */
 export interface SlateContainerProps extends PropsWithChildren {
-  keyGenerator: () => string
   maxBlocks: number | undefined
   patches$?: PatchObservable
   portableTextEditor: PortableTextEditor
@@ -25,14 +24,12 @@ export interface SlateContainerProps extends PropsWithChildren {
  * @internal
  */
 export function SlateContainer(props: SlateContainerProps) {
-  const {patches$, portableTextEditor, readOnly, maxBlocks, keyGenerator} =
-    props
+  const {patches$, portableTextEditor, readOnly, maxBlocks} = props
 
   // Create the slate instance, using `useState` ensures setup is only run once, initially
   const [[slateEditor, subscribe]] = useState(() => {
     debug('Creating new Slate editor instance')
     const {editor, subscribe: _sub} = withPlugins(withReact(createEditor()), {
-      keyGenerator,
       maxBlocks,
       patches$,
       portableTextEditor,
@@ -54,20 +51,12 @@ export function SlateContainer(props: SlateContainerProps) {
   useEffect(() => {
     debug('Re-initializing plugin chain')
     withPlugins(slateEditor, {
-      keyGenerator,
       maxBlocks,
       patches$,
       portableTextEditor,
       readOnly,
     })
-  }, [
-    keyGenerator,
-    portableTextEditor,
-    maxBlocks,
-    readOnly,
-    patches$,
-    slateEditor,
-  ])
+  }, [portableTextEditor, maxBlocks, readOnly, patches$, slateEditor])
 
   const initialValue = useMemo(() => {
     return [slateEditor.pteCreateTextBlock({decorators: []})]

package/src/editor/components/Synchronizer.tsx

@@ -9,7 +9,6 @@ import {debugWithName} from '../../utils/debug'
 import {IS_PROCESSING_LOCAL_CHANGES} from '../../utils/weakMaps'
 import type {EditorActor} from '../editor-machine'
 import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
-import {usePortableTextEditorKeyGenerator} from '../hooks/usePortableTextEditorKeyGenerator'
 import {usePortableTextEditorReadOnlyStatus} from '../hooks/usePortableTextReadOnly'
 import {useSyncValue} from '../hooks/useSyncValue'
 
@@ -36,14 +35,12 @@ export interface SynchronizerProps {
  */
 export function Synchronizer(props: SynchronizerProps) {
   const portableTextEditor = usePortableTextEditor()
-  const keyGenerator = usePortableTextEditorKeyGenerator()
   const readOnly = usePortableTextEditorReadOnlyStatus()
   const {editorActor, getValue, onChange, value} = props
   const pendingPatches = useRef<Patch[]>([])
 
   const syncValue = useSyncValue({
     editorActor,
-    keyGenerator,
     portableTextEditor,
     readOnly,
   })