@zzclub/pipeline 0.13.2 → 0.16.0

package/src/wechat-preview/index.ts

@@ -20,8 +20,10 @@ import {
   WECHAT_PREVIEW_DIR,
 } from "../runtime-paths";
 import { extractFrontmatter } from "./frontmatter-handler";
+import { readArticleTheme } from "../article-theme";
 import { getWechatPreviewStyleName, getWechatPreviewTheme } from "./themes";
 import { stripLeadingH1 } from "../text";
+import { buildCombinedPresetsCss } from "./browser/studio/syntax-presets";
 
 interface ViteManifestEntry {
   file: string;
@@ -90,9 +92,17 @@ export interface ExportMarkdownToWechatHtmlInput {
   title?: string;
   previewShellOutPath?: string;
   customCss?: string | null;
+  articleThemePath?: string | null;
   themeOverrides?: {
     editorVars?: Record<string, string>;
     exportTheme?: Record<string, string>;
+    syntaxPresets?: Record<string, string>;
+    structure?: {
+      numberedHeadings?: boolean;
+      headingLabel?: string;
+      quoteLabel?: string;
+      calloutPresets?: Record<string, { title?: string; icon?: string }>;
+    };
   };
   /** 浏览器真实等待上限，默认 15000 毫秒。 */
   timeoutMs?: number;
@@ -130,6 +140,14 @@ export function resolveMilkdownArticleStylePath(): string {
 export function getWechatPreviewBundleSources(): string[] {
   return [
     join(WECHAT_PREVIEW_DIR, "browser/editor-export.ts"),
+    join(WECHAT_PREVIEW_DIR, "browser/highlight.ts"),
+    join(WECHAT_PREVIEW_DIR, "browser/studio/studio.ts"),
+    join(WECHAT_PREVIEW_DIR, "browser/studio/studio.html"),
+    join(WECHAT_PREVIEW_DIR, "browser/studio/studio.css"),
+    join(WECHAT_PREVIEW_DIR, "plugins/registry.ts"),
+    join(WECHAT_PREVIEW_DIR, "plugins/builtin-callout.ts"),
+    join(WECHAT_PREVIEW_DIR, "plugins/builtin-kbd.ts"),
+    join(WECHAT_PREVIEW_DIR, "plugins/builtin-badge.ts"),
     resolveMilkdownArticleStylePath(),
     join(WECHAT_PREVIEW_DIR, "wechat-renderer.ts"),
   ];
@@ -377,18 +395,31 @@ export async function exportMarkdownToWechatHtml(
     const sourceMarkdown = await readFile(input.markdownPath, "utf-8");
     const stripped = extractFrontmatter(sourceMarkdown).content;
     const bodyMarkdown = stripLeadingH1(stripped).trimStart();
-    const markdown = rewriteRelativeImagePaths(bodyMarkdown, dirname(input.markdownPath));
-    const theme = getWechatPreviewTheme(input.account, input.themeOverrides);
-    const customCss = input.customCss
-      ? await readFile(input.customCss, "utf-8")
-      : undefined;
+    const markdown = bodyMarkdown;
+    const articleTheme = input.articleThemePath ? await readArticleTheme(input.articleThemePath) : null;
+    const theme = getWechatPreviewTheme(input.account, articleTheme ? {
+      editorVars: { ...articleTheme.manifest.editorVars, ...input.themeOverrides?.editorVars },
+      exportTheme: { footerText: "", ...articleTheme.manifest.exportTheme, ...input.themeOverrides?.exportTheme },
+    } : input.themeOverrides);
+    const presetsCss = input.themeOverrides?.syntaxPresets
+      ? buildCombinedPresetsCss(input.themeOverrides.syntaxPresets)
+      : "";
+    const customCss = [presetsCss, articleTheme?.css, input.customCss ? await readFile(input.customCss, "utf-8") : ""].filter(Boolean).join("\n\n");
+    const structure = articleTheme ? {
+      ...articleTheme.manifest.structure,
+      ...input.themeOverrides?.structure,
+      headerImageUrl: articleTheme.manifest.structure.headerImage
+        ? `data:image/${articleTheme.manifest.structure.headerImage.split(".").pop()!.toLowerCase().replace("jpg", "jpeg")};base64,${Buffer.from(articleTheme.files.get(articleTheme.manifest.structure.headerImage)!).toString("base64")}` : null,
+    } : (input.themeOverrides?.structure ? { ...input.themeOverrides.structure } : undefined);
     const shell = readUtf8(TEMPLATE_PATH);
     const payloadJson = escapeInlineJson(
       JSON.stringify({
         markdown,
+        assetBaseUrl: pathToFileURL(`${dirname(resolve(input.markdownPath))}/`).href,
         editorVars: theme.editorVars,
         exportTheme: theme.exportTheme,
         customCss,
+        structure,
       }),
     );
 

package/src/wechat-preview/plugins/builtin-badge.ts

@@ -0,0 +1,152 @@
+import { $markSchema, $remark } from "@milkdown/kit/utils";
+import type { WechatMarkdownPlugin } from "./types";
+import type { WechatElementRenderer } from "../wechat-renderer";
+
+/** Remark plugin to match [badge:type|text] syntax. */
+export function remarkBadge() {
+  return (tree: any) => {
+    function visit(node: any) {
+      if (!node || typeof node !== "object") return;
+      if (node.type === "paragraph" || node.type === "listItem" || node.type === "heading") {
+        if (Array.isArray(node.children)) {
+          const newChildren: any[] = [];
+          for (const child of node.children) {
+            if (child.type === "text" && typeof child.value === "string") {
+              const regex = /\[badge:(brand|success|warning|danger|info)\|([^\]]+)\]/gi;
+              let lastIndex = 0;
+              let match;
+              let found = false;
+              while ((match = regex.exec(child.value)) !== null) {
+                found = true;
+                if (match.index > lastIndex) {
+                  newChildren.push({
+                    type: "text",
+                    value: child.value.slice(lastIndex, match.index),
+                  });
+                }
+                const badgeType = match[1].toLowerCase();
+                const badgeText = match[2];
+                newChildren.push({
+                  type: "badge",
+                  badgeType,
+                  children: [{ type: "text", value: badgeText }],
+                });
+                lastIndex = regex.lastIndex;
+              }
+              if (found) {
+                if (lastIndex < child.value.length) {
+                  newChildren.push({
+                    type: "text",
+                    value: child.value.slice(lastIndex),
+                  });
+                }
+                continue;
+              }
+            }
+            newChildren.push(child);
+          }
+          node.children = newChildren;
+        }
+      }
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+          visit(child);
+        }
+      }
+    }
+    visit(tree);
+  };
+}
+
+export const badgeMilkdownPlugins = [
+  $remark("remarkBadge", () => remarkBadge as any),
+  $markSchema("badge", () => ({
+    attrs: {
+      type: { default: "brand" },
+    },
+    parseDOM: [
+      {
+        tag: "span[data-wechat-node='badge']",
+        getAttrs: (dom) => ({
+          type: (dom as HTMLElement).getAttribute("data-badge-type") || "brand",
+        }),
+      },
+    ],
+    toDOM: (mark) => [
+      "span",
+      {
+        class: `wechat-badge wechat-badge-${mark.attrs.type}`,
+        "data-wechat-node": "badge",
+        "data-badge-type": mark.attrs.type,
+      },
+      0,
+    ],
+    parseMarkdown: {
+      match: (node) => node.type === "badge",
+      runner: (state, node, markType) => {
+        state.openMark(markType, { type: node.badgeType || "brand" });
+        state.next(node.children);
+        state.closeMark(markType);
+      },
+    },
+    toMarkdown: {
+      match: (mark) => mark.type.name === "badge",
+      runner: (state, mark) => {
+        state.withMark(mark, "badge");
+      },
+    },
+  })),
+].flat();
+
+export const badgeWechatRenderer: WechatElementRenderer = {
+  kind: "badge",
+  selector: 'span[data-wechat-node="badge"]',
+};
+
+export const builtinBadgePlugin: WechatMarkdownPlugin = {
+  doc: {
+    id: "badge",
+    name: "状态徽章 (Badge)",
+    category: "inline",
+    description: "使用 [badge:类型|文字] 插入圆角状态胶囊标签（支持 brand/success/warning/danger/info）",
+    sampleMarkdown: "当前服务状态：[badge:success|运行正常]，新版特性：[badge:brand|重点推荐]！",
+    syntaxGuide: "[badge:类型|标签文字]",
+    cssSelectors: ['span[data-wechat-node="badge"]', ".wechat-badge"],
+  },
+  milkdownPlugins: badgeMilkdownPlugins,
+  wechatRenderer: badgeWechatRenderer,
+  defaultCss: `
+.milkdown .editor .wechat-badge,
+.milkdown .editor span[data-wechat-node="badge"] {
+  display: inline-block;
+  padding: 1px 7px;
+  font-size: 0.78em;
+  font-weight: 600;
+  line-height: 1.4;
+  border-radius: 999px;
+  margin: 0 3px;
+  vertical-align: baseline;
+  box-sizing: border-box;
+}
+.milkdown .editor .wechat-badge-brand {
+  background-color: rgba(202, 96, 147, 0.12);
+  color: #a94473;
+}
+.milkdown .editor .wechat-badge-success {
+  background-color: #e8f6ec;
+  color: #2f7d4a;
+}
+.milkdown .editor .wechat-badge-warning {
+  background-color: #fef3c7;
+  color: #b45309;
+}
+.milkdown .editor .wechat-badge-danger {
+  background-color: #fee2e2;
+  color: #b91c1c;
+}
+.milkdown .editor .wechat-badge-info {
+  background-color: #eff6ff;
+  color: #1d4ed8;
+}
+`.trim(),
+};

package/src/wechat-preview/plugins/builtin-callout.ts

@@ -0,0 +1,261 @@
+import { $nodeSchema, $remark } from "@milkdown/kit/utils";
+import type { WechatMarkdownPlugin } from "./types";
+import type { WechatElementRenderer } from "../wechat-renderer";
+
+export interface CalloutMeta {
+  title: string;
+  icon: string;
+  borderColor: string;
+  bgColor: string;
+  textColor: string;
+}
+
+export const CALLOUT_PRESETS: Record<string, CalloutMeta> = {
+  note: {
+    title: "提示",
+    icon: "💡",
+    borderColor: "#3b82f6",
+    bgColor: "rgba(59, 130, 246, 0.08)",
+    textColor: "#1d4ed8",
+  },
+  tip: {
+    title: "建议",
+    icon: "✨",
+    borderColor: "#10b981",
+    bgColor: "rgba(16, 185, 129, 0.08)",
+    textColor: "#047857",
+  },
+  important: {
+    title: "重点",
+    icon: "📌",
+    borderColor: "#8b5cf6",
+    bgColor: "rgba(139, 92, 246, 0.08)",
+    textColor: "#6d28d9",
+  },
+  warning: {
+    title: "警告",
+    icon: "⚠️",
+    borderColor: "#f59e0b",
+    bgColor: "rgba(245, 158, 11, 0.08)",
+    textColor: "#b45309",
+  },
+  caution: {
+    title: "注意",
+    icon: "🛑",
+    borderColor: "#ef4444",
+    bgColor: "rgba(239, 68, 68, 0.08)",
+    textColor: "#b91c1c",
+  },
+};
+
+/** Remark AST plugin: transforms GFM alert blockquote into callout node. */
+export function remarkCallout() {
+  return (tree: any) => {
+    function visit(node: any) {
+      if (!node || typeof node !== "object") return;
+      if (node.type === "blockquote" && Array.isArray(node.children) && node.children.length > 0) {
+        const firstParagraph = node.children[0];
+        if (
+          firstParagraph &&
+          firstParagraph.type === "paragraph" &&
+          Array.isArray(firstParagraph.children) &&
+          firstParagraph.children.length > 0
+        ) {
+          const firstText = firstParagraph.children[0];
+          if (firstText && firstText.type === "text" && typeof firstText.value === "string") {
+            const match = firstText.value.match(/^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\](?:[ \t]+([^\r\n]+))?(?:\r?\n|$)/i);
+            if (match) {
+              const rawType = match[1].toLowerCase();
+              const customTitle = match[2] ? match[2].trim() : "";
+              // Strip the [!TAG] marker
+              firstText.value = firstText.value.slice(match[0].length);
+              if (!firstText.value.trim() && firstParagraph.children.length > 1) {
+                firstParagraph.children.shift();
+              } else if (!firstText.value.trim() && firstParagraph.children.length === 1) {
+                node.children.shift();
+              }
+              node.type = "callout";
+              node.calloutType = rawType;
+              node.customTitle = customTitle;
+            }
+          }
+        }
+      }
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+          visit(child);
+        }
+      }
+    }
+    visit(tree);
+  };
+}
+
+export const calloutMilkdownPlugins = [
+  $remark("remarkCallout", () => remarkCallout as any),
+  $nodeSchema("callout", () => ({
+    content: "block+",
+    group: "block",
+    defining: true,
+    attrs: {
+      type: { default: "note" },
+      title: { default: "" },
+    },
+    parseDOM: [
+      {
+        tag: "section[data-wechat-node='callout']",
+        getAttrs: (dom) => ({
+          type: (dom as HTMLElement).getAttribute("data-callout-type") || "note",
+          title: (dom as HTMLElement).getAttribute("data-callout-title") || "",
+        }),
+      },
+    ],
+    toDOM: (node) => [
+      "section",
+      {
+        class: `wechat-callout wechat-callout-${node.attrs.type}`,
+        "data-wechat-node": "callout",
+        "data-callout-type": node.attrs.type,
+        ...(node.attrs.title ? { "data-callout-title": node.attrs.title } : {}),
+      },
+      0,
+    ],
+    parseMarkdown: {
+      match: (node) => node.type === "callout",
+      runner: (state, node, type) => {
+        state.openNode(type, {
+          type: node.calloutType || "note",
+          title: node.customTitle || "",
+        });
+        state.next(node.children);
+        state.closeNode();
+      },
+    },
+    toMarkdown: {
+      match: (node) => node.type.name === "callout",
+      runner: (state, node) => {
+        state.openNode("blockquote");
+        state.next(node.content);
+        state.closeNode();
+      },
+    },
+  })),
+].flat();
+
+export const calloutWechatRenderer: WechatElementRenderer = {
+  kind: "callout",
+  selector: 'section[data-wechat-node="callout"]',
+  prepare(element, context) {
+    const type = element.getAttribute("data-callout-type") || "note";
+    const customTitleAttr = element.getAttribute("data-callout-title");
+    const configuredPreset = context.structure?.calloutPresets?.[type];
+    const basePreset = CALLOUT_PRESETS[type] || CALLOUT_PRESETS.note;
+    const preset = {
+      ...basePreset,
+      ...configuredPreset,
+    };
+
+    let iconText = preset.icon;
+    let titleText = preset.title;
+
+    if (customTitleAttr && customTitleAttr.trim()) {
+      const trimmed = customTitleAttr.trim();
+      const emojiMatch = trimmed.match(/^(\p{Extended_Pictographic}|\p{Emoji_Presentation})\s*(.*)$/u);
+      if (emojiMatch) {
+        iconText = emojiMatch[1];
+        titleText = emojiMatch[2].trim() || preset.title;
+      } else {
+        titleText = trimmed;
+      }
+    }
+
+    // Build callout header section
+    const header = context.document.createElement("section");
+    header.className = "wechat-callout-header";
+    header.setAttribute("data-wechat-node", "callout-header");
+
+    const icon = context.document.createElement("span");
+    icon.className = "wechat-callout-icon";
+    icon.textContent = iconText;
+    header.appendChild(icon);
+
+    const title = context.document.createElement("strong");
+    title.className = "wechat-callout-title";
+    title.textContent = titleText;
+    header.appendChild(title);
+
+    element.prepend(header);
+  },
+};
+
+export const builtinCalloutPlugin: WechatMarkdownPlugin = {
+  doc: {
+    id: "callout",
+    name: "提示卡片 (Callout)",
+    category: "block",
+    description: "使用 GFM 规范语法 (> [!NOTE]) 生成带左侧边框与图标的微信高亮卡片",
+    sampleMarkdown: `> [!NOTE]
+> 这里是一条标准提示，适用于操作备忘。
+
+> [!TIP] 实用技巧
+> 这是带自定义标题的建议卡片。
+
+> [!WARNING] ⚠️ 重点防护
+> 这是带自定义 Emoji 与标题的警告卡片。`,
+    syntaxGuide: "> [!NOTE] 自定义标题 (可选，可包含 Emoji)\n> 提示内容...",
+    cssSelectors: [
+      'section[data-wechat-node="callout"]',
+      ".wechat-callout",
+      ".wechat-callout-note",
+      ".wechat-callout-tip",
+      ".wechat-callout-warning",
+    ],
+  },
+  milkdownPlugins: calloutMilkdownPlugins,
+  wechatRenderer: calloutWechatRenderer,
+  defaultCss: `
+.milkdown .editor section[data-wechat-node="callout"],
+.milkdown .editor .wechat-callout {
+  margin: 1.2em 0;
+  padding: 12px 16px;
+  border-radius: 6px;
+  border-left-width: 4px;
+  border-left-style: solid;
+  box-sizing: border-box;
+}
+.milkdown .editor .wechat-callout-note {
+  border-left-color: #3b82f6;
+  background-color: rgba(59, 130, 246, 0.08);
+}
+.milkdown .editor .wechat-callout-tip {
+  border-left-color: #10b981;
+  background-color: rgba(16, 185, 129, 0.08);
+}
+.milkdown .editor .wechat-callout-important {
+  border-left-color: #8b5cf6;
+  background-color: rgba(139, 92, 246, 0.08);
+}
+.milkdown .editor .wechat-callout-warning {
+  border-left-color: #f59e0b;
+  background-color: rgba(245, 158, 11, 0.08);
+}
+.milkdown .editor .wechat-callout-caution {
+  border-left-color: #ef4444;
+  background-color: rgba(239, 68, 68, 0.08);
+}
+.milkdown .editor section[data-wechat-node="callout-header"] {
+  font-size: 14px;
+  font-weight: bold;
+  margin-bottom: 6px;
+  line-height: 1.4;
+}
+.milkdown .editor .wechat-callout-icon {
+  margin-right: 6px;
+}
+.milkdown .editor .wechat-callout p {
+  margin: 0.4em 0;
+  font-size: 15px;
+  line-height: 1.7;
+}
+`.trim(),
+};

package/src/wechat-preview/plugins/builtin-highlight.ts

@@ -0,0 +1,46 @@
+import { $markSchema, $remark } from "@milkdown/kit/utils";
+import { remarkHighlightMark } from "remark-highlight-mark";
+import type { WechatMarkdownPlugin } from "./types";
+
+export const highlightMilkdownPlugins = [
+  $remark("remarkHighlightMark", () => remarkHighlightMark as any),
+  $markSchema("highlight", () => ({
+    parseDOM: [{ tag: "mark" }],
+    toDOM: () => ["mark", 0],
+    parseMarkdown: {
+      match: (node) => node.type === "highlight",
+      runner: (state, node, markType) => {
+        state.openMark(markType, {});
+        state.next(node.children);
+        state.closeMark(markType);
+      },
+    },
+    toMarkdown: {
+      match: (mark) => mark.type.name === "highlight",
+      runner: (state, mark) => {
+        state.withMark(mark, "highlight");
+      },
+    },
+  })),
+].flat();
+
+export const builtinHighlightPlugin: WechatMarkdownPlugin = {
+  doc: {
+    id: "highlight",
+    name: "高亮标记 (Highlight)",
+    category: "inline",
+    description: "使用 ==文本== 添加荧光笔黄色高亮背景",
+    sampleMarkdown: "这里支持 ==重要结论== 与 ==关键观点== 的高亮展示。",
+    syntaxGuide: "==高亮文本==",
+    cssSelectors: ["mark", ".milkdown .editor mark"],
+  },
+  milkdownPlugins: highlightMilkdownPlugins,
+  defaultCss: `
+.milkdown .editor mark {
+  background-color: #fff0a8;
+  color: inherit;
+  padding: 1px 3px;
+  border-radius: 2px;
+}
+`.trim(),
+};

package/src/wechat-preview/plugins/builtin-kbd.ts

@@ -0,0 +1,133 @@
+import { $markSchema, $remark } from "@milkdown/kit/utils";
+import type { WechatMarkdownPlugin } from "./types";
+import type { WechatElementRenderer } from "../wechat-renderer";
+
+/** Remark plugin to match [[kbd:Key]] syntax. */
+export function remarkKbd() {
+  return (tree: any) => {
+    function visit(node: any) {
+      if (!node || typeof node !== "object") return;
+      if (node.type === "paragraph" || node.type === "listItem" || node.type === "heading") {
+        if (Array.isArray(node.children)) {
+          const newChildren: any[] = [];
+          for (const child of node.children) {
+            if (child.type === "text" && typeof child.value === "string") {
+              const regex = /\[\[kbd:([^\]]+)\]\]/g;
+              let lastIndex = 0;
+              let match;
+              let found = false;
+              while ((match = regex.exec(child.value)) !== null) {
+                found = true;
+                if (match.index > lastIndex) {
+                  newChildren.push({
+                    type: "text",
+                    value: child.value.slice(lastIndex, match.index),
+                  });
+                }
+                newChildren.push({
+                  type: "kbd",
+                  children: [{ type: "text", value: match[1] }],
+                });
+                lastIndex = regex.lastIndex;
+              }
+              if (found) {
+                if (lastIndex < child.value.length) {
+                  newChildren.push({
+                    type: "text",
+                    value: child.value.slice(lastIndex),
+                  });
+                }
+                continue;
+              }
+            }
+            newChildren.push(child);
+          }
+          node.children = newChildren;
+        }
+      }
+      if (Array.isArray(node.children)) {
+        for (const child of node.children) {
+          visit(child);
+        }
+      }
+    }
+    visit(tree);
+  };
+}
+
+export const kbdMilkdownPlugins = [
+  $remark("remarkKbd", () => remarkKbd as any),
+  $markSchema("kbd", () => ({
+    parseDOM: [{ tag: "kbd" }, { tag: "span[data-wechat-node='kbd']" }],
+    toDOM: () => [
+      "span",
+      {
+        class: "wechat-kbd",
+        "data-wechat-node": "kbd",
+      },
+      0,
+    ],
+    parseMarkdown: {
+      match: (node) => node.type === "kbd",
+      runner: (state, node, markType) => {
+        state.openMark(markType, {});
+        state.next(node.children);
+        state.closeMark(markType);
+      },
+    },
+    toMarkdown: {
+      match: (mark) => mark.type.name === "kbd",
+      runner: (state, mark) => {
+        state.withMark(mark, "kbd");
+      },
+    },
+  })),
+].flat();
+
+export const kbdWechatRenderer: WechatElementRenderer = {
+  kind: "kbd",
+  selector: 'span[data-wechat-node="kbd"], kbd',
+  finalize(element) {
+    if (element.tagName.toLowerCase() === "kbd") {
+      const replacement = element.ownerDocument.createElement("span");
+      for (const attr of Array.from(element.attributes)) {
+        replacement.setAttribute(attr.name, attr.value);
+      }
+      while (element.firstChild) {
+        replacement.appendChild(element.firstChild);
+      }
+      element.replaceWith(replacement);
+    }
+  },
+};
+
+export const builtinKbdPlugin: WechatMarkdownPlugin = {
+  doc: {
+    id: "kbd",
+    name: "按键标记 (Keyboard Key)",
+    category: "inline",
+    description: "使用 [[kbd:按键]] 输出带轻拟物阴影的键盘按键胶囊",
+    sampleMarkdown: "按下快捷键 [[kbd:Cmd]] + [[kbd:K]] 快速唤起全局指令台。",
+    syntaxGuide: "[[kbd:按键名称]]",
+    cssSelectors: ['span[data-wechat-node="kbd"]', ".wechat-kbd"],
+  },
+  milkdownPlugins: kbdMilkdownPlugins,
+  wechatRenderer: kbdWechatRenderer,
+  defaultCss: `
+.milkdown .editor .wechat-kbd,
+.milkdown .editor span[data-wechat-node="kbd"] {
+  display: inline-block;
+  padding: 2px 6px;
+  font-family: -apple-system, SFMono-Regular, Consolas, Menlo, monospace;
+  font-size: 0.85em;
+  line-height: 1.2;
+  color: #374151;
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  border-bottom-width: 2px;
+  border-radius: 4px;
+  margin: 0 2px;
+  box-sizing: border-box;
+}
+`.trim(),
+};