@portabletext/editor 1.11.3 → 1.12.0

package/src/editor/behavior/behavior.types.ts

@@ -1,4 +1,8 @@
-import type {KeyedSegment, PortableTextBlock} from '@sanity/types'
+import type {
+  KeyedSegment,
+  PortableTextBlock,
+  PortableTextTextBlock,
+} from '@sanity/types'
 import type {TextUnit} from 'slate'
 import type {TextInsertTextOptions} from 'slate/dist/interfaces/transforms/text'
 import type {
@@ -6,6 +10,7 @@ import type {
   PortableTextMemberSchemaTypes,
   PortableTextSlateEditor,
 } from '../../types/editor'
+import type {BlockOffset} from './behavior.utils.block-offset'
 
 /**
  * @alpha
@@ -100,8 +105,11 @@ export type BehaviorActionIntend =
   | BehaviorEvent
   | {
       type: 'insert block object'
-      name: string
-      value?: {[prop: string]: unknown}
+      placement: 'auto' | 'after'
+      blockObject: {
+        name: string
+        value?: {[prop: string]: unknown}
+      }
     }
   | {
       type: 'insert span'
@@ -114,7 +122,10 @@ export type BehaviorActionIntend =
     }
   | {
       type: 'insert text block'
-      decorators: Array<string>
+      placement: 'auto' | 'after'
+      textBlock?: {
+        children?: PortableTextTextBlock['children']
+      }
     }
   | {
       type: 'set block'
@@ -129,8 +140,13 @@ export type BehaviorActionIntend =
       props: Array<'style' | 'listItem' | 'level'>
     }
   | {
-      type: 'delete'
-      selection: NonNullable<EditorSelection>
+      type: 'delete block'
+      blockPath: [KeyedSegment]
+    }
+  | {
+      type: 'delete text'
+      anchor: BlockOffset
+      focus: BlockOffset
     }
   | {
       type: 'effect'

package/src/editor/behavior/behavior.utils.block-offset.test.ts

@@ -0,0 +1,143 @@
+import type {PortableTextBlock} from '@sanity/types'
+import {expect, test} from 'vitest'
+import {blockOffsetToSpanSelectionPoint} from './behavior.utils.block-offset'
+
+test(blockOffsetToSpanSelectionPoint.name, () => {
+  const value: Array<PortableTextBlock> = [
+    {
+      _key: 'b1',
+      _type: 'image',
+    },
+    {
+      _key: 'b2',
+      _type: 'block',
+      children: [
+        {
+          _key: 's1',
+          _type: 'span',
+          text: 'Hello, ',
+        },
+        {
+          _key: 's2',
+          _type: 'span',
+          text: 'world!',
+          marks: ['strong'],
+        },
+      ],
+    },
+    {
+      _key: 'b3',
+      _type: 'block',
+      children: [
+        {
+          _key: 's3',
+          _type: 'span',
+          text: 'Here is a ',
+        },
+        {
+          _key: 's4',
+          _type: 'stock-ticker',
+        },
+        {
+          _key: 's5',
+          _type: 'span',
+          text: '.',
+        },
+      ],
+    },
+    {
+      _key: 'b4',
+      _type: 'block',
+      children: [
+        {
+          _key: 's6',
+          _type: 'stock-ticker',
+        },
+        {
+          _key: 's7',
+          _type: 'stock-ticker',
+        },
+        {
+          _key: 's8',
+          _type: 'stock-ticker',
+        },
+      ],
+    },
+  ]
+
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b1'}],
+        offset: 0,
+      },
+    }),
+  ).toBeUndefined()
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b2'}],
+        offset: 9,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b2'}, 'children', {_key: 's2'}],
+    offset: 2,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b3'}],
+        offset: 9,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+    offset: 9,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b3'}],
+        offset: 10,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b3'}, 'children', {_key: 's3'}],
+    offset: 10,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b3'}],
+        offset: 11,
+      },
+    }),
+  ).toEqual({
+    path: [{_key: 'b3'}, 'children', {_key: 's5'}],
+    offset: 1,
+  })
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b4'}],
+        offset: 0,
+      },
+    }),
+  ).toBeUndefined()
+  expect(
+    blockOffsetToSpanSelectionPoint({
+      value,
+      blockOffset: {
+        path: [{_key: 'b4'}],
+        offset: 1,
+      },
+    }),
+  ).toBeUndefined()
+})

package/src/editor/behavior/behavior.utils.block-offset.ts

@@ -0,0 +1,101 @@
+import {
+  isPortableTextSpan,
+  isPortableTextTextBlock,
+  type KeyedSegment,
+  type PortableTextBlock,
+} from '@sanity/types'
+
+/**
+ * @alpha
+ */
+export type BlockOffset = {
+  path: [KeyedSegment]
+  offset: number
+}
+
+export function blockOffsetToSpanSelectionPoint({
+  value,
+  blockOffset,
+}: {
+  value: Array<PortableTextBlock>
+  blockOffset: BlockOffset
+}) {
+  let offsetLeft = blockOffset.offset
+  let selectionPoint:
+    | {path: [KeyedSegment, 'children', KeyedSegment]; offset: number}
+    | undefined
+
+  for (const block of value) {
+    if (block._key !== blockOffset.path[0]._key) {
+      continue
+    }
+
+    if (!isPortableTextTextBlock(block)) {
+      continue
+    }
+
+    for (const child of block.children) {
+      if (!isPortableTextSpan(child)) {
+        continue
+      }
+
+      if (offsetLeft === 0) {
+        selectionPoint = {
+          path: [...blockOffset.path, 'children', {_key: child._key}],
+          offset: 0,
+        }
+        break
+      }
+
+      if (offsetLeft <= child.text.length) {
+        selectionPoint = {
+          path: [...blockOffset.path, 'children', {_key: child._key}],
+          offset: offsetLeft,
+        }
+        break
+      }
+
+      offsetLeft -= child.text.length
+    }
+  }
+
+  return selectionPoint
+}
+
+export function spanSelectionPointToBlockOffset({
+  value,
+  selectionPoint,
+}: {
+  value: Array<PortableTextBlock>
+  selectionPoint: {
+    path: [KeyedSegment, 'children', KeyedSegment]
+    offset: number
+  }
+}): BlockOffset | undefined {
+  let offset = 0
+
+  for (const block of value) {
+    if (block._key !== selectionPoint.path[0]._key) {
+      continue
+    }
+
+    if (!isPortableTextTextBlock(block)) {
+      continue
+    }
+
+    for (const child of block.children) {
+      if (!isPortableTextSpan(child)) {
+        continue
+      }
+
+      if (child._key === selectionPoint.path[2]._key) {
+        return {
+          path: [{_key: block._key}],
+          offset: offset + selectionPoint.offset,
+        }
+      }
+
+      offset += child.text.length
+    }
+  }
+}

package/src/editor/behavior/behavior.utils.ts

@@ -202,6 +202,17 @@ export function getNextBlock(
   return undefined
 }
 
-export function isEmptyTextBlock(block: PortableTextTextBlock) {
-  return block.children.length === 1 && block.children[0].text === ''
+export function isEmptyTextBlock(block: PortableTextBlock) {
+  if (!isPortableTextTextBlock(block)) {
+    return false
+  }
+
+  const onlyText = block.children.every(isPortableTextSpan)
+  const blockText = getTextBlockText(block)
+
+  return onlyText && blockText === ''
+}
+
+export function getTextBlockText(block: PortableTextTextBlock) {
+  return block.children.map((child) => child.text ?? '').join('')
 }

package/src/editor/plugins/createWithEditableAPI.ts

@@ -26,15 +26,12 @@ import type {
 } from '../../types/editor'
 import {debugWithName} from '../../utils/debug'
 import {toPortableTextRange, toSlateRange} from '../../utils/ranges'
-import {
-  fromSlateValue,
-  isEqualToEmptyEditor,
-  toSlateValue,
-} from '../../utils/values'
+import {fromSlateValue, toSlateValue} from '../../utils/values'
 import {
   KEY_TO_VALUE_ELEMENT,
   SLATE_TO_PORTABLE_TEXT_RANGE,
 } from '../../utils/weakMaps'
+import {insertBlockObjectActionImplementation} from '../behavior/behavior.action.insert-block-object'
 import type {BehaviorActionImplementation} from '../behavior/behavior.actions'
 import type {EditorActor} from '../editor-machine'
 import {isDecoratorActive} from './createWithPortableTextMarkModel'
@@ -206,18 +203,35 @@ export function createEditableAPI(
       type: TSchemaType,
       value?: {[prop: string]: any},
     ): Path => {
-      return insertBlockObjectActionImplementation({
+      insertBlockObjectActionImplementation({
         context: {
           keyGenerator: editorActor.getSnapshot().context.keyGenerator,
           schema: types,
         },
         action: {
           type: 'insert block object',
-          name: type.name,
-          value,
+          blockObject: {
+            name: type.name,
+            value,
+          },
+          placement: 'auto',
           editor,
         },
       })
+
+      editor.onChange()
+
+      return (
+        toPortableTextRange(
+          fromSlateValue(
+            editor.children,
+            types.block.name,
+            KEY_TO_VALUE_ELEMENT.get(editor),
+          ),
+          editor.selection,
+          types,
+        )?.focus.path ?? []
+      )
     },
     hasBlockStyle: (style: string): boolean => {
       try {
@@ -487,85 +501,6 @@ export function createEditableAPI(
   return editableApi
 }
 
-export const insertBlockObjectActionImplementation: BehaviorActionImplementation<
-  'insert block object',
-  Path
-> = ({context, action}) => {
-  const editor = action.editor
-  const types = context.schema
-  const block = toSlateValue(
-    [
-      {
-        _key: context.keyGenerator(),
-        _type: action.name,
-        ...(action.value ? action.value : {}),
-      },
-    ],
-    {schemaTypes: context.schema},
-  )[0] as unknown as Node
-
-  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]
-
-  Editor.insertNode(editor, block)
-
-  if (focusBlock && isEqualToEmptyEditor([focusBlock[0]], types)) {
-    Transforms.removeNodes(editor, {at: focusBlock[1]})
-  }
-
-  editor.onChange()
-
-  return (
-    toPortableTextRange(
-      fromSlateValue(
-        editor.children,
-        types.block.name,
-        KEY_TO_VALUE_ELEMENT.get(editor),
-      ),
-      editor.selection,
-      types,
-    )?.focus.path || []
-  )
-}
-
 function isAnnotationActive({
   editor,
   annotation,

package/src/index.ts

@@ -20,6 +20,7 @@ export {
   type OmitFromUnion,
   type PickFromUnion,
 } from './editor/behavior/behavior.types'
+export type {BlockOffset} from './editor/behavior/behavior.utils.block-offset'
 export type {SlateEditor} from './editor/create-slate-editor'
 export {
   defineSchema,