html2canvas-pro 1.6.4 → 1.6.5

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.6.4 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 1.6.5 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -4120,6 +4120,71 @@ const textDecorationLine = {
     }
 };
 
+const textDecorationStyle = {
+    name: 'text-decoration-style',
+    initialValue: 'solid',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, style) => {
+        switch (style) {
+            case 'double':
+                return 1 /* TEXT_DECORATION_STYLE.DOUBLE */;
+            case 'dotted':
+                return 2 /* TEXT_DECORATION_STYLE.DOTTED */;
+            case 'dashed':
+                return 3 /* TEXT_DECORATION_STYLE.DASHED */;
+            case 'wavy':
+                return 4 /* TEXT_DECORATION_STYLE.WAVY */;
+            case 'solid':
+            default:
+                return 0 /* TEXT_DECORATION_STYLE.SOLID */;
+        }
+    }
+};
+
+const textDecorationThickness = {
+    name: 'text-decoration-thickness',
+    initialValue: 'auto',
+    prefix: false,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
+    parse: (_context, token) => {
+        if (isIdentToken(token)) {
+            switch (token.value) {
+                case 'auto':
+                    return 'auto';
+                case 'from-font':
+                    return 'from-font';
+            }
+        }
+        if (isDimensionToken(token)) {
+            // Convert to pixels
+            return token.number;
+        }
+        // Default to auto
+        return 'auto';
+    }
+};
+
+const textUnderlineOffset = {
+    name: 'text-underline-offset',
+    initialValue: 'auto',
+    prefix: false,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
+    parse: (_context, token) => {
+        if (isIdentToken(token)) {
+            if (token.value === 'auto') {
+                return 'auto';
+            }
+        }
+        if (isDimensionToken(token)) {
+            // Return pixel value
+            return token.number;
+        }
+        // Default to auto
+        return 'auto';
+    }
+};
+
 const fontFamily = {
     name: `font-family`,
     initialValue: '',
@@ -4448,6 +4513,22 @@ const parseDisplayValue = (display) => {
     return 0 /* OBJECT_FIT.FILL */;
 };
 
+const textOverflow = {
+    name: 'text-overflow',
+    initialValue: 'clip',
+    prefix: false,
+    type: 2 /* PropertyDescriptorParsingType.IDENT_VALUE */,
+    parse: (_context, textOverflow) => {
+        switch (textOverflow) {
+            case 'ellipsis':
+                return 1 /* TEXT_OVERFLOW.ELLIPSIS */;
+            case 'clip':
+            default:
+                return 0 /* TEXT_OVERFLOW.CLIP */;
+        }
+    }
+};
+
 class CSSParsedDeclaration {
     constructor(context, declaration) {
         this.animationDuration = parse(context, duration, declaration.animationDuration);
@@ -4508,8 +4589,12 @@ class CSSParsedDeclaration {
         this.textAlign = parse(context, textAlign, declaration.textAlign);
         this.textDecorationColor = parse(context, textDecorationColor, declaration.textDecorationColor ?? declaration.color);
         this.textDecorationLine = parse(context, textDecorationLine, declaration.textDecorationLine ?? declaration.textDecoration);
+        this.textDecorationStyle = parse(context, textDecorationStyle, declaration.textDecorationStyle);
+        this.textDecorationThickness = parse(context, textDecorationThickness, declaration.textDecorationThickness);
+        this.textUnderlineOffset = parse(context, textUnderlineOffset, declaration.textUnderlineOffset);
         this.textShadow = parse(context, textShadow, declaration.textShadow);
         this.textTransform = parse(context, textTransform, declaration.textTransform);
+        this.textOverflow = parse(context, textOverflow, declaration.textOverflow);
         this.transform = parse(context, transform$1, declaration.transform);
         this.transformOrigin = parse(context, transformOrigin, declaration.transformOrigin);
         this.rotate = parse(context, rotate, declaration.rotate);
@@ -6004,6 +6089,27 @@ const createCounterText = (value, type, appendSuffix) => {
 };
 
 const IGNORE_ATTRIBUTE = 'data-html2canvas-ignore';
+/**
+ * Find the parent ShadowRoot of an element, if any
+ * @param element - The element to check
+ * @returns The parent ShadowRoot or null
+ */
+const findParentShadowRoot = (element) => {
+    let current = element;
+    while (current) {
+        // Check if we've reached a shadow root boundary
+        if (current.parentNode && current.parentNode.host) {
+            return current.parentNode;
+        }
+        // Use getRootNode to check if we're in a shadow root
+        const root = current.getRootNode();
+        if (root && root !== current.ownerDocument && root.host) {
+            return root;
+        }
+        current = current.parentNode;
+    }
+    return null;
+};
 class DocumentCloner {
     constructor(context, element, options) {
         this.context = context;
@@ -6015,10 +6121,17 @@ class DocumentCloner {
         if (!element.ownerDocument) {
             throw new Error('Cloned element does not have an owner document');
         }
+        // Auto-detect Shadow Root if not explicitly provided
+        if (!this.options.iframeContainer) {
+            const shadowRoot = findParentShadowRoot(element);
+            if (shadowRoot) {
+                this.options.iframeContainer = shadowRoot;
+            }
+        }
         this.documentElement = this.cloneNode(element.ownerDocument.documentElement, false);
     }
     toIFrame(ownerDocument, windowSize) {
-        const iframe = createIFrameContainer(ownerDocument, windowSize);
+        const iframe = createIFrameContainer(ownerDocument, windowSize, this.options.iframeContainer);
         if (!iframe.contentWindow) {
             return Promise.reject(`Unable to find iframe window`);
         }
@@ -6124,20 +6237,8 @@ class DocumentCloner {
         return clone;
     }
     createCustomElementClone(node) {
-        // Ensure html2canvascustomelement is defined
-        if (typeof window !== 'undefined' && !customElements.get('html2canvascustomelement')) {
-            try {
-                customElements.define('html2canvascustomelement', class extends HTMLElement {
-                    constructor() {
-                        super();
-                    }
-                });
-            }
-            catch (e) {
-                // Already defined or cannot define
-            }
-        }
-        const clone = document.createElement('html2canvascustomelement');
+        const clone = document.createElement('div');
+        clone.className = node.className;
         copyCSSStyles(node.style, clone);
         // Clone shadow DOM if it exists
         // Fix for Issue #108: This is critical for Web Components with slots to work correctly
@@ -6166,6 +6267,9 @@ class DocumentCloner {
                 }, '');
                 const style = node.cloneNode(false);
                 style.textContent = css;
+                if (this.options.cspNonce) {
+                    style.nonce = this.options.cspNonce;
+                }
                 return style;
             }
         }
@@ -6176,7 +6280,11 @@ class DocumentCloner {
                 throw e;
             }
         }
-        return node.cloneNode(false);
+        const cloned = node.cloneNode(false);
+        if (this.options.cspNonce) {
+            cloned.nonce = this.options.cspNonce;
+        }
+        return cloned;
     }
     createCanvasClone(canvas) {
         if (this.options.inlineImages && canvas.ownerDocument) {
@@ -6281,7 +6389,7 @@ class DocumentCloner {
                 this.clonedReferenceElement = clone;
             }
             if (isBodyElement(clone)) {
-                createPseudoHideStyles(clone);
+                createPseudoHideStyles(clone, this.options.cspNonce);
             }
             const counters = this.counters.parse(new CSSParsedCounterDeclaration(this.context, style));
             const before = this.resolvePseudoContent(node, clone, styleBefore, PseudoElementType.BEFORE);
@@ -6409,7 +6517,7 @@ var PseudoElementType;
     PseudoElementType[PseudoElementType["BEFORE"] = 0] = "BEFORE";
     PseudoElementType[PseudoElementType["AFTER"] = 1] = "AFTER";
 })(PseudoElementType || (PseudoElementType = {}));
-const createIFrameContainer = (ownerDocument, bounds) => {
+const createIFrameContainer = (ownerDocument, bounds, customContainer) => {
     const cloneIframeContainer = ownerDocument.createElement('iframe');
     cloneIframeContainer.className = 'html2canvas-container';
     cloneIframeContainer.style.visibility = 'hidden';
@@ -6421,7 +6529,9 @@ const createIFrameContainer = (ownerDocument, bounds) => {
     cloneIframeContainer.height = bounds.height.toString();
     cloneIframeContainer.scrolling = 'no'; // ios won't scroll without it
     cloneIframeContainer.setAttribute(IGNORE_ATTRIBUTE, 'true');
-    ownerDocument.body.appendChild(cloneIframeContainer);
+    // Use custom container if provided, otherwise use body
+    const container = customContainer || ownerDocument.body;
+    container.appendChild(cloneIframeContainer);
     return cloneIframeContainer;
 };
 const imageReady = (img) => {
@@ -6514,15 +6624,18 @@ const PSEUDO_HIDE_ELEMENT_STYLE = `{
     content: "" !important;
     display: none !important;
 }`;
-const createPseudoHideStyles = (body) => {
+const createPseudoHideStyles = (body, cspNonce) => {
     createStyles(body, `.${PSEUDO_HIDE_ELEMENT_CLASS_BEFORE}${PSEUDO_BEFORE}${PSEUDO_HIDE_ELEMENT_STYLE}
-         .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`);
+         .${PSEUDO_HIDE_ELEMENT_CLASS_AFTER}${PSEUDO_AFTER}${PSEUDO_HIDE_ELEMENT_STYLE}`, cspNonce);
 };
-const createStyles = (body, styles) => {
+const createStyles = (body, styles, cspNonce) => {
     const document = body.ownerDocument;
     if (document) {
         const style = document.createElement('style');
         style.textContent = styles;
+        if (cspNonce) {
+            style.nonce = cspNonce;
+        }
         body.appendChild(style);
     }
 };
@@ -7525,6 +7638,134 @@ class CanvasRenderer extends Renderer {
             }, text.bounds.left);
         }
     }
+    renderTextDecoration(bounds, styles) {
+        this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
+        // Calculate decoration line thickness
+        let thickness = 1; // default
+        if (typeof styles.textDecorationThickness === 'number') {
+            thickness = styles.textDecorationThickness;
+        }
+        else if (styles.textDecorationThickness === 'from-font') {
+            // Use a reasonable default based on font size
+            thickness = Math.max(1, Math.floor(styles.fontSize.number * 0.05));
+        }
+        // 'auto' uses default thickness of 1
+        // Calculate underline offset
+        let underlineOffset = 0;
+        if (typeof styles.textUnderlineOffset === 'number') {
+            // It's a pixel value
+            underlineOffset = styles.textUnderlineOffset;
+        }
+        // 'auto' uses default offset of 0
+        const decorationStyle = styles.textDecorationStyle;
+        styles.textDecorationLine.forEach((textDecorationLine) => {
+            let y = 0;
+            switch (textDecorationLine) {
+                case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
+                    y = bounds.top + bounds.height - thickness + underlineOffset;
+                    break;
+                case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
+                    y = bounds.top;
+                    break;
+                case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
+                    y = bounds.top + (bounds.height / 2 - thickness / 2);
+                    break;
+                default:
+                    return;
+            }
+            this.drawDecorationLine(bounds.left, y, bounds.width, thickness, decorationStyle);
+        });
+    }
+    drawDecorationLine(x, y, width, thickness, style) {
+        switch (style) {
+            case 0 /* TEXT_DECORATION_STYLE.SOLID */:
+                // Solid line (default)
+                this.ctx.fillRect(x, y, width, thickness);
+                break;
+            case 1 /* TEXT_DECORATION_STYLE.DOUBLE */:
+                // Double line
+                const gap = Math.max(1, thickness);
+                this.ctx.fillRect(x, y, width, thickness);
+                this.ctx.fillRect(x, y + thickness + gap, width, thickness);
+                break;
+            case 2 /* TEXT_DECORATION_STYLE.DOTTED */:
+                // Dotted line
+                this.ctx.save();
+                this.ctx.beginPath();
+                this.ctx.setLineDash([thickness, thickness * 2]);
+                this.ctx.lineWidth = thickness;
+                this.ctx.strokeStyle = this.ctx.fillStyle;
+                this.ctx.moveTo(x, y + thickness / 2);
+                this.ctx.lineTo(x + width, y + thickness / 2);
+                this.ctx.stroke();
+                this.ctx.restore();
+                break;
+            case 3 /* TEXT_DECORATION_STYLE.DASHED */:
+                // Dashed line
+                this.ctx.save();
+                this.ctx.beginPath();
+                this.ctx.setLineDash([thickness * 3, thickness * 2]);
+                this.ctx.lineWidth = thickness;
+                this.ctx.strokeStyle = this.ctx.fillStyle;
+                this.ctx.moveTo(x, y + thickness / 2);
+                this.ctx.lineTo(x + width, y + thickness / 2);
+                this.ctx.stroke();
+                this.ctx.restore();
+                break;
+            case 4 /* TEXT_DECORATION_STYLE.WAVY */:
+                // Wavy line (approximation using quadratic curves)
+                this.ctx.save();
+                this.ctx.beginPath();
+                this.ctx.lineWidth = thickness;
+                this.ctx.strokeStyle = this.ctx.fillStyle;
+                const amplitude = thickness * 2;
+                const wavelength = thickness * 4;
+                let currentX = x;
+                this.ctx.moveTo(currentX, y + thickness / 2);
+                while (currentX < x + width) {
+                    const nextX = Math.min(currentX + wavelength / 2, x + width);
+                    this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 - amplitude, nextX, y + thickness / 2);
+                    currentX = nextX;
+                    if (currentX < x + width) {
+                        const nextX2 = Math.min(currentX + wavelength / 2, x + width);
+                        this.ctx.quadraticCurveTo(currentX + wavelength / 4, y + thickness / 2 + amplitude, nextX2, y + thickness / 2);
+                        currentX = nextX2;
+                    }
+                }
+                this.ctx.stroke();
+                this.ctx.restore();
+                break;
+            default:
+                // Fallback to solid
+                this.ctx.fillRect(x, y, width, thickness);
+        }
+    }
+    // Helper method to truncate text and add ellipsis if needed
+    truncateTextWithEllipsis(text, maxWidth, letterSpacing) {
+        const ellipsis = '...';
+        const ellipsisWidth = this.ctx.measureText(ellipsis).width;
+        if (letterSpacing === 0) {
+            let truncated = text;
+            while (this.ctx.measureText(truncated).width + ellipsisWidth > maxWidth && truncated.length > 0) {
+                truncated = truncated.slice(0, -1);
+            }
+            return truncated + ellipsis;
+        }
+        else {
+            const letters = segmentGraphemes(text);
+            let width = ellipsisWidth;
+            let result = [];
+            for (const letter of letters) {
+                const letterWidth = this.ctx.measureText(letter).width + letterSpacing;
+                if (width + letterWidth > maxWidth) {
+                    break;
+                }
+                result.push(letter);
+                width += letterWidth;
+            }
+            return result.join('') + ellipsis;
+        }
+    }
     createFontStyle(styles) {
         const fontVariant = styles.fontVariant
             .filter((variant) => variant === 'normal' || variant === 'small-caps')
@@ -7539,13 +7780,99 @@ class CanvasRenderer extends Renderer {
             fontSize
         ];
     }
-    async renderTextNode(text, styles) {
+    async renderTextNode(text, styles, containerBounds) {
         const [font] = this.createFontStyle(styles);
         this.ctx.font = font;
         this.ctx.direction = styles.direction === 1 /* DIRECTION.RTL */ ? 'rtl' : 'ltr';
         this.ctx.textAlign = 'left';
         this.ctx.textBaseline = 'alphabetic';
         const paintOrder = styles.paintOrder;
+        // Check if we need to apply text-overflow: ellipsis
+        const shouldApplyEllipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ && containerBounds && styles.overflowX === 1 /* OVERFLOW.HIDDEN */;
+        // Calculate total text width if ellipsis might be needed
+        let needsEllipsis = false;
+        let truncatedText = '';
+        if (shouldApplyEllipsis && text.textBounds.length > 0) {
+            // Measure the full text content
+            // Note: text.textBounds may contain whitespace characters from HTML formatting
+            // We need to collapse them like the browser does for white-space: nowrap
+            let fullText = text.textBounds.map((tb) => tb.text).join('');
+            // Collapse whitespace: replace sequences of whitespace (including newlines) with single spaces
+            // and trim leading/trailing whitespace
+            fullText = fullText.replace(/\s+/g, ' ').trim();
+            const fullTextWidth = this.ctx.measureText(fullText).width;
+            const availableWidth = containerBounds.width;
+            if (fullTextWidth > availableWidth) {
+                needsEllipsis = true;
+                truncatedText = this.truncateTextWithEllipsis(fullText, availableWidth, styles.letterSpacing);
+            }
+        }
+        // If ellipsis is needed, render the truncated text once
+        if (needsEllipsis) {
+            const firstBound = text.textBounds[0];
+            paintOrder.forEach((paintOrderLayer) => {
+                switch (paintOrderLayer) {
+                    case 0 /* PAINT_ORDER_LAYER.FILL */:
+                        this.ctx.fillStyle = asString(styles.color);
+                        if (styles.letterSpacing === 0) {
+                            this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                        }
+                        else {
+                            const letters = segmentGraphemes(truncatedText);
+                            letters.reduce((left, letter) => {
+                                this.ctx.fillText(letter, left, firstBound.bounds.top + styles.fontSize.number);
+                                return left + this.ctx.measureText(letter).width + styles.letterSpacing;
+                            }, firstBound.bounds.left);
+                        }
+                        const textShadows = styles.textShadow;
+                        if (textShadows.length && truncatedText.trim().length) {
+                            textShadows
+                                .slice(0)
+                                .reverse()
+                                .forEach((textShadow) => {
+                                this.ctx.shadowColor = asString(textShadow.color);
+                                this.ctx.shadowOffsetX = textShadow.offsetX.number * this.options.scale;
+                                this.ctx.shadowOffsetY = textShadow.offsetY.number * this.options.scale;
+                                this.ctx.shadowBlur = textShadow.blur.number;
+                                if (styles.letterSpacing === 0) {
+                                    this.ctx.fillText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                                }
+                                else {
+                                    const letters = segmentGraphemes(truncatedText);
+                                    letters.reduce((left, letter) => {
+                                        this.ctx.fillText(letter, left, firstBound.bounds.top + styles.fontSize.number);
+                                        return left + this.ctx.measureText(letter).width + styles.letterSpacing;
+                                    }, firstBound.bounds.left);
+                                }
+                            });
+                            this.ctx.shadowColor = '';
+                            this.ctx.shadowOffsetX = 0;
+                            this.ctx.shadowOffsetY = 0;
+                            this.ctx.shadowBlur = 0;
+                        }
+                        break;
+                    case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                        if (styles.webkitTextStrokeWidth && truncatedText.trim().length) {
+                            this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                            this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                            this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                            if (styles.letterSpacing === 0) {
+                                this.ctx.strokeText(truncatedText, firstBound.bounds.left, firstBound.bounds.top + styles.fontSize.number);
+                            }
+                            else {
+                                const letters = segmentGraphemes(truncatedText);
+                                letters.reduce((left, letter) => {
+                                    this.ctx.strokeText(letter, left, firstBound.bounds.top + styles.fontSize.number);
+                                    return left + this.ctx.measureText(letter).width + styles.letterSpacing;
+                                }, firstBound.bounds.left);
+                            }
+                        }
+                        break;
+                }
+            });
+            return;
+        }
+        // Normal rendering (no ellipsis needed)
         text.textBounds.forEach((text) => {
             paintOrder.forEach((paintOrderLayer) => {
                 switch (paintOrderLayer) {
@@ -7570,22 +7897,7 @@ class CanvasRenderer extends Renderer {
                             this.ctx.shadowBlur = 0;
                         }
                         if (styles.textDecorationLine.length) {
-                            this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
-                            const decorationLineHeight = 1;
-                            styles.textDecorationLine.forEach((textDecorationLine) => {
-                                // Fix the issue where textDecorationLine exhibits x-axis positioning errors on high-resolution devices due to varying devicePixelRatio, corrected by using relative values of element heights.
-                                switch (textDecorationLine) {
-                                    case 1 /* TEXT_DECORATION_LINE.UNDERLINE */:
-                                        this.ctx.fillRect(text.bounds.left, text.bounds.top + text.bounds.height - decorationLineHeight, text.bounds.width, decorationLineHeight);
-                                        break;
-                                    case 2 /* TEXT_DECORATION_LINE.OVERLINE */:
-                                        this.ctx.fillRect(text.bounds.left, text.bounds.top, text.bounds.width, decorationLineHeight);
-                                        break;
-                                    case 3 /* TEXT_DECORATION_LINE.LINE_THROUGH */:
-                                        this.ctx.fillRect(text.bounds.left, text.bounds.top + (text.bounds.height / 2 - decorationLineHeight / 2), text.bounds.width, decorationLineHeight);
-                                        break;
-                                }
-                            });
+                            this.renderTextDecoration(text.bounds, styles);
                         }
                         break;
                     case 1 /* PAINT_ORDER_LAYER.STROKE */:
@@ -7707,8 +8019,11 @@ class CanvasRenderer extends Renderer {
         const container = paint.container;
         const curves = paint.curves;
         const styles = container.styles;
+        // Use content box for text overflow calculation (excludes padding and border)
+        // This matches browser behavior where text-overflow uses the content width
+        const textBounds = contentBox(container);
         for (const child of container.textNodes) {
-            await this.renderTextNode(child, styles);
+            await this.renderTextNode(child, styles, textBounds);
         }
         if (container instanceof ImageElementContainer) {
             try {
@@ -8363,9 +8678,14 @@ class Context {
 }
 Context.instanceCount = 1;
 
+let cspNonce;
+const setCspNonce = (nonce) => {
+    cspNonce = nonce;
+};
 const html2canvas = (element, options = {}) => {
     return renderElement(element, options);
 };
+html2canvas.setCspNonce = setCspNonce;
 if (typeof window !== 'undefined') {
     CacheStorage.setContext(window);
 }
@@ -8406,8 +8726,10 @@ const renderElement = async (element, opts) => {
         allowTaint: opts.allowTaint ?? false,
         onclone: opts.onclone,
         ignoreElements: opts.ignoreElements,
+        iframeContainer: opts.iframeContainer,
         inlineImages: foreignObjectRendering,
-        copyStyles: foreignObjectRendering
+        copyStyles: foreignObjectRendering,
+        cspNonce
     };
     context.logger.debug(`Starting document clone with size ${windowBounds.width}x${windowBounds.height} scrolled to ${-windowBounds.left},${-windowBounds.top}`);
     const documentCloner = new DocumentCloner(context, element, cloneOptions);
@@ -8477,5 +8799,5 @@ const parseBackgroundColor = (context, element, backgroundColorOverride) => {
         : defaultBackgroundColor;
 };
 
-export { html2canvas as default, html2canvas };
+export { html2canvas as default, html2canvas, setCspNonce };
 //# sourceMappingURL=html2canvas-pro.esm.js.map