From 16bba9288306d8f00f2f876e578649a4486f4d55 Mon Sep 17 00:00:00 2001
From: andev0x <anvndev@gmail.com>
Date: Fri, 29 Aug 2025 16:11:32 +0700
Subject: [PATCH] fix: display images and special characters

---
 client_ws.js          | 39 +++++++++++++++++++++---
 server.js             | 10 +++++--
 template.html         | 59 +++++++++++++++++++++++++++++++++++-
 test_special_chars.md | 69 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 170 insertions(+), 7 deletions(-)
 create mode 100644 test_special_chars.md

diff --git a/client_ws.js b/client_ws.js
index da17bd8..cee904e 100644
--- a/client_ws.js
+++ b/client_ws.js
@@ -39,10 +39,13 @@
     }
   });
 
-  // add simple image zoom UI
+  // Enhanced image zoom UI with better error handling
   document.addEventListener("click", (e) => {
     const t = e.target;
     if (t && t.tagName === "IMG") {
+      e.preventDefault();
+      e.stopPropagation();
+      
       const overlayId = "mdview-img-overlay";
       let overlay = document.getElementById(overlayId);
       if (!overlay) {
@@ -56,16 +59,44 @@
         overlay.style.display = "flex";
         overlay.style.alignItems = "center";
         overlay.style.justifyContent = "center";
-        overlay.style.background = "rgba(0,0,0,0.8)";
+        overlay.style.background = "rgba(0,0,0,0.9)";
         overlay.style.zIndex = 99999;
+        overlay.style.cursor = "zoom-out";
+        
+        // Close on overlay click or ESC key
         overlay.addEventListener("click", () => {
           overlay.remove();
         });
+        
+        document.addEventListener("keydown", function escHandler(e) {
+          if (e.key === "Escape") {
+            overlay.remove();
+            document.removeEventListener("keydown", escHandler);
+          }
+        });
+        
         document.body.appendChild(overlay);
       }
+      
       const clone = t.cloneNode();
-      clone.style.maxHeight = "90%";
-      clone.style.maxWidth = "90%";
+      clone.style.maxHeight = "90vh";
+      clone.style.maxWidth = "90vw";
+      clone.style.objectFit = "contain";
+      clone.style.borderRadius = "8px";
+      clone.style.boxShadow = "0 4px 20px rgba(0,0,0,0.5)";
+      
+      // Add error handling for broken images
+      clone.addEventListener("error", () => {
+        clone.style.display = "none";
+        const errorDiv = document.createElement("div");
+        errorDiv.style.color = "white";
+        errorDiv.style.fontSize = "18px";
+        errorDiv.style.textAlign = "center";
+        errorDiv.innerHTML = "❌ Image failed to load<br><small>Click to close</small>";
+        overlay.innerHTML = "";
+        overlay.appendChild(errorDiv);
+      });
+      
       overlay.innerHTML = "";
       overlay.appendChild(clone);
     }
diff --git a/server.js b/server.js
index 98197f8..1675735 100644
--- a/server.js
+++ b/server.js
@@ -31,11 +31,17 @@ function renderMarkdown() {
       MARKDOWN_FILE,
       "--template=" + templatePath,
       "-s",
+      "--mathjax", // Enable MathJax for mathematical expressions
+      "--standalone",
+      "--metadata", "title=MDView",
       "-o",
       "-" // output to stdout
     ];
-    // spawn pandoc and capture stdout
-    const res = spawnSync("pandoc", args, { encoding: "utf8" });
+    // spawn pandoc and capture stdout with proper encoding
+    const res = spawnSync("pandoc", args, { 
+      encoding: "utf8",
+      maxBuffer: 1024 * 1024 * 10 // 10MB buffer for large files
+    });
     if (res.error) {
       console.error("pandoc error:", res.error);
       return `<pre>Error running pandoc: ${res.error}</pre>`;
diff --git a/template.html b/template.html
index 6549205..ee618f7 100644
--- a/template.html
+++ b/template.html
@@ -4,7 +4,21 @@
 <title>MDView</title>
 $endif$
 <meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.min.css">
+<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+<script>
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+      displayMath: [['$$', '$$'], ['\\[', '\\]']]
+    },
+    svg: {
+      fontCache: 'global'
+    }
+  };
+</script>
 <style>
   body {
     padding: 2rem;
@@ -30,6 +44,8 @@
     height: auto;
     cursor: zoom-in;
     transition: transform 0.2s ease;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
   }
 
   img.zoomed {
@@ -37,8 +53,49 @@
     cursor: zoom-out;
   }
 
+  /* Better support for special characters and Unicode */
+  .markdown-body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    line-height: 1.6;
+  }
+
+  /* Ensure proper rendering of mathematical expressions */
+  .MathJax {
+    font-size: 1.1em;
+  }
+
+  /* Better table styling */
+  table {
+    border-collapse: collapse;
+    margin: 1rem 0;
+  }
+
+  th, td {
+    border: 1px solid #ddd;
+    padding: 8px 12px;
+    text-align: left;
+  }
+
+  th {
+    background-color: #f6f8fa;
+    font-weight: 600;
+  }
+
+  /* Code block improvements */
   pre {
+    background-color: #f6f8fa;
+    border-radius: 6px;
+    padding: 16px;
     overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+  }
+
+  code {
+    background-color: rgba(175, 184, 193, 0.2);
+    padding: 0.2em 0.4em;
+    border-radius: 3px;
+    font-size: 85%;
   }
 
   /* Theme toggle button */
@@ -69,7 +126,7 @@
 
 <script>
   (function () {
-    const ws = new WebSocket("ws://localhost:7071");
+    const ws = new WebSocket("ws://127.0.0.1:7070");
     let isScrollingFromEditor = false;
 
     // Theme toggle function
diff --git a/test_special_chars.md b/test_special_chars.md
new file mode 100644
index 0000000..d073e77
--- /dev/null
+++ b/test_special_chars.md
@@ -0,0 +1,69 @@
+# Test Special Characters and Images
+
+## Special Characters Test
+
+### Unicode Characters
+- Emoji: 🚀 🎉 ✨ 🔥 💯
+- Mathematical symbols: ∑ ∫ ∞ ≤ ≥ ≠ ≈
+- Currency symbols: € £ ¥ ₹ ₽
+- Arrows: ← → ↑ ↓ ↔ ↕
+- Greek letters: α β γ δ ε ζ η θ λ μ π σ τ φ χ ψ ω
+- Accented characters: à á â ã ä å æ ç è é ê ë ì í î ï ñ ò ó ô õ ö ø ù ú û ü ý þ ÿ
+
+### Mathematical Expressions
+- Inline math: E = mc²
+- Fractions: ½ ⅓ ¼ ¾
+- Superscripts: x² y³ z⁴
+- Subscripts: H₂O CO₂
+
+### Special Punctuation
+- Quotation marks: "smart quotes" 'smart apostrophes'
+- Dashes: – — (en-dash, em-dash)
+- Ellipsis: …
+- Bullets: • ◦ ▪ ▫
+
+## Images Test
+
+### Local Image (if exists)
+![Local Test Image](./test_image.png)
+
+### External Image
+![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
+
+### Image with Alt Text
+![Sample Image](https://via.placeholder.com/300x200/0066CC/FFFFFF?text=Test+Image)
+
+## Code Blocks with Special Characters
+
+```python
+# Python code with special characters
+def calculate_π():
+    return 3.14159
+
+# Unicode strings
+message = "Hello 世界! 🌍"
+print(f"Temperature: 25°C")
+```
+
+```javascript
+// JavaScript with special characters
+const symbols = ['€', '£', '¥', '₹'];
+const emoji = '🚀';
+console.log(`Price: ${price}€`);
+```
+
+## Tables with Special Characters
+
+| Symbol | Name | Unicode |
+|--------|------|---------|
+| € | Euro | U+20AC |
+| £ | Pound | U+00A3 |
+| ¥ | Yen | U+00A5 |
+| ₹ | Rupee | U+20B9 |
+| 🚀 | Rocket | U+1F680 |
+
+## Links with Special Characters
+
+- [GitHub](https://github.com)
+- [Special Characters Wiki](https://en.wikipedia.org/wiki/Special_characters)
+- [Unicode Test](https://unicode.org/emoji/charts/full-emoji-list.html)
\ No newline at end of file