...

static/js/editor.js

@@ -10,6 +10,7 @@ class MarkdownEditor {
         this.filenameInput = document.getElementById(filenameInputId);
         this.currentFile = null;
         this.webdavClient = null;
+        this.macroProcessor = new MacroProcessor(null); // Will be set later
         
         this.initCodeMirror();
         this.initMarkdown();
@@ -86,6 +87,11 @@ class MarkdownEditor {
      */
     setWebDAVClient(client) {
         this.webdavClient = client;
+        
+        // Update macro processor with client
+        if (this.macroProcessor) {
+            this.macroProcessor.webdavClient = client;
+        }
     }
 
     /**
@@ -185,7 +191,7 @@ class MarkdownEditor {
     /**
      * Update preview
      */
-    updatePreview() {
+    async updatePreview() {
         const markdown = this.editor.getValue();
         const previewDiv = this.previewElement;
 
@@ -199,15 +205,29 @@ class MarkdownEditor {
         }
 
         try {
-            // Parse markdown to HTML
+            // Step 1: Process macros
+            let processedContent = markdown;
+            
+            if (this.macroProcessor) {
+                const processingResult = await this.macroProcessor.processMacros(markdown);
+                processedContent = processingResult.content;
+                
+                // Log errors if any
+                if (processingResult.errors.length > 0) {
+                    console.warn('Macro processing errors:', processingResult.errors);
+                }
+            }
+            
+            // Step 2: Parse markdown to HTML
             if (!this.marked) {
                 console.error("Markdown parser (marked) not initialized.");
                 previewDiv.innerHTML = `<div class="alert alert-danger">Preview engine not loaded.</div>`;
                 return;
             }
-            let html = this.marked.parse(markdown);
+            
+            let html = this.marked.parse(processedContent);
 
-            // Replace mermaid code blocks with div containers
+            // Replace mermaid code blocks
             html = html.replace(
                 /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
                 (match, code) => {
@@ -218,7 +238,7 @@ class MarkdownEditor {
 
             previewDiv.innerHTML = html;
 
-            // Apply syntax highlighting to code blocks
+            // Apply syntax highlighting
             const codeBlocks = previewDiv.querySelectorAll('pre code');
             codeBlocks.forEach(block => {
                 const languageClass = Array.from(block.classList)