@portabletext/editor 1.0.10 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -53,16 +53,16 @@
     "@jest/globals": "^29.7.0",
     "@playwright/test": "1.45.3",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.52.2",
+    "@sanity/block-tools": "^3.52.4",
     "@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.8",
+    "@sanity/schema": "^3.52.4",
     "@sanity/test": "0.0.1-alpha.1",
-    "@sanity/types": "^3.52.2",
+    "@sanity/types": "^3.52.4",
     "@sanity/ui": "^2.8.8",
-    "@sanity/util": "^3.52.2",
+    "@sanity/util": "^3.52.4",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
@@ -99,7 +99,7 @@
     "rxjs": "^7.8.1",
     "styled-components": "^6.1.12",
     "tsx": "^4.16.2",
-    "typescript": "^5.5.3",
+    "typescript": "5.5.4",
     "vite": "^4.5.3"
   },
   "peerDependencies": {

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/plugins/createWithEditableAPI.ts

@@ -160,9 +160,6 @@ export function createWithEditableAPI(
         )
       },
       insertBlock: (type: SchemaType, value?: {[prop: string]: any}): Path => {
-        if (!editor.selection) {
-          throw new Error('The editor has no selection')
-        }
         const block = toSlateValue(
           [
             {
@@ -173,22 +170,52 @@ export function createWithEditableAPI(
           ],
           portableTextEditor,
         )[0] as unknown as Node
-        const [focusBlock] = Array.from(
+
+        if (!editor.selection) {
+          const lastBlock = Array.from(
+            Editor.nodes(editor, {
+              match: (n) => !Editor.isEditor(n),
+              at: [],
+              reverse: true,
+            }),
+          )[0]
+
+          // If there is no selection, let's just insert the new block at the
+          // end of the document
+          Editor.insertNode(editor, block)
+
+          if (lastBlock && isEqualToEmptyEditor([lastBlock[0]], types)) {
+            // And if the last block was an empty text block, let's remove
+            // that too
+            Transforms.removeNodes(editor, {at: lastBlock[1]})
+          }
+
+          editor.onChange()
+
+          return (
+            toPortableTextRange(
+              fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
+              editor.selection,
+              types,
+            )?.focus.path ?? []
+          )
+        }
+
+        const focusBlock = Array.from(
           Editor.nodes(editor, {
             at: editor.selection.focus.path.slice(0, 1),
             match: (n) => n._type === types.block.name,
           }),
-        )[0] || [undefined]
+        )[0]
 
-        const isEmptyTextBlock = focusBlock && isEqualToEmptyEditor([focusBlock], types)
+        Editor.insertNode(editor, block)
 
-        if (isEmptyTextBlock) {
-          // If the text block is empty, remove it before inserting the new block.
-          Transforms.removeNodes(editor, {at: editor.selection})
+        if (focusBlock && isEqualToEmptyEditor([focusBlock[0]], types)) {
+          Transforms.removeNodes(editor, {at: focusBlock[1]})
         }
 
-        Editor.insertNode(editor, block)
         editor.onChange()
+
         return (
           toPortableTextRange(
             fromSlateValue(editor.children, types.block.name, KEY_TO_VALUE_ELEMENT.get(editor)),
@@ -308,6 +335,10 @@ export function createWithEditableAPI(
             }),
           ]
 
+          if (spans.length === 0) {
+            return false
+          }
+
           if (
             spans.some(
               ([span]) => !isPortableTextSpan(span) || !span.marks || span.marks?.length === 0,