@portabletext/editor 2.0.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -78,26 +78,26 @@
     "slate": "0.117.2",
     "slate-dom": "^0.117.4",
     "slate-react": "0.117.4",
-    "use-effect-event": "^2.0.3",
+    "use-effect-event": "^1.0.2",
     "xstate": "^5.20.1",
-    "@portabletext/patches": "1.1.6",
+    "@portabletext/block-tools": "2.0.2",
     "@portabletext/keyboard-shortcuts": "1.1.1",
-    "@portabletext/block-tools": "2.0.0"
+    "@portabletext/patches": "1.1.6"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.9.6",
-    "@sanity/schema": "^4.0.1",
-    "@sanity/types": "^4.0.1",
+    "@sanity/schema": "^4.2.0",
+    "@sanity/types": "^4.2.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.35.0",
-    "@typescript-eslint/parser": "^8.35.0",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
     "@vitejs/plugin-react": "^4.6.0",
     "@vitest/browser": "^3.2.4",
     "@vitest/coverage-istanbul": "^3.2.4",
@@ -105,18 +105,18 @@
     "eslint": "8.57.1",
     "eslint-plugin-react-hooks": "0.0.0-experimental-dffacc7b-20250717",
     "jsdom": "^26.0.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rxjs": "^7.8.2",
-    "typescript": "5.8.3",
-    "vite": "^7.0.3",
+    "typescript": "5.9.2",
+    "vite": "^7.0.6",
     "vitest": "^3.2.4",
-    "vitest-browser-react": "^1.0.0",
-    "racejar": "1.2.10"
+    "vitest-browser-react": "^1.0.1",
+    "racejar": "1.2.11"
   },
   "peerDependencies": {
-    "@sanity/schema": "^4.0.1",
-    "@sanity/types": "^4.0.1",
+    "@sanity/schema": "^4.2.0",
+    "@sanity/types": "^4.2.0",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/behaviors/behavior.core.lists.ts

@@ -2,6 +2,7 @@ import {isListBlock, isTextBlock} from '../internal-utils/parse-blocks'
 import {defaultKeyboardShortcuts} from '../keyboard-shortcuts/default-keyboard-shortcuts'
 import * as selectors from '../selectors'
 import {getBlockEndPoint} from '../utils'
+import {isAtTheBeginningOfBlock} from '../utils/util.at-the-beginning-of-block'
 import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
 import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
@@ -11,23 +12,26 @@ const MAX_LIST_LEVEL = 10
 const clearListOnBackspace = defineBehavior({
   on: 'delete.backward',
   guard: ({snapshot}) => {
-    const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
     const focusTextBlock = selectors.getFocusTextBlock(snapshot)
-    const focusSpan = selectors.getFocusSpan(snapshot)
 
-    if (!selectionCollapsed || !focusTextBlock || !focusSpan) {
+    if (!focusTextBlock) {
       return false
     }
 
-    const atTheBeginningOfBLock =
-      focusTextBlock.node.children[0]._key === focusSpan.node._key &&
-      snapshot.context.selection?.focus.offset === 0
+    if (focusTextBlock.node.level !== 1) {
+      return false
+    }
 
-    if (atTheBeginningOfBLock && focusTextBlock.node.level === 1) {
-      return {focusTextBlock}
+    if (
+      !isAtTheBeginningOfBlock({
+        context: snapshot.context,
+        block: focusTextBlock.node,
+      })
+    ) {
+      return false
     }
 
-    return false
+    return {focusTextBlock}
   },
   actions: [
     (_, {focusTextBlock}) => [
@@ -132,6 +136,15 @@ const mergeTextIntoListOnBackspace = defineBehavior({
       return false
     }
 
+    if (
+      !isAtTheBeginningOfBlock({
+        context: snapshot.context,
+        block: focusTextBlock.node,
+      })
+    ) {
+      return false
+    }
+
     if (!isListBlock(snapshot.context, previousBlock.node)) {
       return false
     }

package/src/editor/__tests__/RangeDecorations.test.tsx

@@ -33,6 +33,7 @@ describe('RangeDecorations', () => {
           anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
           focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
         },
+        payload: {id: 'a'},
       },
     ]
 
@@ -85,6 +86,7 @@ describe('RangeDecorations', () => {
           anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
           focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
         },
+        payload: {id: 'a'},
       },
     ]
     rerender(
@@ -111,6 +113,7 @@ describe('RangeDecorations', () => {
           anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
           focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 4},
         },
+        payload: {id: 'a'},
       },
     ]
     rerender(
@@ -138,6 +141,7 @@ describe('RangeDecorations', () => {
           anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
           focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
         },
+        payload: {id: 'a'},
       },
     ]
     rerender(
@@ -156,5 +160,61 @@ describe('RangeDecorations', () => {
         'updated-with-different',
       ])
     })
+
+    // Update the range decorations with a new payload
+    rangeDecorations = [
+      {
+        component: RangeDecorationTestComponent,
+        selection: {
+          anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
+          focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+        },
+        payload: {id: 'b'},
+      },
+    ]
+    rerender(
+      <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
+    await waitFor(() => {
+      expect([
+        rangeDecorationIteration,
+        'updated-with-different-payload',
+      ]).toEqual([4, 'updated-with-different-payload'])
+    })
+
+    // Update the range decorations with a new payload again
+    rangeDecorations = [
+      {
+        component: RangeDecorationTestComponent,
+        selection: {
+          anchor: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 0},
+          focus: {path: [{_key: '123'}, 'children', {_key: '567'}], offset: 2},
+        },
+        payload: {id: 'c'},
+      },
+    ]
+    rerender(
+      <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
+        onChange={onChange}
+        rangeDecorations={rangeDecorations}
+        ref={editorRef}
+        schemaType={schemaType}
+        value={value}
+      />,
+    )
+    await waitFor(() => {
+      expect([
+        rangeDecorationIteration,
+        'updated-with-different-payload',
+      ]).toEqual([5, 'updated-with-different-payload'])
+    })
   })
 })

package/src/editor/range-decorations-machine.ts

@@ -254,6 +254,7 @@ export const rangeDecorationsMachine = setup({
         (decoratedRange) => ({
           anchor: decoratedRange.rangeDecoration.selection?.anchor,
           focus: decoratedRange.rangeDecoration.selection?.focus,
+          payload: decoratedRange.rangeDecoration.payload,
         }),
       )
 
@@ -261,6 +262,7 @@ export const rangeDecorationsMachine = setup({
         (rangeDecoration) => ({
           anchor: rangeDecoration.selection?.anchor,
           focus: rangeDecoration.selection?.focus,
+          payload: rangeDecoration.payload,
         }),
       )
 

package/src/utils/util.at-the-beginning-of-block.ts

@@ -0,0 +1,32 @@
+import type {PortableTextBlock} from '@sanity/types'
+import type {EditorContext} from '../editor/editor-snapshot'
+import {isTextBlock} from '../internal-utils/parse-blocks'
+import {getChildKeyFromSelectionPoint} from '../selection/selection-point'
+import {isSelectionCollapsed} from './util.is-selection-collapsed'
+
+export function isAtTheBeginningOfBlock({
+  context,
+  block,
+}: {
+  context: EditorContext
+  block: PortableTextBlock
+}) {
+  if (!isTextBlock(context, block)) {
+    return false
+  }
+
+  if (!context.selection) {
+    return false
+  }
+
+  if (!isSelectionCollapsed(context.selection)) {
+    return false
+  }
+
+  const focusSpanKey = getChildKeyFromSelectionPoint(context.selection.focus)
+
+  return (
+    focusSpanKey === block.children[0]._key &&
+    context.selection.focus.offset === 0
+  )
+}