diff --git a/packages/repl/src/App.tsx b/packages/repl/src/App.tsx index c0ffbbb..335cd95 100644 --- a/packages/repl/src/App.tsx +++ b/packages/repl/src/App.tsx @@ -1,7 +1,7 @@ import { ColorModeProvider, ColorModeScript } from '@kobalte/core' import { workerInit } from 'mtcute-repl-worker/client' -import { createSignal, lazy, onMount, Show } from 'solid-js' +import { createSignal, lazy, onCleanup, onMount, Show } from 'solid-js' import { EditorTabs } from './components/editor/EditorTabs.tsx' import { NavbarMenu } from './components/nav/NavbarMenu.tsx' import { Runner } from './components/runner/Runner.tsx' @@ -24,6 +24,16 @@ export function App() { onMount(() => { workerInit(workerIframe) + + const handleKeyDown = (e: KeyboardEvent) => { + if (e.metaKey && e.key === ',') { + setShowSettings(true) + e.preventDefault() + } + } + + window.addEventListener('keydown', handleKeyDown) + onCleanup(() => window.removeEventListener('keydown', handleKeyDown)) }) return ( diff --git a/packages/repl/src/components/runner/Devtools.tsx b/packages/repl/src/components/runner/Devtools.tsx index 85cf39e..3db33a8 100644 --- a/packages/repl/src/components/runner/Devtools.tsx +++ b/packages/repl/src/components/runner/Devtools.tsx @@ -64,6 +64,21 @@ async function focusConsole(tabbedPane) { const injectCss = await waitForElement('#inject-css', document.body); const rootView = await waitForElement('.root-view', document.body); rootView.appendChild(injectCss); + + // forward some keyboard shortcuts to the parent window + document.addEventListener('keydown', (e) => { + if (!(e.metaKey && e.key === ',')) return + + const options = { + key: e.key, + ctrlKey: e.ctrlKey, + metaKey: e.metaKey, + } + const keyboardEvent = new KeyboardEvent('keydown', options) + window.parent.dispatchEvent(keyboardEvent) + + e.preventDefault() + }, true) })(); ` diff --git a/packages/repl/src/components/settings/login/Login.tsx b/packages/repl/src/components/settings/login/Login.tsx index 09cfb20..fec82e2 100644 --- a/packages/repl/src/components/settings/login/Login.tsx +++ b/packages/repl/src/components/settings/login/Login.tsx @@ -299,7 +299,7 @@ function OtpStep(props: StepProps<'otp'>) { const [innerInputRef, setInnerInputRef] = createSignal() - createEffect(() => { + onMount(() => { const handleKeyDown = (e: KeyboardEvent) => { if (e.key >= '0' && e.key <= '9') { innerInputRef()?.focus()