fix: Fixes keyboard shortcut handling from within iframe editors

packages/models/src/Domain/Abstract/Component/MessageData.ts

@@ -27,4 +27,10 @@ export type MessageData = Partial<{
   content_type?: string
   /** Related to key-pressed action */
   keyboardModifier?: KeyboardModifier
+  key?: string
+  code?: string
+  ctrlKey?: boolean
+  metaKey?: boolean
+  shiftKey?: boolean
+  altKey?: boolean
 }>

packages/ui-services/src/Keyboard/ComponentKeyboardEventInit.ts

@@ -0,0 +1,11 @@
+export type ComponentKeyboardEventInit = Pick<
+  KeyboardEvent,
+  'key' | 'code' | 'ctrlKey' | 'metaKey' | 'shiftKey' | 'altKey'
+>
+
+export function isComponentKeyboardEventInit(data: {
+  key?: string
+  code?: string
+}): data is ComponentKeyboardEventInit {
+  return data.key !== undefined && data.code !== undefined
+}

packages/ui-services/src/Keyboard/KeyboardService.ts

@@ -1,4 +1,5 @@
 import { Environment, Platform, UuidGenerator } from '@standardnotes/snjs'
+import { ComponentKeyboardEventInit } from './ComponentKeyboardEventInit'
 import { eventMatchesKeyAndModifiers } from './eventMatchesKeyAndModifiers'
 import { KeyboardCommand } from './KeyboardCommands'
 import { KeyboardKeyEvent } from './KeyboardKeyEvent'
@@ -101,6 +102,12 @@ export class KeyboardService {
     this.removeActiveModifier(modifier)
   }
 
+  public handleComponentKeyboardEvent = (eventInit: ComponentKeyboardEventInit, keyEvent: KeyboardKeyEvent): void => {
+    const event = new KeyboardEvent(keyEvent === KeyboardKeyEvent.Down ? 'keydown' : 'keyup', eventInit)
+    this.updateAllModifiersFromEvent(event)
+    this.handleKeyboardEvent(event, keyEvent)
+  }
+
   private handleKeyDown = (event: KeyboardEvent): void => {
     this.updateAllModifiersFromEvent(event)
 

packages/ui-services/src/index.ts

@@ -7,6 +7,8 @@ export * from './Changelog/ChangelogServiceInterface'
 export * from './Keyboard/KeyboardService'
 export * from './Keyboard/KeyboardShortcut'
 export * from './Keyboard/KeyboardCommands'
+export * from './Keyboard/KeyboardKeyEvent'
+export * from './Keyboard/ComponentKeyboardEventInit'
 export * from './Keyboard/platformCheck'
 export * from './Keyboard/KeyboardKey'
 export * from './Keyboard/KeyboardModifier'

packages/web/src/javascripts/Components/ComponentView/IframeFeatureView.tsx

@@ -7,6 +7,7 @@ import {
   ComponentInterface,
   SubscriptionManagerEvent,
 } from '@standardnotes/snjs'
+import { KeyboardKeyEvent, type KeyboardModifier } from '@standardnotes/ui-services'
 import { FunctionComponent, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { observer } from 'mobx-react-lite'
 import OfflineRestricted from '@/Components/ComponentView/OfflineRestricted'
@@ -153,12 +154,50 @@ const IframeFeatureView: FunctionComponent<Props> = ({
 
   useEffect(() => {
     const removeActionObserver = componentViewer.addActionObserver((action, data) => {
+      const keyboardData = data as {
+        key?: string
+        code?: string
+        ctrlKey?: boolean
+        metaKey?: boolean
+        shiftKey?: boolean
+        altKey?: boolean
+        keyboardModifier?: KeyboardModifier
+      }
+
       switch (action) {
         case ComponentAction.KeyDown:
-          application.keyboardService.handleComponentKeyDown(data.keyboardModifier)
+          if (keyboardData.key !== undefined && keyboardData.code !== undefined) {
+            application.keyboardService.handleComponentKeyboardEvent(
+              {
+                key: keyboardData.key,
+                code: keyboardData.code,
+                ctrlKey: keyboardData.ctrlKey ?? false,
+                metaKey: keyboardData.metaKey ?? false,
+                shiftKey: keyboardData.shiftKey ?? false,
+                altKey: keyboardData.altKey ?? false,
+              },
+              KeyboardKeyEvent.Down,
+            )
+          } else {
+            application.keyboardService.handleComponentKeyDown(keyboardData.keyboardModifier)
+          }
           break
         case ComponentAction.KeyUp:
-          application.keyboardService.handleComponentKeyUp(data.keyboardModifier)
+          if (keyboardData.key !== undefined && keyboardData.code !== undefined) {
+            application.keyboardService.handleComponentKeyboardEvent(
+              {
+                key: keyboardData.key,
+                code: keyboardData.code,
+                ctrlKey: keyboardData.ctrlKey ?? false,
+                metaKey: keyboardData.metaKey ?? false,
+                shiftKey: keyboardData.shiftKey ?? false,
+                altKey: keyboardData.altKey ?? false,
+              },
+              KeyboardKeyEvent.Up,
+            )
+          } else {
+            application.keyboardService.handleComponentKeyUp(keyboardData.keyboardModifier)
+          }
           break
         case ComponentAction.Click:
           application.notesController.setContextMenuOpen(false)