html2canvas-pro 1.6.5 → 1.6.7

package/dist/html2canvas-pro.esm.js

@@ -1,5 +1,5 @@
 /*!
- * html2canvas-pro 1.6.5 <https://yorickshan.github.io/html2canvas-pro/>
+ * html2canvas-pro 1.6.7 <https://yorickshan.github.io/html2canvas-pro/>
  * Copyright (c) 2024-present yorickshan and html2canvas-pro contributors
  * Released under MIT License
  */
@@ -4488,6 +4488,30 @@ const webkitTextStrokeWidth = {
     }
 };
 
+/**
+ * -webkit-line-clamp property descriptor
+ * Used with display: -webkit-box and -webkit-box-orient: vertical
+ * to limit text to a specific number of lines
+ */
+const webkitLineClamp = {
+    name: '-webkit-line-clamp',
+    initialValue: 'none',
+    prefix: true,
+    type: 0 /* PropertyDescriptorParsingType.VALUE */,
+    parse: (_context, token) => {
+        // 'none' means no line clamping
+        if (token.type === 20 /* TokenType.IDENT_TOKEN */ && token.value === 'none') {
+            return 0;
+        }
+        // Number value specifies the number of lines
+        if (token.type === 17 /* TokenType.NUMBER_TOKEN */) {
+            return Math.max(0, Math.floor(token.number));
+        }
+        // Default to 0 (no clamping)
+        return 0;
+    }
+};
+
 const objectFit = {
     name: 'objectFit',
     initialValue: 'fill',
@@ -4601,6 +4625,7 @@ class CSSParsedDeclaration {
         this.visibility = parse(context, visibility, declaration.visibility);
         this.webkitTextStrokeColor = parse(context, webkitTextStrokeColor, declaration.webkitTextStrokeColor);
         this.webkitTextStrokeWidth = parse(context, webkitTextStrokeWidth, declaration.webkitTextStrokeWidth);
+        this.webkitLineClamp = parse(context, webkitLineClamp, declaration.webkitLineClamp);
         this.wordBreak = parse(context, wordBreak, declaration.wordBreak);
         this.zIndex = parse(context, zIndex, declaration.zIndex);
         this.objectFit = parse(context, objectFit, declaration.objectFit);
@@ -6357,20 +6382,161 @@ class DocumentCloner {
             }
         }
     }
-    cloneChildNodes(node, clone, copyStyles) {
-        // Clone shadow DOM content if it exists
-        if (node.shadowRoot && clone.shadowRoot) {
-            for (let child = node.shadowRoot.firstChild; child; child = child.nextSibling) {
-                // Clone all shadow DOM children including <slot> elements
-                // The browser will automatically handle slot assignment
-                clone.shadowRoot.appendChild(this.cloneNode(child, copyStyles));
+    /**
+     * Check if a child node should be cloned based on filtering rules
+     * Filters out: scripts, ignored elements, and optionally styles
+     */
+    shouldCloneChild(child) {
+        return (!isElementNode(child) ||
+            (!isScriptElement(child) &&
+                !child.hasAttribute(IGNORE_ATTRIBUTE) &&
+                (typeof this.options.ignoreElements !== 'function' || !this.options.ignoreElements(child))));
+    }
+    /**
+     * Check if a style element should be cloned based on copyStyles option
+     */
+    shouldCloneStyleElement(child) {
+        return !this.options.copyStyles || !isElementNode(child) || !isStyleElement(child);
+    }
+    /**
+     * Safely append a cloned child to a target, applying all filtering rules
+     */
+    safeAppendClonedChild(target, child, copyStyles) {
+        if (this.shouldCloneChild(child) && this.shouldCloneStyleElement(child)) {
+            target.appendChild(this.cloneNode(child, copyStyles));
+        }
+    }
+    /**
+     * Clone assigned nodes from a slot element to the target
+     */
+    cloneAssignedNodes(assignedNodes, target, copyStyles) {
+        assignedNodes.forEach((node) => {
+            this.safeAppendClonedChild(target, node, copyStyles);
+        });
+    }
+    /**
+     * Clone fallback content from a slot element when no nodes are assigned
+     */
+    cloneSlotFallbackContent(slot, target, copyStyles) {
+        for (let child = slot.firstChild; child; child = child.nextSibling) {
+            this.safeAppendClonedChild(target, child, copyStyles);
+        }
+    }
+    /**
+     * Handle cloning of a slot element, including assigned nodes or fallback content
+     */
+    cloneSlotElement(slot, targetShadowRoot, copyStyles) {
+        if (!isSlotElement(slot)) {
+            return;
+        }
+        const slotElement = slot;
+        // Defensive check: ensure assignedNodes method exists
+        if (typeof slotElement.assignedNodes !== 'function') {
+            this.context.logger.warn('HTMLSlotElement.assignedNodes is not available', slot);
+            this.cloneSlotFallbackContent(slot, targetShadowRoot, copyStyles);
+            return;
+        }
+        const assignedNodes = slotElement.assignedNodes();
+        // Defensive check: ensure assignedNodes returns an array
+        if (!assignedNodes || !Array.isArray(assignedNodes)) {
+            this.context.logger.warn('assignedNodes() did not return a valid array', slot);
+            this.cloneSlotFallbackContent(slot, targetShadowRoot, copyStyles);
+            return;
+        }
+        if (assignedNodes.length > 0) {
+            // Clone assigned nodes
+            this.cloneAssignedNodes(assignedNodes, targetShadowRoot, copyStyles);
+        }
+        else {
+            // Clone fallback content
+            this.cloneSlotFallbackContent(slot, targetShadowRoot, copyStyles);
+        }
+    }
+    /**
+     * Clone shadow DOM children to the target shadow root
+     */
+    cloneShadowDOMChildren(shadowRoot, targetShadowRoot, copyStyles) {
+        for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {
+            if (isElementNode(child) && isSlotElement(child)) {
+                // Handle slot elements specially
+                this.cloneSlotElement(child, targetShadowRoot, copyStyles);
+            }
+            else {
+                // Clone regular elements
+                this.safeAppendClonedChild(targetShadowRoot, child, copyStyles);
             }
         }
-        // Clone light DOM content (always, even if shadow DOM exists)
+    }
+    /**
+     * Clone light DOM children to the target element
+     */
+    cloneLightDOMChildren(node, clone, copyStyles) {
         for (let child = node.firstChild; child; child = child.nextSibling) {
             this.appendChildNode(clone, child, copyStyles);
         }
     }
+    /**
+     * Clone slot element as light DOM when shadow root creation failed
+     */
+    cloneSlotElementAsLightDOM(slot, clone, copyStyles) {
+        if (!isSlotElement(slot)) {
+            return;
+        }
+        const slotElement = slot;
+        if (typeof slotElement.assignedNodes !== 'function') {
+            // Fallback: clone slot's children
+            for (let child = slot.firstChild; child; child = child.nextSibling) {
+                this.appendChildNode(clone, child, copyStyles);
+            }
+            return;
+        }
+        const assignedNodes = slotElement.assignedNodes();
+        if (assignedNodes && Array.isArray(assignedNodes) && assignedNodes.length > 0) {
+            // Clone assigned nodes as light DOM
+            assignedNodes.forEach((node) => this.appendChildNode(clone, node, copyStyles));
+        }
+        else {
+            // Clone fallback content as light DOM
+            for (let child = slot.firstChild; child; child = child.nextSibling) {
+                this.appendChildNode(clone, child, copyStyles);
+            }
+        }
+    }
+    /**
+     * Clone shadow DOM content as light DOM when shadow root creation failed
+     * This is a fallback mechanism to ensure content is not lost
+     */
+    cloneShadowDOMAsLightDOM(shadowRoot, clone, copyStyles) {
+        for (let child = shadowRoot.firstChild; child; child = child.nextSibling) {
+            if (isElementNode(child) && isSlotElement(child)) {
+                this.cloneSlotElementAsLightDOM(child, clone, copyStyles);
+            }
+            else {
+                this.appendChildNode(clone, child, copyStyles);
+            }
+        }
+    }
+    /**
+     * Clone child nodes from source element to clone element
+     * Handles shadow DOM, slots, and light DOM appropriately
+     */
+    cloneChildNodes(node, clone, copyStyles) {
+        if (node.shadowRoot && clone.shadowRoot) {
+            // Both original and clone have shadow roots - clone shadow DOM content
+            this.cloneShadowDOMChildren(node.shadowRoot, clone.shadowRoot, copyStyles);
+            // Also clone light DOM (slot content sources)
+            this.cloneLightDOMChildren(node, clone, copyStyles);
+        }
+        else if (node.shadowRoot && !clone.shadowRoot) {
+            // Original has shadow root but clone doesn't (creation failed)
+            // Fallback: clone shadow DOM content as light DOM to preserve content
+            this.cloneShadowDOMAsLightDOM(node.shadowRoot, clone, copyStyles);
+        }
+        else {
+            // No shadow DOM - just clone light DOM children
+            this.cloneLightDOMChildren(node, clone, copyStyles);
+        }
+    }
     cloneNode(node, copyStyles) {
         if (isTextNode(node)) {
             return document.createTextNode(node.data);
@@ -7638,6 +7804,28 @@ class CanvasRenderer extends Renderer {
             }, text.bounds.left);
         }
     }
+    /**
+     * Helper method to render text with paint order support
+     * Reduces code duplication in line-clamp and normal rendering
+     */
+    renderTextBoundWithPaintOrder(textBound, styles, paintOrderLayers) {
+        paintOrderLayers.forEach((paintOrderLayer) => {
+            switch (paintOrderLayer) {
+                case 0 /* PAINT_ORDER_LAYER.FILL */:
+                    this.ctx.fillStyle = asString(styles.color);
+                    this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                    break;
+                case 1 /* PAINT_ORDER_LAYER.STROKE */:
+                    if (styles.webkitTextStrokeWidth && textBound.text.trim().length) {
+                        this.ctx.strokeStyle = asString(styles.webkitTextStrokeColor);
+                        this.ctx.lineWidth = styles.webkitTextStrokeWidth;
+                        this.ctx.lineJoin = !!window.chrome ? 'miter' : 'round';
+                        this.renderTextWithLetterSpacing(textBound, styles.letterSpacing, styles.fontSize.number);
+                    }
+                    break;
+            }
+        });
+    }
     renderTextDecoration(bounds, styles) {
         this.ctx.fillStyle = asString(styles.textDecorationColor || styles.color);
         // Calculate decoration line thickness
@@ -7787,24 +7975,120 @@ class CanvasRenderer extends Renderer {
         this.ctx.textAlign = 'left';
         this.ctx.textBaseline = 'alphabetic';
         const paintOrder = styles.paintOrder;
+        // Calculate line height for text layout detection (used by both line-clamp and ellipsis)
+        const lineHeight = styles.fontSize.number * 1.5;
+        // Check if we need to apply -webkit-line-clamp
+        // This limits text to a specific number of lines with ellipsis
+        const shouldApplyLineClamp = styles.webkitLineClamp > 0 &&
+            (styles.display & 2 /* DISPLAY.BLOCK */) !== 0 &&
+            styles.overflowY === 1 /* OVERFLOW.HIDDEN */ &&
+            text.textBounds.length > 0;
+        if (shouldApplyLineClamp) {
+            // Group text bounds by lines based on their Y position
+            const lines = [];
+            let currentLine = [];
+            let currentLineTop = text.textBounds[0].bounds.top;
+            text.textBounds.forEach((tb) => {
+                // If this text bound is on a different line, start a new line
+                if (Math.abs(tb.bounds.top - currentLineTop) >= lineHeight * 0.5) {
+                    if (currentLine.length > 0) {
+                        lines.push(currentLine);
+                    }
+                    currentLine = [tb];
+                    currentLineTop = tb.bounds.top;
+                }
+                else {
+                    currentLine.push(tb);
+                }
+            });
+            // Don't forget the last line
+            if (currentLine.length > 0) {
+                lines.push(currentLine);
+            }
+            // Only render up to webkitLineClamp lines
+            const maxLines = styles.webkitLineClamp;
+            if (lines.length > maxLines) {
+                // Render only the first (maxLines - 1) complete lines
+                for (let i = 0; i < maxLines - 1; i++) {
+                    lines[i].forEach((textBound) => {
+                        this.renderTextBoundWithPaintOrder(textBound, styles, paintOrder);
+                    });
+                }
+                // For the last line, truncate with ellipsis
+                const lastLine = lines[maxLines - 1];
+                if (lastLine && lastLine.length > 0 && containerBounds) {
+                    const lastLineText = lastLine.map((tb) => tb.text).join('');
+                    const firstBound = lastLine[0];
+                    const availableWidth = containerBounds.width - (firstBound.bounds.left - containerBounds.left);
+                    const truncatedText = this.truncateTextWithEllipsis(lastLineText, availableWidth, styles.letterSpacing);
+                    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);
+                                }
+                                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; // Don't render anything else
+            }
+            // If lines.length <= maxLines, fall through to normal rendering
+        }
         // Check if we need to apply text-overflow: ellipsis
-        const shouldApplyEllipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ && containerBounds && styles.overflowX === 1 /* OVERFLOW.HIDDEN */;
+        // Issue #203: Only apply ellipsis for single-line text overflow
+        // Multi-line text truncation (like -webkit-line-clamp) should not be affected
+        const shouldApplyEllipsis = styles.textOverflow === 1 /* TEXT_OVERFLOW.ELLIPSIS */ &&
+            containerBounds &&
+            styles.overflowX === 1 /* OVERFLOW.HIDDEN */ &&
+            text.textBounds.length > 0;
         // 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 (shouldApplyEllipsis) {
+            // Check if all text bounds are on approximately the same line (single-line scenario)
+            // For multi-line text (like -webkit-line-clamp), textBounds will have different Y positions
+            const firstTop = text.textBounds[0].bounds.top;
+            const isSingleLine = text.textBounds.every((tb) => Math.abs(tb.bounds.top - firstTop) < lineHeight * 0.5);
+            if (isSingleLine) {
+                // 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