@portabletext/editor 1.47.14 → 1.48.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.47.14",
+  "version": "1.48.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/patches": "1.1.3",
-    "@portabletext/block-tools": "1.1.21"
+    "@portabletext/block-tools": "1.1.21",
+    "@portabletext/patches": "1.1.3"
   },
   "devDependencies": {
     "@portabletext/toolkit": "^2.0.17",

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

@@ -25,7 +25,6 @@ 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'
 
 const debug = debugWithName('behaviors:action')
@@ -71,7 +70,6 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'move.backward': moveBackwardActionImplementation,
   'move.block': moveBlockActionImplementation,
   'move.forward': moveForwardActionImplementation,
-  'noop': noopActionImplementation,
   'select': selectActionImplementation,
 }
 
@@ -225,13 +223,6 @@ export function performAction({
       })
       break
     }
-    case 'noop': {
-      behaviorActionImplementations.noop({
-        context,
-        action,
-      })
-      break
-    }
     default: {
       behaviorActionImplementations.select({
         context,

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

@@ -22,6 +22,6 @@ export const coreDndBehaviors = [
 
       return draggingOverDragOrigin
     },
-    actions: [() => [{type: 'noop'}]],
+    actions: [],
   }),
 ]

package/src/behaviors/behavior.default.ts

@@ -111,7 +111,7 @@ export const defaultBehaviors = [
 
       return focusSpan && selectionCollapsed
     },
-    actions: [() => [{type: 'noop'}]],
+    actions: [],
   }),
   defineBehavior({
     on: 'clipboard.copy',
@@ -132,7 +132,7 @@ export const defaultBehaviors = [
 
       return focusSpan && selectionCollapsed
     },
-    actions: [() => [{type: 'noop'}]],
+    actions: [],
   }),
   defineBehavior({
     on: 'clipboard.cut',
@@ -214,7 +214,7 @@ export const defaultBehaviors = [
         : false
       return droppingOnDragOrigin
     },
-    actions: [() => [{type: 'noop'}]],
+    actions: [],
   }),
   defineBehavior({
     on: 'drag.drop',

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 {effect, execute, noop} from './behavior.types.action'
+import {effect, execute, forward} from './behavior.types.action'
 import {defineBehavior} from './behavior.types.behavior'
 
 const emojiCharRegEx = /^[a-zA-Z-_0-9]{1}$/
@@ -66,7 +66,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
         return {emojis}
       },
       actions: [
-        (_, params) => [
+        ({event}, params) => [
           {
             type: 'effect',
             effect: () => {
@@ -76,6 +76,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
               })
             },
           },
+          forward(event),
         ],
       ],
     }),
@@ -242,9 +243,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
 
           if (params.action === 'navigate up') {
             return [
-              // If we are navigating then we want to hijack the key event and
-              // turn it into a noop.
-              noop(),
+              // If we are navigating then we want to hijack the key event
               effect(() => {
                 emojiPickerActor.send({type: 'navigate up'})
               }),
@@ -253,9 +252,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
 
           if (params.action === 'navigate down') {
             return [
-              // If we are navigating then we want to hijack the key event and
-              // turn it into a noop.
-              noop(),
+              // If we are navigating then we want to hijack the key event
               effect(() => {
                 emojiPickerActor.send({type: 'navigate down'})
               }),
@@ -298,7 +295,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
         return {emojis}
       },
       actions: [
-        (_, params) => [
+        ({event}, params) => [
           {
             type: 'effect',
             effect: () => {
@@ -308,6 +305,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
               })
             },
           },
+          forward(event),
         ],
       ],
     }),

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

@@ -4,7 +4,7 @@ import type {EditorSchema} from '../editor/editor-schema'
 import type {EditorSnapshot} from '../editor/editor-snapshot'
 import {
   withApplyingBehaviorActions,
-  withApplyingBehaviorActionSet,
+  withUndoStep,
 } from '../editor/with-applying-behavior-actions'
 import {debugWithName} from '../internal-utils/debug'
 import type {PortableTextSlateEditor} from '../types/editor'
@@ -31,6 +31,7 @@ function eventCategory(event: BehaviorEvent) {
 export function performEvent({
   mode,
   behaviors,
+  remainingEventBehaviors,
   event,
   editor,
   keyGenerator,
@@ -38,8 +39,9 @@ export function performEvent({
   getSnapshot,
   nativeEvent,
 }: {
-  mode: 'raise' | 'execute'
+  mode: 'raise' | 'execute' | 'forward'
   behaviors: Array<Behavior>
+  remainingEventBehaviors: Array<Behavior>
   event: BehaviorEvent
   editor: PortableTextSlateEditor
   keyGenerator: () => string
@@ -51,10 +53,7 @@ export function performEvent({
       }
     | undefined
 }) {
-  debug(
-    `(${!isNativeBehaviorEvent(event) ? `${mode}:` : ''}${eventCategory(event)})`,
-    JSON.stringify(event, null, 2),
-  )
+  debug(`(${mode}:${eventCategory(event)})`, JSON.stringify(event, null, 2))
 
   const defaultAction =
     isCustomBehaviorEvent(event) ||
@@ -66,9 +65,10 @@ export function performEvent({
           editor,
         } satisfies InternalBehaviorAction)
 
-  const eventBehaviors = (
-    mode === 'raise' ? [...behaviors, ...defaultBehaviors] : behaviors
-  ).filter((behavior) => {
+  const eventBehaviors = [
+    ...remainingEventBehaviors,
+    ...defaultBehaviors,
+  ].filter((behavior) => {
     // Catches all events
     if (behavior.on === '*') {
       return true
@@ -135,9 +135,13 @@ export function performEvent({
 
   const guardSnapshot = getSnapshot()
 
-  let behaviorOverwritten = false
+  let nativeEventPrevented = false
+  let defaultBehaviorOverwritten = false
+  let eventBehaviorIndex = -1
 
   for (const eventBehavior of eventBehaviors) {
+    eventBehaviorIndex++
+
     const shouldRun =
       eventBehavior.guard === undefined ||
       eventBehavior.guard({
@@ -149,6 +153,10 @@ export function performEvent({
       continue
     }
 
+    // This Behavior now "owns" the event and we can consider the default
+    // action prevented
+    defaultBehaviorOverwritten = true
+
     for (const actionSet of eventBehavior.actions) {
       const actionsSnapshot = getSnapshot()
 
@@ -164,37 +172,73 @@ export function performEvent({
         continue
       }
 
-      behaviorOverwritten =
-        behaviorOverwritten ||
-        actions.some((action) => action.type !== 'effect')
-
-      withApplyingBehaviorActionSet(editor, () => {
-        for (const action of actions) {
-          if (action.type === 'raise') {
-            performEvent({
-              mode,
-              behaviors:
-                mode === 'execute'
-                  ? isCustomBehaviorEvent(action.event)
-                    ? [...behaviors, ...defaultBehaviors]
-                    : defaultBehaviors
-                  : [...behaviors, ...defaultBehaviors],
-              event: action.event,
-              editor,
-              keyGenerator,
-              schema,
-              getSnapshot,
-              nativeEvent: undefined,
-            })
+      if (actions.some((action) => action.type === 'execute')) {
+        // This Behavior now "owns" the event and we can consider the native
+        // event prevented
+        nativeEventPrevented = true
+
+        // Since at least one action is about to `execute` changes in the editor,
+        // we set up a new undo step.
+        // All actions performed recursively from now will be squashed into this
+        // undo step
+        withUndoStep(editor, () => {
+          for (const action of actions) {
+            if (action.type === 'effect') {
+              performAction({
+                context: {
+                  keyGenerator,
+                  schema,
+                },
+                action: {
+                  ...action,
+                  editor,
+                },
+              })
 
-            continue
-          }
+              continue
+            }
+
+            if (action.type === 'forward') {
+              const remainingEventBehaviors = eventBehaviors.slice(
+                eventBehaviorIndex + 1,
+              )
+
+              performEvent({
+                mode: 'forward',
+                behaviors,
+                remainingEventBehaviors: remainingEventBehaviors,
+                event: action.event,
+                editor,
+                keyGenerator,
+                schema,
+                getSnapshot,
+                nativeEvent,
+              })
+
+              continue
+            }
+
+            if (action.type === 'raise') {
+              performEvent({
+                mode: 'raise',
+                behaviors,
+                remainingEventBehaviors: behaviors,
+                event: action.event,
+                editor,
+                keyGenerator,
+                schema,
+                getSnapshot,
+                nativeEvent,
+              })
+
+              continue
+            }
 
-          if (action.type === 'execute') {
             if (isAbstractBehaviorEvent(action.event)) {
               performEvent({
                 mode: 'execute',
-                behaviors: defaultBehaviors,
+                behaviors,
+                remainingEventBehaviors: behaviors,
                 event: action.event,
                 editor,
                 keyGenerator,
@@ -234,62 +278,82 @@ export function performEvent({
 
               editor.onChange()
             }
-
-            continue
           }
+        })
+
+        continue
+      }
+
+      for (const action of actions) {
+        if (action.type === 'effect') {
+          performAction({
+            context: {
+              keyGenerator,
+              schema,
+            },
+            action: {
+              ...action,
+              editor,
+            },
+          })
+
+          continue
+        }
 
-          const internalAction = {
-            ...action,
+        if (action.type === 'forward') {
+          const remainingEventBehaviors = eventBehaviors.slice(
+            eventBehaviorIndex + 1,
+          )
+
+          performEvent({
+            mode: 'forward',
+            behaviors,
+            remainingEventBehaviors: remainingEventBehaviors,
+            event: action.event,
             editor,
-          }
-          let actionFailed = false
+            keyGenerator,
+            schema,
+            getSnapshot,
+            nativeEvent,
+          })
 
-          withApplyingBehaviorActions(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}`,
-                ),
-              )
-              actionFailed = true
-            }
+          continue
+        }
+
+        if (action.type === 'raise') {
+          nativeEventPrevented = true
+
+          performEvent({
+            mode: 'raise',
+            behaviors,
+            remainingEventBehaviors: behaviors,
+            event: action.event,
+            editor,
+            keyGenerator,
+            schema,
+            getSnapshot,
+            nativeEvent,
           })
 
-          if (actionFailed) {
-            break
-          }
+          continue
+        }
 
-          editor.onChange()
+        if (action.type === 'execute') {
+          console.error('Unexpected action type: `execute`')
         }
-      })
+      }
     }
 
-    if (behaviorOverwritten) {
-      nativeEvent?.preventDefault()
-      break
-    }
+    break
   }
 
-  if (!behaviorOverwritten) {
-    if (!defaultAction) {
-      return
-    }
+  if (!defaultBehaviorOverwritten && defaultAction) {
+    nativeEvent?.preventDefault()
 
     withApplyingBehaviorActions(editor, () => {
       try {
         performAction({
-          context: {
-            keyGenerator,
-            schema,
-          },
+          context: {keyGenerator, schema},
           action: defaultAction,
         })
       } catch (error) {
@@ -300,6 +364,9 @@ export function performEvent({
         )
       }
     })
+
     editor.onChange()
+  } else if (nativeEventPrevented) {
+    nativeEvent?.preventDefault()
   }
 }

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

@@ -4,6 +4,7 @@ import type {PortableTextSlateEditor} from '../types/editor'
 import type {
   AbstractBehaviorEventType,
   CustomBehaviorEvent,
+  NativeBehaviorEvent,
   SyntheticBehaviorEvent,
 } from './behavior.types.event'
 
@@ -16,11 +17,12 @@ export type BehaviorAction =
       event: SyntheticBehaviorEvent
     }
   | {
-      type: 'raise'
-      event: SyntheticBehaviorEvent | CustomBehaviorEvent
+      type: 'forward'
+      event: NativeBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent
     }
   | {
-      type: 'noop'
+      type: 'raise'
+      event: SyntheticBehaviorEvent | CustomBehaviorEvent
     }
   | {
       type: 'effect'
@@ -36,6 +38,15 @@ export function execute(
   return {type: 'execute', event}
 }
 
+/**
+ * @beta
+ */
+export function forward(
+  event: NativeBehaviorEvent | SyntheticBehaviorEvent | CustomBehaviorEvent,
+): PickFromUnion<BehaviorAction, 'type', 'forward'> {
+  return {type: 'forward', event}
+}
+
 /**
  * @beta
  */
@@ -54,13 +65,6 @@ export function effect(
   return {type: 'effect', effect}
 }
 
-/**
- * @beta
- */
-export function noop(): PickFromUnion<BehaviorAction, 'type', 'noop'> {
-  return {type: 'noop'}
-}
-
 /**
  * @beta
  */
@@ -74,7 +78,6 @@ export type BehaviorActionSet<TBehaviorEvent, TGuardResponse> = (
 
 export type InternalBehaviorAction = (
   | OmitFromUnion<SyntheticBehaviorEvent, 'type', AbstractBehaviorEventType>
-  | {type: 'noop'}
   | {type: 'effect'; effect: () => void}
 ) & {
   editor: PortableTextSlateEditor

package/src/behaviors/index.ts

@@ -15,7 +15,7 @@ export {
 
 export {
   execute,
-  noop,
+  forward,
   raise,
   effect,
   type BehaviorAction,

package/src/editor/components/Element.tsx

@@ -21,7 +21,7 @@ import {
   useSlateStatic,
   type RenderElementProps,
 } from 'slate-react'
-import {defineBehavior} from '../../behaviors'
+import {defineBehavior, forward} from '../../behaviors'
 import {debugWithName} from '../../internal-utils/debug'
 import type {EventPositionBlock} from '../../internal-utils/event-position'
 import {fromSlateValue} from '../../internal-utils/values'
@@ -146,9 +146,6 @@ export const Element: FunctionComponent<ElementProps> = ({
               setDragPositionBlock(event.position.block)
             },
           },
-          {
-            type: 'noop',
-          },
         ],
       ],
     })
@@ -173,13 +170,14 @@ export const Element: FunctionComponent<ElementProps> = ({
         return event.type !== 'drag.dragover'
       },
       actions: [
-        () => [
+        ({event}) => [
           {
             type: 'effect',
             effect: () => {
               setDragPositionBlock(undefined)
             },
           },
+          forward(event),
         ],
       ],
     })

package/src/editor/editor-context.tsx

@@ -0,0 +1,7 @@
+import {createGloballyScopedContext} from '../internal-utils/globally-scoped-context'
+import type {Editor} from './create-editor'
+
+export const EditorContext = createGloballyScopedContext<Editor | null>(
+  '@portabletext/editor/context/editor',
+  null,
+)

package/src/editor/editor-machine.ts

@@ -336,6 +336,7 @@ export const editorMachine = setup({
       performEvent({
         mode: 'raise',
         behaviors: [...context.behaviors.values()],
+        remainingEventBehaviors: [...context.behaviors.values()],
         event: event.behaviorEvent,
         editor: event.editor,
         keyGenerator: context.keyGenerator,

package/src/editor/editor-provider.tsx

@@ -5,10 +5,10 @@ import {Synchronizer} from './components/Synchronizer'
 import {
   createInternalEditor,
   editorConfigToMachineInput,
-  type Editor,
   type EditorConfig,
 } from './create-editor'
 import {EditorActorContext} from './editor-actor-context'
+import {EditorContext} from './editor-context'
 import {editorMachine} from './editor-machine'
 import {PortableTextEditorContext} from './hooks/usePortableTextEditor'
 import {PortableTextEditorSelectionProvider} from './hooks/usePortableTextEditorSelection'
@@ -18,8 +18,6 @@ import {
   type PortableTextEditorProps,
 } from './PortableTextEditor'
 
-const EditorContext = React.createContext<Editor | undefined>(undefined)
-
 /**
  * @public
  */

package/src/editor/plugins/createWithUndoRedo.ts

@@ -34,7 +34,7 @@ import {
 } from '../../internal-utils/withUndoRedo'
 import type {PortableTextSlateEditor} from '../../types/editor'
 import type {EditorActor} from '../editor-machine'
-import {getCurrentBehaviorActionSetId} from '../with-applying-behavior-actions'
+import {getCurrentUndoStepId} from '../with-applying-behavior-actions'
 
 const debug = debugWithName('plugin:withUndoRedo')
 const debugVerbose = debug.enabled && false
@@ -79,7 +79,7 @@ export function createWithUndoRedo(
       editorActor.getSnapshot().context.schema.block.name,
     )
     const remotePatches = getRemotePatches(editor)
-    let previousBehaviorActionSetId = getCurrentBehaviorActionSetId(editor)
+    let previousUndoStepId = getCurrentUndoStepId(editor)
 
     options.subscriptions.push(() => {
       debug('Subscribing to patches')
@@ -149,15 +149,13 @@ export function createWithUndoRedo(
       const overwrite = shouldOverwrite(op, lastOp)
       const save = isSaving(editor)
 
-      const currentBehaviorActionSetId = getCurrentBehaviorActionSetId(editor)
+      const currentUndoStepId = getCurrentUndoStepId(editor)
 
       let merge =
-        currentBehaviorActionSetId !== undefined &&
-        previousBehaviorActionSetId === undefined
+        currentUndoStepId !== undefined && previousUndoStepId === undefined
           ? false
-          : currentBehaviorActionSetId !== undefined &&
-              previousBehaviorActionSetId !== undefined
-            ? currentBehaviorActionSetId === previousBehaviorActionSetId
+          : currentUndoStepId !== undefined && previousUndoStepId !== undefined
+            ? currentUndoStepId === previousUndoStepId
             : true
 
       if (save) {
@@ -165,8 +163,7 @@ export function createWithUndoRedo(
           merge = false
         } else if (operations.length === 0) {
           merge =
-            currentBehaviorActionSetId === undefined &&
-            previousBehaviorActionSetId === undefined
+            currentUndoStepId === undefined && previousUndoStepId === undefined
               ? shouldMerge(op, lastOp) || overwrite
               : merge
         }
@@ -196,7 +193,7 @@ export function createWithUndoRedo(
         }
       }
 
-      previousBehaviorActionSetId = currentBehaviorActionSetId
+      previousUndoStepId = currentUndoStepId
 
       apply(op)
     }