@portabletext/editor 1.38.0 → 1.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@portabletext/editor",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "description": "Portable Text Editor made in React",
   "keywords": [
     "sanity",

package/src/behavior-actions/behavior.action.serialization.success.ts

@@ -7,8 +7,11 @@ export const serializationSuccessActionImplementation: BehaviorActionImplementat
   dataTransferSetActionImplementation({
     context,
     action: {
-      ...action,
       type: 'data transfer.set',
+      data: action.data,
+      dataTransfer: action.originEvent.originEvent.dataTransfer,
+      mimeType: action.mimeType,
+      editor: action.editor,
     },
   })
 }

package/src/behaviors/behavior.code-editor.ts

@@ -16,11 +16,11 @@ export type CodeEditorBehaviorsConfig = {
 export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
   return [
     defineBehavior({
-      on: 'key.down',
+      on: 'keyboard.keydown',
       guard: ({snapshot, event}) => {
         const isMoveUpShortcut = isHotkey(
           config.moveBlockUpShortcut,
-          event.keyboardEvent,
+          event.originEvent,
         )
         const firstBlock = selectors.getFirstBlock(snapshot)
         const selectedBlocks = selectors.getSelectedBlocks(snapshot)
@@ -42,11 +42,11 @@ export function createCodeEditorBehaviors(config: CodeEditorBehaviorsConfig) {
       ],
     }),
     defineBehavior({
-      on: 'key.down',
+      on: 'keyboard.keydown',
       guard: ({snapshot, event}) => {
         const isMoveDownShortcut = isHotkey(
           config.moveBlockDownShortcut,
-          event.keyboardEvent,
+          event.originEvent,
         )
         const lastBlock = selectors.getLastBlock(snapshot)
         const selectedBlocks = selectors.getSelectedBlocks(snapshot)

package/src/behaviors/behavior.core.block-objects.ts

@@ -5,9 +5,9 @@ import {isEmptyTextBlock} from '../utils/util.is-empty-text-block'
 import {defineBehavior, raise} from './behavior.types'
 
 const arrowDownOnLonelyBlockObject = defineBehavior({
-  on: 'key.down',
+  on: 'keyboard.keydown',
   guard: ({snapshot, event}) => {
-    const isArrowDown = isHotkey('ArrowDown', event.keyboardEvent)
+    const isArrowDown = isHotkey('ArrowDown', event.originEvent)
     const focusBlockObject = selectors.getFocusBlockObject(snapshot)
     const nextBlock = selectors.getNextBlock(snapshot)
 
@@ -17,9 +17,9 @@ const arrowDownOnLonelyBlockObject = defineBehavior({
 })
 
 const arrowUpOnLonelyBlockObject = defineBehavior({
-  on: 'key.down',
+  on: 'keyboard.keydown',
   guard: ({snapshot, event}) => {
-    const isArrowUp = isHotkey('ArrowUp', event.keyboardEvent)
+    const isArrowUp = isHotkey('ArrowUp', event.originEvent)
     const focusBlockObject = selectors.getFocusBlockObject(snapshot)
     const previousBlock = selectors.getPreviousBlock(snapshot)
 

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

@@ -3,27 +3,27 @@ import {defineBehavior, raise} from './behavior.types'
 
 export const coreDecoratorBehaviors = {
   strongShortcut: defineBehavior({
-    on: 'key.down',
+    on: 'keyboard.keydown',
     guard: ({snapshot, event}) =>
-      isHotkey('mod+b', event.keyboardEvent) &&
+      isHotkey('mod+b', event.originEvent) &&
       snapshot.context.schema.decorators.some(
         (decorator) => decorator.value === 'strong',
       ),
     actions: [() => [raise({type: 'decorator.toggle', decorator: 'strong'})]],
   }),
   emShortcut: defineBehavior({
-    on: 'key.down',
+    on: 'keyboard.keydown',
     guard: ({snapshot, event}) =>
-      isHotkey('mod+i', event.keyboardEvent) &&
+      isHotkey('mod+i', event.originEvent) &&
       snapshot.context.schema.decorators.some(
         (decorator) => decorator.value === 'em',
       ),
     actions: [() => [raise({type: 'decorator.toggle', decorator: 'em'})]],
   }),
   underlineShortcut: defineBehavior({
-    on: 'key.down',
+    on: 'keyboard.keydown',
     guard: ({snapshot, event}) =>
-      isHotkey('mod+u', event.keyboardEvent) &&
+      isHotkey('mod+u', event.originEvent) &&
       snapshot.context.schema.decorators.some(
         (decorator) => decorator.value === 'underline',
       ),
@@ -32,9 +32,9 @@ export const coreDecoratorBehaviors = {
     ],
   }),
   codeShortcut: defineBehavior({
-    on: 'key.down',
+    on: 'keyboard.keydown',
     guard: ({snapshot, event}) =>
-      isHotkey("mod+'", event.keyboardEvent) &&
+      isHotkey("mod+'", event.originEvent) &&
       snapshot.context.schema.decorators.some(
         (decorator) => decorator.value === 'code',
       ),

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

@@ -102,9 +102,9 @@ const clearListOnEnter = defineBehavior({
 })
 
 const indentListOnTab = defineBehavior({
-  on: 'key.down',
+  on: 'keyboard.keydown',
   guard: ({snapshot, event}) => {
-    const isTab = isHotkey('Tab', event.keyboardEvent)
+    const isTab = isHotkey('Tab', event.originEvent)
 
     if (!isTab) {
       return false
@@ -147,9 +147,9 @@ const indentListOnTab = defineBehavior({
 })
 
 const unindentListOnShiftTab = defineBehavior({
-  on: 'key.down',
+  on: 'keyboard.keydown',
   guard: ({snapshot, event}) => {
-    const isShiftTab = isHotkey('Shift+Tab', event.keyboardEvent)
+    const isShiftTab = isHotkey('Shift+Tab', event.originEvent)
 
     if (!isShiftTab) {
       return false

package/src/behaviors/behavior.default.raise-soft-break.ts

@@ -4,10 +4,10 @@ import {defineBehavior, raise} from './behavior.types'
 /**
  * On WebKit, Shift+Enter results in an `insertParagraph` input event rather
  * than an `insertLineBreak` input event. This Behavior makes sure we catch
- * that `key.down` event beforehand and raise an `insert.soft break` manually.
+ * that `keyboard.keydown` event beforehand and raise an `insert.soft break` manually.
  */
 export const raiseInsertSoftBreak = defineBehavior({
-  on: 'key.down',
-  guard: ({event}) => keyIs.lineBreak(event.keyboardEvent),
+  on: 'keyboard.keydown',
+  guard: ({event}) => keyIs.lineBreak(event.originEvent),
   actions: [() => [raise({type: 'insert.soft break'})]],
 })

package/src/behaviors/behavior.default.ts

@@ -89,7 +89,9 @@ const raiseDeserializationSuccessOrFailure = defineBehavior({
   guard: ({snapshot, event}) => {
     const deserializeEvents = snapshot.context.converters.flatMap(
       (converter) => {
-        const data = event.dataTransfer.getData(converter.mimeType)
+        const data = event.originEvent.originEvent.dataTransfer.getData(
+          converter.mimeType,
+        )
 
         if (!data) {
           return []
@@ -128,7 +130,6 @@ const raiseDeserializationSuccessOrFailure = defineBehavior({
     ({event}, deserializeEvent) => [
       raise({
         ...deserializeEvent,
-        dataTransfer: event.dataTransfer,
         originEvent: event.originEvent,
       }),
     ],
@@ -164,7 +165,6 @@ const raiseSerializationSuccessOrFailure = defineBehavior({
         return raise({
           ...serializeEvent,
           originEvent: event.originEvent,
-          dataTransfer: event.dataTransfer,
         })
       }),
   ],
@@ -172,7 +172,7 @@ const raiseSerializationSuccessOrFailure = defineBehavior({
 
 export const defaultBehaviors = [
   defineBehavior({
-    on: 'copy',
+    on: 'clipboard.copy',
     guard: ({snapshot}) => {
       const focusSpan = selectors.getFocusSpan(snapshot)
       const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
@@ -182,19 +182,18 @@ export const defaultBehaviors = [
     actions: [() => [{type: 'noop'}]],
   }),
   defineBehavior({
-    on: 'copy',
+    on: 'clipboard.copy',
     actions: [
       ({event}) => [
         raise({
           type: 'serialize',
-          dataTransfer: event.data,
           originEvent: event,
         }),
       ],
     ],
   }),
   defineBehavior({
-    on: 'cut',
+    on: 'clipboard.cut',
     guard: ({snapshot}) => {
       const focusSpan = selectors.getFocusSpan(snapshot)
       const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
@@ -204,7 +203,7 @@ export const defaultBehaviors = [
     actions: [() => [{type: 'noop'}]],
   }),
   defineBehavior({
-    on: 'cut',
+    on: 'clipboard.cut',
     guard: ({snapshot}) => {
       return snapshot.context.selection
         ? {
@@ -216,7 +215,6 @@ export const defaultBehaviors = [
       ({event}, {selection}) => [
         raise({
           type: 'serialize',
-          dataTransfer: event.dataTransfer,
           originEvent: event,
         }),
         raise({
@@ -232,7 +230,6 @@ export const defaultBehaviors = [
       ({event}) => [
         raise({
           type: 'serialize',
-          dataTransfer: event.dataTransfer,
           originEvent: event,
         }),
       ],
@@ -245,7 +242,7 @@ export const defaultBehaviors = [
         raise({
           type: 'data transfer.set',
           data: event.data,
-          dataTransfer: event.dataTransfer,
+          dataTransfer: event.originEvent.originEvent.dataTransfer,
           mimeType: event.mimeType,
         }),
       ],
@@ -275,7 +272,6 @@ export const defaultBehaviors = [
       ({event}) => [
         raise({
           type: 'deserialize',
-          dataTransfer: event.dataTransfer,
           originEvent: event,
         }),
       ],
@@ -367,7 +363,7 @@ export const defaultBehaviors = [
     ],
   }),
   defineBehavior({
-    on: 'paste',
+    on: 'clipboard.paste',
     guard: ({snapshot}) => {
       return snapshot.context.selection &&
         selectors.isSelectionExpanded(snapshot)
@@ -382,19 +378,17 @@ export const defaultBehaviors = [
         }),
         raise({
           type: 'deserialize',
-          dataTransfer: event.data,
           originEvent: event,
         }),
       ],
     ],
   }),
   defineBehavior({
-    on: 'paste',
+    on: 'clipboard.paste',
     actions: [
       ({event}) => [
         raise({
           type: 'deserialize',
-          dataTransfer: event.data,
           originEvent: event,
         }),
       ],

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

@@ -148,7 +148,7 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
       ],
     }),
     defineBehavior({
-      on: 'key.down',
+      on: 'keyboard.keydown',
       guard: ({snapshot, event}) => {
         const matches = emojiPickerActor.getSnapshot().context.matches
 
@@ -156,14 +156,14 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           return false
         }
 
-        const isEscape = isHotkey('Escape', event.keyboardEvent)
+        const isEscape = isHotkey('Escape', event.originEvent)
 
         if (isEscape) {
           return {action: 'reset' as const}
         }
 
-        const isEnter = isHotkey('Enter', event.keyboardEvent)
-        const isTab = isHotkey('Tab', event.keyboardEvent)
+        const isEnter = isHotkey('Enter', event.originEvent)
+        const isTab = isHotkey('Tab', event.originEvent)
 
         if (isEnter || isTab) {
           const selectedIndex =
@@ -200,8 +200,8 @@ export function createEmojiPickerBehaviors<TEmojiMatch>(
           return false
         }
 
-        const isArrowDown = isHotkey('ArrowDown', event.keyboardEvent)
-        const isArrowUp = isHotkey('ArrowUp', event.keyboardEvent)
+        const isArrowDown = isHotkey('ArrowDown', event.originEvent)
+        const isArrowUp = isHotkey('ArrowUp', event.originEvent)
 
         if (isArrowDown && matches.length > 0) {
           return {action: 'navigate down' as const}

package/src/behaviors/behavior.links.ts

@@ -18,10 +18,10 @@ export type LinkBehaviorsConfig = {
  */
 export function createLinkBehaviors(config: LinkBehaviorsConfig) {
   const pasteLinkOnSelection = defineBehavior({
-    on: 'paste',
+    on: 'clipboard.paste',
     guard: ({snapshot, event}) => {
       const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
-      const text = event.data.getData('text/plain')
+      const text = event.originEvent.dataTransfer.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined
@@ -44,7 +44,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
     ],
   })
   const pasteLinkAtCaret = defineBehavior({
-    on: 'paste',
+    on: 'clipboard.paste',
     guard: ({snapshot, event}) => {
       const focusSpan = selectors.getFocusSpan(snapshot)
       const selectionCollapsed = selectors.isSelectionCollapsed(snapshot)
@@ -53,7 +53,7 @@ export function createLinkBehaviors(config: LinkBehaviorsConfig) {
         return false
       }
 
-      const text = event.data.getData('text/plain')
+      const text = event.originEvent.dataTransfer.getData('text/plain')
       const url = looksLikeUrl(text) ? text : undefined
       const annotation =
         url !== undefined

package/src/behaviors/behavior.markdown.ts

@@ -216,9 +216,9 @@ export function createMarkdownBehaviors(config: MarkdownBehaviorsConfig) {
     ],
   })
   const automaticHrOnPaste = defineBehavior({
-    on: 'paste',
+    on: 'clipboard.paste',
     guard: ({snapshot, event}) => {
-      const text = event.data.getData('text/plain')
+      const text = event.originEvent.dataTransfer.getData('text/plain')
       const hrRegExp = /^(---)$|(___)$|(\*\*\*)$/gm
       const hrCharacters = text.match(hrRegExp)?.[0]
       const hrObject = config.horizontalRuleObject?.(snapshot.context)

package/src/behaviors/behavior.types.ts

@@ -206,75 +206,110 @@ export type SyntheticBehaviorEvent =
       'type',
       'deserialization.failure' | 'deserialization.success'
     > & {
-      dataTransfer: DataTransfer
-      originEvent: Omit<
-        PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'paste'>,
-        'dataTransfer'
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'drag.drop' | 'clipboard.paste'
       >
     })
   | {
       type: 'serialization.success'
       mimeType: MIMEType
       data: string
-      dataTransfer: DataTransfer
-      originEvent: Omit<
-        PickFromUnion<
-          NativeBehaviorEvent,
-          'type',
-          'copy' | 'cut' | 'drag.dragstart'
-        >,
-        'dataTransfer'
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
       >
     }
   | {
       type: 'serialization.failure'
       mimeType: MIMEType
       reason: string
-      dataTransfer: DataTransfer
-      originEvent: Omit<
-        PickFromUnion<
-          NativeBehaviorEvent,
-          'type',
-          'copy' | 'cut' | 'drag.dragstart'
-        >,
-        'dataTransfer'
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
       >
     }
 
 export type InsertPlacement = 'auto' | 'after' | 'before'
 
+type ClipboardBehaviorEvent =
+  | {
+      type: 'clipboard.copy'
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
+      position: EventPosition
+    }
+  | {
+      type: 'clipboard.cut'
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
+      position: EventPosition
+    }
+  | {
+      type: 'clipboard.paste'
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
+      position: EventPosition
+    }
+
+export function isClipboardBehaviorEvent(
+  event: BehaviorEvent,
+): event is ClipboardBehaviorEvent {
+  return event.type.startsWith('clipboard.')
+}
+
 type DragBehaviorEvent =
   | {
       type: 'drag.dragstart'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
       position: EventPosition
     }
   | {
       type: 'drag.drag'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
     }
   | {
       type: 'drag.dragend'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
     }
   | {
       type: 'drag.dragenter'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
       position: EventPosition
     }
   | {
       type: 'drag.dragover'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
       position: EventPosition
     }
   | {
       type: 'drag.drop'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
       position: EventPosition
     }
   | {
       type: 'drag.dragleave'
-      dataTransfer: DataTransfer
+      originEvent: {
+        dataTransfer: DataTransfer
+      }
     }
 
 export function isDragBehaviorEvent(
@@ -283,25 +318,43 @@ export function isDragBehaviorEvent(
   return event.type.startsWith('drag.')
 }
 
+export type KeyboardBehaviorEvent =
+  | {
+      type: 'keyboard.keydown'
+      originEvent: Pick<
+        KeyboardEvent,
+        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+      >
+    }
+  | {
+      type: 'keyboard.keyup'
+      originEvent: Pick<
+        KeyboardEvent,
+        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+      >
+    }
+
+export function isKeyboardBehaviorEvent(
+  event: BehaviorEvent,
+): event is KeyboardBehaviorEvent {
+  return event.type.startsWith('keyboard.')
+}
+
 export type DataBehaviorEvent =
   | {
       type: 'deserialize'
-      dataTransfer: DataTransfer
-      originEvent: Omit<
-        PickFromUnion<NativeBehaviorEvent, 'type', 'drag.drop' | 'paste'>,
-        'dataTransfer'
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'drag.drop' | 'clipboard.paste'
       >
     }
   | {
       type: 'serialize'
-      dataTransfer: DataTransfer
-      originEvent: Omit<
-        PickFromUnion<
-          NativeBehaviorEvent,
-          'type',
-          'copy' | 'cut' | 'drag.dragstart'
-        >,
-        'dataTransfer'
+      originEvent: PickFromUnion<
+        NativeBehaviorEvent,
+        'type',
+        'clipboard.copy' | 'clipboard.cut' | 'drag.dragstart'
       >
     }
 
@@ -320,36 +373,9 @@ export function isMouseBehaviorEvent(
  * @beta
  */
 export type NativeBehaviorEvent =
-  | {
-      type: 'copy'
-      data: DataTransfer
-      position: EventPosition
-    }
-  | {
-      type: 'cut'
-      dataTransfer: DataTransfer
-      position: EventPosition
-    }
-  | {
-      type: 'key.down'
-      keyboardEvent: Pick<
-        KeyboardEvent,
-        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-      >
-    }
-  | {
-      type: 'key.up'
-      keyboardEvent: Pick<
-        KeyboardEvent,
-        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
-      >
-    }
+  | ClipboardBehaviorEvent
+  | KeyboardBehaviorEvent
   | MouseBehaviorEvent
-  | {
-      type: 'paste'
-      data: DataTransfer
-      position: EventPosition
-    }
   | DragBehaviorEvent
 
 /**
@@ -412,7 +438,10 @@ export type BehaviorEvent =
   | NativeBehaviorEvent
   | CustomBehaviorEvent
   | {type: '*'}
+  | {type: 'clipboard.*'}
   | {type: 'drag.*'}
+  | {type: 'keyboard.*'}
+  | {type: 'mouse.*'}
 
 /**
  * @beta
@@ -422,9 +451,15 @@ export type Behavior<
   TGuardResponse = true,
   TBehaviorEvent extends BehaviorEvent = TBehaviorEventType extends '*'
     ? BehaviorEvent
-    : TBehaviorEventType extends 'drag.*'
-      ? DragBehaviorEvent
-      : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+    : TBehaviorEventType extends 'clipboard.*'
+      ? ClipboardBehaviorEvent
+      : TBehaviorEventType extends 'drag.*'
+        ? DragBehaviorEvent
+        : TBehaviorEventType extends 'keyboard.*'
+          ? KeyboardBehaviorEvent
+          : TBehaviorEventType extends 'mouse.*'
+            ? MouseBehaviorEvent
+            : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 > = {
   /**
    * The internal editor event that triggers this behavior.
@@ -502,9 +537,15 @@ export function defineBehavior<
       ? CustomBehaviorEvent<TPayload, TType>
       : TBehaviorEventType extends '*'
         ? OmitFromUnion<BehaviorEvent, 'type', '*'>
-        : TBehaviorEventType extends `drag.*`
-          ? DragBehaviorEvent
-          : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
+        : TBehaviorEventType extends `clipboard.*`
+          ? ClipboardBehaviorEvent
+          : TBehaviorEventType extends `drag.*`
+            ? DragBehaviorEvent
+            : TBehaviorEventType extends 'keyboard.*'
+              ? KeyboardBehaviorEvent
+              : TBehaviorEventType extends 'mouse.*'
+                ? MouseBehaviorEvent
+                : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   >,
 ): Behavior
 export function defineBehavior<
@@ -516,9 +557,15 @@ export function defineBehavior<
     ? CustomBehaviorEvent<TPayload, TType>
     : TBehaviorEventType extends '*'
       ? OmitFromUnion<BehaviorEvent, 'type', '*'>
-      : TBehaviorEventType extends `drag.*`
-        ? DragBehaviorEvent
-        : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
+      : TBehaviorEventType extends `clipboard.*`
+        ? ClipboardBehaviorEvent
+        : TBehaviorEventType extends `drag.*`
+          ? DragBehaviorEvent
+          : TBehaviorEventType extends 'keyboard.*'
+            ? KeyboardBehaviorEvent
+            : TBehaviorEventType extends 'mouse.*'
+              ? MouseBehaviorEvent
+              : PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>,
 >(
   behavior: Behavior<TBehaviorEventType, TGuardResponse, TBehaviorEvent>,
 ): Behavior {