Extra Mimetypes (#17)

Vastly expands the list of mimetypes we can detect from file extensions.

frontend/app/view/codeedit.tsx

@@ -57,7 +57,12 @@ function defaultEditorOptions(): MonacoTypes.editor.IEditorOptions {
     return opts;
 }
 
-export function CodeEdit() {
+interface CodeEditProps {
+    readonly: boolean;
+    text: string;
+}
+
+export function CodeEdit({ readonly, text }: CodeEditProps) {
     const divRef = React.useRef<HTMLDivElement>(null);
     const monacoRef = React.useRef<MonacoTypes.editor.IStandaloneCodeEditor | null>(null);
     const theme = "wave-theme-dark";
@@ -83,8 +88,8 @@ export function CodeEdit() {
         // TODO
     }
 
-    const text = "Hello, world!";
     const editorOpts = defaultEditorOptions();
+    editorOpts.readOnly = readonly;
 
     return (
         <div className="codeedit" ref={divRef}>
@@ -103,10 +108,15 @@ export function CodeEdit() {
     );
 }
 
-export function CodeEditView() {
+interface CodeEditViewProps {
+    readonly?: boolean;
+    text: string;
+}
+
+export function CodeEditView({ readonly = false, text }: CodeEditViewProps) {
     return (
         <div className="view-codeedit">
-            <CodeEdit />
+            <CodeEdit readonly={readonly} text={text} />
         </div>
     );
 }

frontend/app/view/preview.tsx

@@ -9,6 +9,7 @@ import * as util from "@/util/util";
 import clsx from "clsx";
 import * as jotai from "jotai";
 import { CenteredDiv } from "../element/quickelems";
+import { CodeEditView } from "./codeedit";
 import { DirectoryPreview } from "./directorypreview";
 
 import "./view.less";
@@ -179,6 +180,11 @@ function PreviewView({ blockId }: { blockId: string }) {
                 <pre>{fileContent}</pre>
             </div>
         );
+    } else if (
+        mimeType.startsWith("application") &&
+        (mimeType.includes("json") || mimeType.includes("yaml") || mimeType.includes("toml"))
+    ) {
+        specializedView = <CodeEditView readonly={true} text={fileContent} />;
     } else if (mimeType === "directory") {
         specializedView = <DirectoryPreview contentAtom={fileContentAtom} fileNameAtom={fileNameAtom} />;
     } else {