@portabletext/editor 1.0.18 → 1.1.0

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

@@ -2,260 +2,16 @@ import {describe, expect, it, jest} from '@jest/globals'
 /* eslint-disable max-nested-callbacks */
 import {render, waitFor} from '@testing-library/react'
 import {createRef, type RefObject} from 'react'
-
-import {type EditorSelection} from '../../../types/editor'
 import {
   PortableTextEditorTester,
   schemaType,
   schemaTypeWithColorAndLink,
 } from '../../__tests__/PortableTextEditorTester'
+import {type EditorSelection} from '../../../types/editor'
 import {PortableTextEditor} from '../../PortableTextEditor'
 
 describe('plugin:withPortableTextMarksModel', () => {
   describe('normalization', () => {
-    it('merges adjacent spans correctly when removing annotations', async () => {
-      const editorRef: RefObject<PortableTextEditor> = createRef()
-      const initialValue = [
-        {
-          _key: '5fc57af23597',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'be1c67c6971a',
-              _type: 'span',
-              marks: [],
-              text: 'This is a ',
-            },
-            {
-              _key: '11c8c9f783a8',
-              _type: 'span',
-              marks: ['fde1fd54b544'],
-              text: 'link',
-            },
-            {
-              _key: '576c748e0cd2',
-              _type: 'span',
-              marks: [],
-              text: ', this is ',
-            },
-            {
-              _key: 'f3d73d3833bf',
-              _type: 'span',
-              marks: ['7b6d3d5de30c'],
-              text: 'another',
-            },
-            {
-              _key: '73b01f13c2ec',
-              _type: 'span',
-              marks: [],
-              text: ', and this is ',
-            },
-            {
-              _key: '13eb0d467c82',
-              _type: 'span',
-              marks: ['93a1d24eade0'],
-              text: 'a third',
-            },
-          ],
-          markDefs: [
-            {
-              _key: 'fde1fd54b544',
-              _type: 'link',
-              url: '1',
-            },
-            {
-              _key: '7b6d3d5de30c',
-              _type: 'link',
-              url: '2',
-            },
-            {
-              _key: '93a1d24eade0',
-              _type: 'link',
-              url: '3',
-            },
-          ],
-          style: 'normal',
-        },
-      ]
-
-      const onChange = jest.fn()
-
-      render(
-        <PortableTextEditorTester
-          onChange={onChange}
-          ref={editorRef}
-          schemaType={schemaType}
-          value={initialValue}
-        />,
-      )
-
-      await waitFor(() => {
-        if (editorRef.current) {
-          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
-          expect(onChange).toHaveBeenCalledWith({type: 'ready'})
-        }
-      })
-
-      await waitFor(() => {
-        if (editorRef.current) {
-          PortableTextEditor.focus(editorRef.current)
-          PortableTextEditor.select(editorRef.current, {
-            focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: '11c8c9f783a8'}], offset: 4},
-            anchor: {path: [{_key: '5fc57af23597'}, 'children', {_key: '11c8c9f783a8'}], offset: 0},
-          })
-          // eslint-disable-next-line max-nested-callbacks
-          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: [],
-                  text: 'This is a link, this is ',
-                },
-                {
-                  _key: 'f3d73d3833bf',
-                  _type: 'span',
-                  marks: ['7b6d3d5de30c'],
-                  text: 'another',
-                },
-                {
-                  _key: '73b01f13c2ec',
-                  _type: 'span',
-                  marks: [],
-                  text: ', and this is ',
-                },
-                {
-                  _key: '13eb0d467c82',
-                  _type: 'span',
-                  marks: ['93a1d24eade0'],
-                  text: 'a third',
-                },
-              ],
-              markDefs: [
-                {
-                  _key: '7b6d3d5de30c',
-                  _type: 'link',
-                  url: '2',
-                },
-                {
-                  _key: '93a1d24eade0',
-                  _type: 'link',
-                  url: '3',
-                },
-              ],
-              style: 'normal',
-            },
-          ])
-        }
-      })
-    })
-
-    it('splits correctly when adding marks', async () => {
-      const editorRef: RefObject<PortableTextEditor> = createRef()
-      const initialValue = [
-        {
-          _key: 'a',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'a1',
-              _type: 'span',
-              marks: [],
-              text: '123',
-            },
-          ],
-          markDefs: [],
-          style: 'normal',
-        },
-        {
-          _key: 'b',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'b1',
-              _type: 'span',
-              marks: [],
-              text: '123',
-            },
-          ],
-          markDefs: [],
-          style: 'normal',
-        },
-      ]
-      const onChange = jest.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
-      })
-      await waitFor(() => {
-        if (editorRef.current) {
-          const editor = editorRef.current
-          PortableTextEditor.focus(editor)
-          PortableTextEditor.select(editor, {
-            focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
-            anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 1},
-          })
-          PortableTextEditor.toggleMark(editor, 'strong')
-          const value = PortableTextEditor.getValue(editor)
-          expect(value).toMatchInlineSnapshot(`
-        Array [
-          Object {
-            "_key": "a",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "a1",
-                "_type": "span",
-                "marks": Array [
-                  "strong",
-                ],
-                "text": "123",
-              },
-            ],
-            "markDefs": Array [],
-            "style": "normal",
-          },
-          Object {
-            "_key": "b",
-            "_type": "myTestBlockType",
-            "children": Array [
-              Object {
-                "_key": "b1",
-                "_type": "span",
-                "marks": Array [
-                  "strong",
-                ],
-                "text": "1",
-              },
-              Object {
-                "_key": "1",
-                "_type": "span",
-                "marks": Array [],
-                "text": "23",
-              },
-            ],
-            "markDefs": Array [],
-            "style": "normal",
-          },
-        ]
-      `)
-        }
-      })
-    })
     it('merges children correctly when toggling marks in various ranges', async () => {
       const editorRef: RefObject<PortableTextEditor> = createRef()
       const initialValue = [
@@ -322,7 +78,8 @@ describe('plugin:withPortableTextMarksModel', () => {
             anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 3},
           })
           PortableTextEditor.toggleMark(editorRef.current, 'strong')
-          expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
+          expect(PortableTextEditor.getValue(editorRef.current))
+            .toMatchInlineSnapshot(`
         Array [
           Object {
             "_key": "a",
@@ -432,7 +189,10 @@ Array [
 
       await waitFor(() => {
         if (editorRef.current) {
-          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({
+            type: 'value',
+            value: initialValue,
+          })
           expect(onChange).toHaveBeenCalledWith({type: 'ready'})
         }
       })
@@ -539,8 +299,14 @@ Array [
         },
       ]
       const sel: EditorSelection = {
-        focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: '11c8c9f783a8'}], offset: 4},
-        anchor: {path: [{_key: '7cd53af36712'}, 'children', {_key: '576c748e0cd2'}], offset: 0},
+        focus: {
+          path: [{_key: '5fc57af23597'}, 'children', {_key: '11c8c9f783a8'}],
+          offset: 4,
+        },
+        anchor: {
+          path: [{_key: '7cd53af36712'}, 'children', {_key: '576c748e0cd2'}],
+          offset: 0,
+        },
       }
       const onChange = jest.fn()
       await waitFor(() => {
@@ -667,7 +433,10 @@ Array [
 
       await waitFor(() => {
         if (editorRef.current) {
-          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({
+            type: 'value',
+            value: initialValue,
+          })
           expect(onChange).toHaveBeenCalledWith({type: 'ready'})
         }
       })
@@ -767,7 +536,10 @@ Array [
 
       await waitFor(() => {
         if (editorRef.current) {
-          expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+          expect(onChange).toHaveBeenCalledWith({
+            type: 'value',
+            value: initialValue,
+          })
           expect(onChange).toHaveBeenCalledWith({type: 'ready'})
         }
       })
@@ -780,12 +552,19 @@ Array [
 
       await waitFor(() => {
         if (editorRef.current) {
-          const currentSelectionObject = PortableTextEditor.getSelection(editorRef.current)
+          const currentSelectionObject = PortableTextEditor.getSelection(
+            editorRef.current,
+          )
           PortableTextEditor.toggleMark(editorRef.current, 'strong')
-          const nextSelectionObject = PortableTextEditor.getSelection(editorRef.current)
+          const nextSelectionObject = PortableTextEditor.getSelection(
+            editorRef.current,
+          )
           expect(currentSelectionObject).toEqual(nextSelectionObject)
           expect(currentSelectionObject === nextSelectionObject).toBe(false)
-          expect(onChange).toHaveBeenCalledWith({type: 'selection', selection: nextSelectionObject})
+          expect(onChange).toHaveBeenCalledWith({
+            type: 'selection',
+            selection: nextSelectionObject,
+          })
         }
       })
     })
@@ -888,248 +667,14 @@ Array [
           focus: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
           anchor: {path: [{_key: 'a'}, 'children', {_key: '2'}], offset: 2},
         })
-        expect(PortableTextEditor.isAnnotationActive(editor, 'link')).toBe(false)
+        expect(PortableTextEditor.isAnnotationActive(editor, 'link')).toBe(
+          false,
+        )
       })
     })
   })
 
   describe('removing annotations', () => {
-    it('removes the markDefs if the annotation is no longer in use', async () => {
-      const editorRef: RefObject<PortableTextEditor> = createRef()
-      const initialValue = [
-        {
-          _key: '5fc57af23597',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'be1c67c6971a',
-              _type: 'span',
-              marks: ['fde1fd54b544'],
-              text: 'This is a link',
-            },
-          ],
-          markDefs: [
-            {
-              _key: 'fde1fd54b544',
-              _type: 'link',
-              url: '1',
-            },
-          ],
-          style: 'normal',
-        },
-      ]
-      const onChange = jest.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
-      })
-
-      await waitFor(() => {
-        if (editorRef.current) {
-          PortableTextEditor.focus(editorRef.current)
-          PortableTextEditor.select(editorRef.current, {
-            focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}], offset: 14},
-            anchor: {path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}], offset: 0},
-          })
-          // // eslint-disable-next-line max-nested-callbacks
-          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: [],
-                  text: 'This is a link',
-                },
-              ],
-              markDefs: [],
-              style: 'normal',
-            },
-          ])
-        }
-      })
-    })
-    it('preserves the markDefs if the annotation will continue in use', async () => {
-      const editorRef: RefObject<PortableTextEditor> = createRef()
-      const initialValue = [
-        {
-          _key: '5fc57af23597',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'be1c67c6971a',
-              _type: 'span',
-              marks: ['fde1fd54b544'],
-              text: 'This is a link',
-            },
-          ],
-          markDefs: [
-            {
-              _key: 'fde1fd54b544',
-              _type: 'link',
-              url: '1',
-            },
-          ],
-          style: 'normal',
-        },
-      ]
-      const onChange = jest.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
-      })
-
-      await waitFor(() => {
-        if (editorRef.current) {
-          PortableTextEditor.focus(editorRef.current)
-          PortableTextEditor.select(editorRef.current, {
-            focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}], offset: 10},
-            anchor: {
-              path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}],
-              offset: 0,
-            },
-          })
-          // // eslint-disable-next-line max-nested-callbacks
-          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: [],
-                  text: 'This is a ',
-                },
-                {
-                  _key: '1',
-                  marks: ['fde1fd54b544'],
-                  _type: 'span',
-                  text: 'link',
-                },
-              ],
-              markDefs: [
-                {
-                  _key: 'fde1fd54b544',
-                  _type: 'link',
-                  url: '1',
-                },
-              ],
-              style: 'normal',
-            },
-          ])
-        }
-      })
-    })
-    it('removes the mark from the correct place', async () => {
-      const editorRef: RefObject<PortableTextEditor> = createRef()
-      const initialValue = [
-        {
-          _key: '5fc57af23597',
-          _type: 'myTestBlockType',
-          children: [
-            {
-              _key: 'be1c67c6971a',
-              _type: 'span',
-              marks: ['fde1fd54b544'],
-              text: 'This is a link',
-            },
-          ],
-          markDefs: [
-            {
-              _key: 'fde1fd54b544',
-              _type: 'link',
-              url: '1',
-            },
-          ],
-          style: 'normal',
-        },
-      ]
-      const onChange = jest.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            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.
-          PortableTextEditor.select(editorRef.current, {
-            focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}], offset: 14},
-            anchor: {
-              path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}],
-              offset: 8,
-            },
-          })
-
-          // // eslint-disable-next-line max-nested-callbacks
-          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'],
-                  text: 'This is ',
-                },
-                {
-                  _key: '1',
-                  _type: 'span',
-                  marks: [],
-                  text: 'a link',
-                },
-              ],
-              markDefs: [
-                {
-                  _key: 'fde1fd54b544',
-                  _type: 'link',
-                  url: '1',
-                },
-              ],
-              style: 'normal',
-            },
-          ])
-        }
-      })
-    })
     it('preserves other marks that apply to the spans', async () => {
       const editorRef: RefObject<PortableTextEditor> = createRef()
       const initialValue = [
@@ -1176,15 +721,28 @@ Array [
           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},
+            focus: {
+              path: [
+                {_key: '5fc57af23597'},
+                'children',
+                {_key: 'be1c67c6971a'},
+              ],
+              offset: 14,
+            },
             anchor: {
-              path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}],
+              path: [
+                {_key: '5fc57af23597'},
+                'children',
+                {_key: 'be1c67c6971a'},
+              ],
               offset: 8,
             },
           })
 
           // // eslint-disable-next-line max-nested-callbacks
-          const linkType = editorRef.current.schemaTypes.annotations.find((a) => a.name === 'link')
+          const linkType = editorRef.current.schemaTypes.annotations.find(
+            (a) => a.name === 'link',
+          )
           if (!linkType) {
             throw new Error('No link type found')
           }
@@ -1225,9 +783,16 @@ Array [
 
           // removes the color from both
           PortableTextEditor.select(editorRef.current, {
-            focus: {path: [{_key: '5fc57af23597'}, 'children', {_key: '1'}], offset: 6},
+            focus: {
+              path: [{_key: '5fc57af23597'}, 'children', {_key: '1'}],
+              offset: 6,
+            },
             anchor: {
-              path: [{_key: '5fc57af23597'}, 'children', {_key: 'be1c67c6971a'}],
+              path: [
+                {_key: '5fc57af23597'},
+                'children',
+                {_key: 'be1c67c6971a'},
+              ],
               offset: 0,
             },
           })
@@ -1274,60 +839,6 @@ Array [
   })
 
   describe('removing nodes', () => {
-    it("should insert an empty text block if it's removing the only block", async () => {
-      const editorRef: RefObject<PortableTextEditor> = createRef()
-      const initialValue = [
-        {
-          _key: '5fc57af23597',
-          _type: 'someObject',
-        },
-      ]
-      const onChange = jest.fn()
-      await waitFor(() => {
-        render(
-          <PortableTextEditorTester
-            onChange={onChange}
-            ref={editorRef}
-            schemaType={schemaType}
-            value={initialValue}
-          />,
-        )
-      })
-
-      await waitFor(() => {
-        if (editorRef.current) {
-          PortableTextEditor.focus(editorRef.current)
-
-          PortableTextEditor.delete(
-            editorRef.current,
-            {
-              focus: {path: [{_key: '5fc57af23597'}], offset: 0},
-              anchor: {path: [{_key: '5fc57af23597'}], offset: 0},
-            },
-            {mode: 'blocks'},
-          )
-
-          const value = PortableTextEditor.getValue(editorRef.current)
-
-          expect(value).toEqual([
-            {
-              _type: 'myTestBlockType',
-              _key: '3',
-              style: 'normal',
-              markDefs: [],
-              children: [
-                {
-                  _type: 'span',
-                  _key: '2',
-                  text: '',
-                  marks: [],
-                },
-              ],
-            },
-          ])
-        }
-      })
-    })
     it('should not insert a new block if we have more blocks available', async () => {
       const editorRef: RefObject<PortableTextEditor> = createRef()
       const initialValue = [