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

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

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.startsWith("text/") ||
-        (mimeType.includes("json") || mimeType.includes("yaml") || mimeType.includes("toml"))
+        (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 {

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",