@portabletext/editor 1.53.0 → 1.54.0

package/lib/utils/index.d.ts

@@ -19,7 +19,7 @@ declare type BaseDefinition = {
  * @beta
  */
 declare type BlockOffset = {
-  path: [KeyedSegment]
+  path: BlockPath
   offset: number
 }
 
@@ -76,11 +76,33 @@ export declare function blockOffsetToSpanSelectionPoint({
   direction: 'forward' | 'backward'
 }):
   | {
-      path: [KeyedSegment, 'children', KeyedSegment]
+      path: ChildPath
       offset: number
     }
   | undefined
 
+/**
+ * @public
+ */
+declare type BlockPath = [
+  {
+    _key: string
+  },
+]
+
+/**
+ * @public
+ */
+declare type ChildPath = [
+  {
+    _key: string
+  },
+  'children',
+  {
+    _key: string
+  },
+]
+
 /**
  * @public
  */
@@ -255,7 +277,7 @@ export declare function getBlockEndPoint({
   context: Pick<EditorContext, 'schema'>
   block: {
     node: PortableTextBlock
-    path: [KeyedSegment]
+    path: BlockPath
   }
 }): EditorSelectionPoint
 
@@ -269,7 +291,7 @@ export declare function getBlockStartPoint({
   context: Pick<EditorContext, 'schema'>
   block: {
     node: PortableTextBlock
-    path: [KeyedSegment]
+    path: BlockPath
   }
 }): EditorSelectionPoint
 
@@ -365,7 +387,7 @@ export declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   targetBlock: PortableTextTextBlock
   incomingBlock: PortableTextTextBlock
-}): PortableTextTextBlock<PortableTextObject | PortableTextSpan>
+}): PortableTextTextBlock<PortableTextSpan | PortableTextObject>
 
 declare type MIMEType = `${string}/${string}`
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.53.0",
+  "version": "1.54.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -74,35 +74,35 @@
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.1.0-rc.1",
+    "react-compiler-runtime": "19.1.0-rc.2",
     "slate": "0.115.1",
     "slate-dom": "^0.114.0",
     "slate-react": "0.114.2",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.4",
-    "@portabletext/block-tools": "1.1.30",
+    "@portabletext/block-tools": "1.1.31",
     "@portabletext/patches": "1.1.4"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
-    "@sanity/pkg-utils": "^7.2.4",
-    "@sanity/schema": "^3.92.0",
-    "@sanity/types": "^3.92.0",
+    "@sanity/pkg-utils": "^7.6.1",
+    "@sanity/schema": "^3.93.0",
+    "@sanity/types": "^3.93.0",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.16",
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.33.0",
-    "@typescript-eslint/parser": "^8.33.0",
+    "@typescript-eslint/eslint-plugin": "^8.34.0",
+    "@typescript-eslint/parser": "^8.34.0",
     "@vitejs/plugin-react": "^4.5.2",
     "@vitest/browser": "^3.2.3",
     "@vitest/coverage-istanbul": "^3.2.3",
-    "babel-plugin-react-compiler": "19.1.0-rc.1",
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
     "eslint": "8.57.1",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-f9ae0a4c-20250527",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-12bc60f5-20250613",
     "jsdom": "^26.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -110,12 +110,12 @@
     "typescript": "5.8.3",
     "vite": "^6.2.5",
     "vitest": "^3.2.3",
-    "vitest-browser-react": "^0.2.0",
-    "racejar": "1.2.6"
+    "vitest-browser-react": "^0.3.0",
+    "racejar": "1.2.7"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.92.0",
-    "@sanity/types": "^3.92.0",
+    "@sanity/schema": "^3.93.0",
+    "@sanity/types": "^3.93.0",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/behaviors/behavior.abstract.annotation.ts

@@ -1,8 +1,59 @@
 import {isActiveAnnotation} from '../selectors'
+import * as selectors from '../selectors'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractAnnotationBehaviors = [
+  defineBehavior({
+    on: 'annotation.set',
+    guard: ({snapshot, event}) => {
+      const blockKey = event.at[0]._key
+      const markDefKey = event.at[2]._key
+
+      const block = selectors.getFocusTextBlock({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: {
+            anchor: {
+              path: [{_key: blockKey}],
+              offset: 0,
+            },
+            focus: {
+              path: [{_key: blockKey}],
+              offset: 0,
+            },
+          },
+        },
+      })
+
+      if (!block) {
+        return false
+      }
+
+      const updatedMarkDefs = block.node.markDefs?.map((markDef) => {
+        if (markDef._key === markDefKey) {
+          return {
+            ...markDef,
+            ...event.props,
+          }
+        }
+
+        return markDef
+      })
+
+      return {blockKey, updatedMarkDefs}
+    },
+    actions: [
+      (_, {blockKey, updatedMarkDefs}) => [
+        raise({
+          type: 'block.set',
+          at: [{_key: blockKey}],
+          props: {markDefs: updatedMarkDefs},
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'annotation.toggle',
     guard: ({snapshot, event}) =>

package/src/behaviors/behavior.abstract.delete.ts

@@ -1,3 +1,4 @@
+import {isSpan} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
 import * as utils from '../utils'
 import {raise} from './behavior.types.action'
@@ -64,6 +65,60 @@ export const abstractDeleteBehaviors = [
       ],
     ],
   }),
+  defineBehavior({
+    on: 'delete.child',
+    guard: ({snapshot, event}) => {
+      const focusChild = selectors.getFocusChild({
+        ...snapshot,
+        context: {
+          ...snapshot.context,
+          selection: {
+            anchor: {
+              path: event.at,
+              offset: 0,
+            },
+            focus: {
+              path: event.at,
+              offset: 0,
+            },
+          },
+        },
+      })
+
+      if (!focusChild) {
+        return false
+      }
+
+      if (isSpan(snapshot.context, focusChild.node)) {
+        return {
+          selection: {
+            anchor: {
+              path: event.at,
+              offset: 0,
+            },
+            focus: {
+              path: event.at,
+              offset: focusChild.node.text.length,
+            },
+          },
+        }
+      }
+
+      return {
+        selection: {
+          anchor: {
+            path: event.at,
+            offset: 0,
+          },
+          focus: {
+            path: event.at,
+            offset: 0,
+          },
+        },
+      }
+    },
+    actions: [(_, {selection}) => [raise({type: 'delete', at: selection})]],
+  }),
   defineBehavior({
     on: 'delete.text',
     guard: ({snapshot, event}) => {

package/src/behaviors/behavior.perform-event.ts

@@ -1,9 +1,9 @@
+import {createEditorDom} from '../editor/editor-dom'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
 import {withApplyingBehaviorOperations} from '../editor/with-applying-behavior-operations'
 import {withUndoStep} from '../editor/with-undo-step'
 import {debugWithName} from '../internal-utils/debug'
-import {createEditorDom} from '../internal-utils/selection-elements'
 import {performOperation} from '../operations/behavior.operations'
 import type {PortableTextSlateEditor} from '../types/editor'
 import {abstractBehaviors} from './behavior.abstract'
@@ -116,8 +116,6 @@ export function performEvent({
       })
     })
 
-    editor.onChange()
-
     return
   }
 
@@ -182,6 +180,11 @@ export function performEvent({
         continue
       }
 
+      nativeEventPrevented =
+        actions.some(
+          (action) => action.type === 'raise' || action.type === 'execute',
+        ) || !actions.some((action) => action.type === 'forward')
+
       if (actions.some((action) => action.type === 'execute')) {
         // Since at least one action is about to `execute` changes in the editor,
         // we set up a new undo step.
@@ -190,8 +193,6 @@ export function performEvent({
         withUndoStep(editor, () => {
           for (const action of actions) {
             if (action.type === 'effect') {
-              nativeEventPrevented = true
-
               try {
                 action.effect()
               } catch (error) {
@@ -227,8 +228,6 @@ export function performEvent({
             }
 
             if (action.type === 'raise') {
-              nativeEventPrevented = true
-
               performEvent({
                 mode: 'raise',
                 behaviors,
@@ -245,8 +244,6 @@ export function performEvent({
               continue
             }
 
-            nativeEventPrevented = true
-
             performEvent({
               mode: 'execute',
               behaviors,
@@ -269,8 +266,6 @@ export function performEvent({
 
       for (const action of actions) {
         if (action.type === 'effect') {
-          nativeEventPrevented = true
-
           try {
             action.effect()
           } catch (error) {
@@ -306,8 +301,6 @@ export function performEvent({
         }
 
         if (action.type === 'raise') {
-          nativeEventPrevented = true
-
           performEvent({
             mode: 'raise',
             behaviors,
@@ -347,8 +340,6 @@ export function performEvent({
         },
       })
     })
-
-    editor.onChange()
   } else if (nativeEventPrevented) {
     nativeEvent?.preventDefault()
   }

package/src/behaviors/behavior.types.action.ts

@@ -1,5 +1,5 @@
+import type {EditorDom} from '../editor/editor-dom'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
-import type {EditorDom} from '../internal-utils/selection-elements'
 import type {PickFromUnion} from '../type-utils'
 import type {
   CustomBehaviorEvent,

package/src/behaviors/behavior.types.event.ts

@@ -1,10 +1,11 @@
-import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {PortableTextBlock} from '@sanity/types'
 import type {EventPosition} from '../internal-utils/event-position'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion, StrictExtract} from '../type-utils'
 import type {BlockOffset} from '../types/block-offset'
 import type {BlockWithOptionalKey} from '../types/block-with-optional-key'
 import type {EditorSelection} from '../types/editor'
+import type {AnnotationPath, BlockPath, ChildPath} from '../types/paths'
 
 /**
  * @beta
@@ -63,6 +64,8 @@ const syntheticBehaviorEventTypes = [
   'annotation.remove',
   'block.set',
   'block.unset',
+  'child.set',
+  'child.unset',
   'decorator.add',
   'decorator.remove',
   'delete',
@@ -104,12 +107,22 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'block.set'>
-      at: [KeyedSegment]
+      at: BlockPath
       props: Record<string, unknown>
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'block.unset'>
-      at: [KeyedSegment]
+      at: BlockPath
+      props: Array<string>
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'child.set'>
+      at: ChildPath
+      props: {[prop: string]: unknown}
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'child.unset'>
+      at: ChildPath
       props: Array<string>
     }
   | {
@@ -174,8 +187,8 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>
-      at: [KeyedSegment]
-      to: [KeyedSegment]
+      at: BlockPath
+      to: BlockPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>
@@ -208,10 +221,12 @@ export function isSyntheticBehaviorEvent(
  **************************************/
 
 const abstractBehaviorEventTypes = [
+  'annotation.set',
   'annotation.toggle',
   'decorator.toggle',
   'delete.backward',
   'delete.block',
+  'delete.child',
   'delete.forward',
   'delete.text',
   'deserialize',
@@ -240,6 +255,11 @@ export type AbstractBehaviorEventType =
   (typeof abstractBehaviorEventTypes)[number]
 
 type AbstractBehaviorEvent =
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'annotation.set'>
+      at: AnnotationPath
+      props: Record<string, unknown>
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'annotation.toggle'>
       annotation: {
@@ -258,7 +278,11 @@ type AbstractBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
-      at: [KeyedSegment]
+      at: BlockPath
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.child'>
+      at: ChildPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
@@ -359,11 +383,11 @@ type AbstractBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block down'>
-      at: [KeyedSegment]
+      at: BlockPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block up'>
-      at: [KeyedSegment]
+      at: BlockPath
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select.previous block'>

package/src/behaviors/behavior.types.guard.ts

@@ -1,5 +1,5 @@
+import type {EditorDom} from '../editor/editor-dom'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
-import type {EditorDom} from '../internal-utils/selection-elements'
 
 /**
  * @beta

package/src/editor/Editable.tsx

@@ -543,6 +543,9 @@ export const PortableTextEditable = forwardRef<
           )
         ) {
           Transforms.select(slateEditor, Editor.start(slateEditor, []))
+        }
+
+        if (slateEditor.selection) {
           slateEditor.onChange()
         }
       }

package/src/editor/PortableTextEditor.tsx

@@ -30,7 +30,6 @@ import {createInternalEditor, type InternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import type {EditorActor} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
-import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import type {MutationActor} from './mutation-machine'
 import {RelayActorContext} from './relay-actor-context'
 import type {RelayActor} from './relay-machine'
@@ -288,11 +287,7 @@ export class PortableTextEditor extends Component<
               initialValue={this.editor._internal.slateEditor.initialValue}
             >
               <PortableTextEditorContext.Provider value={this}>
-                <PortableTextEditorSelectionProvider
-                  editorActor={this.editor._internal.editorActor}
-                >
-                  {this.props.children}
-                </PortableTextEditorSelectionProvider>
+                {this.props.children}
               </PortableTextEditorContext.Provider>
             </Slate>
           </RelayActorContext.Provider>

package/src/editor/create-editor.ts

@@ -9,6 +9,7 @@ import {corePriority} from '../priority/priority.core'
 import {createEditorPriority} from '../priority/priority.types'
 import type {EditableAPI, PortableTextSlateEditor} from '../types/editor'
 import {createSlateEditor, type SlateEditor} from './create-slate-editor'
+import {createEditorDom} from './editor-dom'
 import type {EditorActor} from './editor-machine'
 import {editorMachine} from './editor-machine'
 import {
@@ -64,6 +65,10 @@ export function createInternalEditor(config: EditorConfig): {
   })
 
   const editor = {
+    dom: createEditorDom(
+      (event) => editorActor.send(event),
+      slateEditor.instance,
+    ),
     getSnapshot: () =>
       getEditorSnapshot({
         editorActorSnapshot: editorActor.getSnapshot(),

package/src/{internal-utils/selection-elements.ts → editor/editor-dom.ts}

@@ -2,9 +2,9 @@ import {Editor} from 'slate'
 import {DOMEditor} from 'slate-dom'
 import type {EditorSnapshot} from '..'
 import type {BehaviorEvent} from '../behaviors'
+import {toSlateRange} from '../internal-utils/ranges'
 import type {PickFromUnion} from '../type-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
-import {toSlateRange} from './ranges'
 
 export type EditorDom = {
   getBlockNodes: (snapshot: EditorSnapshot) => Array<Node>
@@ -51,17 +51,21 @@ function getBlockNodes(
     return []
   }
 
-  const blockEntries = Array.from(
-    Editor.nodes(slateEditor, {
-      at: range,
-      mode: 'highest',
-      match: (n) => !Editor.isEditor(n),
-    }),
-  )
+  try {
+    const blockEntries = Array.from(
+      Editor.nodes(slateEditor, {
+        at: range,
+        mode: 'highest',
+        match: (n) => !Editor.isEditor(n),
+      }),
+    )
 
-  return blockEntries.map(([blockNode]) =>
-    DOMEditor.toDOMNode(slateEditor, blockNode),
-  )
+    return blockEntries.map(([blockNode]) =>
+      DOMEditor.toDOMNode(slateEditor, blockNode),
+    )
+  } catch {
+    return []
+  }
 }
 
 function getChildNodes(
@@ -78,17 +82,21 @@ function getChildNodes(
     return []
   }
 
-  const childEntries = Array.from(
-    Editor.nodes(slateEditor, {
-      at: range,
-      mode: 'lowest',
-      match: (n) => !Editor.isEditor(n),
-    }),
-  )
+  try {
+    const childEntries = Array.from(
+      Editor.nodes(slateEditor, {
+        at: range,
+        mode: 'lowest',
+        match: (n) => !Editor.isEditor(n),
+      }),
+    )
 
-  return childEntries.map(([childNode]) =>
-    DOMEditor.toDOMNode(slateEditor, childNode),
-  )
+    return childEntries.map(([childNode]) =>
+      DOMEditor.toDOMNode(slateEditor, childNode),
+    )
+  } catch {
+    return []
+  }
 }
 
 export type SelectionDomNodes = {

package/src/editor/editor-provider.tsx

@@ -8,7 +8,6 @@ import {createInternalEditor} from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
 import {EditorContext} from './editor-context'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
-import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
 import {
   PortableTextEditor,
   type PortableTextEditorProps,
@@ -93,11 +92,7 @@ export function EditorProvider(props: EditorProviderProps) {
             }
           >
             <PortableTextEditorContext.Provider value={portableTextEditor}>
-              <PortableTextEditorSelectionProvider
-                editorActor={internalEditor.actors.editorActor}
-              >
-                {props.children}
-              </PortableTextEditorSelectionProvider>
+              {props.children}
             </PortableTextEditorContext.Provider>
           </Slate>
         </RelayActorContext.Provider>