remark-docx 0.3.6 → 0.3.7

package/README.md

@@ -29,8 +29,8 @@ Currently, some of the default styles may not be nice. If you have feature reque
 - [x] image / imageReference ([remark-docx/plugins/image](#image) is required)
 - [x] footnote / footnoteReference / footnoteDefinition
 - [x] html ([remark-docx/plugins/html](#html) is required)
-- [x] code ([remark-docx/plugins/code](#code-block) is required)
-- [x] math / inlineMath ([remark-math](https://github.com/remarkjs/remark-math) and [remark-docx/plugins/math](#latex) are required)
+- [x] code ([remark-docx/plugins/code](#code) is required)
+- [x] math / inlineMath ([remark-math](https://github.com/remarkjs/remark-math) and [remark-docx/plugins/math](#math) are required)
 
 ## Demo
 
@@ -86,6 +86,8 @@ const text = "# hello world";
 
 ### Image
 
+Fetch image data and embed into docx.
+
 ```javascript
 import { unified } from "unified";
 import markdown from "remark-parse";
@@ -97,9 +99,9 @@ const processor = unified()
   .use(docx, { plugins: [imagePlugin()] });
 ```
 
-### Code block
+### Code
 
-#### Syntax highlighting with [shiki](https://github.com/shikijs/shiki)
+Syntax highlighting with [shiki](https://github.com/shikijs/shiki).
 
 ```javascript
 import { unified } from "unified";
@@ -114,6 +116,8 @@ const processor = unified()
 
 ### HTML
 
+Transform HTML to markdown.
+
 ```javascript
 import { unified } from "unified";
 import markdown from "remark-parse";
@@ -125,7 +129,9 @@ const processor = unified()
   .use(docx, { plugins: [htmlPlugin()] });
 ```
 
-### LaTeX
+### Math
+
+Render LaTeX with [unified-latex](https://github.com/siefkenj/unified-latex).
 
 ```javascript
 import { unified } from "unified";

package/lib/plugins/code/index.cjs

@@ -7,7 +7,7 @@ var unistUtilVisit = require('unist-util-visit');
 /**
  * A plugin to render "code" nodes, with syntax highlighting powered by shiki.
  */
-const shikiPlugin = ({ theme }) => {
+const shikiPlugin = ({ theme, }) => {
     let highlighter;
     const langs = new Set();
     return async ({ root }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/plugins/code/index.ts"],"sourcesContent":["import { Paragraph, TextRun } from \"docx\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport {\n  createHighlighter,\n  type BundledLanguage,\n  type BundledTheme,\n} from \"shiki\";\nimport { visit } from \"unist-util-visit\";\nimport type { FontStyle } from \"shiki/textmate\";\n\ninterface ShikiPlugin {\n  /**\n   * https://shiki.style/themes\n   */\n  theme: BundledTheme;\n}\n\n/**\n * A plugin to render \"code\" nodes, with syntax highlighting powered by shiki.\n */\nexport const shikiPlugin = ({ theme }: ShikiPlugin): RemarkDocxPlugin => {\n  let highlighter: Awaited<ReturnType<typeof createHighlighter>> | undefined;\n  const langs = new Set<string>();\n\n  return async ({ root }) => {\n    const newLangs: string[] = [];\n\n    visit(root, \"code\", ({ lang }) => {\n      if (lang) {\n        if (!langs.has(lang)) {\n          langs.add(lang);\n          newLangs.push(lang);\n        }\n      }\n    });\n\n    if (!highlighter) {\n      highlighter = await createHighlighter({\n        themes: [theme],\n        langs: [...langs],\n      });\n    } else {\n      await Promise.all(\n        newLangs.map((l) => highlighter!.loadLanguage(l as BundledLanguage)),\n      );\n    }\n\n    return {\n      code: ({ value, lang }) => {\n        if (!lang) {\n          return null;\n        }\n        const res = highlighter!.codeToTokens(value, {\n          lang: lang as BundledLanguage,\n          theme,\n        });\n\n        return res.tokens.map((r) => {\n          return new Paragraph({\n            shading: {\n              type: \"clear\",\n              color: \"auto\",\n              fill: res.bg,\n            },\n            children: r.map(({ content, bgColor, color, fontStyle }) => {\n              return new TextRun({\n                text: content,\n                color: color ?? res.fg,\n                shading: bgColor\n                  ? {\n                      type: \"clear\",\n                      color: \"auto\",\n                      fill: bgColor,\n                    }\n                  : undefined,\n                bold: fontStyle === (2 satisfies FontStyle.Bold),\n                italics: fontStyle === (1 satisfies FontStyle.Italic),\n                underline:\n                  fontStyle === (4 satisfies FontStyle.Underline)\n                    ? { type: \"single\", color: res.fg }\n                    : undefined,\n                strike: fontStyle === (8 satisfies FontStyle.Strikethrough),\n              });\n            }),\n          });\n        });\n      },\n    };\n  };\n};\n"],"names":["visit","createHighlighter","Paragraph","TextRun"],"mappings":";;;;;;AAiBA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,KAAK,EAAe,KAAsB;AACtE,IAAA,IAAI,WAAsE;AAC1E,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU;AAE/B,IAAA,OAAO,OAAO,EAAE,IAAI,EAAE,KAAI;QACxB,MAAM,QAAQ,GAAa,EAAE;QAE7BA,oBAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAI;YAC/B,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACpB,oBAAA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACf,oBAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBACrB;YACF;AACF,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,WAAW,EAAE;YAChB,WAAW,GAAG,MAAMC,uBAAiB,CAAC;gBACpC,MAAM,EAAE,CAAC,KAAK,CAAC;AACf,gBAAA,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC;AAClB,aAAA,CAAC;QACJ;aAAO;YACL,MAAM,OAAO,CAAC,GAAG,CACf,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,WAAY,CAAC,YAAY,CAAC,CAAoB,CAAC,CAAC,CACrE;QACH;QAEA,OAAO;YACL,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAI;gBACxB,IAAI,CAAC,IAAI,EAAE;AACT,oBAAA,OAAO,IAAI;gBACb;AACA,gBAAA,MAAM,GAAG,GAAG,WAAY,CAAC,YAAY,CAAC,KAAK,EAAE;AAC3C,oBAAA,IAAI,EAAE,IAAuB;oBAC7B,KAAK;AACN,iBAAA,CAAC;gBAEF,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;oBAC1B,OAAO,IAAIC,cAAS,CAAC;AACnB,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,OAAO;AACb,4BAAA,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,GAAG,CAAC,EAAE;AACb,yBAAA;AACD,wBAAA,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;4BACzD,OAAO,IAAIC,YAAO,CAAC;AACjB,gCAAA,IAAI,EAAE,OAAO;gCACb,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,GAAG,CAAC,EAAE;AACtB,gCAAA,OAAO,EAAE;AACP,sCAAE;AACE,wCAAA,IAAI,EAAE,OAAO;AACb,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,IAAI,EAAE,OAAO;AACd;AACH,sCAAE,SAAS;gCACb,IAAI,EAAE,SAAS,KAAM,CAA2B;gCAChD,OAAO,EAAE,SAAS,KAAM,CAA6B;gCACrD,SAAS,EACP,SAAS,KAAM;sCACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE;AACjC,sCAAE,SAAS;gCACf,MAAM,EAAE,SAAS,KAAM,CAAoC;AAC5D,6BAAA,CAAC;AACJ,wBAAA,CAAC,CAAC;AACH,qBAAA,CAAC;AACJ,gBAAA,CAAC,CAAC;YACJ,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../src/plugins/code/index.ts"],"sourcesContent":["import { Paragraph, TextRun } from \"docx\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport {\n  createHighlighter,\n  type BundledLanguage,\n  type BundledTheme,\n} from \"shiki\";\nimport { visit } from \"unist-util-visit\";\nimport type { FontStyle } from \"shiki/textmate\";\n\nexport interface ShikiPluginOptions {\n  /**\n   * https://shiki.style/themes\n   */\n  theme: BundledTheme;\n}\n\n/**\n * A plugin to render \"code\" nodes, with syntax highlighting powered by shiki.\n */\nexport const shikiPlugin = ({\n  theme,\n}: ShikiPluginOptions): RemarkDocxPlugin => {\n  let highlighter: Awaited<ReturnType<typeof createHighlighter>> | undefined;\n  const langs = new Set<string>();\n\n  return async ({ root }) => {\n    const newLangs: string[] = [];\n\n    visit(root, \"code\", ({ lang }) => {\n      if (lang) {\n        if (!langs.has(lang)) {\n          langs.add(lang);\n          newLangs.push(lang);\n        }\n      }\n    });\n\n    if (!highlighter) {\n      highlighter = await createHighlighter({\n        themes: [theme],\n        langs: [...langs],\n      });\n    } else {\n      await Promise.all(\n        newLangs.map((l) => highlighter!.loadLanguage(l as BundledLanguage)),\n      );\n    }\n\n    return {\n      code: ({ value, lang }) => {\n        if (!lang) {\n          return null;\n        }\n        const res = highlighter!.codeToTokens(value, {\n          lang: lang as BundledLanguage,\n          theme,\n        });\n\n        return res.tokens.map((r) => {\n          return new Paragraph({\n            shading: {\n              type: \"clear\",\n              color: \"auto\",\n              fill: res.bg,\n            },\n            children: r.map(({ content, bgColor, color, fontStyle }) => {\n              return new TextRun({\n                text: content,\n                color: color ?? res.fg,\n                shading: bgColor\n                  ? {\n                      type: \"clear\",\n                      color: \"auto\",\n                      fill: bgColor,\n                    }\n                  : undefined,\n                bold: fontStyle === (2 satisfies FontStyle.Bold),\n                italics: fontStyle === (1 satisfies FontStyle.Italic),\n                underline:\n                  fontStyle === (4 satisfies FontStyle.Underline)\n                    ? { type: \"single\", color: res.fg }\n                    : undefined,\n                strike: fontStyle === (8 satisfies FontStyle.Strikethrough),\n              });\n            }),\n          });\n        });\n      },\n    };\n  };\n};\n"],"names":["visit","createHighlighter","Paragraph","TextRun"],"mappings":";;;;;;AAiBA;;AAEG;MACU,WAAW,GAAG,CAAC,EAC1B,KAAK,GACc,KAAsB;AACzC,IAAA,IAAI,WAAsE;AAC1E,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU;AAE/B,IAAA,OAAO,OAAO,EAAE,IAAI,EAAE,KAAI;QACxB,MAAM,QAAQ,GAAa,EAAE;QAE7BA,oBAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAI;YAC/B,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACpB,oBAAA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACf,oBAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBACrB;YACF;AACF,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,WAAW,EAAE;YAChB,WAAW,GAAG,MAAMC,uBAAiB,CAAC;gBACpC,MAAM,EAAE,CAAC,KAAK,CAAC;AACf,gBAAA,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC;AAClB,aAAA,CAAC;QACJ;aAAO;YACL,MAAM,OAAO,CAAC,GAAG,CACf,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,WAAY,CAAC,YAAY,CAAC,CAAoB,CAAC,CAAC,CACrE;QACH;QAEA,OAAO;YACL,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAI;gBACxB,IAAI,CAAC,IAAI,EAAE;AACT,oBAAA,OAAO,IAAI;gBACb;AACA,gBAAA,MAAM,GAAG,GAAG,WAAY,CAAC,YAAY,CAAC,KAAK,EAAE;AAC3C,oBAAA,IAAI,EAAE,IAAuB;oBAC7B,KAAK;AACN,iBAAA,CAAC;gBAEF,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;oBAC1B,OAAO,IAAIC,cAAS,CAAC;AACnB,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,OAAO;AACb,4BAAA,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,GAAG,CAAC,EAAE;AACb,yBAAA;AACD,wBAAA,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;4BACzD,OAAO,IAAIC,YAAO,CAAC;AACjB,gCAAA,IAAI,EAAE,OAAO;gCACb,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,GAAG,CAAC,EAAE;AACtB,gCAAA,OAAO,EAAE;AACP,sCAAE;AACE,wCAAA,IAAI,EAAE,OAAO;AACb,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,IAAI,EAAE,OAAO;AACd;AACH,sCAAE,SAAS;gCACb,IAAI,EAAE,SAAS,KAAM,CAA2B;gCAChD,OAAO,EAAE,SAAS,KAAM,CAA6B;gCACrD,SAAS,EACP,SAAS,KAAM;sCACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE;AACjC,sCAAE,SAAS;gCACf,MAAM,EAAE,SAAS,KAAM,CAAoC;AAC5D,6BAAA,CAAC;AACJ,wBAAA,CAAC,CAAC;AACH,qBAAA,CAAC;AACJ,gBAAA,CAAC,CAAC;YACJ,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}

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

@@ -1,6 +1,6 @@
 import type { RemarkDocxPlugin } from "../../types";
 import { type BundledTheme } from "shiki";
-interface ShikiPlugin {
+export interface ShikiPluginOptions {
     /**
      * https://shiki.style/themes
      */
@@ -9,5 +9,4 @@ interface ShikiPlugin {
 /**
  * A plugin to render "code" nodes, with syntax highlighting powered by shiki.
  */
-export declare const shikiPlugin: ({ theme }: ShikiPlugin) => RemarkDocxPlugin;
-export {};
+export declare const shikiPlugin: ({ theme, }: ShikiPluginOptions) => RemarkDocxPlugin;

package/lib/plugins/code/index.js

@@ -5,7 +5,7 @@ import { visit } from 'unist-util-visit';
 /**
  * A plugin to render "code" nodes, with syntax highlighting powered by shiki.
  */
-const shikiPlugin = ({ theme }) => {
+const shikiPlugin = ({ theme, }) => {
     let highlighter;
     const langs = new Set();
     return async ({ root }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/plugins/code/index.ts"],"sourcesContent":["import { Paragraph, TextRun } from \"docx\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport {\n  createHighlighter,\n  type BundledLanguage,\n  type BundledTheme,\n} from \"shiki\";\nimport { visit } from \"unist-util-visit\";\nimport type { FontStyle } from \"shiki/textmate\";\n\ninterface ShikiPlugin {\n  /**\n   * https://shiki.style/themes\n   */\n  theme: BundledTheme;\n}\n\n/**\n * A plugin to render \"code\" nodes, with syntax highlighting powered by shiki.\n */\nexport const shikiPlugin = ({ theme }: ShikiPlugin): RemarkDocxPlugin => {\n  let highlighter: Awaited<ReturnType<typeof createHighlighter>> | undefined;\n  const langs = new Set<string>();\n\n  return async ({ root }) => {\n    const newLangs: string[] = [];\n\n    visit(root, \"code\", ({ lang }) => {\n      if (lang) {\n        if (!langs.has(lang)) {\n          langs.add(lang);\n          newLangs.push(lang);\n        }\n      }\n    });\n\n    if (!highlighter) {\n      highlighter = await createHighlighter({\n        themes: [theme],\n        langs: [...langs],\n      });\n    } else {\n      await Promise.all(\n        newLangs.map((l) => highlighter!.loadLanguage(l as BundledLanguage)),\n      );\n    }\n\n    return {\n      code: ({ value, lang }) => {\n        if (!lang) {\n          return null;\n        }\n        const res = highlighter!.codeToTokens(value, {\n          lang: lang as BundledLanguage,\n          theme,\n        });\n\n        return res.tokens.map((r) => {\n          return new Paragraph({\n            shading: {\n              type: \"clear\",\n              color: \"auto\",\n              fill: res.bg,\n            },\n            children: r.map(({ content, bgColor, color, fontStyle }) => {\n              return new TextRun({\n                text: content,\n                color: color ?? res.fg,\n                shading: bgColor\n                  ? {\n                      type: \"clear\",\n                      color: \"auto\",\n                      fill: bgColor,\n                    }\n                  : undefined,\n                bold: fontStyle === (2 satisfies FontStyle.Bold),\n                italics: fontStyle === (1 satisfies FontStyle.Italic),\n                underline:\n                  fontStyle === (4 satisfies FontStyle.Underline)\n                    ? { type: \"single\", color: res.fg }\n                    : undefined,\n                strike: fontStyle === (8 satisfies FontStyle.Strikethrough),\n              });\n            }),\n          });\n        });\n      },\n    };\n  };\n};\n"],"names":[],"mappings":";;;;AAiBA;;AAEG;MACU,WAAW,GAAG,CAAC,EAAE,KAAK,EAAe,KAAsB;AACtE,IAAA,IAAI,WAAsE;AAC1E,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU;AAE/B,IAAA,OAAO,OAAO,EAAE,IAAI,EAAE,KAAI;QACxB,MAAM,QAAQ,GAAa,EAAE;QAE7B,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAI;YAC/B,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACpB,oBAAA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACf,oBAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBACrB;YACF;AACF,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,WAAW,EAAE;YAChB,WAAW,GAAG,MAAM,iBAAiB,CAAC;gBACpC,MAAM,EAAE,CAAC,KAAK,CAAC;AACf,gBAAA,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC;AAClB,aAAA,CAAC;QACJ;aAAO;YACL,MAAM,OAAO,CAAC,GAAG,CACf,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,WAAY,CAAC,YAAY,CAAC,CAAoB,CAAC,CAAC,CACrE;QACH;QAEA,OAAO;YACL,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAI;gBACxB,IAAI,CAAC,IAAI,EAAE;AACT,oBAAA,OAAO,IAAI;gBACb;AACA,gBAAA,MAAM,GAAG,GAAG,WAAY,CAAC,YAAY,CAAC,KAAK,EAAE;AAC3C,oBAAA,IAAI,EAAE,IAAuB;oBAC7B,KAAK;AACN,iBAAA,CAAC;gBAEF,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;oBAC1B,OAAO,IAAI,SAAS,CAAC;AACnB,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,OAAO;AACb,4BAAA,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,GAAG,CAAC,EAAE;AACb,yBAAA;AACD,wBAAA,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;4BACzD,OAAO,IAAI,OAAO,CAAC;AACjB,gCAAA,IAAI,EAAE,OAAO;gCACb,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,GAAG,CAAC,EAAE;AACtB,gCAAA,OAAO,EAAE;AACP,sCAAE;AACE,wCAAA,IAAI,EAAE,OAAO;AACb,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,IAAI,EAAE,OAAO;AACd;AACH,sCAAE,SAAS;gCACb,IAAI,EAAE,SAAS,KAAM,CAA2B;gCAChD,OAAO,EAAE,SAAS,KAAM,CAA6B;gCACrD,SAAS,EACP,SAAS,KAAM;sCACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE;AACjC,sCAAE,SAAS;gCACf,MAAM,EAAE,SAAS,KAAM,CAAoC;AAC5D,6BAAA,CAAC;AACJ,wBAAA,CAAC,CAAC;AACH,qBAAA,CAAC;AACJ,gBAAA,CAAC,CAAC;YACJ,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/plugins/code/index.ts"],"sourcesContent":["import { Paragraph, TextRun } from \"docx\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport {\n  createHighlighter,\n  type BundledLanguage,\n  type BundledTheme,\n} from \"shiki\";\nimport { visit } from \"unist-util-visit\";\nimport type { FontStyle } from \"shiki/textmate\";\n\nexport interface ShikiPluginOptions {\n  /**\n   * https://shiki.style/themes\n   */\n  theme: BundledTheme;\n}\n\n/**\n * A plugin to render \"code\" nodes, with syntax highlighting powered by shiki.\n */\nexport const shikiPlugin = ({\n  theme,\n}: ShikiPluginOptions): RemarkDocxPlugin => {\n  let highlighter: Awaited<ReturnType<typeof createHighlighter>> | undefined;\n  const langs = new Set<string>();\n\n  return async ({ root }) => {\n    const newLangs: string[] = [];\n\n    visit(root, \"code\", ({ lang }) => {\n      if (lang) {\n        if (!langs.has(lang)) {\n          langs.add(lang);\n          newLangs.push(lang);\n        }\n      }\n    });\n\n    if (!highlighter) {\n      highlighter = await createHighlighter({\n        themes: [theme],\n        langs: [...langs],\n      });\n    } else {\n      await Promise.all(\n        newLangs.map((l) => highlighter!.loadLanguage(l as BundledLanguage)),\n      );\n    }\n\n    return {\n      code: ({ value, lang }) => {\n        if (!lang) {\n          return null;\n        }\n        const res = highlighter!.codeToTokens(value, {\n          lang: lang as BundledLanguage,\n          theme,\n        });\n\n        return res.tokens.map((r) => {\n          return new Paragraph({\n            shading: {\n              type: \"clear\",\n              color: \"auto\",\n              fill: res.bg,\n            },\n            children: r.map(({ content, bgColor, color, fontStyle }) => {\n              return new TextRun({\n                text: content,\n                color: color ?? res.fg,\n                shading: bgColor\n                  ? {\n                      type: \"clear\",\n                      color: \"auto\",\n                      fill: bgColor,\n                    }\n                  : undefined,\n                bold: fontStyle === (2 satisfies FontStyle.Bold),\n                italics: fontStyle === (1 satisfies FontStyle.Italic),\n                underline:\n                  fontStyle === (4 satisfies FontStyle.Underline)\n                    ? { type: \"single\", color: res.fg }\n                    : undefined,\n                strike: fontStyle === (8 satisfies FontStyle.Strikethrough),\n              });\n            }),\n          });\n        });\n      },\n    };\n  };\n};\n"],"names":[],"mappings":";;;;AAiBA;;AAEG;MACU,WAAW,GAAG,CAAC,EAC1B,KAAK,GACc,KAAsB;AACzC,IAAA,IAAI,WAAsE;AAC1E,IAAA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAU;AAE/B,IAAA,OAAO,OAAO,EAAE,IAAI,EAAE,KAAI;QACxB,MAAM,QAAQ,GAAa,EAAE;QAE7B,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,KAAI;YAC/B,IAAI,IAAI,EAAE;gBACR,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;AACpB,oBAAA,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC;AACf,oBAAA,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;gBACrB;YACF;AACF,QAAA,CAAC,CAAC;QAEF,IAAI,CAAC,WAAW,EAAE;YAChB,WAAW,GAAG,MAAM,iBAAiB,CAAC;gBACpC,MAAM,EAAE,CAAC,KAAK,CAAC;AACf,gBAAA,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC;AAClB,aAAA,CAAC;QACJ;aAAO;YACL,MAAM,OAAO,CAAC,GAAG,CACf,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,WAAY,CAAC,YAAY,CAAC,CAAoB,CAAC,CAAC,CACrE;QACH;QAEA,OAAO;YACL,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAI;gBACxB,IAAI,CAAC,IAAI,EAAE;AACT,oBAAA,OAAO,IAAI;gBACb;AACA,gBAAA,MAAM,GAAG,GAAG,WAAY,CAAC,YAAY,CAAC,KAAK,EAAE;AAC3C,oBAAA,IAAI,EAAE,IAAuB;oBAC7B,KAAK;AACN,iBAAA,CAAC;gBAEF,OAAO,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;oBAC1B,OAAO,IAAI,SAAS,CAAC;AACnB,wBAAA,OAAO,EAAE;AACP,4BAAA,IAAI,EAAE,OAAO;AACb,4BAAA,KAAK,EAAE,MAAM;4BACb,IAAI,EAAE,GAAG,CAAC,EAAE;AACb,yBAAA;AACD,wBAAA,QAAQ,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,KAAI;4BACzD,OAAO,IAAI,OAAO,CAAC;AACjB,gCAAA,IAAI,EAAE,OAAO;gCACb,KAAK,EAAE,KAAK,KAAA,IAAA,IAAL,KAAK,cAAL,KAAK,GAAI,GAAG,CAAC,EAAE;AACtB,gCAAA,OAAO,EAAE;AACP,sCAAE;AACE,wCAAA,IAAI,EAAE,OAAO;AACb,wCAAA,KAAK,EAAE,MAAM;AACb,wCAAA,IAAI,EAAE,OAAO;AACd;AACH,sCAAE,SAAS;gCACb,IAAI,EAAE,SAAS,KAAM,CAA2B;gCAChD,OAAO,EAAE,SAAS,KAAM,CAA6B;gCACrD,SAAS,EACP,SAAS,KAAM;sCACX,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,CAAC,EAAE;AACjC,sCAAE,SAAS;gCACf,MAAM,EAAE,SAAS,KAAM,CAAoC;AAC5D,6BAAA,CAAC;AACJ,wBAAA,CAAC,CAAC;AACH,qBAAA,CAAC;AACJ,gBAAA,CAAC,CAAC;YACJ,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}

package/lib/plugins/image/index.cjs

@@ -5,7 +5,24 @@ var docx = require('docx');
 var unistUtilVisit = require('unist-util-visit');
 var imageSize = require('image-size');
 
-const buildImage = ({ data, width, height, type }) => {
+const supportedTypes = ["png", "jpg", "gif", "bmp", "svg"];
+const buildImage = (image, node) => {
+    const altText = node.alt ? { name: node.alt } : undefined;
+    if (image.type === "svg") {
+        const { type, data, width, height, fallback } = image;
+        return new docx.ImageRun({
+            type: type,
+            data: data,
+            transformation: {
+                width,
+                height,
+            },
+            // https://github.com/dolanmiu/docx/issues/1162#issuecomment-3228368003
+            fallback: { type: "png", data: fallback },
+            altText,
+        });
+    }
+    const { type, data, width, height } = image;
     return new docx.ImageRun({
         type: type,
         data: data,
@@ -13,9 +30,9 @@ const buildImage = ({ data, width, height, type }) => {
             width,
             height,
         },
+        altText,
     });
 };
-const supportedTypes = ["png", "jpg", "gif", "bmp", "svg"];
 const isSupportedType = (type) => {
     if (!type)
         return false;
@@ -24,23 +41,36 @@ const isSupportedType = (type) => {
     }
     return false;
 };
+const loadWithFetch = async (url) => {
+    const res = await fetch(url);
+    return res.arrayBuffer();
+};
+const browserSvgToPng = async ({ buffer, width, height }) => {
+    const svgBlob = new Blob([buffer], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(svgBlob);
+    try {
+        const img = new Image();
+        img.src = url;
+        await img.decode();
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, width, height);
+        return new Promise((resolve) => {
+            canvas.toBlob((blob) => {
+                blob.arrayBuffer().then(resolve);
+            }, "image/png");
+        });
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+};
 /**
  * A plugin to render "image" nodes
  */
-const imagePlugin = ({ load = async (url) => {
-    const res = await fetch(url);
-    return res.arrayBuffer();
-}, } = {}) => {
-    const resolver = async (url) => {
-        const buf = await load(url);
-        const { width, height, type } = imageSize.imageSize(new Uint8Array(buf));
-        if (!isSupportedType(type)) {
-            const err = `Not supported image type: ${type}`;
-            utils.warnOnce(err);
-            throw new Error(err);
-        }
-        return { data: buf, width, height, type };
-    };
+const imagePlugin = ({ load = loadWithFetch, fallbackSvg = browserSvgToPng, } = {}) => {
     const images = new Map();
     return async ({ root, definition }) => {
         const imageList = [];
@@ -58,12 +88,41 @@ const imagePlugin = ({ load = async (url) => {
             imageList.forEach(({ url }) => {
                 if (!images.has(url) && !promises.has(url)) {
                     promises.set(url, (async () => {
+                        let data;
                         try {
-                            const img = await resolver(url);
-                            images.set(url, img);
+                            data = await load(url);
                         }
                         catch (e) {
-                            utils.warnOnce(`Failed to fetch image: ${url}`);
+                            utils.warnOnce(`Failed to load image: ${url} ${e}`);
+                            return;
+                        }
+                        const { width, height, type } = imageSize.imageSize(new Uint8Array(data));
+                        if (!isSupportedType(type)) {
+                            utils.warnOnce(`Not supported image type: ${type}`);
+                            return;
+                        }
+                        if (type === "svg") {
+                            try {
+                                const fallback = await fallbackSvg({
+                                    buffer: data,
+                                    width,
+                                    height,
+                                });
+                                images.set(url, {
+                                    type,
+                                    width,
+                                    height,
+                                    data,
+                                    fallback: fallback,
+                                });
+                            }
+                            catch (e) {
+                                utils.warnOnce(`Failed to create fallback image: ${url} ${e}`);
+                                return;
+                            }
+                        }
+                        else {
+                            images.set(url, { type, width, height, data });
                         }
                     })());
                 }
@@ -76,10 +135,10 @@ const imagePlugin = ({ load = async (url) => {
                 if (!data) {
                     return [];
                 }
-                return buildImage(data);
+                return buildImage(data, node);
             },
-            imageReference: ({ identifier }) => {
-                const def = definition(identifier);
+            imageReference: (node) => {
+                const def = definition(node.identifier);
                 if (def == null) {
                     return [];
                 }
@@ -87,7 +146,7 @@ const imagePlugin = ({ load = async (url) => {
                 if (!data) {
                     return [];
                 }
-                return buildImage(data);
+                return buildImage(data, node);
             },
         };
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../src/plugins/image/index.ts"],"sourcesContent":["import { warnOnce } from \"../../utils\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport type * as mdast from \"../../mdast\";\nimport { ImageRun, type IImageOptions } from \"docx\";\nimport { visit } from \"unist-util-visit\";\nimport { imageSize } from \"image-size\";\n\ntype ImageData = Readonly<{\n  data: IImageOptions[\"data\"];\n  width: number;\n  height: number;\n  type: IImageOptions[\"type\"];\n}>;\n\nconst buildImage = ({ data, width, height, type }: ImageData) => {\n  return new ImageRun({\n    type: type,\n    data: data,\n    transformation: {\n      width,\n      height,\n    },\n  } as IImageOptions);\n};\n\nconst supportedTypes = [\"png\", \"jpg\", \"gif\", \"bmp\", \"svg\"] as const;\n\nconst isSupportedType = (\n  type: string | undefined,\n): type is (typeof supportedTypes)[number] => {\n  if (!type) return false;\n  if ((supportedTypes as readonly string[]).includes(type)) {\n    return true;\n  }\n  return false;\n};\n\ninterface ImagePluginOptions {\n  /**\n   * A function to resolve image data from url.\n   * @default fetch\n   */\n  load?: (url: string) => Promise<ArrayBuffer>;\n}\n\n/**\n * A plugin to render \"image\" nodes\n */\nexport const imagePlugin = ({\n  load = async (url) => {\n    const res = await fetch(url);\n    return res.arrayBuffer();\n  },\n}: ImagePluginOptions = {}): RemarkDocxPlugin => {\n  const resolver = async (url: string): Promise<ImageData> => {\n    const buf = await load(url);\n\n    const { width, height, type } = imageSize(new Uint8Array(buf));\n    if (!isSupportedType(type)) {\n      const err = `Not supported image type: ${type}`;\n      warnOnce(err);\n      throw new Error(err);\n    }\n    return { data: buf, width, height, type };\n  };\n\n  const images = new Map<string, ImageData>();\n\n  return async ({ root, definition }) => {\n    const imageList: (mdast.Image | mdast.Definition)[] = [];\n    visit(root, \"image\", (node) => {\n      imageList.push(node);\n    });\n    visit(root, \"imageReference\", (node) => {\n      const maybeImage = definition(node.identifier)!;\n      if (maybeImage) {\n        imageList.push(maybeImage);\n      }\n    });\n\n    if (imageList.length !== 0) {\n      const promises = new Map<string, Promise<void>>();\n      imageList.forEach(({ url }) => {\n        if (!images.has(url) && !promises.has(url)) {\n          promises.set(\n            url,\n            (async () => {\n              try {\n                const img = await resolver(url);\n                images.set(url, img);\n              } catch (e) {\n                warnOnce(`Failed to fetch image: ${url}`);\n              }\n            })(),\n          );\n        }\n      });\n\n      await Promise.all(promises.values());\n    }\n\n    return {\n      image: (node) => {\n        const data = images.get(node.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data);\n      },\n      imageReference: ({ identifier }) => {\n        const def = definition(identifier);\n        if (def == null) {\n          return [];\n        }\n        const data = images.get(def.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data);\n      },\n    };\n  };\n};\n"],"names":["ImageRun","imageSize","warnOnce","visit"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../src/plugins/image/index.ts"],"sourcesContent":["import { warnOnce } from \"../../utils\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport type * as mdast from \"../../mdast\";\nimport { ImageRun } from \"docx\";\nimport { visit } from \"unist-util-visit\";\nimport { imageSize } from \"image-size\";\n\nconst supportedTypes = [\"png\", \"jpg\", \"gif\", \"bmp\", \"svg\"] as const;\n\ntype SupportedImageType = (typeof supportedTypes)[number];\n\ntype ImageData = Readonly<\n  {\n    data: ArrayBuffer;\n    width: number;\n    height: number;\n  } & (\n    | { type: Exclude<SupportedImageType, \"svg\"> }\n    | {\n        type: Extract<SupportedImageType, \"svg\">;\n        fallback: ArrayBuffer;\n      }\n  )\n>;\n\nconst buildImage = (image: ImageData, node: { alt?: string | null }) => {\n  const altText = node.alt ? { name: node.alt } : undefined;\n\n  if (image.type === \"svg\") {\n    const { type, data, width, height, fallback } = image;\n    return new ImageRun({\n      type: type,\n      data: data,\n      transformation: {\n        width,\n        height,\n      },\n      // https://github.com/dolanmiu/docx/issues/1162#issuecomment-3228368003\n      fallback: { type: \"png\", data: fallback },\n      altText,\n    });\n  }\n\n  const { type, data, width, height } = image;\n  return new ImageRun({\n    type: type,\n    data: data,\n    transformation: {\n      width,\n      height,\n    },\n    altText,\n  });\n};\n\nconst isSupportedType = (\n  type: string | undefined,\n): type is SupportedImageType => {\n  if (!type) return false;\n  if ((supportedTypes as readonly string[]).includes(type)) {\n    return true;\n  }\n  return false;\n};\n\ntype LoadFn = (url: string) => Promise<ArrayBuffer>;\n\ntype SvgToPngFn = (options: {\n  buffer: ArrayBuffer;\n  width: number;\n  height: number;\n}) => Promise<ArrayBuffer>;\n\nconst loadWithFetch: LoadFn = async (url) => {\n  const res = await fetch(url);\n  return res.arrayBuffer();\n};\n\nconst browserSvgToPng: SvgToPngFn = async ({ buffer, width, height }) => {\n  const svgBlob = new Blob([buffer], { type: \"image/svg+xml\" });\n  const url = URL.createObjectURL(svgBlob);\n\n  try {\n    const img = new Image();\n    img.src = url;\n    await img.decode();\n\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = width;\n    canvas.height = height;\n    const ctx = canvas.getContext(\"2d\")!;\n    ctx.drawImage(img, 0, 0, width, height);\n\n    return new Promise<ArrayBuffer>((resolve) => {\n      canvas.toBlob((blob) => {\n        blob!.arrayBuffer().then(resolve);\n      }, \"image/png\");\n    });\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nexport interface ImagePluginOptions {\n  /**\n   * A function to resolve image data from url.\n   * @default {@link loadWithFetch}\n   */\n  load?: LoadFn;\n  /**\n   * A function to convert SVG to PNG. According to the docx specifications, embedding SVG images also requires including PNG.\n   * @default {@link browserSvgToPng}, which handles conversion only on browser\n   */\n  fallbackSvg?: SvgToPngFn;\n}\n\n/**\n * A plugin to render \"image\" nodes\n */\nexport const imagePlugin = ({\n  load = loadWithFetch,\n  fallbackSvg = browserSvgToPng,\n}: ImagePluginOptions = {}): RemarkDocxPlugin => {\n  const images = new Map<string, ImageData>();\n\n  return async ({ root, definition }) => {\n    const imageList: (mdast.Image | mdast.Definition)[] = [];\n    visit(root, \"image\", (node) => {\n      imageList.push(node);\n    });\n    visit(root, \"imageReference\", (node) => {\n      const maybeImage = definition(node.identifier)!;\n      if (maybeImage) {\n        imageList.push(maybeImage);\n      }\n    });\n\n    if (imageList.length !== 0) {\n      const promises = new Map<string, Promise<void>>();\n      imageList.forEach(({ url }) => {\n        if (!images.has(url) && !promises.has(url)) {\n          promises.set(\n            url,\n            (async () => {\n              let data: ArrayBuffer;\n              try {\n                data = await load(url);\n              } catch (e) {\n                warnOnce(`Failed to load image: ${url} ${e}`);\n                return;\n              }\n\n              const { width, height, type } = imageSize(new Uint8Array(data));\n              if (!isSupportedType(type)) {\n                warnOnce(`Not supported image type: ${type}`);\n                return;\n              }\n\n              if (type === \"svg\") {\n                try {\n                  const fallback = await fallbackSvg({\n                    buffer: data,\n                    width,\n                    height,\n                  });\n                  images.set(url, {\n                    type,\n                    width,\n                    height,\n                    data,\n                    fallback: fallback,\n                  });\n                } catch (e) {\n                  warnOnce(`Failed to create fallback image: ${url} ${e}`);\n                  return;\n                }\n              } else {\n                images.set(url, { type, width, height, data });\n              }\n            })(),\n          );\n        }\n      });\n\n      await Promise.all(promises.values());\n    }\n\n    return {\n      image: (node) => {\n        const data = images.get(node.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data, node);\n      },\n      imageReference: (node) => {\n        const def = definition(node.identifier);\n        if (def == null) {\n          return [];\n        }\n        const data = images.get(def.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data, node);\n      },\n    };\n  };\n};\n"],"names":["ImageRun","visit","warnOnce","imageSize"],"mappings":";;;;;;;AAOA,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAU;AAkBnE,MAAM,UAAU,GAAG,CAAC,KAAgB,EAAE,IAA6B,KAAI;AACrE,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,GAAG,EAAE,GAAG,SAAS;AAEzD,IAAA,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE;AACxB,QAAA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK;QACrD,OAAO,IAAIA,aAAQ,CAAC;AAClB,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,IAAI,EAAE,IAAI;AACV,YAAA,cAAc,EAAE;gBACd,KAAK;gBACL,MAAM;AACP,aAAA;;YAED,QAAQ,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE;YACzC,OAAO;AACR,SAAA,CAAC;IACJ;IAEA,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,KAAK;IAC3C,OAAO,IAAIA,aAAQ,CAAC;AAClB,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,cAAc,EAAE;YACd,KAAK;YACL,MAAM;AACP,SAAA;QACD,OAAO;AACR,KAAA,CAAC;AACJ,CAAC;AAED,MAAM,eAAe,GAAG,CACtB,IAAwB,KACM;AAC9B,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,KAAK;AACvB,IAAA,IAAK,cAAoC,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE;AACxD,QAAA,OAAO,IAAI;IACb;AACA,IAAA,OAAO,KAAK;AACd,CAAC;AAUD,MAAM,aAAa,GAAW,OAAO,GAAG,KAAI;AAC1C,IAAA,MAAM,GAAG,GAAG,MAAM,KAAK,CAAC,GAAG,CAAC;AAC5B,IAAA,OAAO,GAAG,CAAC,WAAW,EAAE;AAC1B,CAAC;AAED,MAAM,eAAe,GAAe,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAI;AACtE,IAAA,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,CAAC;IAC7D,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,OAAO,CAAC;AAExC,IAAA,IAAI;AACF,QAAA,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE;AACvB,QAAA,GAAG,CAAC,GAAG,GAAG,GAAG;AACb,QAAA,MAAM,GAAG,CAAC,MAAM,EAAE;QAElB,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC;AAC/C,QAAA,MAAM,CAAC,KAAK,GAAG,KAAK;AACpB,QAAA,MAAM,CAAC,MAAM,GAAG,MAAM;QACtB,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,IAAI,CAAE;AACpC,QAAA,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC;AAEvC,QAAA,OAAO,IAAI,OAAO,CAAc,CAAC,OAAO,KAAI;AAC1C,YAAA,MAAM,CAAC,MAAM,CAAC,CAAC,IAAI,KAAI;gBACrB,IAAK,CAAC,WAAW,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC;YACnC,CAAC,EAAE,WAAW,CAAC;AACjB,QAAA,CAAC,CAAC;IACJ;YAAU;AACR,QAAA,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC;IAC1B;AACF,CAAC;AAeD;;AAEG;AACI,MAAM,WAAW,GAAG,CAAC,EAC1B,IAAI,GAAG,aAAa,EACpB,WAAW,GAAG,eAAe,GAAA,GACP,EAAE,KAAsB;AAC9C,IAAA,MAAM,MAAM,GAAG,IAAI,GAAG,EAAqB;IAE3C,OAAO,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,KAAI;QACpC,MAAM,SAAS,GAAuC,EAAE;QACxDC,oBAAK,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,KAAI;AAC5B,YAAA,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;AACtB,QAAA,CAAC,CAAC;QACFA,oBAAK,CAAC,IAAI,EAAE,gBAAgB,EAAE,CAAC,IAAI,KAAI;YACrC,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,UAAU,CAAE;YAC/C,IAAI,UAAU,EAAE;AACd,gBAAA,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;YAC5B;AACF,QAAA,CAAC,CAAC;AAEF,QAAA,IAAI,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AAC1B,YAAA,MAAM,QAAQ,GAAG,IAAI,GAAG,EAAyB;YACjD,SAAS,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,KAAI;AAC5B,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE;oBAC1C,QAAQ,CAAC,GAAG,CACV,GAAG,EACH,CAAC,YAAW;AACV,wBAAA,IAAI,IAAiB;AACrB,wBAAA,IAAI;AACF,4BAAA,IAAI,GAAG,MAAM,IAAI,CAAC,GAAG,CAAC;wBACxB;wBAAE,OAAO,CAAC,EAAE;AACV,4BAAAC,cAAQ,CAAC,CAAA,sBAAA,EAAyB,GAAG,IAAI,CAAC,CAAA,CAAE,CAAC;4BAC7C;wBACF;AAEA,wBAAA,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,GAAGC,mBAAS,CAAC,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;AAC/D,wBAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE;AAC1B,4BAAAD,cAAQ,CAAC,CAAA,0BAAA,EAA6B,IAAI,CAAA,CAAE,CAAC;4BAC7C;wBACF;AAEA,wBAAA,IAAI,IAAI,KAAK,KAAK,EAAE;AAClB,4BAAA,IAAI;AACF,gCAAA,MAAM,QAAQ,GAAG,MAAM,WAAW,CAAC;AACjC,oCAAA,MAAM,EAAE,IAAI;oCACZ,KAAK;oCACL,MAAM;AACP,iCAAA,CAAC;AACF,gCAAA,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;oCACd,IAAI;oCACJ,KAAK;oCACL,MAAM;oCACN,IAAI;AACJ,oCAAA,QAAQ,EAAE,QAAQ;AACnB,iCAAA,CAAC;4BACJ;4BAAE,OAAO,CAAC,EAAE;AACV,gCAAAA,cAAQ,CAAC,CAAA,iCAAA,EAAoC,GAAG,IAAI,CAAC,CAAA,CAAE,CAAC;gCACxD;4BACF;wBACF;6BAAO;AACL,4BAAA,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;wBAChD;oBACF,CAAC,GAAG,CACL;gBACH;AACF,YAAA,CAAC,CAAC;YAEF,MAAM,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,MAAM,EAAE,CAAC;QACtC;QAEA,OAAO;AACL,YAAA,KAAK,EAAE,CAAC,IAAI,KAAI;gBACd,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC;gBACjC,IAAI,CAAC,IAAI,EAAE;AACT,oBAAA,OAAO,EAAE;gBACX;AACA,gBAAA,OAAO,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC;YAC/B,CAAC;AACD,YAAA,cAAc,EAAE,CAAC,IAAI,KAAI;gBACvB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC;AACvC,gBAAA,IAAI,GAAG,IAAI,IAAI,EAAE;AACf,oBAAA,OAAO,EAAE;gBACX;gBACA,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC;gBAChC,IAAI,CAAC,IAAI,EAAE;AACT,oBAAA,OAAO,EAAE;gBACX;AACA,gBAAA,OAAO,UAAU,CAAC,IAAI,EAAE,IAAI,CAAC;YAC/B,CAAC;SACF;AACH,IAAA,CAAC;AACH;;;;"}

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

@@ -1,13 +1,24 @@
 import type { RemarkDocxPlugin } from "../../types";
-interface ImagePluginOptions {
+type LoadFn = (url: string) => Promise<ArrayBuffer>;
+type SvgToPngFn = (options: {
+    buffer: ArrayBuffer;
+    width: number;
+    height: number;
+}) => Promise<ArrayBuffer>;
+export interface ImagePluginOptions {
     /**
      * A function to resolve image data from url.
-     * @default fetch
+     * @default {@link loadWithFetch}
      */
-    load?: (url: string) => Promise<ArrayBuffer>;
+    load?: LoadFn;
+    /**
+     * A function to convert SVG to PNG. According to the docx specifications, embedding SVG images also requires including PNG.
+     * @default {@link browserSvgToPng}, which handles conversion only on browser
+     */
+    fallbackSvg?: SvgToPngFn;
 }
 /**
  * A plugin to render "image" nodes
  */
-export declare const imagePlugin: ({ load, }?: ImagePluginOptions) => RemarkDocxPlugin;
+export declare const imagePlugin: ({ load, fallbackSvg, }?: ImagePluginOptions) => RemarkDocxPlugin;
 export {};

package/lib/plugins/image/index.js

@@ -3,7 +3,24 @@ import { ImageRun } from 'docx';
 import { visit } from 'unist-util-visit';
 import { imageSize } from 'image-size';
 
-const buildImage = ({ data, width, height, type }) => {
+const supportedTypes = ["png", "jpg", "gif", "bmp", "svg"];
+const buildImage = (image, node) => {
+    const altText = node.alt ? { name: node.alt } : undefined;
+    if (image.type === "svg") {
+        const { type, data, width, height, fallback } = image;
+        return new ImageRun({
+            type: type,
+            data: data,
+            transformation: {
+                width,
+                height,
+            },
+            // https://github.com/dolanmiu/docx/issues/1162#issuecomment-3228368003
+            fallback: { type: "png", data: fallback },
+            altText,
+        });
+    }
+    const { type, data, width, height } = image;
     return new ImageRun({
         type: type,
         data: data,
@@ -11,9 +28,9 @@ const buildImage = ({ data, width, height, type }) => {
             width,
             height,
         },
+        altText,
     });
 };
-const supportedTypes = ["png", "jpg", "gif", "bmp", "svg"];
 const isSupportedType = (type) => {
     if (!type)
         return false;
@@ -22,23 +39,36 @@ const isSupportedType = (type) => {
     }
     return false;
 };
+const loadWithFetch = async (url) => {
+    const res = await fetch(url);
+    return res.arrayBuffer();
+};
+const browserSvgToPng = async ({ buffer, width, height }) => {
+    const svgBlob = new Blob([buffer], { type: "image/svg+xml" });
+    const url = URL.createObjectURL(svgBlob);
+    try {
+        const img = new Image();
+        img.src = url;
+        await img.decode();
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+        const ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, width, height);
+        return new Promise((resolve) => {
+            canvas.toBlob((blob) => {
+                blob.arrayBuffer().then(resolve);
+            }, "image/png");
+        });
+    }
+    finally {
+        URL.revokeObjectURL(url);
+    }
+};
 /**
  * A plugin to render "image" nodes
  */
-const imagePlugin = ({ load = async (url) => {
-    const res = await fetch(url);
-    return res.arrayBuffer();
-}, } = {}) => {
-    const resolver = async (url) => {
-        const buf = await load(url);
-        const { width, height, type } = imageSize(new Uint8Array(buf));
-        if (!isSupportedType(type)) {
-            const err = `Not supported image type: ${type}`;
-            warnOnce(err);
-            throw new Error(err);
-        }
-        return { data: buf, width, height, type };
-    };
+const imagePlugin = ({ load = loadWithFetch, fallbackSvg = browserSvgToPng, } = {}) => {
     const images = new Map();
     return async ({ root, definition }) => {
         const imageList = [];
@@ -56,12 +86,41 @@ const imagePlugin = ({ load = async (url) => {
             imageList.forEach(({ url }) => {
                 if (!images.has(url) && !promises.has(url)) {
                     promises.set(url, (async () => {
+                        let data;
                         try {
-                            const img = await resolver(url);
-                            images.set(url, img);
+                            data = await load(url);
                         }
                         catch (e) {
-                            warnOnce(`Failed to fetch image: ${url}`);
+                            warnOnce(`Failed to load image: ${url} ${e}`);
+                            return;
+                        }
+                        const { width, height, type } = imageSize(new Uint8Array(data));
+                        if (!isSupportedType(type)) {
+                            warnOnce(`Not supported image type: ${type}`);
+                            return;
+                        }
+                        if (type === "svg") {
+                            try {
+                                const fallback = await fallbackSvg({
+                                    buffer: data,
+                                    width,
+                                    height,
+                                });
+                                images.set(url, {
+                                    type,
+                                    width,
+                                    height,
+                                    data,
+                                    fallback: fallback,
+                                });
+                            }
+                            catch (e) {
+                                warnOnce(`Failed to create fallback image: ${url} ${e}`);
+                                return;
+                            }
+                        }
+                        else {
+                            images.set(url, { type, width, height, data });
                         }
                     })());
                 }
@@ -74,10 +133,10 @@ const imagePlugin = ({ load = async (url) => {
                 if (!data) {
                     return [];
                 }
-                return buildImage(data);
+                return buildImage(data, node);
             },
-            imageReference: ({ identifier }) => {
-                const def = definition(identifier);
+            imageReference: (node) => {
+                const def = definition(node.identifier);
                 if (def == null) {
                     return [];
                 }
@@ -85,7 +144,7 @@ const imagePlugin = ({ load = async (url) => {
                 if (!data) {
                     return [];
                 }
-                return buildImage(data);
+                return buildImage(data, node);
             },
         };
     };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/plugins/image/index.ts"],"sourcesContent":["import { warnOnce } from \"../../utils\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport type * as mdast from \"../../mdast\";\nimport { ImageRun, type IImageOptions } from \"docx\";\nimport { visit } from \"unist-util-visit\";\nimport { imageSize } from \"image-size\";\n\ntype ImageData = Readonly<{\n  data: IImageOptions[\"data\"];\n  width: number;\n  height: number;\n  type: IImageOptions[\"type\"];\n}>;\n\nconst buildImage = ({ data, width, height, type }: ImageData) => {\n  return new ImageRun({\n    type: type,\n    data: data,\n    transformation: {\n      width,\n      height,\n    },\n  } as IImageOptions);\n};\n\nconst supportedTypes = [\"png\", \"jpg\", \"gif\", \"bmp\", \"svg\"] as const;\n\nconst isSupportedType = (\n  type: string | undefined,\n): type is (typeof supportedTypes)[number] => {\n  if (!type) return false;\n  if ((supportedTypes as readonly string[]).includes(type)) {\n    return true;\n  }\n  return false;\n};\n\ninterface ImagePluginOptions {\n  /**\n   * A function to resolve image data from url.\n   * @default fetch\n   */\n  load?: (url: string) => Promise<ArrayBuffer>;\n}\n\n/**\n * A plugin to render \"image\" nodes\n */\nexport const imagePlugin = ({\n  load = async (url) => {\n    const res = await fetch(url);\n    return res.arrayBuffer();\n  },\n}: ImagePluginOptions = {}): RemarkDocxPlugin => {\n  const resolver = async (url: string): Promise<ImageData> => {\n    const buf = await load(url);\n\n    const { width, height, type } = imageSize(new Uint8Array(buf));\n    if (!isSupportedType(type)) {\n      const err = `Not supported image type: ${type}`;\n      warnOnce(err);\n      throw new Error(err);\n    }\n    return { data: buf, width, height, type };\n  };\n\n  const images = new Map<string, ImageData>();\n\n  return async ({ root, definition }) => {\n    const imageList: (mdast.Image | mdast.Definition)[] = [];\n    visit(root, \"image\", (node) => {\n      imageList.push(node);\n    });\n    visit(root, \"imageReference\", (node) => {\n      const maybeImage = definition(node.identifier)!;\n      if (maybeImage) {\n        imageList.push(maybeImage);\n      }\n    });\n\n    if (imageList.length !== 0) {\n      const promises = new Map<string, Promise<void>>();\n      imageList.forEach(({ url }) => {\n        if (!images.has(url) && !promises.has(url)) {\n          promises.set(\n            url,\n            (async () => {\n              try {\n                const img = await resolver(url);\n                images.set(url, img);\n              } catch (e) {\n                warnOnce(`Failed to fetch image: ${url}`);\n              }\n            })(),\n          );\n        }\n      });\n\n      await Promise.all(promises.values());\n    }\n\n    return {\n      image: (node) => {\n        const data = images.get(node.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data);\n      },\n      imageReference: ({ identifier }) => {\n        const def = definition(identifier);\n        if (def == null) {\n          return [];\n        }\n        const data = images.get(def.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data);\n      },\n    };\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/plugins/image/index.ts"],"sourcesContent":["import { warnOnce } from \"../../utils\";\nimport type { RemarkDocxPlugin } from \"../../types\";\nimport type * as mdast from \"../../mdast\";\nimport { ImageRun } from \"docx\";\nimport { visit } from \"unist-util-visit\";\nimport { imageSize } from \"image-size\";\n\nconst supportedTypes = [\"png\", \"jpg\", \"gif\", \"bmp\", \"svg\"] as const;\n\ntype SupportedImageType = (typeof supportedTypes)[number];\n\ntype ImageData = Readonly<\n  {\n    data: ArrayBuffer;\n    width: number;\n    height: number;\n  } & (\n    | { type: Exclude<SupportedImageType, \"svg\"> }\n    | {\n        type: Extract<SupportedImageType, \"svg\">;\n        fallback: ArrayBuffer;\n      }\n  )\n>;\n\nconst buildImage = (image: ImageData, node: { alt?: string | null }) => {\n  const altText = node.alt ? { name: node.alt } : undefined;\n\n  if (image.type === \"svg\") {\n    const { type, data, width, height, fallback } = image;\n    return new ImageRun({\n      type: type,\n      data: data,\n      transformation: {\n        width,\n        height,\n      },\n      // https://github.com/dolanmiu/docx/issues/1162#issuecomment-3228368003\n      fallback: { type: \"png\", data: fallback },\n      altText,\n    });\n  }\n\n  const { type, data, width, height } = image;\n  return new ImageRun({\n    type: type,\n    data: data,\n    transformation: {\n      width,\n      height,\n    },\n    altText,\n  });\n};\n\nconst isSupportedType = (\n  type: string | undefined,\n): type is SupportedImageType => {\n  if (!type) return false;\n  if ((supportedTypes as readonly string[]).includes(type)) {\n    return true;\n  }\n  return false;\n};\n\ntype LoadFn = (url: string) => Promise<ArrayBuffer>;\n\ntype SvgToPngFn = (options: {\n  buffer: ArrayBuffer;\n  width: number;\n  height: number;\n}) => Promise<ArrayBuffer>;\n\nconst loadWithFetch: LoadFn = async (url) => {\n  const res = await fetch(url);\n  return res.arrayBuffer();\n};\n\nconst browserSvgToPng: SvgToPngFn = async ({ buffer, width, height }) => {\n  const svgBlob = new Blob([buffer], { type: \"image/svg+xml\" });\n  const url = URL.createObjectURL(svgBlob);\n\n  try {\n    const img = new Image();\n    img.src = url;\n    await img.decode();\n\n    const canvas = document.createElement(\"canvas\");\n    canvas.width = width;\n    canvas.height = height;\n    const ctx = canvas.getContext(\"2d\")!;\n    ctx.drawImage(img, 0, 0, width, height);\n\n    return new Promise<ArrayBuffer>((resolve) => {\n      canvas.toBlob((blob) => {\n        blob!.arrayBuffer().then(resolve);\n      }, \"image/png\");\n    });\n  } finally {\n    URL.revokeObjectURL(url);\n  }\n};\n\nexport interface ImagePluginOptions {\n  /**\n   * A function to resolve image data from url.\n   * @default {@link loadWithFetch}\n   */\n  load?: LoadFn;\n  /**\n   * A function to convert SVG to PNG. According to the docx specifications, embedding SVG images also requires including PNG.\n   * @default {@link browserSvgToPng}, which handles conversion only on browser\n   */\n  fallbackSvg?: SvgToPngFn;\n}\n\n/**\n * A plugin to render \"image\" nodes\n */\nexport const imagePlugin = ({\n  load = loadWithFetch,\n  fallbackSvg = browserSvgToPng,\n}: ImagePluginOptions = {}): RemarkDocxPlugin => {\n  const images = new Map<string, ImageData>();\n\n  return async ({ root, definition }) => {\n    const imageList: (mdast.Image | mdast.Definition)[] = [];\n    visit(root, \"image\", (node) => {\n      imageList.push(node);\n    });\n    visit(root, \"imageReference\", (node) => {\n      const maybeImage = definition(node.identifier)!;\n      if (maybeImage) {\n        imageList.push(maybeImage);\n      }\n    });\n\n    if (imageList.length !== 0) {\n      const promises = new Map<string, Promise<void>>();\n      imageList.forEach(({ url }) => {\n        if (!images.has(url) && !promises.has(url)) {\n          promises.set(\n            url,\n            (async () => {\n              let data: ArrayBuffer;\n              try {\n                data = await load(url);\n              } catch (e) {\n                warnOnce(`Failed to load image: ${url} ${e}`);\n                return;\n              }\n\n              const { width, height, type } = imageSize(new Uint8Array(data));\n              if (!isSupportedType(type)) {\n                warnOnce(`Not supported image type: ${type}`);\n                return;\n              }\n\n              if (type === \"svg\") {\n                try {\n                  const fallback = await fallbackSvg({\n                    buffer: data,\n                    width,\n                    height,\n                  });\n                  images.set(url, {\n                    type,\n                    width,\n                    height,\n                    data,\n                    fallback: fallback,\n                  });\n                } catch (e) {\n                  warnOnce(`Failed to create fallback image: ${url} ${e}`);\n                  return;\n                }\n              } else {\n                images.set(url, { type, width, height, data });\n              }\n            })(),\n          );\n        }\n      });\n\n      await Promise.all(promises.values());\n    }\n\n    return {\n      image: (node) => {\n        const data = images.get(node.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data, node);\n      },\n      imageReference: (node) => {\n        const def = definition(node.identifier);\n        if (def == null) {\n          return [];\n        }\n        const data = images.get(def.url);\n        if (!data) {\n          return [];\n        }\n        return buildImage(data, node);\n      },\n    };\n  };\n};\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remark-docx",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "description": "remark plugin to compile markdown to docx (Microsoft Word, Office Open XML).",
   "main": "lib/index.cjs",
   "module": "lib/index.js",