ugcinc 4.5.73 → 4.5.74

package/dist/render/components/TextElement.d.ts

@@ -15,12 +15,16 @@ export interface TextElementProps {
  * - Font family, size, weight, color
  * - Letter spacing, line height
  * - Horizontal and vertical alignment
- * - Text stroke/outline
+ * - Text stroke/outline (via -webkit-text-stroke + paint-order)
  * - Background with opacity and border radius
  * - Padding (uniform and individual)
  * - Auto-width with box alignment
  * - Rotation
  *
+ * Stroke rendering uses -webkit-text-stroke with paint-order: stroke fill.
+ * This naturally excludes emoji bitmaps from the outline (only text glyphs
+ * are stroked) and avoids the layout issues of a separate stroke layer.
+ *
  * When autoWidth is enabled:
  * - Text wraps at maxWidth (the element's width)
  * - Background shrinks to the widest line

package/dist/render/components/TextElement.js

@@ -45,7 +45,6 @@ const react_1 = __importStar(require("react"));
 const defaults_1 = require("../utils/defaults");
 const fonts_1 = require("../utils/fonts");
 const text_1 = require("../utils/text");
-const emoji_1 = require("../utils/emoji");
 /**
  * Calculate the actual width for auto-width text AND the line breaks.
  * Uses DOM-based measurement to ensure the same fonts are used as CSS rendering.
@@ -162,73 +161,21 @@ function calculateAutoWidthAndLines({ text, maxWidth, paddingLeft, paddingRight,
     const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
     return { width: calculatedWidth, lines };
 }
-/** Word Joiner (U+2060) — zero-width character that prevents line breaks */
-const WJ = '\u2060';
-/** Style for emoji spans in the fill layer — no visual change */
-const emojiSpanStyle = { display: 'inline' };
-/** Style for emoji spans in the stroke layer — hidden from SVG filter */
-const emojiSpanStrokeStyle = { display: 'inline', opacity: 0 };
-/**
- * Group consecutive parts from splitTextAndEmojis into merged groups.
- * Consecutive emoji parts are joined into a single group so they share one span,
- * reducing break opportunities.
- */
-function groupEmojiParts(parts) {
-    const groups = [];
-    for (const part of parts) {
-        const last = groups[groups.length - 1];
-        if (last && last.type === part.type) {
-            last.content += part.content;
-        }
-        else {
-            groups.push({ type: part.type, content: part.content });
-        }
-    }
-    return groups;
-}
-/**
- * Render text with emojis wrapped in spans + Word Joiners at span boundaries.
- *
- * Both fill and stroke divs use this so they have identical DOM structure
- * (matching vertical metrics and line breaks). The only difference is the
- * emoji span style: fill spans are visible, stroke spans have opacity: 0.
- *
- * Word Joiners (U+2060) are inserted at boundaries between text nodes and
- * emoji spans to prevent the browser from introducing break opportunities
- * that don't exist in the original plain text.
- */
-function renderTextWithEmojiSpans(text, forStroke) {
-    if (!(0, emoji_1.hasEmoji)(text))
-        return text;
-    const parts = (0, emoji_1.splitTextAndEmojis)(text);
-    const groups = groupEmojiParts(parts);
-    const style = forStroke ? emojiSpanStrokeStyle : emojiSpanStyle;
-    const result = [];
-    for (let i = 0; i < groups.length; i++) {
-        const group = groups[i];
-        // Insert Word Joiner between adjacent groups to prevent unwanted line breaks
-        if (i > 0)
-            result.push(WJ);
-        if (group.type === 'emoji') {
-            result.push((0, jsx_runtime_1.jsx)("span", { style: style, children: group.content }, i));
-        }
-        else {
-            result.push(group.content);
-        }
-    }
-    return result;
-}
 /**
  * TextElement renders text with full styling support including:
  * - Font family, size, weight, color
  * - Letter spacing, line height
  * - Horizontal and vertical alignment
- * - Text stroke/outline
+ * - Text stroke/outline (via -webkit-text-stroke + paint-order)
  * - Background with opacity and border radius
  * - Padding (uniform and individual)
  * - Auto-width with box alignment
  * - Rotation
  *
+ * Stroke rendering uses -webkit-text-stroke with paint-order: stroke fill.
+ * This naturally excludes emoji bitmaps from the outline (only text glyphs
+ * are stroked) and avoids the layout issues of a separate stroke layer.
+ *
  * When autoWidth is enabled:
  * - Text wraps at maxWidth (the element's width)
  * - Background shrinks to the widest line
@@ -376,8 +323,7 @@ function TextElement({ segment, scale = 1 }) {
         };
     }, [autoWidth, calculatedWidth, width, backgroundColor, backgroundOpacity, borderRadiusStyle]);
     const hasStroke = strokeWidth > 0 && !!strokeColor;
-    const filterId = `te-stroke-${react_1.default.useId().replace(/:/g, '')}`;
-    // Text style (fill layer)
+    // Text style — single div handles both fill and stroke via paint-order
     const textStyle = (0, react_1.useMemo)(() => ({
         fontFamily,
         fontSize,
@@ -396,45 +342,27 @@ function TextElement({ segment, scale = 1 }) {
             flex: 1,
             minHeight: 0,
         }),
-        ...(hasStroke && { position: 'relative', zIndex: 1 }),
+        ...(hasStroke && {
+            WebkitTextStroke: `${strokeWidth}px ${strokeColor}`,
+            paintOrder: 'stroke fill',
+        }),
     }), [
         fontFamily, fontSize, fontWeight, color, lineHeight, letterSpacing, alignment,
         paddingTop, paddingRight, paddingBottom, paddingLeft,
-        autoWidth, verticalAlign, hasStroke
+        autoWidth, verticalAlign, hasStroke, strokeWidth, strokeColor
     ]);
-    // Stroke underlay style — same size as fill div, SVG filter handles overflow.
-    const strokeTextStyle = (0, react_1.useMemo)(() => {
-        if (!hasStroke)
-            return undefined;
-        return {
-            ...textStyle,
-            color: strokeColor,
-            filter: `url(#${filterId})`,
-            position: 'absolute',
-            zIndex: 0,
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-        };
-    }, [hasStroke, textStyle, strokeColor, filterId]);
-    // SVG filter for smooth text outline (avoids miter spikes from -webkit-text-stroke)
-    const strokePadPct = Math.max(50, Math.ceil((strokeWidth / fontSize) * 200));
-    const strokeFilterSvg = hasStroke ? ((0, jsx_runtime_1.jsx)("svg", { style: { position: 'absolute', width: 0, height: 0, overflow: 'hidden' }, "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("filter", { id: filterId, x: `-${strokePadPct}%`, y: `-${strokePadPct}%`, width: `${100 + 2 * strokePadPct}%`, height: `${100 + 2 * strokePadPct}%`, children: [(0, jsx_runtime_1.jsx)("feMorphology", { in: "SourceAlpha", operator: "dilate", radius: strokeWidth, result: "dilated" }), (0, jsx_runtime_1.jsx)("feFlood", { floodColor: strokeColor, result: "color" }), (0, jsx_runtime_1.jsx)("feComposite", { in: "color", in2: "dilated", operator: "in" })] }) }) })) : null;
     if (autoWidth) {
-        const textContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [renderTextWithEmojiSpans(line, false), index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
-        const strokeContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [renderTextWithEmojiSpans(line, true), index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
+        const textContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [line, index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
         if (backgroundColor) {
-            return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: {
+            return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: {
                         width: calculatedWidth,
                         maxWidth: width,
                         backgroundColor: (0, text_1.hexToRgba)(backgroundColor, backgroundOpacity),
                         borderRadius: borderRadiusStyle,
-                        ...(hasStroke && { position: 'relative' }),
-                    }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: strokeContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent }) }) }));
         }
-        return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { width: calculatedWidth, maxWidth: width, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: strokeContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent })] }) }));
+        return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: { width: calculatedWidth, maxWidth: width }, children: (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: textContent }) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: { ...backgroundBoxStyle, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: renderTextWithEmojiSpans(segment.text, true) }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: renderTextWithEmojiSpans(segment.text, false) })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsx)("div", { style: backgroundBoxStyle, children: (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: segment.text }) }) }));
 }
 exports.default = TextElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc",
-  "version": "4.5.73",
+  "version": "4.5.74",
   "description": "TypeScript/JavaScript client for the UGC Inc API",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",