@zzclub/pipeline 0.10.0 → 0.10.2

package/src/wechat-preview/browser/assets.d.ts

@@ -0,0 +1,9 @@
+declare module "*.css?raw" {
+  const css: string;
+  export default css;
+}
+
+declare module "juice/client" {
+  import juice from "juice";
+  export default juice;
+}

package/src/wechat-preview/browser/editor-export.css

@@ -1,330 +1,9 @@
 /*
- * WeChat Article Typography — 温暖人文
- * Brand: #ca6093 (玫瑰暖调)
+ * Thin re-export for tooling that still points at browser/editor-export.css.
+ * Canonical source: package @zzclub/milkdown-article-style (article.css).
  *
- * Design tokens (:root custom properties) anchor the numeric scale.
- * All values derive from:
- *   --font-base  = 16px   (body)
- *   --leading    = 2.0    (body line-height ratio)
- *   --brand      = #ca6093
- *   --text       = #2c2c2c (warm black)
- *
- * When converting to WeChat inline styles, resolve each var() to its
- * computed value. The token layer makes future rebranding a one-line edit.
+ * The Vite export entry imports the package directly (?raw does not resolve
+ * @import). Do not add rules here.
  */
 
-:root {
-  /* ── Core tokens ── */
-  --font-base:    16px;
-  --font-sans:    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
-                  -apple-system, "SF Pro Text", "Noto Sans SC", sans-serif;
-  --font-mono:    "JetBrains Mono", "Fira Code", "SF Mono", "Consolas",
-                  "Monaco", "Courier New", monospace;
-  --font-serif:   "Noto Serif SC", "Source Han Serif SC", "Songti SC",
-                  "STSong", "Georgia", serif;
-
-  --leading:      2.0;
-
-  --brand:        #ca6093;
-  --brand-soft:   #d4789e;          /* hover / secondary accent */
-  --brand-bg:     rgba(202, 96, 147, 0.08);
-  --brand-bg-deep: rgba(202, 96, 147, 0.14);
-
-  --text:         #2c2c2c;          /* warm black, never pure #000 */
-  --text-soft:    #8c8c8c;          /* captions, meta */
-  --text-mid:     #5c5c5c;          /* blockquote, secondary text */
-
-  --border:       #e8e4e5;          /* warm gray */
-  --divider:      #d8d0d3;          /* slightly warmer than border */
-  --bg-page:      #fefefe;
-  --bg-warm:      #faf8f9;          /* subtle warm tint for blockquote */
-
-  --radius-sm:    3px;
-  --radius-md:    6px;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Container
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor {
-  max-width: 680px;
-  margin: 0 auto;
-  padding: 48px 24px 80px;
-  font-family: var(--font-sans);
-  font-size: var(--font-base);
-  line-height: var(--leading);
-  color: var(--text);
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Paragraph
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor p {
-  margin: 0 0 1.4em 0;
-  line-height: var(--leading);
-  text-align: justify;
-  hyphens: auto;
-  word-break: break-all;
-  overflow-wrap: break-word;
-}
-
-.milkdown .editor p:first-child {
-  margin-top: 0;
-}
-
-.milkdown .editor p:last-child {
-  margin-bottom: 0;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Headings
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor h1 {
-  font-size: 1.625rem;          /* 26px */
-  font-weight: 700;
-  line-height: 1.3;
-  margin: 3em 0 1em 0;
-  color: var(--text);
-  letter-spacing: -0.01em;
-}
-
-/* ── h2: brand color, clean style ── */
-
-.milkdown .editor h2 {
-  font-size: 1.25rem;           /* 20px */
-  font-weight: 700;
-  line-height: 1.35;
-  margin: 2.4em 0 0.9em 0;
-  color: var(--brand);
-  letter-spacing: 0.02em;
-}
-
-/* ── h3: warm black, semi-bold, underlined by a thin rule ── */
-
-.milkdown .editor h3 {
-  font-size: 1.125rem;          /* 18px */
-  font-weight: 600;
-  line-height: 1.45;
-  margin: 2em 0 0.65em 0;
-  padding-bottom: 0.5em;
-  color: var(--text);
-  letter-spacing: 0.015em;
-  border-bottom: 1px solid var(--border);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Bold — brand-colored emphasis
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor strong,
-.milkdown .editor b {
-  font-weight: 700;
-  color: var(--text);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Links
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor a {
-  color: var(--brand);
-  text-decoration: none;
-  border-bottom: 1px solid var(--brand-soft);
-  transition: border-color 0.15s;
-}
-
-.milkdown .editor a:hover {
-  border-bottom-color: var(--brand);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Inline code
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor code {
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  color: var(--brand);
-  background: var(--brand-bg);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  word-break: break-all;
-}
-
-.milkdown .editor pre {
-  background: #f5f2f3;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-md);
-  padding: 1.2em 1.3em;
-  margin: 1.5em 0;
-  overflow-x: auto;
-  line-height: 1.65;
-}
-
-.milkdown .editor pre code {
-  background: none;
-  padding: 0;
-  font-size: 0.875em;
-  color: var(--text);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Image caption
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor figure {
-  margin: 1.6em auto;
-  text-align: center;
-}
-
-.milkdown .editor figure img {
-  display: block;
-  max-width: 100%;
-  margin: 0 auto;
-  border-radius: var(--radius-sm);
-}
-
-.milkdown .editor figure figcaption,
-.milkdown .editor .img-caption {
-  display: block;
-  margin-top: 10px;
-  font-size: 0.875rem;          /* 14px */
-  line-height: 1.6;
-  color: var(--text-soft);
-  text-align: center;
-}
-
-/* For standalone images (not wrapped in figure) */
-.milkdown .editor p:has(img) + p.img-caption,
-.milkdown .editor img + .img-caption {
-  display: block;
-  margin-top: 8px;
-  font-size: 0.875rem;
-  color: var(--text-soft);
-  text-align: center;
-}
-
-/* Standalone image between paragraphs */
-.milkdown .editor p img {
-  display: block;
-  max-width: 100%;
-  margin: 0 auto;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Divider
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor hr {
-  display: block;
-  height: 0;
-  border: none;
-  margin: 2.2em 0;
-  text-align: center;
-  /* thin warm line */
-  border-top: 1px solid var(--divider);
-  padding: 0;
-  background: transparent;
-}
-
-/*
- * Decorative centered-dot divider variant.
- * Override by adding class="hr-dots" on the <hr>.
- */
-.milkdown .editor hr.hr-dots {
-  border-top: none;
-  line-height: 1;
-  letter-spacing: 0.6em;
-  color: var(--text-soft);
-  font-size: 0.75rem;
-}
-
-.milkdown .editor hr.hr-dots::after {
-  content: "·  ·  ·";
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Blockquote
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor blockquote {
-  margin: 1.5em 0;
-  padding: 0.8em 1em 0.8em 1.15em;
-  border-left: 3px solid var(--brand-soft);
-  background: var(--bg-warm);
-  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
-}
-
-.milkdown .editor blockquote p {
-  font-size: 0.9375rem;         /* 15px */
-  line-height: 1.85;
-  color: var(--text-mid);
-  margin: 0.45em 0;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Lists
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor ul,
-.milkdown .editor ol {
-  margin: 1.1em 0;
-  padding-left: 1.5em;
-}
-
-.milkdown .editor li {
-  margin: 0.5em 0;
-  line-height: 1.85;
-}
-
-.milkdown .editor li > p {
-  margin: 0.2em 0;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Tables
-   ══════════════════════════════════════════════════════════════════════ */
-
-.milkdown .editor table {
-  width: 100%;
-  margin: 1.4em 0;
-  border-collapse: collapse;
-  font-size: 0.9375rem;
-  line-height: 1.75;
-}
-
-.milkdown .editor th,
-.milkdown .editor td {
-  padding: 10px 14px;
-  border: 1px solid var(--border);
-  text-align: left;
-  vertical-align: top;
-}
-
-.milkdown .editor th {
-  color: var(--text);
-  background: var(--brand-bg);
-  font-weight: 700;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Responsive
-   ══════════════════════════════════════════════════════════════════════ */
-
-@media (max-width: 768px) {
-  .milkdown .editor {
-    max-width: 100%;
-    padding: 28px 20px 64px;
-    font-size: 15px;
-  }
-
-  .milkdown .editor h1 { font-size: 1.4rem; }
-  .milkdown .editor h2 { font-size: 1.15rem; }
-  .milkdown .editor h3 { font-size: 1.05rem; }
-}
+@import "@zzclub/milkdown-article-style/article.css";

package/src/wechat-preview/browser/editor-export.ts

@@ -1,14 +1,16 @@
-import { Crepe } from "@milkdown/crepe";
-import { listener } from "@milkdown/plugin-listener";
-import "@milkdown/crepe/theme/common/style.css";
-import "@milkdown/crepe/theme/frame.css";
-import "../browser/editor-export.css";
-import { getWeChatMinimalHTML, type WechatExportTheme } from "../wechat-formatter";
+import { defaultValueCtx, Editor, rootCtx } from "@milkdown/kit/core";
+import { commonmark } from "@milkdown/kit/preset/commonmark";
+import { gfm } from "@milkdown/kit/preset/gfm";
+import { getHTML } from "@milkdown/kit/utils";
+import articleCss from "@zzclub/milkdown-article-style/article.css?raw";
+import { renderWechatHtml } from "../wechat-renderer";
+import type { WechatExportTheme } from "../themes";
 
 interface BrowserPayload {
   markdown: string;
   editorVars: Record<string, string>;
   exportTheme: WechatExportTheme;
+  customCss?: string;
 }
 
 declare global {
@@ -17,11 +19,11 @@ declare global {
   }
 }
 
-function sleep(ms: number): Promise<void> {
-  return new Promise((resolve) => setTimeout(resolve, ms));
-}
-
-function setResult(result: { status: "success"; html: string } | { status: "error"; error: string }): void {
+function setResult(
+  result:
+    | { status: "success"; html: string; semanticHtml?: string }
+    | { status: "error"; error: string },
+): void {
   const el = document.getElementById("zzhub-wechat-export-result");
   if (!el) {
     return;
@@ -29,72 +31,35 @@ function setResult(result: { status: "success"; html: string } | { status: "erro
   el.textContent = JSON.stringify(result);
 }
 
-function doubleRaf(timeoutMs = 1500): Promise<void> {
-  return new Promise((resolve) => {
-    let done = false;
-    const timer = setTimeout(() => {
-      if (done) {
-        return;
-      }
-      done = true;
-      resolve();
-    }, timeoutMs);
-
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        if (done) {
-          return;
-        }
-        done = true;
-        clearTimeout(timer);
-        resolve();
-      });
-    });
-  });
-}
-
-function applyEditorVars(vars: Record<string, string>): void {
-  const root = document.documentElement;
-  for (const [key, value] of Object.entries(vars)) {
-    root.style.setProperty(key, value);
-  }
-}
-
 async function main(): Promise<void> {
   const payload = window.__ZZHUB_WECHAT_PAYLOAD__;
   if (!payload) {
     throw new Error("Missing __ZZHUB_WECHAT_PAYLOAD__");
   }
 
-  applyEditorVars(payload.editorVars);
-
   const host = document.getElementById("editor-host");
   if (!host) {
     throw new Error("Missing editor host");
   }
 
-  const crepe = new Crepe({
-    root: host,
-    defaultValue: payload.markdown,
-    features: {},
+  const editor = Editor.make()
+    .config((ctx) => {
+      ctx.set(rootCtx, host);
+      ctx.set(defaultValueCtx, payload.markdown);
+    })
+    .use(commonmark)
+    .use(gfm);
+  await editor.create();
+  const semanticHtml = editor.action(getHTML());
+  const html = renderWechatHtml({
+    semanticHtml,
+    baseCss: articleCss,
+    customCss: payload.customCss,
+    editorVars: payload.editorVars,
+    theme: payload.exportTheme,
   });
-
-  crepe.setReadonly(true);
-  await crepe.editor.use(listener).create();
-  crepe.setReadonly(true);
-
-  await sleep(80);
-  await doubleRaf();
-  await sleep(160);
-  await doubleRaf();
-
-  const editorDom = host.querySelector(".milkdown .editor") as HTMLElement | null;
-  if (!editorDom) {
-    throw new Error("Milkdown editor DOM not found");
-  }
-
-  const html = getWeChatMinimalHTML(editorDom, payload.exportTheme);
-  setResult({ status: "success", html });
+  await editor.destroy();
+  setResult({ status: "success", html, semanticHtml });
 }
 
 void main().catch((error: unknown) => {

package/src/wechat-preview/bundle-stale.test.ts

@@ -0,0 +1,52 @@
+import { describe, expect, test } from "bun:test";
+import { mkdirSync, mkdtempSync, rmSync, writeFileSync } from "fs";
+import { tmpdir } from "os";
+import { join } from "path";
+import { isWechatPreviewBundleStale } from "./index";
+
+describe("isWechatPreviewBundleStale", () => {
+  test("returns true when manifest is missing", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zzhub-bundle-stale-"));
+    try {
+      expect(isWechatPreviewBundleStale([], join(dir, "missing.json"))).toBe(true);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("returns true when a source is newer than manifest", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zzhub-bundle-stale-"));
+    try {
+      const src = join(dir, "src.css");
+      const manifest = join(dir, "manifest.json");
+      writeFileSync(manifest, "{}");
+      // ensure source is newer
+      const now = Date.now();
+      writeFileSync(src, "body{}");
+      // touch source mtime into the future relative to manifest by rewriting after delay is flaky;
+      // instead set source after manifest with a small sleep via Bun
+      Bun.sleepSync(20);
+      writeFileSync(src, "body{color:red}");
+      void now;
+      expect(isWechatPreviewBundleStale([src], manifest)).toBe(true);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+
+  test("returns false when sources are older than manifest", () => {
+    const dir = mkdtempSync(join(tmpdir(), "zzhub-bundle-stale-"));
+    try {
+      const srcDir = join(dir, "src");
+      mkdirSync(srcDir);
+      const src = join(srcDir, "src.css");
+      writeFileSync(src, "body{}");
+      Bun.sleepSync(20);
+      const manifest = join(dir, "manifest.json");
+      writeFileSync(manifest, "{}");
+      expect(isWechatPreviewBundleStale([src], manifest)).toBe(false);
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  });
+});

package/src/wechat-preview/fixtures/all-nodes.md

@@ -0,0 +1,68 @@
+---
+title: 微信排版语义节点验收
+slug: wechat-renderer-all-nodes
+---
+
+# 微信排版语义节点验收
+
+# 一级标题：克制的中文编辑部
+
+这是一段用于检查正文密度的中文。它包含 **加粗文字**、*强调文字*、~~删除文字~~、`inlineCode()`，以及一个[外部链接](https://example.com/reading-guide?from=wechat)。
+
+这一行之后保留硬换行。\
+下一行仍属于同一段，并包含[文内链接](#section-two)。
+
+## 二级标题：清晰但不过度装饰
+
+### 三级标题：细分信息层级
+
+#### 四级标题：低频但仍然可辨
+
+> 好的排版不是抢夺注意力，而是让内容更轻松地被读完。
+>
+> 引用可以有第二段，并保留 **重点信息**。
+
+![排版示例图](../../imgx/assets/icons/logo.png "图片说明：克制、清晰、适合移动端阅读")
+
+- 无序列表第一项
+  - 嵌套列表包含 `nested-code`
+  - 嵌套列表第二项
+- 无序列表第二项
+
+1. 有序列表第一步
+2. 有序列表第二步
+   1. 嵌套步骤
+   2. 另一个嵌套步骤
+
+- [x] 已完成的任务
+- [ ] 尚未完成的任务
+
+```typescript
+type Article = {
+  title: string;
+  published: boolean;
+};
+
+const article: Article = {
+  title: "保留代码缩进",
+  published: false,
+};
+```
+
+| 节点 | 微信标签 | 设计原则 |
+| --- | --- | --- |
+| 正文 | `p` | 16px 与舒展行高 |
+| 代码 | `pre/code` | 单色、保留空白 |
+| 图片 | `img` | 宽度不溢出 |
+
+---
+
+## 危险 HTML 清理
+
+<div onclick="alert('x')" style="display: grid; position: fixed">
+  <script>alert('never')</script>
+  <p onmouseover="alert('x')" style="color: var(--missing-color)">危险容器里的安全文本</p>
+  <img src="javascript:alert('x')" onerror="alert('x')" alt="危险图片">
+</div>
+
+文末再放一个[资料链接](https://example.org/reference)，用于检查编号脚注与“相关链接”。

package/src/wechat-preview/index.test.ts

@@ -6,6 +6,7 @@ import {
   resolveMarkdownAsset,
   rewriteRelativeImagePaths,
   extractRenderResult,
+  buildWechatPreviewShell,
 } from "./index";
 
 describe("escapeInlineJson", () => {
@@ -51,6 +52,10 @@ describe("isExternalUrl", () => {
     expect(isExternalUrl("//cdn.example.com/img.png")).toBe(true);
   });
 
+  test("preserves unknown schemes for the final sanitizer", () => {
+    expect(isExternalUrl("javascript:alert(1)")).toBe(true);
+  });
+
   test("rejects relative paths", () => {
     expect(isExternalUrl("./img.png")).toBe(false);
     expect(isExternalUrl("../img.png")).toBe(false);
@@ -152,3 +157,15 @@ describe("extractRenderResult", () => {
     expect(() => extractRenderResult(dom)).toThrow();
   });
 });
+
+describe("buildWechatPreviewShell", () => {
+  test("embeds the final article fragment verbatim without a renderer bundle", () => {
+    const article = '<section style="color: red;"><p>正文</p></section>';
+    const shell = buildWechatPreviewShell(article, "标题 <安全>");
+
+    expect(shell).toContain(`<main id="wechat-preview-content">${article}</main>`);
+    expect(shell).toContain("标题 &lt;安全&gt;");
+    expect(shell).not.toContain("editor-export.js");
+    expect(shell).not.toContain("browser-dist");
+  });
+});