chore(code): enable syntax highlighting

apps/client/src/widgets/type_widgets/editable_code.ts

@@ -66,6 +66,7 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
             this._update(note, blob?.content ?? "");
         });
 
+        this.codeEditor.setMimeType(note.mime);
         this.show();
 
         if (this.parent && hasTouchBar) {

packages/codemirror/src/index.ts

@@ -1,6 +1,8 @@
 import { defaultKeymap, indentWithTab } from "@codemirror/commands";
 import { EditorView, keymap, lineNumbers, ViewUpdate, type EditorViewConfig, type KeyBinding } from "@codemirror/view";
-import { defaultHighlightStyle, syntaxHighlighting } from "@codemirror/language";
+import { defaultHighlightStyle, StreamLanguage, syntaxHighlighting } from "@codemirror/language";
+import { Compartment } from "@codemirror/state";
+import byMimeType from "./syntax_highlighting.js";
 
 type ContentChangedListener = () => void;
 
@@ -11,13 +13,16 @@ export interface EditorConfig extends EditorViewConfig {
 export default class CodeMirror extends EditorView {
 
     private config: EditorConfig;
+    private languageCompartment: Compartment;
 
     constructor(config: EditorConfig) {
+        const languageCompartment = new Compartment();
         let extensions = [
             keymap.of([
                 ...defaultKeymap,
                 indentWithTab
             ]),
+            languageCompartment.of([]),
             syntaxHighlighting(defaultHighlightStyle),
             lineNumbers()
         ];
@@ -35,6 +40,7 @@ export default class CodeMirror extends EditorView {
             extensions
         });
         this.config = config;
+        this.languageCompartment = languageCompartment;
     }
 
     #onDocumentUpdated(v: ViewUpdate) {
@@ -56,4 +62,18 @@ export default class CodeMirror extends EditorView {
             }
         })
     }
+
+    async setMimeType(mime: string) {
+        const newExtension = [];
+
+        const correspondingSyntax = byMimeType[mime];
+        if (correspondingSyntax) {
+            const extension = StreamLanguage.define(await correspondingSyntax());
+            newExtension.push(extension);
+        }
+
+        this.dispatch({
+            effects: this.languageCompartment.reconfigure(newExtension)
+        });
+    }
 }

packages/codemirror/src/syntax_highlighting.ts

@@ -1,6 +1,6 @@
 import { type StreamParser } from "@codemirror/language"
 
-const mappings: Record<string, (() => Promise<StreamParser<unknown>>) | null> = {
+const byMimeType: Record<string, (() => Promise<StreamParser<unknown>>) | null> = {
     "text/plain": null,
     "text/apl": async () => (await import('@codemirror/legacy-modes/mode/apl')).apl,
     "text/x-ttcn-asn": async () => (await import('@codemirror/legacy-modes/mode/ttcn')).ttcn,
@@ -162,4 +162,4 @@ const mappings: Record<string, (() => Promise<StreamParser<unknown>>) | null> =
     "text/x-z80": async () => (await import('@codemirror/legacy-modes/mode/z80')).z80
 }
 
-export default mappings;
+export default byMimeType;