@portabletext/editor 1.50.6 → 1.50.8

package/lib/utils/index.d.cts

@@ -15,7 +15,7 @@ import type {
 import {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import {FocusEvent as FocusEvent_2} from 'react'
 import type {KeyboardEvent as KeyboardEvent_2} from 'react'
-import type {Descendant, Operation, TextUnit} from 'slate'
+import type {Descendant, Operation} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
 import {
@@ -59,6 +59,18 @@ declare type AbstractBehaviorEvent =
         focus: BlockOffset
       }
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
+      unit: 'character' | 'word' | 'line' | 'block'
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
+      at: [KeyedSegment]
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
+      unit: 'character' | 'word' | 'line' | 'block'
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.text'>
       at: {
@@ -189,6 +201,9 @@ declare type AbstractBehaviorEvent =
 declare const abstractBehaviorEventTypes: readonly [
   'annotation.toggle',
   'decorator.toggle',
+  'delete.backward',
+  'delete.block',
+  'delete.forward',
   'delete.text',
   'deserialize',
   'deserialization.success',
@@ -2982,18 +2997,14 @@ declare type SyntheticBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete'>
       at: NonNullable<EditorSelection>
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
-      unit: TextUnit
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
-      at: [KeyedSegment]
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
-      unit: TextUnit
+      /**
+       * Defaults to forward deletion.
+       */
+      direction?: 'backward' | 'forward'
+      /**
+       * Defaults to character deletion.
+       */
+      unit?: 'character' | 'word' | 'line' | 'block'
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'history.redo'>
@@ -3068,9 +3079,6 @@ declare const syntheticBehaviorEventTypes: readonly [
   'decorator.add',
   'decorator.remove',
   'delete',
-  'delete.backward',
-  'delete.block',
-  'delete.forward',
   'history.redo',
   'history.undo',
   'insert.inline object',

package/lib/utils/index.d.ts

@@ -15,7 +15,7 @@ import type {
 import {PortableTextObject, PortableTextSpan} from '@sanity/types'
 import {FocusEvent as FocusEvent_2} from 'react'
 import type {KeyboardEvent as KeyboardEvent_2} from 'react'
-import type {Descendant, Operation, TextUnit} from 'slate'
+import type {Descendant, Operation} from 'slate'
 import type {DOMNode} from 'slate-dom'
 import type {ReactEditor} from 'slate-react'
 import {
@@ -59,6 +59,18 @@ declare type AbstractBehaviorEvent =
         focus: BlockOffset
       }
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
+      unit: 'character' | 'word' | 'line' | 'block'
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
+      at: [KeyedSegment]
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
+      unit: 'character' | 'word' | 'line' | 'block'
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.text'>
       at: {
@@ -189,6 +201,9 @@ declare type AbstractBehaviorEvent =
 declare const abstractBehaviorEventTypes: readonly [
   'annotation.toggle',
   'decorator.toggle',
+  'delete.backward',
+  'delete.block',
+  'delete.forward',
   'delete.text',
   'deserialize',
   'deserialization.success',
@@ -2982,18 +2997,14 @@ declare type SyntheticBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete'>
       at: NonNullable<EditorSelection>
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
-      unit: TextUnit
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
-      at: [KeyedSegment]
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
-      unit: TextUnit
+      /**
+       * Defaults to forward deletion.
+       */
+      direction?: 'backward' | 'forward'
+      /**
+       * Defaults to character deletion.
+       */
+      unit?: 'character' | 'word' | 'line' | 'block'
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'history.redo'>
@@ -3068,9 +3079,6 @@ declare const syntheticBehaviorEventTypes: readonly [
   'decorator.add',
   'decorator.remove',
   'delete',
-  'delete.backward',
-  'delete.block',
-  'delete.forward',
   'history.redo',
   'history.undo',
   'insert.inline object',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.50.6",
+  "version": "1.50.8",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,15 +80,15 @@
     "slate-react": "0.114.2",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.3",
-    "@portabletext/block-tools": "1.1.27",
-    "@portabletext/patches": "1.1.3"
+    "@portabletext/patches": "1.1.4",
+    "@portabletext/block-tools": "1.1.28"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
-    "@sanity/pkg-utils": "^7.2.2",
-    "@sanity/schema": "^3.89.0",
-    "@sanity/types": "^3.89.0",
+    "@sanity/pkg-utils": "^7.2.3",
+    "@sanity/schema": "^3.90.0",
+    "@sanity/types": "^3.90.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/debug": "^4.1.12",
@@ -96,27 +96,27 @@
     "@types/lodash.startcase": "^4.4.9",
     "@types/react": "^19.1.4",
     "@types/react-dom": "^19.1.5",
-    "@typescript-eslint/eslint-plugin": "^8.32.1",
-    "@typescript-eslint/parser": "^8.32.1",
+    "@typescript-eslint/eslint-plugin": "^8.33.0",
+    "@typescript-eslint/parser": "^8.33.0",
     "@vitejs/plugin-react": "^4.4.1",
-    "@vitest/browser": "^3.1.3",
-    "@vitest/coverage-istanbul": "^3.1.3",
+    "@vitest/browser": "^3.1.4",
+    "@vitest/coverage-istanbul": "^3.1.4",
     "babel-plugin-react-compiler": "19.1.0-rc.1",
     "eslint": "8.57.1",
-    "eslint-plugin-react-hooks": "0.0.0-experimental-7a2c7045-20250506",
+    "eslint-plugin-react-hooks": "0.0.0-experimental-f9ae0a4c-20250527",
     "jsdom": "^26.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rxjs": "^7.8.2",
     "typescript": "5.8.3",
     "vite": "^6.2.5",
-    "vitest": "^3.1.3",
+    "vitest": "^3.1.4",
     "vitest-browser-react": "^0.2.0",
     "racejar": "1.2.5"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.89.0",
-    "@sanity/types": "^3.89.0",
+    "@sanity/schema": "^3.90.0",
+    "@sanity/types": "^3.90.0",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.2"
   },

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

@@ -4,6 +4,66 @@ import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractDeleteBehaviors = [
+  defineBehavior({
+    on: 'delete.backward',
+    guard: ({snapshot}) => {
+      if (!snapshot.context.selection) {
+        return false
+      }
+
+      return {selection: snapshot.context.selection}
+    },
+    actions: [
+      ({event}, {selection}) => [
+        raise({
+          type: 'delete',
+          direction: 'backward',
+          unit: event.unit,
+          at: selection,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'delete.forward',
+    guard: ({snapshot}) => {
+      if (!snapshot.context.selection) {
+        return false
+      }
+
+      return {selection: snapshot.context.selection}
+    },
+    actions: [
+      ({event}, {selection}) => [
+        raise({
+          type: 'delete',
+          direction: 'forward',
+          unit: event.unit,
+          at: selection,
+        }),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'delete.block',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'delete',
+          at: {
+            anchor: {
+              path: event.at,
+              offset: 0,
+            },
+            focus: {
+              path: event.at,
+              offset: 0,
+            },
+          },
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'delete.text',
     guard: ({snapshot, event}) => {

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

@@ -1,6 +1,6 @@
 import {isTextBlock, parseBlock} from '../internal-utils/parse-blocks'
 import * as selectors from '../selectors'
-import {getSelectionStartPoint} from '../utils'
+import {getSelectionStartPoint, isSelectionCollapsed} from '../utils'
 import {getBlockEndPoint} from '../utils/util.get-block-end-point'
 import {getSelectionEndPoint} from '../utils/util.get-selection-end-point'
 import {sliceBlocks} from '../utils/util.slice-blocks'
@@ -104,18 +104,28 @@ export const abstractSplitBehaviors = [
       return false
     },
     actions: [
-      (_, {newTextBlock, selection}) => [
-        raise({
-          type: 'delete',
-          at: selection,
-        }),
-        raise({
-          type: 'insert.block',
-          block: newTextBlock,
-          placement: 'after',
-          select: 'start',
-        }),
-      ],
+      (_, {newTextBlock, selection}) =>
+        isSelectionCollapsed(selection)
+          ? [
+              raise({
+                type: 'insert.block',
+                block: newTextBlock,
+                placement: 'after',
+                select: 'start',
+              }),
+            ]
+          : [
+              raise({
+                type: 'delete',
+                at: selection,
+              }),
+              raise({
+                type: 'insert.block',
+                block: newTextBlock,
+                placement: 'after',
+                select: 'start',
+              }),
+            ],
     ],
   }),
 ]

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

@@ -1,5 +1,4 @@
 import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
-import type {TextUnit} from 'slate'
 import type {EventPosition} from '../internal-utils/event-position'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion, StrictExtract} from '../type-utils'
@@ -67,9 +66,6 @@ const syntheticBehaviorEventTypes = [
   'decorator.add',
   'decorator.remove',
   'delete',
-  'delete.backward',
-  'delete.block',
-  'delete.forward',
   'history.redo',
   'history.undo',
   'insert.inline object',
@@ -131,18 +127,14 @@ export type SyntheticBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete'>
       at: NonNullable<EditorSelection>
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
-      unit: TextUnit
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
-      at: [KeyedSegment]
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
-      unit: TextUnit
+      /**
+       * Defaults to forward deletion.
+       */
+      direction?: 'backward' | 'forward'
+      /**
+       * Defaults to character deletion.
+       */
+      unit?: 'character' | 'word' | 'line' | 'block'
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'history.redo'>
@@ -218,6 +210,9 @@ export function isSyntheticBehaviorEvent(
 const abstractBehaviorEventTypes = [
   'annotation.toggle',
   'decorator.toggle',
+  'delete.backward',
+  'delete.block',
+  'delete.forward',
   'delete.text',
   'deserialize',
   'deserialization.success',
@@ -257,6 +252,18 @@ type AbstractBehaviorEvent =
       decorator: string
       at?: {anchor: BlockOffset; focus: BlockOffset}
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
+      unit: 'character' | 'word' | 'line' | 'block'
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.block'>
+      at: [KeyedSegment]
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'delete.forward'>
+      unit: 'character' | 'word' | 'line' | 'block'
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.text'>
       at: {

package/src/editor/mutation-machine.ts

@@ -40,6 +40,9 @@ export const mutationMachine = setup({
       slateEditor: PortableTextSlateEditor
     },
     events: {} as
+      | {
+          type: 'mutation delay passed'
+        }
       | {
           type: 'patch'
           patch: Patch
@@ -162,17 +165,26 @@ export const mutationMachine = setup({
         input.slateEditor.apply = originalApply
       }
     }),
+    'mutation debouncer': fromCallback(({sendBack}) => {
+      const interval = setInterval(
+        () => {
+          sendBack({type: 'mutation delay passed'})
+        },
+        process.env.NODE_ENV === 'test' ? 250 : 0,
+      )
+
+      return () => {
+        clearInterval(interval)
+      }
+    }),
   },
   guards: {
     'is read-only': ({context}) => context.readOnly,
     'is typing': stateIn({typing: 'typing'}),
-    'no pending mutations': ({context}) =>
-      context.pendingMutations.length === 0,
     'slate is normalizing': ({context}) =>
       Editor.isNormalizing(context.slateEditor),
   },
   delays: {
-    'mutation debounce': process.env.NODE_ENV === 'test' ? 250 : 0,
     'type debounce': process.env.NODE_ENV === 'test' ? 0 : 250,
   },
 }).createMachine({
@@ -207,6 +219,7 @@ export const mutationMachine = setup({
           exit: [
             () => {
               debug('exit: typing->idle')
+              debug('entry: typing->typing')
             },
           ],
           on: {
@@ -216,19 +229,14 @@ export const mutationMachine = setup({
           },
         },
         typing: {
-          entry: [
-            () => {
-              debug('entry: typing->typing')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: typing->typing')
-            },
-          ],
           after: {
             'type debounce': {
               target: 'idle',
+              actions: [
+                () => {
+                  debug('exit: typing->typing')
+                },
+              ],
             },
           },
           on: {
@@ -258,77 +266,58 @@ export const mutationMachine = setup({
             },
           ],
           on: {
-            patch: {
-              actions: [
-                'emit patch',
-                'defer mutation',
-                'emit has pending mutations',
-              ],
-              target: 'emitting mutations',
-            },
-          },
-        },
-        'emitting mutations': {
-          entry: [
-            () => {
-              debug('entry: mutations->emitting mutations')
-            },
-          ],
-          exit: [
-            () => {
-              debug('exit: mutations->emitting mutations')
-            },
-          ],
-          after: {
-            'mutation debounce': [
+            patch: [
               {
                 guard: 'is read-only',
-                target: 'read-only',
+                actions: ['defer patch', 'defer mutation'],
+                target: 'has pending mutations',
               },
               {
-                guard: and([not('is typing'), 'slate is normalizing']),
-                target: 'idle',
-                actions: ['emit mutations', 'clear pending mutations'],
-              },
-              {
-                target: 'emitting mutations',
-                reenter: true,
+                actions: ['emit patch', 'defer mutation'],
+                target: 'has pending mutations',
               },
             ],
           },
-          on: {
-            patch: {
-              target: 'emitting mutations',
-              actions: ['emit patch', 'defer mutation'],
-              reenter: true,
-            },
-          },
         },
-        'read-only': {
+        'has pending mutations': {
           entry: [
             () => {
-              debug('entry: mutations->read-only')
+              debug('entry: mutations->has pending mutations')
             },
+            'emit has pending mutations',
           ],
           exit: [
             () => {
-              debug('exit: mutations->read-only')
+              debug('exit: mutations->has pending mutations')
             },
           ],
-          always: [
-            {
-              guard: not('is read-only'),
-              target: 'emitting mutations',
+          invoke: {
+            src: 'mutation debouncer',
+          },
+          on: {
+            'mutation delay passed': {
+              guard: and([
+                not('is read-only'),
+                not('is typing'),
+                'slate is normalizing',
+              ]),
+              target: 'idle',
               actions: [
                 'emit pending patch events',
                 'clear pending patch events',
+                'emit mutations',
+                'clear pending mutations',
               ],
             },
-          ],
-          on: {
-            patch: {
-              actions: ['defer patch', 'defer mutation'],
-            },
+            'patch': [
+              {
+                guard: 'is read-only',
+                actions: ['defer patch', 'defer mutation'],
+              },
+              {
+                actions: ['emit patch', 'defer mutation'],
+              },
+            ],
           },
         },
       },

package/src/editor/plugins/create-with-event-listeners.ts

@@ -11,7 +11,47 @@ export function createWithEventListeners(editorActor: EditorActor) {
       return editor
     }
 
-    const {select} = editor
+    const {delete: editorDelete, select} = editor
+
+    editor.delete = (options) => {
+      if (isApplyingBehaviorOperations(editor)) {
+        editorDelete(options)
+        return
+      }
+
+      const at = options?.at ?? editor.selection
+
+      if (!at) {
+        console.error('Unexpected call to .delete(...) without `at` option')
+        return
+      }
+
+      const range = Editor.range(editor, at)
+
+      const selection = slateRangeToSelection({
+        schema: editorActor.getSnapshot().context.schema,
+        editor,
+        range,
+      })
+
+      if (!selection) {
+        console.error(
+          'Unexpected call to .delete(...) with invalid `at` option',
+        )
+        return
+      }
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'delete',
+          at: selection,
+          direction: options?.reverse ? 'backward' : 'forward',
+          unit: options?.unit,
+        },
+        editor,
+      })
+    }
 
     editor.deleteBackward = (unit) => {
       if (isApplyingBehaviorOperations(editor)) {

package/src/editor/sync-machine.ts

@@ -428,29 +428,35 @@ async function updateValue({
     debug('Value is empty')
     Editor.withoutNormalizing(slateEditor, () => {
       withoutSaving(slateEditor, () => {
-        withoutPatching(slateEditor, () => {
-          if (doneSyncing) {
-            return
-          }
+        withRemoteChanges(slateEditor, () => {
+          withoutPatching(slateEditor, () => {
+            if (doneSyncing) {
+              return
+            }
 
-          if (hadSelection) {
-            Transforms.deselect(slateEditor)
-          }
-          const childrenLength = slateEditor.children.length
-          slateEditor.children.forEach((_, index) => {
-            Transforms.removeNodes(slateEditor, {
-              at: [childrenLength - 1 - index],
+            if (hadSelection) {
+              Transforms.deselect(slateEditor)
+            }
+
+            const childrenLength = slateEditor.children.length
+
+            slateEditor.children.forEach((_, index) => {
+              Transforms.removeNodes(slateEditor, {
+                at: [childrenLength - 1 - index],
+              })
             })
+
+            Transforms.insertNodes(
+              slateEditor,
+              slateEditor.pteCreateTextBlock({decorators: []}),
+              {at: [0]},
+            )
+
+            // Add a new selection in the top of the document
+            if (hadSelection) {
+              Transforms.select(slateEditor, [0, 0])
+            }
           })
-          Transforms.insertNodes(
-            slateEditor,
-            slateEditor.pteCreateTextBlock({decorators: []}),
-            {at: [0]},
-          )
-          // Add a new selection in the top of the document
-          if (hadSelection) {
-            Transforms.select(slateEditor, [0, 0])
-          }
         })
       })
     })