@portabletext/editor 2.9.1 → 2.10.0

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/plugins/index.d.ts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.js";
-import * as react21 from "react";
+import * as react22 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react21.JSX.Element;
+}): react22.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(): react21.JSX.Element;
+declare function OneLinePlugin(): react22.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types9 from "@sanity/types";
+import * as _sanity_types8 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_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.9.1",
+  "version": "2.10.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,7 +79,7 @@
     "slate-dom": "^0.118.1",
     "slate-react": "0.117.4",
     "xstate": "^5.21.0",
-    "@portabletext/block-tools": "^3.5.5",
+    "@portabletext/block-tools": "^3.5.6",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
     "@portabletext/patches": "^1.1.8",
     "@portabletext/schema": "^1.2.0"
@@ -87,8 +87,8 @@
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^8.1.4",
-    "@sanity/schema": "^4.8.1",
-    "@sanity/types": "^4.8.1",
+    "@sanity/schema": "^4.9.0",
+    "@sanity/types": "^4.9.0",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.20",
     "@types/lodash.startcase": "^4.4.9",
@@ -110,14 +110,14 @@
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "@portabletext/sanity-bridge": "1.1.9",
+    "@portabletext/sanity-bridge": "1.1.10",
     "@portabletext/test": "^0.0.0",
     "racejar": "1.2.15"
   },
   "peerDependencies": {
-    "@portabletext/sanity-bridge": "^1.1.9",
-    "@sanity/schema": "^4.8.1",
-    "@sanity/types": "^4.8.1",
+    "@portabletext/sanity-bridge": "^1.1.10",
+    "@sanity/schema": "^4.9.0",
+    "@sanity/types": "^4.9.0",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2"
   },

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

@@ -1,4 +1,4 @@
-import {getFocusTextBlock} from '../selectors'
+import {getFocusTextBlock, getLastBlock} from '../selectors'
 import {
   getBlockEndPoint,
   getBlockStartPoint,
@@ -6,7 +6,7 @@ import {
   isEqualSelectionPoints,
 } from '../utils'
 import {sliceTextBlock} from '../utils/util.slice-text-block'
-import {execute, raise} from './behavior.types.action'
+import {raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractInsertBehaviors = [
@@ -328,23 +328,77 @@ export const abstractInsertBehaviors = [
     actions: [() => [raise({type: 'split'})]],
   }),
   defineBehavior({
-    on: 'insert.inline object',
+    on: 'insert.child',
+    guard: ({snapshot}) => {
+      const lastBlock = getLastBlock(snapshot)
+
+      if (!lastBlock) {
+        return false
+      }
+
+      if (snapshot.context.selection) {
+        return false
+      }
+
+      const lastBlockEndPoint = getBlockEndPoint({
+        context: snapshot.context,
+        block: lastBlock,
+      })
+
+      return {lastBlockEndPoint}
+    },
+    actions: [
+      ({event}, {lastBlockEndPoint}) => [
+        raise({
+          type: 'select',
+          at: {
+            anchor: lastBlockEndPoint,
+            focus: lastBlockEndPoint,
+          },
+        }),
+        raise(event),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.child',
+    guard: ({snapshot}) => {
+      const focusTextBlock = getFocusTextBlock(snapshot)
+
+      return snapshot.context.selection && !focusTextBlock
+    },
     actions: [
       ({snapshot, event}) => [
-        execute({
+        raise({
           type: 'insert.block',
           block: {
             _type: snapshot.context.schema.block.name,
             children: [
               {
-                _type: event.inlineObject.name,
-                ...event.inlineObject.value,
+                _type: snapshot.context.schema.span.name,
+                text: '',
+                marks: [],
               },
             ],
           },
           placement: 'auto',
           select: 'end',
         }),
+        raise(event),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.inline object',
+    actions: [
+      ({event}) => [
+        raise({
+          type: 'insert.child',
+          child: {
+            _type: event.inlineObject.name,
+            ...event.inlineObject.value,
+          },
+        }),
       ],
     ],
   }),
@@ -354,37 +408,68 @@ export const abstractInsertBehaviors = [
   }),
   defineBehavior({
     on: 'insert.span',
-    guard: ({snapshot, event}) => {
-      const markDefs =
-        event.annotations?.map((annotation) => ({
-          _type: annotation.name,
-          _key: snapshot.context.keyGenerator(),
-          ...annotation.value,
-        })) ?? []
-
-      return {markDefs}
-    },
+    guard: ({snapshot}) => !getFocusTextBlock(snapshot),
     actions: [
-      ({snapshot, event}, {markDefs}) => [
-        execute({
+      ({snapshot, event}) => [
+        raise({
           type: 'insert.block',
           block: {
             _type: snapshot.context.schema.block.name,
             children: [
               {
                 _type: snapshot.context.schema.span.name,
-                text: event.text,
-                marks: [
-                  ...(event.decorators ?? []),
-                  ...markDefs.map((markDef) => markDef._key),
-                ],
+                text: '',
+                marks: [],
               },
             ],
-            markDefs,
           },
           placement: 'auto',
           select: 'end',
         }),
+        raise(event),
+      ],
+    ],
+  }),
+  defineBehavior({
+    on: 'insert.span',
+    guard: ({snapshot, event}) => {
+      const focusTextBlock = getFocusTextBlock(snapshot)
+      const markDefs =
+        event.annotations?.map((annotation) => ({
+          _type: annotation.name,
+          _key: snapshot.context.keyGenerator(),
+          ...annotation.value,
+        })) ?? []
+
+      return {markDefs, focusTextBlock}
+    },
+    actions: [
+      ({snapshot, event}, {markDefs, focusTextBlock}) => [
+        ...(focusTextBlock
+          ? [
+              raise({
+                type: 'block.set',
+                at: focusTextBlock.path,
+                props: {
+                  markDefs: [
+                    ...(focusTextBlock.node.markDefs ?? []),
+                    ...markDefs,
+                  ],
+                },
+              }),
+            ]
+          : []),
+        raise({
+          type: 'insert.child',
+          child: {
+            _type: snapshot.context.schema.span.name,
+            text: event.text,
+            marks: [
+              ...(event.decorators ?? []),
+              ...markDefs.map((markDef) => markDef._key),
+            ],
+          },
+        }),
       ],
     ],
   }),

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

@@ -186,6 +186,7 @@ export const abstractSplitBehaviors = [
         }),
         context: snapshot.context,
         options: {
+          removeUnusedMarkDefs: true,
           validateFields: false,
         },
       })

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

@@ -1,8 +1,9 @@
 import {createEditorDom} from '../editor/editor-dom'
 import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
-import {withApplyingBehaviorOperations} from '../editor/with-applying-behavior-operations'
+import {withPerformingBehaviorOperation} from '../editor/with-performing-behavior-operation'
 import {clearUndoStep, createUndoStep} from '../editor/with-undo-step'
+import {withoutNormalizingConditional} from '../editor/without-normalizing-conditional'
 import {debugWithName} from '../internal-utils/debug'
 import {performOperation} from '../operations/behavior.operations'
 import type {PortableTextSlateEditor} from '../types/editor'
@@ -112,7 +113,7 @@ export function performEvent({
       clearUndoStep(editor)
     }
 
-    withApplyingBehaviorOperations(editor, () => {
+    withPerformingBehaviorOperation(editor, () => {
       debug(`(execute:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
       performOperation({
@@ -198,6 +199,8 @@ export function performEvent({
           (action) => action.type === 'raise' || action.type === 'execute',
         ) || !actions.some((action) => action.type === 'forward')
 
+      let undoStepCreated = false
+
       if (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.
@@ -205,139 +208,102 @@ export function performEvent({
         // undo step
         createUndoStep(editor)
 
-        for (const action of actions) {
-          if (action.type === 'effect') {
-            try {
-              action.effect({
-                send: sendBack,
-              })
-            } catch (error) {
-              console.error(
-                new Error(
-                  `Executing effect as a result of "${event.type}" failed due to: ${error.message}`,
-                ),
-              )
+        undoStepCreated = true
+      }
+
+      const actionTypes = actions.map((action) => action.type)
+      const uniqueActionTypes = new Set(actionTypes)
+
+      // The set of actions are all `raise` actions
+      const raiseGroup =
+        actionTypes.length > 1 &&
+        uniqueActionTypes.size === 1 &&
+        uniqueActionTypes.has('raise')
+
+      // The set of actions are all `execute` actions
+      const executeGroup =
+        actionTypes.length > 1 &&
+        uniqueActionTypes.size === 1 &&
+        uniqueActionTypes.has('execute')
+
+      withoutNormalizingConditional(
+        editor,
+        () => raiseGroup || executeGroup,
+        () => {
+          for (const action of actions) {
+            if (action.type === 'effect') {
+              try {
+                action.effect({
+                  send: sendBack,
+                })
+              } catch (error) {
+                console.error(
+                  new Error(
+                    `Executing effect as a result of "${event.type}" failed due to: ${error.message}`,
+                  ),
+                )
+              }
+
+              continue
             }
 
-            continue
-          }
+            if (action.type === 'forward') {
+              const remainingEventBehaviors = eventBehaviors.slice(
+                eventBehaviorIndex + 1,
+              )
 
-          if (action.type === 'forward') {
-            const remainingEventBehaviors = eventBehaviors.slice(
-              eventBehaviorIndex + 1,
-            )
+              performEvent({
+                mode: mode === 'execute' ? 'execute' : 'forward',
+                behaviors,
+                remainingEventBehaviors: remainingEventBehaviors,
+                event: action.event,
+                editor,
+                keyGenerator,
+                schema,
+                getSnapshot,
+                nativeEvent,
+                sendBack,
+              })
 
-            performEvent({
-              mode: 'forward',
-              behaviors,
-              remainingEventBehaviors: remainingEventBehaviors,
-              event: action.event,
-              editor,
-              keyGenerator,
-              schema,
-              getSnapshot,
-              nativeEvent,
-              sendBack,
-            })
+              continue
+            }
 
-            continue
-          }
+            if (action.type === 'raise') {
+              performEvent({
+                mode: mode === 'execute' ? 'execute' : 'raise',
+                behaviors,
+                remainingEventBehaviors:
+                  mode === 'execute' ? remainingEventBehaviors : behaviors,
+                event: action.event,
+                editor,
+                keyGenerator,
+                schema,
+                getSnapshot,
+                nativeEvent,
+                sendBack,
+              })
+
+              continue
+            }
 
-          if (action.type === 'raise') {
             performEvent({
-              mode: 'raise',
+              mode: 'execute',
               behaviors,
-              remainingEventBehaviors: behaviors,
+              remainingEventBehaviors: [],
               event: action.event,
               editor,
               keyGenerator,
               schema,
               getSnapshot,
-              nativeEvent,
+              nativeEvent: undefined,
               sendBack,
             })
-
-            continue
           }
+        },
+      )
 
-          performEvent({
-            mode: 'execute',
-            behaviors,
-            remainingEventBehaviors: [],
-            event: action.event,
-            editor,
-            keyGenerator,
-            schema,
-            getSnapshot,
-            nativeEvent: undefined,
-            sendBack,
-          })
-        }
-
+      if (undoStepCreated) {
         clearUndoStep(editor)
-
-        continue
-      }
-
-      for (const action of actions) {
-        if (action.type === 'effect') {
-          try {
-            action.effect({
-              send: sendBack,
-            })
-          } catch (error) {
-            console.error(
-              new Error(
-                `Executing effect as a result of "${event.type}" failed due to: ${error.message}`,
-              ),
-            )
-          }
-
-          continue
-        }
-
-        if (action.type === 'forward') {
-          const remainingEventBehaviors = eventBehaviors.slice(
-            eventBehaviorIndex + 1,
-          )
-
-          performEvent({
-            mode: 'forward',
-            behaviors,
-            remainingEventBehaviors: remainingEventBehaviors,
-            event: action.event,
-            editor,
-            keyGenerator,
-            schema,
-            getSnapshot,
-            nativeEvent,
-            sendBack,
-          })
-
-          continue
-        }
-
-        if (action.type === 'raise') {
-          performEvent({
-            mode: 'raise',
-            behaviors,
-            remainingEventBehaviors:
-              mode === 'execute' ? remainingEventBehaviors : behaviors,
-            event: action.event,
-            editor,
-            keyGenerator,
-            schema,
-            getSnapshot,
-            nativeEvent,
-            sendBack,
-          })
-
-          continue
-        }
-
-        if (action.type === 'execute') {
-          console.error('Unexpected action type: `execute`')
-        }
       }
     }
 
@@ -351,7 +317,7 @@ export function performEvent({
       clearUndoStep(editor)
     }
 
-    withApplyingBehaviorOperations(editor, () => {
+    withPerformingBehaviorOperation(editor, () => {
       debug(`(execute:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
       performOperation({

package/src/behaviors/behavior.types.event.ts

@@ -3,7 +3,10 @@ import type {EventPosition} from '../internal-utils/event-position'
 import type {MIMEType} from '../internal-utils/mime-type'
 import type {OmitFromUnion, PickFromUnion, StrictExtract} from '../type-utils'
 import type {BlockOffset} from '../types/block-offset'
-import type {BlockWithOptionalKey} from '../types/block-with-optional-key'
+import type {
+  BlockWithOptionalKey,
+  ChildWithOptionalKey,
+} from '../types/block-with-optional-key'
 import type {EditorSelection} from '../types/editor'
 import type {AnnotationPath, BlockPath, ChildPath} from '../types/paths'
 
@@ -72,6 +75,7 @@ const syntheticBehaviorEventTypes = [
   'history.redo',
   'history.undo',
   'insert.block',
+  'insert.child',
   'insert.text',
   'move.backward',
   'move.block',
@@ -159,6 +163,10 @@ export type SyntheticBehaviorEvent =
       placement: InsertPlacement
       select?: 'start' | 'end' | 'none'
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'insert.child'>
+      child: ChildWithOptionalKey
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>
       text: string

package/src/converters/converter.portable-text.ts

@@ -50,6 +50,7 @@ export const converterPortableText = defineConverter({
         context: snapshot.context,
         block,
         options: {
+          removeUnusedMarkDefs: true,
           validateFields: false,
         },
       })

package/src/converters/converter.text-html.ts

@@ -61,6 +61,7 @@ export function createConverterTextHtml(
           context: snapshot.context,
           block,
           options: {
+            removeUnusedMarkDefs: true,
             validateFields: false,
           },
         })

package/src/converters/converter.text-plain.ts

@@ -85,6 +85,7 @@ export function createConverterTextPlain(
           context: snapshot.context,
           block,
           options: {
+            removeUnusedMarkDefs: true,
             validateFields: false,
           },
         })

package/src/editor/Editable.tsx

@@ -461,6 +461,7 @@ export const PortableTextEditable = forwardRef<
                     },
                     blocks: result.insert,
                     options: {
+                      removeUnusedMarkDefs: true,
                       validateFields: false,
                     },
                   }),

package/src/editor/editor-selector.ts

@@ -1,5 +1,6 @@
 import {useSelector} from '@xstate/react'
 import type {Editor} from '../editor'
+import {slateRangeToSelection} from '../internal-utils/slate-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {InternalEditor} from './create-editor'
 import type {EditorActor} from './editor-machine'
@@ -65,6 +66,14 @@ export function getEditorSnapshot({
   editorActorSnapshot: ReturnType<EditorActor['getSnapshot']>
   slateEditorInstance: PortableTextSlateEditor
 }): EditorSnapshot {
+  const selection = slateEditorInstance.selection
+    ? slateRangeToSelection({
+        schema: editorActorSnapshot.context.schema,
+        editor: slateEditorInstance,
+        range: slateEditorInstance.selection,
+      })
+    : null
+
   return {
     blockIndexMap: slateEditorInstance.blockIndexMap,
     context: {
@@ -72,7 +81,7 @@ export function getEditorSnapshot({
       keyGenerator: editorActorSnapshot.context.keyGenerator,
       readOnly: editorActorSnapshot.matches({'edit mode': 'read only'}),
       schema: editorActorSnapshot.context.schema,
-      selection: editorActorSnapshot.context.selection,
+      selection,
       value: slateEditorInstance.value,
     },
     decoratorState: slateEditorInstance.decoratorState,