From eac1980e62d0766e63874603aef8e3d4cd23ae7f Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sat, 21 Mar 2026 12:43:30 -0400
Subject: [PATCH] Add textarea fallback for CodeMirror initialization failures
 and fix module dependency conflicts with import map

---
 frontend/app.js     | 71 +++++++++++++++++++++++++--------------------
 frontend/index.html | 23 ++++++++++-----
 frontend/style.css  | 15 ++++++++++
 3 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index 8ff8729..7f9525b 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -16,6 +16,7 @@
   let editorView = null;
   let editorVault = null;
   let editorPath = null;
+  let fallbackEditorEl = null;
 
   // ---------------------------------------------------------------------------
   // File extension → Lucide icon mapping
@@ -846,41 +847,48 @@
       editorView.destroy();
       editorView = null;
     }
+    fallbackEditorEl = null;
 
-    // Wait for CodeMirror to be available
-    await waitForCodeMirror();
+    try {
+      await waitForCodeMirror();
 
-    const { EditorView, EditorState, basicSetup, markdown, oneDark, keymap } = window.CodeMirror;
+      const { EditorView, EditorState, basicSetup, markdown, oneDark, keymap } = window.CodeMirror;
 
-    // Determine theme
-    const currentTheme = document.documentElement.getAttribute("data-theme");
-    const extensions = [
-      basicSetup,
-      markdown(),
-      keymap.of([{
-        key: "Mod-s",
-        run: () => {
-          saveFile();
-          return true;
-        }
-      }]),
-      EditorView.lineWrapping,
-    ];
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      const extensions = [
+        basicSetup,
+        markdown(),
+        keymap.of([{
+          key: "Mod-s",
+          run: () => {
+            saveFile();
+            return true;
+          }
+        }]),
+        EditorView.lineWrapping,
+      ];
 
-    if (currentTheme === "dark") {
-      extensions.push(oneDark);
+      if (currentTheme === "dark") {
+        extensions.push(oneDark);
+      }
+
+      const state = EditorState.create({
+        doc: rawData.raw,
+        extensions: extensions,
+      });
+
+      editorView = new EditorView({
+        state: state,
+        parent: bodyEl,
+      });
+    } catch (err) {
+      console.error("CodeMirror init failed, falling back to textarea:", err);
+      fallbackEditorEl = document.createElement("textarea");
+      fallbackEditorEl.className = "fallback-editor";
+      fallbackEditorEl.value = rawData.raw;
+      bodyEl.appendChild(fallbackEditorEl);
     }
 
-    const state = EditorState.create({
-      doc: rawData.raw,
-      extensions: extensions,
-    });
-
-    editorView = new EditorView({
-      state: state,
-      parent: bodyEl,
-    });
-
     modal.classList.add("active");
     safeCreateIcons();
   }
@@ -903,14 +911,15 @@
       editorView.destroy();
       editorView = null;
     }
+    fallbackEditorEl = null;
     editorVault = null;
     editorPath = null;
   }
 
   async function saveFile() {
-    if (!editorView || !editorVault || !editorPath) return;
+    if ((!editorView && !fallbackEditorEl) || !editorVault || !editorPath) return;
 
-    const content = editorView.state.doc.toString();
+    const content = editorView ? editorView.state.doc.toString() : fallbackEditorEl.value;
     const saveBtn = document.getElementById("editor-save");
     const originalText = saveBtn.textContent;
 
diff --git a/frontend/index.html b/frontend/index.html
index cc678bc..3a18485 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -9,17 +9,24 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css" id="hljs-theme-light" disabled>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
   <script src="https://unpkg.com/lucide@0.344.0/dist/umd/lucide.min.js"></script>
+  <script type="importmap">
+    {
+      "imports": {
+        "@codemirror/state": "https://esm.sh/@codemirror/state@6.2.0"
+      }
+    }
+  </script>
   
   <!-- CodeMirror 6 -->
   <script type="module">
-    import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from "https://esm.sh/@codemirror/view@6.9.0";
-    import { EditorState } from "https://esm.sh/@codemirror/state@6.2.0";
-    import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap } from "https://esm.sh/@codemirror/language@6.6.0";
-    import { defaultKeymap, history, historyKeymap } from "https://esm.sh/@codemirror/commands@6.2.3";
-    import { searchKeymap, highlightSelectionMatches } from "https://esm.sh/@codemirror/search@6.3.0";
-    import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "https://esm.sh/@codemirror/autocomplete@6.5.0";
-    import { markdown } from "https://esm.sh/@codemirror/lang-markdown@6.1.0";
-    import { oneDark } from "https://esm.sh/@codemirror/theme-one-dark@6.1.0";
+    import { EditorView, keymap, lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine } from "https://esm.sh/@codemirror/view@6.9.0?external=@codemirror/state";
+    import { EditorState } from "@codemirror/state";
+    import { defaultHighlightStyle, syntaxHighlighting, indentOnInput, bracketMatching, foldGutter, foldKeymap } from "https://esm.sh/@codemirror/language@6.6.0?external=@codemirror/state";
+    import { defaultKeymap, history, historyKeymap } from "https://esm.sh/@codemirror/commands@6.2.3?external=@codemirror/state";
+    import { searchKeymap, highlightSelectionMatches } from "https://esm.sh/@codemirror/search@6.3.0?external=@codemirror/state";
+    import { autocompletion, completionKeymap, closeBrackets, closeBracketsKeymap } from "https://esm.sh/@codemirror/autocomplete@6.5.0?external=@codemirror/state";
+    import { markdown } from "https://esm.sh/@codemirror/lang-markdown@6.1.0?external=@codemirror/state";
+    import { oneDark } from "https://esm.sh/@codemirror/theme-one-dark@6.1.0?external=@codemirror/state";
     
     const basicSetup = [
       lineNumbers(),
diff --git a/frontend/style.css b/frontend/style.css
index 1aeb43c..b65e2a8 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -937,6 +937,21 @@ a:hover {
   font-family: 'JetBrains Mono', monospace;
 }
 
+.fallback-editor {
+  width: 100%;
+  height: 100%;
+  min-height: 420px;
+  border: none;
+  outline: none;
+  resize: none;
+  padding: 16px;
+  background: var(--code-bg);
+  color: var(--text-primary);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: 0.9rem;
+  line-height: 1.55;
+}
+
 /* Mobile editor */
 @media (max-width: 768px) {
   .editor-modal {