mdv-live 0.3.0

package/src/api/upload.js

@@ -0,0 +1,70 @@
+/**
+ * File upload API routes
+ */
+
+import multer from 'multer';
+import fs from 'fs/promises';
+import path from 'path';
+import { validatePath } from '../utils/path.js';
+
+/**
+ * Setup upload routes
+ * @param {Express} app - Express app instance
+ */
+export function setupUploadRoutes(app) {
+  // Configure multer for file uploads
+  const storage = multer.diskStorage({
+    destination: async (req, file, cb) => {
+      const targetPath = req.body.path || '';
+
+      // Security check: validate relative path before joining
+      if (!validatePath(targetPath, app.locals.rootDir)) {
+        return cb(new Error('Access denied'));
+      }
+
+      const fullPath = path.join(app.locals.rootDir, targetPath);
+
+      // Ensure directory exists
+      try {
+        await fs.mkdir(fullPath, { recursive: true });
+        cb(null, fullPath);
+      } catch (err) {
+        cb(err);
+      }
+    },
+    filename: (req, file, cb) => {
+      // パストラバーサル防止: ベース名のみ使用
+      const safeName = path.basename(file.originalname);
+      // null byteや制御文字を除去
+      const sanitized = safeName.replace(/[\x00-\x1f]/g, '');
+      cb(null, sanitized || 'unnamed');
+    }
+  });
+
+  const upload = multer({
+    storage,
+    limits: {
+      fileSize: 100 * 1024 * 1024 // 100MB limit
+    }
+  });
+
+  // Upload files
+  app.post('/api/upload', upload.array('files'), (req, res) => {
+    try {
+      if (!req.files || req.files.length === 0) {
+        return res.status(400).json({ error: 'No files uploaded' });
+      }
+
+      const uploaded = req.files.map(f => ({
+        name: f.originalname,
+        size: f.size
+      }));
+
+      res.json({ success: true, files: uploaded });
+    } catch (err) {
+      res.status(500).json({ error: err.message });
+    }
+  });
+}
+
+export default setupUploadRoutes;

package/src/rendering/index.js

@@ -0,0 +1,98 @@
+/**
+ * Rendering module - combines markdown-it and marp-core
+ */
+
+import fs from 'fs/promises';
+import { getFileType } from '../utils/fileTypes.js';
+import { renderMarkdown, isMarp } from './markdown.js';
+import { renderMarp } from './marp.js';
+
+/**
+ * Escape HTML entities
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeHtml(text) {
+  return text
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#x27;');
+}
+
+/**
+ * Render code with syntax highlighting markup
+ * @param {string} content - Code content
+ * @param {string} lang - Language for highlighting
+ * @returns {string} HTML
+ */
+function renderCode(content, lang) {
+  const escaped = escapeHtml(content);
+  const langClass = lang ? `language-${lang}` : '';
+  return `<pre><code class="${langClass}">${escaped}</code></pre>`;
+}
+
+/**
+ * Render plain text
+ * @param {string} content - Text content
+ * @returns {string} HTML
+ */
+function renderText(content) {
+  const escaped = escapeHtml(content);
+  return `<pre class="plain-text">${escaped}</pre>`;
+}
+
+/**
+ * Render a file and return content for the frontend
+ * @param {string} filePath - Full path to the file
+ * @returns {Promise<Object>} Rendered content and metadata
+ */
+export async function renderFile(filePath) {
+  const content = await fs.readFile(filePath, 'utf-8');
+  const fileType = getFileType(filePath);
+
+  // Markdown files
+  if (fileType.type === 'markdown') {
+    // Check if it's a Marp presentation
+    if (isMarp(content)) {
+      const { html, css } = renderMarp(content);
+      return {
+        content: html,
+        css,
+        raw: content,
+        fileType: 'markdown',
+        isMarp: true
+      };
+    }
+
+    // Regular markdown
+    const html = renderMarkdown(content);
+    return {
+      content: html,
+      raw: content,
+      fileType: 'markdown',
+      isMarp: false
+    };
+  }
+
+  // Code files
+  if (fileType.type === 'code') {
+    const html = renderCode(content, fileType.lang);
+    return {
+      content: html,
+      raw: content,
+      fileType: 'code'
+    };
+  }
+
+  // Plain text
+  const html = renderText(content);
+  return {
+    content: html,
+    raw: content,
+    fileType: 'text'
+  };
+}
+
+export default { renderFile };

package/src/rendering/markdown.js

@@ -0,0 +1,126 @@
+/**
+ * Markdown rendering using markdown-it
+ */
+
+import MarkdownIt from 'markdown-it';
+import taskLists from 'markdown-it-task-lists';
+
+// Initialize markdown-it with options
+const md = new MarkdownIt({
+  html: true,
+  typographer: true,
+  breaks: true,
+  linkify: true
+});
+
+// Enable tables and strikethrough
+md.enable('table');
+md.enable('strikethrough');
+
+// Enable task lists (checkboxes)
+md.use(taskLists, { enabled: true, label: true, labelAfter: true });
+
+// Pattern to detect Marp frontmatter (must be at very start of file, not using 'm' flag)
+const MARP_PATTERN = /^---\s*\n[\s\S]*?marp:\s*true[\s\S]*?\n---/;
+
+// Pattern to detect YAML frontmatter
+const FRONTMATTER_PATTERN = /^---\s*\n([\s\S]*?)\n---\s*(\n|$)/;
+
+// Pattern for Mermaid code blocks
+const MERMAID_PATTERN = /```mermaid\s*\n([\s\S]*?)\n```/g;
+
+/**
+ * Check if content is a Marp presentation
+ * @param {string} content - Markdown content
+ * @returns {boolean}
+ */
+export function isMarp(content) {
+  return MARP_PATTERN.test(content);
+}
+
+/**
+ * Convert YAML frontmatter to code block for display
+ * @param {string} content - Markdown content
+ * @returns {string} Content with frontmatter converted
+ */
+function convertFrontmatter(content) {
+  const match = content.match(FRONTMATTER_PATTERN);
+  if (match) {
+    const frontmatter = match[1];
+    const rest = content.slice(match[0].length);
+    return `\`\`\`yaml\n${frontmatter}\n\`\`\`\n${rest}`;
+  }
+  return content;
+}
+
+/**
+ * Protect Mermaid blocks from markdown processing
+ * @param {string} content - Markdown content
+ * @returns {{ content: string, blocks: string[] }}
+ */
+function protectMermaidBlocks(content) {
+  const blocks = [];
+  const protected_ = content.replace(MERMAID_PATTERN, (match, code) => {
+    blocks.push(code);
+    return `<!--MERMAID_PLACEHOLDER_${blocks.length - 1}-->`;
+  });
+  return { content: protected_, blocks };
+}
+
+/**
+ * Restore Mermaid blocks after markdown processing
+ * @param {string} html - Rendered HTML
+ * @param {string[]} blocks - Mermaid code blocks
+ * @returns {string}
+ */
+function restoreMermaidBlocks(html, blocks) {
+  blocks.forEach((code, i) => {
+    const escaped = code
+      .replace(/&/g, '&amp;')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;');
+    const mermaidHtml = `<pre><code class="language-mermaid">${escaped}</code></pre>`;
+
+    // Replace both paragraph-wrapped and bare placeholders
+    html = html.replace(`<p><!--MERMAID_PLACEHOLDER_${i}--></p>`, mermaidHtml);
+    html = html.replace(`<!--MERMAID_PLACEHOLDER_${i}-->`, mermaidHtml);
+  });
+  return html;
+}
+
+/**
+ * Add line numbers to rendered elements for editor sync
+ * @param {string} html - Rendered HTML
+ * @returns {string}
+ */
+function addLineNumbers(html) {
+  // This is a simplified version - the full implementation would
+  // track source positions during rendering
+  return html;
+}
+
+/**
+ * Render markdown to HTML
+ * @param {string} content - Markdown content
+ * @returns {string} HTML
+ */
+export function renderMarkdown(content) {
+  // Convert frontmatter to code block
+  content = convertFrontmatter(content);
+
+  // Protect Mermaid blocks
+  const { content: protected_, blocks } = protectMermaidBlocks(content);
+
+  // Render markdown
+  let html = md.render(protected_);
+
+  // Restore Mermaid blocks
+  html = restoreMermaidBlocks(html, blocks);
+
+  // Add line numbers
+  html = addLineNumbers(html);
+
+  return html;
+}
+
+export default { renderMarkdown, isMarp };

package/src/rendering/marp.js

@@ -0,0 +1,43 @@
+/**
+ * Marp rendering using @marp-team/marp-core
+ *
+ * IMPORTANT: Do not modify Marp's HTML output structure.
+ * The CSS depends on the exact structure: div.marpit > svg > foreignObject > section
+ */
+
+import { Marp } from '@marp-team/marp-core';
+
+// Initialize Marp with options
+const marp = new Marp({
+  html: true,
+  math: true,  // Enable KaTeX math
+});
+
+/**
+ * Render Marp presentation to HTML
+ * @param {string} content - Markdown content with Marp frontmatter
+ * @returns {{ html: string, css: string, slideCount: number }}
+ */
+export function renderMarp(content) {
+  const { html, css } = marp.render(content);
+
+  // Count slides by counting <section> tags
+  const slideCount = (html.match(/<section[^>]*>/g) || []).length;
+
+  // Return Marp's HTML output AS-IS to preserve CSS selector compatibility
+  return {
+    html,
+    css,
+    slideCount
+  };
+}
+
+/**
+ * Get available Marp themes
+ * @returns {string[]} Theme names
+ */
+export function getThemes() {
+  return ['default', 'gaia', 'uncover'];
+}
+
+export default { renderMarp, getThemes };

package/src/server.js

@@ -0,0 +1,109 @@
+/**
+ * MDV - Markdown Viewer Server
+ * Express + WebSocket server with Marp support
+ */
+
+import express from 'express';
+import { createServer } from 'http';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { setupWebSocket } from './websocket.js';
+import { setupWatcher } from './watcher.js';
+import { setupTreeRoutes } from './api/tree.js';
+import { setupFileRoutes } from './api/file.js';
+import { setupUploadRoutes } from './api/upload.js';
+import { setupPdfRoutes } from './api/pdf.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Create and configure the MDV server
+ * @param {Object} options - Server options
+ * @param {string} options.rootDir - Root directory to serve
+ * @param {number} options.port - Port to listen on
+ * @returns {Object} Server instance and control functions
+ */
+export function createMdvServer(options) {
+  const { rootDir, port = 8080 } = options;
+
+  const app = express();
+  const server = createServer(app);
+
+  // Store root directory in app locals for access in routes
+  app.locals.rootDir = path.resolve(rootDir);
+
+  // Middleware
+  app.use(express.json());
+  app.use(express.urlencoded({ extended: true }));
+
+  // Static files
+  const staticDir = path.join(__dirname, 'static');
+  app.use('/static', express.static(staticDir));
+
+  // API routes
+  setupTreeRoutes(app);
+  setupFileRoutes(app);
+  setupUploadRoutes(app);
+  setupPdfRoutes(app);
+
+  // Server info endpoint
+  app.get('/api/info', (req, res) => {
+    res.json({
+      rootPath: app.locals.rootDir,
+      version: '0.3.0'
+    });
+  });
+
+  // Shutdown endpoint
+  app.post('/api/shutdown', (req, res) => {
+    res.json({ success: true });
+    setTimeout(() => {
+      process.exit(0);
+    }, 100);
+  });
+
+  // Serve index.html for root
+  app.get('/', (req, res) => {
+    res.sendFile(path.join(staticDir, 'index.html'));
+  });
+
+  // Setup WebSocket
+  const wss = setupWebSocket(server);
+
+  // Setup file watcher
+  const watcher = setupWatcher(app.locals.rootDir, wss);
+
+  // Store watcher reference
+  app.locals.watcher = watcher;
+  app.locals.wss = wss;
+
+  return {
+    app,
+    server,
+    watcher,
+    wss,
+    port,
+
+    start() {
+      return new Promise((resolve) => {
+        server.listen(port, () => {
+          console.log(`MDV server running at http://localhost:${port}`);
+          resolve({ port });
+        });
+      });
+    },
+
+    stop() {
+      return new Promise((resolve) => {
+        watcher.close();
+        wss.close();
+        server.close(() => {
+          resolve();
+        });
+      });
+    }
+  };
+}
+
+export default createMdvServer;