@portabletext/editor 2.12.1 → 2.12.3

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react22 from "react";
+import * as react12 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react12.JSX.Element;
 /**
  * @beta
  * Restrict the editor to one line. The plugin takes care of blocking
@@ -192,5 +192,5 @@ declare function MarkdownPlugin(props: {
  *
  * @deprecated Install the plugin from `@portabletext/plugin-one-line`
  */
-declare function OneLinePlugin(): react22.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

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.12.1",
+  "version": "2.12.3",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -84,11 +84,11 @@
     "slate": "0.118.1",
     "slate-dom": "^0.118.1",
     "slate-react": "0.117.4",
-    "xstate": "^5.21.0",
-    "@portabletext/block-tools": "^3.5.6",
+    "xstate": "^5.22.0",
+    "@portabletext/schema": "^1.2.0",
+    "@portabletext/block-tools": "^3.5.7",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/patches": "^1.1.8",
-    "@portabletext/schema": "^1.2.0"
+    "@portabletext/patches": "^1.1.8"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
@@ -116,12 +116,12 @@
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "@portabletext/sanity-bridge": "1.1.10",
+    "@portabletext/sanity-bridge": "1.1.11",
     "@portabletext/test": "^0.0.0",
-    "racejar": "1.2.15"
+    "racejar": "1.3.0"
   },
   "peerDependencies": {
-    "@portabletext/sanity-bridge": "^1.1.10",
+    "@portabletext/sanity-bridge": "^1.1.11",
     "@sanity/schema": "^4.9.0",
     "@sanity/types": "^4.9.0",
     "react": "^18.3 || ^19",

package/src/behaviors/behavior.abstract.keyboard.ts

@@ -6,6 +6,7 @@ import {
   getFocusInlineObject,
   getPreviousBlock,
   isSelectionCollapsed,
+  isSelectionExpanded,
 } from '../selectors'
 import {getBlockEndPoint, isEmptyTextBlock} from '../utils'
 import {raise} from './behavior.types.action'
@@ -37,6 +38,18 @@ export const abstractKeyboardBehaviors = [
     actions: [() => [raise({type: 'insert.break'})]],
   }),
 
+  /**
+   * On Firefox, Enter might collapse the selection. To mitigate this, we
+   * `raise` an `insert.break` event manually.
+   */
+  defineBehavior({
+    on: 'keyboard.keydown',
+    guard: ({snapshot, event}) =>
+      defaultKeyboardShortcuts.break.guard(event.originEvent) &&
+      isSelectionExpanded(snapshot),
+    actions: [() => [raise({type: 'insert.break'})]],
+  }),
+
   /**
    * On WebKit, Shift+Enter results in an `insertParagraph` input event rather
    * than an `insertLineBreak` input event. This Behavior makes sure we catch

package/src/behaviors/behavior.perform-event.ts

@@ -172,7 +172,11 @@ export function performEvent({
       nativeEventPrevented = true
     }
 
+    let actionSetIndex = -1
+
     for (const actionSet of eventBehavior.actions) {
+      actionSetIndex++
+
       const actionsSnapshot = getSnapshot()
 
       let actions: Array<BehaviorAction> = []
@@ -205,7 +209,17 @@ export function performEvent({
 
       let undoStepCreated = false
 
-      if (actions.some((action) => action.type === 'execute')) {
+      if (actionSetIndex > 0) {
+        // Since there are multiple action sets
+        createUndoStep(editor)
+
+        undoStepCreated = true
+      }
+
+      if (
+        !undoStepCreated &&
+        actions.some((action) => action.type === 'execute')
+      ) {
         // Since at least one action is about to `execute` changes in the editor,
         // we set up a new undo step.
         // All actions performed recursively from now will be squashed into this

package/src/editor/Editable.tsx

@@ -942,28 +942,8 @@ export const PortableTextEditable = forwardRef<
       } else if (forwardedRef) {
         forwardedRef.current = node
       }
-
-      if (node) {
-        // 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(() => {
-          validateSelection(slateEditor, node)
-        })
-
-        mutationObserver.observe(node, {
-          attributeOldValue: false,
-          attributes: false,
-          characterData: false,
-          childList: true,
-          subtree: true,
-        })
-
-        return () => {
-          mutationObserver.disconnect()
-        }
-      }
     },
-    [forwardedRef, slateEditor],
+    [forwardedRef],
   )
 
   if (!portableTextEditor) {
@@ -1007,72 +987,3 @@ export const PortableTextEditable = forwardRef<
 })
 
 PortableTextEditable.displayName = 'ForwardRef(PortableTextEditable)'
-
-// 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: Editor, activeElement: 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 (activeElement !== 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, [0, 0])
-    }
-    slateEditor.onChange()
-  }
-}

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

@@ -0,0 +1,76 @@
+import {compileSchema, defineSchema} from '@portabletext/schema'
+import {createTestKeyGenerator} from '@portabletext/test'
+import {describe, expect, test} from 'vitest'
+import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
+import {getMarkState} from './selector.get-mark-state'
+
+describe(getMarkState.name, () => {
+  test('Scenario: Caret after annotated decorator', () => {
+    const keyGenerator = createTestKeyGenerator()
+    const blockKey = keyGenerator()
+    const fooSpanKey = keyGenerator()
+    const barSpanKey = keyGenerator()
+    const bazSpanKey = keyGenerator()
+    const linkKey = keyGenerator()
+    const snapshot = createTestSnapshot({
+      context: {
+        keyGenerator,
+        value: [
+          {
+            _type: 'block',
+            _key: blockKey,
+            children: [
+              {
+                _type: 'span',
+                _key: fooSpanKey,
+                text: 'foo ',
+              },
+              {
+                _type: 'span',
+                _key: barSpanKey,
+                text: 'bar',
+                marks: [linkKey, 'strong'],
+              },
+              {
+                _type: 'span',
+                _key: bazSpanKey,
+                text: ' baz',
+              },
+            ],
+            markDefs: [
+              {
+                _type: 'link',
+                _key: linkKey,
+                href: 'https://portabletext.org',
+              },
+            ],
+            style: 'normal',
+          },
+        ],
+        selection: {
+          anchor: {
+            path: [{_key: blockKey}, 'children', {_key: bazSpanKey}],
+            offset: 0,
+          },
+          focus: {
+            path: [{_key: blockKey}, 'children', {_key: bazSpanKey}],
+            offset: 0,
+          },
+          backward: false,
+        },
+        schema: compileSchema(
+          defineSchema({
+            annotations: [{name: 'link'}],
+            decorators: [{name: 'strong'}],
+          }),
+        ),
+      },
+    })
+
+    expect(getMarkState(snapshot)).toEqual({
+      state: 'changed',
+      marks: [],
+      previousMarks: [linkKey, 'strong'],
+    })
+  })
+})

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

@@ -164,7 +164,7 @@ export const getMarkState: EditorSelector<MarkState | undefined> = (
     if (previousSpanHasAnnotations) {
       return {
         state: 'changed',
-        previousMarks: marks,
+        previousMarks: previousSpan.node.marks ?? [],
         marks: [],
       }
     } else {

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-z-,#>:\\n \d|{}'"‘’“”?—]*)"/u,
     type: Array,
     transform: parseTersePtString,
   }),

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

@@ -61,14 +61,7 @@ export const stepDefinitions = [
   }),
 
   Given('the editor is focused', async (context: Context) => {
-    context.editor.send({
-      type: 'focus',
-    })
-
-    await vi.waitFor(() => {
-      const selection = context.editor.getSnapshot().context.selection
-      expect(selection).not.toBeNull()
-    })
+    await userEvent.click(context.locator)
   }),
 
   Given(
@@ -181,6 +174,9 @@ export const stepDefinitions = [
   When('{string} is typed', async (context: Context, text: string) => {
     await userEvent.type(context.locator, text)
   }),
+  When('{string} is inserted', (context: Context, text: string) => {
+    context.editor.send({type: 'insert.text', text})
+  }),
   Then(
     '{terse-pt} is in block {key}',
     (context: Context, text: Array<string>, key: string) => {