structured-render 0.0.2 → 0.0.4

package/dist/elements/vir-markdown.element.js

@@ -55,7 +55,9 @@ export const VirMarkdown = defineElement()({
                         class=${contentDivClass}
                         ${onDomCreated((element) => {
                 if (element instanceof HTMLElement) {
-                    updateState({ renderedElement: element });
+                    updateState({
+                        renderedElement: element,
+                    });
                 }
             })}
                     >

package/dist/render/browser-rendering.js

@@ -4,10 +4,9 @@ import DOMPurify from 'dompurify';
 import { convertTemplateToString, html } from 'element-vir';
 import { marked } from 'marked';
 import { importHtml2Pdf } from './html-to-pdf.js';
-import { contentDivClass } from './render-markdown-styles.js';
+import { baseContentResetStyles, contentDivClass } from './render-markdown-styles.js';
 import { renderStructuredMarkdown } from './render-markdown.js';
 import { defaultRenderMarkdownOptions, } from './render-types.js';
-const globalStyleId = 'structured-rendering-style-id';
 // cspell:disable
 /**
  * Output method types for jsPDF. Extracted from:
@@ -74,6 +73,44 @@ export var OutputImageType;
     OutputImageType["Download"] = "download";
 })(OutputImageType || (OutputImageType = {}));
 // cspell:enable
+/**
+ * Triggers a file download from a Blob without opening the content in the browser.
+ *
+ * Firefox's content handler auto-opens downloaded PDFs in a new tab when it detects the `.pdf`
+ * extension on a blob URL download. To prevent this, Firefox uses a `data:` URI with an
+ * `application/octet-stream` MIME type. Data URIs don't carry a URL path, so Firefox can't perform
+ * extension-based content-type sniffing and won't match the download against its PDF handler.
+ *
+ * Other browsers use a standard blob URL + anchor download approach.
+ */
+async function triggerBlobDownload(blob, downloadFileName) {
+    const anchor = globalThis.document.createElement('a');
+    anchor.download = downloadFileName;
+    anchor.style.display = 'none';
+    if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        const dataUrl = await new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                resolve(String(reader.result).replace(/^data:[^;]*;/, 'data:application/octet-stream;'));
+            };
+            reader.onerror = () => {
+                reject(new Error('Failed to read blob for download.'));
+            };
+            reader.readAsDataURL(blob);
+        });
+        anchor.href = dataUrl;
+    }
+    else {
+        const downloadBlob = new Blob([blob], { type: 'application/octet-stream' });
+        anchor.href = URL.createObjectURL(downloadBlob);
+        globalThis.setTimeout(() => {
+            URL.revokeObjectURL(anchor.href);
+        }, 40_000);
+    }
+    globalThis.document.body.append(anchor);
+    anchor.click();
+    anchor.remove();
+}
 function createHtml2PdfOptions(fileName) {
     return {
         margin: [
@@ -116,48 +153,203 @@ export async function renderInBrowser(structuredRenderData, { fileName, outputTy
         throw new Error(`${renderInNode.name} cannot run outside of a browser.`);
     }
     const options = mergeDefinedProperties(defaultRenderMarkdownOptions, userOptions);
-    const htmlToPdf = await importHtml2Pdf();
+    const [htmlToPdf] = await Promise.all([
+        importHtml2Pdf(),
+        preloadHtml2Canvas(),
+    ]);
     const dirtyHtml = await marked.parse(renderStructuredMarkdown(structuredRenderData, options));
-    const styleElement = assertWrap.instanceOf(globalThis.document.head.querySelector(`#${globalStyleId}`) ||
-        globalThis.document.createElement('style'), HTMLStyleElement);
-    styleElement.id = globalStyleId;
-    if (!styleElement.isConnected) {
-        globalThis.document.head.append(styleElement);
-    }
-    styleElement.textContent = String(options.styles);
     const htmlString = convertTemplateToString(html `
         <div class=${contentDivClass}>${DOMPurify.sanitize(dirtyHtml)}</div>
     `);
-    const instance = htmlToPdf().set(createHtml2PdfOptions(fileName)).from(htmlString);
-    try {
-        if (outputType.pdf) {
+    const html2PdfOptions = createHtml2PdfOptions(fileName);
+    if (outputType.pdf) {
+        /**
+         * For PDFs, create a hidden container in the main document (not an iframe) so html2pdf can
+         * inspect the DOM for page break positions while also having access to the styles. Passing
+         * a canvas loses page break info (tables get sliced). Passing an iframe element loses
+         * styles (html2pdf clones elements into the main document, dropping iframe styles).
+         */
+        const { wrapper, contentElement } = createIsolatedContentDiv(htmlString, String(options.styles), html2PdfOptions);
+        try {
+            const instance = htmlToPdf().set(html2PdfOptions).from(contentElement);
             if (outputType.pdf === OutputPdfType.Download) {
-                return await instance.save(fileName);
+                const pdfBlob = (await instance.outputPdf(OutputPdfType.Blob));
+                const pdfFileName = fileName.endsWith('.pdf')
+                    ? fileName
+                    : `${fileName}.pdf`;
+                await triggerBlobDownload(pdfBlob, pdfFileName);
+                return;
             }
             else {
                 return await instance.outputPdf(outputType.pdf, {
                     filename: fileName,
                 });
             }
-            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
         }
-        else if (outputType.image) {
-            if (outputType.image === OutputImageType.Download) {
-                return await instance.toImg().save(fileName);
-            }
-            else {
-                return await instance.outputImg(outputType.image);
-            }
+        finally {
+            wrapper.remove();
+        }
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    }
+    else if (outputType.image) {
+        /**
+         * For images, render to a canvas in a clean iframe context so html2canvas only clones the
+         * minimal iframe document instead of the entire host page DOM (which is extremely slow on
+         * complex pages). No page break logic is needed for images.
+         */
+        const canvas = await renderHtmlToCanvas(htmlString, String(options.styles), html2PdfOptions);
+        const instance = htmlToPdf().set(html2PdfOptions).from(canvas);
+        if (outputType.image === OutputImageType.Download) {
+            return await instance.toImg().save(fileName);
         }
         else {
-            assert.tsType(outputType).equals();
-            throw new Error(`Invalid output type: ${stringify(outputType)}`);
+            return await instance.outputImg(outputType.image);
         }
     }
+    else {
+        assert.tsType(outputType).equals();
+        throw new Error(`Invalid output type: ${stringify(outputType)}`);
+    }
+}
+/**
+ * Create a hidden container div in the main document with styles and content. Unlike an iframe, the
+ * styles live in the same document context so html2pdf.js can see them when it clones the element.
+ * This allows html2pdf to both render styles correctly AND inspect the DOM for page break positions.
+ *
+ * The caller is responsible for removing the returned wrapper when done.
+ */
+function createIsolatedContentDiv(htmlString, stylesString, html2PdfOptions) {
+    const marginArray = normalizeMargin(html2PdfOptions.margin);
+    /** A4 page width in mm. */
+    const pageWidthMm = 210;
+    const innerWidthMm = pageWidthMm - marginArray[1] - marginArray[3];
+    const wrapper = globalThis.document.createElement('div');
+    wrapper.style.position = 'fixed';
+    wrapper.style.left = '-10000px';
+    wrapper.style.top = '0';
+    wrapper.style.width = `${innerWidthMm}mm`;
+    wrapper.style.overflow = 'hidden';
+    wrapper.setAttribute('aria-hidden', 'true');
+    const styleElement = globalThis.document.createElement('style');
+    styleElement.textContent = [
+        baseContentResetStyles,
+        stylesString,
+    ].join('\n');
+    wrapper.append(styleElement);
+    const contentContainer = globalThis.document.createElement('div');
+    contentContainer.innerHTML = htmlString;
+    wrapper.append(contentContainer);
+    globalThis.document.body.append(wrapper);
+    const contentElement = assertWrap.isDefined(contentContainer.firstElementChild);
+    return { wrapper, contentElement };
+}
+/**
+ * Create an isolated iframe containing the rendered HTML content and styles. The iframe provides a
+ * minimal document context so that html2canvas / html2pdf only need to process a small DOM tree
+ * instead of the entire host page.
+ *
+ * The caller is responsible for removing the iframe when done.
+ */
+async function createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions) {
+    const marginArray = normalizeMargin(html2PdfOptions.margin);
+    /** A4 page width in mm. */
+    const pageWidthMm = 210;
+    const innerWidthMm = pageWidthMm - marginArray[1] - marginArray[3];
+    const iframe = globalThis.document.createElement('iframe');
+    iframe.style.position = 'fixed';
+    iframe.style.left = '-10000px';
+    iframe.style.top = '0';
+    iframe.style.width = `${innerWidthMm}mm`;
+    iframe.style.height = '0';
+    iframe.style.border = 'none';
+    iframe.setAttribute('aria-hidden', 'true');
+    iframe.srcdoc = [
+        '<!DOCTYPE html><html><head><style>',
+        baseContentResetStyles,
+        stylesString,
+        '</style></head><body style="margin:0;padding:0;">',
+        htmlString,
+        '</body></html>',
+    ].join('');
+    globalThis.document.body.append(iframe);
+    await new Promise((resolve) => {
+        iframe.addEventListener('load', () => {
+            resolve();
+        }, {
+            once: true,
+        });
+    });
+    const iframeDoc = assertWrap.isDefined(iframe.contentDocument);
+    await iframeDoc.fonts.ready;
+    /**
+     * Elements from the iframe exist in a different window context, so `instanceof HTMLElement`
+     * (from the parent window) fails. Use assertWrap.isDefined since we control the HTML written to
+     * the iframe and know the first child is always an element.
+     */
+    const contentElement = assertWrap.isDefined(iframeDoc.body.firstElementChild);
+    return { iframe, contentElement };
+}
+/**
+ * Render HTML content to a canvas using a clean, minimal iframe. This avoids the massive
+ * performance penalty from html2canvas cloning the entire host page document (including all custom
+ * elements, shadow DOM, and styles) just to render a small content div.
+ */
+async function renderHtmlToCanvas(htmlString, stylesString, html2PdfOptions) {
+    const { iframe, contentElement } = await createIsolatedContentIframe(htmlString, stylesString, html2PdfOptions);
+    try {
+        return await importHtml2Canvas()(contentElement, {
+            ...html2PdfOptions.html2canvas,
+        });
+    }
     finally {
-        styleElement.remove();
+        iframe.remove();
     }
 }
+let cachedHtml2Canvas;
+function importHtml2Canvas() {
+    if (!cachedHtml2Canvas) {
+        throw new Error('html2canvas has not been loaded yet. Call preloadHtml2Canvas() first.');
+    }
+    return cachedHtml2Canvas;
+}
+async function preloadHtml2Canvas() {
+    if (!cachedHtml2Canvas) {
+        // @ts-expect-error: html2canvas is a CJS module that doesn't properly resolve under node16 module resolution.
+        cachedHtml2Canvas = (await import('html2canvas')).default;
+    }
+}
+function normalizeMargin(margin) {
+    if (margin == undefined) {
+        return [
+            0,
+            0,
+            0,
+            0,
+        ];
+    }
+    if (typeof margin === 'number') {
+        return [
+            margin,
+            margin,
+            margin,
+            margin,
+        ];
+    }
+    if (margin.length === 2) {
+        return [
+            margin[0],
+            margin[1],
+            margin[0],
+            margin[1],
+        ];
+    }
+    return [
+        margin[0],
+        margin[1],
+        margin[2],
+        margin[3],
+    ];
+}
 /**
  * Internal common Node.js structure render renderer.
  *
@@ -187,12 +379,20 @@ export async function renderInNode(structuredRenderData, { saveLocationPath, out
     const browser = await chromium.launch();
     try {
         const page = await browser.newPage();
-        await page.setContent(baseHtmlString, { waitUntil: 'networkidle' });
-        await page.addScriptTag({ content: html2pdfScript });
-        await page.addScriptTag({ content: domPurifyScript });
+        await page.setContent(baseHtmlString, {
+            waitUntil: 'networkidle',
+        });
+        await page.addScriptTag({
+            content: html2pdfScript,
+        });
+        await page.addScriptTag({
+            content: domPurifyScript,
+        });
         const html2pdfOptions = createHtml2PdfOptions(basename(saveLocationPath));
         if (outputType.image) {
-            html2pdfOptions.image = { type: 'png' };
+            html2pdfOptions.image = {
+                type: 'png',
+            };
         }
         const pdfBase64 = await page.evaluate(async ({ html2pdfOptions, outputType, dirtyMarkdown, wrapperClass, outputImageType, outputPdfType, }) => {
             const cleanHtml = DOMPurify.sanitize(dirtyMarkdown);
@@ -223,7 +423,9 @@ export async function renderInNode(structuredRenderData, { saveLocationPath, out
             outputPdfType: OutputPdfType.DataUriString,
         });
         const base64Data = pdfBase64.split(',')[1];
-        await mkdir(dirname(saveLocationPath), { recursive: true });
+        await mkdir(dirname(saveLocationPath), {
+            recursive: true,
+        });
         await writeFile(saveLocationPath, Buffer.from(base64Data, 'base64'));
     }
     finally {

package/dist/render/render-pdf.js

@@ -50,16 +50,65 @@ export async function printPdf(renderInput, params) {
         ...params,
     }));
     const blobUrl = URL.createObjectURL(pdfBlob);
+    /**
+     * Firefox uses PDF.js to render PDFs in iframes, which doesn't support printing via
+     * `contentWindow.print()` on blob URLs. Open a new window instead so Firefox's native PDF
+     * viewer handles it.
+     */
+    if (navigator.userAgent.toLowerCase().includes('firefox')) {
+        const printWindow = globalThis.window.open(blobUrl);
+        if (!printWindow) {
+            URL.revokeObjectURL(blobUrl);
+            throw new Error('Failed to open print window. Check your popup blocker settings.');
+        }
+        return;
+    }
     const printFrame = globalThis.document.createElement('iframe');
-    printFrame.style.display = 'none';
+    printFrame.style.position = 'fixed';
+    printFrame.style.left = '-10000px';
+    printFrame.style.top = '0';
+    printFrame.style.width = '1px';
+    printFrame.style.height = '1px';
+    printFrame.style.border = 'none';
+    printFrame.style.opacity = '0';
     printFrame.src = blobUrl;
     globalThis.document.body.append(printFrame);
     return new Promise((resolve) => {
         printFrame.onload = () => {
-            printFrame.contentWindow?.print();
-            URL.revokeObjectURL(blobUrl);
-            resolve();
-            printFrame.remove();
+            const contentWindow = printFrame.contentWindow;
+            if (!contentWindow) {
+                URL.revokeObjectURL(blobUrl);
+                printFrame.remove();
+                resolve();
+                return;
+            }
+            function cleanup() {
+                URL.revokeObjectURL(blobUrl);
+                printFrame.remove();
+                resolve();
+            }
+            let resolved = false;
+            function resolveOnce() {
+                if (resolved) {
+                    return;
+                }
+                resolved = true;
+                globalThis.window.removeEventListener('focus', focusFallback);
+                cleanup();
+            }
+            /**
+             * Fallback: when the print dialog closes (print or cancel), focus returns to the main
+             * window. Some browsers don't fire `afterprint` on the iframe's contentWindow when the
+             * user cancels.
+             */
+            function focusFallback() {
+                resolveOnce();
+            }
+            contentWindow.addEventListener('afterprint', () => {
+                resolveOnce();
+            }, { once: true });
+            globalThis.window.addEventListener('focus', focusFallback, { once: true });
+            contentWindow.print();
         };
     });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "structured-render",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "description": "A library for safely rendering arbitrary data generated from any source.",
     "keywords": [
         "render",
@@ -45,6 +45,7 @@
         "@electrovir/color": "^1.7.8",
         "dompurify": "^3.3.1",
         "element-vir": "^26.14.4",
+        "html2canvas": "^1.4.1",
         "html2pdf.js": "^0.14.0",
         "lit-css-vars": "^3.5.0",
         "marked": "^17.0.3",