@pixldocs/canvas-renderer 0.5.18 → 0.5.19

package/dist/index.js

@@ -11985,6 +11985,66 @@ function PixldocsPreview(props) {
     !canvasSettled && /* @__PURE__ */ jsx("div", { style: { position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center", minHeight: 200 }, children: /* @__PURE__ */ jsx("div", { style: { color: "#888", fontSize: 14 }, children: "Loading preview..." }) })
   ] });
 }
+const inlinedAssetCache = /* @__PURE__ */ new Map();
+function shouldInlineImageUrl(url) {
+  if (!url || url.startsWith("data:")) return false;
+  if (url.startsWith("blob:")) return true;
+  if (url.startsWith("/") && !url.startsWith("//")) return true;
+  try {
+    const parsed = new URL(url, window.location.href);
+    const current = new URL(window.location.href);
+    const host = parsed.hostname.toLowerCase();
+    return parsed.origin === current.origin || host === "localhost" || host === "127.0.0.1" || host === "0.0.0.0" || host.endsWith(".local") || /^(10\.|192\.168\.|169\.254\.)/.test(host);
+  } catch {
+    return false;
+  }
+}
+async function imageUrlToDataUrl(url) {
+  if (inlinedAssetCache.has(url)) return inlinedAssetCache.get(url) ?? null;
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`HTTP ${response.status}`);
+    const blob = await response.blob();
+    if (blob.type.includes("text/html")) throw new Error("Expected image but got text/html");
+    const dataUrl = await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(String(reader.result || ""));
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+    inlinedAssetCache.set(url, dataUrl);
+    return dataUrl;
+  } catch (error) {
+    console.warn("[@pixldocs/canvas-renderer] Failed to inline image asset:", url, error);
+    inlinedAssetCache.set(url, null);
+    return null;
+  }
+}
+async function inlineNodeAssets(node) {
+  if (node.type === "image") {
+    const url = typeof node.src === "string" && node.src.trim() ? node.src.trim() : typeof node.imageUrl === "string" ? node.imageUrl.trim() : "";
+    if (shouldInlineImageUrl(url)) {
+      const dataUrl = await imageUrlToDataUrl(url);
+      if (dataUrl) {
+        node.src = dataUrl;
+        node.imageUrl = dataUrl;
+      }
+    }
+  }
+  if (Array.isArray(node.children)) {
+    await Promise.all(node.children.map(inlineNodeAssets));
+  }
+}
+async function inlineBrowserReachableImageAssets(config) {
+  if (typeof window === "undefined" || typeof fetch === "undefined" || typeof FileReader === "undefined") {
+    return config;
+  }
+  const cloned = JSON.parse(JSON.stringify(config));
+  await Promise.all(
+    (cloned.pages || []).flatMap((page) => (page.children || []).map(inlineNodeAssets))
+  );
+  return cloned;
+}
 class PixldocsRenderer {
   constructor(config) {
     __publicField(this, "config");
@@ -11995,21 +12055,22 @@ class PixldocsRenderer {
    * Mounts a hidden PreviewCanvas component and captures the Fabric canvas output.
    */
   async render(templateConfig, options = {}) {
+    const renderConfig = await inlineBrowserReachableImageAssets(templateConfig);
     const pageIndex = options.pageIndex ?? 0;
     const format = options.format ?? "png";
     const quality = options.quality ?? 0.92;
     const pixelRatio = options.pixelRatio ?? this.config.pixelRatio ?? 2;
-    const canvasWidth = templateConfig.canvas.width;
-    const canvasHeight = templateConfig.canvas.height;
-    const page = templateConfig.pages[pageIndex];
+    const canvasWidth = renderConfig.canvas.width;
+    const canvasHeight = renderConfig.canvas.height;
+    const page = renderConfig.pages[pageIndex];
     if (!page) {
-      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
+      throw new Error(`Page index ${pageIndex} not found (template has ${renderConfig.pages.length} pages)`);
     }
-    await ensureFontsForResolvedConfig(templateConfig);
+    await ensureFontsForResolvedConfig(renderConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
     const dataUrl = await this.renderPageViaPreviewCanvas(
-      templateConfig,
+      renderConfig,
       pageIndex,
       pixelRatio,
       format,
@@ -12061,16 +12122,17 @@ class PixldocsRenderer {
    * This is the key building block for client-side vector PDF export.
    */
   async renderPageSvg(templateConfig, pageIndex = 0) {
-    const page = templateConfig.pages[pageIndex];
+    const renderConfig = await inlineBrowserReachableImageAssets(templateConfig);
+    const page = renderConfig.pages[pageIndex];
     if (!page) {
-      throw new Error(`Page index ${pageIndex} not found (template has ${templateConfig.pages.length} pages)`);
+      throw new Error(`Page index ${pageIndex} not found (template has ${renderConfig.pages.length} pages)`);
     }
-    await ensureFontsForResolvedConfig(templateConfig);
+    await ensureFontsForResolvedConfig(renderConfig);
     const { setPackageApiUrl: setPackageApiUrl2 } = await Promise.resolve().then(() => appApi);
     setPackageApiUrl2(this.config.imageProxyUrl);
-    const canvasWidth = templateConfig.canvas.width;
-    const canvasHeight = templateConfig.canvas.height;
-    return this.captureSvgViaPreviewCanvas(templateConfig, pageIndex, canvasWidth, canvasHeight);
+    const canvasWidth = renderConfig.canvas.width;
+    const canvasHeight = renderConfig.canvas.height;
+    return this.captureSvgViaPreviewCanvas(renderConfig, pageIndex, canvasWidth, canvasHeight);
   }
   /**
    * Render all pages and return SVG strings for each.
@@ -12418,7 +12480,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("Render timeout (30s)"));
       }, 3e4);
-      let stabilizationPass = 0;
+      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12428,22 +12490,12 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (stabilizationPass === 0) {
-          stabilizationPass = 1;
-          root.render(
-            createElement(PreviewCanvas2, {
-              config,
-              pageIndex,
-              zoom: pixelRatio,
-              absoluteZoom: true,
-              skipFontReadyWait: true,
-              onReady
-            })
-          );
-          return;
-        }
+        if (finished) return;
+        finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           try {
+            await this.waitForStableTextMetrics(container, config);
+            await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             const expectedImageCount = this.getExpectedImageCount(config, pageIndex);
             await this.waitForCanvasImages(container, expectedImageCount);
@@ -12514,7 +12566,7 @@ class PixldocsRenderer {
         cleanup();
         reject(new Error("SVG render timeout (30s)"));
       }, 3e4);
-      let stabilizationPass = 0;
+      let finished = false;
       const cleanup = () => {
         clearTimeout(timeout);
         try {
@@ -12524,23 +12576,13 @@ class PixldocsRenderer {
         container.remove();
       };
       const onReady = () => {
-        if (stabilizationPass === 0) {
-          stabilizationPass = 1;
-          root.render(
-            createElement(PreviewCanvas2, {
-              config,
-              pageIndex,
-              zoom: 1,
-              absoluteZoom: true,
-              skipFontReadyWait: true,
-              onReady
-            })
-          );
-          return;
-        }
+        if (finished) return;
+        finished = true;
         this.waitForCanvasScene(container, config, pageIndex).then(async () => {
           var _a, _b;
           try {
+            await this.waitForStableTextMetrics(container, config);
+            await this.waitForCanvasScene(container, config, pageIndex, 2500, 50);
             const fabricInstance = this.getFabricCanvasFromContainer(container);
             if (!fabricInstance) {
               cleanup();