@portabletext/editor 2.0.0 → 2.1.0

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react22 from "react";
+import * as react12 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react12.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,16 +80,16 @@
     "slate-react": "0.117.4",
     "use-effect-event": "^2.0.3",
     "xstate": "^5.20.1",
-    "@portabletext/patches": "1.1.6",
     "@portabletext/keyboard-shortcuts": "1.1.1",
-    "@portabletext/block-tools": "2.0.0"
+    "@portabletext/patches": "1.1.6",
+    "@portabletext/block-tools": "2.0.1"
   },
   "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",
@@ -108,15 +108,15 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rxjs": "^7.8.2",
-    "typescript": "5.8.3",
+    "typescript": "5.9.2",
     "vite": "^7.0.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.0",
     "racejar": "1.2.10"
   },
   "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
+  )
+}