From 612352150233044c91ceffeb53ac77247c0c0241 Mon Sep 17 00:00:00 2001
From: alina sireneva <alina@tei.su>
Date: Fri, 24 Jan 2025 07:54:59 +0300
Subject: [PATCH] feat: added shortcut for running

---
 packages/repl/src/App.tsx                      | 14 +++++++++++---
 packages/repl/src/components/editor/Editor.tsx |  9 +++++----
 packages/repl/src/components/runner/Runner.tsx | 14 +++++++++++++-
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/repl/src/App.tsx b/packages/repl/src/App.tsx
index 335cd95..a48c80a 100644
--- a/packages/repl/src/App.tsx
+++ b/packages/repl/src/App.tsx
@@ -1,5 +1,6 @@
-import { ColorModeProvider, ColorModeScript } from '@kobalte/core'
+import type { RunnerController } from './components/runner/Runner.tsx'
 
+import { ColorModeProvider, ColorModeScript } from '@kobalte/core'
 import { workerInit } from 'mtcute-repl-worker/client'
 import { createSignal, lazy, onCleanup, onMount, Show } from 'solid-js'
 import { EditorTabs } from './components/editor/EditorTabs.tsx'
@@ -16,6 +17,7 @@ export function App() {
   const [updating, setUpdating] = createSignal(true)
   const [showSettings, setShowSettings] = createSignal(false)
   const [settingsTab, setSettingsTab] = createSignal<SettingsTab>('accounts')
+  const [runnerController, setRunnerController] = createSignal<RunnerController>()
 
   const [isResizing, setIsResizing] = createSignal(false)
   const [sizes, setSizes] = createSignal([0.5, 0.5])
@@ -76,7 +78,10 @@ export function App() {
           <Resizable sizes={sizes()} onSizesChange={e => setSizes(e)} orientation="horizontal" class="size-full max-h-[calc(100vh-57px)]">
             <ResizablePanel class="h-full overflow-x-auto overflow-y-hidden" minSize={0.2}>
               <EditorTabs />
-              <Editor class="size-full" />
+              <Editor
+                class="size-full"
+                onRun={() => runnerController()?.run()}
+              />
             </ResizablePanel>
             <ResizableHandle
               withHandle
@@ -90,7 +95,10 @@ export function App() {
               class="flex max-h-full flex-col overflow-hidden"
               minSize={0.2}
             >
-              <Runner isResizing={isResizing()} />
+              <Runner
+                isResizing={isResizing()}
+                controllerRef={setRunnerController}
+              />
             </ResizablePanel>
           </Resizable>
         </Show>
diff --git a/packages/repl/src/components/editor/Editor.tsx b/packages/repl/src/components/editor/Editor.tsx
index 19b065d..4096b77 100644
--- a/packages/repl/src/components/editor/Editor.tsx
+++ b/packages/repl/src/components/editor/Editor.tsx
@@ -1,5 +1,5 @@
 import { useColorModeValue } from '@kobalte/core'
-import { editor as mEditor, Uri } from 'monaco-editor'
+import { KeyCode, KeyMod, editor as mEditor, Uri } from 'monaco-editor'
 
 import { createEffect, on, onMount } from 'solid-js'
 import { $activeTab, $tabs, type EditorTab } from '../../store/tabs.ts'
@@ -9,6 +9,7 @@ import './Editor.css'
 
 export interface EditorProps {
   class?: string
+  onRun: () => void
 }
 
 const DEFAULT_CODE = `
@@ -81,9 +82,9 @@ export default function Editor(props: EditorProps) {
 
     editor.setModel(modelsByTab.get(activeTab())!)
 
-    // editor.onDidChangeModelContent(() => {
-    //     props.onCodeChange(editor?.getValue() ?? '')
-    // })
+    editor.addCommand(KeyMod.CtrlCmd | KeyCode.Enter, () => {
+      props.onRun()
+    })
 
     return () => editor?.dispose()
   })
diff --git a/packages/repl/src/components/runner/Runner.tsx b/packages/repl/src/components/runner/Runner.tsx
index 445f00a..6a1b6a5 100644
--- a/packages/repl/src/components/runner/Runner.tsx
+++ b/packages/repl/src/components/runner/Runner.tsx
@@ -1,5 +1,6 @@
 import type { DropdownMenuTriggerProps } from '@kobalte/core/dropdown-menu'
 import type { mtcute } from 'mtcute-repl-worker/client'
+import type { Setter } from 'solid-js'
 import type { CustomTypeScriptWorker } from '../editor/utils/custom-worker.ts'
 import { timers } from '@fuman/utils'
 import { persistentAtom } from '@nanostores/persistent'
@@ -37,7 +38,14 @@ const $enableVerbose = persistentAtom('repl:verboseLogs', false, {
   decode: value => value === 'true',
 })
 
-export function Runner(props: { isResizing: boolean }) {
+export interface RunnerController {
+  run: () => void
+}
+
+export function Runner(props: {
+  isResizing: boolean
+  controllerRef: Setter<RunnerController | undefined>
+}) {
   const [devtoolsIframe, setDevtoolsIframe] = createSignal<HTMLIFrameElement | undefined>()
   const [runnerIframe, setRunnerIframe] = createSignal<HTMLIFrameElement>()
   const [runnerLoaded, setRunnerLoaded] = createSignal(false)
@@ -154,6 +162,10 @@ export function Runner(props: { isResizing: boolean }) {
 
   onMount(async () => {
     window.addEventListener('message', handleMessage)
+
+    props.controllerRef({
+      run: () => handleRun(),
+    })
   })
   onCleanup(() => {
     window.removeEventListener('message', handleMessage)