remark-docx 0.3.22 → 0.3.23

package/lib/plugins/mermaid/index.cjs

@@ -0,0 +1,76 @@
+'use strict';
+
+var utils = require('../../utils-19qN-XsS.js');
+var mermaid = require('mermaid');
+var unistUtilVisit = require('unist-util-visit');
+var imageSize = require('image-size');
+var plugins_image_index = require('../image/index.cjs');
+var docx = require('docx');
+
+const browserRender = async (value) => {
+    const element = document.createElement("div");
+    element.style.visibility = "hidden";
+    document.body.appendChild(element);
+    try {
+        const result = await mermaid.render("mermaid", value, element);
+        return result.svg;
+    }
+    finally {
+        document.body.removeChild(element);
+    }
+};
+/**
+ * A plugin to render Mermaid inside "code" nodes with "mermaid" language.
+ */
+const mermaidPlugin = () => {
+    const renderSvg = browserRender;
+    return async ({ root, images }) => {
+        const promises = [];
+        unistUtilVisit.visit(root, "code", ({ lang, value }) => {
+            if (lang === "mermaid") {
+                if (!images.has(value)) {
+                    images.set(value, null);
+                    promises.push((async () => {
+                        try {
+                            const svg = await renderSvg(value);
+                            const data = new TextEncoder().encode(svg);
+                            const { width, height } = imageSize.imageSize(data);
+                            const pngBuffer = await plugins_image_index.browserSvgToPng({
+                                buffer: data.buffer,
+                                width,
+                                height,
+                            });
+                            images.set(value, {
+                                type: "png",
+                                width,
+                                height,
+                                data: pngBuffer,
+                            });
+                        }
+                        catch (e) {
+                            utils.warnOnce(String(e));
+                        }
+                    })());
+                }
+            }
+        });
+        await Promise.all(promises);
+        return {
+            code: ({ lang, value }, ctx) => {
+                if (lang !== "mermaid") {
+                    return null;
+                }
+                const image = ctx.images.get(value);
+                if (image == null) {
+                    return null;
+                }
+                return new docx.Paragraph({
+                    children: ctx.render([{ type: "image", url: value }]),
+                });
+            },
+        };
+    };
+};
+
+exports.mermaidPlugin = mermaidPlugin;
+//# sourceMappingURL=index.cjs.map

package/lib/plugins/mermaid/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/plugins/mermaid/index.ts"],"sourcesContent":["import type { RemarkDocxPlugin } from \"../../types\";\nimport { warnOnce } from \"../../utils\";\nimport mermaid from \"mermaid\";\nimport { visit } from \"unist-util-visit\";\nimport { imageSize } from \"image-size\";\nimport { browserSvgToPng } from \"../image\";\nimport { Paragraph } from \"docx\";\n\nconst browserRender = async (value: string): Promise<string> => {\n  const element = document.createElement(\"div\");\n  element.style.visibility = \"hidden\";\n  document.body.appendChild(element);\n  try {\n    const result = await mermaid.render(\"mermaid\", value, element);\n    return result.svg;\n  } finally {\n    document.body.removeChild(element);\n  }\n};\n\n/**\n * A plugin to render Mermaid inside \"code\" nodes with \"mermaid\" language.\n */\nexport const mermaidPlugin = (): RemarkDocxPlugin => {\n  const renderSvg = browserRender;\n\n  return async ({ root, images }) => {\n    const promises: Promise<void>[] = [];\n    visit(root, \"code\", ({ lang, value }) => {\n      if (lang === \"mermaid\") {\n        if (!images.has(value)) {\n          images.set(value, null);\n\n          promises.push(\n            (async () => {\n              try {\n                const svg = await renderSvg(value);\n                const data = new TextEncoder().encode(svg);\n                const { width, height } = imageSize(data);\n                const pngBuffer = await browserSvgToPng({\n                  buffer: data.buffer,\n                  width,\n                  height,\n                });\n\n                images.set(value, {\n                  type: \"png\",\n                  width,\n                  height,\n                  data: pngBuffer,\n                });\n              } catch (e) {\n                warnOnce(String(e));\n              }\n            })(),\n          );\n        }\n      }\n    });\n\n    await Promise.all(promises);\n\n    return {\n      code: ({ lang, value }, ctx) => {\n        if (lang !== \"mermaid\") {\n          return null;\n        }\n        const image = ctx.images.get(value);\n        if (image == null) {\n          return null;\n        }\n\n        return new Paragraph({\n          children: ctx.render([{ type: \"image\", url: value }]),\n        });\n      },\n    };\n  };\n};\n"],"names":["visit","imageSize","browserSvgToPng","warnOnce","Paragraph"],"mappings":";;;;;;;;;AAQA,MAAM,aAAa,GAAG,OAAO,KAAa,KAAqB;IAC7D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,IAAA,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ;AACnC,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AAClC,IAAA,IAAI;AACF,QAAA,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC;QAC9D,OAAO,MAAM,CAAC,GAAG;IACnB;YAAU;AACR,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IACpC;AACF,CAAC;AAED;;AAEG;AACI,MAAM,aAAa,GAAG,MAAuB;IAClD,MAAM,SAAS,GAAG,aAAa;IAE/B,OAAO,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAI;QAChC,MAAM,QAAQ,GAAoB,EAAE;AACpC,QAAAA,oBAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAI;AACtC,YAAA,IAAI,IAAI,KAAK,SAAS,EAAE;gBACtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AACtB,oBAAA,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC;AAEvB,oBAAA,QAAQ,CAAC,IAAI,CACX,CAAC,YAAW;AACV,wBAAA,IAAI;AACF,4BAAA,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC;4BAClC,MAAM,IAAI,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;4BAC1C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAGC,mBAAS,CAAC,IAAI,CAAC;AACzC,4BAAA,MAAM,SAAS,GAAG,MAAMC,mCAAe,CAAC;gCACtC,MAAM,EAAE,IAAI,CAAC,MAAM;gCACnB,KAAK;gCACL,MAAM;AACP,6BAAA,CAAC;AAEF,4BAAA,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;AAChB,gCAAA,IAAI,EAAE,KAAK;gCACX,KAAK;gCACL,MAAM;AACN,gCAAA,IAAI,EAAE,SAAS;AAChB,6BAAA,CAAC;wBACJ;wBAAE,OAAO,CAAC,EAAE;AACV,4BAAAC,cAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;wBACrB;oBACF,CAAC,GAAG,CACL;gBACH;YACF;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE3B,OAAO;YACL,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,GAAG,KAAI;AAC7B,gBAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,oBAAA,OAAO,IAAI;gBACb;gBACA,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACnC,gBAAA,IAAI,KAAK,IAAI,IAAI,EAAE;AACjB,oBAAA,OAAO,IAAI;gBACb;gBAEA,OAAO,IAAIC,cAAS,CAAC;AACnB,oBAAA,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;AACtD,iBAAA,CAAC;YACJ,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}

package/lib/plugins/mermaid/index.d.ts

@@ -0,0 +1,5 @@
+import type { RemarkDocxPlugin } from "../../types";
+/**
+ * A plugin to render Mermaid inside "code" nodes with "mermaid" language.
+ */
+export declare const mermaidPlugin: () => RemarkDocxPlugin;

package/lib/plugins/mermaid/index.js

@@ -0,0 +1,74 @@
+import { w as warnOnce } from '../../utils-BWBt3EKb.js';
+import mermaid from 'mermaid';
+import { visit } from 'unist-util-visit';
+import { imageSize } from 'image-size';
+import { browserSvgToPng } from '../image/index.js';
+import { Paragraph } from 'docx';
+
+const browserRender = async (value) => {
+    const element = document.createElement("div");
+    element.style.visibility = "hidden";
+    document.body.appendChild(element);
+    try {
+        const result = await mermaid.render("mermaid", value, element);
+        return result.svg;
+    }
+    finally {
+        document.body.removeChild(element);
+    }
+};
+/**
+ * A plugin to render Mermaid inside "code" nodes with "mermaid" language.
+ */
+const mermaidPlugin = () => {
+    const renderSvg = browserRender;
+    return async ({ root, images }) => {
+        const promises = [];
+        visit(root, "code", ({ lang, value }) => {
+            if (lang === "mermaid") {
+                if (!images.has(value)) {
+                    images.set(value, null);
+                    promises.push((async () => {
+                        try {
+                            const svg = await renderSvg(value);
+                            const data = new TextEncoder().encode(svg);
+                            const { width, height } = imageSize(data);
+                            const pngBuffer = await browserSvgToPng({
+                                buffer: data.buffer,
+                                width,
+                                height,
+                            });
+                            images.set(value, {
+                                type: "png",
+                                width,
+                                height,
+                                data: pngBuffer,
+                            });
+                        }
+                        catch (e) {
+                            warnOnce(String(e));
+                        }
+                    })());
+                }
+            }
+        });
+        await Promise.all(promises);
+        return {
+            code: ({ lang, value }, ctx) => {
+                if (lang !== "mermaid") {
+                    return null;
+                }
+                const image = ctx.images.get(value);
+                if (image == null) {
+                    return null;
+                }
+                return new Paragraph({
+                    children: ctx.render([{ type: "image", url: value }]),
+                });
+            },
+        };
+    };
+};
+
+export { mermaidPlugin };
+//# sourceMappingURL=index.js.map

package/lib/plugins/mermaid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/plugins/mermaid/index.ts"],"sourcesContent":["import type { RemarkDocxPlugin } from \"../../types\";\nimport { warnOnce } from \"../../utils\";\nimport mermaid from \"mermaid\";\nimport { visit } from \"unist-util-visit\";\nimport { imageSize } from \"image-size\";\nimport { browserSvgToPng } from \"../image\";\nimport { Paragraph } from \"docx\";\n\nconst browserRender = async (value: string): Promise<string> => {\n  const element = document.createElement(\"div\");\n  element.style.visibility = \"hidden\";\n  document.body.appendChild(element);\n  try {\n    const result = await mermaid.render(\"mermaid\", value, element);\n    return result.svg;\n  } finally {\n    document.body.removeChild(element);\n  }\n};\n\n/**\n * A plugin to render Mermaid inside \"code\" nodes with \"mermaid\" language.\n */\nexport const mermaidPlugin = (): RemarkDocxPlugin => {\n  const renderSvg = browserRender;\n\n  return async ({ root, images }) => {\n    const promises: Promise<void>[] = [];\n    visit(root, \"code\", ({ lang, value }) => {\n      if (lang === \"mermaid\") {\n        if (!images.has(value)) {\n          images.set(value, null);\n\n          promises.push(\n            (async () => {\n              try {\n                const svg = await renderSvg(value);\n                const data = new TextEncoder().encode(svg);\n                const { width, height } = imageSize(data);\n                const pngBuffer = await browserSvgToPng({\n                  buffer: data.buffer,\n                  width,\n                  height,\n                });\n\n                images.set(value, {\n                  type: \"png\",\n                  width,\n                  height,\n                  data: pngBuffer,\n                });\n              } catch (e) {\n                warnOnce(String(e));\n              }\n            })(),\n          );\n        }\n      }\n    });\n\n    await Promise.all(promises);\n\n    return {\n      code: ({ lang, value }, ctx) => {\n        if (lang !== \"mermaid\") {\n          return null;\n        }\n        const image = ctx.images.get(value);\n        if (image == null) {\n          return null;\n        }\n\n        return new Paragraph({\n          children: ctx.render([{ type: \"image\", url: value }]),\n        });\n      },\n    };\n  };\n};\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,aAAa,GAAG,OAAO,KAAa,KAAqB;IAC7D,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC;AAC7C,IAAA,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ;AACnC,IAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AAClC,IAAA,IAAI;AACF,QAAA,MAAM,MAAM,GAAG,MAAM,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,KAAK,EAAE,OAAO,CAAC;QAC9D,OAAO,MAAM,CAAC,GAAG;IACnB;YAAU;AACR,QAAA,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;IACpC;AACF,CAAC;AAED;;AAEG;AACI,MAAM,aAAa,GAAG,MAAuB;IAClD,MAAM,SAAS,GAAG,aAAa;IAE/B,OAAO,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAI;QAChC,MAAM,QAAQ,GAAoB,EAAE;AACpC,QAAA,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAI;AACtC,YAAA,IAAI,IAAI,KAAK,SAAS,EAAE;gBACtB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AACtB,oBAAA,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC;AAEvB,oBAAA,QAAQ,CAAC,IAAI,CACX,CAAC,YAAW;AACV,wBAAA,IAAI;AACF,4BAAA,MAAM,GAAG,GAAG,MAAM,SAAS,CAAC,KAAK,CAAC;4BAClC,MAAM,IAAI,GAAG,IAAI,WAAW,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC;4BAC1C,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC,IAAI,CAAC;AACzC,4BAAA,MAAM,SAAS,GAAG,MAAM,eAAe,CAAC;gCACtC,MAAM,EAAE,IAAI,CAAC,MAAM;gCACnB,KAAK;gCACL,MAAM;AACP,6BAAA,CAAC;AAEF,4BAAA,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE;AAChB,gCAAA,IAAI,EAAE,KAAK;gCACX,KAAK;gCACL,MAAM;AACN,gCAAA,IAAI,EAAE,SAAS;AAChB,6BAAA,CAAC;wBACJ;wBAAE,OAAO,CAAC,EAAE;AACV,4BAAA,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;wBACrB;oBACF,CAAC,GAAG,CACL;gBACH;YACF;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC;QAE3B,OAAO;YACL,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,GAAG,KAAI;AAC7B,gBAAA,IAAI,IAAI,KAAK,SAAS,EAAE;AACtB,oBAAA,OAAO,IAAI;gBACb;gBACA,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC;AACnC,gBAAA,IAAI,KAAK,IAAI,IAAI,EAAE;AACjB,oBAAA,OAAO,IAAI;gBACb;gBAEA,OAAO,IAAI,SAAS,CAAC;AACnB,oBAAA,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC;AACtD,iBAAA,CAAC;YACJ,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}

package/lib/types.d.ts

@@ -7,6 +7,26 @@ type KnownNodeType = mdast.RootContent["type"];
 type MdastNode<T extends string> = T extends KnownNodeType ? Extract<mdast.RootContent, {
     type: T;
 }> : unknown;
+declare const supportedTypes: readonly ["png", "jpg", "gif", "bmp", "svg"];
+type SupportedImageType = (typeof supportedTypes)[number];
+export declare const isSupportedType: (type: string | undefined) => type is SupportedImageType;
+export type DocxImageData = Readonly<{
+    data: ArrayBuffer;
+    width: number;
+    height: number;
+} & ({
+    type: Exclude<SupportedImageType, "svg">;
+} | {
+    type: Extract<SupportedImageType, "svg">;
+    fallback: ArrayBuffer;
+})>;
+type StyleContext = Readonly<{
+    bold?: boolean;
+    italic?: boolean;
+    strike?: boolean;
+    inlineCode?: boolean;
+    link?: boolean;
+}>;
 export type ListContext = Readonly<{
     level: number;
     meta: Readonly<{
@@ -31,6 +51,16 @@ export type FootnoteRegistry = {
 export type ThematicBreakType = "page" | "section" | "line";
 export type Context = Readonly<{
     render: (node: readonly mdast.RootContent[], ctx?: Context) => DocxContent[];
+    width: number;
+    style: StyleContext;
+    quote?: number;
+    list?: ListContext;
+    thematicBreak: ThematicBreakType;
+    rtl?: boolean;
+    definition: GetDefinition;
+    images: ReadonlyMap<string, DocxImageData | null>;
+    footnote: FootnoteRegistry;
+    orderedId: () => string;
 }>;
 export type NodeBuilder<T extends string> = (node: MdastNode<T>, ctx: Context) => DocxContent | DocxContent[] | null;
 export type NodeBuilders = {
@@ -38,6 +68,7 @@ export type NodeBuilders = {
 };
 export type RemarkDocxPlugin = (ctx: Readonly<{
     root: mdast.Root;
+    images: Map<string, DocxImageData | null>;
     definition: GetDefinition;
 }>) => Promise<NodeBuilders>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-docx",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "description": "remark plugin to compile markdown to docx (Microsoft Word, Office Open XML).",
   "main": "lib/index.cjs",
   "module": "lib/index.js",
@@ -42,6 +42,7 @@
     "image-size": "^2.0.2",
     "mathml2omml": "^0.5.0",
     "mdast-util-definitions": "^6.0.0",
+    "mermaid": "^11.12.2",
     "shiki": "^3.19.0",
     "unist-util-visit": "^5.0.0"
   },
@@ -54,7 +55,7 @@
     "@types/file-saver": "^2.0.7",
     "@types/lodash.debounce": "^4.0.9",
     "@types/mdast": "^4.0.3",
-    "@types/node": "^24.0.10",
+    "@types/node": "^24.10.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@types/unist": "^3.0.0",
@@ -98,7 +99,8 @@
     "pandoc",
     "highlight",
     "latex",
-    "math"
+    "math",
+    "mermaid"
   ],
   "author": "inokawa <stratoooo-taster@yahoo.co.jp> (https://github.com/inokawa/)",
   "license": "MIT",