@portabletext/editor 1.22.0 → 1.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.22.0",
+  "version": "1.23.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -66,14 +66,14 @@
     "get-random-values-esm": "^1.0.2",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-55955c9-20241229",
+    "react-compiler-runtime": "19.0.0-beta-decd7b8-20250118",
     "slate": "0.112.0",
     "slate-dom": "^0.111.0",
     "slate-react": "0.112.0",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.0",
-    "@portabletext/patches": "1.1.1"
+    "@portabletext/patches": "1.1.1",
+    "@portabletext/block-tools": "1.1.0"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
@@ -91,11 +91,11 @@
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^2.1.8",
-    "@vitest/coverage-istanbul": "^2.1.8",
-    "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "@vitest/browser": "^3.0.2",
+    "@vitest/coverage-istanbul": "^3.0.2",
+    "babel-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-e552027-20250112",
+    "eslint-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^26.0.0",
     "react": "^19.0.0",
@@ -103,7 +103,7 @@
     "rxjs": "^7.8.1",
     "typescript": "5.7.3",
     "vite": "^6.0.4",
-    "vitest": "^2.1.8",
+    "vitest": "^3.0.2",
     "vitest-browser-react": "^0.0.4",
     "racejar": "1.1.1"
   },
@@ -129,8 +129,12 @@
     "lint:fix": "biome lint --write .",
     "test": "vitest --run",
     "test:watch": "vitest",
-    "test:chromium": "vitest --run --project chromium",
-    "test:chromium:watch": "vitest --project chromium",
+    "test:chromium": "vitest --run --project \"browser (chromium)\"",
+    "test:chromium:watch": "vitest --project \"browser (chromium)\"",
+    "test:firefox": "vitest --run --project \"browser (firefox)\"",
+    "test:firefox:watch": "vitest --project \"browser (firefox)\"",
+    "test:webkit": "vitest --run --project \"browser (webkit)\"",
+    "test:webkit:watch": "vitest --project \"browser (webkit)\"",
     "test:unit": "vitest --run --project unit",
     "test:unit:watch": "vitest --project unit"
   }

package/src/editor/create-editor.ts

@@ -74,6 +74,7 @@ export type EditorEvent =
       | 'style.toggle'
       | 'patches'
       | 'update behaviors'
+      | 'update key generator'
       | 'update readOnly'
       | 'update value'
     >

package/src/editor/editor-machine.ts

@@ -105,6 +105,10 @@ export type InternalEditorEvent =
       type: 'update behaviors'
       behaviors: Array<Behavior>
     }
+  | {
+      type: 'update key generator'
+      keyGenerator: () => string
+    }
   | {
       type: 'update value'
       value: Array<PortableTextBlock> | undefined
@@ -493,6 +497,9 @@ export const editorMachine = setup({
     'patches': {actions: emit(({event}) => event)},
     'done loading': {actions: emit({type: 'done loading'})},
     'update behaviors': {actions: 'assign behaviors'},
+    'update key generator': {
+      actions: assign({keyGenerator: ({event}) => event.keyGenerator}),
+    },
     'update schema': {actions: 'assign schema'},
     'update value': {actions: assign({value: ({event}) => event.value})},
     'update maxBlocks': {

package/src/utils/util.slice-blocks.test.ts

@@ -2,43 +2,62 @@ import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {describe, expect, test} from 'vitest'
 import {sliceBlocks} from './util.slice-blocks'
 
-const textBlock1: PortableTextTextBlock = {
+const b1: PortableTextTextBlock = {
   _type: 'block',
   _key: 'b1',
   children: [
     {
       _type: 'span',
-      _key: 's1',
+      _key: 'b1c1',
       text: 'foo',
-      marks: ['strong'],
     },
     {
       _type: 'span',
-      _key: 's2',
+      _key: 'b1c2',
       text: 'bar',
     },
   ],
 }
-const textBlock2: PortableTextTextBlock = {
+const b2: PortableTextBlock = {
+  _type: 'image',
+  _key: 'b2',
+  src: 'https://example.com/image.jpg',
+  alt: 'Example',
+}
+const b3: PortableTextTextBlock = {
   _type: 'block',
   _key: 'b3',
   children: [
     {
       _type: 'span',
-      _key: 's3',
+      _key: 'b3c1',
       text: 'baz',
     },
   ],
 }
+const b4: PortableTextTextBlock = {
+  _type: 'block',
+  _key: 'b4',
+  children: [
+    {
+      _type: 'span',
+      _key: 'b4c1',
+      text: 'fizz',
+    },
+    {
+      _type: 'stock-ticker',
+      _key: 'b4c2',
+      symbol: 'AAPL',
+    },
+    {
+      _type: 'span',
+      _key: 'b4c3',
+      text: 'buzz',
+    },
+  ],
+}
 
-const blocks: Array<PortableTextBlock> = [
-  textBlock1,
-  {
-    _type: 'image',
-    _key: 'b2',
-  },
-  textBlock2,
-]
+const blocks: Array<PortableTextBlock> = [b1, b2, b3, b4]
 
 describe(sliceBlocks.name, () => {
   test('sensible defaults', () => {
@@ -52,19 +71,19 @@ describe(sliceBlocks.name, () => {
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 0,
           },
           focus: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 3,
           },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
-        children: [textBlock1.children[0]],
+        ...b1,
+        children: [b1.children[0]],
       },
     ])
   })
@@ -75,21 +94,21 @@ describe(sliceBlocks.name, () => {
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 1,
           },
           focus: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 2,
           },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
+        ...b1,
         children: [
           {
-            ...textBlock1.children[0],
+            ...b1.children[0],
             text: 'o',
           },
         ],
@@ -97,64 +116,139 @@ describe(sliceBlocks.name, () => {
     ])
   })
 
+  test('starting and ending selection on a block object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b2._key}],
+            offset: 0,
+          },
+        },
+      }),
+    ).toEqual([b2])
+  })
+
   test('ending selection on a block object', () => {
     expect(
       sliceBlocks({
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
             offset: 3,
           },
           focus: {
-            path: [{_key: 'b2'}],
+            path: [{_key: b2._key}],
             offset: 0,
           },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
+        ...b1,
         children: [
           {
-            ...textBlock1.children[0],
+            ...b1.children[0],
             text: '',
           },
+          ...b1.children.slice(1),
         ],
       },
       blocks[1],
     ])
   })
 
+  test('slicing across block object', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b1._key}, 'children', {_key: b1.children[0]._key}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 3,
+          },
+        },
+      }),
+    ).toEqual([b1, b2, b3])
+  })
+
   test('starting and ending mid-span', () => {
     expect(
       sliceBlocks({
         blocks,
         selection: {
           anchor: {
-            path: [{_key: 'b1'}, 'children', {_key: 's1'}],
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
             offset: 2,
           },
-          focus: {path: [{_key: 'b3'}, 'children', {_key: 's3'}], offset: 1},
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 1,
+          },
         },
       }),
     ).toEqual([
       {
-        ...textBlock1,
+        ...b3,
         children: [
           {
-            ...textBlock1.children[0],
-            text: 'o',
+            ...b3.children[0],
+            text: 'z',
+          },
+        ],
+      },
+      {
+        ...b4,
+        children: [
+          {
+            ...b4.children[0],
+            text: 'f',
+          },
+        ],
+      },
+    ])
+  })
+
+  test('starting mid-span and ending end-span', () => {
+    expect(
+      sliceBlocks({
+        blocks,
+        selection: {
+          anchor: {
+            path: [{_key: b3._key}, 'children', {_key: b3.children[0]._key}],
+            offset: 2,
+          },
+          focus: {
+            path: [{_key: b4._key}, 'children', {_key: b4.children[0]._key}],
+            offset: 4,
+          },
+        },
+      }),
+    ).toEqual([
+      {
+        ...b3,
+        children: [
+          {
+            ...b3.children[0],
+            text: 'z',
           },
         ],
       },
-      blocks[1],
       {
-        ...textBlock2,
+        ...b4,
         children: [
           {
-            ...textBlock2.children[0],
-            text: 'az',
+            ...b4.children[0],
           },
         ],
       },

package/src/utils/util.slice-blocks.ts

@@ -66,13 +66,16 @@ export function sliceBlocks({
                   },
                 ],
               }
-              break
+              continue
             }
 
             startBlock = {
               ...block,
               children: [child],
             }
+          }
+
+          if (startChildKey === endChildKey) {
             break
           }
 
@@ -97,6 +100,10 @@ export function sliceBlocks({
       }
 
       startBlock = block
+
+      if (startBlockKey === endBlockKey) {
+        break
+      }
     }
 
     if (block._key === endBlockKey) {
@@ -111,8 +118,9 @@ export function sliceBlocks({
             if (child._key === endChildKey && isPortableTextSpan(child)) {
               endBlock.children.push({
                 ...child,
-                text: child.text.slice(endPoint.offset),
+                text: child.text.slice(0, endPoint.offset),
               })
+
               break
             }
 
@@ -124,7 +132,7 @@ export function sliceBlocks({
           }
         }
 
-        continue
+        break
       }
 
       endBlock = block
@@ -132,7 +140,9 @@ export function sliceBlocks({
       break
     }
 
-    middleBlocks.push(block)
+    if (startBlock) {
+      middleBlocks.push(block)
+    }
   }
 
   return [