From 0593b82c6300d8ab73018ea161a88b0c15723d18 Mon Sep 17 00:00:00 2001
From: Amarsh Anand <amarsh.anand@gmail.com>
Date: Mon, 21 Aug 2023 21:50:58 -0700
Subject: [PATCH 1/4] test

---
 src/linecomps.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/linecomps.tsx b/src/linecomps.tsx
index 7d8d986d89..325f4ccc8e 100644
--- a/src/linecomps.tsx
+++ b/src/linecomps.tsx
@@ -221,6 +221,7 @@ class LineCmd extends React.Component<
         super(props);
     }
 
+    // Hi
     checkStateDiffLoad(): void {
         let { screen, line, staticRender, visible } = this.props;
         if (staticRender) {

From 93a1c1e480919af5d740d91369e8a7c3f76c77c1 Mon Sep 17 00:00:00 2001
From: Amarsh Anand <amarsh.anand@gmail.com>
Date: Wed, 23 Aug 2023 13:36:44 -0700
Subject: [PATCH 2/4] language can now be changed

---
 src/comps.less    | 14 ++++++++++++++
 src/lines.less    |  5 ++---
 src/view/code.tsx | 45 +++++++++++++++++++++++++++++++++++----------
 3 files changed, 51 insertions(+), 13 deletions(-)

diff --git a/src/comps.less b/src/comps.less
index 3416f2c88d..18f66405cc 100644
--- a/src/comps.less
+++ b/src/comps.less
@@ -235,6 +235,20 @@ body .xterm .xterm-viewport {
     margin-right: 5px;
 }
 
+.dropdown {
+    background: rgb(180, 180, 180);
+    color: black;
+    border-radius: 4px 4px 0 0;
+    font-size: 10px;
+    font-family: system-ui;
+    padding: 1px 0 3px 3px;
+    outline: none;
+}
+
+.monaco-editor .monaco-editor-background {
+    background-color: rgba(255, 255, 255, 0.075) !important; // Your desired background color
+}
+
 .cmd-hints {
     .mono-font(10px);
     display: flex;
diff --git a/src/lines.less b/src/lines.less
index ebabbaf198..55820b4c98 100644
--- a/src/lines.less
+++ b/src/lines.less
@@ -158,7 +158,7 @@
             position: relative;
             top: -8px;
             width: min(300px, 50%);
-            margin-bottom: -3px;
+            margin-bottom: -4px;
         }
 
         .cmd-rtnstate-diff {
@@ -217,8 +217,7 @@
 
     &.top-border {
         border-top: 1px solid #777;
-        padding-top: 5px;
-        margin-top: 5px;
+        padding: 10px;
     }
 
     &:nth-child(2) {
diff --git a/src/view/code.tsx b/src/view/code.tsx
index 7bf0a702dd..bd7faa17a6 100644
--- a/src/view/code.tsx
+++ b/src/view/code.tsx
@@ -4,21 +4,14 @@ import * as mobxReact from "mobx-react";
 import { RendererContext, RendererOpts } from "../types";
 import Editor from "@monaco-editor/react";
 
-/**
- * Note: As mentioned in https://www.npmjs.com/package/@monaco-editor/react#for-electron-users,
- * Monaco gets loaded from CDN. This may be problematic if we are behind a firewall etc. If this happens,
- * We need to serve Monaco from node_modules instead
- */
-
 type OV<V> = mobx.IObservableValue<V>;
 
-const MaxJsonSize = 50000;
-
 @mobxReact.observer
 class SourceCodeRenderer extends React.Component<
     {
         data: Blob;
-        path: String;
+        cmdstr: String;
+        cwd: String;
         context: RendererContext;
         opts: RendererOpts;
         savedHeight: number;
@@ -33,6 +26,8 @@ class SourceCodeRenderer extends React.Component<
         name: "language",
         deep: false,
     });
+    languages: OV<string[]> = mobx.observable.box([]);
+    selectedLanguage: OV<string> = mobx.observable.box("");
 
     editorRef;
     constructor(props) {
@@ -46,11 +41,15 @@ class SourceCodeRenderer extends React.Component<
     }
 
     handleEditorDidMount = (editor, monaco) => {
-        const extension = this.props.cmdstr.split(".").pop();
+        // Use a regular expression to match a filename with an extension
+        const extension = this.props.cmdstr.match(/(?:[^\\\/:*?"<>|\r\n]+\.)([a-zA-Z0-9]+)\b/)?.[1] || "";
         const detectedLanguage = monaco.languages
             .getLanguages()
             .find((lang) => lang.extensions && lang.extensions.includes("." + extension));
+        const languages = monaco.languages.getLanguages().map((lang) => lang.id);
+        this.languages.set(languages);
         if (detectedLanguage) {
+            this.selectedLanguage.set(detectedLanguage.id);
             this.editorRef.current = editor;
             const model = editor.getModel();
             if (model) {
@@ -60,6 +59,18 @@ class SourceCodeRenderer extends React.Component<
         }
     };
 
+    handleLanguageChange = (event) => {
+        const selectedLanguage = event.target.value;
+        this.selectedLanguage.set(selectedLanguage);
+        if (this.editorRef.current) {
+            const model = this.editorRef.current.getModel();
+            if (model) {
+                monaco.editor.setModelLanguage(model, selectedLanguage);
+                this.language.set(selectedLanguage);
+            }
+        }
+    };
+
     render() {
         let opts = this.props.opts;
         let maxWidth = opts.maxSize.width;
@@ -85,6 +96,20 @@ class SourceCodeRenderer extends React.Component<
                         }}
                     />
                 </div>
+                <div style={{ position: "absolute", bottom: "-3px", right: 0 }}>
+                    <select
+                        className="dropdown"
+                        value={this.selectedLanguage.get()}
+                        onChange={this.handleLanguageChange}
+                        style={{ maxWidth: "5rem", marginRight: "24px" }}
+                    >
+                        {this.languages.get().map((lang, index) => (
+                            <option key={index} value={lang}>
+                                {lang}
+                            </option>
+                        ))}
+                    </select>
+                </div>
             </div>
         );
     }

From 0790a88af6e4926c82246a52dd5b88827a4af541 Mon Sep 17 00:00:00 2001
From: Amarsh Anand <amarsh.anand@gmail.com>
Date: Wed, 23 Aug 2023 20:41:03 -0700
Subject: [PATCH 3/4] ready for PR

---
 src/comps.less  | 14 --------------
 src/prompt.less | 13 +++++++++++++
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/src/comps.less b/src/comps.less
index 18f66405cc..3416f2c88d 100644
--- a/src/comps.less
+++ b/src/comps.less
@@ -235,20 +235,6 @@ body .xterm .xterm-viewport {
     margin-right: 5px;
 }
 
-.dropdown {
-    background: rgb(180, 180, 180);
-    color: black;
-    border-radius: 4px 4px 0 0;
-    font-size: 10px;
-    font-family: system-ui;
-    padding: 1px 0 3px 3px;
-    outline: none;
-}
-
-.monaco-editor .monaco-editor-background {
-    background-color: rgba(255, 255, 255, 0.075) !important; // Your desired background color
-}
-
 .cmd-hints {
     .mono-font(10px);
     display: flex;
diff --git a/src/prompt.less b/src/prompt.less
index 3db218fb0c..001a66a31e 100644
--- a/src/prompt.less
+++ b/src/prompt.less
@@ -237,10 +237,23 @@ input[type="checkbox"] {
         display: flex;
         flex-direction: row;
     }
+
+    .dropdown {
+        background: rgb(180, 180, 180);
+        color: black;
+        border-radius: 4px 4px 0 0;
+        font-size: 10px;
+        font-family: system-ui;
+        padding: 1px 0 3px 3px;
+        outline: none;
+    }
 }
 
 .renderer-container.code-renderer {
     margin-top: 10px;
+    .monaco-editor .monaco-editor-background {
+        background-color: rgba(255, 255, 255, 0.075) !important;
+    }
 }
 
 .renderer-container.json-renderer {

From 923065e1eea5c30d2bc9f259e710ff4086606007 Mon Sep 17 00:00:00 2001
From: Amarsh Anand <amarsh.anand@gmail.com>
Date: Wed, 23 Aug 2023 20:45:49 -0700
Subject: [PATCH 4/4] ready for PR again

---
 src/linecomps.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/linecomps.tsx b/src/linecomps.tsx
index 325f4ccc8e..7d8d986d89 100644
--- a/src/linecomps.tsx
+++ b/src/linecomps.tsx
@@ -221,7 +221,6 @@ class LineCmd extends React.Component<
         super(props);
     }
 
-    // Hi
     checkStateDiffLoad(): void {
         let { screen, line, staticRender, visible } = this.props;
         if (staticRender) {