@portabletext/editor 1.45.4 → 1.47.0

package/lib/selectors/index.d.cts

@@ -255,7 +255,13 @@ declare type Behavior<
  * @beta
  */
 declare type BehaviorAction =
-  | SyntheticBehaviorEvent
+  | {
+      type: 'execute'
+      event:
+        | AbstractBehaviorEvent
+        | SyntheticBehaviorEvent
+        | CustomBehaviorEvent
+    }
   | {
       type: 'raise'
       event:
@@ -5442,11 +5448,19 @@ declare type SyntheticBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>
       text: string
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.backward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>
       at: [KeyedSegment]
       to: [KeyedSegment]
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select'>
       at: EditorSelection
@@ -5483,7 +5497,9 @@ declare const syntheticBehaviorEventTypes: readonly [
   'insert.block',
   'insert.span',
   'insert.text',
+  'move.backward',
   'move.block',
+  'move.forward',
   'select',
   'split.block',
 ]

package/lib/selectors/index.d.ts

@@ -255,7 +255,13 @@ declare type Behavior<
  * @beta
  */
 declare type BehaviorAction =
-  | SyntheticBehaviorEvent
+  | {
+      type: 'execute'
+      event:
+        | AbstractBehaviorEvent
+        | SyntheticBehaviorEvent
+        | CustomBehaviorEvent
+    }
   | {
       type: 'raise'
       event:
@@ -5442,11 +5448,19 @@ declare type SyntheticBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>
       text: string
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.backward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>
       at: [KeyedSegment]
       to: [KeyedSegment]
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select'>
       at: EditorSelection
@@ -5483,7 +5497,9 @@ declare const syntheticBehaviorEventTypes: readonly [
   'insert.block',
   'insert.span',
   'insert.text',
+  'move.backward',
   'move.block',
+  'move.forward',
   'select',
   'split.block',
 ]

package/lib/utils/index.d.cts

@@ -255,7 +255,13 @@ declare type Behavior<
  * @beta
  */
 declare type BehaviorAction =
-  | SyntheticBehaviorEvent
+  | {
+      type: 'execute'
+      event:
+        | AbstractBehaviorEvent
+        | SyntheticBehaviorEvent
+        | CustomBehaviorEvent
+    }
   | {
       type: 'raise'
       event:
@@ -5276,11 +5282,19 @@ declare type SyntheticBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>
       text: string
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.backward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>
       at: [KeyedSegment]
       to: [KeyedSegment]
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select'>
       at: EditorSelection
@@ -5317,7 +5331,9 @@ declare const syntheticBehaviorEventTypes: readonly [
   'insert.block',
   'insert.span',
   'insert.text',
+  'move.backward',
   'move.block',
+  'move.forward',
   'select',
   'split.block',
 ]

package/lib/utils/index.d.ts

@@ -255,7 +255,13 @@ declare type Behavior<
  * @beta
  */
 declare type BehaviorAction =
-  | SyntheticBehaviorEvent
+  | {
+      type: 'execute'
+      event:
+        | AbstractBehaviorEvent
+        | SyntheticBehaviorEvent
+        | CustomBehaviorEvent
+    }
   | {
       type: 'raise'
       event:
@@ -5276,11 +5282,19 @@ declare type SyntheticBehaviorEvent =
       type: StrictExtract<SyntheticBehaviorEventType, 'insert.text'>
       text: string
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.backward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'move.block'>
       at: [KeyedSegment]
       to: [KeyedSegment]
     }
+  | {
+      type: StrictExtract<SyntheticBehaviorEventType, 'move.forward'>
+      distance: number
+    }
   | {
       type: StrictExtract<SyntheticBehaviorEventType, 'select'>
       at: EditorSelection
@@ -5317,7 +5331,9 @@ declare const syntheticBehaviorEventTypes: readonly [
   'insert.block',
   'insert.span',
   'insert.text',
+  'move.backward',
   'move.block',
+  'move.forward',
   'select',
   'split.block',
 ]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.45.4",
+  "version": "1.47.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",
@@ -79,8 +79,8 @@
     "slate-react": "0.112.1",
     "use-effect-event": "^1.0.2",
     "xstate": "^5.19.2",
-    "@portabletext/block-tools": "1.1.17",
-    "@portabletext/patches": "1.1.3"
+    "@portabletext/patches": "1.1.3",
+    "@portabletext/block-tools": "1.1.17"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

package/src/behavior-actions/behavior.action.move.backward.ts

@@ -0,0 +1,12 @@
+import {Transforms} from 'slate'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const moveBackwardActionImplementation: BehaviorActionImplementation<
+  'move.backward'
+> = ({action}) => {
+  Transforms.move(action.editor, {
+    unit: 'character',
+    distance: action.distance,
+    reverse: true,
+  })
+}

package/src/behavior-actions/behavior.action.move.forward.ts

@@ -0,0 +1,11 @@
+import {Transforms} from 'slate'
+import type {BehaviorActionImplementation} from './behavior.actions'
+
+export const moveForwardActionImplementation: BehaviorActionImplementation<
+  'move.forward'
+> = ({action}) => {
+  Transforms.move(action.editor, {
+    unit: 'character',
+    distance: action.distance,
+  })
+}

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

@@ -24,7 +24,9 @@ import {insertInlineObjectActionImplementation} from './behavior.action.insert-i
 import {insertSpanActionImplementation} from './behavior.action.insert-span'
 import {insertBlockActionImplementation} from './behavior.action.insert.block'
 import {insertTextActionImplementation} from './behavior.action.insert.text'
+import {moveBackwardActionImplementation} from './behavior.action.move.backward'
 import {moveBlockActionImplementation} from './behavior.action.move.block'
+import {moveForwardActionImplementation} from './behavior.action.move.forward'
 import {noopActionImplementation} from './behavior.action.noop'
 import {selectActionImplementation} from './behavior.action.select'
 import {splitBlockActionImplementation} from './behavior.action.split.block'
@@ -71,7 +73,9 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'insert.span': insertSpanActionImplementation,
   'insert.text': insertTextActionImplementation,
   'effect': effectActionImplementation,
+  'move.backward': moveBackwardActionImplementation,
   'move.block': moveBlockActionImplementation,
+  'move.forward': moveForwardActionImplementation,
   'noop': noopActionImplementation,
   'select': selectActionImplementation,
   'split.block': splitBlockActionImplementation,
@@ -220,6 +224,13 @@ export function performAction({
       })
       break
     }
+    case 'move.backward': {
+      behaviorActionImplementations['move.backward']({
+        context,
+        action,
+      })
+      break
+    }
     case 'move.block': {
       behaviorActionImplementations['move.block']({
         context,
@@ -227,6 +238,13 @@ export function performAction({
       })
       break
     }
+    case 'move.forward': {
+      behaviorActionImplementations['move.forward']({
+        context,
+        action,
+      })
+      break
+    }
     case 'noop': {
       behaviorActionImplementations.noop({
         context,

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

@@ -3,7 +3,7 @@ import {createPairRegex} from '../internal-utils/get-text-to-emphasize'
 import * as selectors from '../selectors'
 import type {BlockOffset} from '../types/block-offset'
 import * as utils from '../utils'
-import {raise} from './behavior.types.action'
+import {effect, execute} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 export function createDecoratorPairBehavior(config: {
@@ -160,43 +160,40 @@ export function createDecoratorPairBehavior(config: {
     },
     actions: [
       // Insert the text as usual in its own undo step
-      ({event}) => [event],
+      ({event}) => [execute(event)],
       (_, {prefixOffsets, suffixOffsets, decorator}) => [
         // Decorate the text between the prefix and suffix
-        {
+        execute({
           type: 'decorator.add',
           decorator,
           at: {
             anchor: prefixOffsets.focus,
             focus: suffixOffsets.anchor,
           },
-        },
+        }),
         // Delete the suffix
-        raise({
+        execute({
           type: 'delete.text',
           at: suffixOffsets,
         }),
         // Delete the prefix
-        raise({
+        execute({
           type: 'delete.text',
           at: prefixOffsets,
         }),
         // Toggle the decorator off so the next inserted text isn't emphasized
-        {
+        execute({
           type: 'decorator.remove',
           decorator,
-        },
-        {
-          type: 'effect',
-          effect: () => {
-            config.onDecorate({
-              ...suffixOffsets.anchor,
-              offset:
-                suffixOffsets.anchor.offset -
-                (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
-            })
-          },
-        },
+        }),
+        effect(() => {
+          config.onDecorate({
+            ...suffixOffsets.anchor,
+            offset:
+              suffixOffsets.anchor.offset -
+              (prefixOffsets.focus.offset - prefixOffsets.anchor.offset),
+          })
+        }),
       ],
     ],
   })

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

@@ -1,7 +1,7 @@
 import {assertEvent, assign, createActor, setup} from 'xstate'
 import {isHotkey} from '../internal-utils/is-hotkey'
 import * as selectors from '../selectors'
-import {raise} from './behavior.types.action'
+import {effect, execute, noop} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 const emojiCharRegEx = /^[a-zA-Z-_0-9]{1}$/
@@ -118,19 +118,16 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
       },
       actions: [
         () => [
-          {
+          execute({
             type: 'insert.text',
             text: ':',
-          },
+          }),
         ],
         (_, params) => [
-          {
-            type: 'effect',
-            effect: () => {
-              emojiPickerActor.send({type: 'select'})
-            },
-          },
-          raise({
+          effect(() => {
+            emojiPickerActor.send({type: 'select'})
+          }),
+          execute({
             type: 'delete.text',
             at: {
               anchor: {
@@ -143,10 +140,10 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
               },
             },
           }),
-          {
+          execute({
             type: 'insert.text',
             text: params.emoji,
-          },
+          }),
         ],
       ],
     }),
@@ -220,13 +217,10 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
         (_, params) => {
           if (params.action === 'select') {
             return [
-              {
-                type: 'effect',
-                effect: () => {
-                  emojiPickerActor.send({type: 'select'})
-                },
-              },
-              raise({
+              effect(() => {
+                emojiPickerActor.send({type: 'select'})
+              }),
+              execute({
                 type: 'delete.text',
                 at: {
                   anchor: {
@@ -239,10 +233,10 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
                   },
                 },
               }),
-              {
+              execute({
                 type: 'insert.text',
                 text: params.emoji,
-              },
+              }),
             ]
           }
 
@@ -250,15 +244,10 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
             return [
               // If we are navigating then we want to hijack the key event and
               // turn it into a noop.
-              {
-                type: 'noop',
-              },
-              {
-                type: 'effect',
-                effect: () => {
-                  emojiPickerActor.send({type: 'navigate up'})
-                },
-              },
+              noop(),
+              effect(() => {
+                emojiPickerActor.send({type: 'navigate up'})
+              }),
             ]
           }
 
@@ -266,25 +255,17 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
             return [
               // If we are navigating then we want to hijack the key event and
               // turn it into a noop.
-              {
-                type: 'noop',
-              },
-              {
-                type: 'effect',
-                effect: () => {
-                  emojiPickerActor.send({type: 'navigate down'})
-                },
-              },
+              noop(),
+              effect(() => {
+                emojiPickerActor.send({type: 'navigate down'})
+              }),
             ]
           }
 
           return [
-            {
-              type: 'effect',
-              effect: () => {
-                emojiPickerActor.send({type: 'reset'})
-              },
-            },
+            effect(() => {
+              emojiPickerActor.send({type: 'reset'})
+            }),
           ]
         },
       ],

package/src/behaviors/behavior.links.ts

@@ -1,6 +1,7 @@
 import type {EditorSchema} from '../editor/define-schema'
 import {looksLikeUrl} from '../internal-utils/looks-like-url'
 import * as selectors from '../selectors'
+import {execute} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 /**
@@ -36,10 +37,10 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
     },
     actions: [
       (_, {annotation}) => [
-        {
+        execute({
           type: 'annotation.add',
           annotation,
-        },
+        }),
       ],
     ],
   })
@@ -68,11 +69,11 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
     },
     actions: [
       (_, {annotation, url}) => [
-        {
+        execute({
           type: 'insert.span',
           text: url,
           annotations: [annotation],
-        },
+        }),
       ],
     ],
   })

package/src/behaviors/behavior.markdown.ts

@@ -3,7 +3,7 @@ import type {EditorSchema} from '../editor/define-schema'
 import * as selectors from '../selectors'
 import {spanSelectionPointToBlockOffset} from '../utils/util.block-offset'
 import {getTextBlockText} from '../utils/util.get-text-block-text'
-import {raise} from './behavior.types.action'
+import {execute} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 /**
@@ -120,23 +120,23 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     },
     actions: [
       () => [
-        {
+        execute({
           type: 'insert.text',
           text: ' ',
-        },
+        }),
       ],
       (_, {focusTextBlock, style}) => [
-        {
+        execute({
           type: 'block.unset',
           props: ['listItem', 'level'],
           at: focusTextBlock.path,
-        },
-        {
+        }),
+        execute({
           type: 'block.set',
           props: {style},
           at: focusTextBlock.path,
-        },
-        raise({
+        }),
+        execute({
           type: 'delete.text',
           at: {
             anchor: {
@@ -200,21 +200,21 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     },
     actions: [
       (_, {hrCharacter}) => [
-        {
+        execute({
           type: 'insert.text',
           text: hrCharacter,
-        },
+        }),
       ],
       (_, {hrObject, hrBlockOffsets}) => [
-        {
+        execute({
           type: 'insert.block',
           placement: 'before',
           block: {
             _type: hrObject.name,
             ...(hrObject.value ?? {}),
           },
-        },
-        raise({
+        }),
+        execute({
           type: 'delete.text',
           at: hrBlockOffsets,
         }),
@@ -238,41 +238,44 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     },
     actions: [
       (_, {hrCharacters}) => [
-        {
+        execute({
           type: 'insert.text',
           text: hrCharacters,
-        },
+        }),
       ],
       ({snapshot}, {hrObject, focusBlock}) =>
         isPortableTextTextBlock(focusBlock.node)
           ? [
-              {
+              execute({
                 type: 'insert.block',
                 block: {
                   _type: snapshot.context.schema.block.name,
                   children: focusBlock.node.children,
                 },
                 placement: 'after',
-              },
-              {
+              }),
+              execute({
                 type: 'insert.block',
                 block: {
                   _type: hrObject.name,
                   ...(hrObject.value ?? {}),
                 },
                 placement: 'after',
-              },
-              {type: 'delete.block', at: focusBlock.path},
+              }),
+              execute({
+                type: 'delete.block',
+                at: focusBlock.path,
+              }),
             ]
           : [
-              {
+              execute({
                 type: 'insert.block',
                 block: {
                   _type: hrObject.name,
                   ...(hrObject.value ?? {}),
                 },
                 placement: 'after',
-              },
+              }),
             ],
     ],
   })
@@ -337,19 +340,19 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       return false
     },
     actions: [
-      ({event}) => [event],
+      ({event}) => [execute(event)],
       (_, {focusTextBlock, style, level}) => [
-        {
+        execute({
           type: 'block.unset',
           props: ['listItem', 'level'],
           at: focusTextBlock.path,
-        },
-        {
+        }),
+        execute({
           type: 'block.set',
           props: {style},
           at: focusTextBlock.path,
-        },
-        raise({
+        }),
+        execute({
           type: 'delete.text',
           at: {
             anchor: {
@@ -394,11 +397,11 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     },
     actions: [
       (_, {defaultStyle, focusTextBlock}) => [
-        {
+        execute({
           type: 'block.set',
           props: {style: defaultStyle},
           at: focusTextBlock.path,
-        },
+        }),
       ],
     ],
   })
@@ -477,9 +480,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
       return false
     },
     actions: [
-      ({event}) => [event],
+      ({event}) => [execute(event)],
       (_, {focusTextBlock, style, listItem, listItemLength}) => [
-        {
+        execute({
           type: 'block.set',
           props: {
             listItem,
@@ -487,8 +490,8 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
             style,
           },
           at: focusTextBlock.path,
-        },
-        raise({
+        }),
+        execute({
           type: 'delete.text',
           at: {
             anchor: {