@portabletext/editor 1.55.14 → 1.55.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.55.14",
+  "version": "1.55.16",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/behaviors/behavior.core.dnd.ts

@@ -320,6 +320,10 @@ export const coreDndBehaviors = [
           originEvent,
         },
       ) => [
+        raise({
+          type: 'select',
+          at: dropPosition,
+        }),
         ...(draggingEntireBlocks
           ? draggedBlocks.map((block) =>
               raise({
@@ -333,10 +337,6 @@ export const coreDndBehaviors = [
                 at: dragOrigin.selection,
               }),
             ]),
-        raise({
-          type: 'select',
-          at: dropPosition,
-        }),
         raise({
           type: 'insert.blocks',
           blocks: event.data,

package/src/editor/Editable.tsx

@@ -266,7 +266,14 @@ export const PortableTextEditable = forwardRef<
         debug(
           `Normalized selection from props ${JSON.stringify(normalizedSelection)}`,
         )
-        const slateRange = toSlateRange(normalizedSelection, slateEditor)
+        const slateRange = toSlateRange({
+          context: {
+            schema: editorActor.getSnapshot().context.schema,
+            value: slateEditor.value,
+            selection: normalizedSelection,
+          },
+          blockIndexMap: slateEditor.blockIndexMap,
+        })
         if (slateRange) {
           Transforms.select(slateEditor, slateRange)
           // Output selection here in those cases where the editor selection was the same, and there are no set_selection operations made.

package/src/editor/editor-dom.ts

@@ -45,7 +45,7 @@ function getBlockNodes(
     return []
   }
 
-  const range = toSlateRange(snapshot.context.selection, slateEditor)
+  const range = toSlateRange(snapshot)
 
   if (!range) {
     return []
@@ -76,7 +76,7 @@ function getChildNodes(
     return []
   }
 
-  const range = toSlateRange(snapshot.context.selection, slateEditor)
+  const range = toSlateRange(snapshot)
 
   if (!range) {
     return []
@@ -118,7 +118,7 @@ export function getSelectionDomNodes({
     }
   }
 
-  const range = toSlateRange(snapshot.context.selection, slateEditor)
+  const range = toSlateRange(snapshot)
 
   if (!range) {
     return {

package/src/editor/plugins/__tests__/withEditableAPIDelete.test.tsx

@@ -136,25 +136,22 @@ describe('plugin:withEditableAPI: .delete()', () => {
     await waitFor(() => {
       if (editorRef.current) {
         // New keys here confirms that a placeholder block has been created
-        expect(PortableTextEditor.getValue(editorRef.current))
-          .toMatchInlineSnapshot(`
-          [
-            {
-              "_key": "k2",
-              "_type": "myTestBlockType",
-              "children": [
-                {
-                  "_key": "k3",
-                  "_type": "span",
-                  "marks": [],
-                  "text": "",
-                },
-              ],
-              "markDefs": [],
-              "style": "normal",
-            },
-          ]
-        `)
+        expect(PortableTextEditor.getValue(editorRef.current)).toEqual([
+          {
+            _key: 'k2',
+            _type: 'myTestBlockType',
+            children: [
+              {
+                _key: 'k3',
+                _type: 'span',
+                marks: [],
+                text: '',
+              },
+            ],
+            markDefs: [],
+            style: 'normal',
+          },
+        ])
       }
     })
   })

package/src/editor/plugins/createWithEditableAPI.ts

@@ -15,6 +15,8 @@ import {
 } from 'slate'
 import type {DOMNode} from 'slate-dom'
 import {ReactEditor} from 'slate-react'
+import {buildIndexMaps} from '../../internal-utils/build-index-maps'
+import {createPlaceholderBlock} from '../../internal-utils/create-placeholder-block'
 import {debugWithName} from '../../internal-utils/debug'
 import {toSlateRange} from '../../internal-utils/ranges'
 import {
@@ -131,12 +133,21 @@ export function createEditableAPI(
       })
     },
     select: (selection: EditorSelection): void => {
-      const slateSelection = toSlateRange(selection, editor)
+      const slateSelection = toSlateRange({
+        context: {
+          schema: editorActor.getSnapshot().context.schema,
+          value: editor.value,
+          selection,
+        },
+        blockIndexMap: editor.blockIndexMap,
+      })
+
       if (slateSelection) {
         Transforms.select(editor, slateSelection)
       } else {
         Transforms.deselect(editor)
       }
+
       editor.onChange()
     },
     focusBlock: (): PortableTextBlock | undefined => {
@@ -312,10 +323,15 @@ export function createEditableAPI(
       PortableTextBlock | PortableTextChild | undefined,
       Path | undefined,
     ] => {
-      const slatePath = toSlateRange(
-        {focus: {path, offset: 0}, anchor: {path, offset: 0}},
-        editor,
-      )
+      const slatePath = toSlateRange({
+        context: {
+          schema: editorActor.getSnapshot().context.schema,
+          value: editor.value,
+          selection: {focus: {path, offset: 0}, anchor: {path, offset: 0}},
+        },
+        blockIndexMap: editor.blockIndexMap,
+      })
+
       if (slatePath) {
         const [block, blockPath] = Editor.node(
           editor,
@@ -432,7 +448,14 @@ export function createEditableAPI(
       options?: EditableAPIDeleteOptions,
     ): void => {
       if (selection) {
-        const range = toSlateRange(selection, editor)
+        const range = toSlateRange({
+          context: {
+            schema: editorActor.getSnapshot().context.schema,
+            value: editor.value,
+            selection,
+          },
+          blockIndexMap: editor.blockIndexMap,
+        })
         const hasRange =
           range && range.anchor.path.length > 0 && range.focus.path.length > 0
         if (!hasRange) {
@@ -481,8 +504,24 @@ export function createEditableAPI(
           // that would insert the placeholder into the actual value
           // which should remain empty)
           if (editor.children.length === 0) {
-            editor.children = [editor.pteCreateTextBlock({decorators: []})]
+            const placeholderBlock = createPlaceholderBlock(
+              editorActor.getSnapshot().context,
+            )
+            editor.children = [placeholderBlock]
+            editor.value = [placeholderBlock]
+
+            buildIndexMaps(
+              {
+                schema: editorActor.getSnapshot().context.schema,
+                value: editor.value,
+              },
+              {
+                blockIndexMap: editor.blockIndexMap,
+                listIndexMap: editor.listIndexMap,
+              },
+            )
           }
+
           editor.onChange()
         }
       }
@@ -540,8 +579,22 @@ export function createEditableAPI(
       selectionB: EditorSelection,
     ) => {
       // Convert the selections to Slate ranges
-      const rangeA = toSlateRange(selectionA, editor)
-      const rangeB = toSlateRange(selectionB, editor)
+      const rangeA = toSlateRange({
+        context: {
+          schema: editorActor.getSnapshot().context.schema,
+          value: editor.value,
+          selection: selectionA,
+        },
+        blockIndexMap: editor.blockIndexMap,
+      })
+      const rangeB = toSlateRange({
+        context: {
+          schema: editorActor.getSnapshot().context.schema,
+          value: editor.value,
+          selection: selectionB,
+        },
+        blockIndexMap: editor.blockIndexMap,
+      })
 
       // Make sure the ranges are valid
       const isValidRanges = Range.isRange(rangeA) && Range.isRange(rangeB)

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/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(