@portabletext/editor 1.1.7 → 1.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -55,7 +55,7 @@
     "@babel/preset-react": "^7.25.9",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
-    "@playwright/test": "1.48.1",
+    "@playwright/test": "1.48.2",
     "@portabletext/toolkit": "^2.0.15",
     "@sanity/block-tools": "^3.62.2",
     "@sanity/diff-match-patch": "^3.1.1",
@@ -88,7 +88,7 @@
     "jest-environment-node": "^29.7.0",
     "jsdom": "^25.0.1",
     "node-ipc": "npm:@node-ipc/compat@9.2.5",
-    "playwright": "^1.48.1",
+    "playwright": "^1.48.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
@@ -124,7 +124,7 @@
     "lint:fix": "biome lint --write .",
     "test": "vitest --run",
     "test:watch": "vitest",
-    "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
-    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
+    "test:e2e-legacy": "jest --config=e2e-tests/e2e.config.ts",
+    "test:e2e-legacy:watch": "jest --config=e2e-tests/e2e.config.ts --watch"
   }
 }

package/src/editor/Editable.tsx

@@ -3,6 +3,7 @@ import {isEqual, noop} from 'lodash'
 import {
   forwardRef,
   useCallback,
+  useContext,
   useEffect,
   useImperativeHandle,
   useMemo,
@@ -63,6 +64,7 @@ import {
 } from '../utils/values'
 import {Element} from './components/Element'
 import {Leaf} from './components/Leaf'
+import {EditorActorContext} from './editor-actor-context'
 import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {usePortableTextEditorReadOnlyStatus} from './hooks/usePortableTextReadOnly'
 import {createWithHotkeys, createWithInsertData} from './plugins'
@@ -155,7 +157,8 @@ export const PortableTextEditable = forwardRef<
 
   const rangeDecorationsRef = useRef(rangeDecorations)
 
-  const {editorActor, schemaTypes} = portableTextEditor
+  const editorActor = useContext(EditorActorContext)
+  const {schemaTypes} = portableTextEditor
   const slateEditor = useSlate()
 
   const blockTypeName = schemaTypes.block.name
@@ -166,8 +169,8 @@ export const PortableTextEditable = forwardRef<
     [editorActor, schemaTypes],
   )
   const withHotKeys = useMemo(
-    () => createWithHotkeys(schemaTypes, portableTextEditor, hotkeys),
-    [hotkeys, portableTextEditor, schemaTypes],
+    () => createWithHotkeys(portableTextEditor, hotkeys),
+    [hotkeys, portableTextEditor],
   )
 
   // Output a minimal React editor inside Editable when in readOnly mode.
@@ -216,6 +219,7 @@ export const PortableTextEditable = forwardRef<
         let rendered = (
           <Leaf
             {...lProps}
+            editorActor={editorActor}
             schemaTypes={schemaTypes}
             renderAnnotation={renderAnnotation}
             renderChild={renderChild}
@@ -546,6 +550,14 @@ export const PortableTextEditable = forwardRef<
       if (onBeforeInput) {
         onBeforeInput(event)
       }
+
+      if (!event.defaultPrevented && event.inputType === 'insertText') {
+        editorActor.send({
+          type: 'before insert text',
+          nativeEvent: event,
+          editor: slateEditor,
+        })
+      }
     },
     [onBeforeInput],
   )

package/src/editor/PortableTextEditor.tsx

@@ -27,6 +27,7 @@ import {compileType} from '../utils/schema'
 import {coreBehaviors} from './behavior/behavior.core'
 import {SlateContainer} from './components/SlateContainer'
 import {Synchronizer} from './components/Synchronizer'
+import {EditorActorContext} from './editor-actor-context'
 import {editorMachine, type EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
@@ -92,11 +93,6 @@ export type PortableTextEditorProps = PropsWithChildren<{
  * @public
  */
 export class PortableTextEditor extends Component<PortableTextEditorProps> {
-  /**
-   * @internal
-   * Don't use this API directly. It's subject to change.
-   */
-  public editorActor: EditorActor
   /**
    * An observable of all the editor changes.
    */
@@ -109,6 +105,7 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
    * The editor API (currently implemented with Slate).
    */
   private editable?: EditableAPI
+  private editorActor: EditorActor
 
   constructor(props: PortableTextEditorProps) {
     super(props)
@@ -183,33 +180,38 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     const readOnly = Boolean(this.props.readOnly)
 
     return (
-      <SlateContainer
-        maxBlocks={maxBlocks}
-        patches$={_patches$}
-        portableTextEditor={this}
-        readOnly={readOnly}
-      >
-        <PortableTextEditorContext.Provider value={this}>
-          <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
-            <PortableTextEditorSelectionProvider editorActor={this.editorActor}>
-              <Synchronizer
+      <EditorActorContext.Provider value={this.editorActor}>
+        <SlateContainer
+          editorActor={this.editorActor}
+          maxBlocks={maxBlocks}
+          patches$={_patches$}
+          portableTextEditor={this}
+          readOnly={readOnly}
+        >
+          <PortableTextEditorContext.Provider value={this}>
+            <PortableTextEditorReadOnlyContext.Provider value={readOnly}>
+              <PortableTextEditorSelectionProvider
                 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>
-      </SlateContainer>
+              >
+                <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>
+        </SlateContainer>
+      </EditorActorContext.Provider>
     )
   }
 

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

@@ -1,5 +1,6 @@
-import {Editor} from 'slate'
+import {Editor, Transforms} from 'slate'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
+import {toSlateRange} from '../../utils/ranges'
 import type {BehaviorAction, PickFromUnion} from './behavior.types'
 
 type BehaviorActionContext = {
@@ -7,33 +8,52 @@ type BehaviorActionContext = {
   schema: PortableTextMemberSchemaTypes
 }
 
-export function inserText({
+type BehaviourActionImplementation<TBehaviorAction extends BehaviorAction> = ({
+  context,
   event,
 }: {
   context: BehaviorActionContext
-  event: PickFromUnion<BehaviorAction, 'type', 'insert text'>
-}) {
-  Editor.insertText(event.editor, event.text)
+  event: TBehaviorAction
+}) => void
+
+type BehaviourActionImplementations = {
+  [TBehaviorActionType in BehaviorAction['type']]: BehaviourActionImplementation<
+    PickFromUnion<BehaviorAction, 'type', TBehaviorActionType>
+  >
 }
 
-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: '',
-      },
-    ],
-  })
+export const behaviorActionImplementations: BehaviourActionImplementations = {
+  'apply block style': ({event}) => {
+    for (const path of event.paths) {
+      const at = toSlateRange(
+        {anchor: {path, offset: 0}, focus: {path, offset: 0}},
+        event.editor,
+      )!
+
+      Transforms.setNodes(event.editor, {style: event.style}, {at})
+    }
+  },
+  'delete text': ({event}) => {
+    Transforms.delete(event.editor, {
+      at: toSlateRange(event.selection, event.editor)!,
+    })
+  },
+  'insert text': ({event}) => {
+    Editor.insertText(event.editor, event.text)
+  },
+  'insert text block': ({context, event}) => {
+    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.types.ts

@@ -1,4 +1,4 @@
-import type {PortableTextBlock} from '@sanity/types'
+import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
 import type {
   EditorSelection,
   PortableTextMemberSchemaTypes,
@@ -17,11 +17,17 @@ export type BehaviorContext = {
 /**
  * @alpha
  */
-export type BehaviorEvent = {
-  type: 'key down'
-  nativeEvent: KeyboardEvent
-  editor: PortableTextSlateEditor
-}
+export type BehaviorEvent =
+  | {
+      type: 'key down'
+      nativeEvent: KeyboardEvent
+      editor: PortableTextSlateEditor
+    }
+  | {
+      type: 'before insert text'
+      nativeEvent: InputEvent
+      editor: PortableTextSlateEditor
+    }
 
 /**
  * @alpha
@@ -49,6 +55,15 @@ export type BehaviorActionIntend =
       type: 'insert text block'
       decorators: Array<string>
     }
+  | {
+      type: 'apply block style'
+      paths: Array<[KeyedSegment]>
+      style: string
+    }
+  | {
+      type: 'delete text'
+      selection: NonNullable<EditorSelection>
+    }
 
 /**
  * @alpha
@@ -89,6 +104,9 @@ export type RaiseBehaviorActionIntend<
   guardResponse: TGuardResponse,
 ) => BehaviorActionIntend | void
 
+/**
+ * @alpha
+ */
 export function defineBehavior<
   TBehaviorEventType extends BehaviorEvent['type'],
   TGuardResponse = true,

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

@@ -1,12 +1,31 @@
 import {
   isKeySegment,
+  isPortableTextSpan,
   isPortableTextTextBlock,
   type KeyedSegment,
   type PortableTextBlock,
   type PortableTextObject,
+  type PortableTextSpan,
+  type PortableTextTextBlock,
 } from '@sanity/types'
 import type {BehaviorContext} from './behavior.types'
 
+/**
+ * Selection utilities
+ */
+
+export function selectionIsCollapsed(context: BehaviorContext) {
+  return (
+    context.selection?.anchor.path.join() ===
+      context.selection?.focus.path.join() &&
+    context.selection?.anchor.offset === context.selection?.focus.offset
+  )
+}
+
+/**
+ * Value utilities
+ */
+
 export function getFocusBlock(
   context: BehaviorContext,
 ): {node: PortableTextBlock; path: [KeyedSegment]} | undefined {
@@ -23,6 +42,16 @@ export function getFocusBlock(
   return node && key ? {node, path: [{_key: key}]} : undefined
 }
 
+export function getFocusTextBlock(
+  context: BehaviorContext,
+): {node: PortableTextTextBlock; path: [KeyedSegment]} | undefined {
+  const focusBlock = getFocusBlock(context)
+
+  return focusBlock && isPortableTextTextBlock(focusBlock.node)
+    ? {node: focusBlock.node, path: focusBlock.path}
+    : undefined
+}
+
 export function getFocusBlockObject(
   context: BehaviorContext,
 ): {node: PortableTextObject; path: [KeyedSegment]} | undefined {
@@ -32,3 +61,42 @@ export function getFocusBlockObject(
     ? {node: focusBlock.node, path: focusBlock.path}
     : undefined
 }
+
+export function getFocusChild(context: BehaviorContext):
+  | {
+      node: PortableTextObject | PortableTextSpan
+      path: [KeyedSegment, 'children', KeyedSegment]
+    }
+  | undefined {
+  const focusBlock = getFocusTextBlock(context)
+
+  if (!focusBlock) {
+    return undefined
+  }
+
+  const key = context.selection
+    ? isKeySegment(context.selection.focus.path[2])
+      ? context.selection.focus.path[2]._key
+      : undefined
+    : undefined
+
+  const node = key
+    ? focusBlock.node.children.find((span) => span._key === key)
+    : undefined
+
+  return node && key
+    ? {node, path: [...focusBlock.path, 'children', {_key: key}]}
+    : undefined
+}
+
+export function getFocusSpan(
+  context: BehaviorContext,
+):
+  | {node: PortableTextSpan; path: [KeyedSegment, 'children', KeyedSegment]}
+  | undefined {
+  const focusChild = getFocusChild(context)
+
+  return focusChild && isPortableTextSpan(focusChild.node)
+    ? {node: focusChild.node, path: focusChild.path}
+    : undefined
+}

package/src/editor/components/Leaf.tsx

@@ -25,6 +25,7 @@ import type {
   RenderDecoratorFunction,
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
+import type {EditorActor} from '../editor-machine'
 import {usePortableTextEditor} from '../hooks/usePortableTextEditor'
 import {DefaultAnnotation} from '../nodes/DefaultAnnotation'
 import {PortableTextEditor} from '../PortableTextEditor'
@@ -37,6 +38,7 @@ const EMPTY_MARKS: string[] = []
  * @internal
  */
 export interface LeafProps extends RenderLeafProps {
+  editorActor: EditorActor
   children: ReactElement
   schemaTypes: PortableTextMemberSchemaTypes
   renderAnnotation?: RenderAnnotationFunction
@@ -51,6 +53,7 @@ export interface LeafProps extends RenderLeafProps {
  */
 export const Leaf = (props: LeafProps) => {
   const {
+    editorActor,
     attributes,
     children,
     leaf,
@@ -142,12 +145,12 @@ export const Leaf = (props: LeafProps) => {
       return undefined
     }
 
-    const onBlur = portableTextEditor.editorActor.on('blur', () => {
+    const onBlur = editorActor.on('blur', () => {
       setFocused(false)
       setSelected(false)
     })
 
-    const onFocus = portableTextEditor.editorActor.on('focus', () => {
+    const onFocus = editorActor.on('focus', () => {
       const sel = PortableTextEditor.getSelection(portableTextEditor)
       if (
         sel &&
@@ -159,21 +162,18 @@ export const Leaf = (props: LeafProps) => {
       setSelectedFromRange()
     })
 
-    const onSelection = portableTextEditor.editorActor.on(
-      'selection',
-      (event) => {
-        if (
-          event.selection &&
-          isEqual(event.selection.focus.path, path) &&
-          PortableTextEditor.isCollapsedSelection(portableTextEditor)
-        ) {
-          setFocused(true)
-        } else {
-          setFocused(false)
-        }
-        setSelectedFromRange()
-      },
-    )
+    const onSelection = editorActor.on('selection', (event) => {
+      if (
+        event.selection &&
+        isEqual(event.selection.focus.path, path) &&
+        PortableTextEditor.isCollapsedSelection(portableTextEditor)
+      ) {
+        setFocused(true)
+      } else {
+        setFocused(false)
+      }
+      setSelectedFromRange()
+    })
 
     return () => {
       onBlur.unsubscribe()

package/src/editor/components/SlateContainer.tsx

@@ -4,6 +4,7 @@ import {Slate, withReact} from 'slate-react'
 import type {PatchObservable} from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {KEY_TO_SLATE_ELEMENT, KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
+import type {EditorActor} from '../editor-machine'
 import {withPlugins} from '../plugins'
 import type {PortableTextEditor} from '../PortableTextEditor'
 
@@ -13,6 +14,7 @@ const debug = debugWithName('component:PortableTextEditor:SlateContainer')
  * @internal
  */
 export interface SlateContainerProps extends PropsWithChildren {
+  editorActor: EditorActor
   maxBlocks: number | undefined
   patches$?: PatchObservable
   portableTextEditor: PortableTextEditor
@@ -24,12 +26,13 @@ export interface SlateContainerProps extends PropsWithChildren {
  * @internal
  */
 export function SlateContainer(props: SlateContainerProps) {
-  const {patches$, portableTextEditor, readOnly, maxBlocks} = props
+  const {editorActor, 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()), {
+      editorActor,
       maxBlocks,
       patches$,
       portableTextEditor,
@@ -51,6 +54,7 @@ export function SlateContainer(props: SlateContainerProps) {
   useEffect(() => {
     debug('Re-initializing plugin chain')
     withPlugins(slateEditor, {
+      editorActor,
       maxBlocks,
       patches$,
       portableTextEditor,

package/src/editor/editor-actor-context.ts

@@ -0,0 +1,4 @@
+import {createContext} from 'react'
+import type {EditorActor} from './editor-machine'
+
+export const EditorActorContext = createContext<EditorActor>({} as EditorActor)

package/src/editor/editor-machine.ts

@@ -18,7 +18,7 @@ import type {
 import {toPortableTextRange} from '../utils/ranges'
 import {fromSlateValue} from '../utils/values'
 import {KEY_TO_VALUE_ELEMENT} from '../utils/weakMaps'
-import {inserText, inserTextBlock} from './behavior/behavior.actions'
+import {behaviorActionImplementations} from './behavior/behavior.actions'
 import type {
   Behavior,
   BehaviorAction,
@@ -124,14 +124,6 @@ export const editorMachine = setup({
     },
   },
   actions: {
-    'apply:insert text': ({context, event}) => {
-      assertEvent(event, 'insert text')
-      inserText({context, event})
-    },
-    'apply:insert text block': ({context, event}) => {
-      assertEvent(event, 'insert text block')
-      inserTextBlock({context, event})
-    },
     'assign schema': assign({
       schema: ({event}) => {
         assertEvent(event, 'update schema')
@@ -161,7 +153,7 @@ export const editorMachine = setup({
       pendingEvents: [],
     }),
     'handle behavior event': enqueueActions(({context, event, enqueue}) => {
-      assertEvent(event, ['key down'])
+      assertEvent(event, ['key down', 'before insert text'])
 
       const eventBehaviors = context.behaviors.filter(
         (behavior) => behavior.on === event.type,
@@ -255,11 +247,20 @@ export const editorMachine = setup({
     'key down': {
       actions: ['handle behavior event'],
     },
+    'before insert text': {
+      actions: ['handle behavior event'],
+    },
+    'apply block style': {
+      actions: [behaviorActionImplementations['apply block style']],
+    },
+    'delete text': {
+      actions: [behaviorActionImplementations['delete text']],
+    },
     'insert text': {
-      actions: ['apply:insert text'],
+      actions: [behaviorActionImplementations['insert text']],
     },
     'insert text block': {
-      actions: ['apply:insert text block'],
+      actions: [behaviorActionImplementations['insert text block']],
     },
   },
   initial: 'pristine',

package/src/editor/hooks/useSyncValue.ts

@@ -52,7 +52,7 @@ export function useSyncValue(
   userCallbackFn?: () => void,
 ) => void {
   const {editorActor, portableTextEditor, readOnly} = props
-  const {schemaTypes} = portableTextEditor
+  const schemaTypes = editorActor.getSnapshot().context.schema
   const previousValue = useRef<PortableTextBlock[] | undefined>()
   const slateEditor = useSlate()
   const updateValueFunctionRef =

package/src/editor/plugins/createWithHotKeys.ts

@@ -3,10 +3,7 @@ import {isHotkey} from 'is-hotkey-esm'
 import type {KeyboardEvent} from 'react'
 import {Editor, Node, Path, Range, Transforms} from 'slate'
 import type {ReactEditor} from 'slate-react'
-import type {
-  PortableTextMemberSchemaTypes,
-  PortableTextSlateEditor,
-} from '../../types/editor'
+import type {PortableTextSlateEditor} from '../../types/editor'
 import type {HotkeyOptions} from '../../types/options'
 import type {SlateTextBlock, VoidElement} from '../../types/slate'
 import {debugWithName} from '../../utils/debug'
@@ -29,7 +26,6 @@ const DEFAULT_HOTKEYS: HotkeyOptions = {
  *
  */
 export function createWithHotkeys(
-  types: PortableTextMemberSchemaTypes,
   portableTextEditor: PortableTextEditor,
   hotkeysFromOptions?: HotkeyOptions,
 ): (editor: PortableTextSlateEditor & ReactEditor) => any {
@@ -167,25 +163,6 @@ export function createWithHotkeys(
           }
           return
         }
-
-        // Enter from another style than the first (default one)
-        if (
-          editor.isTextBlock(focusBlock) &&
-          focusBlock.style &&
-          focusBlock.style !== types.styles[0].value
-        ) {
-          const [, end] = Range.edges(editor.selection)
-          const endAtEndOfNode = Editor.isEnd(editor, end, end.path)
-          if (endAtEndOfNode) {
-            Editor.insertNode(
-              editor,
-              editor.pteCreateTextBlock({decorators: []}),
-            )
-            event.preventDefault()
-            editor.onChange()
-            return
-          }
-        }
       }
     }
     return editor