@portabletext/editor 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -46,24 +46,25 @@
     "debug": "^4.3.4",
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
-    "slate": "0.100.0",
-    "slate-react": "0.101.0"
+    "slate": "0.103.0",
+    "slate-react": "0.107.1"
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "1.45.3",
+    "@playwright/test": "1.46.0",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.52.2",
+    "@sanity/block-tools": "^3.53.0",
     "@sanity/diff-match-patch": "^3.1.1",
     "@sanity/eslint-config-i18n": "^1.1.0",
     "@sanity/eslint-config-studio": "^4.0.0",
-    "@sanity/pkg-utils": "^6.10.6",
-    "@sanity/schema": "^3.52.2",
+    "@sanity/pkg-utils": "^6.10.9",
+    "@sanity/schema": "^3.53.0",
     "@sanity/test": "0.0.1-alpha.1",
-    "@sanity/types": "^3.52.2",
+    "@sanity/types": "^3.53.0",
     "@sanity/ui": "^2.8.8",
-    "@sanity/util": "^3.52.2",
-    "@testing-library/react": "^13.4.0",
+    "@sanity/util": "^3.53.0",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.4",
@@ -72,9 +73,9 @@
     "@types/node-ipc": "^9.2.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/ws": "~8.5.11",
-    "@typescript-eslint/eslint-plugin": "^7.17.0",
-    "@typescript-eslint/parser": "^7.17.0",
+    "@types/ws": "~8.5.12",
+    "@typescript-eslint/eslint-plugin": "^8.0.1",
+    "@typescript-eslint/parser": "^8.0.1",
     "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -85,12 +86,12 @@
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-compiler": "0.0.0-experimental-9ed098e-20240725",
     "eslint-plugin-tsdoc": "^0.3.0",
-    "eslint-plugin-unicorn": "^54.0.0",
+    "eslint-plugin-unicorn": "^55.0.0",
     "eslint-plugin-unused-imports": "^4.0.1",
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
-    "jest-dev-server": "^9.0.2",
+    "jest-dev-server": "^10.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-environment-node": "^29.7.0",
     "node-ipc": "npm:@node-ipc/compat@9.2.5",
@@ -98,9 +99,9 @@
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.12",
-    "tsx": "^4.16.2",
-    "typescript": "^5.5.3",
-    "vite": "^4.5.3"
+    "tsx": "^4.16.5",
+    "typescript": "5.5.4",
+    "vite": "^5.3.5"
   },
   "peerDependencies": {
     "@sanity/block-tools": "^3.47.1",
@@ -127,6 +128,7 @@
     "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:watch": "jest --watch"
   }
 }

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

@@ -127,6 +127,14 @@ describe('initialization', () => {
         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)
@@ -158,10 +166,16 @@ describe('initialization', () => {
         value={initialValue}
       />,
     )
+
     await waitFor(() => {
       if (editorRef.current) {
-        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
         expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
         const sel = PortableTextEditor.getSelection(editorRef.current)
         PortableTextEditor.focus(editorRef.current)
 

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

@@ -44,16 +44,22 @@ describe('adds empty text block if its needed', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     const element = await getEditableElement(component)
 
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
     await waitFor(async () => {
-      if (editor && inlineType && element) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
+      if (editorRef.current && element) {
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.select(editorRef.current, initialSelection)
         fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editor)).toEqual([initialValue[0], newBlock])
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([initialValue[0], newBlock])
       }
     })
   })
@@ -96,17 +102,16 @@ describe('adds empty text block if its needed', () => {
     )
     const element = await getEditableElement(component)
 
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
     await waitFor(async () => {
-      if (editor && inlineType && element) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
+      if (editorRef.current && element) {
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.select(editorRef.current, initialSelection)
         fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual(initialValue)
       }
     })
   })
+
   it('should not add blocks if the last element is void, but its not focused on that one', async () => {
     const initialValue = [
       {
@@ -134,8 +139,8 @@ describe('adds empty text block if its needed', () => {
     ]
 
     const initialSelection = {
-      focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 2},
-      anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 2},
+      focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 0},
+      anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 0},
     }
 
     const editorRef: RefObject<PortableTextEditor> = createRef()
@@ -148,19 +153,26 @@ describe('adds empty text block if its needed', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     const element = await getEditableElement(component)
 
-    const editor = editorRef.current
-    const inlineType = editor?.schemaTypes.inlineObjects.find((t) => t.name === 'someObject')
     await waitFor(async () => {
-      if (editor && inlineType && element) {
-        PortableTextEditor.focus(editor)
-        PortableTextEditor.select(editor, initialSelection)
+      if (editorRef.current && element) {
+        PortableTextEditor.focus(editorRef.current)
+        PortableTextEditor.select(editorRef.current, initialSelection)
         fireEvent.click(element)
-        expect(PortableTextEditor.getValue(editor)).toEqual(initialValue)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual(initialValue)
       }
     })
   })
+
   it('should not add blocks if the last element is void, and its focused on that one when clicking', async () => {
     const initialValue = [
       {
@@ -202,6 +214,14 @@ describe('adds empty text block if its needed', () => {
         value={initialValue}
       />,
     )
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     const element = await getEditableElement(component)
 
     const editor = editorRef.current

package/src/editor/__tests__/insert-block.test.tsx

@@ -0,0 +1,229 @@
+import {describe, expect, jest, test} from '@jest/globals'
+import {Schema} from '@sanity/schema'
+import {type PortableTextBlock} from '@sanity/types'
+import {render, waitFor} from '@testing-library/react'
+import {createRef, type RefObject} from 'react'
+
+import {type EditorChange, type EditorSelection} from '../../types/editor'
+import {PortableTextEditable} from '../Editable'
+import {PortableTextEditor} from '../PortableTextEditor'
+
+const schema = Schema.compile({
+  types: [
+    {name: 'portable-text', type: 'array', of: [{type: 'block'}, {type: 'image'}]},
+    {name: 'image', type: 'object'},
+  ],
+}).get('portable-text')
+
+describe(PortableTextEditor.insertBlock.name, () => {
+  test('Scenario: Inserting a custom block without a selection #1', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const emptyTextBlock: PortableTextBlock = {
+      _key: 'ba',
+      _type: 'block',
+      children: [
+        {
+          _type: 'span',
+          _key: 'sa',
+          text: '',
+          marks: [],
+        },
+      ],
+      style: 'normal',
+    }
+    const initialValue: Array<PortableTextBlock> = [emptyTextBlock]
+    const onChange: (change: EditorChange) => void = jest.fn()
+
+    render(
+      <PortableTextEditor
+        ref={editorRef}
+        schemaType={schema}
+        value={initialValue}
+        keyGenerator={() => 'bb'}
+        onChange={onChange}
+      >
+        <PortableTextEditable />
+      </PortableTextEditor>,
+    )
+
+    // Given an empty text block
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
+    // And no selection
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getSelection(editorRef.current)).toBeNull()
+      }
+    })
+
+    // When a new image is inserted
+    await waitFor(() => {
+      if (editorRef.current) {
+        const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
+          (object) => object.name === 'image',
+        )!
+        PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
+      }
+    })
+
+    // Then the empty text block is replaced with the new image
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {_key: 'bb', _type: 'image'},
+        ])
+      }
+    })
+  })
+
+  test('Scenario: Inserting a custom block without a selection #2', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const nonEmptyTextBlock: PortableTextBlock = {
+      _key: 'ba',
+      _type: 'block',
+      children: [
+        {
+          _type: 'span',
+          _key: 'xs',
+          text: 'foo',
+          marks: [],
+        },
+      ],
+      style: 'normal',
+    }
+    const initialValue: Array<PortableTextBlock> = [nonEmptyTextBlock]
+    const onChange: (change: EditorChange) => void = jest.fn()
+
+    render(
+      <PortableTextEditor
+        ref={editorRef}
+        schemaType={schema}
+        value={initialValue}
+        keyGenerator={() => 'bb'}
+        onChange={onChange}
+      >
+        <PortableTextEditable />
+      </PortableTextEditor>,
+    )
+
+    // Given an non-empty text block
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
+    // And no selection
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getSelection(editorRef.current)).toBeNull()
+      }
+    })
+
+    // When a new image is inserted
+    await waitFor(() => {
+      if (editorRef.current) {
+        const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
+          (object) => object.name === 'image',
+        )!
+        PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
+      }
+    })
+
+    // Then the empty text block is replaced with the new image
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          nonEmptyTextBlock,
+          {_key: 'bb', _type: 'image'},
+        ])
+      }
+    })
+  })
+
+  test('Scenario: Replacing an empty text block with a custom block', async () => {
+    const editorRef: RefObject<PortableTextEditor> = createRef()
+    const emptyTextBlock: PortableTextBlock = {
+      _key: 'ba',
+      _type: 'block',
+      children: [
+        {
+          _type: 'span',
+          _key: 'sa',
+          text: '',
+          marks: [],
+        },
+      ],
+      style: 'normal',
+    }
+    const imageBlock: PortableTextBlock = {
+      _key: 'bb',
+      _type: 'image',
+    }
+    const initialValue: Array<PortableTextBlock> = [emptyTextBlock, imageBlock]
+    const onChange: (change: EditorChange) => void = jest.fn()
+
+    render(
+      <PortableTextEditor
+        ref={editorRef}
+        schemaType={schema}
+        value={initialValue}
+        keyGenerator={() => 'bc'}
+        onChange={onChange}
+      >
+        <PortableTextEditable />
+      </PortableTextEditor>,
+    )
+
+    // Given an empty text block followed by an image
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
+    // And a selection in the empty text block
+    const initialSelection: EditorSelection = {
+      anchor: {path: [{_key: 'ba'}, 'children', {_key: 'sa'}], offset: 0},
+      focus: {path: [{_key: 'ba'}, 'children', {_key: 'sa'}], offset: 0},
+      backward: false,
+    }
+    await waitFor(() => {
+      if (editorRef.current) {
+        PortableTextEditor.select(editorRef.current, initialSelection)
+      }
+    })
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'selection', selection: initialSelection})
+      }
+    })
+
+    // When a new image is inserted
+    await waitFor(() => {
+      if (editorRef.current) {
+        const imageBlockType = editorRef.current.schemaTypes.blockObjects.find(
+          (object) => object.name === 'image',
+        )!
+        PortableTextEditor.insertBlock(editorRef.current, imageBlockType)
+      }
+    })
+
+    // Then the empty text block is replaced with the new image
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {_key: 'bc', _type: 'image'},
+          {_key: 'bb', _type: 'image'},
+        ])
+      }
+    })
+  })
+})

package/src/editor/__tests__/utils.ts

@@ -1,23 +1,22 @@
 // This utils are inspired from https://github.dev/mwood23/slate-test-utils/blob/master/src/buildTestHarness.tsx
-import {act, fireEvent, type render} from '@testing-library/react'
+import {fireEvent, type render} from '@testing-library/react'
 import {parseHotkey} from 'is-hotkey-esm'
+import {act} from 'react'
 
 export async function triggerKeyboardEvent(hotkey: string, element: Element): Promise<void> {
-  return act(async () => {
-    const eventProps = parseHotkey(hotkey)
-    const values = hotkey.split('+')
+  const eventProps = parseHotkey(hotkey)
+  const values = hotkey.split('+')
 
-    fireEvent(
-      element,
-      new window.KeyboardEvent('keydown', {
-        key: values[values.length - 1],
-        code: `${eventProps.which}`,
-        keyCode: eventProps.which,
-        bubbles: true,
-        ...eventProps,
-      }),
-    )
-  })
+  fireEvent(
+    element,
+    new window.KeyboardEvent('keydown', {
+      key: values[values.length - 1],
+      code: `${eventProps.which}`,
+      keyCode: eventProps.which,
+      bubbles: true,
+      ...eventProps,
+    }),
+  )
 }
 
 export async function getEditableElement(component: ReturnType<typeof render>): Promise<Element> {

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

@@ -53,6 +53,14 @@ describe('plugin:withEditableAPI: .delete()', () => {
         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)
@@ -95,6 +103,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
         value={initialValue}
       />,
     )
+
     await waitFor(() => {
       expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
       expect(onChange).toHaveBeenCalledWith({type: 'ready'})
@@ -140,6 +149,7 @@ describe('plugin:withEditableAPI: .delete()', () => {
   it('deletes children', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
+
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -149,18 +159,34 @@ describe('plugin:withEditableAPI: .delete()', () => {
       />,
     )
 
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     await waitFor(() => {
       if (editorRef.current) {
         PortableTextEditor.select(editorRef.current, {
           focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 5},
           anchor: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 7},
         })
-        PortableTextEditor.focus(editorRef.current)
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
         PortableTextEditor.delete(
           editorRef.current,
           PortableTextEditor.getSelection(editorRef.current),
           {mode: 'children'},
         )
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
         expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
                   Array [
                     Object {
@@ -196,9 +222,11 @@ describe('plugin:withEditableAPI: .delete()', () => {
       }
     })
   })
+
   it('deletes selected', async () => {
     const editorRef: RefObject<PortableTextEditor> = createRef()
     const onChange = jest.fn()
+
     render(
       <PortableTextEditorTester
         onChange={onChange}
@@ -208,36 +236,50 @@ describe('plugin:withEditableAPI: .delete()', () => {
       />,
     )
 
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(onChange).toHaveBeenCalledWith({type: 'value', value: initialValue})
+        expect(onChange).toHaveBeenCalledWith({type: 'ready'})
+      }
+    })
+
     await waitFor(() => {
       if (editorRef.current) {
         PortableTextEditor.select(editorRef.current, {
           focus: {path: [{_key: 'b'}, 'children', {_key: 'b1'}], offset: 5},
           anchor: {path: [{_key: 'a'}, 'children', {_key: 'a1'}], offset: 0},
         })
-        PortableTextEditor.focus(editorRef.current)
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
         PortableTextEditor.delete(
           editorRef.current,
           PortableTextEditor.getSelection(editorRef.current),
           {mode: 'selected'},
         )
-        expect(PortableTextEditor.getValue(editorRef.current)).toMatchInlineSnapshot(`
-                  Array [
-                    Object {
-                      "_key": "b",
-                      "_type": "myTestBlockType",
-                      "children": Array [
-                        Object {
-                          "_key": "b1",
-                          "_type": "span",
-                          "marks": Array [],
-                          "text": " B",
-                        },
-                      ],
-                      "markDefs": Array [],
-                      "style": "normal",
-                    },
-                  ]
-              `)
+      }
+    })
+
+    await waitFor(() => {
+      if (editorRef.current) {
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: 'b',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'b1',
+                _type: 'span',
+                marks: [],
+                text: ' B',
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
       }
     })
   })