;
export type MobileBottomNavItem = "home" | "search" | "templates" | "settings";
export type MemoContextMenuState = { memo: MemoSummary; x: number; y: number };
-export type MemoDocumentAction = "share" | "export-markdown" | "export-pdf" | "save-as-template";
+export type MemoDocumentAction = "share" | "export-markdown" | "export-html" | "export-pdf" | "save-as-template";
export type MemoDocumentActionRequest = {
id: number;
memoId: string;
diff --git a/apps/web/src/lib/note-html-export-assets.ts b/apps/web/src/lib/note-html-export-assets.ts
new file mode 100644
index 00000000..c868344a
--- /dev/null
+++ b/apps/web/src/lib/note-html-export-assets.ts
@@ -0,0 +1,5 @@
+import katexStyles from "katex/dist/katex.min.css?inline";
+import exportStyles from "@/styles/note-html-export.css?inline";
+
+/** Full stylesheet bundle for offline standalone HTML notes (browser/Vite only). */
+export const NOTE_HTML_FULL_STYLES = `${katexStyles}\n${exportStyles}`;
diff --git a/apps/web/src/lib/note-html-export.ts b/apps/web/src/lib/note-html-export.ts
new file mode 100644
index 00000000..b8128cbd
--- /dev/null
+++ b/apps/web/src/lib/note-html-export.ts
@@ -0,0 +1,275 @@
+import hljs from "highlight.js/lib/common";
+import { renderMermaidSVG, THEMES } from "beautiful-mermaid";
+
+const WINDOWS_RESERVED_NAME = /^(con|prn|aux|nul|com[1-9]|lpt[1-9])(?:\.|$)/i;
+const EXPORT_FONT_FAMILY =
+ 'system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif';
+
+export type NoteHtmlExportMeta = {
+ title: string;
+ notebook?: string;
+ tags?: string[];
+ updatedAt?: string;
+ language?: string;
+};
+
+export type BuildStandaloneHtmlDocumentOptions = NoteHtmlExportMeta & {
+ bodyHtml: string;
+ styles?: string;
+};
+
+export type DownloadNoteHtmlOptions = NoteHtmlExportMeta & {
+ bodyHtml: string;
+ fallbackTitle: string;
+ styles?: string;
+};
+
+export type HtmlImageEmbedResult = {
+ /** Images with a non-empty src attribute. */
+ total: number;
+ /** Already data: URLs plus successfully fetched/inlined images. */
+ embedded: number;
+ /** Images that could not be inlined and may break offline. */
+ failed: number;
+};
+
+export type PreparedNoteHtmlExport = {
+ bodyHtml: string;
+ images: HtmlImageEmbedResult;
+};
+
+export type DownloadNoteHtmlResult = {
+ filename: string;
+ images: HtmlImageEmbedResult;
+};
+
+export const createEmptyHtmlImageEmbedResult = (): HtmlImageEmbedResult => ({
+ total: 0,
+ embedded: 0,
+ failed: 0,
+});
+
+/** Decide whether the UI should warn about image embedding after a successful download. */
+export const getHtmlImageEmbedNoticeKind = (
+ images: HtmlImageEmbedResult,
+): "none" | "partial" | "failed-all" => {
+ if (images.total === 0 || images.failed === 0) {
+ return "none";
+ }
+ if (images.embedded === 0) {
+ return "failed-all";
+ }
+ return "partial";
+};
+
+export const buildHtmlFilename = (title: string, fallback: string) => {
+ const sanitized = title
+ .replace(/[\u0000-\u001f<>:"/\\|?*]/g, "-")
+ .replace(/\s+/g, " ")
+ .replace(/[. ]+$/g, "")
+ .trim()
+ .slice(0, 100);
+ const basename = sanitized || fallback;
+ const safeBasename = WINDOWS_RESERVED_NAME.test(basename) ? `_${basename}` : basename;
+ return /\.html?$/i.test(safeBasename) ? safeBasename.replace(/\.htm$/i, ".html") : `${safeBasename}.html`;
+};
+
+export const escapeHtml = (value: string) =>
+ value
+ .replace(/&/g, "&")
+ .replace(//g, ">")
+ .replace(/"/g, """)
+ .replace(/'/g, "'");
+
+export const buildStandaloneHtmlDocument = ({
+ title,
+ notebook = "",
+ tags = [],
+ updatedAt = "",
+ language = "en",
+ bodyHtml,
+ styles = "",
+}: BuildStandaloneHtmlDocumentOptions) => {
+ const metadataParts = [notebook, updatedAt, ...tags.map((tag) => `#${tag}`)].filter(Boolean);
+ const metaHtml = metadataParts.length > 0
+ ? `${escapeHtml(metadataParts.join(" · "))}
`
+ : "";
+
+ return `
+
+
+
+
+
+${escapeHtml(title)}
+
+
+
+
+
+${escapeHtml(title)}
+${metaHtml}
+
+${bodyHtml}
+
+
+
当前未保存内容
",
+ "项目 / 计划",
+ "Untitled note",
+ );
+
+ expect(file.filename).toBe("项目 - 计划.html");
+ expect(file.blob.type).toBe("text/html;charset=utf-8");
+ expect(await file.blob.text()).toContain("当前未保存内容");
+ });
+
+ test("sanitizes unsafe and reserved filenames", () => {
+ expect(buildHtmlFilename("CON", "Untitled note")).toBe("_CON.html");
+ expect(buildHtmlFilename('<>:"/\\|?*', "Untitled note")).toBe("---------.html");
+ expect(buildHtmlFilename("...", "Untitled note")).toBe("Untitled note.html");
+ expect(buildHtmlFilename("README.html", "Untitled note")).toBe("README.html");
+ expect(buildHtmlFilename("notes.htm", "Untitled note")).toBe("notes.html");
+ });
+
+ test("escapes HTML special characters", () => {
+ expect(escapeHtml(`&'`)).toBe(
+ "<script>alert("x")</script>&'",
+ );
+ });
+
+ test("builds a standalone HTML document with metadata and styles", () => {
+ const html = buildStandaloneHtmlDocument({
+ title: 'Release & "docs"',
+ notebook: "Product",
+ tags: ["ship", "html"],
+ updatedAt: "2026-08-11 12:00",
+ language: "zh-CN",
+ bodyHtml: "Hello world
",
+ styles: "body { color: #111; }",
+ });
+
+ expect(html).toContain("");
+ expect(html).toContain('lang="zh-CN"');
+ expect(html).toContain("Release <notes> & "docs"");
+ expect(html).toContain('Release <notes> & "docs"
');
+ expect(html).toContain("Product · 2026-08-11 12:00 · #ship · #html");
+ expect(html).toContain("Hello world
");
+ expect(html).toContain("body { color: #111; }");
+ expect(html).toContain('meta name="generator" content="EdgeEver"');
+ });
+
+ test("omits empty metadata row", () => {
+ const html = buildStandaloneHtmlDocument({
+ title: "Untitled",
+ bodyHtml: "body
",
+ });
+
+ expect(html).not.toContain("edgeever-html-meta");
+ expect(html).toContain("body
");
+ });
+
+ test("only warns about image embedding when some or all images fail", () => {
+ expect(getHtmlImageEmbedNoticeKind(createEmptyHtmlImageEmbedResult())).toBe("none");
+ expect(getHtmlImageEmbedNoticeKind({ total: 3, embedded: 3, failed: 0 })).toBe("none");
+ expect(getHtmlImageEmbedNoticeKind({ total: 3, embedded: 2, failed: 1 })).toBe("partial");
+ expect(getHtmlImageEmbedNoticeKind({ total: 2, embedded: 0, failed: 2 })).toBe("failed-all");
+ });
+});