@portabletext/editor 1.33.5 → 1.34.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.33.5",
+  "version": "1.34.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,15 +79,15 @@
     "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.7",
+    "@portabletext/block-tools": "1.1.8",
     "@portabletext/patches": "1.1.3"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",
     "@sanity/diff-match-patch": "^3.2.0",
     "@sanity/pkg-utils": "^7.0.4",
-    "@sanity/schema": "^3.75.0",
-    "@sanity/types": "^3.75.0",
+    "@sanity/schema": "^3.75.1",
+    "@sanity/types": "^3.75.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/debug": "^4.1.12",
@@ -115,8 +115,8 @@
     "racejar": "1.2.0"
   },
   "peerDependencies": {
-    "@sanity/schema": "^3.75.0",
-    "@sanity/types": "^3.75.0",
+    "@sanity/schema": "^3.75.1",
+    "@sanity/types": "^3.75.1",
     "react": "^16.9 || ^17 || ^18 || ^19",
     "rxjs": "^7.8.1"
   },

package/src/behavior-actions/behavior.action.block.set.ts

@@ -1,10 +1,13 @@
-import {Transforms} from 'slate'
+import {Editor, Transforms, type Element as SlateElement} from 'slate'
+import {parseBlock} from '../internal-utils/parse-blocks'
 import {toSlateRange} from '../internal-utils/ranges'
+import {fromSlateValue, toSlateValue} from '../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const blockSetBehaviorActionImplementation: BehaviorActionImplementation<
   'block.set'
-> = ({action}) => {
+> = ({context, action}) => {
   const location = toSlateRange(
     {
       anchor: {path: action.at, offset: 0},
@@ -14,10 +17,50 @@ export const blockSetBehaviorActionImplementation: BehaviorActionImplementation<
   )
 
   if (!location) {
-    return
+    throw new Error(
+      `Unable to convert ${JSON.stringify(action.at)} into a Slate Range`,
+    )
   }
 
-  const {at, editor, type, ...payload} = action
+  const blockEntry = Editor.node(action.editor, location, {depth: 1})
+  const block = blockEntry?.[0]
 
-  Transforms.setNodes(action.editor, payload, {at: location})
+  if (!block) {
+    throw new Error(`Unable to find block at ${JSON.stringify(action.at)}`)
+  }
+
+  const parsedBlock = fromSlateValue(
+    [block],
+    context.schema.block.name,
+    KEY_TO_VALUE_ELEMENT.get(action.editor),
+  ).at(0)
+
+  if (!parsedBlock) {
+    throw new Error(`Unable to parse block at ${JSON.stringify(action.at)}`)
+  }
+
+  const {_type, ...filteredProps} = action.props
+
+  const updatedBlock = parseBlock({
+    context,
+    block: {
+      ...parsedBlock,
+      ...filteredProps,
+    },
+    options: {refreshKeys: false},
+  })
+
+  if (!updatedBlock) {
+    throw new Error(`Unable to update block at ${JSON.stringify(action.at)}`)
+  }
+
+  const slateBlock = toSlateValue([updatedBlock], {
+    schemaTypes: context.schema,
+  })?.at(0) as SlateElement | undefined
+
+  if (!slateBlock) {
+    throw new Error(`Unable to convert block to Slate value`)
+  }
+
+  Transforms.setNodes(action.editor, slateBlock, {at: location})
 }

package/src/behavior-actions/behavior.action.block.unset.ts

@@ -1,10 +1,14 @@
-import {Transforms} from 'slate'
+import {omit} from 'lodash'
+import {Editor, Transforms} from 'slate'
+import {isTextBlock, parseBlock} from '../internal-utils/parse-blocks'
 import {toSlateRange} from '../internal-utils/ranges'
+import {fromSlateValue} from '../internal-utils/values'
+import {KEY_TO_VALUE_ELEMENT} from '../internal-utils/weakMaps'
 import type {BehaviorActionImplementation} from './behavior.actions'
 
 export const blockUnsetBehaviorActionImplementation: BehaviorActionImplementation<
   'block.unset'
-> = ({action}) => {
+> = ({context, action}) => {
   const location = toSlateRange(
     {
       anchor: {path: action.at, offset: 0},
@@ -14,8 +18,78 @@ export const blockUnsetBehaviorActionImplementation: BehaviorActionImplementatio
   )
 
   if (!location) {
+    throw new Error(
+      `Unable to convert ${JSON.stringify(action.at)} into a Slate Range`,
+    )
+  }
+
+  const blockEntry = Editor.node(action.editor, location, {depth: 1})
+  const block = blockEntry?.[0]
+
+  if (!block) {
+    throw new Error(`Unable to find block at ${JSON.stringify(action.at)}`)
+  }
+
+  const parsedBlock = fromSlateValue(
+    [block],
+    context.schema.block.name,
+    KEY_TO_VALUE_ELEMENT.get(action.editor),
+  ).at(0)
+
+  if (!parsedBlock) {
+    throw new Error(`Unable to parse block at ${JSON.stringify(action.at)}`)
+  }
+
+  if (isTextBlock(context.schema, parsedBlock)) {
+    const propsToRemove = action.props.filter((prop) => prop !== '_type')
+
+    const updatedTextBlock = parseBlock({
+      context,
+      block: omit(parsedBlock, propsToRemove),
+      options: {refreshKeys: false},
+    })
+
+    if (!updatedTextBlock) {
+      throw new Error(`Unable to update block at ${JSON.stringify(action.at)}`)
+    }
+
+    const propsToSet: Record<string, unknown> = {}
+
+    for (const prop of propsToRemove) {
+      if (!(prop in updatedTextBlock)) {
+        propsToSet[prop] = undefined
+      } else {
+        propsToSet[prop] = (updatedTextBlock as Record<string, unknown>)[prop]
+      }
+    }
+
+    Transforms.setNodes(action.editor, propsToSet, {at: location})
+
     return
   }
 
-  Transforms.unsetNodes(action.editor, action.props, {at: location})
+  const updatedBlockObject = parseBlock({
+    context,
+    block: omit(
+      parsedBlock,
+      action.props.filter((prop) => prop !== '_type'),
+    ),
+    options: {refreshKeys: false},
+  })
+
+  if (!updatedBlockObject) {
+    throw new Error(`Unable to update block at ${JSON.stringify(action.at)}`)
+  }
+
+  const {_type, _key, ...props} = updatedBlockObject
+
+  Transforms.setNodes(
+    action.editor,
+    {
+      _type,
+      _key,
+      value: props,
+    },
+    {at: location},
+  )
 }

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

@@ -11,20 +11,42 @@ export const decoratorAddActionImplementation: BehaviorActionImplementation<
 > = ({context, action}) => {
   const editor = action.editor
   const mark = action.decorator
-  const selection = action.selection
-    ? (toSlateRange(action.selection, action.editor) ?? editor.selection)
-    : editor.selection
-
-  if (!selection) {
-    return
-  }
-
   const value = fromSlateValue(
     editor.children,
     context.schema.block.name,
     KEY_TO_VALUE_ELEMENT.get(editor),
   )
 
+  const manualAnchor = action.offsets?.anchor
+    ? utils.blockOffsetToSpanSelectionPoint({
+        value,
+        blockOffset: action.offsets.anchor,
+        direction: 'backward',
+      })
+    : undefined
+  const manualFocus = action.offsets?.focus
+    ? utils.blockOffsetToSpanSelectionPoint({
+        value,
+        blockOffset: action.offsets.focus,
+        direction: 'forward',
+      })
+    : undefined
+  const manualSelection =
+    manualAnchor && manualFocus
+      ? {
+          anchor: manualAnchor,
+          focus: manualFocus,
+        }
+      : undefined
+
+  const selection = manualSelection
+    ? (toSlateRange(manualSelection, action.editor) ?? editor.selection)
+    : editor.selection
+
+  if (!selection) {
+    return
+  }
+
   const editorSelection = toPortableTextRange(value, selection, context.schema)
   const anchorOffset = editorSelection
     ? utils.spanSelectionPointToBlockOffset({

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

@@ -48,8 +48,6 @@ import {
   removeStyleActionImplementation,
   toggleStyleActionImplementation,
 } from './behavior.action.style'
-import {textBlockSetActionImplementation} from './behavior.action.text-block.set'
-import {textBlockUnsetActionImplementation} from './behavior.action.text-block.unset'
 
 export type BehaviorActionImplementationContext = Pick<
   EditorContext,
@@ -266,8 +264,6 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'style.toggle': toggleStyleActionImplementation,
   'style.add': addStyleActionImplementation,
   'style.remove': removeStyleActionImplementation,
-  'text block.set': textBlockSetActionImplementation,
-  'text block.unset': textBlockUnsetActionImplementation,
 }
 
 export function performAction({
@@ -600,25 +596,12 @@ function performDefaultAction({
       })
       break
     }
-    case 'style.toggle': {
+    default: {
       behaviorActionImplementations['style.toggle']({
         context,
         action,
       })
       break
     }
-    case 'text block.set': {
-      behaviorActionImplementations['text block.set']({
-        context,
-        action,
-      })
-      break
-    }
-    default: {
-      behaviorActionImplementations['text block.unset']({
-        context,
-        action,
-      })
-    }
   }
 }

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

@@ -30,7 +30,7 @@ const clearListOnBackspace = defineBehavior({
   actions: [
     (_, {focusTextBlock}) => [
       raise({
-        type: 'text block.unset',
+        type: 'block.unset',
         props: ['listItem', 'level'],
         at: focusTextBlock.path,
       }),
@@ -66,8 +66,8 @@ const unindentListOnBackspace = defineBehavior({
   actions: [
     (_, {focusTextBlock, level}) => [
       raise({
-        type: 'text block.set',
-        level,
+        type: 'block.set',
+        props: {level},
         at: focusTextBlock.path,
       }),
     ],
@@ -93,7 +93,7 @@ const clearListOnEnter = defineBehavior({
   actions: [
     (_, {focusListBlock}) => [
       raise({
-        type: 'text block.unset',
+        type: 'block.unset',
         props: ['listItem', 'level'],
         at: focusListBlock.path,
       }),
@@ -133,11 +133,13 @@ const indentListOnTab = defineBehavior({
     (_, {selectedListBlocks}) =>
       selectedListBlocks.map((selectedListBlock) =>
         raise({
-          type: 'text block.set',
-          level: Math.min(
-            MAX_LIST_LEVEL,
-            Math.max(1, selectedListBlock.node.level + 1),
-          ),
+          type: 'block.set',
+          props: {
+            level: Math.min(
+              MAX_LIST_LEVEL,
+              Math.max(1, selectedListBlock.node.level + 1),
+            ),
+          },
           at: selectedListBlock.path,
         }),
       ),
@@ -176,11 +178,13 @@ const unindentListOnShiftTab = defineBehavior({
     (_, {selectedListBlocks}) =>
       selectedListBlocks.map((selectedListBlock) =>
         raise({
-          type: 'text block.set',
-          level: Math.min(
-            MAX_LIST_LEVEL,
-            Math.max(1, selectedListBlock.node.level - 1),
-          ),
+          type: 'block.set',
+          props: {
+            level: Math.min(
+              MAX_LIST_LEVEL,
+              Math.max(1, selectedListBlock.node.level - 1),
+            ),
+          },
           at: selectedListBlock.path,
         }),
       ),

package/src/behaviors/behavior.markdown-emphasis.ts

@@ -79,10 +79,6 @@ const emphasisListener: CallbackLogicFunction<
           return false
         }
 
-        if (event.text !== '*' && event.text !== '_') {
-          return false
-        }
-
         const focusTextBlock = selectors.getFocusTextBlock({context})
         const selectionStartPoint = selectors.getSelectionStartPoint({context})
         const selectionStartOffset = selectionStartPoint
@@ -104,44 +100,33 @@ const emphasisListener: CallbackLogicFunction<
           const prefixOffsets = {
             anchor: {
               path: focusTextBlock.path,
-              offset: textBefore.length - textToItalic.length + 1,
+              // Example: "foo *bar*".length - "*bar*".length = 4
+              offset: `${textBefore}${event.text}`.length - textToItalic.length,
             },
             focus: {
               path: focusTextBlock.path,
-              offset: textBefore.length - textToItalic.length + 1 + 1,
+              // Example: "foo *bar*".length - "*bar*".length + 1 = 5
+              offset:
+                `${textBefore}${event.text}`.length - textToItalic.length + 1,
             },
           }
           const suffixOffsets = {
             anchor: {
               path: focusTextBlock.path,
-              offset: selectionStartOffset.offset,
+              // Example: "foo *bar|" (8) + "*".length - 1 = 8
+              offset: selectionStartOffset.offset + event.text.length - 1,
             },
             focus: {
               path: focusTextBlock.path,
-              offset: selectionStartOffset.offset + 1,
+              // Example: "foo *bar|" (8) + "*".length = 9
+              offset: selectionStartOffset.offset + event.text.length,
             },
           }
 
-          const anchor = utils.blockOffsetToSpanSelectionPoint({
-            value: context.value,
-            blockOffset: prefixOffsets.focus,
-            direction: 'backward',
-          })
-          const focus = utils.blockOffsetToSpanSelectionPoint({
-            value: context.value,
-            blockOffset: suffixOffsets.anchor,
-            direction: 'forward',
-          })
-
-          if (!anchor || !focus) {
-            return false
-          }
-
           return {
             prefixOffsets,
             suffixOffsets,
             decorator: italicDecorator,
-            selection: {anchor, focus},
           }
         }
 
@@ -151,35 +136,85 @@ const emphasisListener: CallbackLogicFunction<
           const prefixOffsets = {
             anchor: {
               path: focusTextBlock.path,
-              offset: textBefore.length - textToBold.length + 1,
+              // Example: "foo **bar**".length - "**bar**".length = 4
+              offset: `${textBefore}${event.text}`.length - textToBold.length,
             },
             focus: {
               path: focusTextBlock.path,
-              offset: textBefore.length - textToBold.length + 1 + 2,
+              // Example: "foo **bar**".length - "**bar**".length + 2 = 6
+              offset:
+                `${textBefore}${event.text}`.length - textToBold.length + 2,
             },
           }
+
+          const prefixSelection = utils.blockOffsetsToSelection({
+            value: context.value,
+            offsets: prefixOffsets,
+          })
+          const inlineObjectBeforePrefixFocus =
+            selectors.getPreviousInlineObject({
+              context: {
+                ...context,
+                selection: prefixSelection
+                  ? {
+                      anchor: prefixSelection.focus,
+                      focus: prefixSelection.focus,
+                    }
+                  : null,
+              },
+            })
+          const inlineObjectBeforePrefixFocusOffset =
+            inlineObjectBeforePrefixFocus
+              ? utils.childSelectionPointToBlockOffset({
+                  value: context.value,
+                  selectionPoint: {
+                    path: inlineObjectBeforePrefixFocus.path,
+                    offset: 0,
+                  },
+                })
+              : undefined
+
+          if (
+            inlineObjectBeforePrefixFocusOffset &&
+            inlineObjectBeforePrefixFocusOffset.offset >
+              prefixOffsets.anchor.offset &&
+            inlineObjectBeforePrefixFocusOffset.offset <
+              prefixOffsets.focus.offset
+          ) {
+            return false
+          }
+
           const suffixOffsets = {
             anchor: {
               path: focusTextBlock.path,
-              offset: selectionStartOffset.offset - 1,
+              // Example: "foo **bar*|" (10) + "*".length - 2 = 9
+              offset: selectionStartOffset.offset + event.text.length - 2,
             },
             focus: {
               path: focusTextBlock.path,
-              offset: selectionStartOffset.offset + 1,
+              // Example: "foo **bar*|" (10) + "*".length = 11
+              offset: selectionStartOffset.offset + event.text.length,
             },
           }
-          const anchor = utils.blockOffsetToSpanSelectionPoint({
-            value: context.value,
-            blockOffset: prefixOffsets.focus,
-            direction: 'backward',
-          })
-          const focus = utils.blockOffsetToSpanSelectionPoint({
-            value: context.value,
-            blockOffset: suffixOffsets.anchor,
-            direction: 'forward',
+
+          const previousInlineObject = selectors.getPreviousInlineObject({
+            context,
           })
+          const previousInlineObjectOffset = previousInlineObject
+            ? utils.childSelectionPointToBlockOffset({
+                value: context.value,
+                selectionPoint: {
+                  path: previousInlineObject.path,
+                  offset: 0,
+                },
+              })
+            : undefined
 
-          if (!anchor || !focus) {
+          if (
+            previousInlineObjectOffset &&
+            previousInlineObjectOffset.offset > suffixOffsets.anchor.offset &&
+            previousInlineObjectOffset.offset < suffixOffsets.focus.offset
+          ) {
             return false
           }
 
@@ -187,7 +222,6 @@ const emphasisListener: CallbackLogicFunction<
             prefixOffsets,
             suffixOffsets,
             decorator: boldDecorator,
-            selection: {anchor, focus},
           }
         }
 
@@ -195,11 +229,14 @@ const emphasisListener: CallbackLogicFunction<
       },
       actions: [
         ({event}) => [event],
-        (_, {prefixOffsets, suffixOffsets, decorator, selection}) => [
+        (_, {prefixOffsets, suffixOffsets, decorator}) => [
           {
             type: 'decorator.add',
             decorator,
-            selection,
+            offsets: {
+              anchor: prefixOffsets.focus,
+              focus: suffixOffsets.anchor,
+            },
           },
           {
             type: 'delete.text',
@@ -209,6 +246,10 @@ const emphasisListener: CallbackLogicFunction<
             type: 'delete.text',
             ...prefixOffsets,
           },
+          {
+            type: 'decorator.remove',
+            decorator,
+          },
           {
             type: 'effect',
             effect: () => {

package/src/behaviors/behavior.markdown.ts

@@ -127,13 +127,13 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ],
       (_, {focusTextBlock, style}) => [
         {
-          type: 'text block.unset',
+          type: 'block.unset',
           props: ['listItem', 'level'],
           at: focusTextBlock.path,
         },
         {
-          type: 'text block.set',
-          style,
+          type: 'block.set',
+          props: {style},
           at: focusTextBlock.path,
         },
         {
@@ -326,13 +326,13 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ({event}) => [event],
       (_, {focusTextBlock, style, level}) => [
         {
-          type: 'text block.unset',
+          type: 'block.unset',
           props: ['listItem', 'level'],
           at: focusTextBlock.path,
         },
         {
-          type: 'text block.set',
-          style,
+          type: 'block.set',
+          props: {style},
           at: focusTextBlock.path,
         },
         {
@@ -379,8 +379,8 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     actions: [
       (_, {defaultStyle, focusTextBlock}) => [
         {
-          type: 'text block.set',
-          style: defaultStyle,
+          type: 'block.set',
+          props: {style: defaultStyle},
           at: focusTextBlock.path,
         },
       ],
@@ -464,10 +464,12 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       ({event}) => [event],
       (_, {focusTextBlock, style, listItem, listItemLength}) => [
         {
-          type: 'text block.set',
-          listItem,
-          level: 1,
-          style,
+          type: 'block.set',
+          props: {
+            listItem,
+            level: 1,
+            style,
+          },
           at: focusTextBlock.path,
         },
         {

package/src/behaviors/behavior.types.ts

@@ -38,7 +38,7 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'block.set'
       at: [KeyedSegment]
-      [props: string]: unknown
+      props: Record<string, unknown>
     }
   | {
       type: 'block.unset'
@@ -57,7 +57,7 @@ export type SyntheticBehaviorEvent =
   | {
       type: 'decorator.add'
       decorator: string
-      selection?: NonNullable<EditorSelection>
+      offsets?: {anchor: BlockOffset; focus: BlockOffset}
     }
   | {
       type: 'decorator.remove'
@@ -195,18 +195,6 @@ export type SyntheticBehaviorEvent =
       type: 'style.toggle'
       style: string
     }
-  | {
-      type: 'text block.set'
-      at: [KeyedSegment]
-      level?: number
-      listItem?: string
-      style?: string
-    }
-  | {
-      type: 'text block.unset'
-      at: [KeyedSegment]
-      props: Array<'level' | 'listItem' | 'style'>
-    }
   | (PickFromUnion<
       ConverterEvent,
       'type',

package/src/converters/converter.portable-text.deserialize.test.ts

@@ -412,6 +412,7 @@ describe(converterPortableText.deserialize, () => {
           },
         ],
         markDefs: [],
+        level: 1,
         style: 'normal',
       },
     ])
@@ -568,7 +569,7 @@ describe(converterPortableText.deserialize, () => {
             {
               _type: 'span',
               text: 'foo',
-              marks: ['k0'],
+              marks: ['k1'],
             },
             {
               _type: 'span',
@@ -578,7 +579,7 @@ describe(converterPortableText.deserialize, () => {
           ],
           markDefs: [
             {
-              _key: 'k0',
+              _key: 'k1',
               _type: 'link',
               href: 'https://example.com',
             },