@microlee666/dom-to-pptx 1.1.5 → 1.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microlee666/dom-to-pptx",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "A client-side library that converts any HTML element into a fully editable PowerPoint slide. **dom-to-pptx** transforms DOM structures into pixel-accurate `.pptx` content, preserving gradients, shadows, rounded images, and responsive layouts. It translates CSS Flexbox/Grid, linear-gradients, box-shadows, and typography into native PowerPoint shapes, enabling precise, design-faithful slide generation directly from the browser.",
   "main": "dist/dom-to-pptx.cjs",
   "module": "dist/dom-to-pptx.mjs",

package/src/index.js

@@ -1191,16 +1191,36 @@ function prepareRenderItem(
       const className = (node.className || '').toLowerCase();
 
       // Real badges/pills typically have visible styling (background, border, or large border-radius)
-      const hasVisibleBackground = bgColorObj.hex && bgColorObj.opacity > 0.1;
+      const hasVisibleBackground = (bgColorObj.hex && bgColorObj.opacity > 0.1) || hasGradient;
       const hasVisibleBorder = borderWidth > 0;
       const hasLargeBorderRadius = borderRadius >= height / 2;
-      const hasBadgeClass = className.includes('badge') || className.includes('pill');
+      const hasBadgeClass = className.includes('badge') || className.includes('pill') || className.includes('tag');
+
+      // Check if it's a small tag/label with rounded corners and short text
+      const paddingLeft = parseFloat(style.paddingLeft) || 0;
+      const paddingRight = parseFloat(style.paddingRight) || 0;
+      const paddingTop = parseFloat(style.paddingTop) || 0;
+      const paddingBottom = parseFloat(style.paddingBottom) || 0;
+      const hasSmallPadding = Math.max(paddingLeft, paddingRight, paddingTop, paddingBottom) <= 12;
+      const hasEvenPadding = Math.abs(paddingTop - paddingBottom) <= 4 && Math.abs(paddingLeft - paddingRight) <= 8;
+      const hasRoundedCorners = borderRadius >= 3;
+      const isInlineBlock = style.display === 'inline-block' || style.display === 'inline-flex';
+
+      // Small tag detection: inline-block with background, rounded corners, small even padding, and short text
+      const isSmallTag =
+        isInlineBlock &&
+        hasVisibleBackground &&
+        hasRoundedCorners &&
+        hasSmallPadding &&
+        hasEvenPadding &&
+        textContent.length <= 10;
 
       // Only consider it a badge if it has visual styling AND short text
       const isLikelyBadge =
-        (hasLargeBorderRadius || hasBadgeClass) &&
-        textContent.length <= 10 &&
-        (hasVisibleBackground || hasVisibleBorder || hasLargeBorderRadius);
+        ((hasLargeBorderRadius || hasBadgeClass) &&
+          textContent.length <= 10 &&
+          (hasVisibleBackground || hasVisibleBorder || hasLargeBorderRadius)) ||
+        isSmallTag;
 
       if (isLikelyBadge) {
         align = 'center';