@ashraf_mizo/htmlcanvas 1.0.0

package/server.js

@@ -0,0 +1,588 @@
+import express from 'express';
+import { createServer } from 'http';
+import { WebSocketServer } from 'ws';
+import { createServer as netCreate } from 'net';
+import { fileURLToPath } from 'url';
+import path from 'path';
+import os from 'os';
+import fs from 'fs/promises';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import chokidar from 'chokidar';
+import multer from 'multer';
+import { chromium } from 'playwright';
+import { hasVarReference, parseInlineStyle } from './editor/cssVars.js';
+
+const execAsync = promisify(exec);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// ── Config ──────────────────────────────────────────────────────────────────
+const CONFIG_DIR = path.join(os.homedir(), '.htmlcanvas');
+const RECENTS_FILE = path.join(CONFIG_DIR, 'recents.json');
+const COMPONENTS_DIR = path.join(CONFIG_DIR, 'components');
+const UPLOADS_DIR = path.join(CONFIG_DIR, 'uploads');
+const MAX_RECENTS = 10;
+
+// ── Multer (image upload) ─────────────────────────────────────────────────────
+const storage = multer.diskStorage({
+  destination: UPLOADS_DIR,
+  filename: (req, file, cb) => {
+    const ext = path.extname(file.originalname) || '';
+    cb(null, `${Date.now()}-${Math.random().toString(36).slice(2, 8)}${ext}`);
+  }
+});
+const upload = multer({ storage });
+
+// ── Module-level state ───────────────────────────────────────────────────────
+let currentFile = null;        // { path, content, filename }
+let annotatedContent = null;   // Annotated HTML with data-hc-id attributes (from editor)
+let previewMiddleware = null;
+let fileWatcher = null;
+let wsClients = new Set();
+
+// ── Helpers: port selection ──────────────────────────────────────────────────
+function probePort(port) {
+  return new Promise((resolve) => {
+    const server = netCreate();
+    server.once('error', () => resolve(false));
+    server.once('listening', () => { server.close(); resolve(true); });
+    server.listen(port, '127.0.0.1');
+  });
+}
+
+async function findAvailablePort(start = 3000, max = 3010) {
+  for (let port = start; port <= max; port++) {
+    if (await probePort(port)) return port;
+  }
+  throw new Error(`No available port in range ${start}–${max}`);
+}
+
+// ── Helpers: recents ────────────────────────────────────────────────────────
+async function getRecents() {
+  try {
+    const raw = await fs.readFile(RECENTS_FILE, 'utf-8');
+    const paths = JSON.parse(raw);
+    if (!Array.isArray(paths)) return [];
+    const checks = await Promise.all(
+      paths.map(p =>
+        fs.access(p).then(() => p).catch(() => null)
+      )
+    );
+    return checks.filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+async function addRecent(filePath) {
+  const recents = await getRecents();
+  const deduped = [filePath, ...recents.filter(p => p !== filePath)].slice(0, MAX_RECENTS);
+  await fs.mkdir(CONFIG_DIR, { recursive: true });
+  await fs.writeFile(RECENTS_FILE, JSON.stringify(deduped, null, 2), 'utf-8');
+}
+
+// ── Helpers: preview directory ───────────────────────────────────────────────
+function setPreviewDirectory(dirPath) {
+  previewMiddleware = express.static(dirPath);
+}
+
+// ── Helpers: CSS variable audit (Plan 02) ────────────────────────────────────
+/**
+ * Scans HTML content for inline style attributes and counts how many CSS
+ * property values contain var() references. Diagnostic only — never blocks.
+ * @param {string} content - Raw HTML string
+ * @returns {number} Count of var() references found across all inline styles
+ */
+function auditCSSVariables(content) {
+  const styleRegex = /style="([^"]*)"/g;
+  let varCount = 0;
+  let match;
+  while ((match = styleRegex.exec(content)) !== null) {
+    const props = parseInlineStyle(match[1]);
+    for (const value of Object.values(props)) {
+      if (hasVarReference(value)) varCount++;
+    }
+  }
+  return varCount;
+}
+
+// ── Helpers: file watcher ────────────────────────────────────────────────────
+function watchFile(filePath) {
+  if (fileWatcher) {
+    fileWatcher.close();
+    fileWatcher = null;
+  }
+  fileWatcher = chokidar.watch(filePath, { ignoreInitial: true });
+  fileWatcher.on('change', () => {
+    broadcastToClients({ type: 'file-changed', path: filePath });
+  });
+}
+
+// ── Helpers: WebSocket broadcast ────────────────────────────────────────────
+function broadcastToClients(message) {
+  const data = JSON.stringify(message);
+  for (const client of wsClients) {
+    if (client.readyState === 1) {
+      client.send(data);
+    }
+  }
+}
+
+// ── Express app ─────────────────────────────────────────────────────────────
+const app = express();
+app.use(express.json({ limit: '10mb' }));
+
+// Serve editor shell
+app.use('/', express.static(path.join(__dirname, 'editor')));
+
+// Preview route — serves the opened file's parent directory
+app.use('/preview', (req, res, next) => {
+  if (previewMiddleware) {
+    previewMiddleware(req, res, next);
+  } else {
+    res.status(404).send('No file open');
+  }
+});
+
+// Uploads route — serves uploaded images from ~/.htmlcanvas/uploads/
+app.use('/uploads', express.static(UPLOADS_DIR));
+
+// ── API: set annotated HTML (DOM model with data-hc-id) ──────────────────────
+app.post('/api/set-annotated', (req, res) => {
+  const { content } = req.body;
+  if (typeof content !== 'string') {
+    return res.status(400).json({ error: 'content must be a string' });
+  }
+  annotatedContent = content;
+  res.json({ ok: true });
+});
+
+// ── Route: render opened file with asset resolution ─────────────────────────
+app.get('/render', (req, res) => {
+  const rawContent = annotatedContent || (currentFile && currentFile.content);
+  if (!rawContent) {
+    return res.status(404).send('No file open');
+  }
+  let html = rawContent;
+
+  if (currentFile.path) {
+    // Inject <base> tag for relative asset resolution via /preview/
+    const baseHref = '/preview/';
+    if (/<head([^>]*)>/i.test(html)) {
+      html = html.replace(/<head([^>]*)>/i, '<head$1><base href="' + baseHref + '">');
+    } else {
+      html = '<base href="' + baseHref + '">' + html;
+    }
+    // Rewrite root-relative src/href to go through /preview
+    html = html.replace(/(src|href)=["']\/(?!\/)/gi, '$1="/preview/');
+    // Rewrite root-relative url() in inline/embedded CSS
+    html = html.replace(/url\(\s*['"]?\/(?!\/)/gi, "url('/preview/");
+  } else {
+    console.log('Rendering drag-dropped file — local assets may not resolve');
+  }
+
+  // Inject editor-only styles: spacing between .page slides for clear separation
+  const editorStyles = `<style data-hc-editor>
+    .page { margin-bottom: 40px !important; box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important; }
+    .page:last-child { margin-bottom: 0 !important; }
+    body { background: transparent !important; }
+  </style>`;
+  if (/<head([^>]*)>/i.test(html)) {
+    html = html.replace(/<\/head>/i, editorStyles + '</head>');
+  } else {
+    html = editorStyles + html;
+  }
+
+  res.set('Content-Type', 'text/html; charset=utf-8');
+  res.send(html);
+});
+
+// ── API: open dialog ─────────────────────────────────────────────────────────
+app.get('/api/open-dialog', async (req, res) => {
+  try {
+    const tmpScript = path.join(os.tmpdir(), 'hc-open.ps1');
+    const ps1 = `
+Add-Type -AssemblyName System.Windows.Forms
+Add-Type @"
+using System;
+using System.Runtime.InteropServices;
+public class Win32 {
+    [DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr hWnd);
+    [DllImport("kernel32.dll")] public static extern IntPtr GetConsoleWindow();
+}
+"@
+
+$dialog = New-Object System.Windows.Forms.OpenFileDialog
+$dialog.Filter = 'HTML Files (*.html)|*.html|All Files (*.*)|*.*'
+$dialog.Title = 'Open HTML File - HTMLCanvas'
+
+# Create a hidden topmost owner window to force dialog to front
+$owner = New-Object System.Windows.Forms.Form
+$owner.TopMost = $true
+$owner.ShowInTaskbar = $false
+$owner.WindowState = 'Minimized'
+$owner.Show()
+$owner.Hide()
+[Win32]::SetForegroundWindow($owner.Handle) | Out-Null
+$result = $dialog.ShowDialog($owner)
+$owner.Dispose()
+
+if ($result -eq 'OK') { Write-Output $dialog.FileName }
+`;
+
+    await fs.writeFile(tmpScript, ps1, 'utf-8');
+    console.log('Opening file dialog...');
+    const { stdout, stderr } = await execAsync(
+      `powershell -NoProfile -ExecutionPolicy Bypass -STA -File "${tmpScript}"`,
+      { windowsHide: false }
+    );
+    if (stderr) console.warn('PowerShell stderr:', stderr);
+
+    const trimmed = stdout.trim();
+    if (!trimmed) return res.json({ cancelled: true });
+
+    const resolved = path.resolve(trimmed);
+    const content = await fs.readFile(resolved, 'utf-8');
+    await addRecent(resolved);
+
+    currentFile = { path: resolved, content, filename: path.basename(resolved) };
+    annotatedContent = null;  // Clear stale annotated content
+    setPreviewDirectory(path.dirname(resolved));
+    watchFile(resolved);
+
+    res.json({ path: resolved, content, filename: path.basename(resolved) });
+  } catch (err) {
+    console.error('Open dialog failed:', err);
+    res.status(500).json({ error: `File dialog failed: ${err.message}` });
+  }
+});
+
+// ── API: get file by path (for recent files) ─────────────────────────────────
+app.get('/api/file', async (req, res) => {
+  const raw = req.query.path;
+  if (!raw) return res.status(400).json({ error: 'path query param required' });
+
+  const resolved = path.resolve(decodeURIComponent(raw));
+  const content = await fs.readFile(resolved, 'utf-8');
+  await addRecent(resolved);
+
+  currentFile = { path: resolved, content, filename: path.basename(resolved) };
+  annotatedContent = null;  // Clear stale annotated content
+  setPreviewDirectory(path.dirname(resolved));
+  watchFile(resolved);
+
+  res.json({ path: resolved, content, filename: path.basename(resolved) });
+});
+
+// ── API: save ────────────────────────────────────────────────────────────────
+app.post('/api/save', async (req, res) => {
+  if (!currentFile || !currentFile.path) {
+    return res.status(400).json({ error: 'No file with known path is open. Use Export instead.' });
+  }
+  const { content } = req.body;
+  if (typeof content !== 'string') {
+    return res.status(400).json({ error: 'content must be a string' });
+  }
+  await fs.writeFile(currentFile.path, content, 'utf-8');
+  currentFile.content = content;
+
+  // CSS variable audit — informational only (Plan 02)
+  const varCount = auditCSSVariables(content);
+  console.log(`Saved ${path.basename(currentFile.path)} — ${varCount} CSS variable reference(s) preserved.`);
+
+  res.json({ ok: true, path: currentFile.path, varReferencesPreserved: varCount });
+});
+
+// ── API: export dialog ───────────────────────────────────────────────────────
+app.get('/api/export-dialog', async (req, res) => {
+  try {
+    const tmpScript = path.join(os.tmpdir(), 'hc-save.ps1');
+    const ps1 = `
+Add-Type -AssemblyName System.Windows.Forms
+Add-Type @"
+using System;
+using System.Runtime.InteropServices;
+public class Win32Export {
+    [DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr hWnd);
+}
+"@
+
+$dialog = New-Object System.Windows.Forms.SaveFileDialog
+$dialog.Filter = 'HTML Files (*.html)|*.html'
+$dialog.Title = 'Export As - HTMLCanvas'
+$dialog.FileName = 'export.html'
+
+$owner = New-Object System.Windows.Forms.Form
+$owner.TopMost = $true
+$owner.ShowInTaskbar = $false
+$owner.WindowState = 'Minimized'
+$owner.Show()
+$owner.Hide()
+[Win32Export]::SetForegroundWindow($owner.Handle) | Out-Null
+$result = $dialog.ShowDialog($owner)
+$owner.Dispose()
+
+if ($result -eq 'OK') { Write-Output $dialog.FileName }
+`;
+
+    await fs.writeFile(tmpScript, ps1, 'utf-8');
+    const { stdout, stderr } = await execAsync(
+      `powershell -NoProfile -ExecutionPolicy Bypass -STA -File "${tmpScript}"`,
+      { windowsHide: false }
+    );
+    if (stderr) console.warn('PowerShell stderr:', stderr);
+
+    const trimmed = stdout.trim();
+    if (!trimmed) return res.json({ cancelled: true });
+
+    const resolved = path.resolve(trimmed);
+    res.json({ exportPath: resolved });
+  } catch (err) {
+    console.error('Export dialog failed:', err);
+    res.status(500).json({ error: `File dialog failed: ${err.message}` });
+  }
+});
+
+// ── API: export ──────────────────────────────────────────────────────────────
+app.post('/api/export', async (req, res) => {
+  const { content, exportPath } = req.body;
+  if (typeof content !== 'string' || !exportPath) {
+    return res.status(400).json({ error: 'content and exportPath required' });
+  }
+  const resolved = path.resolve(exportPath);
+  await fs.writeFile(resolved, content, 'utf-8');
+
+  // CSS variable audit — informational only (Plan 02)
+  const varCount = auditCSSVariables(content);
+  console.log(`Exported ${path.basename(resolved)} — ${varCount} CSS variable reference(s) preserved.`);
+
+  res.json({ ok: true, path: resolved, varReferencesPreserved: varCount });
+});
+
+// ── API: export PDF ──────────────────────────────────────────────────────────
+app.post('/api/export-pdf', async (req, res) => {
+  const { content } = req.body;
+  if (typeof content !== 'string') {
+    return res.status(400).json({ error: 'content must be a string' });
+  }
+
+  // Show save dialog for PDF
+  let pdfPath;
+  try {
+    const tmpScript = path.join(os.tmpdir(), 'hc-pdf.ps1');
+    const defaultName = currentFile?.filename
+      ? currentFile.filename.replace(/\.html?$/i, '.pdf')
+      : 'export.pdf';
+    const ps1 = `
+Add-Type -AssemblyName System.Windows.Forms
+Add-Type @"
+using System;
+using System.Runtime.InteropServices;
+public class Win32Pdf {
+    [DllImport("user32.dll")] public static extern bool SetForegroundWindow(IntPtr hWnd);
+}
+"@
+
+$dialog = New-Object System.Windows.Forms.SaveFileDialog
+$dialog.Filter = 'PDF Files (*.pdf)|*.pdf'
+$dialog.Title = 'Export as PDF - HTMLCanvas'
+$dialog.FileName = '${defaultName}'
+
+$owner = New-Object System.Windows.Forms.Form
+$owner.TopMost = $true
+$owner.ShowInTaskbar = $false
+$owner.WindowState = 'Minimized'
+$owner.Show()
+$owner.Hide()
+[Win32Pdf]::SetForegroundWindow($owner.Handle) | Out-Null
+$result = $dialog.ShowDialog($owner)
+$owner.Dispose()
+
+if ($result -eq 'OK') { Write-Output $dialog.FileName }
+`;
+    await fs.writeFile(tmpScript, ps1, 'utf-8');
+    const { stdout } = await execAsync(
+      `powershell -NoProfile -ExecutionPolicy Bypass -STA -File "${tmpScript}"`,
+      { windowsHide: false }
+    );
+    const trimmed = stdout.trim();
+    if (!trimmed) return res.json({ cancelled: true });
+    pdfPath = path.resolve(trimmed);
+  } catch (err) {
+    console.error('PDF save dialog failed:', err);
+    return res.status(500).json({ error: `File dialog failed: ${err.message}` });
+  }
+
+  // Write HTML to a temp file so Playwright can load it with assets
+  let tempHtmlPath = null;
+  let browser = null;
+  try {
+    // If we have a current file, write the HTML next to it so relative assets resolve.
+    // Otherwise use a temp directory.
+    const baseDir = currentFile?.path ? path.dirname(currentFile.path) : os.tmpdir();
+    tempHtmlPath = path.join(baseDir, `_hc_pdf_export_${Date.now()}.html`);
+    await fs.writeFile(tempHtmlPath, content, 'utf-8');
+
+    console.log('Launching Playwright for PDF export...');
+    browser = await chromium.launch({ headless: true });
+    const page = await browser.newPage();
+
+    // Load the HTML file with proper base URL for asset resolution
+    await page.goto(`file:///${tempHtmlPath.replace(/\\/g, '/')}`, {
+      waitUntil: 'networkidle',
+      timeout: 30000,
+    });
+
+    // Detect if this is a slide deck (.page elements)
+    const pageCount = await page.evaluate(() => document.querySelectorAll('.page').length);
+
+    let pdfOptions;
+    if (pageCount > 0) {
+      // Slide deck: get the .page dimensions and use them as the PDF page size
+      const pageDims = await page.evaluate(() => {
+        const firstPage = document.querySelector('.page');
+        if (!firstPage) return null;
+        const style = getComputedStyle(firstPage);
+        return {
+          width: parseFloat(style.width),
+          height: parseFloat(style.height),
+        };
+      });
+
+      const pdfW = pageDims ? pageDims.width : 794;
+      const pdfH = pageDims ? pageDims.height : 1123;
+
+      pdfOptions = {
+        path: pdfPath,
+        width: `${pdfW}px`,
+        height: `${pdfH}px`,
+        printBackground: true,
+        margin: { top: 0, right: 0, bottom: 0, left: 0 },
+      };
+    } else {
+      // Regular HTML: use A4
+      pdfOptions = {
+        path: pdfPath,
+        format: 'A4',
+        printBackground: true,
+        margin: { top: '20px', right: '20px', bottom: '20px', left: '20px' },
+      };
+    }
+
+    await page.pdf(pdfOptions);
+    console.log(`PDF exported: ${path.basename(pdfPath)} (${pageCount} pages detected)`);
+
+    res.json({ ok: true, path: pdfPath, pages: pageCount });
+  } catch (err) {
+    console.error('PDF export failed:', err);
+    res.status(500).json({ error: `PDF export failed: ${err.message}` });
+  } finally {
+    if (browser) await browser.close().catch(() => {});
+    // Clean up temp HTML file
+    if (tempHtmlPath) {
+      await fs.unlink(tempHtmlPath).catch(() => {});
+    }
+  }
+});
+
+// ── API: register drag-and-drop ──────────────────────────────────────────────
+app.post('/api/register-drag', (req, res) => {
+  const { content, filename } = req.body;
+  if (typeof content !== 'string' || !filename) {
+    return res.status(400).json({ error: 'content and filename required' });
+  }
+  currentFile = { path: null, content, filename };
+  res.json({ ok: true, pathKnown: false });
+});
+
+// ── API: recents ─────────────────────────────────────────────────────────────
+app.get('/api/recents', async (req, res) => {
+  const recents = await getRecents();
+  res.json({ recents });
+});
+
+// ── API: assets (list sibling asset folder) ──────────────────────────────────
+app.get('/api/assets', async (req, res) => {
+  if (!currentFile?.path) return res.json({ assets: [] });
+  const fileDir = path.dirname(currentFile.path);
+  const candidates = ['assets', 'images', 'img', 'media', 'Photos Assets'];
+  let assetDir = null;
+  for (const name of candidates) {
+    const candidate = path.join(fileDir, name);
+    try { await fs.access(candidate); assetDir = candidate; break; } catch {}
+  }
+  if (!assetDir) return res.json({ assets: [], dir: null });
+  const files = await fs.readdir(assetDir);
+  const assets = files
+    .filter(f => /\.(png|jpg|jpeg|gif|svg|webp|avif)$/i.test(f))
+    .map(f => ({
+      name: f,
+      url: `/preview/${path.basename(assetDir)}/${f}`,
+      type: f.toLowerCase().endsWith('.svg') ? 'svg' : 'image'
+    }));
+  res.json({ assets, dir: path.basename(assetDir) });
+});
+
+// ── API: components (GET — list saved components) ─────────────────────────────
+app.get('/api/components', async (req, res) => {
+  await fs.mkdir(COMPONENTS_DIR, { recursive: true });
+  const files = await fs.readdir(COMPONENTS_DIR);
+  const components = await Promise.all(
+    files.filter(f => f.endsWith('.html')).map(async f => ({
+      name: f.replace('.html', ''),
+      html: await fs.readFile(path.join(COMPONENTS_DIR, f), 'utf-8'),
+    }))
+  );
+  res.json({ components });
+});
+
+// ── API: components (POST — save component) ───────────────────────────────────
+app.post('/api/components', async (req, res) => {
+  const { name, html } = req.body;
+  if (!name || !html) return res.status(400).json({ error: 'name and html required' });
+  await fs.mkdir(COMPONENTS_DIR, { recursive: true });
+  const safeName = name.replace(/[^a-z0-9-_]/gi, '-');
+  await fs.writeFile(path.join(COMPONENTS_DIR, `${safeName}.html`), html, 'utf-8');
+  res.json({ ok: true, name: safeName });
+});
+
+// ── API: upload (POST — image upload via multer) ──────────────────────────────
+app.post('/api/upload', (req, res) => {
+  upload.single('file')(req, res, (err) => {
+    if (err) {
+      console.error('Upload error:', err);
+      return res.status(500).json({ error: `Upload failed: ${err.message}` });
+    }
+    if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+    const servePath = `/uploads/${req.file.filename}`;
+    res.json({ url: servePath, originalName: req.file.originalname });
+  });
+});
+
+// ── Global error handler ─────────────────────────────────────────────────────
+app.use((err, req, res, _next) => {
+  console.error(err);
+  res.status(500).json({ error: err.message });
+});
+
+// ── Startup ──────────────────────────────────────────────────────────────────
+await fs.mkdir(UPLOADS_DIR, { recursive: true });
+const port = await findAvailablePort();
+const httpServer = createServer(app);
+
+// WebSocket server
+const wss = new WebSocketServer({ server: httpServer });
+wss.on('connection', (ws) => {
+  wsClients.add(ws);
+  ws.on('close', () => wsClients.delete(ws));
+});
+
+httpServer.listen(port, () => {
+  console.log(`HTMLCanvas running at http://localhost:${port}`);
+  try {
+    exec(`start http://localhost:${port}`);
+  } catch (e) {
+    console.warn('Could not auto-open browser:', e.message);
+  }
+});