@bytechain.cn/colamd-themes 0.5.1 → 0.5.2

package/src/renderer.ts

@@ -1,310 +0,0 @@
-/**
- * Puppeteer-based rendering engine for ColaMD HTML/PDF export.
- *
- * Uses the @bytechain.cn/colamd 2.x library build (dist/lib/colamd-renderer.js +
- * colamd.css, requires ≥2.7.8-rc.1) to create a headless editor, apply themes,
- * render mermaid/math, and export standalone HTML or PDF. Theme CSS targets the
- * ColaMD 2.7.8-rc.1 contract (machine-readable as themes/contract.json in the
- * npm package) and is consumed directly as `:root` declarations.
- *
- * Architecture:
- *   Local HTTP server (serves renderer.js + page HTML)
- *     → Puppeteer page (same-origin, no CORS)
- *       → createColaMDEditor()
- *       → applyTheme() + setMarkdown() + ensureAllPluginsRendered()
- *       → buildExportHTML({ title }) / page.pdf()
- */
-
-import puppeteer, { type Browser, type Page } from "puppeteer";
-import { createServer, type Server } from "node:http";
-import { readFileSync, existsSync, createReadStream } from "node:fs";
-import { resolve, dirname, join } from "node:path";
-
-// ── Types ──
-
-/** Input for rendering a markdown document. */
-export interface RenderInput {
-  /** Markdown content string */
-  markdown: string;
-  /** Theme name: built-in (light/dark/elegant/newsprint) or "custom:<name>" */
-  themeName?: string;
-  /** Custom CSS content (used with "custom:<name>" themes) */
-  customCSS?: string;
-  /** Document title for the HTML <title> */
-  title?: string;
-}
-
-/** Result of a render operation. */
-export interface RenderResult {
-  /** Complete standalone HTML document */
-  html: string;
-}
-
-/** PDF export options. */
-export interface PDFExportOptions {
-  /** Page format */
-  format?: "A4" | "Letter" | "A3";
-  /** Print background colors/images */
-  printBackground?: boolean;
-  /** Page margins */
-  margin?: { top?: string; right?: string; bottom?: string; left?: string };
-}
-
-// ── File resolution ──
-
-/** Locate the ColaMD renderer ESM bundle in node_modules. */
-function findRendererPath(): string {
-  const candidates = [
-    resolve(dirname(new URL(import.meta.url).pathname), "../node_modules/@bytechain.cn/colamd/dist/lib/colamd-renderer.js"),
-    resolve(process.cwd(), "node_modules/@bytechain.cn/colamd/dist/lib/colamd-renderer.js"),
-  ];
-  for (const p of candidates) {
-    if (existsSync(p)) return p;
-  }
-  // Detect a 2.x distribution without the library entry (e.g. the 2.7.7 app
-  // package, or a desktop-only build): give an actionable error.
-  for (const base of candidates.map((p) => resolve(p, "../../.."))) {
-    const pkgJson = join(base, "package.json");
-    if (existsSync(pkgJson)) {
-      try {
-        const version = JSON.parse(readFileSync(pkgJson, "utf-8")).version as string;
-        if (version.startsWith("2.")) {
-          throw new Error(
-            `@bytechain.cn/colamd ${version} 不含 colamd-renderer.js 库入口（2.7.8 起恢复提供）。` +
-            "请升级: npm install @bytechain.cn/colamd@^2.7.8-rc.1"
-          );
-        }
-      } catch (e) {
-        if (e instanceof Error && e.message.includes("库入口")) throw e;
-      }
-    }
-  }
-  throw new Error(
-    "Cannot find @bytechain.cn/colamd renderer. " +
-    "Install it: npm install @bytechain.cn/colamd@^2.7.8-rc.1"
-  );
-}
-
-// ── Local HTTP server ──
-
-const SHELL_HTML = `<!DOCTYPE html>
-<html><head>
-<meta charset="utf-8">
-<link rel="stylesheet" href="/colamd.css">
-<style>body{margin:0;padding:0}#editor{width:100%;min-height:100vh}</style>
-</head><body><div id="editor"></div></body></html>`;
-
-interface LocalServer {
-  port: number;
-  close(): Promise<void>;
-}
-
-function startLocalServer(rendererPath: string): Promise<LocalServer> {
-  const cssPath = join(dirname(rendererPath), "colamd.css");
-  return new Promise((resolveStart, reject) => {
-    const server: Server = createServer((req, res) => {
-      if (req.url === "/" || req.url === "/index.html") {
-        res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
-        res.end(SHELL_HTML);
-      } else if (req.url === "/colamd-renderer.js") {
-        res.writeHead(200, { "Content-Type": "application/javascript; charset=utf-8" });
-        createReadStream(rendererPath).pipe(res);
-      } else if (req.url === "/colamd.css") {
-        res.writeHead(200, { "Content-Type": "text/css; charset=utf-8" });
-        createReadStream(cssPath).pipe(res);
-      } else {
-        res.writeHead(404);
-        res.end();
-      }
-    });
-
-    server.listen(0, "127.0.0.1", () => {
-      const addr = server.address();
-      const port = typeof addr === "object" && addr ? addr.port : 0;
-      resolveStart({
-        port,
-        close: () =>
-          new Promise((resolveClose) => server.close(() => resolveClose())),
-      });
-    });
-
-    server.on("error", reject);
-  });
-}
-
-// ── Renderer ──
-
-export class ColamdRenderer {
-  private browser: Browser | null = null;
-  private page: Page | null = null;
-  private server: LocalServer | null = null;
-  private ready = false;
-
-  /** Launch Puppeteer and prepare the editor page. */
-  async init(): Promise<void> {
-    if (this.browser) return;
-
-    // Start local HTTP server for the renderer bundle
-    const rendererPath = findRendererPath();
-    this.server = await startLocalServer(rendererPath);
-    const origin = `http://127.0.0.1:${this.server.port}`;
-
-    // Launch Puppeteer (use "shell" mode — chrome-headless-shell binary is more
-    // stable on this Windows environment than the full Chrome --headless=new mode)
-    this.browser = await puppeteer.launch({
-      headless: "shell",
-      args: ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"],
-    });
-    this.page = await this.browser.newPage();
-
-    // Navigate to shell page (same origin as renderer script)
-    await this.page.goto(`${origin}/`, { waitUntil: "domcontentloaded" });
-
-    // Load the ColaMD renderer as ESM (same-origin, no CORS)
-    await this.page.addScriptTag({
-      type: "module",
-      content: `
-        import { createColaMDEditor } from '${origin}/colamd-renderer.js';
-        window.__colamdReady = createColaMDEditor({
-          rootId: 'editor',
-          editable: false
-        }).then(handle => {
-          window.__colamdHandle = handle;
-          return true;
-        }).catch(err => {
-          window.__colamdError = err.message;
-          return false;
-        });
-      `,
-    });
-
-    // Wait for the editor to initialize
-    await this.page.waitForFunction(
-      () => (window as any).__colamdHandle || (window as any).__colamdError,
-      { timeout: 30000 }
-    );
-
-    const error = await this.page.evaluate(() => (window as any).__colamdError);
-    if (error) throw new Error(`Editor init failed: ${error}`);
-
-    this.ready = true;
-  }
-
-  /**
-   * Render markdown to a standalone HTML document.
-   */
-  async render(input: RenderInput): Promise<RenderResult> {
-    if (!this.ready || !this.page) await this.init();
-    const page = this.page!;
-
-    // Apply theme — the 2.x renderer consumes :root contract CSS directly
-    if (input.themeName) {
-      await page.evaluate(
-        (name: string, css: string | undefined) => {
-          (window as any).__colamdHandle.applyTheme(name, css || undefined);
-        },
-        input.themeName,
-        input.customCSS || undefined
-      );
-    }
-
-    // Set markdown content
-    await page.evaluate((md: string) => {
-      (window as any).__colamdHandle.setMarkdown(md);
-    }, input.markdown);
-
-    // Wait for all plugins (mermaid, math) to finish rendering
-    await page.evaluate(async () => {
-      await (window as any).__colamdHandle.ensureAllPluginsRendered();
-    });
-
-    // Additional settle time for complex diagrams
-    await new Promise((r) => setTimeout(r, 500));
-
-    // Build export HTML (2.x API: title goes through the options object)
-    const html = await page.evaluate((title: string | undefined) => {
-      return (window as any).__colamdHandle.buildExportHTML({ title });
-    }, input.title);
-
-    return { html };
-  }
-
-  /**
-   * Render markdown and export as PDF.
-   */
-  async exportPDF(input: RenderInput, options: PDFExportOptions = {}): Promise<Buffer> {
-    if (!this.ready || !this.page) await this.init();
-
-    // First render to HTML
-    const { html } = await this.render(input);
-
-    // Load the HTML in a fresh page for PDF generation
-    const pdfPage = await this.browser!.newPage();
-    await pdfPage.setContent(html, { waitUntil: "load", timeout: 30000 });
-
-    // NOTE: Do NOT use emulateMediaType("screen") here.
-    // The CSS template includes comprehensive @media print rules (SECTION 6)
-    // with !important declarations and print-color-adjust: exact for proper styling.
-    // Using screen mode would prevent these print-specific styles from applying.
-
-    const pdfBuffer = await pdfPage.pdf({
-      format: options.format ?? "A4",
-      printBackground: options.printBackground ?? true,
-      margin: options.margin ?? { top: "15mm", right: "15mm", bottom: "15mm", left: "15mm" },
-    });
-
-    await pdfPage.close();
-    return Buffer.from(pdfBuffer);
-  }
-
-  /** Shut down the browser and local server with proper resource cleanup. */
-  async close(): Promise<void> {
-    try {
-      // Explicitly close page first to prevent zombie processes
-      if (this.page) {
-        await this.page.close().catch(() => {});
-        this.page = null;
-      }
-
-      if (this.browser) {
-        await this.browser.close();
-        this.browser = null;
-      }
-    } finally {
-      this.ready = false;
-
-      if (this.server) {
-        await this.server.close();
-        this.server = null;
-      }
-    }
-  }
-}
-
-/**
- * One-shot render: init → render → close.
- * Convenience for single-file export.
- */
-export async function renderMarkdown(input: RenderInput): Promise<RenderResult> {
-  const renderer = new ColamdRenderer();
-  try {
-    return await renderer.render(input);
-  } finally {
-    await renderer.close();
-  }
-}
-
-/**
- * One-shot PDF export: init → render PDF → close.
- */
-export async function renderPDF(
-  input: RenderInput,
-  options?: PDFExportOptions
-): Promise<Buffer> {
-  const renderer = new ColamdRenderer();
-  try {
-    return await renderer.exportPDF(input, options);
-  } finally {
-    await renderer.close();
-  }
-}

package/src/templates/template.css

@@ -1,220 +0,0 @@
-/* ===== ColaMD 自定义主题模板（2.7 契约）=====
-
-   复制这一份改就是了：改配色、改字体、改文件名，然后 Theme > Import Theme，
-   或者放进 ~/.colamd/themes/。
-
-   三件事先说清楚：
-
-   1. 变量写在 :root 里。没写的活变量继承 Light 主题的默认值，所以只想改配色的话，
-      下面第一段往往就够了，选择器那一段可以整段删掉。
-   2. 编辑器里没有 <h1>、<blockquote> 这种元素：标题是一「行」带一个类，引用与代码块
-      是每一行一个 div，加粗是一个 span。所以只能选 .cm-md-* 这些钩子。
-   3. 引用块与代码块**不能加纵向 padding**：一行一个 div，纵向 padding 会按行累加。
-      要留呼吸感只给 padding-left / padding-right。
-
-   这份故意不是一套好看的配色，它是照着改的起点。 */
-
-:root {
-  /* ---- 语义色（活变量）---- */
-  --bg-color: #ffffff;                    /* 正文底色 */
-  --text-color: #24292f;                  /* 正文字色 */
-  --text-secondary: #57606a;              /* 次级文字：引用、标签 */
-  --text-muted: #6e7781;                  /* 压淡文字：行号、链接地址、列表圆点 */
-  --border-color: #d0d7de;                /* 分隔线、表格边框、面板描边 */
-  --link-color: #0969da;                  /* 链接、搜索高亮 */
-
-  --code-bg: rgba(175, 184, 193, 0.2);    /* 行内代码底色 */
-  --code-block-bg: #f6f8fa;               /* 代码块底色：明暗决定 Pele 图表配色 */
-  --code-block-text: #24292f;             /* 代码块文字 */
-
-  --blockquote-border: #d0d7de;           /* 引用块左竖线 */
-  --blockquote-bg: transparent;           /* 引用块底色，transparent 就是不要底 */
-  --table-header-bg: #f6f8fa;             /* 表头底色 */
-  --selection-bg: rgba(9, 105, 218, 0.15);/* 选中背景 */
-  --highlight-bg: #fff3bf;                /* ==高亮== 底色 */
-
-  /* ---- 字体与度量（活变量）---- */
-  --font-body: Georgia, 'Songti SC', 'Noto Serif SC', serif;
-  --font-mono: 'SF Mono', 'Fira Code', Menlo, Consolas, monospace;
-  --editor-font-size: 16px;
-  --editor-column-width: 780px;
-
-  /* ---- Pele 图表（可选，9 个）----
-     图直接画在 --code-block-bg 上，缺省会由代码块底色与字色推导。 */
-  --pele-bg: var(--code-block-bg);
-  --pele-fg: var(--code-block-text);
-  --pele-muted: color-mix(in srgb, var(--code-block-text) 70%, var(--code-block-bg));
-  --pele-line: var(--code-block-text);
-  --pele-surface: color-mix(in srgb, var(--code-block-text) 18%, var(--code-block-bg));
-  --pele-surface-alt: color-mix(in srgb, var(--code-block-text) 28%, var(--code-block-bg));
-  --pele-border: color-mix(in srgb, var(--code-block-text) 45%, var(--code-block-bg));
-  --pele-accent: var(--link-color);
-  --pele-radius: 6px;
-}
-
-/* ===== 编辑器 DOM =====
-   CodeMirror 6 的选择器优先级：行级规则写成「两个类」才压得住它运行时注入的
-   baseTheme，所以下面一律用 #editor .cm-content .cm-md-*。 */
-
-#editor .cm-content {
-  font-family: var(--font-body);
-  line-height: 1.75;
-}
-
-/* 标题。只要一级二级就这样写，三级往下照抄类名即可。 */
-#editor .cm-content .cm-md-atxheading1,
-#editor .cm-content .cm-md-atxheading2 {
-  color: #1b4f72;
-  padding-bottom: 0.25em;
-  border-bottom: 1px solid var(--border-color);
-}
-#editor .cm-content .cm-md-atxheading3,
-#editor .cm-content .cm-md-atxheading4,
-#editor .cm-content .cm-md-atxheading5,
-#editor .cm-content .cm-md-atxheading6 {
-  color: #1b4f72;
-}
-
-/* 行内格式。 */
-#editor .cm-content .cm-md-strong { color: var(--link-color); }
-#editor .cm-content .cm-md-em { font-style: italic; }
-#editor .cm-content .cm-md-strike { text-decoration: line-through; }
-#editor .cm-content .cm-md-highlight { background: var(--highlight-bg); }
-#editor .cm-content .cm-md-link { color: var(--link-color); }
-#editor .cm-content .cm-md-url { color: var(--text-muted); }
-
-#editor .cm-content .cm-md-inlinecode {
-  font-family: var(--font-mono);
-  background: var(--code-bg);
-  color: var(--text-color);
-  border-radius: 3px;
-}
-
-/* 标记字符（#、>、-、围栏）：光标不在这一行时压淡。 */
-#editor .cm-content .cm-md-marker,
-#editor .cm-content .cm-md-quotemark,
-#editor .cm-content .cm-md-listmark {
-  color: var(--text-muted);
-}
-
-/* 引用块：一行一个 div，所以只给左右内边距。 */
-#editor .cm-content .cm-md-blockquote {
-  background: var(--blockquote-bg);
-  color: var(--text-secondary);
-  border-left: 3px solid var(--blockquote-border);
-  padding-left: 16px;
-  padding-right: 16px;
-}
-
-/* 代码块：同样一行一个 div；圆角放在首行/末行。 */
-#editor .cm-content .cm-md-codeblock {
-  background: var(--code-block-bg);
-  color: var(--code-block-text);
-  padding-left: 16px;
-  padding-right: 16px;
-}
-#editor .cm-content .cm-md-codeblock-first {
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-}
-#editor .cm-content .cm-md-codeblock-last {
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-}
-
-/* 表格：单元格是 .cm-md-table-widget 里的 th / td。 */
-#editor .cm-content .cm-md-table-widget th,
-#editor .cm-content .cm-md-table-widget td {
-  border-color: var(--border-color);
-}
-#editor .cm-content .cm-md-table-widget th {
-  background: var(--table-header-bg);
-  color: var(--text-color);
-  border-bottom: 2px solid var(--link-color);
-}
-
-/* 分隔线。 */
-#editor .cm-content .cm-md-hr { border-top-color: var(--border-color); }
-
-/* 中文正文首行缩进：一行就是一个 div，标题/引用/代码/列表行归零。 */
-#editor .cm-content .cm-line { text-indent: 2em; }
-
-#editor .cm-content .cm-md-atxheading1,
-#editor .cm-content .cm-md-atxheading2,
-#editor .cm-content .cm-md-atxheading3,
-#editor .cm-content .cm-md-atxheading4,
-#editor .cm-content .cm-md-atxheading5,
-#editor .cm-content .cm-md-atxheading6,
-#editor .cm-content .cm-md-blockquote,
-#editor .cm-content .cm-md-codeblock,
-#editor .cm-content .cm-md-hr,
-#editor .cm-content .cm-md-mermaid,
-#editor .cm-content .cm-md-li-0,
-#editor .cm-content .cm-md-li-1,
-#editor .cm-content .cm-md-li-2,
-#editor .cm-content .cm-md-li-3,
-#editor .cm-content .cm-md-li-4,
-#editor .cm-content .cm-md-li-5,
-#editor .cm-content .cm-md-li-6 {
-  text-indent: 0;
-}
-
-/* ===== 导出的 HTML =====
-   导出件是语义标签（h1/p/pre/table…），挂在 .colamd-document 上，
-   编辑器里不存在这个类。document.css 已给结构，这里只补配色。 */
-
-.colamd-document {
-  font-family: var(--font-body);
-  font-size: var(--editor-font-size);
-  line-height: 1.75;
-}
-
-.colamd-document h1,
-.colamd-document h2,
-.colamd-document h3,
-.colamd-document h4,
-.colamd-document h5,
-.colamd-document h6 {
-  color: #1b4f72;
-}
-
-.colamd-document strong { color: var(--link-color); }
-.colamd-document code {
-  background: var(--code-bg);
-  color: var(--text-color);
-  font-family: var(--font-mono);
-}
-.colamd-document pre { background: var(--code-block-bg); }
-.colamd-document pre code { color: var(--code-block-text); }
-.colamd-document blockquote {
-  background: var(--blockquote-bg);
-  color: var(--text-secondary);
-  border-left-color: var(--blockquote-border);
-}
-.colamd-document mark { background: var(--highlight-bg); }
-.colamd-document th {
-  background: var(--table-header-bg);
-  border-bottom: 2px solid var(--link-color);
-}
-.colamd-document hr { border-top-color: var(--border-color); }
-
-.colamd-document p { text-indent: 2em; }
-.colamd-document li p,
-.colamd-document td p,
-.colamd-document th p,
-.colamd-document blockquote p {
-  text-indent: 0;
-}
-
-/* ===== 打印 =====
-   应用直接对当前窗口 printToPDF，上面所有规则原样生效。 */
-
-@media print {
-  html,
-  body {
-    background: var(--bg-color);
-    color: var(--text-color);
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-  }
-}