feat(behavior): add 'key.down' and 'key.up' events

portabletext · Dec 3, 2024 · 99d7335 · 99d7335
1 parent c624130
commit 99d7335
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 4 deletions.
diff --git a/packages/editor/src/editor/Editable.tsx b/packages/editor/src/editor/Editable.tsx
@@ -659,8 +659,53 @@ export const PortableTextEditable = forwardRef<
       if (!event.isDefaultPrevented()) {
         slateEditor.pteWithHotKeys(event)
       }
+      if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'key.down',
+            keyboardEvent: {
+              key: event.nativeEvent.key,
+              code: event.nativeEvent.code,
+              altKey: event.nativeEvent.altKey,
+              ctrlKey: event.nativeEvent.ctrlKey,
+              metaKey: event.nativeEvent.metaKey,
+              shiftKey: event.nativeEvent.shiftKey,
+            },
+            nativeEvent: event.nativeEvent,
+          },
+          editor: slateEditor,
+        })
+      }
+    },
+    [props, editorActor, slateEditor],
+  )
+
+  const handleKeyUp = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (props.onKeyUp) {
+        props.onKeyUp(event)
+      }
+      if (!event.isDefaultPrevented()) {
+        editorActor.send({
+          type: 'behavior event',
+          behaviorEvent: {
+            type: 'key.up',
+            keyboardEvent: {
+              key: event.nativeEvent.key,
+              code: event.nativeEvent.code,
+              altKey: event.nativeEvent.altKey,
+              ctrlKey: event.nativeEvent.ctrlKey,
+              metaKey: event.nativeEvent.metaKey,
+              shiftKey: event.nativeEvent.shiftKey,
+            },
+            nativeEvent: event.nativeEvent,
+          },
+          editor: slateEditor,
+        })
+      }
     },
-    [props, slateEditor],
+    [props, editorActor, slateEditor],
   )
 
   const scrollSelectionIntoViewToSlate = useMemo(() => {
@@ -753,6 +798,7 @@ export const PortableTextEditable = forwardRef<
       onDOMBeforeInput={handleOnBeforeInput}
       onFocus={handleOnFocus}
       onKeyDown={handleKeyDown}
+      onKeyUp={handleKeyUp}
       onPaste={handlePaste}
       readOnly={readOnly}
       // We have implemented our own placeholder logic with decorations.

diff --git a/packages/editor/src/editor/behavior/behavior.actions.ts b/packages/editor/src/editor/behavior/behavior.actions.ts
@@ -188,6 +188,8 @@ const behaviorActionImplementations: BehaviorActionImplementations = {
   'effect': ({action}) => {
     action.effect()
   },
+  'key.down': () => {},
+  'key.up': () => {},
   'paste': ({action}) => {
     action.editor.insertData(action.clipboardData)
   },
@@ -386,6 +388,20 @@ function performDefaultAction({
       })
       break
     }
+    case 'key.down': {
+      behaviorActionImplementations['key.down']({
+        context,
+        action,
+      })
+      break
+    }
+    case 'key.up': {
+      behaviorActionImplementations['key.up']({
+        context,
+        action,
+      })
+      break
+    }
     default: {
       behaviorActionImplementations.paste({
         context,

diff --git a/packages/editor/src/editor/behavior/behavior.types.ts b/packages/editor/src/editor/behavior/behavior.types.ts
@@ -83,6 +83,22 @@ export type BehaviorEvent =
       type: 'paste'
       clipboardData: NonNullable<ClipboardEvent['clipboardData']>
     }
+  | {
+      type: 'key.down'
+      keyboardEvent: Pick<
+        KeyboardEvent,
+        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+      >
+      nativeEvent: KeyboardEvent
+    }
+  | {
+      type: 'key.up'
+      keyboardEvent: Pick<
+        KeyboardEvent,
+        'key' | 'code' | 'altKey' | 'ctrlKey' | 'metaKey' | 'shiftKey'
+      >
+      nativeEvent: KeyboardEvent
+    }
 
 /**
  * @alpha
@@ -94,15 +110,19 @@ export type BehaviorGuard<
   context,
   event,
 }: {
-  event: TBehaviorEvent
+  event: TBehaviorEvent['type'] extends 'key.down' | 'key.up'
+    ? Omit<TBehaviorEvent, 'nativeEvent'>
+    : TBehaviorEvent
   context: BehaviorContext
 }) => TGuardResponse | false
 
 /**
  * @alpha
  */
 export type BehaviorActionIntend =
-  | BehaviorEvent
+  | OmitFromUnion<BehaviorEvent, 'type', 'key.down' | 'key.up'>
+  | Omit<PickFromUnion<BehaviorEvent, 'type', 'key.down'>, 'nativeEvent'>
+  | Omit<PickFromUnion<BehaviorEvent, 'type', 'key.up'>, 'nativeEvent'>
   | {
       type: 'insert block object'
       placement: 'auto' | 'after' | 'before'
@@ -208,7 +228,7 @@ export type BehaviorActionIntendSet<
     event: PickFromUnion<BehaviorEvent, 'type', TBehaviorEventType>
   },
   guardResponse: TGuardResponse,
-) => Array<BehaviorActionIntend>
+) => Array<OmitFromUnion<BehaviorActionIntend, 'type', 'key.down' | 'key.up'>>
 
 /**
  * @alpha

diff --git a/packages/editor/src/editor/editor-machine.ts b/packages/editor/src/editor/editor-machine.ts
@@ -303,6 +303,12 @@ export const editorMachine = setup({
         }
 
         if (behaviorOverwritten) {
+          if (
+            event.behaviorEvent.type === 'key.down' ||
+            event.behaviorEvent.type === 'key.up'
+          ) {
+            event.behaviorEvent.nativeEvent.preventDefault()
+          }
           break
         }
       }