Merge pull request #60 from TheDeveloperDen/feature/syntax-hightlighting-and-open-lang-supp

feat: add syntax highlighting to fe and arbitrary lang support to be

Author: Pdzly

frontend/package.json

@@ -30,25 +30,37 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.4",
+    "@cmshiki/shiki": "^0.2.0",
+    "@codemirror/lang-angular": "^0.1.4",
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-go": "^6.0.1",
     "@codemirror/lang-html": "^6.4.11",
     "@codemirror/lang-java": "^6.0.2",
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-less": "^6.0.2",
     "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-php": "^6.0.2",
     "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-rust": "^6.0.2",
+    "@codemirror/lang-sass": "^6.0.2",
     "@codemirror/lang-sql": "^6.10.0",
+    "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.2",
     "@codemirror/language": "^6.12.1",
     "@codemirror/state": "^6.5.3",
     "@codemirror/view": "^6.39.8",
     "@ethercorps/sveltekit-og": "^4.2.1",
+    "@fsegurai/codemirror-theme-abyss": "^6.2.3",
+    "@fsegurai/codemirror-theme-monokai": "^6.2.3",
+    "@fsegurai/codemirror-theme-tokyo-night-storm": "^6.2.3",
     "@hey-api/openapi-ts": "^0.89.1",
     "@lezer/highlight": "^1.2.3",
-    "@uiw/codemirror-theme-basic": "^4.25.4",
+    "@replit/codemirror-lang-csharp": "^6.2.0",
     "axios": "^1.13.2",
     "codemirror": "^6.0.2",
+    "codemirror-shiki": "^0.3.0",
     "date-fns": "^4.1.0",
     "dotenv": "^17.2.3",
     "sharp": "^0.34.5",

frontend/pnpm-lock.yaml

@@ -2,34 +2,65 @@
     import { onMount } from "svelte";
     import { EditorView } from "@codemirror/view";
     import { basicSetup } from "codemirror";
-    import { EditorState, StateEffect } from "@codemirror/state";
-    import { syntaxHighlighting } from "@codemirror/language";
-    import { customTheme, customHighlight } from "$lib/editor-theme";
+    import { EditorState } from "@codemirror/state";
+    import { customTheme } from "$lib/editor-theme";
     import { getLanguageExtension, type LanguageType } from "$lib/editor-lang";
+    import { shikiToCodeMirror, updateEffect } from "@cmshiki/shiki";
+    import { getSingletonHighlighter } from "shiki";
 
     let {
         value = $bindable(""),
         language = "yaml" as LanguageType,
         editable = false,
+        theme = "ayu-dark",
     } = $props();
 
     let editorRef: HTMLDivElement;
     let view: EditorView | null = null;
 
-    let extensionsConfig = $derived([
-        basicSetup,
-        ...getLanguageExtension(language),
-        customTheme,
-        syntaxHighlighting(customHighlight),
-        EditorState.readOnly.of(!editable),
-        EditorView.editable.of(editable),
-    ]);
+    async function getThemeBg(themeName: string): Promise<string> {
+        const highlighter = await getSingletonHighlighter({
+            themes: [themeName],
+            langs: [],
+        });
+        return highlighter.getTheme(themeName).bg ?? "#1e1e1e";
+    }
+
+    function toShikiLang(lang: LanguageType): string | null {
+        return lang === "plain_text" ? null : lang;
+    }
+
+    async function buildEditor(doc: string) {
+        const shikiLang = toShikiLang(language);
+        const [bg, shikiResult] = await Promise.all([
+            getThemeBg(theme),
+            shikiLang
+                ? shikiToCodeMirror({
+                      lang: shikiLang,
+                      theme,
+                      engine: "javascript",
+                  })
+                : Promise.resolve(null),
+        ]);
+
+        const themeExtension = EditorView.theme({
+            "&": { backgroundColor: bg },
+            ".cm-gutters": { backgroundColor: bg, borderRight: "none" },
+            ".cm-activeLineGutter": { backgroundColor: `${bg}cc` },
+        });
 
-    onMount(() => {
-        view = new EditorView({
+        return new EditorView({
             state: EditorState.create({
-                doc: value,
-                extensions: extensionsConfig,
+                doc,
+                extensions: [
+                    basicSetup,
+                    ...getLanguageExtension(language),
+                    customTheme(bg),
+                    themeExtension,
+                    ...(shikiResult ? [shikiResult.shiki] : []),
+                    EditorState.readOnly.of(!editable),
+                    EditorView.editable.of(editable),
+                ],
             }),
             parent: editorRef,
             dispatchTransactions(trs, view) {
@@ -40,25 +71,39 @@
                 }
             },
         });
+    }
+
+    onMount(async () => {
+        view = await buildEditor(value);
     });
 
     $effect(() => {
-        if (view) {
-            view.dispatch({
-                effects: StateEffect.reconfigure.of(extensionsConfig),
-            });
-        }
+        // reactive deps
+        const _lang = language;
+        const _theme = theme;
+        const _editable = editable;
+
+        if (!view) return;
+
+        (async () => {
+            const currentDoc = view!.state.doc.toString();
+            view!.destroy();
+            view = await buildEditor(currentDoc);
+        })();
     });
 </script>
 
-<div bind:this={editorRef} class="w-full h-full"></div>
+<div
+    bind:this={editorRef}
+    class="w-full h-full overflow-scroll"
+    spellcheck="false"
+></div>
 
 <style>
     :global(.cm-editor) {
         height: 100%;
         outline: none !important;
     }
-
     :global(.cm-scroller) {
         font-family: "Cascadia Code", "Fira Code", monospace !important;
     }