hd-garden 0.10.2 → 0.10.4

package/ui/garden/excalidraw-inline.mjs

@@ -0,0 +1,175 @@
+/**
+ * Turn an exported Excalidraw SVG into article HTML.
+ *
+ * The Markdown image stays the author's syntax until content sync. This walks
+ * the Markdown AST, swaps each `.excalidraw` image for the sanitized SVG, and
+ * leaves every other byte of the post alone. rehype-raw then parses that SVG
+ * into the article tree, so the text is part of the page rather than an
+ * `<img src>`.
+ */
+import crypto from "node:crypto";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import { fromHtml } from "hast-util-from-html";
+import { toHtml } from "hast-util-to-html";
+import { visit } from "unist-util-visit";
+import { figureLayout } from "./enhance.mjs";
+import { mapOutsideCode } from "./markdown-links.mjs";
+
+/** Same rule as scripts/excalidraw.mjs: a source file, not an `.excalidraw.svg`. */
+function isExcalidrawPath(value) {
+  const clean = String(value ?? "").split(/[?#]/u, 1)[0];
+  return /\.excalidraw$/iu.test(clean);
+}
+
+const DROP_TAGS = new Set([
+  "script",
+  "noscript",
+  "iframe",
+  "object",
+  "embed",
+  "foreignobject",
+  "audio",
+  "video",
+  "canvas",
+  "link",
+  "meta",
+  "base",
+  "form",
+]);
+
+const escapeHtml = (value) =>
+  String(value)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+
+function meaningfulChildren(node) {
+  return (node?.children ?? []).filter((child) => !(child.type === "text" && !String(child.value).trim()));
+}
+
+/** Same caption rule as article figures: title, otherwise alt, unless the alt is a placeholder. */
+function imageCaption(image) {
+  const title = String(image.title ?? "").trim();
+  const alt = String(image.alt ?? "").trim();
+  if (title) return title;
+  if (alt && !/^image|^截图|^img/iu.test(alt)) return alt;
+  return "";
+}
+
+function unsafeUrl(value) {
+  const url = String(value ?? "").trim().replace(/[\u0000-\u001f\s]+/gu, "");
+  if (!url || url.startsWith("#") || url.startsWith("/")) return false;
+  if (/^javascript:/iu.test(url)) return true;
+  if (/^https?:/iu.test(url)) return false;
+  if (/^data:image\/(?:png|gif|jpe?g|webp|svg\+xml);/iu.test(url)) return false;
+  if (/^data:font\//iu.test(url)) return false;
+  if (/^data:/iu.test(url)) return true;
+  return false;
+}
+
+function sanitizeNode(node) {
+  if (!node || node.type === "text" || node.type === "comment") return node;
+  if (node.type !== "element") return null;
+  if (DROP_TAGS.has(String(node.tagName).toLowerCase())) return null;
+  const properties = { ...(node.properties ?? {}) };
+  for (const key of Object.keys(properties)) {
+    const value = properties[key];
+    if (/^on/iu.test(key)) {
+      delete properties[key];
+      continue;
+    }
+    if (typeof value === "string" && /^(?:href|src|xlinkHref)$/iu.test(key) && unsafeUrl(value)) {
+      delete properties[key];
+      continue;
+    }
+    if (key === "style" && typeof value === "string" && /javascript:/iu.test(value)) delete properties[key];
+  }
+  node.properties = properties;
+  node.children = (node.children ?? []).map(sanitizeNode).filter(Boolean);
+  return node;
+}
+
+/**
+ * Sanitized SVG markup for the page. Alt or title becomes `<title>` and
+ * `aria-labelledby`. Scene `<text>` nodes stay.
+ * @param {string} svgText
+ * @param {{ alt?: string, title?: string }} [labels]
+ */
+export function inlineSvgDocument(svgText, { alt = "", title = "" } = {}) {
+  const stripped = String(svgText).replace(/<!--\s*garden-excalidraw-source:[^>]*-->/gu, "");
+  const root = fromHtml(stripped, { fragment: true });
+  const svg = root.children.find((node) => node.type === "element" && node.tagName === "svg");
+  if (!svg) throw new Error("导出结果不是 SVG");
+  sanitizeNode(svg);
+  const label = String(title || alt || "").trim();
+  if (label) {
+    const id = `garden-excalidraw-${crypto.createHash("sha256").update(`${label}\0${stripped}`).digest("hex").slice(0, 10)}`;
+    svg.properties.ariaLabelledby = id;
+    svg.children.unshift({
+      type: "element",
+      tagName: "title",
+      properties: { id },
+      children: [{ type: "text", value: label }],
+    });
+  }
+  const classes = Array.isArray(svg.properties.className)
+    ? svg.properties.className
+    : svg.properties.className
+      ? [svg.properties.className]
+      : [];
+  if (!classes.includes("excalidraw")) classes.push("excalidraw");
+  svg.properties.className = classes;
+  const width = Number(svg.properties.width) || 0;
+  const height = Number(svg.properties.height) || 0;
+  if (width > 0) svg.properties.dataNw = String(width);
+  if (width > 0) svg.properties.dataAw = String(width);
+  return { html: toHtml(svg), width, height };
+}
+
+function figureHtml(svgHtml, caption, width) {
+  const side = figureLayout({ naturalWidth: width }).side;
+  const classes = side > 0 ? "fig fig-wide" : "fig";
+  const style = side > 0 ? ` style="--wl:${side}px;--wr:${side}px"` : "";
+  const cap = caption ? `<figcaption>${escapeHtml(caption)}</figcaption>` : "";
+  return `<figure class="${classes}"${style}><div class="fig-card">${svgHtml}</div>${cap}</figure>`;
+}
+
+/**
+ * Replace `.excalidraw` Markdown images with inline SVG HTML.
+ * `readSvg(url)` returns the exported SVG text or throws.
+ * @param {string} markdown
+ * @param {(url: string) => string} readSvg
+ */
+export function embedExcalidrawImages(markdown, readSvg) {
+  const source = String(markdown ?? "");
+  const tree = fromMarkdown(source);
+  const edits = [];
+  visit(tree, "image", (node, _index, parent) => {
+    const url = String(node.url ?? "");
+    if (!isExcalidrawPath(url)) return;
+    const start = node.position?.start?.offset;
+    const end = node.position?.end?.offset;
+    if (start == null || end == null) return;
+    const { html, width } = inlineSvgDocument(readSvg(url), { alt: node.alt, title: node.title });
+    const alone = parent?.type === "paragraph" && meaningfulChildren(parent).length === 1 && meaningfulChildren(parent)[0] === node;
+    const caption = imageCaption(node);
+    edits.push(alone && parent.position?.start?.offset != null && parent.position?.end?.offset != null
+      ? { start: parent.position.start.offset, end: parent.position.end.offset, replacement: figureHtml(html, caption, width) }
+      : { start, end, replacement: html });
+  });
+  edits.sort((left, right) => right.start - left.start);
+  let output = source;
+  for (const edit of edits) output = `${output.slice(0, edit.start)}${edit.replacement}${output.slice(edit.end)}`;
+  return output;
+}
+
+/** Raw `<img src="….excalidraw">` outside code becomes the same inline SVG. */
+export function embedExcalidrawImgTags(markdown, readSvg) {
+  return mapOutsideCode(markdown, (text) => text.replace(/<img\b[^>]*>/giu, (tag) => {
+    const src = /\bsrc\s*=\s*["']([^"']+)["']/iu.exec(tag)?.[1];
+    if (!src || !isExcalidrawPath(src)) return tag;
+    const alt = /\balt\s*=\s*["']([^"']*)["']/iu.exec(tag)?.[1] ?? "";
+    return inlineSvgDocument(readSvg(src), { alt }).html;
+  }));
+}

package/ui/garden/snippets.mjs

@@ -95,13 +95,100 @@ ${dicts.join("\n")}
 `;
 }
 
+/** Facts the author should mention. Insert paths turn these into a bare `garden` brief, not YAML. */
+const GUIDANCE_FACTS = {
+  card: "链接、标题、一句说明",
+  stat: "指标名、数字、单位，需要时写来源",
+  compare: "两三件东西的名字，以及每件一句差别",
+  timeline: "每条的日期、标题和一句说明",
+  chart: "图表类型、横轴、几组已经算好的数字、单位",
+  figure: "图放在哪里，读者点开每一部分时要看到的说明",
+  html: "同名目录里的 HTML 文件，以及这张图要表达的意思",
+  interactive: "读者能拧的参数，以及拧的时候想让他看出什么",
+  file: "文件路径，和一句说明里面有什么",
+  relations: "三到六个要素的名字，以及谁影响谁",
+  list: "每条做法或信号的一句话",
+  choice: "两三个选项，每个有一个醒目的数字和一句说明",
+};
+
+function ideaFence(text) {
+  return `\`\`\`garden\n${text}\n\`\`\``;
+}
+
+/** The block an insert command pastes. Named components stay an uncompiled idea for the garden-ui skill. */
+export function guidanceFence(name) {
+  if (!name) return IDEA.example;
+  const spec = CATALOG[name];
+  return ideaFence(`做成${spec.label}。${spec.when}请写上${GUIDANCE_FACTS[name]}。`);
+}
+
+function svgThumb(inner) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="72" height="48" viewBox="0 0 72 48"><rect width="72" height="48" rx="6" fill="#f6f3ec"/>${inner}</svg>`;
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
+}
+
+const PREVIEWS = {
+  idea: svgThumb(`<path d="M14 16h28M14 24h22M14 32h16" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/><circle cx="54" cy="24" r="8" fill="none" stroke="#c4552a" stroke-width="2"/>`),
+  card: svgThumb(`<rect x="8" y="8" width="56" height="32" rx="4" fill="#fff" stroke="#d9d3c7"/><rect x="12" y="12" width="16" height="16" rx="2" fill="#c4552a"/><path d="M34 16h24M34 22h18M34 30h22" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+  stat: svgThumb(`<text x="10" y="32" fill="#c4552a" font-family="ui-sans-serif,sans-serif" font-size="20" font-weight="700">3.2</text><path d="M46 30h14" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+  compare: svgThumb(`<rect x="8" y="10" width="24" height="28" rx="3" fill="#fff" stroke="#d9d3c7"/><rect x="40" y="10" width="24" height="28" rx="3" fill="#fff" stroke="#c4552a"/><path d="M12 18h16M12 24h12M44 18h16M44 24h12" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+  timeline: svgThumb(`<path d="M20 8v32" stroke="#d9d3c7" stroke-width="2"/><circle cx="20" cy="14" r="3" fill="#c4552a"/><circle cx="20" cy="24" r="3" fill="#2b2926"/><circle cx="20" cy="34" r="3" fill="#2b2926"/><path d="M30 14h24M30 24h18M30 34h20" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+  chart: svgThumb(`<path d="M10 38h52" stroke="#d9d3c7" stroke-width="2"/><rect x="16" y="22" width="8" height="16" fill="#2b2926"/><rect x="32" y="12" width="8" height="26" fill="#c4552a"/><rect x="48" y="18" width="8" height="20" fill="#2b2926"/>`),
+  figure: svgThumb(`<rect x="10" y="10" width="52" height="28" rx="3" fill="#fff" stroke="#2b2926"/><circle cx="24" cy="24" r="4" fill="#c4552a"/><circle cx="48" cy="20" r="4" fill="#2b2926"/>`),
+  html: svgThumb(`<path d="M18 16l-8 8 8 8M54 16l8 8-8 8" fill="none" stroke="#c4552a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M32 14l8 20" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+  interactive: svgThumb(`<path d="M12 24h48" stroke="#d9d3c7" stroke-width="4" stroke-linecap="round"/><circle cx="40" cy="24" r="6" fill="#c4552a"/>`),
+  file: svgThumb(`<path d="M22 8h18l10 10v22a2 2 0 0 1-2 2H22a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2z" fill="#fff" stroke="#2b2926"/><path d="M40 8v10h10" fill="none" stroke="#c4552a" stroke-width="2"/>`),
+  relations: svgThumb(`<circle cx="20" cy="16" r="5" fill="#c4552a"/><circle cx="52" cy="16" r="5" fill="#2b2926"/><circle cx="36" cy="34" r="5" fill="#2b2926"/><path d="M25 18l22 0M23 20l10 10M49 20l-10 10" stroke="#2b2926" stroke-width="1.5"/>`),
+  list: svgThumb(`<circle cx="16" cy="14" r="3" fill="#c4552a"/><circle cx="16" cy="24" r="3" fill="#2b2926"/><circle cx="16" cy="34" r="3" fill="#2b2926"/><path d="M26 14h30M26 24h24M26 34h28" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+  choice: svgThumb(`<rect x="8" y="12" width="24" height="24" rx="4" fill="#fff" stroke="#c4552a"/><rect x="40" y="12" width="24" height="24" rx="4" fill="#fff" stroke="#d9d3c7"/><path d="M14 24h12M46 24h12" stroke="#2b2926" stroke-width="2" stroke-linecap="round"/>`),
+};
+
+function escapeHtml(value) {
+  return String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;");
+}
+
+/** HTML for one slash-menu row: a thumbnail plus the label. */
+export function suggestHtml(item) {
+  return `<span class="garden-suggest"><img class="garden-suggest-thumb" alt="" width="72" height="48" src="${item.preview}"><span class="garden-suggest-label">${escapeHtml(item.label)}</span></span>`;
+}
+
+const SLASH_COMMAND = "garden";
+
+/**
+ * Two steps of the Typora `/` menu. A strict prefix of `garden` (including `/`
+ * alone) is the command hint. `/garden` itself is the component picker.
+ */
+export function slashQuery(textBefore) {
+  const none = { phase: "none", query: "", replaceLength: 0, lead: "" };
+  const component = /(^|[\r\n]|[^\S\r\n])\/garden(?=$|[ \t])(?:[ \t]+(\S*))?$/u.exec(textBefore);
+  if (component) {
+    const boundary = component[1];
+    const start = component.index + boundary.length;
+    return {
+      phase: "components",
+      query: component[2] ?? "",
+      replaceLength: textBefore.length - start,
+      lead: boundary === "" || boundary === "\n" || boundary === "\r" ? "" : "\n",
+    };
+  }
+  const slash = /(^|[\r\n]|[^\S\r\n])\/(\S*)$/u.exec(textBefore);
+  if (!slash) return none;
+  const typed = slash[2];
+  const folded = typed.toLowerCase();
+  if (folded !== SLASH_COMMAND && SLASH_COMMAND.startsWith(folded)) {
+    return { phase: "command", query: typed, replaceLength: 1 + typed.length, lead: "" };
+  }
+  return none;
+}
+
 export function pickerItems() {
   return [
-    { name: "", label: `想法 · ${IDEA.label}`, body: IDEA.example, when: IDEA.when, whenNot: IDEA.whenNot },
+    { name: "", label: `想法 · ${IDEA.label}`, body: guidanceFence(""), preview: PREVIEWS.idea, when: IDEA.when, whenNot: IDEA.whenNot },
     ...GARDEN_NAMES.map((name) => ({
       name,
       label: `${name} · ${CATALOG[name].label}`,
-      body: CATALOG[name].example,
+      body: guidanceFence(name),
+      preview: PREVIEWS[name],
       when: CATALOG[name].when,
       whenNot: CATALOG[name].whenNot,
     })),