@portabletext/editor 2.8.1 → 2.8.3

package/lib/_chunks-dts/behavior.types.action.d.cts

@@ -44,23 +44,6 @@ type BehaviorConfig = {
   behavior: Behavior;
   priority: EditorPriority;
 };
-/**
- * @public
- */
-type AddedAnnotationPaths = {
-  /**
-   * @deprecated An annotation may be applied to multiple blocks, resulting
-   * in multiple `markDef`'s being created. Use `markDefPaths` instead.
-   */
-  markDefPath: Path;
-  markDefPaths: Array<Path>;
-  /**
-   * @deprecated Does not return anything meaningful since an annotation
-   * can span multiple blocks and spans. If references the span closest
-   * to the focus point of the selection.
-   */
-  spanPath: Path;
-};
 /**
  * @public
  */
@@ -640,6 +623,23 @@ type ChildPath = [{
 interface EditableAPIDeleteOptions {
   mode?: 'blocks' | 'children' | 'selected';
 }
+/**
+ * @public
+ */
+type AddedAnnotationPaths = {
+  /**
+   * @deprecated An annotation may be applied to multiple blocks, resulting
+   * in multiple `markDef`'s being created. Use `markDefPaths` instead.
+   */
+  markDefPath: Path;
+  markDefPaths: Array<Path>;
+  /**
+   * @deprecated Does not return anything meaningful since an annotation
+   * can span multiple blocks and spans. If references the span closest
+   * to the focus point of the selection.
+   */
+  spanPath: Path;
+};
 /** @beta */
 interface EditableAPI {
   activeAnnotations: () => PortableTextObject[];
@@ -648,11 +648,7 @@ interface EditableAPI {
     name: string;
   }>(type: TSchemaType, value?: {
     [prop: string]: unknown;
-  }) => {
-    markDefPath: Path;
-    markDefPaths: Array<Path>;
-    spanPath: Path;
-  } | undefined;
+  }) => AddedAnnotationPaths | undefined;
   blur: () => void;
   delete: (selection: EditorSelection, options?: EditableAPIDeleteOptions) => void;
   findByPath: (path: Path) => [PortableTextBlock | PortableTextChild | undefined, Path | undefined];
@@ -1506,7 +1502,7 @@ declare const editorMachine: xstate241.StateMachine<{
     }, xstate241.AnyEventObject>;
   }) => {
     behaviors: Set<{
-      behavior: Behavior<"*" | "split" | `custom.${string}` | "annotation.add" | "annotation.remove" | "block.set" | "block.unset" | "child.set" | "child.unset" | "decorator.add" | "decorator.remove" | "delete" | "history.redo" | "history.undo" | "insert.block" | "insert.text" | "move.backward" | "move.block" | "move.forward" | "select" | "annotation.set" | "annotation.toggle" | "decorator.toggle" | "delete.backward" | "delete.block" | "delete.child" | "delete.forward" | "delete.text" | "deserialize" | "deserialize.data" | "deserialization.success" | "deserialization.failure" | "insert.blocks" | "insert.break" | "insert.inline object" | "insert.soft break" | "insert.span" | "list item.add" | "list item.remove" | "list item.toggle" | "move.block down" | "move.block up" | "select.previous block" | "select.next block" | "serialize" | "serialize.data" | "serialization.success" | "serialization.failure" | "style.add" | "style.remove" | "style.toggle" | "clipboard.copy" | "clipboard.cut" | "clipboard.paste" | "drag.dragstart" | "drag.drag" | "drag.dragend" | "drag.dragenter" | "drag.dragover" | "drag.dragleave" | "drag.drop" | "input.*" | "keyboard.keydown" | "keyboard.keyup" | "mouse.click" | "history.*" | "split.*" | "delete.*" | "select.*" | "deserialize.*" | "serialize.*" | "annotation.*" | "block.*" | "child.*" | "decorator.*" | "insert.*" | "move.*" | "deserialization.*" | "list item.*" | "serialization.*" | "style.*" | "clipboard.*" | "drag.*" | "keyboard.*" | "mouse.*", true, {
+      behavior: Behavior<"*" | "split" | `custom.${string}` | "annotation.add" | "annotation.remove" | "block.set" | "block.unset" | "child.set" | "child.unset" | "decorator.add" | "decorator.remove" | "delete" | "history.redo" | "history.undo" | "insert.block" | "insert.text" | "move.backward" | "move.block" | "move.forward" | "select" | "annotation.set" | "annotation.toggle" | "decorator.toggle" | "delete.backward" | "delete.block" | "delete.child" | "delete.forward" | "delete.text" | "deserialize" | "deserialize.data" | "deserialization.success" | "deserialization.failure" | "insert.blocks" | "insert.break" | "insert.inline object" | "insert.soft break" | "insert.span" | "list item.add" | "list item.remove" | "list item.toggle" | "move.block down" | "move.block up" | "select.previous block" | "select.next block" | "serialize" | "serialize.data" | "serialization.success" | "serialization.failure" | "style.add" | "style.remove" | "style.toggle" | "clipboard.copy" | "clipboard.cut" | "clipboard.paste" | "drag.dragstart" | "drag.drag" | "drag.dragend" | "drag.dragenter" | "drag.dragover" | "drag.dragleave" | "drag.drop" | "input.*" | "keyboard.keydown" | "keyboard.keyup" | "mouse.click" | "history.*" | "split.*" | "style.*" | "delete.*" | "select.*" | "deserialize.*" | "serialize.*" | "annotation.*" | "block.*" | "child.*" | "decorator.*" | "insert.*" | "move.*" | "deserialization.*" | "list item.*" | "serialization.*" | "clipboard.*" | "drag.*" | "keyboard.*" | "mouse.*", true, {
         type: StrictExtract<"split" | "annotation.add" | "annotation.remove" | "block.set" | "block.unset" | "child.set" | "child.unset" | "decorator.add" | "decorator.remove" | "delete" | "history.redo" | "history.undo" | "insert.block" | "insert.text" | "move.backward" | "move.block" | "move.forward" | "select" | "annotation.set" | "annotation.toggle" | "decorator.toggle" | "delete.backward" | "delete.block" | "delete.child" | "delete.forward" | "delete.text" | "deserialize" | "deserialize.data" | "deserialization.success" | "deserialization.failure" | "insert.blocks" | "insert.break" | "insert.inline object" | "insert.soft break" | "insert.span" | "list item.add" | "list item.remove" | "list item.toggle" | "move.block down" | "move.block up" | "select.previous block" | "select.next block" | "serialize" | "serialize.data" | "serialization.success" | "serialization.failure" | "style.add" | "style.remove" | "style.toggle", "annotation.add">;
         annotation: {
           name: string;

package/lib/_chunks-dts/behavior.types.action.d.ts

@@ -6,7 +6,7 @@ import { AnnotationDefinition, AnnotationSchemaType, BaseDefinition, BlockObject
 import * as xstate227 from "xstate";
 import { ActorRef, ActorRefFrom, EventObject, Snapshot } from "xstate";
 import { BaseRange, Descendant, Operation } from "slate";
-import * as react22 from "react";
+import * as react20 from "react";
 import React$1, { BaseSyntheticEvent, ClipboardEvent, Component, FocusEvent, JSX, KeyboardEvent as KeyboardEvent$1, MutableRefObject, PropsWithChildren, ReactElement, RefObject, TextareaHTMLAttributes } from "react";
 import * as xstate_guards12 from "xstate/guards";
 import { Observable, Subject } from "rxjs";
@@ -44,23 +44,6 @@ type BehaviorConfig = {
   behavior: Behavior;
   priority: EditorPriority;
 };
-/**
- * @public
- */
-type AddedAnnotationPaths = {
-  /**
-   * @deprecated An annotation may be applied to multiple blocks, resulting
-   * in multiple `markDef`'s being created. Use `markDefPaths` instead.
-   */
-  markDefPath: Path;
-  markDefPaths: Array<Path>;
-  /**
-   * @deprecated Does not return anything meaningful since an annotation
-   * can span multiple blocks and spans. If references the span closest
-   * to the focus point of the selection.
-   */
-  spanPath: Path;
-};
 /**
  * @public
  */
@@ -215,7 +198,7 @@ declare class PortableTextEditor extends Component<PortableTextEditorProps<Inter
   componentDidUpdate(prevProps: PortableTextEditorProps): void;
   componentWillUnmount(): void;
   setEditable: (editable: EditableAPI) => void;
-  render(): react22.JSX.Element;
+  render(): react20.JSX.Element;
   /**
    * @deprecated
    * Use built-in selectors or write your own: https://www.portabletext.org/reference/selectors/
@@ -610,7 +593,7 @@ type PortableTextEditableProps = Omit<TextareaHTMLAttributes<HTMLDivElement>, 'o
  * ```
  * @group Components
  */
-declare const PortableTextEditable: react22.ForwardRefExoticComponent<Omit<PortableTextEditableProps, "ref"> & react22.RefAttributes<Omit<HTMLDivElement, "as" | "onPaste" | "onBeforeInput">>>;
+declare const PortableTextEditable: react20.ForwardRefExoticComponent<Omit<PortableTextEditableProps, "ref"> & react20.RefAttributes<Omit<HTMLDivElement, "as" | "onPaste" | "onBeforeInput">>>;
 type DecoratedRange = BaseRange & {
   rangeDecoration: RangeDecoration;
 };
@@ -640,6 +623,23 @@ type ChildPath = [{
 interface EditableAPIDeleteOptions {
   mode?: 'blocks' | 'children' | 'selected';
 }
+/**
+ * @public
+ */
+type AddedAnnotationPaths = {
+  /**
+   * @deprecated An annotation may be applied to multiple blocks, resulting
+   * in multiple `markDef`'s being created. Use `markDefPaths` instead.
+   */
+  markDefPath: Path;
+  markDefPaths: Array<Path>;
+  /**
+   * @deprecated Does not return anything meaningful since an annotation
+   * can span multiple blocks and spans. If references the span closest
+   * to the focus point of the selection.
+   */
+  spanPath: Path;
+};
 /** @beta */
 interface EditableAPI {
   activeAnnotations: () => PortableTextObject[];
@@ -648,11 +648,7 @@ interface EditableAPI {
     name: string;
   }>(type: TSchemaType, value?: {
     [prop: string]: unknown;
-  }) => {
-    markDefPath: Path;
-    markDefPaths: Array<Path>;
-    spanPath: Path;
-  } | undefined;
+  }) => AddedAnnotationPaths | undefined;
   blur: () => void;
   delete: (selection: EditorSelection, options?: EditableAPIDeleteOptions) => void;
   findByPath: (path: Path) => [PortableTextBlock | PortableTextChild | undefined, Path | undefined];
@@ -1339,7 +1335,7 @@ declare const editorMachine: xstate227.StateMachine<{
   initialValue?: Array<PortableTextBlock>;
 }, xstate227.NonReducibleUnknown, InternalPatchEvent | MutationEvent | PatchesEvent | {
   type: "blurred";
-  event: react22.FocusEvent<HTMLDivElement, Element>;
+  event: react20.FocusEvent<HTMLDivElement, Element>;
 } | {
   type: "done loading";
 } | {
@@ -1351,7 +1347,7 @@ declare const editorMachine: xstate227.StateMachine<{
   data: unknown;
 } | {
   type: "focused";
-  event: react22.FocusEvent<HTMLDivElement, Element>;
+  event: react20.FocusEvent<HTMLDivElement, Element>;
 } | {
   type: "invalid value";
   resolution: InvalidValueResolution | null;
@@ -2007,7 +2003,7 @@ declare const editorMachine: xstate227.StateMachine<{
         type: "drop";
       }, undefined, never, never, never, never, InternalPatchEvent | MutationEvent | PatchesEvent | {
         type: "blurred";
-        event: react22.FocusEvent<HTMLDivElement, Element>;
+        event: react20.FocusEvent<HTMLDivElement, Element>;
       } | {
         type: "done loading";
       } | {
@@ -2019,7 +2015,7 @@ declare const editorMachine: xstate227.StateMachine<{
         data: unknown;
       } | {
         type: "focused";
-        event: react22.FocusEvent<HTMLDivElement, Element>;
+        event: react20.FocusEvent<HTMLDivElement, Element>;
       } | {
         type: "invalid value";
         resolution: InvalidValueResolution | null;
@@ -2890,7 +2886,7 @@ declare const editorMachine: xstate227.StateMachine<{
                         type: "drop";
                       }, undefined, never, never, never, never, InternalPatchEvent | MutationEvent | PatchesEvent | {
                         type: "blurred";
-                        event: react22.FocusEvent<HTMLDivElement, Element>;
+                        event: react20.FocusEvent<HTMLDivElement, Element>;
                       } | {
                         type: "done loading";
                       } | {
@@ -2902,7 +2898,7 @@ declare const editorMachine: xstate227.StateMachine<{
                         data: unknown;
                       } | {
                         type: "focused";
-                        event: react22.FocusEvent<HTMLDivElement, Element>;
+                        event: react20.FocusEvent<HTMLDivElement, Element>;
                       } | {
                         type: "invalid value";
                         resolution: InvalidValueResolution | null;

package/lib/index.cjs

@@ -3962,8 +3962,7 @@ const addAnnotationOperationImplementation = ({
   const editor = operation.editor;
   if (!editor.selection || slate.Range.isCollapsed(editor.selection))
     return;
-  let paths, spanPath, markDefPath;
-  const markDefPaths = [], selectedBlocks = slate.Editor.nodes(editor, {
+  const selectedBlocks = slate.Editor.nodes(editor, {
     at: editor.selection,
     match: (node) => editor.isTextBlock(node),
     reverse: slate.Range.isBackward(editor.selection)
@@ -3973,18 +3972,14 @@ const addAnnotationOperationImplementation = ({
     if (block.children.length === 0 || block.children.length === 1 && block.children[0].text === "")
       continue;
     const annotationKey = blockIndex === 0 ? parsedAnnotation._key : context.keyGenerator(), markDefs = block.markDefs ?? [];
-    markDefs.find((markDef) => markDef._type === parsedAnnotation._type && markDef._key === annotationKey) === void 0 && (slate.Transforms.setNodes(editor, {
+    markDefs.find((markDef) => markDef._type === parsedAnnotation._type && markDef._key === annotationKey) === void 0 && slate.Transforms.setNodes(editor, {
       markDefs: [...markDefs, {
         ...parsedAnnotation,
         _key: annotationKey
       }]
     }, {
       at: blockPath
-    }), markDefPath = [{
-      _key: block._key
-    }, "markDefs", {
-      _key: annotationKey
-    }], slate.Range.isBackward(editor.selection) ? markDefPaths.unshift(markDefPath) : markDefPaths.push(markDefPath)), slate.Transforms.setNodes(editor, {}, {
+    }), slate.Transforms.setNodes(editor, {}, {
       match: slate.Text.isText,
       split: !0
     });
@@ -3997,19 +3992,10 @@ const addAnnotationOperationImplementation = ({
         marks: [...marks, annotationKey]
       }, {
         at: path
-      }), spanPath = [{
-        _key: block._key
-      }, "children", {
-        _key: span._key
-      }];
+      });
     }
     blockIndex++;
   }
-  return markDefPath && spanPath && (paths = {
-    markDefPath,
-    markDefPaths,
-    spanPath
-  }), paths;
 }, removeAnnotationOperationImplementation = ({
   operation
 }) => {
@@ -10288,37 +10274,38 @@ function createEditableAPI(editor, editorActor) {
       return selector_isSelectingEntireBlocks.isActiveAnnotation(annotationType)(snapshot);
     },
     addAnnotation: (type, value) => {
-      let paths;
-      const snapshot = getEditorSnapshot({
+      const snapshotBefore = getEditorSnapshot({
         editorActorSnapshot: editorActor.getSnapshot(),
         slateEditorInstance: editor
-      });
-      return selector_isSelectingEntireBlocks.isActiveAnnotation(type.name, {
-        mode: "partial"
-      })(snapshot) && editorActor.send({
+      }), selectedValueBefore = selector_isSelectionExpanded.getSelectedValue(snapshotBefore), focusSpanBefore = selector_isSelectionExpanded.getFocusSpan(snapshotBefore), markDefsBefore = selectedValueBefore.flatMap((block) => schema.isTextBlock(snapshotBefore.context, block) ? block.markDefs ?? [] : []);
+      editorActor.send({
         type: "behavior event",
         behaviorEvent: {
-          type: "annotation.remove",
+          type: "annotation.add",
           annotation: {
-            name: type.name
+            name: type.name,
+            value: value ?? {}
           }
         },
         editor
-      }), slate.Editor.withoutNormalizing(editor, () => {
-        paths = addAnnotationOperationImplementation({
-          context: {
-            keyGenerator: editorActor.getSnapshot().context.keyGenerator,
-            schema: types
-          },
-          operation: {
-            annotation: {
-              name: type.name,
-              value: value ?? {}
-            },
-            editor
-          }
-        });
-      }), editor.onChange(), paths;
+      });
+      const snapshotAfter = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor
+      }), selectedValueAfter = selector_isSelectionExpanded.getSelectedValue(snapshotAfter), focusBlockAfter = selector_isSelectionExpanded.getFocusBlock(snapshotAfter), focusSpanAfter = selector_isSelectionExpanded.getFocusSpan(snapshotAfter), newMarkDefKeysOnFocusSpan = focusSpanAfter?.node.marks?.filter((mark) => !focusSpanBefore?.node.marks?.includes(mark) && !snapshotAfter.context.schema.decorators.map((decorator) => decorator.name).includes(mark)), markDefs = selectedValueAfter.flatMap((block) => schema.isTextBlock(snapshotAfter.context, block) ? block.markDefs?.map((markDef2) => ({
+        markDef: markDef2,
+        path: [{
+          _key: block._key
+        }, "markDefs", {
+          _key: markDef2._key
+        }]
+      })) ?? [] : []).filter((markDef2) => !markDefsBefore.some((markDefBefore) => markDefBefore._key === markDef2.markDef._key)), spanPath = focusSpanAfter?.path, markDef = markDefs.find((markDef2) => newMarkDefKeysOnFocusSpan?.some((mark) => mark === markDef2.markDef._key));
+      if (focusBlockAfter && spanPath && markDef)
+        return {
+          markDefPath: markDef.path,
+          markDefPaths: markDefs.map((markDef2) => markDef2.path),
+          spanPath
+        };
     },
     delete: (selection, options) => {
       if (selection) {