@portabletext/editor 2.9.2 → 2.11.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 react12 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;
-}): react12.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(): react12.JSX.Element;
+declare function OneLinePlugin(): react22.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 react22 from "react";
+import * as react21 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react22.JSX.Element;
+}): react21.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(): react21.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_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.2",
+  "version": "2.11.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,16 +79,16 @@
     "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/patches": "^1.1.8",
     "@portabletext/schema": "^1.2.0",
-    "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/patches": "^1.1.8"
+    "@portabletext/keyboard-shortcuts": "^1.1.1"
   },
   "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

@@ -3,6 +3,7 @@ import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
 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'
@@ -210,75 +211,96 @@ export function performEvent({
         undoStepCreated = true
       }
 
-      for (const action of actions) {
-        if (action.type === 'effect') {
-          try {
-            action.effect({
-              send: sendBack,
+      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
+            }
+
+            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,
+              })
+
+              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
+            }
+
+            performEvent({
+              mode: 'execute',
+              behaviors,
+              remainingEventBehaviors: [],
+              event: action.event,
+              editor,
+              keyGenerator,
+              schema,
+              getSnapshot,
+              nativeEvent: undefined,
+              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: mode === 'execute' ? 'execute' : 'forward',
-            behaviors,
-            remainingEventBehaviors: remainingEventBehaviors,
-            event: action.event,
-            editor,
-            keyGenerator,
-            schema,
-            getSnapshot,
-            nativeEvent,
-            sendBack,
-          })
-
-          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
-        }
-
-        performEvent({
-          mode: 'execute',
-          behaviors,
-          remainingEventBehaviors: [],
-          event: action.event,
-          editor,
-          keyGenerator,
-          schema,
-          getSnapshot,
-          nativeEvent: undefined,
-          sendBack,
-        })
-      }
+        },
+      )
 
       if (undoStepCreated) {
         clearUndoStep(editor)

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'
 
@@ -52,8 +55,7 @@ export type ExternalBehaviorEvent =
         value?: {[prop: string]: unknown}
       }
     }
-  | SyntheticBehaviorEvent
-  | CustomBehaviorEvent
+  | BehaviorEvent
 
 /**************************************
  * Synthetic events
@@ -72,6 +74,7 @@ const syntheticBehaviorEventTypes = [
   'history.redo',
   'history.undo',
   'insert.block',
+  'insert.child',
   'insert.text',
   'move.backward',
   'move.block',
@@ -159,6 +162,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,

package/src/editor/without-normalizing-conditional.ts

@@ -0,0 +1,13 @@
+import {Editor} from 'slate'
+
+export function withoutNormalizingConditional(
+  editor: Editor,
+  predicate: () => boolean,
+  fn: () => void,
+) {
+  if (predicate()) {
+    Editor.withoutNormalizing(editor, fn)
+  } else {
+    fn()
+  }
+}