@portabletext/editor 2.13.1 → 2.13.3

package/lib/selectors/index.d.cts

@@ -127,6 +127,9 @@ declare function getListIndex({
 }: {
   path: BlockPath;
 }): EditorSelector<number | undefined>;
+/**
+ * @beta
+ */
 type MarkState = {
   state: 'unchanged';
   marks: Array<string>;
@@ -319,4 +322,4 @@ declare const isSelectionCollapsed: EditorSelector<boolean>;
  * @public
  */
 declare const isSelectionExpanded: EditorSelector<boolean>;
-export { getActiveAnnotations, getActiveListItem, getActiveStyle, getAnchorBlock, getAnchorChild, getAnchorSpan, getAnchorTextBlock, getBlockOffsets, getBlockTextBefore, getCaretWordSelection, getFirstBlock, getFocusBlock, getFocusBlockObject, getFocusChild, getFocusInlineObject, getFocusListBlock, getFocusSpan, getFocusTextBlock, getLastBlock, getListIndex, getMarkState, getNextBlock, getNextInlineObject, getPreviousBlock, getPreviousInlineObject, getSelectedBlocks, getSelectedSlice, getSelectedSpans, getSelectedTextBlocks, getSelectedValue, getSelection, getSelectionEndBlock, getSelectionEndChild, getSelectionEndPoint, getSelectionStartBlock, getSelectionStartChild, getSelectionStartPoint, getSelectionText, getTrimmedSelection, getValue, isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, isAtTheEndOfBlock, isAtTheStartOfBlock, isOverlappingSelection, isPointAfterSelection, isPointBeforeSelection, isSelectingEntireBlocks, isSelectionCollapsed, isSelectionExpanded };
+export { MarkState, getActiveAnnotations, getActiveListItem, getActiveStyle, getAnchorBlock, getAnchorChild, getAnchorSpan, getAnchorTextBlock, getBlockOffsets, getBlockTextBefore, getCaretWordSelection, getFirstBlock, getFocusBlock, getFocusBlockObject, getFocusChild, getFocusInlineObject, getFocusListBlock, getFocusSpan, getFocusTextBlock, getLastBlock, getListIndex, getMarkState, getNextBlock, getNextInlineObject, getPreviousBlock, getPreviousInlineObject, getSelectedBlocks, getSelectedSlice, getSelectedSpans, getSelectedTextBlocks, getSelectedValue, getSelection, getSelectionEndBlock, getSelectionEndChild, getSelectionEndPoint, getSelectionStartBlock, getSelectionStartChild, getSelectionStartPoint, getSelectionText, getTrimmedSelection, getValue, isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, isAtTheEndOfBlock, isAtTheStartOfBlock, isOverlappingSelection, isPointAfterSelection, isPointBeforeSelection, isSelectingEntireBlocks, isSelectionCollapsed, isSelectionExpanded };

package/lib/selectors/index.d.ts

@@ -127,6 +127,9 @@ declare function getListIndex({
 }: {
   path: BlockPath;
 }): EditorSelector<number | undefined>;
+/**
+ * @beta
+ */
 type MarkState = {
   state: 'unchanged';
   marks: Array<string>;
@@ -319,4 +322,4 @@ declare const isSelectionCollapsed: EditorSelector<boolean>;
  * @public
  */
 declare const isSelectionExpanded: EditorSelector<boolean>;
-export { getActiveAnnotations, getActiveListItem, getActiveStyle, getAnchorBlock, getAnchorChild, getAnchorSpan, getAnchorTextBlock, getBlockOffsets, getBlockTextBefore, getCaretWordSelection, getFirstBlock, getFocusBlock, getFocusBlockObject, getFocusChild, getFocusInlineObject, getFocusListBlock, getFocusSpan, getFocusTextBlock, getLastBlock, getListIndex, getMarkState, getNextBlock, getNextInlineObject, getPreviousBlock, getPreviousInlineObject, getSelectedBlocks, getSelectedSlice, getSelectedSpans, getSelectedTextBlocks, getSelectedValue, getSelection, getSelectionEndBlock, getSelectionEndChild, getSelectionEndPoint, getSelectionStartBlock, getSelectionStartChild, getSelectionStartPoint, getSelectionText, getTrimmedSelection, getValue, isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, isAtTheEndOfBlock, isAtTheStartOfBlock, isOverlappingSelection, isPointAfterSelection, isPointBeforeSelection, isSelectingEntireBlocks, isSelectionCollapsed, isSelectionExpanded };
+export { MarkState, getActiveAnnotations, getActiveListItem, getActiveStyle, getAnchorBlock, getAnchorChild, getAnchorSpan, getAnchorTextBlock, getBlockOffsets, getBlockTextBefore, getCaretWordSelection, getFirstBlock, getFocusBlock, getFocusBlockObject, getFocusChild, getFocusInlineObject, getFocusListBlock, getFocusSpan, getFocusTextBlock, getLastBlock, getListIndex, getMarkState, getNextBlock, getNextInlineObject, getPreviousBlock, getPreviousInlineObject, getSelectedBlocks, getSelectedSlice, getSelectedSpans, getSelectedTextBlocks, getSelectedValue, getSelection, getSelectionEndBlock, getSelectionEndChild, getSelectionEndPoint, getSelectionStartBlock, getSelectionStartChild, getSelectionStartPoint, getSelectionText, getTrimmedSelection, getValue, isActiveAnnotation, isActiveDecorator, isActiveListItem, isActiveStyle, isAtTheEndOfBlock, isAtTheStartOfBlock, isOverlappingSelection, isPointAfterSelection, isPointBeforeSelection, isSelectingEntireBlocks, isSelectionCollapsed, isSelectionExpanded };

package/lib/utils/index.d.cts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.cjs";
-import * as _sanity_types8 from "@sanity/types";
+import * as _sanity_types9 from "@sanity/types";
 import { KeyedSegment, PortableTextBlock, PortableTextTextBlock } from "@sanity/types";
 import { isSpan, isTextBlock } from "@portabletext/schema";
 /**
@@ -143,7 +143,7 @@ declare function mergeTextBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>;
   targetBlock: PortableTextTextBlock;
   incomingBlock: PortableTextTextBlock;
-}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.13.1",
+  "version": "2.13.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -85,16 +85,16 @@
     "slate-dom": "^0.118.1",
     "slate-react": "0.117.4",
     "xstate": "^5.22.0",
-    "@portabletext/block-tools": "^3.5.7",
-    "@portabletext/keyboard-shortcuts": "^1.1.1",
+    "@portabletext/block-tools": "^3.5.8",
     "@portabletext/patches": "^1.1.8",
-    "@portabletext/schema": "^1.2.0"
+    "@portabletext/schema": "^1.2.0",
+    "@portabletext/keyboard-shortcuts": "^1.1.1"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^8.1.14",
-    "@sanity/schema": "^4.9.0",
-    "@sanity/types": "^4.9.0",
+    "@sanity/schema": "^4.10.1",
+    "@sanity/types": "^4.10.1",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.20",
     "@types/lodash.startcase": "^4.4.9",
@@ -116,14 +116,14 @@
     "vite": "^7.1.7",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "@portabletext/sanity-bridge": "1.1.11",
-    "racejar": "1.3.0",
-    "@portabletext/test": "^0.0.0"
+    "@portabletext/sanity-bridge": "1.1.12",
+    "@portabletext/test": "^0.0.0",
+    "racejar": "1.3.0"
   },
   "peerDependencies": {
-    "@portabletext/sanity-bridge": "^1.1.11",
-    "@sanity/schema": "^4.9.0",
-    "@sanity/types": "^4.9.0",
+    "@portabletext/sanity-bridge": "^1.1.12",
+    "@sanity/schema": "^4.10.1",
+    "@sanity/types": "^4.10.1",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2"
   },

package/src/editor/Editable.tsx

@@ -51,6 +51,7 @@ import {usePortableTextEditor} from './hooks/usePortableTextEditor'
 import {createWithHotkeys} from './plugins/createWithHotKeys'
 import {rangeDecorationsMachine} from './range-decorations-machine'
 import {RelayActorContext} from './relay-actor-context'
+import {validateSelectionMachine} from './validate-selection-machine'
 
 const debug = debugWithName('component:Editable')
 
@@ -142,6 +143,11 @@ export const PortableTextEditable = forwardRef<
     s.matches({'edit mode': 'read only'}),
   )
   const slateEditor = useSlate()
+  const validateSelectionActor = useActorRef(validateSelectionMachine, {
+    input: {
+      slateEditor,
+    },
+  })
 
   const rangeDecorationsActor = useActorRef(rangeDecorationsMachine, {
     input: {
@@ -936,14 +942,37 @@ export const PortableTextEditable = forwardRef<
   )
 
   const callbackRef = useCallback(
-    (node: HTMLDivElement | null) => {
+    (editorElement: HTMLDivElement | null) => {
       if (typeof forwardedRef === 'function') {
-        forwardedRef(node)
+        forwardedRef(editorElement)
       } else if (forwardedRef) {
-        forwardedRef.current = node
+        forwardedRef.current = editorElement
+      }
+
+      if (editorElement) {
+        // Observe mutations (child list and subtree) to this component's DOM,
+        // and make sure the editor selection is valid when that happens.
+        const mutationObserver = new MutationObserver(() => {
+          validateSelectionActor.send({
+            type: 'validate selection',
+            editorElement,
+          })
+        })
+
+        mutationObserver.observe(editorElement, {
+          attributeOldValue: false,
+          attributes: false,
+          characterData: false,
+          childList: true,
+          subtree: true,
+        })
+
+        return () => {
+          mutationObserver.disconnect()
+        }
       }
     },
-    [forwardedRef],
+    [forwardedRef, validateSelectionActor],
   )
 
   if (!portableTextEditor) {

package/src/editor/validate-selection-machine.test.ts

@@ -0,0 +1,47 @@
+import {getTersePt} from '@portabletext/test'
+import {userEvent} from '@vitest/browser/context'
+import {describe, expect, test, vi} from 'vitest'
+import {getSelectionAfterText} from '../internal-utils/text-selection'
+import {createTestEditor} from '../test/vitest'
+import {validateSelectionMachine} from './validate-selection-machine'
+
+describe(validateSelectionMachine.id, () => {
+  test('Scenario: Does not validate selection while Slate has pending operations', async () => {
+    const {editor, locator} = await createTestEditor()
+
+    await userEvent.click(locator)
+
+    editor.send({type: 'insert.text', text: 'foo'})
+
+    await vi.waitFor(() => {
+      expect(getTersePt(editor.getSnapshot().context)).toEqual(['foo'])
+      expect(editor.getSnapshot().context.selection).toEqual(
+        getSelectionAfterText(editor.getSnapshot().context, 'foo'),
+      )
+    })
+
+    // This event is being sent in before "foo" has been inserted in the DOM
+    // This means that when the MutationObserver is finally triggered for the
+    // "foo" insertion, "bar" will be in the Slate state but not in the DOM.
+    // This causes the selection to be out of sync and this is why we need to
+    // make sure the selection is not validated before Slate has committed all
+    // pending operations.
+    editor.send({type: 'insert.text', text: 'bar'})
+
+    await vi.waitFor(() => {
+      expect(getTersePt(editor.getSnapshot().context)).toEqual(['foobar'])
+      expect(editor.getSnapshot().context.selection).toEqual(
+        getSelectionAfterText(editor.getSnapshot().context, 'foobar'),
+      )
+    })
+
+    editor.send({type: 'delete.backward', unit: 'character'})
+
+    await vi.waitFor(() => {
+      expect(getTersePt(editor.getSnapshot().context)).toEqual(['fooba'])
+      expect(editor.getSnapshot().context.selection).toEqual(
+        getSelectionAfterText(editor.getSnapshot().context, 'fooba'),
+      )
+    })
+  })
+})

package/src/editor/validate-selection-machine.ts

@@ -0,0 +1,149 @@
+import {Editor, Transforms} from 'slate'
+import {ReactEditor} from 'slate-react'
+import {setup} from 'xstate'
+import {debugWithName} from '../internal-utils/debug'
+import type {PortableTextSlateEditor} from '../types/editor'
+
+const debug = debugWithName('validate selection machine')
+
+const validateSelectionSetup = setup({
+  types: {
+    context: {} as {
+      slateEditor: PortableTextSlateEditor
+    },
+    input: {} as {
+      slateEditor: PortableTextSlateEditor
+    },
+    events: {} as {
+      type: 'validate selection'
+      editorElement: HTMLDivElement
+    },
+  },
+  guards: {
+    'pending operations': ({context}) =>
+      context.slateEditor.operations.length > 0,
+  },
+})
+
+const validateSelectionAction = validateSelectionSetup.createAction(
+  ({context, event}) => {
+    validateSelection(context.slateEditor, event.editorElement)
+  },
+)
+
+export const validateSelectionMachine = validateSelectionSetup.createMachine({
+  id: 'validate selection',
+  context: ({input}) => ({
+    slateEditor: input.slateEditor,
+  }),
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        'validate selection': [
+          {
+            guard: 'pending operations',
+            target: 'waiting',
+          },
+          {
+            actions: [validateSelectionAction],
+            target: 'idle',
+          },
+        ],
+      },
+    },
+    waiting: {
+      after: {
+        0: [
+          {
+            guard: 'pending operations',
+            target: '.',
+            reenter: true,
+          },
+          {
+            target: 'idle',
+            actions: [validateSelectionAction],
+          },
+        ],
+      },
+      on: {
+        'validate selection': {
+          target: '.',
+          reenter: true,
+        },
+      },
+    },
+  },
+})
+
+// This function will handle unexpected DOM changes inside the Editable rendering,
+// and make sure that we can maintain a stable slateEditor.selection when that happens.
+//
+// For example, if this Editable is rendered inside something that might re-render
+// this component (hidden contexts) while the user is still actively changing the
+// contentEditable, this could interfere with the intermediate DOM selection,
+// which again could be picked up by ReactEditor's event listeners.
+// If that range is invalid at that point, the slate.editorSelection could be
+// set either wrong, or invalid, to which slateEditor will throw exceptions
+// that are impossible to recover properly from or result in a wrong selection.
+//
+// Also the other way around, when the ReactEditor will try to create a DOM Range
+// from the current slateEditor.selection, it may throw unrecoverable errors
+// if the current editor.selection is invalid according to the DOM.
+// If this is the case, default to selecting the top of the document, if the
+// user already had a selection.
+function validateSelection(
+  slateEditor: PortableTextSlateEditor,
+  editorElement: HTMLDivElement,
+) {
+  if (!slateEditor.selection) {
+    return
+  }
+
+  let root: Document | ShadowRoot | undefined
+
+  try {
+    root = ReactEditor.findDocumentOrShadowRoot(slateEditor)
+  } catch {}
+
+  if (!root) {
+    // The editor has most likely been unmounted
+    return
+  }
+
+  // Return if the editor isn't the active element
+  if (editorElement !== root.activeElement) {
+    return
+  }
+  const window = ReactEditor.getWindow(slateEditor)
+  const domSelection = window.getSelection()
+  if (!domSelection || domSelection.rangeCount === 0) {
+    return
+  }
+  const existingDOMRange = domSelection.getRangeAt(0)
+  try {
+    const newDOMRange = ReactEditor.toDOMRange(
+      slateEditor,
+      slateEditor.selection,
+    )
+    if (
+      newDOMRange.startOffset !== existingDOMRange.startOffset ||
+      newDOMRange.endOffset !== existingDOMRange.endOffset
+    ) {
+      debug('DOM range out of sync, validating selection')
+      // Remove all ranges temporary
+      domSelection?.removeAllRanges()
+      // Set the correct range
+      domSelection.addRange(newDOMRange)
+    }
+  } catch {
+    debug(`Could not resolve selection, selecting top document`)
+    // Deselect the editor
+    Transforms.deselect(slateEditor)
+    // Select top document if there is a top block to select
+    if (slateEditor.children.length > 0) {
+      Transforms.select(slateEditor, Editor.start(slateEditor, []))
+    }
+    slateEditor.onChange()
+  }
+}

package/src/selectors/index.ts

@@ -17,7 +17,7 @@ export {getFocusSpan} from './selector.get-focus-span'
 export {getFocusTextBlock} from './selector.get-focus-text-block'
 export {getLastBlock} from './selector.get-last-block'
 export {getListIndex} from './selector.get-list-state'
-export {getMarkState} from './selector.get-mark-state'
+export {getMarkState, type MarkState} from './selector.get-mark-state'
 export {getNextBlock} from './selector.get-next-block'
 export {getNextInlineObject} from './selector.get-next-inline-object'
 export {getPreviousBlock} from './selector.get-previous-block'

package/src/selectors/selector.get-mark-state.ts

@@ -8,6 +8,9 @@ import {getNextSpan} from './selector.get-next-span'
 import {getPreviousSpan} from './selector.get-previous-span'
 import {getSelectedSpans} from './selector.get-selected-spans'
 
+/**
+ * @beta
+ */
 export type MarkState =
   | {
       state: 'unchanged'

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

@@ -70,7 +70,7 @@ const parameterType = {
   }),
   tersePt: createParameterType<Array<string>>({
     name: 'terse-pt',
-    matcher: /"([a-z-,#>:\\n \d|{}'"‘’“”?—]*)"/u,
+    matcher: /"([A-Za-z-,#>:\\n \d|{}()'"‘’“”?—.…→©]*)"/u,
     type: Array,
     transform: parseTersePtString,
   }),