@portabletext/editor 2.8.1 → 2.8.3

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react11 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;
-}): react11.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(): react11.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 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.8.1",
+  "version": "2.8.3",
   "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.3",
+    "@portabletext/block-tools": "^3.5.4",
     "@portabletext/keyboard-shortcuts": "^1.1.1",
     "@portabletext/patches": "^1.1.8",
     "@portabletext/schema": "^1.2.0"

package/src/editor/PortableTextEditor.tsx

@@ -16,8 +16,8 @@ import {Subject} from 'rxjs'
 import {Slate} from 'slate-react'
 import {debugWithName} from '../internal-utils/debug'
 import {stopActor} from '../internal-utils/stop-actor'
-import type {AddedAnnotationPaths} from '../operations/behavior.operation.annotation.add'
 import type {
+  AddedAnnotationPaths,
   EditableAPI,
   EditableAPIDeleteOptions,
   EditorChange,

package/src/editor/plugins/createWithEditableAPI.ts

@@ -1,3 +1,4 @@
+import {isTextBlock} from '@portabletext/schema'
 import type {
   Path,
   PortableTextBlock,
@@ -29,8 +30,12 @@ import {
   KEY_TO_VALUE_ELEMENT,
   SLATE_TO_PORTABLE_TEXT_RANGE,
 } from '../../internal-utils/weakMaps'
-import {addAnnotationOperationImplementation} from '../../operations/behavior.operation.annotation.add'
-import {isActiveAnnotation} from '../../selectors'
+import {
+  getFocusBlock,
+  getFocusSpan,
+  getSelectedValue,
+  isActiveAnnotation,
+} from '../../selectors'
 import {getActiveAnnotationsMarks} from '../../selectors/selector.get-active-annotation-marks'
 import {getActiveDecorators} from '../../selectors/selector.get-active-decorators'
 import type {
@@ -424,40 +429,77 @@ export function createEditableAPI(
       return isActiveAnnotation(annotationType)(snapshot)
     },
     addAnnotation: (type, value) => {
-      let paths: ReturnType<EditableAPI['addAnnotation']>
+      const snapshotBefore = getEditorSnapshot({
+        editorActorSnapshot: editorActor.getSnapshot(),
+        slateEditorInstance: editor,
+      })
+      const selectedValueBefore = getSelectedValue(snapshotBefore)
+      const focusSpanBefore = getFocusSpan(snapshotBefore)
+      const markDefsBefore = selectedValueBefore.flatMap((block) => {
+        if (isTextBlock(snapshotBefore.context, block)) {
+          return block.markDefs ?? []
+        }
 
-      const snapshot = getEditorSnapshot({
+        return []
+      })
+
+      editorActor.send({
+        type: 'behavior event',
+        behaviorEvent: {
+          type: 'annotation.add',
+          annotation: {name: type.name, value: value ?? {}},
+        },
+        editor,
+      })
+
+      const snapshotAfter = 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,
-        })
-      }
+      const selectedValueAfter = getSelectedValue(snapshotAfter)
+      const focusBlockAfter = getFocusBlock(snapshotAfter)
+      const focusSpanAfter = getFocusSpan(snapshotAfter)
 
-      Editor.withoutNormalizing(editor, () => {
-        paths = addAnnotationOperationImplementation({
-          context: {
-            keyGenerator: editorActor.getSnapshot().context.keyGenerator,
-            schema: types,
-          },
-          operation: {
-            type: 'annotation.add',
-            annotation: {name: type.name, value: value ?? {}},
-            editor,
-          },
-        })
+      const newMarkDefKeysOnFocusSpan = focusSpanAfter?.node.marks?.filter(
+        (mark) =>
+          !focusSpanBefore?.node.marks?.includes(mark) &&
+          !snapshotAfter.context.schema.decorators
+            .map((decorator) => decorator.name)
+            .includes(mark),
+      )
+      const markDefsAfter = selectedValueAfter.flatMap((block) => {
+        if (isTextBlock(snapshotAfter.context, block)) {
+          return (
+            block.markDefs?.map((markDef) => ({
+              markDef,
+              path: [{_key: block._key}, 'markDefs', {_key: markDef._key}],
+            })) ?? []
+          )
+        }
+
+        return []
       })
-      editor.onChange()
+      const markDefs = markDefsAfter.filter(
+        (markDef) =>
+          !markDefsBefore.some(
+            (markDefBefore) => markDefBefore._key === markDef.markDef._key,
+          ),
+      )
+      const spanPath = focusSpanAfter?.path
+      const markDef = markDefs.find((markDef) =>
+        newMarkDefKeysOnFocusSpan?.some(
+          (mark) => mark === markDef.markDef._key,
+        ),
+      )
 
-      return paths
+      if (focusBlockAfter && spanPath && markDef) {
+        return {
+          markDefPath: markDef.path,
+          markDefPaths: markDefs.map((markDef) => markDef.path),
+          spanPath,
+        }
+      }
     },
     delete: (
       selection: EditorSelection,

package/src/index.ts

@@ -45,7 +45,7 @@ export {PortableTextEditor} from './editor/PortableTextEditor'
 export type {PortableTextEditorProps} from './editor/PortableTextEditor'
 export type {EditorEmittedEvent, MutationEvent} from './editor/relay-machine'
 export {useEditor} from './editor/use-editor'
-export type {AddedAnnotationPaths} from './operations/behavior.operation.annotation.add'
+export type {AddedAnnotationPaths} from './types/editor'
 export type {BlockOffset} from './types/block-offset'
 export type {
   BlockAnnotationRenderProps,

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

@@ -1,29 +1,9 @@
-import type {Path} from '@sanity/types'
 import {Editor, Node, Range, Text, Transforms} from 'slate'
 import {parseAnnotation} from '../internal-utils/parse-blocks'
 import type {BehaviorOperationImplementation} from './behavior.operations'
 
-/**
- * @public
- */
-export 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
-}
-
 export const addAnnotationOperationImplementation: BehaviorOperationImplementation<
-  'annotation.add',
-  AddedAnnotationPaths | undefined
+  'annotation.add'
 > = ({context, operation}) => {
   const parsedAnnotation = parseAnnotation({
     annotation: {
@@ -46,11 +26,6 @@ export const addAnnotationOperationImplementation: BehaviorOperationImplementati
     return
   }
 
-  let paths: AddedAnnotationPaths | undefined
-  let spanPath: Path | undefined
-  let markDefPath: Path | undefined
-  const markDefPaths: Path[] = []
-
   const selectedBlocks = Editor.nodes(editor, {
     at: editor.selection,
     match: (node) => editor.isTextBlock(node),
@@ -92,14 +67,6 @@ export const addAnnotationOperationImplementation: BehaviorOperationImplementati
         },
         {at: blockPath},
       )
-
-      markDefPath = [{_key: block._key}, 'markDefs', {_key: annotationKey}]
-
-      if (Range.isBackward(editor.selection)) {
-        markDefPaths.unshift(markDefPath)
-      } else {
-        markDefPaths.push(markDefPath)
-      }
     }
 
     Transforms.setNodes(editor, {}, {match: Text.isText, split: true})
@@ -124,20 +91,8 @@ export const addAnnotationOperationImplementation: BehaviorOperationImplementati
         },
         {at: path},
       )
-
-      spanPath = [{_key: block._key}, 'children', {_key: span._key}]
     }
 
     blockIndex++
   }
-
-  if (markDefPath && spanPath) {
-    paths = {
-      markDefPath,
-      markDefPaths,
-      spanPath,
-    }
-  }
-
-  return paths
 }

package/src/operations/behavior.operations.ts

@@ -32,14 +32,13 @@ export type BehaviorOperationImplementationContext = Pick<
 
 export type BehaviorOperationImplementation<
   TBehaviorOperationType extends BehaviorOperation['type'],
-  TReturnType = void,
 > = ({
   context,
   operation,
 }: {
   context: BehaviorOperationImplementationContext
   operation: PickFromUnion<BehaviorOperation, 'type', TBehaviorOperationType>
-}) => TReturnType
+}) => void
 
 type BehaviorOperation = OmitFromUnion<
   SyntheticBehaviorEvent,

package/src/types/editor.ts

@@ -37,6 +37,24 @@ export interface EditableAPIDeleteOptions {
   mode?: 'blocks' | 'children' | 'selected'
 }
 
+/**
+ * @public
+ */
+export 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 */
 export interface EditableAPI {
   activeAnnotations: () => PortableTextObject[]
@@ -44,9 +62,7 @@ export interface EditableAPI {
   addAnnotation: <TSchemaType extends {name: string}>(
     type: TSchemaType,
     value?: {[prop: string]: unknown},
-  ) =>
-    | {markDefPath: Path; markDefPaths: Array<Path>; spanPath: Path}
-    | undefined
+  ) => AddedAnnotationPaths | undefined
   blur: () => void
   delete: (
     selection: EditorSelection,