@portabletext/editor 1.11.3 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.11.3",
+  "version": "1.12.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,6 +79,7 @@
     "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',

package/src/editor/behavior/behavior.markdown.ts

@@ -1,11 +1,15 @@
 import {isPortableTextSpan} from '@portabletext/toolkit'
+import {isPortableTextTextBlock} from '@sanity/types'
 import type {PortableTextMemberSchemaTypes} from '../../types/editor'
 import {defineBehavior} from './behavior.types'
 import {
+  getFocusBlock,
   getFocusSpan,
   getFocusTextBlock,
+  getTextBlockText,
   selectionIsCollapsed,
 } from './behavior.utils'
+import {spanSelectionPointToBlockOffset} from './behavior.utils.block-offset'
 
 /**
  * @alpha
@@ -53,8 +57,25 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const caretAtTheEndOfQuote = context.selection.focus.offset === 1
-      const looksLikeMarkdownQuote = /^>/.test(focusSpan.node.text)
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: context.selection.focus.offset,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const blockText = getTextBlockText(focusTextBlock.node)
+      const caretAtTheEndOfQuote = blockOffset.offset === 1
+      const looksLikeMarkdownQuote = /^>/.test(blockText)
       const blockquoteStyle = config.blockquoteStyle?.({schema: context.schema})
 
       if (
@@ -62,7 +83,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         looksLikeMarkdownQuote &&
         blockquoteStyle !== undefined
       ) {
-        return {focusTextBlock, focusSpan, style: blockquoteStyle}
+        return {focusTextBlock, style: blockquoteStyle}
       }
 
       return false
@@ -74,7 +95,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, style}) => [
+      (_, {focusTextBlock, style}) => [
         {
           type: 'unset block',
           props: ['listItem', 'level'],
@@ -86,22 +107,20 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           paths: [focusTextBlock.path],
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusSpan.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusSpan.path,
-              offset: 2,
-            },
+          type: 'delete text',
+          anchor: {
+            path: focusTextBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: focusTextBlock.path,
+            offset: 2,
           },
         },
       ],
     ],
   })
-  const automaticBreak = defineBehavior({
+  const automaticHr = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
       const hrCharacter =
@@ -117,13 +136,13 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const breakObject = config.horizontalRuleObject?.({
+      const hrObject = config.horizontalRuleObject?.({
         schema: context.schema,
       })
       const focusBlock = getFocusTextBlock(context)
       const selectionCollapsed = selectionIsCollapsed(context)
 
-      if (!breakObject || !focusBlock || !selectionCollapsed) {
+      if (!hrObject || !focusBlock || !selectionCollapsed) {
         return false
       }
 
@@ -133,7 +152,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         .join('')
 
       if (onlyText && blockText === `${hrCharacter}${hrCharacter}`) {
-        return {breakObject, focusBlock, hrCharacter}
+        return {hrObject, focusBlock, hrCharacter}
       }
 
       return false
@@ -145,31 +164,71 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: hrCharacter,
         },
       ],
-      (_, {breakObject, focusBlock}) => [
+      (_, {hrObject, focusBlock}) => [
         {
           type: 'insert block object',
-          ...breakObject,
+          placement: 'after',
+          blockObject: hrObject,
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusBlock.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusBlock.path,
-              offset: 0,
-            },
-          },
+          type: 'delete block',
+          blockPath: focusBlock.path,
         },
         {
           type: 'insert text block',
-          decorators: [],
+          placement: 'after',
         },
       ],
     ],
   })
+  const automaticHrOnPaste = defineBehavior({
+    on: 'paste',
+    guard: ({context, event}) => {
+      const text = event.clipboardData.getData('text/plain')
+      const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm
+      const hrCharacters = text.match(hrRegExp)?.[0]
+      const hrObject = config.horizontalRuleObject?.({
+        schema: context.schema,
+      })
+      const focusBlock = getFocusBlock(context)
+
+      if (!hrCharacters || !hrObject || !focusBlock) {
+        return false
+      }
+
+      return {hrCharacters, hrObject, focusBlock}
+    },
+    actions: [
+      (_, {hrCharacters}) => [
+        {
+          type: 'insert text',
+          text: hrCharacters,
+        },
+      ],
+      (_, {hrObject, focusBlock}) =>
+        isPortableTextTextBlock(focusBlock.node)
+          ? [
+              {
+                type: 'insert text block',
+                textBlock: {children: focusBlock.node.children},
+                placement: 'after',
+              },
+              {
+                type: 'insert block object',
+                blockObject: hrObject,
+                placement: 'after',
+              },
+              {type: 'delete block', blockPath: focusBlock.path},
+            ]
+          : [
+              {
+                type: 'insert block object',
+                blockObject: hrObject,
+                placement: 'after',
+              },
+            ],
+    ],
+  })
   const automaticHeadingOnSpace = defineBehavior({
     on: 'insert text',
     guard: ({context, event}) => {
@@ -187,11 +246,28 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
-      const markdownHeadingSearch = /^#+/.exec(focusSpan.node.text)
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: context.selection.focus.offset,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const blockText = getTextBlockText(focusTextBlock.node)
+      const markdownHeadingSearch = /^#+/.exec(blockText)
       const level = markdownHeadingSearch
         ? markdownHeadingSearch[0].length
         : undefined
-      const caretAtTheEndOfHeading = context.selection.focus.offset === level
+      const caretAtTheEndOfHeading = blockOffset.offset === level
 
       if (!caretAtTheEndOfHeading) {
         return false
@@ -205,7 +281,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       if (level !== undefined && style !== undefined) {
         return {
           focusTextBlock,
-          focusSpan,
           style: style,
           level,
         }
@@ -220,7 +295,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, style, level}) => [
+      (_, {focusTextBlock, style, level}) => [
         {
           type: 'unset block',
           props: ['listItem', 'level'],
@@ -232,16 +307,14 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           paths: [focusTextBlock.path],
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusSpan.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusSpan.path,
-              offset: level + 1,
-            },
+          type: 'delete text',
+          anchor: {
+            path: focusTextBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: focusTextBlock.path,
+            offset: level + 1,
           },
         },
       ],
@@ -301,12 +374,29 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         return false
       }
 
+      const blockOffset = spanSelectionPointToBlockOffset({
+        value: context.value,
+        selectionPoint: {
+          path: [
+            {_key: focusTextBlock.node._key},
+            'children',
+            {_key: focusSpan.node._key},
+          ],
+          offset: context.selection.focus.offset,
+        },
+      })
+
+      if (!blockOffset) {
+        return false
+      }
+
+      const blockText = getTextBlockText(focusTextBlock.node)
       const defaultStyle = config.defaultStyle?.({schema: context.schema})
-      const looksLikeUnorderedList = /^(-|\*)/.test(focusSpan.node.text)
+      const looksLikeUnorderedList = /^(-|\*)/.test(blockText)
       const unorderedListStyle = config.unorderedListStyle?.({
         schema: context.schema,
       })
-      const caretAtTheEndOfUnorderedList = context.selection.focus.offset === 1
+      const caretAtTheEndOfUnorderedList = blockOffset.offset === 1
 
       if (
         defaultStyle &&
@@ -316,7 +406,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ) {
         return {
           focusTextBlock,
-          focusSpan,
           listItem: unorderedListStyle,
           listItemLength: 1,
           style: defaultStyle,
@@ -337,7 +426,6 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ) {
         return {
           focusTextBlock,
-          focusSpan,
           listItem: orderedListStyle,
           listItemLength: 2,
           style: defaultStyle,
@@ -353,7 +441,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           text: ' ',
         },
       ],
-      (_, {focusTextBlock, focusSpan, style, listItem, listItemLength}) => [
+      (_, {focusTextBlock, style, listItem, listItemLength}) => [
         {
           type: 'set block',
           listItem,
@@ -362,16 +450,14 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
           paths: [focusTextBlock.path],
         },
         {
-          type: 'delete',
-          selection: {
-            anchor: {
-              path: focusSpan.path,
-              offset: 0,
-            },
-            focus: {
-              path: focusSpan.path,
-              offset: listItemLength + 1,
-            },
+          type: 'delete text',
+          anchor: {
+            path: focusTextBlock.path,
+            offset: 0,
+          },
+          focus: {
+            path: focusTextBlock.path,
+            offset: listItemLength + 1,
           },
         },
       ],
@@ -380,8 +466,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
 
   const markdownBehaviors = [
     automaticBlockquoteOnSpace,
-    automaticBreak,
     automaticHeadingOnSpace,
+    automaticHr,
+    automaticHrOnPaste,
     clearStyleOnBackspace,
     automaticListOnSpace,
   ]