@portabletext/editor 1.26.0 → 1.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.26.0",
+  "version": "1.26.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -67,21 +67,21 @@
     "get-random-values-esm": "^1.0.2",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-decd7b8-20250118",
+    "react-compiler-runtime": "19.0.0-beta-27714ef-20250124",
     "slate": "0.112.0",
     "slate-dom": "^0.111.0",
     "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.2",
+    "@portabletext/block-tools": "1.1.3",
     "@portabletext/patches": "1.1.2"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.16",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.0.2",
-    "@sanity/schema": "^3.71.1",
-    "@sanity/types": "^3.71.1",
+    "@sanity/schema": "^3.71.2",
+    "@sanity/types": "^3.71.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -92,25 +92,25 @@
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.2",
-    "@vitest/coverage-istanbul": "^3.0.2",
-    "babel-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
+    "@vitest/browser": "^3.0.4",
+    "@vitest/coverage-istanbul": "^3.0.4",
+    "babel-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-decd7b8-20250118",
+    "eslint-plugin-react-compiler": "19.0.0-beta-27714ef-20250124",
     "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^26.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rxjs": "^7.8.1",
     "typescript": "5.7.3",
-    "vite": "^6.0.4",
-    "vitest": "^3.0.2",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.4",
     "vitest-browser-react": "^0.0.4",
-    "racejar": "1.1.1"
+    "racejar": "1.1.2"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.71.1",
-    "@sanity/types": "^3.71.1",
+    "@sanity/schema": "^3.71.2",
+    "@sanity/types": "^3.71.2",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.1"
   },

package/src/behavior-actions/behavior.action.insert.block.ts

@@ -6,7 +6,11 @@ import type {BehaviorActionImplementation} from './behavior.actions'
 export const insertBlockActionImplementation: BehaviorActionImplementation<
   'insert.block'
 > = ({context, action}) => {
-  const parsedBlock = parseBlock({block: action.block, context})
+  const parsedBlock = parseBlock({
+    block: action.block,
+    context,
+    options: {refreshKeys: false},
+  })
 
   if (!parsedBlock) {
     throw new Error(`Failed to parse block ${JSON.stringify(action.block)}`)

package/src/converters/converter.portable-text.ts

@@ -38,7 +38,11 @@ export const converterPortableText = defineConverter({
     }
 
     const parsedBlocks = blocks.flatMap((block) => {
-      const parsedBlock = parseBlock({context, block})
+      const parsedBlock = parseBlock({
+        context,
+        block,
+        options: {refreshKeys: true},
+      })
       return parsedBlock ? [parsedBlock] : []
     })
 

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

@@ -28,7 +28,7 @@ async function getEditableElement(
 describe('adds empty text block if its needed', () => {
   const newBlock = {
     _type: 'myTestBlockType',
-    _key: '3',
+    _key: '1',
     style: 'normal',
     markDefs: [],
     children: [
@@ -96,7 +96,7 @@ describe('adds empty text block if its needed', () => {
       },
       {
         _type: 'myTestBlockType',
-        _key: '3',
+        _key: '1',
         style: 'normal',
         markDefs: [],
         children: [

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

@@ -337,7 +337,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
         PortableTextEditor.focus(editorRef.current)
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           {
-            _key: '5',
+            _key: '3',
             _type: 'myTestBlockType',
             children: [{_key: '4', _type: 'span', marks: [], text: ''}],
             markDefs: [],

package/src/editor/plugins/__tests__/withEditableAPIInsert.test.tsx

@@ -111,12 +111,12 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: '3',
+                _key: '2',
                 _type: 'someObject',
                 color: 'red',
               },
               {
-                _key: '4',
+                _key: '3',
                 _type: 'span',
                 marks: [],
                 text: '',
@@ -155,12 +155,12 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: '3',
+                _key: '2',
                 _type: 'someObject',
                 color: 'red',
               },
               {
-                _key: '7',
+                _key: '5',
                 _type: 'span',
                 marks: [],
                 text: ' ',
@@ -172,8 +172,8 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
         ])
 
         expect(PortableTextEditor.getSelection(editorRef.current)).toEqual({
-          anchor: {path: [{_key: 'a'}, 'children', {_key: '7'}], offset: 1},
-          focus: {path: [{_key: 'a'}, 'children', {_key: '7'}], offset: 1},
+          anchor: {path: [{_key: 'a'}, 'children', {_key: '5'}], offset: 1},
+          focus: {path: [{_key: 'a'}, 'children', {_key: '5'}], offset: 1},
           backward: false,
         })
       }
@@ -240,7 +240,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: '2', _type: 'someObject', color: 'red'},
+          {_key: '1', _type: 'someObject', color: 'red'},
         ])
       }
     })
@@ -292,7 +292,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           ...initialValue,
-          {_key: '2', _type: 'someObject', color: 'red'},
+          {_key: '1', _type: 'someObject', color: 'red'},
         ])
       }
     })
@@ -345,7 +345,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: '2', _type: 'someObject', color: 'red'},
+          {_key: '1', _type: 'someObject', color: 'red'},
           ...initialValue,
         ])
       }
@@ -402,7 +402,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           ...value,
-          {_key: '2', _type: 'someObject', color: 'yellow'},
+          {_key: '1', _type: 'someObject', color: 'yellow'},
         ])
       }
     })
@@ -455,7 +455,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           value[0],
-          {_key: '2', _type: 'someObject', color: 'yellow'},
+          {_key: '1', _type: 'someObject', color: 'yellow'},
           value[1],
         ])
       }
@@ -504,7 +504,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           value[0],
-          {_key: '2', _type: 'someObject', color: 'yellow'},
+          {_key: '1', _type: 'someObject', color: 'yellow'},
         ])
       }
     })

package/src/editor/plugins/__tests__/withPortableTextMarkModel.test.tsx

@@ -73,41 +73,34 @@ describe('plugin:withPortableTextMarksModel', () => {
             anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 3},
           })
           PortableTextEditor.toggleMark(editorRef.current, 'strong')
-          expect(PortableTextEditor.getValue(editorRef.current))
-            .toMatchInlineSnapshot(`
-        [
-          {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": [
-              {
-                "_key": "a1",
-                "_type": "span",
-                "marks": [
-                  "strong",
-                ],
-                "text": "1",
-              },
-              {
-                "_key": "2",
-                "_type": "span",
-                "marks": [],
-                "text": "23",
-              },
-              {
-                "_key": "1",
-                "_type": "span",
-                "marks": [
-                  "strong",
-                ],
-                "text": "4",
-              },
-            ],
-            "markDefs": [],
-            "style": "normal",
-          },
-        ]
-      `)
+          expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+            {
+              _key: 'a',
+              _type: 'myTestBlockType',
+              children: [
+                {
+                  _key: 'a1',
+                  _type: 'span',
+                  marks: ['strong'],
+                  text: '1',
+                },
+                {
+                  _key: '2',
+                  _type: 'span',
+                  marks: [],
+                  text: '23',
+                },
+                {
+                  _key: '1',
+                  _type: 'span',
+                  marks: ['strong'],
+                  text: '4',
+                },
+              ],
+              markDefs: [],
+              style: 'normal',
+            },
+          ])
         }
       })
       await waitFor(() => {
@@ -461,11 +454,11 @@ describe('plugin:withPortableTextMarksModel', () => {
               style: 'normal',
             },
             {
-              _key: '5',
+              _key: '1',
               _type: 'myTestBlockType',
               children: [
                 {
-                  _key: '3',
+                  _key: '2',
                   _type: 'span',
                   marks: [],
                   text: '',

package/src/editor/plugins/createWithObjectKeys.ts

@@ -43,11 +43,19 @@ export function createWithObjectKeys(
       }
 
       if (operation.type === 'split_node') {
+        const existingKeys = [...Node.descendants(editor)].map(
+          ([node]) => node._key,
+        )
+
         apply({
           ...operation,
           properties: {
             ...operation.properties,
-            _key: editorActor.getSnapshot().context.keyGenerator(),
+            _key:
+              operation.properties._key === undefined ||
+              existingKeys.includes(operation.properties._key)
+                ? editorActor.getSnapshot().context.keyGenerator()
+                : operation.properties._key,
           },
         })
 
@@ -56,11 +64,19 @@ export function createWithObjectKeys(
 
       if (operation.type === 'insert_node') {
         if (!Editor.isEditor(operation.node)) {
+          const existingKeys = [...Node.descendants(editor)].map(
+            ([node]) => node._key,
+          )
+
           apply({
             ...operation,
             node: {
               ...operation.node,
-              _key: editorActor.getSnapshot().context.keyGenerator(),
+              _key:
+                operation.node._key === undefined ||
+                existingKeys.includes(operation.node._key)
+                  ? editorActor.getSnapshot().context.keyGenerator()
+                  : operation.node._key,
             },
           })
 

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -361,6 +361,7 @@ export function createWithPortableTextMarkModel(
           ) {
             Transforms.insertNodes(editor, {
               ...op.node,
+              _key: editorActor.getSnapshot().context.keyGenerator(),
               marks:
                 op.node.marks?.filter(
                   (mark) => !annotationsEnding.includes(mark),
@@ -382,6 +383,7 @@ export function createWithPortableTextMarkModel(
           ) {
             Transforms.insertNodes(editor, {
               ...op.node,
+              _key: editorActor.getSnapshot().context.keyGenerator(),
               marks:
                 op.node.marks?.filter(
                   (mark) => !annotationsStarting.includes(mark),
@@ -403,6 +405,7 @@ export function createWithPortableTextMarkModel(
           ) {
             Transforms.insertNodes(editor, {
               ...op.node,
+              _key: editorActor.getSnapshot().context.keyGenerator(),
               marks: nextSpanDecorators,
             })
             return

package/src/internal-utils/parse-blocks.ts

@@ -9,9 +9,13 @@ import {isTypedObject} from './asserters'
 export function parseBlock({
   context,
   block,
+  options,
 }: {
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   block: unknown
+  options: {
+    refreshKeys: boolean
+  }
 }): PortableTextBlock | undefined {
   if (!isTypedObject(block)) {
     return undefined
@@ -26,10 +30,36 @@ export function parseBlock({
     return undefined
   }
 
-  if (!isPortableTextTextBlock(block)) {
+  if (block._type !== context.schema.block.name) {
+    const _key = options.refreshKeys
+      ? context.keyGenerator()
+      : typeof block._key === 'string'
+        ? block._key
+        : context.keyGenerator()
     return {
       ...block,
-      _key: context.keyGenerator(),
+      _key,
+    }
+  }
+
+  if (!isPortableTextTextBlock(block)) {
+    return {
+      _type: context.schema.block.name,
+      _key: options.refreshKeys
+        ? context.keyGenerator()
+        : typeof block._key === 'string'
+          ? block._key
+          : context.keyGenerator(),
+      children: [
+        {
+          _key: context.keyGenerator(),
+          _type: context.schema.span.name,
+          text: '',
+          marks: [],
+        },
+      ],
+      markDefs: [],
+      style: context.schema.styles[0].value,
     }
   }
 
@@ -40,7 +70,7 @@ export function parseBlock({
         (annotation) => annotation.name === markDef._type,
       )
     ) {
-      const _key = context.keyGenerator()
+      const _key = options.refreshKeys ? context.keyGenerator() : markDef._key
       markDefKeyMap.set(markDef._key, _key)
 
       return [
@@ -72,7 +102,7 @@ export function parseBlock({
       return [
         {
           ...child,
-          _key: context.keyGenerator(),
+          _key: options.refreshKeys ? context.keyGenerator() : child._key,
         },
       ]
     }
@@ -94,7 +124,7 @@ export function parseBlock({
     return [
       {
         ...child,
-        _key: context.keyGenerator(),
+        _key: options.refreshKeys ? context.keyGenerator() : child._key,
         marks,
       },
     ]
@@ -102,7 +132,7 @@ export function parseBlock({
 
   const parsedBlock = {
     ...block,
-    _key: context.keyGenerator(),
+    _key: options.refreshKeys ? context.keyGenerator() : block._key,
     children:
       children.length > 0
         ? children