From 9804cf9a6dfc5538cd8f5ac4b3a8e188d2e4b233 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Wed, 29 Jul 2026 16:08:03 -0400
Subject: [PATCH] feat(excalidraw): support .excalidraw.md (Obsidian plugin
 format) with lz-string decompression

---
 backend/indexer.py               |  1 +
 backend/main.py                  | 24 +++++++++++++++++++++++-
 frontend/excalidraw-editor.html  | 25 ++++++++++++++++++++-----
 frontend/js/excalidraw-viewer.js | 11 ++++++-----
 frontend/js/utils.js             |  5 +++++
 5 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/backend/indexer.py b/backend/indexer.py
index 2b6384e..edbc326 100644
--- a/backend/indexer.py
+++ b/backend/indexer.py
@@ -64,6 +64,7 @@ SUPPORTED_EXTENSIONS = {
     ".php", ".sql", ".r", ".m", ".swift", ".kt",
     ".dockerfile", ".makefile", ".cmake",
     ".excalidraw",
+    ".excalidraw.md",
 }
 
 
diff --git a/backend/main.py b/backend/main.py
index d67ad16..6cffc0f 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -124,6 +124,7 @@ class FileContentResponse(BaseModel):
     is_json: bool | None = Field(default=None, description="True for JSON files")
     is_excalidraw: bool | None = Field(default=None, description="True for Excalidraw diagram files")
     excalidraw_data: dict[str, Any] | None = Field(default=None, description="Excalidraw diagram data (elements, appState, files)")
+    excalidraw_data_compressed: str | None = Field(default=None, description="Compressed Excalidraw data for .excalidraw.md files")
     pdf_metadata: dict[str, Any] | None = Field(default=None, description="PDF metadata")
     pdf_toc: list[dict[str, Any]] | None = Field(default=None, description="PDF table of contents")
     image_mime: str | None = Field(default=None, description="MIME type for image files")
@@ -2505,7 +2506,28 @@ async def api_file(vault_name: str, path: str = Query(..., description="Relative
             "is_markdown": False, "is_json": True,
         }
 
-    # === Excalidraw: diagram editor ===
+    # === Excalidraw .excalidraw.md (Obsidian plugin format) ===
+    if path.lower().endswith(".excalidraw.md"):
+        import re as re_mod
+        raw_lower = file_path.read_text(encoding="utf-8", errors="replace")
+        # Check for excalidraw-plugin in frontmatter or body
+        if "excalidraw-plugin:" in raw_lower:
+            # Extract compressed JSON block
+            match = re_mod.search(r'```compressed-json\n(.*?)\n```', raw_lower, re_mod.DOTALL)
+            if match:
+                compressed = match.group(1).strip()
+                return {
+                    "vault": vault_name, "path": path,
+                    "title": file_path.name.replace(".excalidraw.md", ""),
+                    "tags": [], "frontmatter": {},
+                    "html": "", "raw_length": len(raw_lower),
+                    "extension": ".excalidraw.md",
+                    "is_markdown": False,
+                    "is_excalidraw": True,
+                    "excalidraw_data_compressed": compressed,
+                }
+        # Fallback: treat as regular markdown
+        raw = raw_lower
     if ext == ".excalidraw":
         import json as json_mod
         try:
diff --git a/frontend/excalidraw-editor.html b/frontend/excalidraw-editor.html
index 375dfbe..6cea14e 100644
--- a/frontend/excalidraw-editor.html
+++ b/frontend/excalidraw-editor.html
@@ -107,6 +107,7 @@
   <script type="module">
     import React from "react";
     import ReactDOM from "react-dom";
+    import { decompressFromBase64 } from "https://esm.sh/lz-string@1.5.0";
     import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0?alias=react:react@18.3.1,react-dom:react-dom@18.3.1";
 
     window.React = React;
@@ -223,11 +224,25 @@
       switch (msg.type) {
         case "init":
           if (msg.data) {
-            const initialData = {
-              elements: msg.data.elements || [],
-              appState: msg.data.appState || {},
-              files: msg.data.files || {},
-            };
+            let elements, appState, files;
+            // Handle compressed .excalidraw.md format
+            if (msg.data.compressed) {
+              try {
+                const decompressed = decompressFromBase64(msg.data.compressed);
+                const parsed = JSON.parse(decompressed);
+                elements = parsed.elements || [];
+                appState = parsed.appState || {};
+                files = parsed.files || {};
+              } catch(e) {
+                console.error("Failed to decompress Excalidraw data:", e);
+                elements = []; appState = {}; files = {};
+              }
+            } else {
+              elements = msg.data.elements || [];
+              appState = msg.data.appState || {};
+              files = msg.data.files || {};
+            }
+            const initialData = { elements, appState, files };
             currentTheme = msg.theme || "light";
             setTheme(currentTheme);
 
diff --git a/frontend/js/excalidraw-viewer.js b/frontend/js/excalidraw-viewer.js
index 161b2e0..e71890b 100644
--- a/frontend/js/excalidraw-viewer.js
+++ b/frontend/js/excalidraw-viewer.js
@@ -75,13 +75,14 @@ export function renderExcalidraw(container, data, vaultName, filePath, opts = {}
       case 'ready':
         // Iframe is mounted — send initial data
         editorState.ready = true;
+        // Support both pure .excalidraw and compressed .excalidraw.md
+        const initData = data.excalidraw_data || {};
+        if (data.excalidraw_data_compressed) {
+          initData.compressed = data.excalidraw_data_compressed;
+        }
         iframe.contentWindow.postMessage({
           type: 'init',
-          data: data.excalidraw_data || {
-            elements: [],
-            appState: { viewBackgroundColor: '#ffffff' },
-            files: {},
-          },
+          data: initData,
           theme: theme,
         }, '*');
         break;
diff --git a/frontend/js/utils.js b/frontend/js/utils.js
index e9e0c1d..4ad658a 100644
--- a/frontend/js/utils.js
+++ b/frontend/js/utils.js
@@ -80,6 +80,7 @@ const EXT_ICONS = {
   ".csv": "table",
   ".tsv": "table",
   ".excalidraw": "pen-tool",
+  ".excalidraw.md": "pen-tool",
   ".sql": "database",
   ".db": "database",
   ".sqlite": "database",
@@ -206,6 +207,10 @@ const EXT_ICONS = {
 };
 
 function getFileIcon(name) {
+  const lower = name.toLowerCase();
+  // Check for double extensions first (e.g., .excalidraw.md)
+  if (lower.endsWith(".excalidraw.md")) return EXT_ICONS[".excalidraw.md"] || "pen-tool";
+  if (lower.endsWith(".md.excalidraw")) return EXT_ICONS[".excalidraw"] || "pen-tool";
   const ext = "." + name.split(".").pop().toLowerCase();
   return EXT_ICONS[ext] || "file";
 }