@portabletext/editor 2.7.1 → 2.8.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 react21 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.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(): react12.JSX.Element;
+declare function OneLinePlugin(): react21.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/selectors/index.d.cts

@@ -242,9 +242,19 @@ declare const getTrimmedSelection: EditorSelector<EditorSelection>;
  */
 declare const getValue: EditorSelector<Array<PortableTextBlock>>;
 /**
- * @public
- */
-declare function isActiveAnnotation(annotation: string): EditorSelector<boolean>;
+ * Check whether an annotation is active in the given `snapshot`.
+ *
+ * @public
+ */
+declare function isActiveAnnotation(annotation: string, options?: {
+  /**
+   * Choose whether the annotation has to take up the entire selection in the
+   * `snapshot` or if the annotation can be partially selected.
+   *
+   * Defaults to 'full'
+   */
+  mode?: 'partial' | 'full';
+}): EditorSelector<boolean>;
 /**
  * @public
  */

package/lib/selectors/index.d.ts

@@ -242,9 +242,19 @@ declare const getTrimmedSelection: EditorSelector<EditorSelection>;
  */
 declare const getValue: EditorSelector<Array<PortableTextBlock>>;
 /**
- * @public
- */
-declare function isActiveAnnotation(annotation: string): EditorSelector<boolean>;
+ * Check whether an annotation is active in the given `snapshot`.
+ *
+ * @public
+ */
+declare function isActiveAnnotation(annotation: string, options?: {
+  /**
+   * Choose whether the annotation has to take up the entire selection in the
+   * `snapshot` or if the annotation can be partially selected.
+   *
+   * Defaults to 'full'
+   */
+  mode?: 'partial' | 'full';
+}): EditorSelector<boolean>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.7.1",
+  "version": "2.8.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -71,7 +71,7 @@
     "@xstate/react": "^6.0.0",
     "debug": "^4.4.1",
     "get-random-values-esm": "^1.0.2",
-    "immer": "^10.1.1",
+    "immer": "^10.1.3",
     "lodash": "^4.17.21",
     "lodash.startcase": "^4.4.0",
     "react-compiler-runtime": "19.1.0-rc.3",
@@ -79,17 +79,16 @@
     "slate-dom": "^0.118.1",
     "slate-react": "0.117.4",
     "xstate": "^5.21.0",
-    "@portabletext/block-tools": "^3.5.1",
-    "@portabletext/keyboard-shortcuts": "^1.1.1",
+    "@portabletext/block-tools": "^3.5.3",
     "@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.4",
-    "@sanity/schema": "^4.6.0",
-    "@sanity/types": "^4.6.0",
-    "@testing-library/react": "^16.3.0",
+    "@sanity/schema": "^4.6.1",
+    "@sanity/types": "^4.6.1",
     "@types/debug": "^4.1.12",
     "@types/lodash": "^4.17.20",
     "@types/lodash.startcase": "^4.4.9",
@@ -111,14 +110,14 @@
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
-    "@portabletext/sanity-bridge": "1.1.7",
     "@portabletext/test": "^0.0.0",
-    "racejar": "1.2.14"
+    "racejar": "1.2.15",
+    "@portabletext/sanity-bridge": "1.1.8"
   },
   "peerDependencies": {
-    "@portabletext/sanity-bridge": "^1.1.7",
-    "@sanity/schema": "^4.6.0",
-    "@sanity/types": "^4.6.0",
+    "@portabletext/sanity-bridge": "^1.1.8",
+    "@sanity/schema": "^4.6.1",
+    "@sanity/types": "^4.6.1",
     "react": "^18.3 || ^19",
     "rxjs": "^7.8.2"
   },

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

@@ -1,6 +1,6 @@
 import {getFocusTextBlock} from '../selectors'
 import {isEmptyTextBlock} from '../utils'
-import {raise} from './behavior.types.action'
+import {execute, raise} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export const abstractInsertBehaviors = [
@@ -129,8 +129,65 @@ export const abstractInsertBehaviors = [
     on: 'insert.break',
     actions: [() => [raise({type: 'split'})]],
   }),
+  defineBehavior({
+    on: 'insert.inline object',
+    actions: [
+      ({snapshot, event}) => [
+        execute({
+          type: 'insert.block',
+          block: {
+            _type: snapshot.context.schema.block.name,
+            children: [
+              {
+                _type: event.inlineObject.name,
+                ...event.inlineObject.value,
+              },
+            ],
+          },
+          placement: 'auto',
+          select: 'end',
+        }),
+      ],
+    ],
+  }),
   defineBehavior({
     on: 'insert.soft break',
     actions: [() => [raise({type: 'insert.text', text: '\n'})]],
   }),
+  defineBehavior({
+    on: 'insert.span',
+    guard: ({snapshot, event}) => {
+      const markDefs =
+        event.annotations?.map((annotation) => ({
+          _type: annotation.name,
+          _key: snapshot.context.keyGenerator(),
+          ...annotation.value,
+        })) ?? []
+
+      return {markDefs}
+    },
+    actions: [
+      ({snapshot, event}, {markDefs}) => [
+        execute({
+          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),
+                ],
+              },
+            ],
+            markDefs,
+          },
+          placement: 'auto',
+          select: 'end',
+        }),
+      ],
+    ],
+  }),
 ]

package/src/behaviors/behavior.core.annotations.ts

@@ -34,6 +34,28 @@ const addAnnotationOnCollapsedSelection = defineBehavior({
   ],
 })
 
-export const coreAnnotationBehaviors = {
+/**
+ * By default, same-type annotations can overlap. This Core Behavior ensures
+ * that annotations of the same type are mutually exclusive.
+ */
+const preventOverlappingAnnotations = defineBehavior({
+  // Given an `annotation.add` event
+  on: 'annotation.add',
+  // When the annotation is active in the selection
+  guard: ({snapshot, event}) =>
+    selectors.isActiveAnnotation(event.annotation.name, {mode: 'partial'})(
+      snapshot,
+    ),
+  // Then the existing annotation is removed
+  actions: [
+    ({event}) => [
+      raise({type: 'annotation.remove', annotation: event.annotation}),
+      raise(event),
+    ],
+  ],
+})
+
+export const coreAnnotationBehaviors = [
   addAnnotationOnCollapsedSelection,
-}
+  preventOverlappingAnnotations,
+]

package/src/behaviors/behavior.core.ts

@@ -7,7 +7,7 @@ import {coreInsertBreakBehaviors} from './behavior.core.insert-break'
 import {coreListBehaviors} from './behavior.core.lists'
 
 export const coreBehaviorsConfig = [
-  coreAnnotationBehaviors.addAnnotationOnCollapsedSelection,
+  ...coreAnnotationBehaviors,
   coreDecoratorBehaviors.strongShortcut,
   coreDecoratorBehaviors.emShortcut,
   coreDecoratorBehaviors.underlineShortcut,

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

@@ -71,9 +71,7 @@ const syntheticBehaviorEventTypes = [
   'delete',
   'history.redo',
   'history.undo',
-  'insert.inline object',
   'insert.block',
-  'insert.span',
   'insert.text',
   'move.backward',
   'move.block',
@@ -155,28 +153,12 @@ export type SyntheticBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'history.undo'>
     }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'insert.inline object'>
-      inlineObject: {
-        name: string
-        value?: {[prop: string]: unknown}
-      }
-    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.block'>
       block: BlockWithOptionalKey
       placement: InsertPlacement
       select?: 'start' | 'end' | 'none'
     }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'insert.span'>
-      text: string
-      annotations?: Array<{
-        name: string
-        value: {[prop: string]: unknown}
-      }>
-      decorators?: Array<string>
-    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>
       text: string
@@ -238,7 +220,9 @@ const abstractBehaviorEventTypes = [
   'deserialization.failure',
   'insert.blocks',
   'insert.break',
+  'insert.inline object',
   'insert.soft break',
+  'insert.span',
   'list item.add',
   'list item.remove',
   'list item.toggle',
@@ -392,9 +376,25 @@ type AbstractBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.break'>
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'insert.inline object'>
+      inlineObject: {
+        name: string
+        value?: {[prop: string]: unknown}
+      }
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.soft break'>
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'insert.span'>
+      text: string
+      annotations?: Array<{
+        name: string
+        value: {[prop: string]: unknown}
+      }>
+      decorators?: Array<string>
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'list item.add'>
       listItem: string

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

@@ -94,24 +94,29 @@ describe(converterTextHtml.serialize.name, () => {
   test('paragraph with decorators', () => {
     expect(
       converterTextHtml.serialize({
-        snapshot: createSnapshot(defineSchema({}), {
-          anchor: {
-            path: [
-              {_key: decoratedParagraph._key},
-              'children',
-              {_key: decoratedParagraph.children[0]._key},
-            ],
-            offset: 0,
-          },
-          focus: {
-            path: [
-              {_key: decoratedParagraph._key},
-              'children',
-              {_key: decoratedParagraph.children[2]._key},
-            ],
-            offset: 4,
+        snapshot: createSnapshot(
+          defineSchema({
+            decorators: [{name: 'em'}, {name: 'code'}, {name: 'strong'}],
+          }),
+          {
+            anchor: {
+              path: [
+                {_key: decoratedParagraph._key},
+                'children',
+                {_key: decoratedParagraph.children[0]._key},
+              ],
+              offset: 0,
+            },
+            focus: {
+              path: [
+                {_key: decoratedParagraph._key},
+                'children',
+                {_key: decoratedParagraph.children[2]._key},
+              ],
+              offset: 4,
+            },
           },
-        }),
+        ),
         event: {
           type: 'serialize',
           originEvent: 'clipboard.copy',
@@ -181,6 +186,11 @@ describe(converterTextHtml.serialize.name, () => {
       converterTextHtml.serialize({
         snapshot: createTestSnapshot({
           context: {
+            schema: compileSchema(
+              defineSchema({
+                lists: [{name: 'bullet'}, {name: 'number'}],
+              }),
+            ),
             converters: [],
             value: [
               {

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

@@ -7,7 +7,7 @@ import {
 import type {PortableTextBlock, PortableTextTextBlock} from '@sanity/types'
 import {expect, test} from 'vitest'
 import type {EditorSelection} from '..'
-import {schemaDefinition} from '../editor/__tests__/PortableTextEditorTester'
+import {schemaDefinition} from '../../tests/PortableTextEditorTester'
 import {createTestSnapshot} from '../internal-utils/create-test-snapshot'
 import {createConverterTextPlain} from './converter.text-plain'
 

package/src/editor/plugins/createWithEditableAPI.ts

@@ -426,6 +426,22 @@ export function createEditableAPI(
     addAnnotation: (type, value) => {
       let paths: ReturnType<EditableAPI['addAnnotation']>
 
+      const snapshot = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor,
+      })
+
+      if (isActiveAnnotation(type.name, {mode: 'partial'})(snapshot)) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'annotation.remove',
+            annotation: {name: type.name},
+          },
+          editor,
+        })
+      }
+
       Editor.withoutNormalizing(editor, () => {
         paths = addAnnotationOperationImplementation({
           context: {

package/src/internal-utils/parse-blocks.ts

@@ -193,6 +193,7 @@ export function parseTextBlock({
         parseInlineObject({inlineObject: child, context, options}),
     )
     .filter((child) => child !== undefined)
+  const marks = children.flatMap((child) => child.marks ?? [])
 
   const parsedBlock: PortableTextTextBlock = {
     _type: context.schema.block.name,
@@ -208,7 +209,7 @@ export function parseTextBlock({
               marks: [],
             },
           ],
-    markDefs,
+    markDefs: markDefs.filter((markDef) => marks.includes(markDef._key)),
     ...customFields,
   }
 

package/src/operations/behavior.operation.annotation.add.ts

@@ -116,22 +116,11 @@ export const addAnnotationOperationImplementation: BehaviorOperationImplementati
       }
 
       const marks = span.marks ?? []
-      const existingSameTypeAnnotations = marks.filter((mark) =>
-        markDefs.some(
-          (markDef) =>
-            markDef._key === mark && markDef._type === parsedAnnotation._type,
-        ),
-      )
 
       Transforms.setNodes(
         editor,
         {
-          marks: [
-            ...marks.filter(
-              (mark) => !existingSameTypeAnnotations.includes(mark),
-            ),
-            annotationKey,
-          ],
+          marks: [...marks, annotationKey],
         },
         {at: path},
       )

package/src/operations/behavior.operations.ts

@@ -18,8 +18,6 @@ import {childSetOperationImplementation} from './behavior.operation.child.set'
 import {childUnsetOperationImplementation} from './behavior.operation.child.unset'
 import {decoratorAddOperationImplementation} from './behavior.operation.decorator.add'
 import {deleteOperationImplementation} from './behavior.operation.delete'
-import {insertInlineObjectOperationImplementation} from './behavior.operation.insert-inline-object'
-import {insertSpanOperationImplementation} from './behavior.operation.insert-span'
 import {insertBlockOperationImplementation} from './behavior.operation.insert.block'
 import {insertTextOperationImplementation} from './behavior.operation.insert.text'
 import {moveBackwardOperationImplementation} from './behavior.operation.move.backward'
@@ -68,8 +66,6 @@ const behaviorOperationImplementations: BehaviorOperationImplementations = {
   'history.redo': historyRedoOperationImplementation,
   'history.undo': historyUndoOperationImplementation,
   'insert.block': insertBlockOperationImplementation,
-  'insert.inline object': insertInlineObjectOperationImplementation,
-  'insert.span': insertSpanOperationImplementation,
   'insert.text': insertTextOperationImplementation,
   'move.backward': moveBackwardOperationImplementation,
   'move.block': moveBlockOperationImplementation,
@@ -170,20 +166,6 @@ export function performOperation({
         })
         break
       }
-      case 'insert.inline object': {
-        behaviorOperationImplementations['insert.inline object']({
-          context,
-          operation: operation,
-        })
-        break
-      }
-      case 'insert.span': {
-        behaviorOperationImplementations['insert.span']({
-          context,
-          operation: operation,
-        })
-        break
-      }
       case 'insert.text': {
         behaviorOperationImplementations['insert.text']({
           context,