fix: allow app shortcuts in Reader AI composer

raykyri · raykyri · commit 34b2e1306460 · 2026-04-07T01:04:28.000-04:00
diff --git a/server/__tests__/keyboard_shortcuts.test.ts b/server/__tests__/keyboard_shortcuts.test.ts
@@ -0,0 +1,44 @@
+import test from 'ava';
+import { JSDOM } from 'jsdom';
+import { APP_SHORTCUTS_ALLOWED_ATTR, isEditableShortcutTarget } from '../../src/keyboard_shortcuts.ts';
+
+function withDom<T>(callback: () => T): T {
+  const dom = new JSDOM('<!doctype html><html><body></body></html>', { url: 'https://input.test/doc' });
+  const previous = {
+    window: globalThis.window,
+    document: globalThis.document,
+    HTMLElement: globalThis.HTMLElement,
+  };
+
+  Object.assign(globalThis, {
+    window: dom.window,
+    document: dom.window.document,
+    HTMLElement: dom.window.HTMLElement,
+  });
+
+  try {
+    return callback();
+  } finally {
+    Object.assign(globalThis, previous);
+    dom.window.close();
+  }
+}
+
+test('isEditableShortcutTarget keeps regular textareas opt-out for app shortcuts', (t) => {
+  withDom(() => {
+    const input = document.createElement('textarea');
+    document.body.append(input);
+
+    t.true(isEditableShortcutTarget(input));
+  });
+});
+
+test('isEditableShortcutTarget allows marked composer targets to receive app shortcuts', (t) => {
+  withDom(() => {
+    const input = document.createElement('textarea');
+    input.setAttribute(APP_SHORTCUTS_ALLOWED_ATTR, 'true');
+    document.body.append(input);
+
+    t.false(isEditableShortcutTarget(input));
+  });
+});
diff --git a/src/components/ReaderAiPanel.tsx b/src/components/ReaderAiPanel.tsx
@@ -3,7 +3,7 @@ import { ArrowLeft, ArrowRight, ChevronDown, ChevronRight, CircleStop, MoreHoriz
 import type { ComponentChildren } from 'preact';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { blurOnClose } from '../dom_utils';
-import { matchesPrimaryShortcut } from '../keyboard_shortcuts';
+import { APP_SHORTCUTS_ALLOWED_ATTR, matchesPrimaryShortcut } from '../keyboard_shortcuts';
 import { parseMarkdownToHtml } from '../markdown';
 import type { ReaderAiEditProposal, ReaderAiStagedChange } from '../reader_ai';
 import type { ReaderAiRunRecord } from '../reader_ai_ledger';
@@ -1299,6 +1299,7 @@ export function ReaderAiPanel({
         <textarea
           ref={composerInputRef}
           class={`reader-ai-input${hasMessages ? ' reader-ai-input--bottom' : ''}`}
+          {...{ [APP_SHORTCUTS_ALLOWED_ATTR]: 'true' }}
           value={draft}
           placeholder={composerPlaceholder}
           onInput={(event) => {
diff --git a/src/keyboard_shortcuts.ts b/src/keyboard_shortcuts.ts
@@ -1,5 +1,8 @@
+export const APP_SHORTCUTS_ALLOWED_ATTR = 'data-allow-app-shortcuts';
+
 export function isEditableShortcutTarget(target: EventTarget | null): boolean {
   if (!(target instanceof HTMLElement)) return false;
+  if (target.closest(`[${APP_SHORTCUTS_ALLOWED_ATTR}="true"]`) !== null) return false;
   return target.isContentEditable || target.closest('input, textarea, select, [contenteditable="true"]') !== null;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,8 @@`
	`1`	`+export const APP_SHORTCUTS_ALLOWED_ATTR = 'data-allow-app-shortcuts';`
	`2`	`+`
`1`	`3`	`export function isEditableShortcutTarget(target: EventTarget \| null): boolean {`
`2`	`4`	`if (!(target instanceof HTMLElement)) return false;`
	`5`	+ if (target.closest(`[${APP_SHORTCUTS_ALLOWED_ATTR}="true"]`) !== null) return false;
`3`	`6`	`return target.isContentEditable \|\| target.closest('input, textarea, select, [contenteditable="true"]') !== null;`
`4`	`7`	`}`
`5`	`8`