mdv-live 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.3.7",
+  "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

@@ -613,6 +613,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                         </svg>
                     </button>
+                    <button class="marp-close-nav" title="Hide (N to show)">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
                 `;
                 marpit.appendChild(nav);
             }
@@ -676,17 +681,83 @@
 
             // Fullscreen toggle
             const fullscreenBtn = elements.content.querySelector('.marp-fullscreen-btn');
+            const expandIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>';
+            const shrinkIcon = '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4m0 5H4m5 0L4 4m11 5h5m-5 0V4m0 5l5-5M9 15v5m0-5H4m5 0l-5 5m11-5h5m-5 0v5m0-5l5 5" /></svg>';
             const toggleFullscreen = () => {
                 document.body.classList.toggle('marp-fullscreen');
+                const isFullscreen = document.body.classList.contains('marp-fullscreen');
+                if (fullscreenBtn) {
+                    fullscreenBtn.innerHTML = isFullscreen ? shrinkIcon : expandIcon;
+                    fullscreenBtn.title = isFullscreen ? 'Exit Fullscreen (Esc)' : 'Fullscreen (F)';
+                }
+                // Reset nav position when exiting fullscreen
+                const nav = elements.content.querySelector('.marp-nav');
+                if (!isFullscreen && nav) {
+                    nav.style.left = '';
+                    nav.style.top = '';
+                    nav.style.right = '';
+                    nav.style.bottom = '';
+                    nav.style.transform = '';
+                }
             };
             if (fullscreenBtn) fullscreenBtn.addEventListener('click', toggleFullscreen);
 
+            // Make nav draggable and closeable
+            const nav = elements.content.querySelector('.marp-nav');
+            if (nav) {
+                let isDragging = false;
+                let dragStartX, dragStartY, navStartX, navStartY;
+
+                nav.addEventListener('mousedown', (e) => {
+                    // Don't drag when clicking buttons or not in fullscreen
+                    if (e.target.closest('button')) return;
+                    if (!document.body.classList.contains('marp-fullscreen')) return;
+                    isDragging = true;
+                    nav.classList.add('dragging');
+                    dragStartX = e.clientX;
+                    dragStartY = e.clientY;
+                    const rect = nav.getBoundingClientRect();
+                    navStartX = rect.left;
+                    navStartY = rect.top;
+                    e.preventDefault();
+                });
+
+                document.addEventListener('mousemove', (e) => {
+                    if (!isDragging) return;
+                    const dx = e.clientX - dragStartX;
+                    const dy = e.clientY - dragStartY;
+                    const newX = Math.max(0, Math.min(window.innerWidth - nav.offsetWidth, navStartX + dx));
+                    const newY = Math.max(0, Math.min(window.innerHeight - nav.offsetHeight, navStartY + dy));
+                    nav.style.left = newX + 'px';
+                    nav.style.top = newY + 'px';
+                    nav.style.right = 'auto';
+                    nav.style.bottom = 'auto';
+                    nav.style.transform = 'none';
+                });
+
+                document.addEventListener('mouseup', () => {
+                    if (isDragging) {
+                        isDragging = false;
+                        nav.classList.remove('dragging');
+                    }
+                });
+
+                // Close button to hide nav
+                const closeBtn = nav.querySelector('.marp-close-nav');
+                if (closeBtn) {
+                    closeBtn.addEventListener('click', () => {
+                        nav.classList.add('hidden');
+                    });
+                }
+            }
+
             // Keyboard navigation
             marpKeyHandler = (e) => {
                 // Don't handle if editing or in dialog
                 if (state.isEditMode || !elements.dialogOverlay.classList.contains('hidden')) {
                     return;
                 }
+                const nav = elements.content.querySelector('.marp-nav');
                 if (e.key === 'ArrowRight' || e.key === ' ') {
                     e.preventDefault();
                     nextSlide();
@@ -696,9 +767,16 @@
                 } else if (e.key === 'f' || e.key === 'F') {
                     e.preventDefault();
                     toggleFullscreen();
-                } else if (e.key === 'Escape' && document.body.classList.contains('marp-fullscreen')) {
+                } else if (e.key === 'n' || e.key === 'N') {
+                    e.preventDefault();
+                    if (nav) nav.classList.toggle('hidden');
+                } else if (e.key === 'Escape') {
                     e.preventDefault();
-                    document.body.classList.remove('marp-fullscreen');
+                    if (document.body.classList.contains('marp-fullscreen')) {
+                        toggleFullscreen();
+                    } else if (nav && nav.classList.contains('hidden')) {
+                        nav.classList.remove('hidden');
+                    }
                 }
             };
             document.addEventListener('keydown', marpKeyHandler);
@@ -752,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">
@@ -830,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
@@ -940,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
    ============================================================ */
@@ -875,6 +891,7 @@ body {
     border-radius: 8px;
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+    user-select: none;
 }
 
 .marp-nav button {
@@ -911,6 +928,19 @@ body {
     text-align: center;
 }
 
+body.marp-fullscreen .marp-nav .slide-counter {
+    cursor: grab;
+}
+
+body.marp-fullscreen .marp-nav.dragging {
+    cursor: grabbing;
+    opacity: 0.9;
+}
+
+body.marp-fullscreen .marp-nav.dragging .slide-counter {
+    cursor: grabbing;
+}
+
 .marp-nav .keyboard-hint {
     font-size: 11px;
     color: var(--text-muted);
@@ -950,7 +980,10 @@ body.marp-fullscreen .content {
 
 body.marp-fullscreen .marp-nav {
     bottom: 32px;
-    right: 32px;
+    left: 50%;
+    right: auto;
+    transform: translateX(-50%);
+    cursor: grab;
 }
 
 body.marp-fullscreen .marpit {
@@ -970,6 +1003,19 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
     margin-left: 4px;
 }
 
+.marp-close-nav {
+    margin-left: 4px;
+}
+
+.marp-close-nav:hover:not(:disabled) {
+    background: var(--danger) !important;
+    border-color: var(--danger) !important;
+}
+
+.marp-nav.hidden {
+    display: none !important;
+}
+
 /* Print styles for Marp */
 @media print {
     .marp-nav { display: none !important; }

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'),