@portabletext/editor 1.55.13 → 1.55.15

package/src/editor/range-decorations-machine.ts

@@ -91,10 +91,14 @@ export const rangeDecorationsMachine = setup({
       const rangeDecorationState: Array<DecoratedRange> = []
 
       for (const rangeDecoration of context.pendingRangeDecorations) {
-        const slateRange = toSlateRange(
-          rangeDecoration.selection,
-          context.slateEditor,
-        )
+        const slateRange = toSlateRange({
+          context: {
+            schema: context.schema,
+            value: context.slateEditor.value,
+            selection: rangeDecoration.selection,
+          },
+          blockIndexMap: context.slateEditor.blockIndexMap,
+        })
 
         if (!Range.isRange(slateRange)) {
           rangeDecoration.onMoved?.({
@@ -121,10 +125,14 @@ export const rangeDecorationsMachine = setup({
       const rangeDecorationState: Array<DecoratedRange> = []
 
       for (const rangeDecoration of event.rangeDecorations) {
-        const slateRange = toSlateRange(
-          rangeDecoration.selection,
-          context.slateEditor,
-        )
+        const slateRange = toSlateRange({
+          context: {
+            schema: context.schema,
+            value: context.slateEditor.value,
+            selection: rangeDecoration.selection,
+          },
+          blockIndexMap: context.slateEditor.blockIndexMap,
+        })
 
         if (!Range.isRange(slateRange)) {
           rangeDecoration.onMoved?.({
@@ -152,10 +160,14 @@ export const rangeDecorationsMachine = setup({
       const rangeDecorationState: Array<DecoratedRange> = []
 
       for (const decoratedRange of context.slateEditor.decoratedRanges) {
-        const slateRange = toSlateRange(
-          decoratedRange.rangeDecoration.selection,
-          context.slateEditor,
-        )
+        const slateRange = toSlateRange({
+          context: {
+            schema: context.schema,
+            value: context.slateEditor.value,
+            selection: decoratedRange.rangeDecoration.selection,
+          },
+          blockIndexMap: context.slateEditor.blockIndexMap,
+        })
 
         if (!Range.isRange(slateRange)) {
           decoratedRange.rangeDecoration.onMoved?.({

package/src/internal-utils/create-test-snapshot.ts

@@ -5,7 +5,7 @@ import {createTestKeyGenerator} from './test-key-generator'
 
 export function createTestSnapshot(snapshot: {
   context?: Partial<EditorSnapshot['context']>
-  beta?: Partial<EditorSnapshot['beta']>
+  decoratorState?: Partial<EditorSnapshot['decoratorState']>
 }): EditorSnapshot {
   const context = {
     converters: snapshot.context?.converters ?? [],
@@ -25,9 +25,6 @@ export function createTestSnapshot(snapshot: {
   return {
     blockIndexMap,
     context,
-    beta: {
-      activeAnnotations: snapshot.beta?.activeAnnotations ?? [],
-      activeDecorators: snapshot.beta?.activeDecorators ?? [],
-    },
+    decoratorState: snapshot?.decoratorState ?? {},
   }
 }

package/src/internal-utils/paths.ts

@@ -1,37 +1,67 @@
-import {Element, type Editor, type Path} from 'slate'
-import type {EditorSelectionPoint} from '..'
+import type {Path} from 'slate'
+import type {
+  EditorContext,
+  EditorSelectionPoint,
+  EditorSnapshot,
+  PortableTextBlock,
+  PortableTextObject,
+  PortableTextSpan,
+} from '..'
 import {
   getBlockKeyFromSelectionPoint,
   getChildKeyFromSelectionPoint,
 } from '../selection/selection-point'
+import {isSpan, isTextBlock} from './parse-blocks'
 
 export function toSlatePath(
+  snapshot: {
+    context: Pick<EditorContext, 'schema' | 'value'>
+  } & Pick<EditorSnapshot, 'blockIndexMap'>,
   path: EditorSelectionPoint['path'],
-  editor: Editor,
-): Path {
+): {
+  block: PortableTextBlock | undefined
+  child: PortableTextSpan | PortableTextObject | undefined
+  path: Path
+} {
   const blockKey = getBlockKeyFromSelectionPoint({
     path,
     offset: 0,
   })
 
   if (!blockKey) {
-    return []
+    return {
+      block: undefined,
+      child: undefined,
+      path: [],
+    }
   }
 
-  const blockIndex = editor.blockIndexMap.get(blockKey)
+  const blockIndex = snapshot.blockIndexMap.get(blockKey)
 
   if (blockIndex === undefined) {
-    return []
+    return {
+      block: undefined,
+      child: undefined,
+      path: [],
+    }
   }
 
-  const block = editor.children.at(blockIndex)
+  const block = snapshot.context.value.at(blockIndex)
 
-  if (!block || !Element.isElement(block)) {
-    return []
+  if (!block) {
+    return {
+      block: undefined,
+      child: undefined,
+      path: [],
+    }
   }
 
-  if (editor.isVoid(block)) {
-    return [blockIndex, 0]
+  if (!isTextBlock(snapshot.context, block)) {
+    return {
+      block,
+      child: undefined,
+      path: [blockIndex, 0],
+    }
   }
 
   const childKey = getChildKeyFromSelectionPoint({
@@ -40,23 +70,41 @@ export function toSlatePath(
   })
 
   if (!childKey) {
-    return [blockIndex, 0]
+    return {
+      block,
+      child: undefined,
+      path: [blockIndex, 0],
+    }
   }
 
   let childPath: Array<number> = []
   let childIndex = -1
+  let pathChild: PortableTextSpan | PortableTextObject | undefined = undefined
 
   for (const child of block.children) {
     childIndex++
     if (child._key === childKey) {
-      if (Element.isElement(child) && editor.isVoid(child)) {
-        childPath = [childIndex, 0]
-      } else {
+      pathChild = child
+      if (isSpan(snapshot.context, child)) {
         childPath = [childIndex]
+      } else {
+        childPath = [childIndex, 0]
       }
       break
     }
   }
 
-  return [blockIndex].concat(childPath)
+  if (childPath.length === 0) {
+    return {
+      block,
+      child: undefined,
+      path: [blockIndex, 0],
+    }
+  }
+
+  return {
+    block,
+    child: pathChild,
+    path: [blockIndex].concat(childPath),
+  }
 }

package/src/internal-utils/ranges.test.ts

@@ -0,0 +1,179 @@
+import {describe, expect, test} from 'vitest'
+import {compileSchemaDefinition} from '../editor/editor-schema'
+import {defineSchema} from '../editor/editor-schema-definition'
+import {toSlateRange} from './ranges'
+import {createTestKeyGenerator} from './test-key-generator'
+
+describe(toSlateRange.name, () => {
+  const schema = compileSchemaDefinition(
+    defineSchema({
+      blockObjects: [{name: 'image'}],
+      inlineObjects: [
+        {name: 'stock-ticker', fields: [{name: 'symbol', type: 'string'}]},
+      ],
+    }),
+  )
+
+  test("Scenario: Block object offset that doesn't exist", () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockObjectKey = keyGenerator()
+
+    const range = toSlateRange({
+      context: {
+        schema,
+        value: [
+          {
+            _key: blockObjectKey,
+            _type: 'image',
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockObjectKey}],
+            offset: 3,
+          },
+          focus: {
+            path: [{_key: blockObjectKey}],
+            offset: 3,
+          },
+        },
+      },
+      blockIndexMap: new Map([[blockObjectKey, 0]]),
+    })
+
+    expect(range).toEqual({
+      anchor: {path: [0, 0], offset: 0},
+      focus: {path: [0, 0], offset: 0},
+    })
+  })
+
+  test("Scenario: Child that doesn't exist", () => {
+    const keyGenerator = createTestKeyGenerator()
+
+    const blockKey = keyGenerator()
+    const removedChildKey = keyGenerator()
+
+    const range = toSlateRange({
+      context: {
+        schema,
+        value: [
+          {
+            _key: blockKey,
+            _type: 'block',
+            children: [
+              {
+                _key: keyGenerator(),
+                _type: 'span',
+                text: 'foobar',
+              },
+            ],
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: removedChildKey}],
+            offset: 3,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: removedChildKey}],
+            offset: 3,
+          },
+        },
+      },
+      blockIndexMap: new Map([[blockKey, 0]]),
+    })
+
+    expect(range).toEqual({
+      anchor: {path: [0, 0], offset: 0},
+      focus: {path: [0, 0], offset: 0},
+    })
+  })
+
+  test("Scenario: Span offset that doesn't exist", () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockKey = keyGenerator()
+    const spanKey = keyGenerator()
+
+    const range = toSlateRange({
+      context: {
+        schema,
+        value: [
+          {
+            _key: blockKey,
+            _type: 'block',
+            children: [
+              {
+                _key: spanKey,
+                _type: 'span',
+                text: 'foo',
+              },
+            ],
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: spanKey}],
+            offset: 4,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: spanKey}],
+            offset: 4,
+          },
+        },
+      },
+      blockIndexMap: new Map([[blockKey, 0]]),
+    })
+
+    expect(range).toEqual({
+      anchor: {path: [0, 0], offset: 3},
+      focus: {path: [0, 0], offset: 3},
+    })
+  })
+
+  test("Scenario: Inline object offset that doesn't exist", () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockKey = keyGenerator()
+    const inlineObjectKey = keyGenerator()
+
+    const range = toSlateRange({
+      context: {
+        schema,
+        value: [
+          {
+            _key: blockKey,
+            _type: 'block',
+            children: [
+              {_key: keyGenerator(), _type: 'span', text: 'foo'},
+              {
+                _key: inlineObjectKey,
+                _type: 'stock-ticker',
+                symbol: 'AAPL',
+              },
+              {
+                _key: keyGenerator(),
+                _type: 'span',
+                text: 'bar',
+              },
+            ],
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: inlineObjectKey}],
+            offset: 3,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: inlineObjectKey}],
+            offset: 3,
+          },
+        },
+      },
+      blockIndexMap: new Map([[blockKey, 0]]),
+    })
+
+    expect(range).toEqual({
+      anchor: {path: [0, 1, 0], offset: 0},
+      focus: {path: [0, 1, 0], offset: 0},
+    })
+  })
+})

package/src/internal-utils/ranges.ts

@@ -1,37 +1,54 @@
-import {Point, type Editor, type Operation, type Range} from 'slate'
-import type {EditorSelection} from '../types/editor'
+import {Point, type Operation, type Range} from 'slate'
+import type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
+import {isSpan} from './parse-blocks'
 import {toSlatePath} from './paths'
 
-export interface ObjectWithKeyAndType {
-  _key: string
-  _type: string
-  children?: ObjectWithKeyAndType[]
-}
-
 export function toSlateRange(
-  selection: EditorSelection,
-  editor: Editor,
+  snapshot: {
+    context: Pick<EditorContext, 'schema' | 'value' | 'selection'>
+  } & Pick<EditorSnapshot, 'blockIndexMap'>,
 ): Range | null {
-  if (!selection || !editor) {
+  if (!snapshot.context.selection) {
     return null
   }
 
-  const anchor = {
-    path: toSlatePath(selection.anchor.path, editor),
-    offset: selection.anchor.offset,
-  }
-  const focus = {
-    path: toSlatePath(selection.focus.path, editor),
-    offset: selection.focus.offset,
-  }
+  const anchorPath = toSlatePath(
+    snapshot,
+    snapshot.context.selection.anchor.path,
+  )
+  const focusPath = toSlatePath(snapshot, snapshot.context.selection.focus.path)
 
-  if (focus.path.length === 0 || anchor.path.length === 0) {
+  if (anchorPath.path.length === 0 || focusPath.path.length === 0) {
     return null
   }
 
-  const range = anchor && focus ? {anchor, focus} : null
+  const anchorOffset = anchorPath.child
+    ? isSpan(snapshot.context, anchorPath.child)
+      ? Math.min(
+          anchorPath.child.text.length,
+          snapshot.context.selection.anchor.offset,
+        )
+      : 0
+    : 0
+  const focusOffset = focusPath.child
+    ? isSpan(snapshot.context, focusPath.child)
+      ? Math.min(
+          focusPath.child.text.length,
+          snapshot.context.selection.focus.offset,
+        )
+      : 0
+    : 0
 
-  return range
+  return {
+    anchor: {
+      path: anchorPath.path,
+      offset: anchorOffset,
+    },
+    focus: {
+      path: focusPath.path,
+      offset: focusOffset,
+    },
+  }
 }
 
 export function moveRangeByOperation(

package/src/internal-utils/test-editor.tsx

@@ -5,6 +5,7 @@ import {expect, vi} from 'vitest'
 import {render} from 'vitest-browser-react'
 import type {Editor} from '../editor'
 import {PortableTextEditable} from '../editor/Editable'
+import type {EditorActor} from '../editor/editor-machine'
 import {EditorProvider} from '../editor/editor-provider'
 import {
   defineSchema,
@@ -13,6 +14,9 @@ import {
 import type {EditorEmittedEvent} from '../editor/relay-machine'
 import {EditorRefPlugin} from '../plugins/plugin.editor-ref'
 import {EventListenerPlugin} from '../plugins/plugin.event-listener'
+import {InternalEditorAfterRefPlugin} from '../plugins/plugin.internal.editor-actor-ref'
+import {InternalSlateEditorRefPlugin} from '../plugins/plugin.internal.slate-editor-ref'
+import type {PortableTextSlateEditor} from '../types/editor'
 import {createTestKeyGenerator} from './test-key-generator'
 
 export async function createTestEditor(
@@ -23,6 +27,8 @@ export async function createTestEditor(
   } = {},
 ) {
   const editorRef = React.createRef<Editor>()
+  const editorActorRef = React.createRef<EditorActor>()
+  const slateRef = React.createRef<PortableTextSlateEditor>()
   const onEvent = vi.fn<() => EditorEmittedEvent>()
   const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
 
@@ -35,6 +41,8 @@ export async function createTestEditor(
       }}
     >
       <EditorRefPlugin ref={editorRef} />
+      <InternalEditorAfterRefPlugin ref={editorActorRef} />
+      <InternalSlateEditorRefPlugin ref={slateRef} />
       <EventListenerPlugin on={onEvent} />
       <PortableTextEditable />
     </EditorProvider>,
@@ -44,5 +52,12 @@ export async function createTestEditor(
 
   await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
 
-  return {editorRef, keyGenerator, locator, onEvent}
+  return {
+    editorActorRef,
+    editorRef,
+    keyGenerator,
+    locator,
+    onEvent,
+    slateRef,
+  }
 }

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

@@ -8,13 +8,17 @@ import type {BehaviorOperationImplementation} from './behavior.operations'
 export const blockSetOperationImplementation: BehaviorOperationImplementation<
   'block.set'
 > = ({context, operation}) => {
-  const location = toSlateRange(
-    {
-      anchor: {path: operation.at, offset: 0},
-      focus: {path: operation.at, offset: 0},
+  const location = toSlateRange({
+    context: {
+      schema: context.schema,
+      value: operation.editor.value,
+      selection: {
+        anchor: {path: operation.at, offset: 0},
+        focus: {path: operation.at, offset: 0},
+      },
     },
-    operation.editor,
-  )
+    blockIndexMap: operation.editor.blockIndexMap,
+  })
 
   if (!location) {
     throw new Error(

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

@@ -9,13 +9,17 @@ import type {BehaviorOperationImplementation} from './behavior.operations'
 export const blockUnsetOperationImplementation: BehaviorOperationImplementation<
   'block.unset'
 > = ({context, operation}) => {
-  const location = toSlateRange(
-    {
-      anchor: {path: operation.at, offset: 0},
-      focus: {path: operation.at, offset: 0},
+  const location = toSlateRange({
+    context: {
+      schema: context.schema,
+      value: operation.editor.value,
+      selection: {
+        anchor: {path: operation.at, offset: 0},
+        focus: {path: operation.at, offset: 0},
+      },
     },
-    operation.editor,
-  )
+    blockIndexMap: operation.editor.blockIndexMap,
+  })
 
   if (!location) {
     throw new Error(

package/src/operations/behavior.operation.child.set.ts

@@ -5,13 +5,17 @@ import type {BehaviorOperationImplementation} from './behavior.operations'
 export const childSetOperationImplementation: BehaviorOperationImplementation<
   'child.set'
 > = ({context, operation}) => {
-  const location = toSlateRange(
-    {
-      anchor: {path: operation.at, offset: 0},
-      focus: {path: operation.at, offset: 0},
+  const location = toSlateRange({
+    context: {
+      schema: context.schema,
+      value: operation.editor.value,
+      selection: {
+        anchor: {path: operation.at, offset: 0},
+        focus: {path: operation.at, offset: 0},
+      },
     },
-    operation.editor,
-  )
+    blockIndexMap: operation.editor.blockIndexMap,
+  })
 
   if (!location) {
     throw new Error(

package/src/operations/behavior.operation.child.unset.ts

@@ -6,13 +6,17 @@ import type {BehaviorOperationImplementation} from './behavior.operations'
 export const childUnsetOperationImplementation: BehaviorOperationImplementation<
   'child.unset'
 > = ({context, operation}) => {
-  const location = toSlateRange(
-    {
-      anchor: {path: operation.at, offset: 0},
-      focus: {path: operation.at, offset: 0},
+  const location = toSlateRange({
+    context: {
+      schema: context.schema,
+      value: operation.editor.value,
+      selection: {
+        anchor: {path: operation.at, offset: 0},
+        focus: {path: operation.at, offset: 0},
+      },
     },
-    operation.editor,
-  )
+    blockIndexMap: operation.editor.blockIndexMap,
+  })
 
   if (!location) {
     throw new Error(

package/src/operations/behavior.operation.decorator.add.ts

@@ -47,7 +47,14 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
       : undefined
 
   const selection = manualSelection
-    ? (toSlateRange(manualSelection, operation.editor) ?? editor.selection)
+    ? (toSlateRange({
+        context: {
+          schema: context.schema,
+          value: operation.editor.value,
+          selection: manualSelection,
+        },
+        blockIndexMap: operation.editor.blockIndexMap,
+      }) ?? editor.selection)
     : editor.selection
 
   if (!selection) {
@@ -109,10 +116,6 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
 
     const trimmedSelection = selectors.getTrimmedSelection({
       blockIndexMap: editor.blockIndexMap,
-      beta: {
-        activeAnnotations: [],
-        activeDecorators: [],
-      },
       context: {
         converters: [],
         keyGenerator: context.keyGenerator,
@@ -121,13 +124,21 @@ export const decoratorAddOperationImplementation: BehaviorOperationImplementatio
         selection: newSelection,
         value: newValue,
       },
+      decoratorState: editor.decoratorState,
     })
 
     if (!trimmedSelection) {
       throw new Error('Unable to find trimmed selection')
     }
 
-    const newRange = toSlateRange(trimmedSelection, editor)
+    const newRange = toSlateRange({
+      context: {
+        schema: context.schema,
+        value: operation.editor.value,
+        selection: trimmedSelection,
+      },
+      blockIndexMap: operation.editor.blockIndexMap,
+    })
 
     if (!newRange) {
       throw new Error('Unable to find new selection')

package/src/operations/behavior.operation.delete.ts

@@ -44,7 +44,14 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
     return
   }
 
-  const range = toSlateRange(operation.at, operation.editor)
+  const range = toSlateRange({
+    context: {
+      schema: context.schema,
+      value: operation.editor.value,
+      selection: operation.at,
+    },
+    blockIndexMap: operation.editor.blockIndexMap,
+  })
 
   if (!range) {
     throw new Error(