@portabletext/editor 1.42.0 → 1.43.0

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

@@ -0,0 +1,266 @@
+import type {Behavior, BehaviorEvent} from '.'
+import {performAction} from '../behavior-actions/behavior.actions'
+import type {EditorSchema} from '../editor/define-schema'
+import type {EditorSnapshot} from '../editor/editor-snapshot'
+import {
+  withApplyingBehaviorActions,
+  withApplyingBehaviorActionSet,
+} from '../editor/with-applying-behavior-actions'
+import {debugWithName} from '../internal-utils/debug'
+import type {PortableTextSlateEditor} from '../types/editor'
+import type {InternalBehaviorAction} from './behavior.types.action'
+import {
+  isClipboardBehaviorEvent,
+  isCustomBehaviorEvent,
+  isDragBehaviorEvent,
+  isInputBehaviorEvent,
+  isKeyboardBehaviorEvent,
+  isMouseBehaviorEvent,
+} from './behavior.types.event'
+
+const debug = debugWithName('behaviors:event')
+
+export function performEvent({
+  behaviors,
+  event,
+  editor,
+  keyGenerator,
+  schema,
+  getSnapshot,
+  nativeEvent,
+  defaultActionCallback,
+}: {
+  behaviors: Array<Behavior>
+  event: BehaviorEvent
+  editor: PortableTextSlateEditor
+  keyGenerator: () => string
+  schema: EditorSchema
+  getSnapshot: () => EditorSnapshot
+  defaultActionCallback: (() => void) | undefined
+  nativeEvent:
+    | {
+        preventDefault: () => void
+      }
+    | undefined
+}) {
+  debug(JSON.stringify(event, null, 2))
+
+  const defaultAction =
+    isCustomBehaviorEvent(event) ||
+    isClipboardBehaviorEvent(event) ||
+    isDragBehaviorEvent(event) ||
+    isInputBehaviorEvent(event) ||
+    isKeyboardBehaviorEvent(event) ||
+    isMouseBehaviorEvent(event) ||
+    event.type === 'deserialize' ||
+    event.type === 'serialize'
+      ? undefined
+      : ({
+          ...event,
+          editor,
+        } satisfies InternalBehaviorAction)
+
+  const eventBehaviors = behaviors.filter((behavior) => {
+    // Catches all events
+    if (behavior.on === '*') {
+      return true
+    }
+
+    const [listenedNamespace] =
+      behavior.on.includes('*') && behavior.on.includes('.')
+        ? behavior.on.split('.')
+        : [undefined]
+    const [eventNamespace] = event.type.includes('.')
+      ? event.type.split('.')
+      : [undefined]
+
+    // Handles scenarios like a Behavior listening for `select.*` and the event
+    // `select.block` is fired.
+    if (
+      listenedNamespace !== undefined &&
+      eventNamespace !== undefined &&
+      listenedNamespace === eventNamespace
+    ) {
+      return true
+    }
+
+    // Handles scenarios like a Behavior listening for `select.*` and the event
+    // `select` is fired.
+    if (
+      listenedNamespace !== undefined &&
+      eventNamespace === undefined &&
+      listenedNamespace === event.type
+    ) {
+      return true
+    }
+
+    return behavior.on === event.type
+  })
+
+  if (eventBehaviors.length === 0) {
+    if (defaultActionCallback) {
+      withApplyingBehaviorActions(editor, () => {
+        try {
+          defaultActionCallback()
+        } catch (error) {
+          console.error(
+            new Error(
+              `Performing action "${event.type}" failed due to: ${error.message}`,
+            ),
+          )
+        }
+      })
+      return
+    }
+
+    if (!defaultAction) {
+      return
+    }
+
+    withApplyingBehaviorActions(editor, () => {
+      try {
+        performAction({
+          context: {
+            keyGenerator,
+            schema,
+          },
+          action: defaultAction,
+        })
+      } catch (error) {
+        console.error(
+          new Error(
+            `Performing action "${defaultAction.type}" as a result of "${event.type}" failed due to: ${error.message}`,
+          ),
+        )
+      }
+    })
+    editor.onChange()
+    return
+  }
+
+  const editorSnapshot = getSnapshot()
+
+  let behaviorOverwritten = false
+
+  for (const eventBehavior of eventBehaviors) {
+    const shouldRun =
+      eventBehavior.guard === undefined ||
+      eventBehavior.guard({
+        context: editorSnapshot.context,
+        snapshot: editorSnapshot,
+        event,
+      })
+
+    if (!shouldRun) {
+      continue
+    }
+
+    const actionSets = eventBehavior.actions.map((actionSet) =>
+      actionSet(
+        {
+          context: editorSnapshot.context,
+          snapshot: editorSnapshot,
+          event,
+        },
+        shouldRun,
+      ),
+    )
+
+    for (const actionSet of actionSets) {
+      if (actionSet.length === 0) {
+        continue
+      }
+
+      behaviorOverwritten =
+        behaviorOverwritten ||
+        actionSet.some((action) => action.type !== 'effect')
+
+      withApplyingBehaviorActionSet(editor, () => {
+        for (const action of actionSet) {
+          if (action.type === 'raise') {
+            performEvent({
+              behaviors,
+              event: action.event,
+              editor,
+              keyGenerator,
+              schema,
+              getSnapshot,
+              defaultActionCallback: undefined,
+              nativeEvent: undefined,
+            })
+
+            continue
+          }
+
+          const internalAction = {
+            ...action,
+            editor,
+          }
+
+          try {
+            performAction({
+              context: {
+                keyGenerator,
+                schema,
+              },
+              action: internalAction,
+            })
+          } catch (error) {
+            console.error(
+              new Error(
+                `Performing action "${internalAction.type}" as a result of "${event.type}" failed due to: ${error.message}`,
+              ),
+            )
+            break
+          }
+        }
+      })
+      editor.onChange()
+    }
+
+    if (behaviorOverwritten) {
+      nativeEvent?.preventDefault()
+      break
+    }
+  }
+
+  if (!behaviorOverwritten) {
+    if (defaultActionCallback) {
+      withApplyingBehaviorActions(editor, () => {
+        try {
+          defaultActionCallback()
+        } catch (error) {
+          console.error(
+            new Error(
+              `Performing "${event.type}" failed due to: ${error.message}`,
+            ),
+          )
+        }
+      })
+      return
+    }
+
+    if (!defaultAction) {
+      return
+    }
+
+    withApplyingBehaviorActions(editor, () => {
+      try {
+        performAction({
+          context: {
+            keyGenerator,
+            schema,
+          },
+          action: defaultAction,
+        })
+      } catch (error) {
+        console.error(
+          new Error(
+            `Performing action "${defaultAction.type}" as a result of "${event.type}" failed due to: ${error.message}`,
+          ),
+        )
+      }
+    })
+    editor.onChange()
+  }
+}

package/src/editor/editor-machine.ts

@@ -9,23 +9,16 @@ import {
   setup,
   type ActorRefFrom,
 } from 'xstate'
-import {performAction} from '../behavior-actions/behavior.actions'
 import {coreBehaviors} from '../behaviors/behavior.core'
 import {defaultBehaviors} from '../behaviors/behavior.default'
-import type {InternalBehaviorAction} from '../behaviors/behavior.types.action'
+import {performEvent} from '../behaviors/behavior.perform-event'
 import type {Behavior} from '../behaviors/behavior.types.behavior'
-import {
-  isClipboardBehaviorEvent,
-  isCustomBehaviorEvent,
-  isDragBehaviorEvent,
-  isInputBehaviorEvent,
-  isKeyboardBehaviorEvent,
-  isMouseBehaviorEvent,
-  type CustomBehaviorEvent,
-  type ExternalSyntheticBehaviorEvent,
-  type InternalBehaviorEvent,
-  type NativeBehaviorEvent,
-  type SyntheticBehaviorEvent,
+import type {
+  CustomBehaviorEvent,
+  ExternalSyntheticBehaviorEvent,
+  InternalBehaviorEvent,
+  NativeBehaviorEvent,
+  SyntheticBehaviorEvent,
 } from '../behaviors/behavior.types.event'
 import type {Converter} from '../converters/converter.types'
 import type {EventPosition} from '../internal-utils/event-position'
@@ -37,10 +30,6 @@ import type {
 } from '../types/editor'
 import type {EditorSchema} from './define-schema'
 import {createEditorSnapshot} from './editor-snapshot'
-import {
-  withApplyingBehaviorActions,
-  withApplyingBehaviorActionSet,
-} from './with-applying-behavior-actions'
 
 export * from 'xstate/guards'
 
@@ -328,244 +317,32 @@ export const editorMachine = setup({
     'clear pending events': assign({
       pendingEvents: [],
     }),
-    'handle behavior event': enqueueActions(
-      ({context, event, enqueue, self}) => {
-        assertEvent(event, ['behavior event', 'custom behavior event'])
-
-        const defaultAction =
-          event.type === 'custom behavior event' ||
-          isClipboardBehaviorEvent(event.behaviorEvent) ||
-          isDragBehaviorEvent(event.behaviorEvent) ||
-          isInputBehaviorEvent(event.behaviorEvent) ||
-          isKeyboardBehaviorEvent(event.behaviorEvent) ||
-          isMouseBehaviorEvent(event.behaviorEvent) ||
-          event.behaviorEvent.type === 'deserialize' ||
-          event.behaviorEvent.type === 'serialize'
-            ? undefined
-            : ({
-                ...event.behaviorEvent,
-                editor: event.editor,
-              } satisfies InternalBehaviorAction)
-        const defaultActionCallback =
+    'handle behavior event': ({context, event, self}) => {
+      assertEvent(event, ['behavior event', 'custom behavior event'])
+
+      performEvent({
+        behaviors: [...context.behaviors.values(), ...defaultBehaviors],
+        event: event.behaviorEvent,
+        editor: event.editor,
+        keyGenerator: context.keyGenerator,
+        schema: context.schema,
+        getSnapshot: () =>
+          createEditorSnapshot({
+            converters: [...context.converters],
+            editor: event.editor,
+            keyGenerator: context.keyGenerator,
+            readOnly: self.getSnapshot().matches({'edit mode': 'read only'}),
+            schema: context.schema,
+            hasTag: (tag) => self.getSnapshot().hasTag(tag),
+            internalDrag: context.internalDrag,
+          }),
+        nativeEvent: event.nativeEvent,
+        defaultActionCallback:
           event.type === 'behavior event'
             ? event.defaultActionCallback
-            : undefined
-
-        const eventBehaviors = [
-          ...context.behaviors.values(),
-          ...defaultBehaviors,
-        ].filter((behavior) => {
-          // Catches all events
-          if (behavior.on === '*') {
-            return true
-          }
-
-          const [listenedNamespace] =
-            behavior.on.includes('*') && behavior.on.includes('.')
-              ? behavior.on.split('.')
-              : [undefined]
-          const [eventNamespace] = event.behaviorEvent.type.includes('.')
-            ? event.behaviorEvent.type.split('.')
-            : [undefined]
-
-          // Handles scenarios like a Behavior listening for `select.*` and the event
-          // `select.block` is fired.
-          if (
-            listenedNamespace !== undefined &&
-            eventNamespace !== undefined &&
-            listenedNamespace === eventNamespace
-          ) {
-            return true
-          }
-
-          // Handles scenarios like a Behavior listening for `select.*` and the event
-          // `select` is fired.
-          if (
-            listenedNamespace !== undefined &&
-            eventNamespace === undefined &&
-            listenedNamespace === event.behaviorEvent.type
-          ) {
-            return true
-          }
-
-          return behavior.on === event.behaviorEvent.type
-        })
-
-        if (eventBehaviors.length === 0) {
-          if (defaultActionCallback) {
-            withApplyingBehaviorActions(event.editor, () => {
-              try {
-                defaultActionCallback()
-              } catch (error) {
-                console.error(
-                  new Error(
-                    `Performing action "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                  ),
-                )
-              }
-            })
-            return
-          }
-
-          if (!defaultAction) {
-            return
-          }
-
-          withApplyingBehaviorActions(event.editor, () => {
-            try {
-              performAction({
-                context: {
-                  keyGenerator: context.keyGenerator,
-                  schema: context.schema,
-                },
-                action: defaultAction,
-              })
-            } catch (error) {
-              console.error(
-                new Error(
-                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                ),
-              )
-            }
-          })
-          event.editor.onChange()
-          return
-        }
-
-        const editorSnapshot = createEditorSnapshot({
-          converters: [...context.converters],
-          editor: event.editor,
-          keyGenerator: context.keyGenerator,
-          readOnly: self.getSnapshot().matches({'edit mode': 'read only'}),
-          schema: context.schema,
-          hasTag: (tag) => self.getSnapshot().hasTag(tag),
-          internalDrag: context.internalDrag,
-        })
-
-        let behaviorOverwritten = false
-
-        for (const eventBehavior of eventBehaviors) {
-          const shouldRun =
-            eventBehavior.guard === undefined ||
-            eventBehavior.guard({
-              context: editorSnapshot.context,
-              snapshot: editorSnapshot,
-              event: event.behaviorEvent,
-            })
-
-          if (!shouldRun) {
-            continue
-          }
-
-          const actionSets = eventBehavior.actions.map((actionSet) =>
-            actionSet(
-              {
-                context: editorSnapshot.context,
-                snapshot: editorSnapshot,
-                event: event.behaviorEvent,
-              },
-              shouldRun,
-            ),
-          )
-
-          for (const actionSet of actionSets) {
-            behaviorOverwritten =
-              behaviorOverwritten ||
-              (actionSet.length > 0 &&
-                actionSet.some((action) => action.type !== 'effect'))
-
-            withApplyingBehaviorActionSet(event.editor, () => {
-              for (const action of actionSet) {
-                if (action.type === 'raise') {
-                  if (isCustomBehaviorEvent(action.event)) {
-                    enqueue.raise({
-                      type: 'custom behavior event',
-                      behaviorEvent: action.event as CustomBehaviorEvent,
-                      editor: event.editor,
-                    })
-                  } else {
-                    enqueue.raise({
-                      type: 'behavior event',
-                      behaviorEvent: action.event,
-                      editor: event.editor,
-                    })
-                  }
-                  continue
-                }
-
-                const internalAction = {
-                  ...action,
-                  editor: event.editor,
-                }
-
-                try {
-                  performAction({
-                    context: {
-                      keyGenerator: context.keyGenerator,
-                      schema: context.schema,
-                    },
-                    action: internalAction,
-                  })
-                } catch (error) {
-                  console.error(
-                    new Error(
-                      `Performing action "${internalAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                    ),
-                  )
-                  break
-                }
-              }
-            })
-            event.editor.onChange()
-          }
-
-          if (behaviorOverwritten) {
-            event.nativeEvent?.preventDefault()
-            break
-          }
-        }
-
-        if (!behaviorOverwritten) {
-          if (defaultActionCallback) {
-            withApplyingBehaviorActions(event.editor, () => {
-              try {
-                defaultActionCallback()
-              } catch (error) {
-                console.error(
-                  new Error(
-                    `Performing "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                  ),
-                )
-              }
-            })
-            return
-          }
-
-          if (!defaultAction) {
-            return
-          }
-
-          withApplyingBehaviorActions(event.editor, () => {
-            try {
-              performAction({
-                context: {
-                  keyGenerator: context.keyGenerator,
-                  schema: context.schema,
-                },
-                action: defaultAction,
-              })
-            } catch (error) {
-              console.error(
-                new Error(
-                  `Performing action "${defaultAction.type}" as a result of "${event.behaviorEvent.type}" failed due to: ${error.message}`,
-                ),
-              )
-            }
-          })
-          event.editor.onChange()
-        }
-      },
-    ),
+            : undefined,
+      })
+    },
   },
 }).createMachine({
   id: 'editor',

package/src/editor/with-applying-behavior-actions.ts

@@ -26,11 +26,20 @@ const CURRENT_BEHAVIOR_ACTION_SET: WeakMap<
 
 export function withApplyingBehaviorActionSet(editor: Editor, fn: () => void) {
   const current = CURRENT_BEHAVIOR_ACTION_SET.get(editor)
-  CURRENT_BEHAVIOR_ACTION_SET.set(editor, {
-    actionSetId: defaultKeyGenerator(),
-  })
+
+  if (current) {
+    withApplyingBehaviorActions(editor, fn)
+    return
+  }
+
+  CURRENT_BEHAVIOR_ACTION_SET.set(
+    editor,
+    current ?? {
+      actionSetId: defaultKeyGenerator(),
+    },
+  )
   withApplyingBehaviorActions(editor, fn)
-  CURRENT_BEHAVIOR_ACTION_SET.set(editor, current)
+  CURRENT_BEHAVIOR_ACTION_SET.set(editor, undefined)
 }
 
 export function getCurrentBehaviorActionSetId(editor: Editor) {

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

@@ -212,6 +212,20 @@ function parseTextBlock({
   return parsedBlock
 }
 
+export function isSpan(
+  schema: EditorSchema,
+  child: PortableTextSpan | PortableTextObject,
+): child is PortableTextSpan {
+  return (
+    parseSpan({
+      span: child,
+      markDefKeyMap: new Map(),
+      context: {schema, keyGenerator: () => ''},
+      options: {refreshKeys: false},
+    }) !== undefined
+  )
+}
+
 export function parseSpan({
   span,
   context,

package/src/plugins/plugin.markdown.test.tsx

@@ -0,0 +1,64 @@
+import {page, userEvent} from '@vitest/browser/context'
+import React from 'react'
+import {describe, expect, test, vi} from 'vitest'
+import {render} from 'vitest-browser-react'
+import {PortableTextEditable, type Editor} from '..'
+import {defineSchema} from '../editor/define-schema'
+import {EditorProvider} from '../editor/editor-provider'
+import {getTersePt} from '../internal-utils/terse-pt'
+import {createTestKeyGenerator} from '../internal-utils/test-key-generator'
+import {getTextMarks} from '../internal-utils/text-marks'
+import {EditorRefPlugin} from './plugin.editor-ref'
+import {MarkdownPlugin} from './plugin.markdown'
+
+describe(MarkdownPlugin.name, () => {
+  test('Scenario: Undoing bold shortcut', async () => {
+    const editorRef = React.createRef<Editor>()
+
+    render(
+      <EditorProvider
+        initialConfig={{
+          keyGenerator: createTestKeyGenerator(),
+          schemaDefinition: defineSchema({decorators: [{name: 'strong'}]}),
+        }}
+      >
+        <EditorRefPlugin ref={editorRef} />
+        <PortableTextEditable />
+        <MarkdownPlugin
+          config={{
+            boldDecorator: () => 'strong',
+          }}
+        />
+      </EditorProvider>,
+    )
+
+    const locator = page.getByRole('textbox')
+
+    await vi.waitFor(() => expect.element(locator).toBeInTheDocument())
+
+    await userEvent.type(locator, '**Hello world!**')
+
+    await vi.waitFor(() => {
+      expect(
+        getTersePt(editorRef.current?.getSnapshot().context.value),
+      ).toEqual(['Hello world!'])
+    })
+
+    await vi.waitFor(() => {
+      expect(
+        getTextMarks(
+          editorRef.current!.getSnapshot().context.value,
+          'Hello world!',
+        ),
+      ).toEqual(['strong'])
+    })
+
+    editorRef.current?.send({type: 'history.undo'})
+
+    await vi.waitFor(() => {
+      expect(
+        getTersePt(editorRef.current?.getSnapshot().context.value),
+      ).toEqual(['**Hello world!**'])
+    })
+  })
+})