test (#4)

* test

* language can now be changed

* ready for PR

* ready for PR again

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;
+        padding: 10px;
-        margin-top: 5px;
     }
 
     &:nth-child(2) {

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 {

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>
         );
     }