ugcinc 4.5.65 → 4.5.67

package/dist/render/components/TextElement.js

@@ -46,6 +46,20 @@ const defaults_1 = require("../utils/defaults");
 const fonts_1 = require("../utils/fonts");
 const text_1 = require("../utils/text");
 const emoji_1 = require("../utils/emoji");
+/**
+ * Render text with emojis wrapped in spans — used by BOTH fill and stroke
+ * divs so they share identical DOM structure and vertical metrics.
+ * In the stroke layer, emoji spans get visibility:hidden so the SVG filter
+ * doesn't dilate them.
+ */
+function renderTextWithEmojiSpans(text, hideEmojis) {
+    const parts = (0, emoji_1.splitTextAndEmojis)(text);
+    if (parts.every(p => p.type === 'text'))
+        return text;
+    return parts.map((part, i) => part.type === 'emoji'
+        ? (0, jsx_runtime_1.jsx)("span", { style: hideEmojis ? { visibility: 'hidden' } : undefined, children: part.content }, i)
+        : (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: part.content }, i));
+}
 /**
  * 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.
@@ -350,49 +364,24 @@ function TextElement({ segment, scale = 1 }) {
     const strokeTextStyle = (0, react_1.useMemo)(() => {
         if (!hasStroke)
             return undefined;
-        const style = {
+        return {
             ...textStyle,
             color: strokeColor,
             filter: `url(#${filterId})`,
             position: 'absolute',
+            zIndex: 0,
             top: 0,
             left: 0,
             right: 0,
             bottom: 0,
         };
-        return style;
-    }, [hasStroke, textStyle, strokeColor, filterId, strokeWidth, paddingTop, paddingRight, paddingBottom, paddingLeft]);
-    if (hasStroke) {
-        console.log('[TextElement] STROKE_DIAG:', JSON.stringify({
-            text: segment.text.substring(0, 30),
-            strokeWidth,
-            fontSize,
-            fillZ: textStyle.zIndex,
-            fillPos: textStyle.position,
-            strokeZ: strokeTextStyle?.zIndex,
-            strokePos: strokeTextStyle?.position,
-            strokeFilter: strokeTextStyle?.filter,
-            autoWidth,
-            hasBg: !!backgroundColor,
-        }));
-    }
+    }, [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;
-    // Render text with emojis made invisible (opacity 0) so the stroke
-    // filter doesn't dilate around them. Emojis still occupy space to
-    // keep layout identical to the fill layer.
-    const renderStrokeText = (text) => {
-        const parts = (0, emoji_1.splitTextAndEmojis)(text);
-        if (parts.every(p => p.type === 'text'))
-            return text;
-        return parts.map((part, i) => part.type === 'emoji'
-            ? (0, jsx_runtime_1.jsx)("span", { style: { visibility: 'hidden' }, children: part.content }, i)
-            : (0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: part.content }, i));
-    };
     if (autoWidth) {
-        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)));
-        const strokeContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [renderStrokeText(line), index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
+        const fillContent = calculatedLines.map((line, index) => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [hasStroke ? renderTextWithEmojiSpans(line, false) : line, index < calculatedLines.length - 1 && (0, jsx_runtime_1.jsx)("br", {})] }, index)));
+        const strokeContent = hasStroke ? 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))) : null;
         if (backgroundColor) {
             return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: calculatedWidth,
@@ -400,10 +389,10 @@ function TextElement({ segment, scale = 1 }) {
                         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: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: strokeContent }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: fillContent })] }) }));
         }
-        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.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: fillContent })] }) }));
     }
-    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: renderStrokeText(segment.text) }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: segment.text })] }) }));
+    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: hasStroke ? renderTextWithEmojiSpans(segment.text, true) : segment.text }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: hasStroke ? renderTextWithEmojiSpans(segment.text, false) : segment.text })] }) }));
 }
 exports.default = TextElement;

package/package.json

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