@portabletext/editor 1.0.9 → 1.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -42,7 +42,7 @@
     "src"
   ],
   "dependencies": {
-    "@portabletext/patches": "1.0.2",
+    "@portabletext/patches": "1.1.0",
     "debug": "^4.3.4",
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
@@ -50,32 +50,31 @@
     "slate-react": "0.101.0"
   },
   "devDependencies": {
-    "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@jest/globals": "^29.7.0",
-    "@playwright/test": "1.45.0",
+    "@playwright/test": "1.45.3",
     "@portabletext/toolkit": "^2.0.15",
-    "@sanity/block-tools": "^3.48.1",
+    "@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.0",
-    "@sanity/schema": "^3.48.1",
+    "@sanity/pkg-utils": "^6.10.8",
+    "@sanity/schema": "^3.52.4",
     "@sanity/test": "0.0.1-alpha.1",
-    "@sanity/types": "^3.48.1",
-    "@sanity/ui": "^2.5.0",
-    "@sanity/util": "^3.48.1",
+    "@sanity/types": "^3.52.4",
+    "@sanity/ui": "^2.8.8",
+    "@sanity/util": "^3.52.4",
     "@testing-library/react": "^13.4.0",
     "@types/debug": "^4.1.5",
     "@types/express": "^4.17.21",
     "@types/express-ws": "^3.0.4",
-    "@types/lodash": "^4.17.5",
+    "@types/lodash": "^4.17.7",
     "@types/node": "^18.19.8",
     "@types/node-ipc": "^9.2.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/ws": "~8.5.10",
-    "@typescript-eslint/eslint-plugin": "^7.14.1",
-    "@typescript-eslint/parser": "^7.14.1",
+    "@types/ws": "~8.5.11",
+    "@typescript-eslint/eslint-plugin": "^7.17.0",
+    "@typescript-eslint/parser": "^7.17.0",
     "@vitejs/plugin-react": "^4.3.1",
     "dotenv": "^16.4.5",
     "eslint": "^8.57.0",
@@ -83,11 +82,11 @@
     "eslint-config-sanity": "^7.1.2",
     "eslint-import-resolver-typescript": "^3.6.1",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-51a85ea-20240601",
+    "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-unused-imports": "^4.0.0",
+    "eslint-plugin-unused-imports": "^4.0.1",
     "express": "^4.19.2",
     "express-ws": "^5.0.2",
     "jest": "^29.7.0",
@@ -98,9 +97,9 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
-    "styled-components": "^6.1.11",
-    "tsx": "^4.15.7",
-    "typescript": "^5.4.5",
+    "styled-components": "^6.1.12",
+    "tsx": "^4.16.2",
+    "typescript": "5.5.4",
     "vite": "^4.5.3"
   },
   "peerDependencies": {

package/src/editor/PortableTextEditor.tsx

@@ -36,11 +36,6 @@ import {PortableTextEditorReadOnlyContext} from './hooks/usePortableTextReadOnly
 
 const debug = debugWithName('component:PortableTextEditor')
 
-/**
- * Props for the PortableTextEditor component
- *
- * @public
- */
 /**
  * Props for the PortableTextEditor component
  *
@@ -115,7 +110,7 @@ export class PortableTextEditor extends Component<PortableTextEditorProps> {
     super(props)
 
     if (!props.schemaType) {
-      throw new Error('PortableTextEditor: missing "type" property')
+      throw new Error('PortableTextEditor: missing "schemaType" property')
     }
 
     if (props.incomingPatches$) {

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/hooks/usePortableTextEditor.ts

@@ -8,6 +8,7 @@ import {type PortableTextEditor} from '../PortableTextEditor'
 export const PortableTextEditorContext = createContext<PortableTextEditor | null>(null)
 
 /**
+ * @public
  * Get the current editor object from the React context.
  */
 export const usePortableTextEditor = (): PortableTextEditor => {

package/src/editor/hooks/usePortableTextEditorKeyGenerator.ts

@@ -1,6 +1,9 @@
 import {randomKey} from '@sanity/util/content'
 import {createContext, useContext} from 'react'
 
+/**
+ * @public
+ */
 export const defaultKeyGenerator = (): string => randomKey(12)
 
 /**

package/src/editor/hooks/usePortableTextEditorSelection.tsx

@@ -9,6 +9,7 @@ import {debugWithName} from '../../utils/debug'
 const PortableTextEditorSelectionContext = createContext<EditorSelection | null>(null)
 
 /**
+ * @public
  * Get the current editor selection from the React context.
  */
 export const usePortableTextEditorSelection = (): EditorSelection => {

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,

package/src/editor/plugins/createWithHotKeys.ts

@@ -195,12 +195,16 @@ export function createWithHotkeys(
         ) as SlateTextBlock | VoidElement
         const focusBlockPath = editor.selection.focus.path.slice(0, 1)
         const focusBlock = Node.descendant(editor, focusBlockPath) as SlateTextBlock | VoidElement
+        const isTextBlock = isPortableTextTextBlock(focusBlock)
+        const isEmptyFocusBlock =
+          isTextBlock && focusBlock.children.length === 1 && focusBlock.children?.[0]?.text === ''
 
         if (
           nextBlock &&
           focusBlock &&
           !Editor.isVoid(editor, focusBlock) &&
-          Editor.isVoid(editor, nextBlock)
+          Editor.isVoid(editor, nextBlock) &&
+          isEmptyFocusBlock
         ) {
           debug('Preventing deleting void block below')
           event.preventDefault()

package/src/types/editor.ts

@@ -375,6 +375,9 @@ export type EditorChange =
   | UnsetChange
   | ValueChange
 
+/**
+ * @beta
+ */
 export type EditorChanges = Subject<EditorChange>
 
 /** @beta */
@@ -384,6 +387,10 @@ export type OnPasteResult =
       path?: Path
     }
   | undefined
+
+/**
+ * @beta
+ */
 export type OnPasteResultOrPromise = OnPasteResult | Promise<OnPasteResult>
 
 /** @beta */

package/src/types/options.ts

@@ -3,6 +3,9 @@ import {type BaseSyntheticEvent} from 'react'
 import {type PortableTextEditor} from '../editor/PortableTextEditor'
 import {type PatchObservable} from './editor'
 
+/**
+ * @internal
+ */
 export type createEditorOptions = {
   keyGenerator: () => string
   patches$?: PatchObservable
@@ -11,6 +14,9 @@ export type createEditorOptions = {
   maxBlocks?: number
 }
 
+/**
+ * @beta
+ */
 export type HotkeyOptions = {
   marks?: Record<string, string>
   custom?: Record<string, (event: BaseSyntheticEvent, editor: PortableTextEditor) => void>

package/src/utils/bufferUntil.ts

@@ -1,15 +0,0 @@
-import {defer, EMPTY, type Observable, of, type OperatorFunction, switchMap, tap} from 'rxjs'
-
-export function bufferUntil<T>(
-  emitWhen: (currentBuffer: T[]) => boolean,
-): OperatorFunction<T, T[]> {
-  return (source: Observable<T>) =>
-    defer(() => {
-      let buffer: T[] = [] // custom buffer
-      return source.pipe(
-        tap((v) => buffer.push(v)), // add values to buffer
-        switchMap(() => (emitWhen(buffer) ? of(buffer) : EMPTY)), // emit the buffer when the condition is met
-        tap(() => (buffer = [])), // clear the buffer
-      )
-    })
-}