Merge pull request #5 from md2docx/optimize

Optimize

Author: mayank1513

.changeset/plenty-kiwis-float.md

@@ -0,0 +1,5 @@
+---
+"@m2d/image": major
+---
+
+Changing the plugin signature in accordace with this discussion - https://github.com/md2docx/mdast2docx/discussions/15

.changeset/real-bobcats-accept.md

@@ -0,0 +1,5 @@
+---
+"@m2d/image": minor
+---
+
+Use caching

examples/nextjs/package.json

@@ -12,7 +12,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "@m2d/core": "^0.0.5",
+    "@m2d/core": "^1.0.1",
     "@m2d/emoji": "^0.1.1",
     "@m2d/image": "workspace:*",
     "@repo/shared": "workspace:*",

examples/vite/package.json

@@ -12,7 +12,7 @@
     "lint:fix": "eslint src/ --fix"
   },
   "dependencies": {
-    "@m2d/core": "^0.0.5",
+    "@m2d/core": "^1.0.1",
     "@m2d/emoji": "^0.1.1",
     "@m2d/image": "workspace:*",
     "@repo/shared": "workspace:*",

lib/__tests__/index.test.ts

@@ -17,6 +17,7 @@ describe.concurrent("toDocx", () => {
     const docxBlob = await toDocx(
       mdast,
       {},
+      // @ts-expect-error -- plugin types mismatch for time being
       { plugins: [htmlPlugin(), mermaidPlugin(), imagePlugin()] },
     );
     expect(docxBlob).toBeInstanceOf(Blob);

lib/package.json

@@ -33,7 +33,7 @@
   },
   "devDependencies": {
     "@m2d/html": "^1.0.1",
-    "@m2d/mermaid": "^0.0.3",
+    "@m2d/mermaid": "^1.0.1",
     "@repo/eslint-config": "workspace:*",
     "@repo/typescript-config": "workspace:*",
     "@types/jsdom": "^21.1.7",
@@ -51,7 +51,7 @@
     "vitest": "^3.1.3"
   },
   "dependencies": {
-    "@m2d/core": "^0.0.5"
+    "@m2d/core": "^1.0.1"
   },
   "peerDependencies": {
     "docx": "^9.3.0"

lib/src/index.ts

@@ -1,6 +1,18 @@
 import type { IImageOptions } from "docx";
-import type { Image, ImageReference, IPlugin, Optional, SVG } from "@m2d/core";
+import type {
+  Image,
+  ImageData,
+  ImageReference,
+  IPlugin,
+  Optional,
+  Parent,
+  PhrasingContent,
+  Root,
+  RootContent,
+  SVG,
+} from "@m2d/core";
 import { handleSvg } from "./svg-utils";
+import { Definitions } from "@m2d/core/utils";
 
 /**
  * List of image types directly supported by `docx`.
@@ -179,7 +191,7 @@ const handleNonDataUrls = async (
 
   if (/(svg|xml)/.test(response.headers.get("content-type") ?? "") || url.endsWith(".svg")) {
     const svgText = await response.text();
-    return handleSvg({ type: "svg", value: svgText, id: `s${crypto.randomUUID()}` }, options);
+    return handleSvg({ type: "svg", value: svgText }, options);
   }
 
   const arrayBuffer = await response.arrayBuffer();
@@ -256,6 +268,46 @@ const defaultOptions: IDefaultImagePluginOptions = {
   dpi: 96,
 };
 
+const cache: Record<string, Promise<IImageOptions>> = {};
+
+/**
+ * Generate image data
+ *
+ * Extracting this logic in an async function for the purpose of caching the promises
+ */
+const createImageData = async (
+  node: Image | SVG,
+  url: string,
+  options: IDefaultImagePluginOptions,
+) => {
+  const imgOptions =
+    node.type === "svg"
+      ? await handleSvg(node, options)
+      : await options.imageResolver(url, options);
+
+  // apply data props
+  const { data } = node as Image;
+  const { width: origW, height: origH } = imgOptions.transformation;
+  let { width, height } = data ?? {};
+  if (width && !height) {
+    height = (origH * width) / origW;
+  } else if (!width && height) {
+    width = (origW * height) / origH;
+  } else if (!width && !height) {
+    height = origH;
+    width = origW;
+  }
+
+  const scale = Math.min(
+    (options.maxW * options.dpi) / width!,
+    (options.maxH * options.dpi) / height!,
+    1,
+  );
+  // @ts-expect-error -- we are mutating the immutable options.
+  imgOptions.transformation = { width: width * scale, height: height * scale };
+  return imgOptions;
+};
+
 /**
  * Image plugin for processing inline image nodes in the Markdown AST.
  * Resolves both base64 and URL-based images for inclusion in DOCX.
@@ -264,48 +316,48 @@ const defaultOptions: IDefaultImagePluginOptions = {
  * @returns Plugin implementation for use in the `@m2d/core` pipeline.
  */
 export const imagePlugin: (options?: IImagePluginOptions) => IPlugin = options_ => {
-  const options: IDefaultImagePluginOptions = { ...defaultOptions, ...options_ };
+  const options = { ...defaultOptions, ...options_ };
+
+  /** preprocess images */
+  const preprocess = async (root: Root, definitions: Definitions) => {
+    const promises: Promise<void>[] = [];
+
+    /** process images and create promises - use max parallel processing */
+    const preprocessInternal = (node: Root | RootContent | PhrasingContent) => {
+      (node as Parent).children?.forEach(preprocessInternal);
+
+      if (/^(image|svg)/.test(node.type))
+        promises.push(
+          (async () => {
+            // Only process image nodes
+            const url =
+              (node as Image).url ??
+              definitions[(node as ImageReference).identifier?.toUpperCase()];
+
+            // for SVG if the value is promise, it must have mermaid. We will in future provide better type safety after considering if there are any other mermaid like tools that we might want to support
+            const cacheKey = node.type === "svg" ? (node.data?.mermaid ?? String(node.value)) : url;
+
+            cache[cacheKey] ??= createImageData(node as Image | SVG, url, options);
+            const alt = (node as Image).alt ?? url?.split("/")?.pop() ?? "";
+
+            node.data = {
+              ...(await cache[cacheKey]),
+              altText: { description: alt, name: alt, title: alt },
+              ...(node as Image | SVG).data,
+            };
+          })(),
+        );
+    };
+    preprocessInternal(root);
+    await Promise.all(promises);
+  };
   return {
-    inline: async (docx, node, runProps, definitions) => {
+    preprocess,
+    inline: (docx, node, runProps) => {
       if (/^(image|svg)/.test(node.type)) {
-        const alt = (node as Image).alt ?? (node as Image).url?.split("/")?.pop() ?? "";
-        const url =
-          (node as Image).url ?? definitions[(node as ImageReference).identifier?.toUpperCase()];
-
-        const imgOptions =
-          node.type === "svg"
-            ? await handleSvg(node, options)
-            : await options.imageResolver(url, options);
-
-        // apply data props
-        const { data } = node as Image;
-        const { width: origW, height: origH } = imgOptions.transformation;
-        let { width, height } = data ?? {};
-        if (width && !height) {
-          height = (origH * width) / origW;
-        } else if (!width && height) {
-          width = (origW * height) / origH;
-        } else if (!width && !height) {
-          height = origH;
-          width = origW;
-        }
-
-        const scale = Math.min(
-          (options.maxW * options.dpi) / width!,
-          (options.maxH * options.dpi) / height!,
-          1,
-        );
-        // @ts-expect-error -- we are mutating the immutable options.
-        imgOptions.transformation = { width: width * scale, height: height * scale };
-        node.type = "";
-        return [
-          new docx.ImageRun({
-            ...imgOptions,
-            altText: { description: alt, name: alt, title: alt },
-            ...runProps,
-            ...(node as Image | SVG).data,
-          }),
-        ];
+        const { imageOptions, ...data } = (node as Image).data as ImageData;
+        // @ts-expect-error -- merging a lot of data types here
+        return [new docx.ImageRun({ ...imageOptions, ...data, ...runProps })];
       }
       return [];
     },

lib/src/svg-utils.ts

@@ -87,13 +87,14 @@ export const handleSvg = async (
   svgNode: SVG,
   options: IDefaultImagePluginOptions,
 ): Promise<IImageOptions> => {
-  const svg = svgNode.value;
+  const value = svgNode.value;
+  const svg = typeof value === "string" ? value : (await value).svg;
   try {
     const img = new Image();
     const container = getContainer(options);
     container.appendChild(img);
     // @ts-expect-error -- extra data
-    const isGantt = /(?:^|\n)\s*gantt\s*/.test(svgNode.data?.mermaid);
+    const isGantt = /^\s*gantt\s*/.test(svgNode.data?.mermaid);
     const croppedSvg = isGantt ? { svg, scale: 1 } : await tightlyCropSvg(svg, container);
 
     const svgDataURL = await svgToBase64(croppedSvg.svg);

lib/src/types.ts

@@ -0,0 +1,11 @@
+/**
+ * Makes all properties in T optional recursively, with special handling for functions.
+ * This utility type preserves function signatures while making them optional.
+ */
+export type Optional<T> = {
+  [K in keyof T]?: T[K] extends (...args: any[]) => any
+    ? T[K] // Preserve function types as-is
+    : T[K] extends object
+    ? Optional<T[K]>
+    : T[K];
+};

lib/vitest.setup.ts

@@ -1,3 +1,4 @@
+import { Root, RootContent, PhrasingContent, Parent, SVG } from "@m2d/core";
 import { vi } from "vitest";
 
 // Mock createImageBitmap
@@ -76,30 +77,86 @@ globalThis.fetch = mockFetch;
 
 globalThis.Image = class {
   _src = "";
-  width?: number;
-  height?: number;
+  width = 100;
+  height = 100;
   onload: (() => void) | null = null;
   onerror: ((err?: unknown) => void) | null = null;
 
-  constructor(width?: number, height?: number) {
-    this.width = width;
-    this.height = height;
-
-    // Simulate async image load
-    setTimeout(() => {
-      if (this.onload) this.onload();
-    }, 10);
-  }
-
   set src(value: string) {
     this._src = value;
-    // Simulate async loading
+
+    // simulate successful image load after a small delay
     setTimeout(() => {
       if (this.onload) this.onload();
-    }, 10);
+    }, 1);
   }
 
   get src() {
     return this._src;
   }
 } as unknown as typeof Image;
+
+const originalCreateElement = document.createElement;
+
+document.createElement = vi.fn((tagName: string) => {
+  if (tagName.toLowerCase() === "img") {
+    const fakeImg: any = {
+      _src: "",
+      width: 100,
+      height: 100,
+      set src(value: string) {
+        this._src = value;
+        // Simulate async load
+        setTimeout(() => this.onload?.(), 1);
+      },
+      get src() {
+        return this._src;
+      },
+      onload: null,
+      onerror: null,
+    };
+    return fakeImg;
+  }
+
+  return originalCreateElement.call(document, tagName);
+});
+
+vi.mock("@m2d/mermaid", () => {
+  const preprocess = (node: Root | RootContent | PhrasingContent) => {
+    // Preprocess the AST to detect and cache Mermaid or Mindmap blocks
+    (node as Parent).children?.forEach(preprocess);
+
+    // Only process code blocks with a supported language tag
+    if (node.type === "code" && /(mindmap|mermaid|mmd)/.test(node.lang ?? "")) {
+      // Create an extended MDAST-compatible SVG node
+      const svgNode: SVG = {
+        type: "svg",
+        value: '<svg xmlns="http://www.w3.org/2000/svg"><text>Mock</text></svg>',
+        // Store original Mermaid source in data for traceability/debug
+        data: { mermaid: node.value },
+      };
+
+      // Replace the code block with a paragraph that contains the SVG
+      Object.assign(node, {
+        type: "paragraph",
+        children: [svgNode],
+        data: { alignment: "center" }, // center-align diagram
+      });
+    }
+  };
+  return {
+    __esModule: true,
+    mermaidPlugin: () => ({
+      preprocess,
+    }),
+  };
+});
+
+(SVGElement.prototype as any).getComputedTextLength = () => 100; // or any fixed number
+
+(HTMLCanvasElement.prototype as any).getContext = vi.fn(() => {
+  return {
+    drawImage: vi.fn(),
+    toDataURL: vi.fn(() => "data:image/png;base64,fakepng"),
+  };
+});