From ba7d2cf061bf4ac7ebdd934bb85fcc4d83587be5 Mon Sep 17 00:00:00 2001
From: Sylvie Crowe <107814465+oneirocosm@users.noreply.github.com>
Date: Thu, 6 Jun 2024 14:52:01 -0700
Subject: [PATCH] Automatically Detect Monaco Syntax Highlighting (#20)

This change passes the file name to monaco, so it can use its own
detection to determine highlighting of supported files. It also resolves
some of the mimetypes with more common use cases for a terminal.
---
 frontend/app/view/codeedit.tsx | 17 +++++++++++------
 frontend/app/view/preview.tsx  | 16 +++++-----------
 pkg/util/utilfn/mimetypes.go   | 11 ++++++++---
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/frontend/app/view/codeedit.tsx b/frontend/app/view/codeedit.tsx
index fbfa478f9..ad0f9c9d2 100644
--- a/frontend/app/view/codeedit.tsx
+++ b/frontend/app/view/codeedit.tsx
@@ -58,11 +58,13 @@ function defaultEditorOptions(): MonacoTypes.editor.IEditorOptions {
 }
 
 interface CodeEditProps {
-    readonly: boolean;
+    readonly?: boolean;
     text: string;
+    language?: string;
+    filename: string;
 }
 
-export function CodeEdit({ readonly, text }: CodeEditProps) {
+export function CodeEdit({ readonly = false, text, language, filename }: CodeEditProps) {
     const divRef = React.useRef<HTMLDivElement>(null);
     const monacoRef = React.useRef<MonacoTypes.editor.IStandaloneCodeEditor | null>(null);
     const theme = "wave-theme-dark";
@@ -81,7 +83,7 @@ export function CodeEdit({ readonly, text }: CodeEditProps) {
     function handleEditorMount(editor: MonacoTypes.editor.IStandaloneCodeEditor) {
         monacoRef.current = editor;
         const monacoModel = editor.getModel();
-        monaco.editor.setModelLanguage(monacoModel, "text/markdown");
+        //monaco.editor.setModelLanguage(monacoModel, "text/markdown");
     }
 
     function handleEditorChange(newText: string, ev: MonacoTypes.editor.IModelContentChangedEvent) {
@@ -97,11 +99,12 @@ export function CodeEdit({ readonly, text }: CodeEditProps) {
                 <Editor
                     theme={theme}
                     height={divDims.height}
-                    defaultLanguage={"text/markdown"}
                     value={text}
                     onMount={handleEditorMount}
                     options={editorOpts}
                     onChange={handleEditorChange}
+                    path={filename}
+                    language={language}
                 />
             ) : null}
         </div>
@@ -111,12 +114,14 @@ export function CodeEdit({ readonly, text }: CodeEditProps) {
 interface CodeEditViewProps {
     readonly?: boolean;
     text: string;
+    language?: string;
+    filename?: string;
 }
 
-export function CodeEditView({ readonly = false, text }: CodeEditViewProps) {
+export function CodeEditView({ readonly, text, language, filename }: CodeEditViewProps) {
     return (
         <div className="view-codeedit">
-            <CodeEdit readonly={readonly} text={text} />
+            <CodeEdit readonly={readonly} text={text} language={language} filename={filename} />
         </div>
     );
 }
diff --git a/frontend/app/view/preview.tsx b/frontend/app/view/preview.tsx
index 360c06549..4198676fa 100644
--- a/frontend/app/view/preview.tsx
+++ b/frontend/app/view/preview.tsx
@@ -118,8 +118,6 @@ function PreviewView({ blockId }: { blockId: string }) {
             }
         )
     );
-    let name = jotai.useAtomValue(fileNameAtom);
-    console.log("file: ", name);
     const statFileAtom = useBlockAtom(blockId, "preview:statfile", () =>
         jotai.atom<Promise<FileInfo>>(async (get) => {
             const fileName = get(fileNameAtom);
@@ -156,6 +154,7 @@ function PreviewView({ blockId }: { blockId: string }) {
     if (mimeType == null) {
         mimeType = "";
     }
+    let fileName = jotai.useAtomValue(fileNameAtom);
     const fileInfo = jotai.useAtomValue(statFileAtom);
     const fileContent = jotai.useAtomValue(fileContentAtom);
 
@@ -174,17 +173,12 @@ function PreviewView({ blockId }: { blockId: string }) {
         specializedView = <CenteredDiv>File Too Large to Preview</CenteredDiv>;
     } else if (mimeType === "text/markdown") {
         specializedView = <MarkdownPreview contentAtom={fileContentAtom} />;
-    } else if (mimeType.startsWith("text/")) {
-        specializedView = (
-            <div className="view-preview view-preview-text">
-                <pre>{fileContent}</pre>
-            </div>
-        );
     } else if (
-        mimeType.startsWith("application") &&
-        (mimeType.includes("json") || mimeType.includes("yaml") || mimeType.includes("toml"))
+        mimeType.startsWith("text/") ||
+        (mimeType.startsWith("application/") &&
+            (mimeType.includes("json") || mimeType.includes("yaml") || mimeType.includes("toml")))
     ) {
-        specializedView = <CodeEditView readonly={true} text={fileContent} />;
+        specializedView = specializedView = <CodeEditView readonly={true} text={fileContent} filename={fileName} />;
     } else if (mimeType === "directory") {
         specializedView = <DirectoryPreview contentAtom={fileContentAtom} fileNameAtom={fileNameAtom} />;
     } else {
diff --git a/pkg/util/utilfn/mimetypes.go b/pkg/util/utilfn/mimetypes.go
index 7e3924549..5e36e38d2 100644
--- a/pkg/util/utilfn/mimetypes.go
+++ b/pkg/util/utilfn/mimetypes.go
@@ -155,7 +155,6 @@ var StaticMimeTypeMap = map[string]string{
 	".rl":                        "application/resource-lists+xml",
 	".rld":                       "application/resource-lists-diff+xml",
 	".rfcxml":                    "application/rfc+xml",
-	".rs":                        "application/rls-services+xml",
 	".rapd":                      "application/route-apd+xml",
 	".sls":                       "application/route-s-tsid+xml",
 	".rusd":                      "application/route-usd+xml",
@@ -1094,9 +1093,12 @@ var StaticMimeTypeMap = map[string]string{
 	".csvs":                      "text/csv-schema",
 	".soa":                       "text/dns",
 	".gff3":                      "text/gff3",
+	".go":                        "text/golang",
 	".html":                      "text/html",
-	".es":                        "text/javascript",
+	".js":                        "text/javascript",
 	".cnd":                       "text/jcr-cnd",
+	".jsx":                       "text/jsx",
+	".less":                      "text/less",
 	".md":                        "text/markdown",
 	".miz":                       "text/mizar",
 	".n3":                        "text/n3",
@@ -1104,6 +1106,9 @@ var StaticMimeTypeMap = map[string]string{
 	".provn":                     "text/provenance-notation",
 	".rst":                       "text/prs.fallenstein.rst",
 	".tag":                       "text/prs.lines.tag",
+	".rs":                        "text/rust",
+	".sass":                      "text/scss",
+	".scss":                      "text/scss",
 	".sgml":                      "text/SGML",
 	".shaclc":                    "text/shaclc",
 	".shex":                      "text/shex",
@@ -1112,6 +1117,7 @@ var StaticMimeTypeMap = map[string]string{
 	".tm":                        "text/texmacs",
 	".t":                         "text/troff",
 	".ttl":                       "text/turtle",
+	".ts":                        "text/typescript",
 	".uris":                      "text/uri-list",
 	".vcf":                       "text/vcard",
 	".a":                         "text/vnd.a",
@@ -1136,7 +1142,6 @@ var StaticMimeTypeMap = map[string]string{
 	".mc2":                       "text/vnd.senx.warpscript",
 	".sos":                       "text/vnd.sosi",
 	".jad":                       "text/vnd.sun.j2me.app-descriptor",
-	".ts":                        "text/vnd.trolltech.linguist",
 	".si":                        "text/vnd.wap.si",
 	".sl":                        "text/vnd.wap.sl",
 	".wml":                       "text/vnd.wap.wml",