mdv-live 0.3.8 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.3.8",
+  "version": "0.3.9",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/api/file.js

@@ -89,6 +89,32 @@ function buildBinaryFileResponse(name, fileType, downloadUrl) {
 export function setupFileRoutes(app) {
   const { rootDir } = app.locals;
 
+  // Serve raw files (for HTML preview with relative paths)
+  app.get('/raw/*', async (req, res) => {
+    const relativePath = req.params[0];
+    const { valid, fullPath } = resolveAndValidate(relativePath, rootDir);
+
+    if (!relativePath || !valid) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
+    try {
+      const stat = await fs.stat(fullPath);
+      if (!stat.isFile()) {
+        return res.status(400).json({ error: 'Not a file' });
+      }
+
+      const mimeType = mime.lookup(fullPath) || 'application/octet-stream';
+      res.setHeader('Content-Type', mimeType);
+      res.sendFile(fullPath);
+    } catch (err) {
+      if (err.code === 'ENOENT') {
+        return res.status(404).json({ error: 'File not found' });
+      }
+      res.status(500).json({ error: err.message });
+    }
+  });
+
   // Get file content
   app.get('/api/file', async (req, res) => {
     const { path: relativePath } = req.query;
@@ -115,6 +141,25 @@ export function setupFileRoutes(app) {
         return res.json(buildBinaryFileResponse(name, fileType, downloadUrl));
       }
 
+      // HTML files: return htmlUrl for iframe preview + raw content for editing
+      if (fileType.type === 'html') {
+        const content = await fs.readFile(fullPath, 'utf-8');
+        const escaped = content
+          .replace(/&/g, '&')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&#x27;');
+        return res.json({
+          name,
+          fileType: 'html',
+          icon: 'html',
+          htmlUrl: `/raw/${relativePath}`,
+          content: `<pre><code class="language-html">${escaped}</code></pre>`,
+          raw: content
+        });
+      }
+
       const rendered = await renderFile(fullPath);
       res.json({ name, ...rendered });
     } catch (err) {

package/src/static/app.js

@@ -830,6 +830,17 @@
             `;
         },
 
+        renderHTML(htmlUrl, name) {
+            elements.content.style.padding = '0';
+            elements.content.innerHTML = `
+                <div class="html-preview">
+                    <iframe src="${htmlUrl}" title="${name}"
+                        sandbox="allow-scripts allow-same-origin allow-forms">
+                    </iframe>
+                </div>
+            `;
+        },
+
         renderVideo(mediaUrl, name) {
             elements.content.innerHTML = `
                 <div class="video-preview">
@@ -908,6 +919,7 @@
                 css: data.css || null,  // Marp CSS from marp-core
                 imageUrl: data.imageUrl,
                 pdfUrl: data.pdfUrl,
+                htmlUrl: data.htmlUrl,
                 mediaUrl: data.mediaUrl,
                 downloadUrl: data.downloadUrl,
                 scrollTop: 0
@@ -1018,6 +1030,8 @@
                 ContentRenderer.renderImage(tab.imageUrl, tab.name);
             } else if (fileType === 'pdf') {
                 ContentRenderer.renderPDF(tab.pdfUrl, tab.name);
+            } else if (fileType === 'html' && tab.htmlUrl && !state.isEditMode) {
+                ContentRenderer.renderHTML(tab.htmlUrl, tab.name);
             } else if (fileType === 'video') {
                 ContentRenderer.renderVideo(tab.mediaUrl, tab.name);
             } else if (fileType === 'audio') {

package/src/static/styles.css

@@ -520,6 +520,22 @@ body {
     text-align: center;
 }
 
+/* ============================================================
+   HTML Preview
+   ============================================================ */
+
+.html-preview {
+    width: 100%;
+    height: 100%;
+}
+
+.html-preview iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    background: white;
+}
+
 /* ============================================================
    Editor Mode
    ============================================================ */

package/src/utils/fileTypes.js

@@ -29,8 +29,8 @@ const FILE_TYPES = {
   jsx: code('react', 'jsx'),
 
   // Code - Web
-  html: code('html', 'html'),
-  htm: code('html', 'html'),
+  html: { type: 'html', icon: 'html', lang: 'html', binary: false },
+  htm: { type: 'html', icon: 'html', lang: 'html', binary: false },
   css: code('css', 'css'),
   scss: code('css', 'scss'),
   less: code('css', 'less'),