@portabletext/editor 2.21.0 → 2.21.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.21.0",
+  "version": "2.21.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -70,8 +70,8 @@
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "1.0.0",
     "slate": "0.118.1",
-    "slate-dom": "^0.118.1",
-    "slate-react": "0.118.2",
+    "slate-dom": "^0.119.0",
+    "slate-react": "0.119.0",
     "xstate": "^5.24.0",
     "@portabletext/block-tools": "^4.0.2",
     "@portabletext/keyboard-shortcuts": "^2.1.0",

package/src/editor/plugins/createWithEditableAPI.ts

@@ -25,7 +25,7 @@ import {
   slateRangeToSelection,
 } from '../../internal-utils/slate-utils'
 import {toSlateRange} from '../../internal-utils/to-slate-range'
-import {fromSlateValue, toSlateValue} from '../../internal-utils/values'
+import {fromSlateValue} from '../../internal-utils/values'
 import {getActiveAnnotationsMarks} from '../../selectors/selector.get-active-annotation-marks'
 import {getActiveDecorators} from '../../selectors/selector.get-active-decorators'
 import {getFocusBlock} from '../../selectors/selector.get-focus-block'
@@ -187,83 +187,17 @@ export function createEditableAPI(
       type: TSchemaType,
       value?: {[prop: string]: any},
     ): Path => {
-      if (type.name !== types.span.name) {
-        editorActor.send({
-          type: 'behavior event',
-          behaviorEvent: {
-            type: 'insert.inline object',
-            inlineObject: {
-              name: type.name,
-              value,
-            },
-          },
-          editor,
-        })
-
-        return editor.selection
-          ? (slateRangeToSelection({
-              schema: editorActor.getSnapshot().context.schema,
-              editor,
-              range: editor.selection,
-            })?.focus.path ?? [])
-          : []
-      }
-
-      if (!editor.selection) {
-        throw new Error('The editor has no selection')
-      }
-      const [focusBlock] = Array.from(
-        Editor.nodes(editor, {
-          at: editor.selection.focus.path.slice(0, 1),
-          match: (n) => n._type === types.block.name,
-        }),
-      )[0] || [undefined]
-      if (!focusBlock) {
-        throw new Error('No focused text block')
-      }
-      if (
-        type.name !== types.span.name &&
-        !types.inlineObjects.some((t) => t.name === type.name)
-      ) {
-        throw new Error(
-          'This type cannot be inserted as a child to a text block',
-        )
-      }
-      const block = toSlateValue(
-        [
-          {
-            _key: editorActor.getSnapshot().context.keyGenerator(),
-            _type: types.block.name,
-            children: [
-              {
-                _key: editorActor.getSnapshot().context.keyGenerator(),
-                _type: type.name,
-                ...(value ? value : {}),
-              },
-            ],
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'insert.child',
+          child: {
+            _type: type.name,
+            ...(value ? value : {}),
           },
-        ],
-        {schemaTypes: editorActor.getSnapshot().context.schema},
-      )[0] as unknown as SlateElement
-      const child = block.children[0]
-      const focusChildPath = editor.selection.focus.path.slice(0, 2)
-      const isSpanNode = child._type === types.span.name
-      const focusNode = Node.get(editor, focusChildPath)
-
-      // If we are inserting a span, and currently have focus on an inline object,
-      // move the selection to the next span (guaranteed by normalizing rules) before inserting it.
-      if (isSpanNode && focusNode._type !== types.span.name) {
-        debug(
-          'Inserting span child next to inline object child, moving selection + 1',
-        )
-        editor.move({distance: 1, unit: 'character'})
-      }
-
-      Transforms.insertNodes(editor, child, {
-        select: true,
-        at: editor.selection,
+        },
+        editor,
       })
-      editor.onChange()
 
       return editor.selection
         ? (slateRangeToSelection({

package/src/editor/plugins/createWithUtils.ts

@@ -1,4 +1,4 @@
-import {toSlateValue} from '../../internal-utils/values'
+import {toSlateBlock} from '../../internal-utils/values'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
 
@@ -19,36 +19,33 @@ export function createWithUtils({editorActor}: Options) {
       listItem?: string
       level?: number
     }) => {
-      const block = toSlateValue(
-        [
-          {
-            _type: editorActor.getSnapshot().context.schema.block.name,
-            _key: editorActor.getSnapshot().context.keyGenerator(),
-            style:
-              editorActor.getSnapshot().context.schema.styles[0].name ||
-              'normal',
-            ...(options.listItem ? {listItem: options.listItem} : {}),
-            ...(options.level ? {level: options.level} : {}),
-            markDefs: [],
-            children: [
-              {
-                _type: 'span',
-                _key: editorActor.getSnapshot().context.keyGenerator(),
-                text: '',
-                marks: options.decorators.filter((decorator) =>
-                  editorActor
-                    .getSnapshot()
-                    .context.schema.decorators.find(
-                      ({name}) => name === decorator,
-                    ),
-                ),
-              },
-            ],
-          },
-        ],
+      return toSlateBlock(
+        {
+          _type: editorActor.getSnapshot().context.schema.block.name,
+          _key: editorActor.getSnapshot().context.keyGenerator(),
+          style:
+            editorActor.getSnapshot().context.schema.styles[0].name || 'normal',
+          ...(options.listItem ? {listItem: options.listItem} : {}),
+          ...(options.level ? {level: options.level} : {}),
+          markDefs: [],
+          children: [
+            {
+              _type: 'span',
+              _key: editorActor.getSnapshot().context.keyGenerator(),
+              text: '',
+              marks: options.decorators.filter((decorator) =>
+                editorActor
+                  .getSnapshot()
+                  .context.schema.decorators.find(
+                    ({name}) => name === decorator,
+                  ),
+              ),
+            },
+          ],
+        },
+
         {schemaTypes: editorActor.getSnapshot().context.schema},
-      )[0]
-      return block
+      )
     }
     return editor
   }

package/src/internal-utils/operation-to-patches.test.ts

@@ -2,7 +2,7 @@ import {compileSchemaDefinitionToPortableTextMemberSchemaTypes} from '@portablet
 import {compileSchema, defineSchema} from '@portabletext/schema'
 import type {PortableTextTextBlock} from '@sanity/types'
 import {createEditor, type Descendant} from 'slate'
-import {beforeEach, describe, expect, it} from 'vitest'
+import {beforeEach, describe, expect, it, test} from 'vitest'
 import {createActor} from 'xstate'
 import {editorMachine} from '../editor/editor-machine'
 import {withPlugins} from '../editor/plugins/with-plugins'
@@ -59,6 +59,66 @@ const createDefaultValue = () =>
     },
   ] as Descendant[]
 
+describe(insertNodePatch.name, () => {
+  test('Scenario: Inserting block object on empty editor', () => {
+    expect(
+      insertNodePatch(
+        compileSchema(defineSchema({blockObjects: [{name: 'image'}]})),
+        [
+          {
+            _key: 'k2',
+            _type: 'image',
+            children: [
+              {
+                _key: 'void-child',
+                _type: 'span',
+                marks: [],
+                text: '',
+              },
+            ],
+            value: {},
+          },
+        ],
+        {
+          type: 'insert_node',
+          path: [0],
+          node: {
+            _key: 'k2',
+            _type: 'image',
+            children: [
+              {
+                _key: 'void-child',
+                _type: 'span',
+                marks: [],
+                text: '',
+              },
+            ],
+            value: {},
+          },
+        },
+        [],
+      ),
+    ).toEqual([
+      {
+        path: [],
+        type: 'setIfMissing',
+        value: [],
+      },
+      {
+        path: [0],
+        type: 'insert',
+        items: [
+          {
+            _key: 'k2',
+            _type: 'image',
+          },
+        ],
+        position: 'before',
+      },
+    ])
+  })
+})
+
 describe('operationToPatches', () => {
   beforeEach(() => {
     editor.children = createDefaultValue()

package/src/operations/behavior.operation.insert.block.ts

@@ -121,15 +121,15 @@ export function insertBlock(options: {
       // placement === 'auto'
 
       if (endBlock && isEqualToEmptyEditor([endBlock], context.schema)) {
-        // And if the last block was an empty text block, let's remove
-        // that too
-        Transforms.removeNodes(editor, {at: endBlockPath})
-
         Transforms.insertNodes(editor, [block], {
           at: endBlockPath,
           select: false,
         })
 
+        // And if the last block was an empty text block, let's remove
+        // that too
+        Transforms.removeNodes(editor, {at: Path.next(endBlockPath)})
+
         Transforms.deselect(editor)
 
         if (select === 'start') {

package/src/test/vitest/step-definitions.tsx

@@ -71,7 +71,7 @@ export const stepDefinitions = [
     context.keyMap = new Map()
   }),
 
-  Given('the editor is focused', async (context: Context) => {
+  When('the editor is focused', async (context: Context) => {
     await userEvent.click(context.locator)
   }),