@portabletext/editor 1.44.9 → 1.44.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.44.9",
+  "version": "1.44.11",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/editor/Editable.tsx

@@ -175,10 +175,11 @@ export const PortableTextEditable = forwardRef<
 
   const rangeDecorationsActor = useActorRef(rangeDecorationsMachine, {
     input: {
+      rangeDecorations: rangeDecorations ?? [],
       readOnly,
-      slateEditor,
       schema: schemaTypes,
-      rangeDecorations: rangeDecorations ?? [],
+      slateEditor,
+      skipSetup: !editorActor.getSnapshot().matches({setup: 'setting up'}),
     },
   })
   useSelector(rangeDecorationsActor, (s) => s.context.updateCount)

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

@@ -3,6 +3,7 @@ import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import type {EditorSelection} from '../..'
+import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -21,6 +22,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     const {container} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         renderPlaceholder={renderPlaceholder}
         ref={editorRef}
@@ -87,6 +89,7 @@ describe('initialization', () => {
     const editorRef = createRef<PortableTextEditor>()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         ref={editorRef}
         onChange={onChange}
         schemaType={schemaType}
@@ -118,6 +121,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
@@ -162,6 +166,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     const {rerender} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
@@ -195,6 +200,7 @@ describe('initialization', () => {
     })
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={newSelection}
@@ -221,6 +227,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}
@@ -266,6 +273,7 @@ describe('initialization', () => {
     await waitFor(() => {
       render(
         <PortableTextEditorTester
+          keyGenerator={createTestKeyGenerator()}
           onChange={onChange}
           ref={editorRef}
           selection={initialSelection}
@@ -298,6 +306,7 @@ describe('initialization', () => {
     const newOnChange = vi.fn()
     _rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={newOnChange}
         ref={editorRef}
         selection={initialSelection}
@@ -350,6 +359,7 @@ describe('initialization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         selection={initialSelection}

package/src/editor/__tests__/PortableTextEditorTester.tsx

@@ -1,12 +1,6 @@
 import {Schema} from '@sanity/schema'
 import {defineArrayMember, defineField} from '@sanity/types'
-import {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useMemo,
-  type ForwardedRef,
-} from 'react'
+import {forwardRef, useMemo, type ForwardedRef} from 'react'
 import {vi} from 'vitest'
 import {
   PortableTextEditable,
@@ -77,8 +71,6 @@ const schema = Schema.compile({
   types: [portableTextType, colorAndLink],
 })
 
-let key = 0
-
 export const PortableTextEditorTester = forwardRef(
   function PortableTextEditorTester(
     props: Partial<
@@ -90,23 +82,17 @@ export const PortableTextEditorTester = forwardRef(
       schemaType: PortableTextEditorProps['schemaType']
       selection?: PortableTextEditableProps['selection']
       value?: PortableTextEditorProps['value']
+      keyGenerator: PortableTextEditorProps['keyGenerator']
     },
     ref: ForwardedRef<PortableTextEditor>,
   ) {
-    useEffect(() => {
-      key = 0
-    }, [])
-    const _keyGenerator = useCallback(() => {
-      key++
-      return `${key}`
-    }, [])
     const onChange = useMemo(() => props.onChange || vi.fn(), [props.onChange])
     return (
       <PortableTextEditor
         schemaType={props.schemaType}
         onChange={onChange}
         value={props.value || undefined}
-        keyGenerator={_keyGenerator}
+        keyGenerator={props.keyGenerator}
         ref={ref}
       >
         <PortableTextEditable

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

@@ -3,6 +3,7 @@ import {render, waitFor} from '@testing-library/react'
 import {createRef, type ReactNode, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
 import type {RangeDecoration} from '../..'
+import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import type {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -38,6 +39,7 @@ describe('RangeDecorations', () => {
     const {rerender} = await waitFor(() =>
       render(
         <PortableTextEditorTester
+          keyGenerator={createTestKeyGenerator()}
           onChange={onChange}
           rangeDecorations={rangeDecorations}
           ref={editorRef}
@@ -64,6 +66,7 @@ describe('RangeDecorations', () => {
     // Re-render with the same range decorations
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
@@ -86,6 +89,7 @@ describe('RangeDecorations', () => {
     ]
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
@@ -111,6 +115,7 @@ describe('RangeDecorations', () => {
     ]
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}
@@ -137,6 +142,7 @@ describe('RangeDecorations', () => {
     ]
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         rangeDecorations={rangeDecorations}
         ref={editorRef}

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

@@ -2,6 +2,7 @@ import type {PortableTextBlock} from '@sanity/types'
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
+import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -27,6 +28,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -48,7 +50,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '2',
+                _key: 'k3',
                 _type: 'span',
                 text: 'Hello with a new key',
                 marks: [],
@@ -83,6 +85,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -140,6 +143,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -162,7 +166,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '2',
+                _key: 'k3',
                 _type: 'span',
                 text: '',
                 marks: [],
@@ -176,7 +180,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
             _type: 'myTestBlockType',
             children: [
               {
-                _key: '4',
+                _key: 'k5',
                 _type: 'span',
                 text: '',
                 marks: [],
@@ -212,6 +216,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -276,6 +281,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -319,6 +325,7 @@ describe('when PTE would display warnings, instead it self solves', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -337,9 +344,9 @@ describe('when PTE would display warnings, instead it self solves', () => {
         PortableTextEditor.focus(editorRef.current)
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           {
-            _key: '3',
+            _key: 'k2',
             _type: 'myTestBlockType',
-            children: [{_key: '4', _type: 'span', marks: [], text: ''}],
+            children: [{_key: 'k3', _type: 'span', marks: [], text: ''}],
             markDefs: [],
             style: 'normal',
           },

package/src/editor/__tests__/sync-value.test.tsx

@@ -1,6 +1,7 @@
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
 import {describe, expect, it, vi} from 'vitest'
+import {createTestKeyGenerator} from '../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../PortableTextEditor'
 import {PortableTextEditorTester, schemaType} from './PortableTextEditorTester'
 
@@ -43,6 +44,7 @@ describe('useSyncValue', () => {
     ]
     const {rerender} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -62,6 +64,7 @@ describe('useSyncValue', () => {
 
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -99,6 +102,7 @@ describe('useSyncValue', () => {
     ]
     const {rerender} = render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -118,6 +122,7 @@ describe('useSyncValue', () => {
 
     rerender(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}

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

@@ -5,6 +5,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 const initialValue = [
@@ -53,6 +54,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
         ref={editorRef}
         schemaType={schemaType}
         value={initialValue}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -103,6 +105,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -137,11 +140,11 @@ describe('plugin:withEditableAPI: .delete()', () => {
           .toMatchInlineSnapshot(`
           [
             {
-              "_key": "1",
+              "_key": "k2",
               "_type": "myTestBlockType",
               "children": [
                 {
-                  "_key": "2",
+                  "_key": "k3",
                   "_type": "span",
                   "marks": [],
                   "text": "",
@@ -162,6 +165,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -222,7 +226,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
                       "_type": "myTestBlockType",
                       "children": [
                         {
-                          "_key": "1",
+                          "_key": "k2",
                           "_type": "span",
                           "marks": [],
                           "text": "",
@@ -247,6 +251,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
         ref={editorRef}
         schemaType={schemaType}
         value={initialValue}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 

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

@@ -6,6 +6,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 const initialValue = [
@@ -56,6 +57,7 @@ describe('plugin:withEditableAPI: .getFragment()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -97,6 +99,7 @@ describe('plugin:withEditableAPI: .getFragment()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}

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

@@ -5,6 +5,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 const initialValue = [
@@ -62,6 +63,7 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -111,12 +113,12 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: '2',
+                _key: 'k3',
                 _type: 'someObject',
                 color: 'red',
               },
               {
-                _key: '3',
+                _key: 'k4',
                 _type: 'span',
                 marks: [],
                 text: '',
@@ -155,12 +157,12 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
                 text: 'Block A',
               },
               {
-                _key: '2',
+                _key: 'k3',
                 _type: 'someObject',
                 color: 'red',
               },
               {
-                _key: '5',
+                _key: 'k6',
                 _type: 'span',
                 marks: [],
                 text: ' ',
@@ -172,8 +174,8 @@ describe('plugin:withEditableAPI: .insertChild()', () => {
         ])
 
         expect(PortableTextEditor.getSelection(editorRef.current)).toEqual({
-          anchor: {path: [{_key: 'a'}, 'children', {_key: '5'}], offset: 1},
-          focus: {path: [{_key: 'a'}, 'children', {_key: '5'}], offset: 1},
+          anchor: {path: [{_key: 'a'}, 'children', {_key: 'k6'}], offset: 1},
+          focus: {path: [{_key: 'a'}, 'children', {_key: 'k6'}], offset: 1},
           backward: false,
         })
       }
@@ -208,6 +210,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
         schemaType={schemaType}
         value={emptyTextBlock}
         onChange={onChange}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -240,7 +243,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: '1', _type: 'someObject', color: 'red'},
+          {_key: 'k2', _type: 'someObject', color: 'red'},
         ])
       }
     })
@@ -256,6 +259,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
         schemaType={schemaType}
         value={initialValue}
         onChange={onChange}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -292,7 +296,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           ...initialValue,
-          {_key: '1', _type: 'someObject', color: 'red'},
+          {_key: 'k2', _type: 'someObject', color: 'red'},
         ])
       }
     })
@@ -308,6 +312,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
         ref={editorRef}
         schemaType={schemaType}
         value={initialValue}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -345,7 +350,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-          {_key: '1', _type: 'someObject', color: 'red'},
+          {_key: 'k2', _type: 'someObject', color: 'red'},
           ...initialValue,
         ])
       }
@@ -366,6 +371,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
         schemaType={schemaType}
         value={value}
         onChange={onChange}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -402,7 +408,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           ...value,
-          {_key: '1', _type: 'someObject', color: 'yellow'},
+          {_key: 'k2', _type: 'someObject', color: 'yellow'},
         ])
       }
     })
@@ -422,6 +428,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
         schemaType={schemaType}
         value={value}
         onChange={onChange}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -455,7 +462,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           value[0],
-          {_key: '1', _type: 'someObject', color: 'yellow'},
+          {_key: 'k2', _type: 'someObject', color: 'yellow'},
           value[1],
         ])
       }
@@ -473,6 +480,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
         schemaType={schemaType}
         value={value}
         onChange={onChange}
+        keyGenerator={createTestKeyGenerator()}
       />,
     )
 
@@ -504,7 +512,7 @@ describe('plugin:withEditableAPI: .insertBlock()', () => {
       if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
           value[0],
-          {_key: '1', _type: 'someObject', color: 'yellow'},
+          {_key: 'k2', _type: 'someObject', color: 'yellow'},
         ])
       }
     })

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

@@ -6,6 +6,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 const INITIAL_VALUE: PortableTextBlock[] = [
@@ -31,6 +32,7 @@ describe('plugin:withEditableAPI: .isSelectionsOverlapping', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -65,6 +67,7 @@ describe('plugin:withEditableAPI: .isSelectionsOverlapping', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -99,6 +102,7 @@ describe('plugin:withEditableAPI: .isSelectionsOverlapping', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -133,6 +137,7 @@ describe('plugin:withEditableAPI: .isSelectionsOverlapping', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}

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

@@ -5,6 +5,7 @@ import {
   PortableTextEditorTester,
   schemaType,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 describe('plugin:withPortableTextLists', () => {
@@ -46,6 +47,7 @@ describe('plugin:withPortableTextLists', () => {
     await waitFor(() => {
       render(
         <PortableTextEditorTester
+          keyGenerator={createTestKeyGenerator()}
           onChange={onChange}
           ref={editorRef}
           schemaType={schemaType}