fix: add code editor option to result. resolves #26

package.json

@@ -23,8 +23,13 @@
     "build:linux": "electron-vite build && electron-builder --linux"
   },
   "dependencies": {
+    "@codemirror/lang-javascript": "^6.2.2",
     "@electron-toolkit/preload": "^3.0.0",
     "@electron-toolkit/utils": "^3.0.0",
+    "@uiw/codemirror-extensions-color": "^4.22.0",
+    "@uiw/codemirror-extensions-hyper-link": "^4.22.0",
+    "@uiw/codemirror-theme-vscode": "^4.22.0",
+    "@uiw/react-codemirror": "^4.22.0",
     "ansi-to-html": "^0.7.2",
     "dompurify": "^3.1.0",
     "electron-context-menu": "^3.6.1",

src/main/framework/runtime-events.ts

@@ -50,7 +50,18 @@ export function attach({ app, workspace }: BootstrapContext): void {
 
       return {
         target: isTarget,
-        result,
+        result: runtime.resultEdit
+          ? {
+              code: 0,
+              stream: [
+                {
+                  text: runtime.resultEdit,
+                  raw: runtime.resultEdit,
+                  error: false
+                }
+              ]
+            }
+          : result,
         ...runtime,
         history,
         appearance: {
@@ -62,6 +73,48 @@ export function attach({ app, workspace }: BootstrapContext): void {
     })
   }
 
+  ipcMain.handle(
+    'runtime.set-result',
+    async (_, runtimeId: string, commandId: string, result: string): Promise<boolean> => {
+      const runtime = workspace.runtimes.find((r) => r.id === runtimeId)
+      if (!runtime) {
+        return false
+      }
+
+      if (!commandId) {
+        runtime.resultEdit = result
+      } else {
+        const command = runtime.history.find((c) => c.id === commandId)
+        if (!command || !command.complete) {
+          return false
+        }
+
+        command.result = {
+          code: command.result.code,
+          stream: [
+            {
+              text: result,
+              raw: result,
+              error: command.error
+            }
+          ]
+        }
+      }
+
+      return false
+    }
+  )
+
+  ipcMain.handle('runtime.reset-focus', async (_, runtimeId: string): Promise<boolean> => {
+    const runtime = workspace.runtimes.find((r) => r.id === runtimeId)
+    if (!runtime) {
+      return false
+    }
+
+    runtime.resultEdit = ''
+    return true
+  })
+
   ipcMain.handle('runner.isCommanderMode', async (): Promise<boolean> => {
     return workspace.settings.get<boolean>(
       'runner.commanderMode',
@@ -267,6 +320,8 @@ export function attach({ app, workspace }: BootstrapContext): void {
       throw `Runtime '${runtimeId}' does not exist`
     }
 
+    runtime.resultEdit = ''
+
     const id = short.generate()
 
     const command: Command = {

src/main/framework/runtime.ts

@@ -73,6 +73,7 @@ export class Runtime {
   public history: Command[] = []
   public prompt: string = ''
   public commandFocus: string = ''
+  public resultEdit: string = ''
   public appearance: {
     icon: string
     title: string

src/renderer/src/runner/runner.tsx

@@ -1,13 +1,17 @@
 import { ChangeEvent, ReactElement, useEffect, useRef, useState } from 'react'
 import { Command, Runtime } from './runtime'
 import { ContextMenu, ContextMenuItem, ContextMenuTrigger } from 'rctx-contextmenu'
-
+import CodeMirror from '@uiw/react-codemirror'
+import { vscodeDark } from '@uiw/codemirror-theme-vscode'
+import { color } from '@uiw/codemirror-extensions-color'
+import { hyperLink } from '@uiw/codemirror-extensions-hyper-link'
+import { javascript } from '@codemirror/lang-javascript'
 export default function Runner(): ReactElement {
   const [runtimeList, setRuntimes] = useState<Runtime[]>([])
   const [pendingTitles, setPendingTitles] = useState<object>({})
   const [historyIndex, setHistoryIndex] = useState<number>(-1)
   const [commanderMode, setCommanderMode] = useState<boolean>(false)
-  const [rawMode, setRawMode] = useState<boolean>(false)
+  const [editMode, setEditMode] = useState<boolean>(false)
   const inputRef = useRef<HTMLInputElement>(null)
   const reloadRuntimesFromBackend = async (): Promise<void> => {
     const isCommanderMode = await window.electron.ipcRenderer.invoke('runner.isCommanderMode')
@@ -102,7 +106,9 @@ export default function Runner(): ReactElement {
   }
 
   const applyHistoryIndex = (index: number): void => {
-    setHistoryIndex(index)
+    window.electron.ipcRenderer.invoke('runtime.reset-focus', runtime?.id).then(() => {
+      setHistoryIndex(index)
+    })
   }
 
   const onHistoryItemClicked = (historyIndex: number): void => {
@@ -173,6 +179,14 @@ export default function Runner(): ReactElement {
     }
   }
 
+  const onResultChange = (runtimeId: string, commandId: string, value: string): void => {
+    window.electron.ipcRenderer
+      .invoke('runtime.set-result', runtimeId, commandId, value)
+      .then(() => {
+        return reloadRuntimesFromBackend()
+      })
+  }
+
   // useEffect(() => {
   //   inputRef.current?.focus()
   //
@@ -222,12 +236,18 @@ export default function Runner(): ReactElement {
       <pre dangerouslySetInnerHTML={{ __html: resultText }}></pre>
     </div>
   )
-  if (rawMode) {
+  if (editMode) {
     const resultTextRaw = result.stream.map((record) => record.raw).join('')
     output = (
-      <div className="runner-result-content">
-        <pre>{resultTextRaw}</pre>
-      </div>
+      <CodeMirror
+        value={resultTextRaw}
+        extensions={[color, hyperLink, javascript()]}
+        theme={vscodeDark}
+        onChange={(value) =>
+          onResultChange(runtime.id, historicalExecution ? historicalExecution.id : '', value)
+        }
+        basicSetup={{ foldGutter: true }}
+      />
     )
   }
 
@@ -320,14 +340,14 @@ export default function Runner(): ReactElement {
           </div>
           <div className="runner-info">
             <div
-              onClick={() => setRawMode((rawMode) => !rawMode)}
-              className={`toggle-button ${rawMode ? 'toggle-button-on' : ''}`}
+              onClick={() => setEditMode((rawMode) => !rawMode)}
+              className={`toggle-button ${editMode ? 'toggle-button-on' : ''}`}
             >
               <div className="toggle-button-slider">
                 <div className="toggle-button-spacer"></div>
                 <div className="toggle-button-circle"></div>
               </div>
-              raw
+              {'<\\>'}
             </div>
             <div className="runner-context-folder">{runtime.folder}</div>
           </div>