@portabletext/editor 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.18",
+  "version": "1.0.19",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -50,6 +50,9 @@
     "slate-react": "0.108.0"
   },
   "devDependencies": {
+    "@cucumber/cucumber-expressions": "^17.1.0",
+    "@cucumber/gherkin": "^29.0.0",
+    "@cucumber/messages": "^26.0.0",
     "@jest/globals": "^29.7.0",
     "@jest/types": "^29.6.3",
     "@playwright/test": "1.46.1",
@@ -100,6 +103,7 @@
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.12",
+    "ts-node": "^10.9.2",
     "tsx": "^4.17.0",
     "typescript": "5.5.4",
     "vite": "^5.4.2"
@@ -128,8 +132,8 @@
     "dev:e2e-server": "cd ./e2e-tests/ && tsx serve",
     "lint:fix": "eslint . --fix",
     "test": "jest",
-    "test:e2e": "jest --config=e2e-tests/e2e.config.cjs",
-    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.cjs --watch",
+    "test:e2e": "jest --config=e2e-tests/e2e.config.ts",
+    "test:e2e:watch": "jest --config=e2e-tests/e2e.config.ts --watch",
     "test:watch": "jest --watch"
   }
 }

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

@@ -13,249 +13,6 @@ 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 = [
@@ -894,242 +651,6 @@ Array [
   })
 
   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 = [
@@ -1274,60 +795,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 = [

package/src/editor/plugins/createWithEditableAPI.ts

@@ -378,11 +378,20 @@ export function createWithEditableAPI(
           if (!editor.isTextBlock(block)) {
             return undefined
           }
+          const [textNode] = Editor.node(editor, originalSelection.focus, {depth: 2})
+
+          if (!isPortableTextSpan(textNode)) {
+            return undefined
+          }
+
+          if (textNode.text === '') {
+            return undefined
+          }
+
           if (Range.isCollapsed(originalSelection)) {
             editor.pteExpandToWord()
             editor.onChange()
           }
-          const [textNode] = Editor.node(editor, originalSelection.focus, {depth: 2})
 
           // If we still have a selection, add the annotation to the selected text
           if (editor.selection) {