@portabletext/editor 1.44.15 → 1.45.0

package/src/behavior-actions/behavior.action.annotation.add.ts

@@ -1,5 +1,6 @@
 import type {Path} from '@sanity/types'
 import {Editor, Node, Range, Text, Transforms} from 'slate'
+import {parseAnnotation} from '../internal-utils/parse-blocks'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 /**
@@ -24,6 +25,21 @@ export const addAnnotationActionImplementation: BehaviorActionImplementation<
   'annotation.add',
   AddedAnnotationPaths | undefined
 > = ({context, action}) => {
+  const parsedAnnotation = parseAnnotation({
+    annotation: {
+      _type: action.annotation.name,
+      ...action.annotation.value,
+    },
+    context,
+    options: {refreshKeys: false},
+  })
+
+  if (!parsedAnnotation) {
+    throw new Error(
+      `Failed to parse annotation ${JSON.stringify(action.annotation)}`,
+    )
+  }
+
   const editor = action.editor
 
   if (!editor.selection || Range.isCollapsed(editor.selection)) {
@@ -41,6 +57,8 @@ export const addAnnotationActionImplementation: BehaviorActionImplementation<
     reverse: Range.isBackward(editor.selection),
   })
 
+  let blockIndex = 0
+
   for (const [block, blockPath] of selectedBlocks) {
     if (block.children.length === 0) {
       continue
@@ -50,11 +68,13 @@ export const addAnnotationActionImplementation: BehaviorActionImplementation<
       continue
     }
 
-    const annotationKey = context.keyGenerator()
+    // Make sure we don't generate more keys than needed
+    const annotationKey =
+      blockIndex === 0 ? parsedAnnotation._key : context.keyGenerator()
     const markDefs = block.markDefs ?? []
     const existingMarkDef = markDefs.find(
       (markDef) =>
-        markDef._type === action.annotation.name &&
+        markDef._type === parsedAnnotation._type &&
         markDef._key === annotationKey,
     )
 
@@ -65,9 +85,8 @@ export const addAnnotationActionImplementation: BehaviorActionImplementation<
           markDefs: [
             ...markDefs,
             {
-              _type: action.annotation.name,
+              ...parsedAnnotation,
               _key: annotationKey,
-              ...action.annotation.value,
             },
           ],
         },
@@ -100,7 +119,7 @@ export const addAnnotationActionImplementation: BehaviorActionImplementation<
       const existingSameTypeAnnotations = marks.filter((mark) =>
         markDefs.some(
           (markDef) =>
-            markDef._key === mark && markDef._type === action.annotation.name,
+            markDef._key === mark && markDef._type === parsedAnnotation._type,
         ),
       )
 
@@ -119,6 +138,8 @@ export const addAnnotationActionImplementation: BehaviorActionImplementation<
 
       spanPath = [{_key: block._key}, 'children', {_key: span._key}]
     }
+
+    blockIndex++
   }
 
   if (markDefPath && spanPath) {

package/src/behavior-actions/behavior.action.decorator.add.ts

@@ -18,17 +18,17 @@ export const decoratorAddActionImplementation: BehaviorActionImplementation<
     KEY_TO_VALUE_ELEMENT.get(editor),
   )
 
-  const manualAnchor = action.offsets?.anchor
+  const manualAnchor = action.at?.anchor
     ? utils.blockOffsetToSpanSelectionPoint({
         value,
-        blockOffset: action.offsets.anchor,
+        blockOffset: action.at.anchor,
         direction: 'backward',
       })
     : undefined
-  const manualFocus = action.offsets?.focus
+  const manualFocus = action.at?.focus
     ? utils.blockOffsetToSpanSelectionPoint({
         value,
-        blockOffset: action.offsets.focus,
+        blockOffset: action.at.focus,
         direction: 'forward',
       })
     : undefined

package/src/behavior-actions/behavior.action.delete.text.ts

@@ -17,10 +17,7 @@ export const deleteTextActionImplementation: BehaviorActionImplementation<
 
   const selection = utils.blockOffsetsToSelection({
     value,
-    offsets: {
-      anchor: action.anchor,
-      focus: action.focus,
-    },
+    offsets: action.at,
   })
 
   if (!selection) {

package/src/behavior-actions/behavior.action.delete.ts

@@ -4,11 +4,11 @@ import type {BehaviorActionImplementation} from './behavior.actions'
 export const deleteActionImplementation: BehaviorActionImplementation<
   'delete'
 > = ({action}) => {
-  const range = toSlateRange(action.selection, action.editor)
+  const range = toSlateRange(action.at, action.editor)
 
   if (!range) {
     throw new Error(
-      `Failed to get Slate Range for selection ${JSON.stringify(action.selection)}`,
+      `Failed to get Slate Range for selection ${JSON.stringify(action.at)}`,
     )
   }
 

package/src/behavior-actions/behavior.action.insert-inline-object.ts

@@ -1,17 +1,24 @@
 import {Editor, Transforms, type Element} from 'slate'
+import {parseInlineObject} from '../internal-utils/parse-blocks'
 import {toSlateValue} from '../internal-utils/values'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const insertInlineObjectActionImplementation: BehaviorActionImplementation<
   'insert.inline object'
 > = ({context, action}) => {
-  if (
-    !context.schema.inlineObjects.some(
-      (inlineObject) => inlineObject.name === action.inlineObject.name,
+  const parsedInlineObject = parseInlineObject({
+    context,
+    inlineObject: {
+      _type: action.inlineObject.name,
+      ...(action.inlineObject.value ?? {}),
+    },
+    options: {refreshKeys: false},
+  })
+
+  if (!parsedInlineObject) {
+    throw new Error(
+      `Failed to parse inline object ${JSON.stringify(action.inlineObject)}`,
     )
-  ) {
-    console.error('Unable to insert unknown inline object')
-    return
   }
 
   if (!action.editor.selection) {
@@ -36,13 +43,7 @@ export const insertInlineObjectActionImplementation: BehaviorActionImplementatio
       {
         _type: context.schema.block.name,
         _key: context.keyGenerator(),
-        children: [
-          {
-            _type: action.inlineObject.name,
-            _key: context.keyGenerator(),
-            ...(action.inlineObject.value ?? {}),
-          },
-        ],
+        children: [parsedInlineObject],
       },
     ],
     {schemaTypes: context.schema},

package/src/behavior-actions/behavior.action.select.ts

@@ -5,7 +5,7 @@ import type {BehaviorActionImplementation} from './behavior.actions'
 export const selectActionImplementation: BehaviorActionImplementation<
   'select'
 > = ({action}) => {
-  const newSelection = toSlateRange(action.selection, action.editor)
+  const newSelection = toSlateRange(action.at, action.editor)
 
   if (newSelection) {
     Transforms.select(action.editor, newSelection)

package/src/behavior-actions/{behavior.action.insert-break.ts → behavior.action.split.block.ts}

@@ -1,10 +1,10 @@
 import {isEqual} from 'lodash'
-import {Editor, insertText, Node, Path, Transforms} from 'slate'
+import {Editor, Node, Path, Transforms} from 'slate'
 import type {SlateTextBlock, VoidElement} from '../types/slate'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
-export const insertBreakActionImplementation: BehaviorActionImplementation<
-  'insert.break'
+export const splitBlockActionImplementation: BehaviorActionImplementation<
+  'split.block'
 > = ({context, action}) => {
   const keyGenerator = context.keyGenerator
   const schema = context.schema
@@ -144,9 +144,3 @@ export const insertBreakActionImplementation: BehaviorActionImplementation<
 
   Transforms.splitNodes(editor, {always: true})
 }
-
-export const insertSoftBreakActionImplementation: BehaviorActionImplementation<
-  'insert.soft break'
-> = ({action}) => {
-  insertText(action.editor, '\n')
-}

package/src/behavior-actions/behavior.actions.ts

@@ -21,10 +21,6 @@ import {deleteForwardActionImplementation} from './behavior.action.delete.forwar
 import {deleteTextActionImplementation} from './behavior.action.delete.text'
 import {effectActionImplementation} from './behavior.action.effect'
 import {focusActionImplementation} from './behavior.action.focus'
-import {
-  insertBreakActionImplementation,
-  insertSoftBreakActionImplementation,
-} from './behavior.action.insert-break'
 import {insertInlineObjectActionImplementation} from './behavior.action.insert-inline-object'
 import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import {insertBlockActionImplementation} from './behavior.action.insert.block'
@@ -32,6 +28,7 @@ import {insertTextActionImplementation} from './behavior.action.insert.text'
 import {moveBlockActionImplementation} from './behavior.action.move.block'
 import {noopActionImplementation} from './behavior.action.noop'
 import {selectActionImplementation} from './behavior.action.select'
+import {splitBlockActionImplementation} from './behavior.action.split.block'
 
 const debug = debugWithName('behaviors:action')
 
@@ -72,15 +69,14 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'history.redo': historyRedoActionImplementation,
   'history.undo': historyUndoActionImplementation,
   'insert.block': insertBlockActionImplementation,
-  'insert.break': insertBreakActionImplementation,
   'insert.inline object': insertInlineObjectActionImplementation,
-  'insert.soft break': insertSoftBreakActionImplementation,
   'insert.span': insertSpanActionImplementation,
   'insert.text': insertTextActionImplementation,
   'effect': effectActionImplementation,
   'move.block': moveBlockActionImplementation,
   'noop': noopActionImplementation,
   'select': selectActionImplementation,
+  'split.block': splitBlockActionImplementation,
 }
 
 export function performAction({
@@ -219,20 +215,6 @@ export function performAction({
       })
       break
     }
-    case 'insert.break': {
-      behaviorActionImplementations['insert.break']({
-        context,
-        action,
-      })
-      break
-    }
-    case 'insert.soft break': {
-      behaviorActionImplementations['insert.soft break']({
-        context,
-        action,
-      })
-      break
-    }
     case 'insert.span': {
       behaviorActionImplementations['insert.span']({
         context,
@@ -261,6 +243,13 @@ export function performAction({
       })
       break
     }
+    case 'split.block': {
+      behaviorActionImplementations['split.block']({
+        context,
+        action,
+      })
+      break
+    }
     default: {
       behaviorActionImplementations.select({
         context,

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

@@ -16,10 +16,10 @@ export const abstractDecoratorBehaviors = [
   defineBehavior({
     on: 'decorator.toggle',
     guard: ({snapshot, event}) => {
-      const manualSelection = event.offsets
+      const manualSelection = event.at
         ? blockOffsetsToSelection({
             value: snapshot.context.value,
-            offsets: event.offsets,
+            offsets: event.at,
           })
         : null
 

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

@@ -63,7 +63,7 @@ export const abstractInsertBehaviors = [
               index === 0
                 ? [
                     raise({
-                      type: 'insert.break',
+                      type: 'split.block',
                     }),
                     raise({
                       type: 'select.previous block',
@@ -115,4 +115,12 @@ export const abstractInsertBehaviors = [
         ),
     ],
   }),
+  defineBehavior({
+    on: 'insert.break',
+    actions: [() => [raise({type: 'split.block'})]],
+  }),
+  defineBehavior({
+    on: 'insert.soft break',
+    actions: [() => [raise({type: 'insert.text', text: '\n'})]],
+  }),
 ]

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

@@ -29,7 +29,7 @@ export const abstractSelectBehaviors = [
       (_, {selection}) => [
         raise({
           type: 'select',
-          selection,
+          at: selection,
         }),
       ],
     ],
@@ -54,7 +54,7 @@ export const abstractSelectBehaviors = [
       (_, {selection}) => [
         raise({
           type: 'select',
-          selection,
+          at: selection,
         }),
       ],
     ],

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

@@ -28,7 +28,7 @@ const addAnnotationOnCollapsedSelection = defineBehavior({
   },
   actions: [
     ({event}, {caretWordSelection}) => [
-      raise({type: 'select', selection: caretWordSelection}),
+      raise({type: 'select', at: caretWordSelection}),
       raise({type: 'annotation.add', annotation: event.annotation}),
     ],
   ],

package/src/behaviors/behavior.core.block-objects.ts

@@ -132,7 +132,7 @@ const clickingAboveLonelyBlockObject = defineBehavior({
     ({snapshot, event}) => [
       raise({
         type: 'select',
-        selection: event.position.selection,
+        at: event.position.selection,
       }),
       raise({
         type: 'insert.block',
@@ -186,7 +186,7 @@ const clickingBelowLonelyBlockObject = defineBehavior({
     ({snapshot, event}) => [
       raise({
         type: 'select',
-        selection: event.position.selection,
+        at: event.position.selection,
       }),
       raise({
         type: 'insert.block',
@@ -228,7 +228,7 @@ const deletingEmptyTextBlockAfterBlockObject = defineBehavior({
       }),
       raise({
         type: 'select',
-        selection: {
+        at: {
           anchor: {path: previousBlock.path, offset: 0},
           focus: {path: previousBlock.path, offset: 0},
         },
@@ -265,7 +265,7 @@ const deletingEmptyTextBlockBeforeBlockObject = defineBehavior({
       }),
       raise({
         type: 'select',
-        selection: {
+        at: {
           anchor: {path: nextBlock.path, offset: 0},
           focus: {path: nextBlock.path, offset: 0},
         },

package/src/behaviors/behavior.decorator-pair.ts

@@ -165,7 +165,7 @@ export function createDecoratorPairBehavior(config: {
         {
           type: 'decorator.add',
           decorator,
-          offsets: {
+          at: {
             anchor: prefixOffsets.focus,
             focus: suffixOffsets.anchor,
           },
@@ -173,12 +173,12 @@ export function createDecoratorPairBehavior(config: {
         // Delete the suffix
         {
           type: 'delete.text',
-          ...suffixOffsets,
+          at: suffixOffsets,
         },
         // Delete the prefix
         {
           type: 'delete.text',
-          ...prefixOffsets,
+          at: prefixOffsets,
         },
         // Toggle the decorator off so the next inserted text isn't emphasized
         {

package/src/behaviors/behavior.default.ts

@@ -149,7 +149,7 @@ export const defaultBehaviors = [
         }),
         raise({
           type: 'delete',
-          selection,
+          at: selection,
         }),
       ],
     ],
@@ -220,7 +220,7 @@ export const defaultBehaviors = [
       ({event}) => [
         raise({
           type: 'select',
-          selection: event.position.selection,
+          at: event.position.selection,
         }),
         raise({
           type: 'deserialize',
@@ -293,7 +293,7 @@ export const defaultBehaviors = [
           : [
               raise({
                 type: 'delete',
-                selection: dragOrigin.selection,
+                at: dragOrigin.selection,
               }),
             ]),
         raise({
@@ -414,7 +414,7 @@ export const defaultBehaviors = [
       ({event}, {selection}) => [
         raise({
           type: 'delete',
-          selection,
+          at: selection,
         }),
         raise({
           type: 'deserialize',

package/src/behaviors/behavior.emoji-picker.ts

@@ -131,13 +131,15 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           },
           {
             type: 'delete.text',
-            anchor: {
-              path: params.focusBlock.path,
-              offset: params.textBeforeLength - params.emojiStringLength,
-            },
-            focus: {
-              path: params.focusBlock.path,
-              offset: params.textBeforeLength,
+            at: {
+              anchor: {
+                path: params.focusBlock.path,
+                offset: params.textBeforeLength - params.emojiStringLength,
+              },
+              focus: {
+                path: params.focusBlock.path,
+                offset: params.textBeforeLength,
+              },
             },
           },
           {
@@ -225,13 +227,15 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
               },
               {
                 type: 'delete.text',
-                anchor: {
-                  path: params.focusBlock.path,
-                  offset: params.textBeforeLength - params.emojiStringLength,
-                },
-                focus: {
-                  path: params.focusBlock.path,
-                  offset: params.textBeforeLength,
+                at: {
+                  anchor: {
+                    path: params.focusBlock.path,
+                    offset: params.textBeforeLength - params.emojiStringLength,
+                  },
+                  focus: {
+                    path: params.focusBlock.path,
+                    offset: params.textBeforeLength,
+                  },
                 },
               },
               {

package/src/behaviors/behavior.markdown.ts

@@ -137,13 +137,15 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
         {
           type: 'delete.text',
-          anchor: {
-            path: focusTextBlock.path,
-            offset: 0,
-          },
-          focus: {
-            path: focusTextBlock.path,
-            offset: 2,
+          at: {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: 2,
+            },
           },
         },
       ],
@@ -213,7 +215,7 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
         {
           type: 'delete.text',
-          ...hrBlockOffsets,
+          at: hrBlockOffsets,
         },
       ],
     ],
@@ -348,13 +350,15 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
         {
           type: 'delete.text',
-          anchor: {
-            path: focusTextBlock.path,
-            offset: 0,
-          },
-          focus: {
-            path: focusTextBlock.path,
-            offset: level + 1,
+          at: {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: level + 1,
+            },
           },
         },
       ],
@@ -485,13 +489,15 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
         },
         {
           type: 'delete.text',
-          anchor: {
-            path: focusTextBlock.path,
-            offset: 0,
-          },
-          focus: {
-            path: focusTextBlock.path,
-            offset: listItemLength + 1,
+          at: {
+            anchor: {
+              path: focusTextBlock.path,
+              offset: 0,
+            },
+            focus: {
+              path: focusTextBlock.path,
+              offset: listItemLength + 1,
+            },
           },
         },
       ],

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

@@ -73,13 +73,12 @@ const syntheticBehaviorEventTypes = [
   'history.redo',
   'history.undo',
   'insert.inline object',
-  'insert.break',
-  'insert.soft break',
   'insert.block',
   'insert.span',
   'insert.text',
   'move.block',
   'select',
+  'split.block',
 ] as const
 
 type SyntheticBehaviorEventType = (typeof syntheticBehaviorEventTypes)[number]
@@ -120,7 +119,10 @@ export type SyntheticBehaviorEvent =
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'decorator.add'>
       decorator: string
-      offsets?: {anchor: BlockOffset; focus: BlockOffset}
+      at?: {
+        anchor: BlockOffset
+        focus: BlockOffset
+      }
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'decorator.remove'>
@@ -128,7 +130,7 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete'>
-      selection: NonNullable<EditorSelection>
+      at: NonNullable<EditorSelection>
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.backward'>
@@ -144,8 +146,10 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'delete.text'>
-      anchor: BlockOffset
-      focus: BlockOffset
+      at: {
+        anchor: BlockOffset
+        focus: BlockOffset
+      }
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'focus'>
@@ -163,12 +167,6 @@ export type SyntheticBehaviorEvent =
         value?: {[prop: string]: unknown}
       }
     }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'insert.break'>
-    }
-  | {
-      type: StrictExtract<SyntheticBehaviorEventType, 'insert.soft break'>
-    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.block'>
       block: BlockWithOptionalKey
@@ -195,7 +193,10 @@ export type SyntheticBehaviorEvent =
     }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select'>
-      selection: EditorSelection
+      at: EditorSelection
+    }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'split.block'>
     }
 
 export type InsertPlacement = 'auto' | 'after' | 'before'
@@ -217,6 +218,8 @@ const abstractBehaviorEventTypes = [
   'deserialization.success',
   'deserialization.failure',
   'insert.blocks',
+  'insert.break',
+  'insert.soft break',
   'list item.add',
   'list item.remove',
   'list item.toggle',
@@ -248,7 +251,7 @@ export type AbstractBehaviorEvent =
   | {
       type: StrictExtract<AbstractBehaviorEventType, 'decorator.toggle'>
       decorator: string
-      offsets?: {anchor: BlockOffset; focus: BlockOffset}
+      at?: {anchor: BlockOffset; focus: BlockOffset}
     }
   | {
       type: StrictExtract<AbstractBehaviorEventType, 'deserialize'>
@@ -317,6 +320,12 @@ export type AbstractBehaviorEvent =
       blocks: Array<PortableTextBlock>
       placement: InsertPlacement
     }
+  | {
+      type: StrictExtract<AbstractBehaviorEventType, 'insert.break'>
+    }
+  | {
+      type: StrictExtract<AbstractBehaviorEventType, 'insert.soft break'>
+    }
   | {
       type: StrictExtract<AbstractBehaviorEventType, 'list item.add'>
       listItem: string