@portabletext/editor 1.11.2 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.11.2",
+  "version": "1.12.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -49,7 +49,7 @@
     "is-hotkey-esm": "^1.0.0",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
-    "react-compiler-runtime": "19.0.0-beta-0dec889-20241115",
+    "react-compiler-runtime": "19.0.0-beta-df7b47d-20241124",
     "slate": "0.110.2",
     "slate-dom": "^0.111.0",
     "slate-react": "0.111.0",
@@ -74,11 +74,12 @@
     "@typescript-eslint/parser": "^8.15.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser": "^2.1.5",
-    "babel-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint": "8.57.1",
-    "eslint-plugin-react-compiler": "19.0.0-beta-0dec889-20241115",
+    "eslint-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",
     "eslint-plugin-react-hooks": "^5.0.0",
     "jsdom": "^25.0.1",
+    "racejar": "1.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rxjs": "^7.8.1",
@@ -86,8 +87,7 @@
     "typescript": "5.6.3",
     "vite": "^5.4.11",
     "vitest": "^2.1.5",
-    "vitest-browser-react": "^0.0.3",
-    "@sanity/gherkin-driver": "^0.0.1"
+    "vitest-browser-react": "^0.0.3"
   },
   "peerDependencies": {
     "@sanity/block-tools": "^3.64.3",

package/src/editor/behavior/behavior.action-utils.insert-block.ts

@@ -0,0 +1,61 @@
+import {Editor, Transforms, type Descendant} from 'slate'
+import type {
+  PortableTextMemberSchemaTypes,
+  PortableTextSlateEditor,
+} from '../../types/editor'
+import {isEqualToEmptyEditor} from '../../utils/values'
+
+export function insertBlock({
+  block,
+  placement,
+  editor,
+  schema,
+}: {
+  block: Descendant
+  placement: 'auto' | 'after'
+  editor: PortableTextSlateEditor
+  schema: PortableTextMemberSchemaTypes
+}) {
+  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]], schema)) {
+      // And if the last block was an empty text block, let's remove
+      // that too
+      Transforms.removeNodes(editor, {at: lastBlock[1]})
+    }
+  } else {
+    const [focusBlock, focusBlockPath] = Array.from(
+      Editor.nodes(editor, {
+        at: editor.selection.focus.path.slice(0, 1),
+        match: (n) => !Editor.isEditor(n),
+      }),
+    )[0] ?? [undefined, undefined]
+
+    if (placement === 'after') {
+      const nextPath = [focusBlockPath[0] + 1]
+
+      Transforms.insertNodes(editor, block, {at: nextPath})
+      Transforms.select(editor, {
+        anchor: {path: [nextPath[0], 0], offset: 0},
+        focus: {path: [nextPath[0], 0], offset: 0},
+      })
+    } else {
+      Editor.insertNode(editor, block)
+    }
+
+    if (focusBlock && isEqualToEmptyEditor([focusBlock], schema)) {
+      Transforms.removeNodes(editor, {at: focusBlockPath})
+    }
+  }
+}

package/src/editor/behavior/behavior.action.insert-block-object.ts

@@ -0,0 +1,25 @@
+import {toSlateValue} from '../../utils/values'
+import {insertBlock} from './behavior.action-utils.insert-block'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const insertBlockObjectActionImplementation: BehaviorActionImplementation<
+  'insert block object'
+> = ({context, action}) => {
+  const block = toSlateValue(
+    [
+      {
+        _key: context.keyGenerator(),
+        _type: action.blockObject.name,
+        ...(action.blockObject.value ? action.blockObject.value : {}),
+      },
+    ],
+    {schemaTypes: context.schema},
+  )[0]
+
+  insertBlock({
+    block,
+    placement: action.placement,
+    editor: action.editor,
+    schema: context.schema,
+  })
+}

package/src/editor/behavior/behavior.actions.ts

@@ -1,16 +1,11 @@
-import {
-  deleteBackward,
-  deleteForward,
-  Editor,
-  insertText,
-  Transforms,
-} from 'slate'
+import {deleteBackward, deleteForward, insertText, Transforms} from 'slate'
 import {ReactEditor} from 'slate-react'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {toSlateRange} from '../../utils/ranges'
+import {fromSlateValue, toSlateValue} from '../../utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../../utils/weakMaps'
 import {
   addAnnotationActionImplementation,
-  insertBlockObjectActionImplementation,
   removeAnnotationActionImplementation,
   toggleAnnotationActionImplementation,
 } from '../plugins/createWithEditableAPI'
@@ -19,6 +14,8 @@ import {
   removeDecoratorActionImplementation,
   toggleDecoratorActionImplementation,
 } from '../plugins/createWithPortableTextMarkModel'
+import {insertBlock} from './behavior.action-utils.insert-block'
+import {insertBlockObjectActionImplementation} from './behavior.action.insert-block-object'
 import {
   insertBreakActionImplementation,
   insertSoftBreakActionImplementation,
@@ -29,6 +26,7 @@ import type {
   BehaviorEvent,
   PickFromUnion,
 } from './behavior.types'
+import {blockOffsetToSpanSelectionPoint} from './behavior.utils.block-offset'
 
 export type BehaviorActionContext = {
   keyGenerator: () => string
@@ -94,25 +92,61 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'delete forward': ({action}) => {
     deleteForward(action.editor, action.unit)
   },
-  'delete': ({action}) => {
-    const location = toSlateRange(action.selection, action.editor)
+  'delete block': ({action}) => {
+    const range = toSlateRange(
+      {
+        anchor: {path: action.blockPath, offset: 0},
+        focus: {path: action.blockPath, offset: 0},
+      },
+      action.editor,
+    )
 
-    if (!location) {
-      console.error(
-        `Could not find Slate location from selection ${action.selection}`,
-      )
+    if (!range) {
+      console.error('Unable to find Slate range from selection points')
       return
     }
 
-    if (location.anchor.path.length === 1 && location.focus.path.length === 1) {
-      Transforms.removeNodes(action.editor, {
-        at: location,
-      })
-    } else {
-      Transforms.delete(action.editor, {
-        at: location,
-      })
+    Transforms.removeNodes(action.editor, {
+      at: range,
+    })
+  },
+  'delete text': ({context, action}) => {
+    const value = fromSlateValue(
+      action.editor.children,
+      context.schema.block.name,
+      KEY_TO_VALUE_ELEMENT.get(action.editor),
+    )
+
+    const anchor = blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: action.anchor,
+    })
+    const focus = blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: action.focus,
+    })
+
+    if (!anchor || !focus) {
+      console.error('Unable to find anchor or focus selection point')
+      return
     }
+
+    const range = toSlateRange(
+      {
+        anchor,
+        focus,
+      },
+      action.editor,
+    )
+
+    if (!range) {
+      console.error('Unable to find Slate range from selection points')
+      return
+    }
+
+    Transforms.delete(action.editor, {
+      at: range,
+    })
   },
   'insert block object': insertBlockObjectActionImplementation,
   'insert break': insertBreakActionImplementation,
@@ -122,18 +156,33 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
     insertText(action.editor, action.text)
   },
   'insert text block': ({context, action}) => {
-    Editor.insertNode(action.editor, {
-      _key: context.keyGenerator(),
-      _type: context.schema.block.name,
-      style: context.schema.styles[0].value ?? 'normal',
-      markDefs: [],
-      children: [
+    const block = toSlateValue(
+      [
         {
           _key: context.keyGenerator(),
-          _type: 'span',
-          text: '',
+          _type: context.schema.block.name,
+          style: context.schema.styles[0].value ?? 'normal',
+          markDefs: [],
+          children: action.textBlock?.children?.map((child) => ({
+            ...child,
+            _key: context.keyGenerator(),
+          })) ?? [
+            {
+              _type: context.schema.span.name,
+              _key: context.keyGenerator(),
+              text: '',
+            },
+          ],
         },
       ],
+      {schemaTypes: context.schema},
+    )[0]
+
+    insertBlock({
+      block,
+      editor: action.editor,
+      schema: context.schema,
+      placement: action.placement,
     })
   },
   'effect': ({action}) => {
@@ -169,8 +218,15 @@ export function performAction({
   action: BehaviorAction
 }) {
   switch (action.type) {
-    case 'delete': {
-      behaviorActionImplementations.delete({
+    case 'delete block': {
+      behaviorActionImplementations['delete block']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'delete text': {
+      behaviorActionImplementations['delete text']({
         context,
         action,
       })

package/src/editor/behavior/behavior.core.block-objects.ts

@@ -16,7 +16,7 @@ const breakingBlockObject = defineBehavior({
 
     return !!focusBlockObject
   },
-  actions: [() => [{type: 'insert text block', decorators: []}]],
+  actions: [() => [{type: 'insert text block', placement: 'after'}]],
 })
 
 const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
@@ -42,11 +42,8 @@ const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
   actions: [
     (_, {focusTextBlock, previousBlock}) => [
       {
-        type: 'delete',
-        selection: {
-          anchor: {path: focusTextBlock.path, offset: 0},
-          focus: {path: focusTextBlock.path, offset: 0},
-        },
+        type: 'delete block',
+        blockPath: focusTextBlock.path,
       },
       {
         type: 'select',
@@ -82,11 +79,8 @@ const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
   actions: [
     (_, {focusTextBlock, nextBlock}) => [
       {
-        type: 'delete',
-        selection: {
-          anchor: {path: focusTextBlock.path, offset: 0},
-          focus: {path: focusTextBlock.path, offset: 0},
-        },
+        type: 'delete block',
+        blockPath: focusTextBlock.path,
       },
       {
         type: 'select',