ugcinc 4.5.71 → 4.5.73

package/dist/render/components/TextElement.js

@@ -162,18 +162,61 @@ 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 };
 /**
- * Replace emoji characters with em-spaces for the stroke layer.
- * Em-space (U+2003) is 1em wide, close to emoji width (~1-1.2em),
- * preserving line width for correct text-align centering.
- * The em-space renders as whitespace (no alpha for feMorphology to dilate).
+ * 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 getStrokeText(text) {
+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;
-    return (0, emoji_1.splitTextAndEmojis)(text)
-        .map(part => part.type === 'emoji' ? '\u2003' : part.content)
-        .join('');
+    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:
@@ -379,8 +422,8 @@ function TextElement({ segment, scale = 1 }) {
     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: [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: [getStrokeText(line), 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: [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)));
         if (backgroundColor) {
             return ((0, jsx_runtime_1.jsx)("div", { style: positioningContainerStyle, children: (0, jsx_runtime_1.jsxs)("div", { style: {
                         width: calculatedWidth,
@@ -392,6 +435,6 @@ function TextElement({ segment, scale = 1 }) {
         }
         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: { ...backgroundBoxStyle, ...(hasStroke && { position: 'relative' }) }, children: [strokeFilterSvg, strokeTextStyle && (0, jsx_runtime_1.jsx)("div", { style: strokeTextStyle, "aria-hidden": "true", children: getStrokeText(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: renderTextWithEmojiSpans(segment.text, true) }), (0, jsx_runtime_1.jsx)("div", { style: textStyle, children: renderTextWithEmojiSpans(segment.text, false) })] }) }));
 }
 exports.default = TextElement;

package/package.json

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