@portabletext/editor 2.8.0 → 2.8.2

package/lib/plugins/index.d.cts

@@ -1,5 +1,5 @@
 import { Behavior, Editor, EditorEmittedEvent, EditorSchema } from "../_chunks-dts/behavior.types.action.cjs";
-import * as react21 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;
-}): react21.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(): react21.JSX.Element;
+declare function OneLinePlugin(): react12.JSX.Element;
 export { BehaviorPlugin, DecoratorShortcutPlugin, EditorRefPlugin, EventListenerPlugin, MarkdownPlugin, type MarkdownPluginConfig, OneLinePlugin };

package/lib/utils/index.d.ts

@@ -1,5 +1,5 @@
 import { BlockOffset, BlockPath, ChildPath, EditorContext, EditorSelection, EditorSelectionPoint } from "../_chunks-dts/behavior.types.action.js";
-import * as _sanity_types8 from "@sanity/types";
+import * as _sanity_types9 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_types8.PortableTextObject | _sanity_types8.PortableTextSpan>;
+}): PortableTextTextBlock<_sanity_types9.PortableTextObject | _sanity_types9.PortableTextSpan>;
 /**
  * @public
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "2.8.0",
+  "version": "2.8.2",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -80,9 +80,9 @@
     "slate-react": "0.117.4",
     "xstate": "^5.21.0",
     "@portabletext/block-tools": "^3.5.3",
-    "@portabletext/patches": "^1.1.8",
+    "@portabletext/keyboard-shortcuts": "^1.1.1",
     "@portabletext/schema": "^1.2.0",
-    "@portabletext/keyboard-shortcuts": "^1.1.1"
+    "@portabletext/patches": "^1.1.8"
   },
   "devDependencies": {
     "@sanity/diff-match-patch": "^3.2.0",
@@ -110,9 +110,9 @@
     "vite": "^7.1.3",
     "vitest": "^3.2.4",
     "vitest-browser-react": "^1.0.1",
+    "@portabletext/sanity-bridge": "1.1.8",
     "@portabletext/test": "^0.0.0",
-    "racejar": "1.2.15",
-    "@portabletext/sanity-bridge": "1.1.8"
+    "racejar": "1.2.15"
   },
   "peerDependencies": {
     "@portabletext/sanity-bridge": "^1.1.8",

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

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

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

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

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/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/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',

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

@@ -19,7 +19,6 @@ export function parseBlocks({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   blocks: unknown
   options: {
-    refreshKeys: boolean
     validateFields: boolean
   }
 }): Array<PortableTextBlock> {
@@ -42,7 +41,6 @@ export function parseBlock({
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   block: unknown
   options: {
-    refreshKeys: boolean
     validateFields: boolean
   }
 }): PortableTextBlock | undefined {
@@ -59,7 +57,7 @@ export function parseBlockObject({
 }: {
   blockObject: unknown
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
-  options: {refreshKeys: boolean; validateFields: boolean}
+  options: {validateFields: boolean}
 }): PortableTextObject | undefined {
   if (!isTypedObject(blockObject)) {
     return undefined
@@ -101,7 +99,7 @@ export function parseTextBlock({
 }: {
   block: unknown
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
-  options: {refreshKeys: boolean; validateFields: boolean}
+  options: {validateFields: boolean}
 }): PortableTextTextBlock | undefined {
   if (!isTypedObject(block)) {
     return undefined
@@ -135,11 +133,8 @@ export function parseTextBlock({
     return undefined
   }
 
-  const _key = options.refreshKeys
-    ? context.keyGenerator()
-    : typeof block._key === 'string'
-      ? block._key
-      : context.keyGenerator()
+  const _key =
+    typeof block._key === 'string' ? block._key : context.keyGenerator()
 
   const unparsedMarkDefs: Array<unknown> = Array.isArray(block.markDefs)
     ? block.markDefs
@@ -251,7 +246,7 @@ export function parseSpan({
   span: unknown
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
   markDefKeyMap: Map<string, string>
-  options: {refreshKeys: boolean; validateFields: boolean}
+  options: {validateFields: boolean}
 }): PortableTextSpan | undefined {
   if (!isTypedObject(span)) {
     return undefined
@@ -300,11 +295,7 @@ export function parseSpan({
 
   return {
     _type: 'span',
-    _key: options.refreshKeys
-      ? context.keyGenerator()
-      : typeof span._key === 'string'
-        ? span._key
-        : context.keyGenerator(),
+    _key: typeof span._key === 'string' ? span._key : context.keyGenerator(),
     text: typeof span.text === 'string' ? span.text : '',
     marks,
     ...(options.validateFields ? {} : customFields),
@@ -318,7 +309,7 @@ export function parseInlineObject({
 }: {
   inlineObject: unknown
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
-  options: {refreshKeys: boolean; validateFields: boolean}
+  options: {validateFields: boolean}
 }): PortableTextObject | undefined {
   if (!isTypedObject(inlineObject)) {
     return undefined
@@ -349,7 +340,7 @@ export function parseAnnotation({
 }: {
   annotation: TypedObject
   context: Pick<EditorContext, 'keyGenerator' | 'schema'>
-  options: {refreshKeys: boolean; validateFields: boolean}
+  options: {validateFields: boolean}
 }): PortableTextObject | undefined {
   if (!isTypedObject(annotation)) {
     return undefined
@@ -382,7 +373,7 @@ function parseObject({
   context: Pick<EditorContext, 'keyGenerator'> & {
     schemaType: EditorSchema['blockObjects'][0]
   }
-  options: {refreshKeys: boolean; validateFields: boolean}
+  options: {validateFields: boolean}
 }): PortableTextObject {
   const {_type, _key, ...customFields} = object
 
@@ -405,11 +396,8 @@ function parseObject({
 
   return {
     _type: context.schemaType.name,
-    _key: options.refreshKeys
-      ? context.keyGenerator()
-      : typeof object._key === 'string'
-        ? object._key
-        : context.keyGenerator(),
+    _key:
+      typeof object._key === 'string' ? object._key : context.keyGenerator(),
     ...values,
   }
 }

package/src/internal-utils/test-editor.tsx

@@ -5,13 +5,16 @@ import {page} from '@vitest/browser/context'
 import React from 'react'
 import {expect, vi} from 'vitest'
 import {render} from 'vitest-browser-react'
+import type {Context} from '../../gherkin-tests-v2/step-context'
+import type {NativeBehaviorEvent} from '../behaviors'
 import type {Editor} from '../editor'
-import {PortableTextEditable} from '../editor/Editable'
+import {
+  PortableTextEditable,
+  type PortableTextEditableProps,
+} from '../editor/Editable'
 import type {EditorActor} from '../editor/editor-machine'
 import {EditorProvider} from '../editor/editor-provider'
-import type {EditorEmittedEvent} from '../editor/relay-machine'
 import {EditorRefPlugin} from '../plugins/plugin.editor-ref'
-import {EventListenerPlugin} from '../plugins/plugin.event-listener'
 import {InternalEditorAfterRefPlugin} from '../plugins/plugin.internal.editor-actor-ref'
 import {InternalSlateEditorRefPlugin} from '../plugins/plugin.internal.slate-editor-ref'
 import type {PortableTextSlateEditor} from '../types/editor'
@@ -22,12 +25,12 @@ export async function createTestEditor(
     keyGenerator?: () => string
     schemaDefinition?: SchemaDefinition
     children?: React.ReactNode
+    editableProps?: PortableTextEditableProps
   } = {},
-) {
+): Promise<Pick<Context, 'editor' | 'locator'>> {
   const editorRef = React.createRef<Editor>()
   const editorActorRef = React.createRef<EditorActor>()
   const slateRef = React.createRef<PortableTextSlateEditor>()
-  const onEvent = vi.fn<() => EditorEmittedEvent>()
   const keyGenerator = options.keyGenerator ?? createTestKeyGenerator()
 
   render(
@@ -41,8 +44,7 @@ export async function createTestEditor(
       <EditorRefPlugin ref={editorRef} />
       <InternalEditorAfterRefPlugin ref={editorActorRef} />
       <InternalSlateEditorRefPlugin ref={slateRef} />
-      <EventListenerPlugin on={onEvent} />
-      <PortableTextEditable />
+      <PortableTextEditable {...options.editableProps} />
       {options.children}
     </EditorProvider>,
   )
@@ -51,27 +53,19 @@ export async function createTestEditor(
 
   await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
 
-  function paste(dataTransfer: DataTransfer) {
+  function sendNativeEvent(event: NativeBehaviorEvent) {
     editorActorRef.current?.send({
       type: 'behavior event',
-      behaviorEvent: {
-        type: 'clipboard.paste',
-        originEvent: {dataTransfer},
-        position: {
-          selection: editorRef.current?.getSnapshot().context.selection!,
-        },
-      },
+      behaviorEvent: event,
       editor: slateRef.current!,
     })
   }
 
   return {
-    editorActorRef,
-    editorRef,
-    keyGenerator,
+    editor: {
+      ...editorRef.current!,
+      sendNativeEvent,
+    },
     locator,
-    onEvent,
-    slateRef,
-    paste,
   }
 }