@portabletext/editor 1.44.10 → 1.44.12

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}

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

@@ -4,136 +4,13 @@ import {describe, expect, it, vi} from 'vitest'
 import {
   PortableTextEditorTester,
   schemaType,
-  schemaTypeWithColorAndLink,
 } from '../../__tests__/PortableTextEditorTester'
+import {createTestKeyGenerator} from '../../../internal-utils/test-key-generator'
 import type {EditorSelection} from '../../../types/editor'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 describe('plugin:withPortableTextMarksModel', () => {
   describe('normalization', () => {
-    it('merges children correctly when toggling marks in various ranges', async () => {
-      const editorRef: RefObject<PortableTextEditor | null> = createRef()
-      const initialValue = [
-        {
-          _key: 'a',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'a1',
-              _type: 'span',
-              marks: [],
-              text: '1234',
-            },
-          ],
-          markDefs: [],
-          style: 'normal',
-        },
-      ]
-      const onChange = vi.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
-      })
-      const editor = editorRef.current!
-      expect(editor).toBeDefined()
-      await waitFor(() => {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, {
-          focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
-          anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 4},
-        })
-        PortableTextEditor.toggleMark(editor, 'strong')
-        expect(PortableTextEditor.getValue(editor)).toEqual([
-          {
-            _key: 'a',
-            _type: 'myTestBlockType',
-            children: [
-              {
-                _key: 'a1',
-                _type: 'span',
-                marks: ['strong'],
-                text: '1234',
-              },
-            ],
-            markDefs: [],
-            style: 'normal',
-          },
-        ])
-      })
-      await waitFor(() => {
-        if (editorRef.current) {
-          PortableTextEditor.select(editorRef.current, {
-            focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 1},
-            anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 3},
-          })
-          PortableTextEditor.toggleMark(editorRef.current, 'strong')
-          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(() => {
-        if (editor) {
-          PortableTextEditor.select(editor, {
-            focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
-            anchor: {path: [{_key: 'a'}, 'children', {_key: '1'}], offset: 1},
-          })
-          PortableTextEditor.toggleMark(editor, 'strong')
-          expect(PortableTextEditor.getValue(editor)).toMatchInlineSnapshot(`
-[
-  {
-    "_key": "a",
-    "_type": "myTestBlockType",
-    "children": [
-      {
-        "_key": "a1",
-        "_type": "span",
-        "marks": [
-          "strong",
-        ],
-        "text": "1234",
-      },
-    ],
-    "markDefs": [],
-    "style": "normal",
-  },
-]
-`)
-        }
-      })
-    })
-
     it('toggles marks on children with annotation marks correctly', async () => {
       const editorRef: RefObject<PortableTextEditor | null> = createRef()
       const initialValue = [
@@ -172,6 +49,7 @@ describe('plugin:withPortableTextMarksModel', () => {
           ref={editorRef}
           schemaType={schemaType}
           value={initialValue}
+          keyGenerator={createTestKeyGenerator()}
         />,
       )
 
@@ -300,6 +178,7 @@ describe('plugin:withPortableTextMarksModel', () => {
       await waitFor(() => {
         render(
           <PortableTextEditorTester
+            keyGenerator={createTestKeyGenerator()}
             onChange={onChange}
             ref={editorRef}
             schemaType={schemaType}
@@ -416,6 +295,7 @@ describe('plugin:withPortableTextMarksModel', () => {
           ref={editorRef}
           schemaType={schemaType}
           value={initialValue}
+          keyGenerator={createTestKeyGenerator()}
         />,
       )
 
@@ -454,11 +334,11 @@ describe('plugin:withPortableTextMarksModel', () => {
               style: 'normal',
             },
             {
-              _key: '1',
+              _key: 'k2',
               _type: 'myTestBlockType',
               children: [
                 {
-                  _key: '2',
+                  _key: 'k3',
                   _type: 'span',
                   marks: [],
                   text: '',
@@ -519,6 +399,7 @@ describe('plugin:withPortableTextMarksModel', () => {
           ref={editorRef}
           schemaType={schemaType}
           value={initialValue}
+          keyGenerator={createTestKeyGenerator()}
         />,
       )
 
@@ -589,6 +470,7 @@ describe('plugin:withPortableTextMarksModel', () => {
             ref={editorRef}
             schemaType={schemaType}
             value={initialValue}
+            keyGenerator={createTestKeyGenerator()}
           />,
         )
       })
@@ -644,6 +526,7 @@ describe('plugin:withPortableTextMarksModel', () => {
             ref={editorRef}
             schemaType={schemaType}
             value={initialValue}
+            keyGenerator={createTestKeyGenerator()}
           />,
         )
       })
@@ -662,169 +545,6 @@ describe('plugin:withPortableTextMarksModel', () => {
     })
   })
 
-  describe('removing annotations', () => {
-    it('preserves other marks that apply to the spans', async () => {
-      const editorRef: RefObject<PortableTextEditor | null> = createRef()
-      const initialValue = [
-        {
-          _key: '5fc57af23597',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'be1c67c6971a',
-              _type: 'span',
-              marks: ['fde1fd54b544', '7b6d3d5de30c'],
-              text: 'This is a link',
-            },
-          ],
-          markDefs: [
-            {
-              _key: 'fde1fd54b544',
-              _type: 'link',
-              url: '1',
-            },
-            {
-              _key: '7b6d3d5de30c',
-              _type: 'color',
-              color: 'blue',
-            },
-          ],
-          style: 'normal',
-        },
-      ]
-      const onChange = vi.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaTypeWithColorAndLink}
-            value={initialValue}
-          />,
-        )
-      })
-
-      await waitFor(() => {
-        if (editorRef.current) {
-          PortableTextEditor.focus(editorRef.current)
-          // Selects `a link` from `This is a link`, so the mark should be kept in the first span, color mark in both.
-          PortableTextEditor.select(editorRef.current, {
-            focus: {
-              path: [
-                {_key: '5fc57af23597'},
-                'children',
-                {_key: 'be1c67c6971a'},
-              ],
-              offset: 14,
-            },
-            anchor: {
-              path: [
-                {_key: '5fc57af23597'},
-                'children',
-                {_key: 'be1c67c6971a'},
-              ],
-              offset: 8,
-            },
-          })
-
-          const linkType = editorRef.current.schemaTypes.annotations.find(
-            (a) => a.name === 'link',
-          )
-          if (!linkType) {
-            throw new Error('No link type found')
-          }
-          PortableTextEditor.removeAnnotation(editorRef.current, linkType)
-          expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-            {
-              _key: '5fc57af23597',
-              _type: 'myTestBlockType',
-              children: [
-                {
-                  _key: 'be1c67c6971a',
-                  _type: 'span',
-                  marks: ['fde1fd54b544', '7b6d3d5de30c'], // It has both marks, the link was only removed from the second span
-                  text: 'This is ',
-                },
-                {
-                  _key: '1',
-                  _type: 'span',
-                  marks: ['7b6d3d5de30c'],
-                  text: 'a link',
-                },
-              ],
-              markDefs: [
-                {
-                  _key: 'fde1fd54b544',
-                  _type: 'link',
-                  url: '1',
-                },
-                {
-                  _key: '7b6d3d5de30c',
-                  _type: 'color',
-                  color: 'blue',
-                },
-              ],
-              style: 'normal',
-            },
-          ])
-
-          // removes the color from both
-          PortableTextEditor.select(editorRef.current, {
-            focus: {
-              path: [{_key: '5fc57af23597'}, 'children', {_key: '1'}],
-              offset: 6,
-            },
-            anchor: {
-              path: [
-                {_key: '5fc57af23597'},
-                'children',
-                {_key: 'be1c67c6971a'},
-              ],
-              offset: 0,
-            },
-          })
-          const colorType = editorRef.current.schemaTypes.annotations.find(
-            (a) => a.name === 'color',
-          )
-          if (!colorType) {
-            throw new Error('No color type found')
-          }
-
-          PortableTextEditor.removeAnnotation(editorRef.current, colorType)
-
-          expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
-            {
-              _key: '5fc57af23597',
-              _type: 'myTestBlockType',
-              children: [
-                {
-                  _key: 'be1c67c6971a',
-                  _type: 'span',
-                  marks: ['fde1fd54b544'], // The color was removed from both
-                  text: 'This is ',
-                },
-                {
-                  _key: '1',
-                  _type: 'span',
-                  marks: [], // The color was removed from both
-                  text: 'a link',
-                },
-              ],
-              markDefs: [
-                {
-                  _key: 'fde1fd54b544',
-                  _type: 'link',
-                  url: '1',
-                },
-              ],
-              style: 'normal',
-            },
-          ])
-        }
-      })
-    })
-  })
-
   describe('removing nodes', () => {
     it('should not insert a new block if we have more blocks available', async () => {
       const editorRef: RefObject<PortableTextEditor | null> = createRef()
@@ -852,6 +572,7 @@ describe('plugin:withPortableTextMarksModel', () => {
       await waitFor(() => {
         render(
           <PortableTextEditorTester
+            keyGenerator={createTestKeyGenerator()}
             onChange={onChange}
             ref={editorRef}
             schemaType={schemaType}

package/src/editor/plugins/__tests__/withPortableTextSelections.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 = [
@@ -44,6 +45,7 @@ describe('plugin:withPortableTextSelections', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}

package/src/editor/plugins/__tests__/withUndoRedo.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 = [
@@ -49,6 +50,7 @@ describe('plugin:withUndoRedo', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}
@@ -107,6 +109,7 @@ describe('plugin:withUndoRedo', () => {
 
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}

package/src/editor/sync-machine.ts

@@ -735,12 +735,14 @@ function _updateBlock(
               Text.isText(oldBlockChild) &&
               oldBlockChild._type === 'span'
             if (isSpanNode && isTextChanged) {
-              Transforms.delete(slateEditor, {
-                at: {
-                  focus: {path, offset: 0},
-                  anchor: {path, offset: oldBlockChild.text.length},
-                },
-              })
+              if (oldBlockChild.text.length > 0) {
+                Transforms.delete(slateEditor, {
+                  at: {
+                    focus: {path, offset: 0},
+                    anchor: {path, offset: oldBlockChild.text.length},
+                  },
+                })
+              }
               Transforms.insertText(slateEditor, currentBlockChild.text, {
                 at: path,
               })

package/src/internal-utils/__tests__/valueNormalization.test.tsx

@@ -6,6 +6,7 @@ import {
   schemaType,
 } from '../../editor/__tests__/PortableTextEditorTester'
 import {PortableTextEditor} from '../../editor/PortableTextEditor'
+import {createTestKeyGenerator} from '../test-key-generator'
 
 describe('values: normalization', () => {
   it("accepts incoming value with blocks without a style or markDefs prop, but doesn't leave them without them when editing them", async () => {
@@ -28,6 +29,7 @@ describe('values: normalization', () => {
     const onChange = vi.fn()
     render(
       <PortableTextEditorTester
+        keyGenerator={createTestKeyGenerator()}
         onChange={onChange}
         ref={editorRef}
         schemaType={schemaType}