export to html

daveberrys · daveberrys · commit 9509df03b1a3 · 2026-02-25T19:21:17.000+08:00
diff --git a/neutralino.config.json b/neutralino.config.json
@@ -16,6 +16,7 @@
   "nativeAllowList": [
     "app.*",
     "os.*",
+    "filesystem.*",
     "debug.log"
   ],
   "globalVariables": {
@@ -80,4 +81,4 @@
     "binaryVersion": "6.5.0",
     "clientVersion": "6.5.0"
   }
-}
+}
diff --git a/resources/index.html b/resources/index.html
@@ -12,7 +12,10 @@
   <div class="app" id="appRoot">
     <header class="topbar">
       <h1>LiteMark</h1>
-      <p id="fileLabel">No file loaded</p>
+      <div class="topbarActions">
+        <p id="fileLabel">No file loaded</p>
+        <button id="exportHtmlButton" type="button">Export HTML</button>
+      </div>
     </header>
 
     <div class="workspace">
@@ -33,10 +36,12 @@ <h2 class="panelTitle">Preview</h2>
   </div>
 
   <!-- scripts -->
+  <script src="/neutralino.js"></script>
   <script src="/js/core/appContext.js"></script>
   <script src="/js/core/markdownParser.js"></script>
   <script src="/js/features/syncScroll.js"></script>
   <script src="/js/features/editorPreview.js"></script>
+  <script src="/js/features/exportHtml.js"></script>
   <script src="/js/features/dragDrop.js"></script>
 </body>
 
diff --git a/resources/js/core/appContext.js b/resources/js/core/appContext.js
@@ -1,11 +1,21 @@
 (function () {
+    if (
+        window.Neutralino &&
+        typeof window.Neutralino.init === "function" &&
+        typeof window.NL_PORT === "number" &&
+        typeof window.NL_TOKEN === "string"
+    ) {
+        window.Neutralino.init();
+    }
+
     const app = window.LiteMark || (window.LiteMark = {});
 
     app.dom = {
         editor: document.getElementById("editor"),
         preview: document.getElementById("markdownPreview"),
         dropZone: document.getElementById("dropZone"),
-        fileLabel: document.getElementById("fileLabel")
+        fileLabel: document.getElementById("fileLabel"),
+        exportHtmlButton: document.getElementById("exportHtmlButton")
     };
 
     app.state = app.state || {
diff --git a/resources/js/features/exportHtml.js b/resources/js/features/exportHtml.js
@@ -0,0 +1,96 @@
+(function () {
+    const app = window.LiteMark || (window.LiteMark = {});
+    const dom = app.dom || {};
+    const preview = dom.preview;
+    const fileLabel = dom.fileLabel;
+    const exportButton = dom.exportHtmlButton;
+
+    if (!preview || !exportButton) {
+        return;
+    }
+
+    function stripExtension(fileName) {
+        if (typeof fileName !== "string" || fileName.trim().length === 0) {
+            return "litemark-export";
+        }
+
+        const lastDotIndex = fileName.lastIndexOf(".");
+        if (lastDotIndex <= 0) {
+            return fileName;
+        }
+
+        return fileName.slice(0, lastDotIndex);
+    }
+
+    function sanitizeFileName(fileName) {
+        return fileName
+            .trim()
+            .replace(/[<>:"/\\|?*\u0000-\u001F]/g, "-")
+            .replace(/\s+/g, "-")
+            .replace(/-+/g, "-")
+            .replace(/^-|-$/g, "")
+            .toLowerCase() || "litemark-export";
+    }
+
+    function escapeHtml(value) {
+        return value
+            .replace(/&/g, "&amp;")
+            .replace(/</g, "&lt;")
+            .replace(/>/g, "&gt;")
+            .replace(/\"/g, "&quot;")
+            .replace(/'/g, "&#039;");
+    }
+
+    function buildDocument(title, contentHtml) {
+        return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${escapeHtml(title)}</title>
+</head>
+<body>
+${contentHtml}
+</body>
+</html>
+`;
+    }
+
+    async function exportPreviewHtml() {
+        const api = window.Neutralino;
+        if (!api || !api.os || !api.filesystem) {
+            if (fileLabel) {
+                fileLabel.textContent = "Export unavailable outside Neutralino";
+            }
+            return;
+        }
+
+        exportButton.disabled = true;
+
+        try {
+            const baseName = sanitizeFileName(stripExtension(app.state && app.state.fileName ? app.state.fileName : ""));
+            const outputName = `${baseName}.html`;
+            const downloadsPath = await api.os.getPath("downloads");
+            const outputPath = await api.filesystem.getJoinedPath(downloadsPath, outputName);
+            const documentHtml = buildDocument(baseName, preview.innerHTML);
+
+            await api.filesystem.writeFile(outputPath, documentHtml);
+
+            if (fileLabel) {
+                fileLabel.textContent = `Saved to Downloads: ${outputName}`;
+            }
+        }
+        catch (error) {
+            if (fileLabel) {
+                fileLabel.textContent = "Failed to export HTML";
+            }
+            console.error("Failed to export HTML", error);
+        }
+        finally {
+            exportButton.disabled = false;
+        }
+    }
+
+    exportButton.addEventListener("click", exportPreviewHtml);
+    app.actions.exportPreviewHtml = exportPreviewHtml;
+})();
diff --git a/resources/styles.css b/resources/styles.css
@@ -21,6 +21,7 @@
 *::before,
 *::after {
     box-sizing: border-box;
+    scrollbar-width: none;
 }
 
 html,
@@ -64,6 +65,31 @@ body {
     color: var(--mutedTextColor);
 }
 
+.topbarActions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+}
+
+#exportHtmlButton {
+    border: 1px solid var(--outlineColor);
+    background: #151a1f;
+    color: var(--textColor);
+    border-radius: 6px;
+    padding: 0.4rem 0.7rem;
+    font-size: 0.8rem;
+    cursor: pointer;
+}
+
+#exportHtmlButton:hover:enabled {
+    border-color: var(--accentColor);
+}
+
+#exportHtmlButton:disabled {
+    opacity: 0.65;
+    cursor: wait;
+}
+
 .workspace {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -198,6 +224,15 @@ body {
 }
 
 @media (max-width: 900px) {
+    .topbar {
+        flex-wrap: wrap;
+    }
+
+    .topbarActions {
+        width: 100%;
+        justify-content: space-between;
+    }
+
     .workspace {
         grid-template-columns: 1fr;
         grid-template-rows: 1fr 1fr;
