ugcinc-render 1.5.13 → 1.5.15

package/dist/index.js

@@ -353,6 +353,18 @@ function splitTextAndEmojis(text) {
   }
   return segments;
 }
+function countEmojis(text) {
+  EMOJI_REGEX.lastIndex = 0;
+  const matches = text.match(EMOJI_REGEX);
+  return matches ? matches.length : 0;
+}
+function getEmojiWidth(fontSize) {
+  return fontSize * 1.2;
+}
+function stripEmojis(text) {
+  EMOJI_REGEX.lastIndex = 0;
+  return text.replace(EMOJI_REGEX, "");
+}
 
 // src/components/TextElement.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -386,6 +398,18 @@ function calculateAutoWidthAndLines({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
+  const emojiWidth = getEmojiWidth(fontSize);
+  const measureTextWithEmojis = (textToMeasure) => {
+    const emojiCount = countEmojis(textToMeasure);
+    if (emojiCount === 0) {
+      measureSpan.textContent = textToMeasure;
+      return measureSpan.getBoundingClientRect().width;
+    }
+    const textWithoutEmojis = stripEmojis(textToMeasure);
+    measureSpan.textContent = textWithoutEmojis;
+    const textWidth = measureSpan.getBoundingClientRect().width;
+    return textWidth + emojiCount * emojiWidth;
+  };
   measureSpan.textContent = "M";
   const charWidth = measureSpan.getBoundingClientRect().width;
   const words = text.split(/(\s+)/);
@@ -408,14 +432,12 @@ function calculateAutoWidthAndLines({
       continue;
     }
     const testLine = currentLine + word;
-    measureSpan.textContent = testLine;
-    const testWidth = measureSpan.getBoundingClientRect().width;
+    const testWidth = measureTextWithEmojis(testLine);
     const WRAP_TOLERANCE = 0.5;
     if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
       lines.push(currentLine.trimEnd());
       currentLine = word;
-      measureSpan.textContent = word;
-      const wordWidth = measureSpan.getBoundingClientRect().width;
+      const wordWidth = measureTextWithEmojis(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
         while (remainingWord) {
@@ -449,8 +471,8 @@ function calculateAutoWidthAndLines({
   }
   let widestLineWidth = 0;
   for (const line of lines) {
-    measureSpan.textContent = line;
-    widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
+    const lineWidth = measureTextWithEmojis(line);
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
   document.body.removeChild(measureSpan);
   const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
@@ -672,8 +694,7 @@ function TextElement({ segment, scale = 1 }) {
               height: "1.2em",
               width: "1.2em",
               verticalAlign: "-0.25em",
-              display: "inline-block",
-              margin: "0 0.05em"
+              display: "inline"
             },
             draggable: false
           },

package/dist/index.mjs

@@ -265,6 +265,18 @@ function splitTextAndEmojis(text) {
   }
   return segments;
 }
+function countEmojis(text) {
+  EMOJI_REGEX.lastIndex = 0;
+  const matches = text.match(EMOJI_REGEX);
+  return matches ? matches.length : 0;
+}
+function getEmojiWidth(fontSize) {
+  return fontSize * 1.2;
+}
+function stripEmojis(text) {
+  EMOJI_REGEX.lastIndex = 0;
+  return text.replace(EMOJI_REGEX, "");
+}
 
 // src/components/TextElement.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -298,6 +310,18 @@ function calculateAutoWidthAndLines({
     white-space: nowrap;
   `;
   document.body.appendChild(measureSpan);
+  const emojiWidth = getEmojiWidth(fontSize);
+  const measureTextWithEmojis = (textToMeasure) => {
+    const emojiCount = countEmojis(textToMeasure);
+    if (emojiCount === 0) {
+      measureSpan.textContent = textToMeasure;
+      return measureSpan.getBoundingClientRect().width;
+    }
+    const textWithoutEmojis = stripEmojis(textToMeasure);
+    measureSpan.textContent = textWithoutEmojis;
+    const textWidth = measureSpan.getBoundingClientRect().width;
+    return textWidth + emojiCount * emojiWidth;
+  };
   measureSpan.textContent = "M";
   const charWidth = measureSpan.getBoundingClientRect().width;
   const words = text.split(/(\s+)/);
@@ -320,14 +344,12 @@ function calculateAutoWidthAndLines({
       continue;
     }
     const testLine = currentLine + word;
-    measureSpan.textContent = testLine;
-    const testWidth = measureSpan.getBoundingClientRect().width;
+    const testWidth = measureTextWithEmojis(testLine);
     const WRAP_TOLERANCE = 0.5;
     if (testWidth > availableWidth + WRAP_TOLERANCE && currentLine.trim()) {
       lines.push(currentLine.trimEnd());
       currentLine = word;
-      measureSpan.textContent = word;
-      const wordWidth = measureSpan.getBoundingClientRect().width;
+      const wordWidth = measureTextWithEmojis(word);
       if (wordWidth > availableWidth) {
         let remainingWord = word;
         while (remainingWord) {
@@ -361,8 +383,8 @@ function calculateAutoWidthAndLines({
   }
   let widestLineWidth = 0;
   for (const line of lines) {
-    measureSpan.textContent = line;
-    widestLineWidth = Math.max(widestLineWidth, measureSpan.getBoundingClientRect().width);
+    const lineWidth = measureTextWithEmojis(line);
+    widestLineWidth = Math.max(widestLineWidth, lineWidth);
   }
   document.body.removeChild(measureSpan);
   const calculatedWidth = Math.min(widestLineWidth + paddingLeft + paddingRight, maxWidth);
@@ -584,8 +606,7 @@ function TextElement({ segment, scale = 1 }) {
               height: "1.2em",
               width: "1.2em",
               verticalAlign: "-0.25em",
-              display: "inline-block",
-              margin: "0 0.05em"
+              display: "inline"
             },
             draggable: false
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ugcinc-render",
-  "version": "1.5.13",
+  "version": "1.5.15",
   "description": "Unified rendering package for UGC Inc - shared types, components, and compositions for pixel-perfect client/server rendering",
   "main": "dist/index.js",
   "module": "dist/index.mjs",