@portabletext/editor 1.45.3 → 1.46.0

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: {

package/src/behaviors/behavior.perform-event.ts

@@ -8,6 +8,7 @@ import {
 } from '../editor/with-applying-behavior-actions'
 import {debugWithName} from '../internal-utils/debug'
 import type {PortableTextSlateEditor} from '../types/editor'
+import {defaultBehaviors} from './behavior.default'
 import type {InternalBehaviorAction} from './behavior.types.action'
 import {
   isAbstractBehaviorEvent,
@@ -28,6 +29,7 @@ function eventCategory(event: BehaviorEvent) {
 }
 
 export function performEvent({
+  mode,
   behaviors,
   event,
   editor,
@@ -37,6 +39,7 @@ export function performEvent({
   nativeEvent,
   defaultActionCallback,
 }: {
+  mode: 'raise' | 'execute'
   behaviors: Array<Behavior>
   event: BehaviorEvent
   editor: PortableTextSlateEditor
@@ -62,7 +65,9 @@ export function performEvent({
           editor,
         } satisfies InternalBehaviorAction)
 
-  const eventBehaviors = behaviors.filter((behavior) => {
+  const eventBehaviors = (
+    mode === 'raise' ? [...behaviors, ...defaultBehaviors] : behaviors
+  ).filter((behavior) => {
     // Catches all events
     if (behavior.on === '*') {
       return true
@@ -128,6 +133,7 @@ export function performEvent({
           },
           action: defaultAction,
         })
+        editor.onChange()
       } catch (error) {
         console.error(
           new Error(
@@ -136,11 +142,10 @@ export function performEvent({
         )
       }
     })
-    editor.onChange()
     return
   }
 
-  const editorSnapshot = getSnapshot()
+  const guardSnapshot = getSnapshot()
 
   let behaviorOverwritten = false
 
@@ -148,8 +153,7 @@ export function performEvent({
     const shouldRun =
       eventBehavior.guard === undefined ||
       eventBehavior.guard({
-        context: editorSnapshot.context,
-        snapshot: editorSnapshot,
+        snapshot: guardSnapshot,
         event,
       })
 
@@ -157,31 +161,36 @@ export function performEvent({
       continue
     }
 
-    const actionSets = eventBehavior.actions.map((actionSet) =>
-      actionSet(
+    for (const actionSet of eventBehavior.actions) {
+      const actionsSnapshot = getSnapshot()
+
+      const actions = actionSet(
         {
-          context: editorSnapshot.context,
-          snapshot: editorSnapshot,
+          snapshot: actionsSnapshot,
           event,
         },
         shouldRun,
-      ),
-    )
+      )
 
-    for (const actionSet of actionSets) {
-      if (actionSet.length === 0) {
+      if (actions.length === 0) {
         continue
       }
 
       behaviorOverwritten =
         behaviorOverwritten ||
-        actionSet.some((action) => action.type !== 'effect')
+        actions.some((action) => action.type !== 'effect')
 
       withApplyingBehaviorActionSet(editor, () => {
-        for (const action of actionSet) {
+        for (const action of actions) {
           if (action.type === 'raise') {
             performEvent({
-              behaviors,
+              mode,
+              behaviors:
+                mode === 'execute'
+                  ? isCustomBehaviorEvent(action.event)
+                    ? [...behaviors, ...defaultBehaviors]
+                    : defaultBehaviors
+                  : [...behaviors, ...defaultBehaviors],
               event: action.event,
               editor,
               keyGenerator,
@@ -194,6 +203,46 @@ export function performEvent({
             continue
           }
 
+          if (action.type === 'execute') {
+            if (
+              isAbstractBehaviorEvent(action.event) ||
+              isCustomBehaviorEvent(action.event)
+            ) {
+              performEvent({
+                mode: 'execute',
+                behaviors: isCustomBehaviorEvent(action.event)
+                  ? [...behaviors, ...defaultBehaviors]
+                  : defaultBehaviors,
+                event: action.event,
+                editor,
+                keyGenerator,
+                schema,
+                getSnapshot,
+                defaultActionCallback: undefined,
+                nativeEvent: undefined,
+              })
+            } else {
+              try {
+                performAction({
+                  context: {
+                    keyGenerator,
+                    schema,
+                  },
+                  action: {...action.event, editor},
+                })
+              } catch (error) {
+                console.error(
+                  new Error(
+                    `Performing action "${action.event.type}" as a result of "${event.type}" failed due to: ${error.message}`,
+                  ),
+                )
+                break
+              }
+            }
+
+            continue
+          }
+
           const internalAction = {
             ...action,
             editor,
@@ -216,8 +265,8 @@ export function performEvent({
             break
           }
         }
+        editor.onChange()
       })
-      editor.onChange()
     }
 
     if (behaviorOverwritten) {
@@ -255,6 +304,7 @@ export function performEvent({
           },
           action: defaultAction,
         })
+        editor.onChange()
       } catch (error) {
         console.error(
           new Error(
@@ -263,6 +313,5 @@ export function performEvent({
         )
       }
     })
-    editor.onChange()
   }
 }

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

@@ -1,5 +1,5 @@
-import type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
-import type {OmitFromUnion, PickFromUnion} from '../type-utils'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+import type {PickFromUnion} from '../type-utils'
 import type {PortableTextSlateEditor} from '../types/editor'
 import type {
   AbstractBehaviorEvent,
@@ -11,7 +11,13 @@ import type {
  * @beta
  */
 export type BehaviorAction =
-  | SyntheticBehaviorEvent
+  | {
+      type: 'execute'
+      event:
+        | AbstractBehaviorEvent
+        | SyntheticBehaviorEvent
+        | CustomBehaviorEvent
+    }
   | {
       type: 'raise'
       event:
@@ -27,6 +33,15 @@ export type BehaviorAction =
       effect: () => void
     }
 
+/**
+ * @beta
+ */
+export function execute(
+  event: AbstractBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent,
+): PickFromUnion<BehaviorAction, 'type', 'execute'> {
+  return {type: 'execute', event}
+}
+
 /**
  * @beta
  */
@@ -36,26 +51,37 @@ export function raise(
   return {type: 'raise', event}
 }
 
+/**
+ * @beta
+ */
+export function effect(
+  effect: () => void,
+): PickFromUnion<BehaviorAction, 'type', 'effect'> {
+  return {type: 'effect', effect}
+}
+
+/**
+ * @beta
+ */
+export function noop(): PickFromUnion<BehaviorAction, 'type', 'noop'> {
+  return {type: 'noop'}
+}
+
 /**
  * @beta
  */
 export type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (
   payload: {
-    /**
-     * @deprecated
-     * Use `snapshot` instead
-     */
-    context: EditorContext
     snapshot: EditorSnapshot
     event: TBehaviorEvent
   },
   guardResponse: TGuardResponse,
 ) => Array<BehaviorAction>
 
-export type InternalBehaviorAction = OmitFromUnion<
-  BehaviorAction,
-  'type',
-  'raise'
-> & {
+export type InternalBehaviorAction = (
+  | SyntheticBehaviorEvent
+  | {type: 'noop'}
+  | {type: 'effect'; effect: () => void}
+) & {
   editor: PortableTextSlateEditor
 }

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

@@ -1,14 +1,9 @@
-import type {EditorContext, EditorSnapshot} from '../editor/editor-snapshot'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
 
 /**
  * @beta
  */
 export type BehaviorGuard<TBehaviorEvent, TGuardResponse> = (payload: {
-  /**
-   * @deprecated
-   * Use `snapshot` instead
-   */
-  context: EditorContext
   snapshot: EditorSnapshot
   event: TBehaviorEvent
 }) => TGuardResponse | false

package/src/behaviors/index.ts

@@ -14,7 +14,10 @@ export {
 } from './behavior.markdown'
 
 export {
+  execute,
+  noop,
   raise,
+  effect,
   type BehaviorAction,
   type BehaviorActionSet,
 } from './behavior.types.action'

package/src/editor/components/Synchronizer.tsx

@@ -25,7 +25,10 @@ export interface SynchronizerProps {
 export function Synchronizer(props: SynchronizerProps) {
   const {editorActor, slateEditor} = props
 
-  const value = useSelector(props.editorActor, (s) => s.context.value)
+  const incomingValue = useSelector(
+    props.editorActor,
+    (s) => s.context.incomingValue,
+  )
   const readOnly = useSelector(props.editorActor, (s) =>
     s.matches({'edit mode': 'read only'}),
   )
@@ -110,8 +113,8 @@ export function Synchronizer(props: SynchronizerProps) {
 
   useEffect(() => {
     debug('Value from props changed, syncing new value')
-    syncActorRef.send({type: 'update value', value})
-  }, [syncActorRef, value])
+    syncActorRef.send({type: 'update value', value: incomingValue})
+  }, [syncActorRef, incomingValue])
 
   // Subscribe to, and handle changes from the editor
   useEffect(() => {

package/src/editor/create-editor.ts

@@ -116,7 +116,7 @@ function editorConfigToMachineInput(config: EditorConfig) {
             ? config.schema
             : compileType(config.schema),
         ),
-    value: config.initialValue,
+    initialValue: config.initialValue,
   } as const
 }