@wenyan-md/core 3.0.8 → 3.0.9

package/dist/core.js

@@ -100,6 +100,12 @@ async function loadCssBySource(source) {
       throw new Error("Unknown source type");
   }
 }
+function createSvgDataUrl(svg) {
+  if (!svg.hasAttribute("xmlns")) {
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  }
+  return `data:image/svg+xml,${encodeURIComponent(svg.outerHTML)}`;
+}
 const __vite_glob_0_0$1 = "pre{background:#282c34}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}";
 const __vite_glob_0_1$1 = "pre{background:#fafafa}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#383a42;background:#fafafa}.hljs-comment,.hljs-quote{color:#a0a1a7;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#a626a4}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e45649}.hljs-literal{color:#0184bb}.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#50a14f}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#986801}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#4078f2}.hljs-built_in,.hljs-class .hljs-title,.hljs-title.class_{color:#c18401}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}";
 const __vite_glob_0_2$1 = "pre{background:#282936}pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#e9e9f4;background:#282936}.hljs ::selection,.hljs::selection{background-color:#4d4f68;color:#e9e9f4}.hljs-comment{color:#626483}.hljs-tag{color:#62d6e8}.hljs-operator,.hljs-punctuation,.hljs-subst{color:#e9e9f4}.hljs-operator{opacity:.7}.hljs-bullet,.hljs-deletion,.hljs-name,.hljs-selector-tag,.hljs-template-variable,.hljs-variable{color:#ea51b2}.hljs-attr,.hljs-link,.hljs-literal,.hljs-number,.hljs-symbol,.hljs-variable.constant_{color:#b45bcf}.hljs-class .hljs-title,.hljs-title,.hljs-title.class_{color:#00f769}.hljs-strong{font-weight:700;color:#00f769}.hljs-addition,.hljs-code,.hljs-string,.hljs-title.class_.inherited__{color:#ebff87}.hljs-built_in,.hljs-doctag,.hljs-keyword.hljs-atrule,.hljs-quote,.hljs-regexp{color:#a1efe4}.hljs-attribute,.hljs-function .hljs-title,.hljs-section,.hljs-title.function_,.ruby .hljs-property{color:#62d6e8}.diff .hljs-meta,.hljs-keyword,.hljs-template-tag,.hljs-type{color:#b45bcf}.hljs-emphasis{color:#b45bcf;font-style:italic}.hljs-meta,.hljs-meta .hljs-keyword,.hljs-meta .hljs-string{color:#00f769}.hljs-meta .hljs-keyword,.hljs-meta-keyword{font-weight:700}\n";
@@ -196,7 +202,7 @@ async function handleFrontMatter(markdown) {
   const { attributes, body } = fm(markdown);
   const result = { content: body || "" };
   let head = "";
-  const { title, description, cover, author, source_url, need_open_comment, only_fans_can_comment, image_list } = attributes;
+  const { title, description, cover, author, source_url, need_open_comment, only_fans_can_comment, image_list, type } = attributes;
   if (title) {
     result.title = title;
   }
@@ -207,9 +213,6 @@ async function handleFrontMatter(markdown) {
   if (cover) {
     result.cover = cover;
   }
-  if (head) {
-    result.content = head + result.content;
-  }
   if (author) {
     result.author = author;
   }
@@ -225,6 +228,12 @@ async function handleFrontMatter(markdown) {
   if (image_list) {
     result.image_list = image_list;
   }
+  if (type) {
+    result.type = type;
+  }
+  if (head) {
+    result.content = head + result.content;
+  }
   return result;
 }
 const parseOptions = {
@@ -467,6 +476,44 @@ function createMarkedClient() {
               };
             }
           },
+          // Obsidian WikiLinks 图片语法扩展 ![[filename]] / ![[filename|alt]] / ![[filename|width]] / ![[filename|widthxheight]]
+          {
+            name: "wikiImage",
+            level: "inline",
+            start(src) {
+              return src.match(/!\[\[/)?.index;
+            },
+            tokenizer(src) {
+              const rule = /^!\[\[([^\]|]+?)(?:\|([^\]]*))?\]\]/;
+              const match = rule.exec(src);
+              if (!match) return;
+              const href = match[1].trim();
+              const modifier = match[2]?.trim() ?? "";
+              const dimOnly = /^(\d+)(?:x(\d+))?$/.exec(modifier);
+              const alt = dimOnly ? "" : modifier;
+              const width = dimOnly ? dimOnly[1] : "";
+              const height = dimOnly ? dimOnly[2] ?? "" : "";
+              return {
+                type: "wikiImage",
+                raw: match[0],
+                href,
+                alt,
+                width,
+                height,
+                tokens: []
+              };
+            },
+            renderer(token) {
+              const href = normalizeHref(token.href);
+              const altAttr = token.alt ? ` alt="${token.alt}"` : "";
+              const titleAttr = token.alt ? ` title="${token.alt}"` : "";
+              const styleParts = [];
+              if (token.width) styleParts.push(`width:${token.width}px`);
+              if (token.height) styleParts.push(`height:${token.height}px`);
+              const styleAttr = styleParts.length ? ` style="${styleParts.join("; ")}"` : "";
+              return `<img src="${href}"${altAttr}${titleAttr}${styleAttr}>`;
+            }
+          },
           // 自定义图片语法扩展 ![](){...}
           {
             name: "attributeImage",
@@ -646,24 +693,7 @@ function containsMermaidCodeBlock(html) {
   return html.includes("language-mermaid");
 }
 const SVG_NAMESPACE = "http://www.w3.org/2000/svg";
-function wechatPostRender(element) {
-  const mathElements = element.querySelectorAll("mjx-container");
-  mathElements.forEach((mathContainer) => {
-    const svg = mathContainer.querySelector("svg");
-    if (!svg) return;
-    svg.style.width = svg.getAttribute("width") || "";
-    svg.style.height = svg.getAttribute("height") || "";
-    svg.removeAttribute("width");
-    svg.removeAttribute("height");
-    const parent = mathContainer.parentElement;
-    if (parent) {
-      mathContainer.remove();
-      parent.appendChild(svg);
-      if (parent.classList.contains("block-equation")) {
-        parent.setAttribute("style", "text-align: center; margin-bottom: 1rem;");
-      }
-    }
-  });
+function postRenderMermaidDiagrams(element) {
   const mermaidSvgs = element.querySelectorAll('[data-wenyan-diagram="mermaid"] svg');
   mermaidSvgs.forEach((svg) => {
     svg.style.maxWidth = "100%";
@@ -671,21 +701,6 @@ function wechatPostRender(element) {
     inlineMermaidSvgStyles(svg);
     flattenMermaidMarkers(svg);
   });
-  const codeElements = element.querySelectorAll("pre code");
-  codeElements.forEach((codeEl) => {
-    codeEl.innerHTML = codeEl.innerHTML.replace(/\n/g, "<br>").replace(/(>[^<]+)|(^[^<]+)/g, (str) => str.replace(/\s/g, "&nbsp;"));
-  });
-  const listElements = element.querySelectorAll("li");
-  listElements.forEach((li) => {
-    const doc = element.ownerDocument;
-    const section = doc.createElement("section");
-    while (li.firstChild) {
-      section.appendChild(li.firstChild);
-    }
-    li.appendChild(section);
-  });
-  element.style.color = "rgb(0, 0, 0)";
-  element.style.caretColor = "rgb(0, 0, 0)";
 }
 function inlineMermaidSvgStyles(svg) {
   const styleElements = Array.from(svg.querySelectorAll("style"));
@@ -949,6 +964,41 @@ function isInlineStyleTarget(node) {
   }
   return node instanceof defaultView.SVGElement || node instanceof defaultView.HTMLElement;
 }
+function wechatPostRender(element) {
+  const mathElements = element.querySelectorAll("mjx-container");
+  mathElements.forEach((mathContainer) => {
+    const svg = mathContainer.querySelector("svg");
+    if (!svg) return;
+    svg.style.width = svg.getAttribute("width") || "";
+    svg.style.height = svg.getAttribute("height") || "";
+    svg.removeAttribute("width");
+    svg.removeAttribute("height");
+    const parent = mathContainer.parentElement;
+    if (parent) {
+      mathContainer.remove();
+      parent.appendChild(svg);
+      if (parent.classList.contains("block-equation")) {
+        parent.setAttribute("style", "text-align: center; margin-bottom: 1rem;");
+      }
+    }
+  });
+  postRenderMermaidDiagrams(element);
+  const codeElements = element.querySelectorAll("pre code");
+  codeElements.forEach((codeEl) => {
+    codeEl.innerHTML = codeEl.innerHTML.replace(/\n/g, "<br>").replace(/(>[^<]+)|(^[^<]+)/g, (str) => str.replace(/\s/g, "&nbsp;"));
+  });
+  const listElements = element.querySelectorAll("li");
+  listElements.forEach((li) => {
+    const doc = element.ownerDocument;
+    const section = doc.createElement("section");
+    while (li.firstChild) {
+      section.appendChild(li.firstChild);
+    }
+    li.appendChild(section);
+  });
+  element.style.color = "rgb(0, 0, 0)";
+  element.style.caretColor = "rgb(0, 0, 0)";
+}
 const themeModifier = createCssModifier({});
 function renderTheme(wenyanElement, themeCss) {
   const modifiedCss = themeModifier(themeCss);
@@ -1492,6 +1542,8 @@ function getContentForZhihu(wenyanElement) {
   return wenyanElement.outerHTML;
 }
 function getContentForToutiao(wenyanElement) {
+  postRenderMermaidDiagrams(wenyanElement);
+  processMermaid(wenyanElement);
   const containers = wenyanElement.querySelectorAll("mjx-container");
   const doc = wenyanElement.ownerDocument;
   containers.forEach((container) => {
@@ -1500,11 +1552,7 @@ function getContentForToutiao(wenyanElement) {
       return;
     }
     const img = doc.createElement("img");
-    if (!svg.hasAttribute("xmlns")) {
-      svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-    }
-    const encodedSVG = encodeURIComponent(svg.outerHTML);
-    img.src = `data:image/svg+xml,${encodedSVG}`;
+    img.src = createSvgDataUrl(svg);
     const style = svg.getAttribute("style");
     if (style) {
       img.setAttribute("style", style);
@@ -1519,10 +1567,67 @@ function getContentForToutiao(wenyanElement) {
   });
   return wenyanElement.outerHTML;
 }
+function processMermaid(root) {
+  const figures = root.querySelectorAll('[data-wenyan-diagram="mermaid"]');
+  const doc = root.ownerDocument;
+  figures.forEach((figure) => {
+    const svg = figure.querySelector("svg");
+    if (!svg) {
+      return;
+    }
+    let svgString = svg.outerHTML;
+    svgString = fixMermaidSvgForServerRender(svgString);
+    const img = doc.createElement("img");
+    const encodedData = btoa(unescape(encodeURIComponent(svgString)));
+    img.src = `data:image/svg+xml;base64,${encodedData}`;
+    const style = svg.getAttribute("style");
+    if (style) {
+      img.setAttribute("style", style);
+    }
+    const ariaLabel = figure.getAttribute("aria-label") || figure.getAttribute("title") || svg.getAttribute("aria-label") || svg.getAttribute("title");
+    if (ariaLabel) {
+      img.alt = ariaLabel;
+    }
+    figure.replaceWith(img);
+  });
+}
+function fixMermaidSvgForServerRender(svgString) {
+  const baseFontSize = 16;
+  let fixedSvg = svgString;
+  fixedSvg = fixedSvg.replace(/([xy]|dx|dy)="([-0-9.]+)em"/g, (_, attr, val) => {
+    const pxValue = parseFloat(val) * baseFontSize;
+    return `${attr}="${pxValue}px"`;
+  });
+  let previousSvg;
+  do {
+    previousSvg = fixedSvg;
+    fixedSvg = fixedSvg.replace(/<tspan(?![^>]*\b[xy]=)[^>]*>([\s\S]*?)<\/tspan>/g, "$1");
+  } while (fixedSvg !== previousSvg);
+  fixedSvg = fixedSvg.replace(/<tspan([^>]+)>/g, (match, attrs) => {
+    const yMatch = attrs.match(/y="([-0-9.]+)(?:px)?"/);
+    const dyMatch = attrs.match(/dy="([-0-9.]+)(?:px)?"/);
+    if (yMatch && dyMatch) {
+      const yVal = parseFloat(yMatch[1]);
+      const dyVal = parseFloat(dyMatch[1]);
+      const finalY = yVal + dyVal;
+      let newAttrs = attrs.replace(/y="[-0-9.]+(?:px)?"\s*/, "").replace(/dy="[-0-9.]+(?:px)?"\s*/, "");
+      return `<tspan ${newAttrs.trim()} y="${finalY}">`;
+    }
+    return match;
+  });
+  fixedSvg = fixedSvg.replace(/class="([^"]*?)text-inner-tspan([^"]*?)"/g, 'class="$1$2"');
+  fixedSvg = fixedSvg.replace(/\sclass=""/g, "");
+  return fixedSvg;
+}
+const DEFAULT_MERMAID_FONT_FAMILY = "'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', Arial, sans-serif";
 const DEFAULT_MERMAID_CONFIG = {
+  fontFamily: DEFAULT_MERMAID_FONT_FAMILY,
   htmlLabels: false,
   flowchart: {
     htmlLabels: false
+  },
+  themeVariables: {
+    fontFamily: DEFAULT_MERMAID_FONT_FAMILY
   }
 };
 async function replaceMermaidCodeBlocks(root, renderDiagram) {
@@ -1587,6 +1692,7 @@ function createMermaidRenderError(error) {
 }
 function createMermaidConfig(overrides = {}) {
   const flowchartOverrides = getRecord(overrides.flowchart);
+  const themeVariablesOverrides = getRecord(overrides.themeVariables);
   return {
     ...DEFAULT_MERMAID_CONFIG,
     startOnLoad: false,
@@ -1595,6 +1701,10 @@ function createMermaidConfig(overrides = {}) {
     flowchart: {
       ...getRecord(DEFAULT_MERMAID_CONFIG.flowchart),
       ...flowchartOverrides
+    },
+    themeVariables: {
+      ...getRecord(DEFAULT_MERMAID_CONFIG.themeVariables),
+      ...themeVariablesOverrides
     }
   };
 }
@@ -1625,12 +1735,15 @@ async function createWenyanCore(options = {}) {
     async handleFrontMatter(markdown) {
       return await handleFrontMatter(markdown);
     },
-    async renderMarkdown(markdown) {
+    async renderMarkdown(markdown, disableMermaid = false) {
       let html = await markedClient.parse(markdown);
       if (isConvertMathJax) {
         html = mathJaxParser.parser(html);
       }
-      return await mermaidParser.parser(html);
+      if (!disableMermaid) {
+        html = await mermaidParser.parser(html);
+      }
+      return html;
     },
     async applyStylesWithTheme(wenyanElement, options2 = {}) {
       const {

package/dist/types/core/index.d.ts

@@ -15,7 +15,7 @@ export interface ApplyStylesOptions {
 }
 export declare function createWenyanCore(options?: WenyanOptions): Promise<{
     handleFrontMatter(markdown: string): Promise<FrontMatterResult>;
-    renderMarkdown(markdown: string): Promise<string>;
+    renderMarkdown(markdown: string, disableMermaid?: boolean): Promise<string>;
     applyStylesWithTheme(wenyanElement: HTMLElement, options?: ApplyStylesOptions): Promise<string>;
     applyStylesWithResolvedCss(wenyanElement: HTMLElement, options: {
         themeCss: string;

package/dist/types/core/parser/frontMatterParser.d.ts

@@ -8,5 +8,6 @@ export interface FrontMatterResult {
     need_open_comment?: boolean;
     only_fans_can_comment?: boolean;
     image_list?: string[];
+    type?: string;
 }
 export declare function handleFrontMatter(markdown: string): Promise<FrontMatterResult>;

package/dist/types/core/renderer/mermaidPostRender.d.ts

@@ -0,0 +1 @@
+export declare function postRenderMermaidDiagrams(element: HTMLElement): void;

package/dist/types/core/utils.d.ts

@@ -22,3 +22,4 @@ export type CssSource = {
     url: string;
 };
 export declare function loadCssBySource(source: CssSource): Promise<string>;
+export declare function createSvgDataUrl(svg: SVGSVGElement): string;

package/dist/wrapper.js

@@ -731,14 +731,14 @@ function ensureSvgPolyfills(window) {
       value() {
         const tagName = this.tagName.toLowerCase();
         if (tagName === "text" || tagName === "tspan") {
-          const text = this.textContent ?? "";
-          const width = Math.max(text.length * 8, 16);
+          const width = getEstimatedTextWidth(this);
+          const height = getEstimatedFontSize(this);
           return {
             x: 0,
-            y: -16,
+            y: -height,
             width,
-            height: 16,
-            top: -16,
+            height,
+            top: -height,
             right: width,
             bottom: 0,
             left: 0,
@@ -809,12 +809,61 @@ function ensureSvgPolyfills(window) {
       configurable: true,
       writable: true,
       value() {
-        const text = this.textContent ?? "";
-        return Math.max(text.length * 8, 16);
+        return getEstimatedTextWidth(this);
       }
     });
   }
 }
+function getEstimatedTextWidth(element) {
+  const text = element.textContent ?? "";
+  const fontSize = getEstimatedFontSize(element);
+  const visualLength = Array.from(text).reduce((length, character) => {
+    return length + (isWideCharacter(character) ? 2 : 1);
+  }, 0);
+  return Math.max(visualLength * (fontSize / 2), fontSize);
+}
+function getEstimatedFontSize(element) {
+  const inlineFontSize = element.getAttribute("font-size");
+  if (inlineFontSize) {
+    const parsed = Number.parseFloat(inlineFontSize);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  const computedFontSize = element.ownerDocument.defaultView?.getComputedStyle(element).fontSize;
+  if (computedFontSize) {
+    const parsed = Number.parseFloat(computedFontSize);
+    if (Number.isFinite(parsed)) {
+      return parsed;
+    }
+  }
+  return 16;
+}
+function isWideCharacter(character) {
+  return character.codePointAt(0) > 255;
+}
+async function extractAndCleanImages(body) {
+  const html = await wenyanCoreInstance.renderMarkdown(body);
+  const dom = new JSDOM(`<body><section id="wenyan">${html}</section></body>`);
+  const document = dom.window.document;
+  const wenyan = document.getElementById("wenyan");
+  const images = Array.from(wenyan.querySelectorAll("img"));
+  const imagePaths = images.map((img) => img.getAttribute("src")).filter((src) => !!src).map((src) => {
+    try {
+      return decodeURI(src);
+    } catch {
+      return src;
+    }
+  });
+  for (const img of images) {
+    const parent = img.parentElement;
+    img.remove();
+    if (parent && parent.tagName === "P" && parent.textContent?.trim() === "") {
+      parent.remove();
+    }
+  }
+  return { imagePaths, cleanedHtml: wenyan.outerHTML };
+}
 const nodeMermaidRenderer = createNodeMermaidRenderer();
 const wenyanCoreInstance = await createWenyanCore({
   mermaid: {
@@ -859,6 +908,13 @@ async function renderStyledContent(content, options = {}, coreInstance = wenyanC
 async function prepareRenderContext(inputContent, options, getInputContent) {
   const { content, absoluteDirPath } = await getInputContent(inputContent, options.file);
   const preHandlerContent = await wenyanCoreInstance.handleFrontMatter(content);
+  if (preHandlerContent.type === "image" && !preHandlerContent.image_list) {
+    const { imagePaths, cleanedHtml } = await extractAndCleanImages(preHandlerContent.content);
+    if (imagePaths.length > 0) {
+      preHandlerContent.image_list = imagePaths;
+      preHandlerContent.content = cleanedHtml;
+    }
+  }
   if (preHandlerContent.image_list && preHandlerContent.image_list.length > 0) {
     return { gzhContent: preHandlerContent, absoluteDirPath };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wenyan-md/core",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Core library for Wenyan markdown rendering & publishing",
   "author": "Lei <caol64@gmail.com> (https://github.com/caol64)",
   "license": "Apache-2.0",