@portabletext/editor 2.7.2 → 2.8.1

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 react11 from "react";
 import React from "react";
 /**
  * @beta
@@ -181,7 +181,7 @@ type MarkdownPluginConfig = MarkdownBehaviorsConfig & {
  */
 declare function MarkdownPlugin(props: {
   config: MarkdownPluginConfig;
-}): react12.JSX.Element;
+}): react11.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(): react11.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.2",
+  "version": "2.8.1",
   "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.2",
-    "@portabletext/schema": "^1.2.0",
+    "@portabletext/block-tools": "^3.5.3",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
-    "@portabletext/patches": "^1.1.8"
+    "@portabletext/patches": "^1.1.8",
+    "@portabletext/schema": "^1.2.0"
   },
   "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",
-    "racejar": "1.2.14",
-    "@portabletext/test": "^0.0.0"
+    "@portabletext/sanity-bridge": "1.1.8",
+    "@portabletext/test": "^0.0.0",
+    "racejar": "1.2.15"
   },
   "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.abstract.split.ts

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

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.portable-text.ts

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

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-html.ts

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

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/converters/converter.text-plain.ts

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

package/src/editor/Editable.tsx

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

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.test.ts

@@ -12,7 +12,7 @@ describe(parseBlock.name, () => {
           keyGenerator: createTestKeyGenerator(),
           schema: compileSchema(defineSchema({})),
         },
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -25,7 +25,7 @@ describe(parseBlock.name, () => {
           keyGenerator: createTestKeyGenerator(),
           schema: compileSchema(defineSchema({})),
         },
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -39,7 +39,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({})),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toBe(undefined)
     })
@@ -54,7 +54,7 @@ describe(parseBlock.name, () => {
               defineSchema({blockObjects: [{name: 'image'}]}),
             ),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toBe(undefined)
     })
@@ -69,7 +69,7 @@ describe(parseBlock.name, () => {
               defineSchema({blockObjects: [{name: 'image'}]}),
             ),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -87,7 +87,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({})),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -114,7 +114,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: {...schema, block: {...schema.block, name: 'text'}},
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -149,7 +149,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({})),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toBe(undefined)
     })
@@ -188,7 +188,7 @@ describe(parseBlock.name, () => {
               }),
             ),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -236,7 +236,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({lists: [{name: 'bullet'}]})),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -263,7 +263,7 @@ describe(parseBlock.name, () => {
             keyGenerator: createTestKeyGenerator(),
             schema: compileSchema(defineSchema({lists: [{name: 'bullet'}]})),
           },
-          options: {refreshKeys: false, validateFields: true},
+          options: {validateFields: true},
         }),
       ).toEqual({
         _key: 'k0',
@@ -290,7 +290,7 @@ describe(parseBlock.name, () => {
               keyGenerator: createTestKeyGenerator(),
               schema: compileSchema(defineSchema({})),
             },
-            options: {refreshKeys: false, validateFields: true},
+            options: {validateFields: true},
           }),
         ).toEqual({
           _type: 'block',
@@ -320,7 +320,7 @@ describe(parseBlock.name, () => {
                 }),
               ),
             },
-            options: {refreshKeys: false, validateFields: true},
+            options: {validateFields: true},
           }),
         ).toEqual({
           _type: 'block',
@@ -351,7 +351,7 @@ describe(parseBlock.name, () => {
                 }),
               ),
             },
-            options: {refreshKeys: false, validateFields: true},
+            options: {validateFields: true},
           }),
         ).toEqual({
           _type: 'block',
@@ -382,7 +382,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -396,7 +396,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -410,7 +410,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -424,7 +424,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toBe(undefined)
   })
@@ -438,7 +438,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toEqual({
       _key: 'k0',
@@ -457,7 +457,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toEqual({
       _key: 'k0',
@@ -479,7 +479,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toEqual({
       _key: 'k0',
@@ -501,7 +501,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({decorators: [{name: 'strong'}]})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toEqual({
       _key: 'k0',
@@ -523,7 +523,7 @@ describe(parseSpan.name, () => {
           schema: compileSchema(defineSchema({decorators: [{name: 'strong'}]})),
         },
         markDefKeyMap: new Map(),
-        options: {refreshKeys: false, validateFields: true},
+        options: {validateFields: true},
       }),
     ).toEqual({
       _key: 'k0',