@portabletext/editor 3.2.2 → 3.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "3.2.2",
+  "version": "3.2.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -73,7 +73,7 @@
     "slate-dom": "^0.119.0",
     "slate-react": "0.120.0",
     "xstate": "^5.24.0",
-    "@portabletext/block-tools": "^4.1.4",
+    "@portabletext/block-tools": "^4.1.5",
     "@portabletext/keyboard-shortcuts": "^2.1.0",
     "@portabletext/patches": "^2.0.0",
     "@portabletext/schema": "^2.0.0"
@@ -81,8 +81,8 @@
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^10.0.0",
-    "@sanity/schema": "^4.20.0",
-    "@sanity/types": "^4.20.0",
+    "@sanity/schema": "^4.20.1",
+    "@sanity/types": "^4.20.1",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.20",
     "@types/lodash.startcase": "^4.4.9",
@@ -94,7 +94,7 @@
     "@vitest/browser-playwright": "^4.0.14",
     "@vitest/coverage-istanbul": "^4.0.14",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "^9.38.0",
+    "eslint": "^9.39.1",
     "eslint-formatter-gha": "^1.6.0",
     "eslint-plugin-react-hooks": "7.0.1",
     "jsdom": "^27.0.0",
@@ -102,18 +102,18 @@
     "react-dom": "^19.2.1",
     "rxjs": "^7.8.2",
     "typescript": "5.9.3",
-    "typescript-eslint": "^8.46.1",
+    "typescript-eslint": "^8.48.0",
     "vite": "^7.1.12",
     "vitest": "^4.0.14",
     "vitest-browser-react": "^2.0.2",
-    "@portabletext/sanity-bridge": "1.2.7",
+    "@portabletext/sanity-bridge": "1.2.8",
     "@portabletext/test": "^1.0.0",
     "racejar": "2.0.0"
   },
   "peerDependencies": {
-    "@portabletext/sanity-bridge": "^1.2.7",
-    "@sanity/schema": "^4.20.0",
-    "@sanity/types": "^4.20.0",
+    "@portabletext/sanity-bridge": "^1.2.8",
+    "@sanity/schema": "^4.20.1",
+    "@sanity/types": "^4.20.1",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/editor/plugins/createWithPortableTextMarkModel.ts

@@ -356,12 +356,16 @@ export function createWithPortableTextMarkModel(
               op.properties.focus.offset === 0 &&
               newFocusSpan.text.length === op.newProperties.focus.offset
 
-            // We only want to clear the decorator state if the caret is visually
-            // moving
+            // In the case of a collapsed selection moving to another collapsed
+            // selection, we only want to clear the decorator state if the
+            // caret is visually moving to a different span.
             if (!movedToNextSpan && !movedToPreviousSpan) {
               editor.decoratorState = {}
             }
           }
+        } else {
+          // In any other case, we want to clear the decorator state.
+          editor.decoratorState = {}
         }
       }
 

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

@@ -1,11 +1,18 @@
 import {isSpan, isTextBlock} from '@portabletext/schema'
-import {deleteText, Editor, Element, Range, Transforms} from 'slate'
+import {
+  deleteText,
+  Editor,
+  Element,
+  Path,
+  Point,
+  Range,
+  Transforms,
+  type NodeEntry,
+} from 'slate'
 import {DOMEditor} from 'slate-dom'
-import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import {toSlateRange} from '../internal-utils/to-slate-range'
 import {VOID_CHILD_KEY} from '../internal-utils/values'
 import type {PortableTextSlateEditor} from '../types/editor'
-import {getBlockKeyFromSelectionPoint} from '../utils/util.selection-point'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
 export const deleteOperationImplementation: BehaviorOperationImplementation<
@@ -20,41 +27,18 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
         },
         blockIndexMap: operation.editor.blockIndexMap,
       })
-    : undefined
+    : operation.editor.selection
 
-  const selection = operation.editor.selection
-    ? slateRangeToSelection({
-        schema: context.schema,
-        editor: operation.editor,
-        range: operation.editor.selection,
-      })
-    : undefined
+  if (!at) {
+    throw new Error('Unable to delete without a selection')
+  }
 
-  const reverse = operation.direction === 'backward'
-  const anchorPoint = operation.at?.anchor ?? selection?.anchor
-  const focusPoint = operation.at?.focus ?? selection?.focus
-  const startPoint = reverse ? focusPoint : anchorPoint
-  const endPoint = reverse ? anchorPoint : focusPoint
-  const startBlockKey = startPoint
-    ? getBlockKeyFromSelectionPoint(startPoint)
-    : undefined
-  const endBlockKey = endPoint
-    ? getBlockKeyFromSelectionPoint(endPoint)
-    : undefined
-  const startBlockIndex = startBlockKey
-    ? operation.editor.blockIndexMap.get(startBlockKey)
-    : undefined
-  const endBlockIndex = endBlockKey
-    ? operation.editor.blockIndexMap.get(endBlockKey)
-    : undefined
-  const startBlock = startBlockIndex
-    ? operation.editor.value.at(startBlockIndex)
-    : undefined
-  const endBlock = endBlockIndex
-    ? operation.editor.value.at(endBlockIndex)
-    : undefined
+  const [start, end] = Range.edges(at)
 
   if (operation.unit === 'block') {
+    const startBlockIndex = start.path.at(0)
+    const endBlockIndex = end.path.at(0)
+
     if (startBlockIndex === undefined || endBlockIndex === undefined) {
       throw new Error('Failed to get start or end block index')
     }
@@ -71,14 +55,8 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
   }
 
   if (operation.unit === 'child') {
-    const range = at ?? operation.editor.selection ?? undefined
-
-    if (!range) {
-      throw new Error('Unable to delete children without a selection')
-    }
-
     Transforms.removeNodes(operation.editor, {
-      at: range,
+      at,
       match: (node) =>
         (isSpan(context, node) && node._key !== VOID_CHILD_KEY) ||
         ('__inline' in node && node.__inline === true),
@@ -88,15 +66,9 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
   }
 
   if (operation.direction === 'backward' && operation.unit === 'line') {
-    const range = at ?? operation.editor.selection ?? undefined
-
-    if (!range) {
-      throw new Error('Unable to delete line without a selection')
-    }
-
     const parentBlockEntry = Editor.above(operation.editor, {
       match: (n) => Element.isElement(n) && Editor.isBlock(operation.editor, n),
-      at: range,
+      at,
     })
 
     if (parentBlockEntry) {
@@ -104,7 +76,7 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
       const parentElementRange = Editor.range(
         operation.editor,
         parentBlockPath,
-        range.anchor,
+        at.anchor,
       )
 
       const currentLineRange = findCurrentLineRange(
@@ -120,15 +92,9 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
   }
 
   if (operation.unit === 'word') {
-    const range = at ?? operation.editor.selection ?? undefined
-
-    if (!range) {
-      throw new Error('Unable to delete word without a selection')
-    }
-
-    if (Range.isCollapsed(range)) {
+    if (Range.isCollapsed(at)) {
       deleteText(operation.editor, {
-        at: range,
+        at,
         unit: 'word',
         reverse: operation.direction === 'backward',
       })
@@ -137,19 +103,122 @@ export const deleteOperationImplementation: BehaviorOperationImplementation<
     }
   }
 
+  const startBlock = Editor.above(operation.editor, {
+    match: (n) => Element.isElement(n) && Editor.isBlock(operation.editor, n),
+    at: start,
+    voids: false,
+  })
+  const endBlock = Editor.above(operation.editor, {
+    match: (n) => Element.isElement(n) && Editor.isBlock(operation.editor, n),
+    at: end,
+    voids: false,
+  })
+  const isAcrossBlocks =
+    startBlock && endBlock && !Path.equals(startBlock[1], endBlock[1])
+  const startNonEditable =
+    Editor.void(operation.editor, {at: start, mode: 'highest'}) ??
+    Editor.elementReadOnly(operation.editor, {at: start, mode: 'highest'})
+  const endNonEditable =
+    Editor.void(operation.editor, {at: end, mode: 'highest'}) ??
+    Editor.elementReadOnly(operation.editor, {at: end, mode: 'highest'})
+
+  const matches: NodeEntry[] = []
+  let lastPath: Path | undefined
+
+  for (const entry of Editor.nodes(operation.editor, {at, voids: false})) {
+    const [node, path] = entry
+
+    if (lastPath && Path.compare(path, lastPath) === 0) {
+      continue
+    }
+
+    if (
+      (Element.isElement(node) &&
+        (Editor.isVoid(operation.editor, node) ||
+          Editor.isElementReadOnly(operation.editor, node))) ||
+      (!Path.isCommon(path, start.path) && !Path.isCommon(path, end.path))
+    ) {
+      matches.push(entry)
+      lastPath = path
+    }
+  }
+
+  const pathRefs = Array.from(matches, ([, path]) =>
+    Editor.pathRef(operation.editor, path),
+  )
+  const startRef = Editor.pointRef(operation.editor, start)
+  const endRef = Editor.pointRef(operation.editor, end)
+
+  const endToEndSelection =
+    startBlock &&
+    endBlock &&
+    Point.equals(start, Editor.start(operation.editor, startBlock[1])) &&
+    Point.equals(end, Editor.end(operation.editor, endBlock[1]))
+
+  if (
+    endToEndSelection &&
+    isAcrossBlocks &&
+    !startNonEditable &&
+    !endNonEditable
+  ) {
+    if (!startNonEditable) {
+      const point = startRef.current!
+      const [node] = Editor.leaf(operation.editor, point)
+
+      if (node.text.length > 0) {
+        operation.editor.apply({
+          type: 'remove_text',
+          path: point.path,
+          offset: 0,
+          text: node.text,
+        })
+      }
+    }
+
+    for (const pathRef of pathRefs.reverse()) {
+      const path = pathRef.unref()
+
+      if (path) {
+        Transforms.removeNodes(operation.editor, {at: path, voids: false})
+      }
+    }
+
+    if (!endNonEditable) {
+      const point = endRef.current!
+      const [node] = Editor.leaf(operation.editor, point)
+      const {path} = point
+      const offset = 0
+      const text = node.text.slice(offset, end.offset)
+
+      if (text.length > 0) {
+        operation.editor.apply({type: 'remove_text', path, offset, text})
+      }
+    }
+
+    if (endRef.current && startRef.current) {
+      Transforms.removeNodes(operation.editor, {
+        at: endRef.current,
+        voids: false,
+      })
+    }
+
+    return
+  }
+
+  const reverse = operation.direction === 'backward'
   const hanging = reverse
-    ? endPoint
+    ? end
       ? isTextBlock(context, endBlock)
-        ? endPoint.offset === 0
+        ? end.offset === 0
         : true
       : false
-    : startPoint
+    : start
       ? isTextBlock(context, startBlock)
-        ? startPoint.offset === 0
+        ? start.offset === 0
         : true
       : false
 
-  if (at) {
+  if (operation.at) {
     deleteText(operation.editor, {
       at,
       hanging,

package/src/test/gherkin-parameter-types.ts

@@ -30,6 +30,10 @@ const parameterType = {
     name: 'decorator',
     matcher: /"(code|em|strong)"/,
   }),
+  direction: createParameterType<'forwards' | 'backwards'>({
+    name: 'direction',
+    matcher: /"(forwards|backwards)"/,
+  }),
   index: createParameterType({
     name: 'index',
     matcher: /"(\d)"/,
@@ -93,6 +97,7 @@ export const parameterTypes = [
   parameterType.blockObject,
   parameterType.button,
   parameterType.decorator,
+  parameterType.direction,
   parameterType.index,
   parameterType.inlineObject,
   parameterType.key,

package/src/test/vitest/step-definitions.tsx

@@ -227,6 +227,9 @@ export const stepDefinitions = [
       const previousSelection = context.editor.getSnapshot().context.selection
       await userEvent.keyboard(button)
 
+      // Small delay to allow the browser to process the event
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
       await vi.waitFor(() => {
         const currentSelection = context.editor.getSnapshot().context.selection
 
@@ -242,6 +245,9 @@ export const stepDefinitions = [
       const previousSelection = context.editorB.getSnapshot().context.selection
       await userEvent.keyboard(button)
 
+      // Small delay to allow the browser to process the event
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
       await vi.waitFor(() => {
         const currentSelection = context.editorB.getSnapshot().context.selection
 
@@ -258,6 +264,8 @@ export const stepDefinitions = [
         const previousSelection = context.editor.getSnapshot().context.selection
         await userEvent.keyboard(button)
 
+        await new Promise((resolve) => setTimeout(resolve, 50))
+
         await vi.waitFor(() => {
           const currentSelection =
             context.editor.getSnapshot().context.selection
@@ -277,6 +285,9 @@ export const stepDefinitions = [
           context.editorB.getSnapshot().context.selection
         await userEvent.keyboard(button)
 
+        // Small delay to allow the browser to process the event
+        await new Promise((resolve) => setTimeout(resolve, 50))
+
         await vi.waitFor(() => {
           const currentSelection =
             context.editorB.getSnapshot().context.selection
@@ -303,6 +314,9 @@ export const stepDefinitions = [
       const previousSelection = context.editor.getSnapshot().context.selection
       await userEvent.keyboard(shortcuts[shortcut])
 
+      // Small delay to allow the browser to process the event
+      await new Promise((resolve) => setTimeout(resolve, 50))
+
       await vi.waitFor(() => {
         const currentSelection = context.editor.getSnapshot().context.selection
 
@@ -471,6 +485,28 @@ export const stepDefinitions = [
       })
     })
   }),
+  When(
+    '{string} is selected {direction}',
+    async (
+      context: Context,
+      text: string,
+      direction: Parameter['direction'],
+    ) => {
+      await vi.waitFor(() => {
+        const selection = getTextSelection(
+          context.editor.getSnapshot().context,
+          text,
+        )
+        expect(selection).not.toBeNull()
+
+        context.editor.send({
+          type: 'select',
+          at:
+            direction === 'forwards' ? selection : reverseSelection(selection),
+        })
+      })
+    },
+  ),
   When(
     '{string} is selected backwards',
     async (context: Context, text: string) => {