fix: 🐛 broken emojis when wrap text (#6153)

* fix: 🐛 broken emojis when wrap text

* refactor: Delete unnecessary "else" (reduce indentation)

* fix: remove code block that causes the emojis to disappear

* Apply suggestions from code review

Co-authored-by: David Luzar <luzar.david@gmail.com>

* fix: 🚑 possibly undefined value

* Add spec

Co-authored-by: David Luzar <luzar.david@gmail.com>
Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/element/textElement.test.ts

@@ -12,6 +12,20 @@ describe("Test wrapText", () => {
     expect(res).toBe("Hello whats up    ");
   });
 
+  it("should work with emojis", () => {
+    const text = "😀";
+    const maxWidth = 1;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("😀");
+  });
+
+  it("should show the text correctly when min width reached", () => {
+    const text = "Hello😀";
+    const maxWidth = 10;
+    const res = wrapText(text, font, maxWidth);
+    expect(res).toBe("H\ne\nl\nl\no\n😀");
+  });
+
   describe("When text doesn't contain new lines", () => {
     const text = "Hello whats up";
     [

src/element/textElement.ts

@@ -359,7 +359,8 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
     // This means its newline so push it
     if (words.length === 1 && words[0] === "") {
       lines.push(words[0]);
-    } else {
+      return; // continue
+    }
     let currentLine = "";
     let currentLineWidthTillNow = 0;
 
@@ -375,10 +376,12 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
         currentLine = "";
         currentLineWidthTillNow = 0;
         while (words[index].length > 0) {
-            const currentChar = words[index][0];
+          const currentChar = String.fromCodePoint(
+            words[index].codePointAt(0)!,
+          );
           const width = charWidth.calculate(currentChar, font);
           currentLineWidthTillNow += width;
-            words[index] = words[index].slice(1);
+          words[index] = words[index].slice(currentChar.length);
 
           if (currentLineWidthTillNow >= maxWidth) {
             // only remove last trailing space which we have added when joining words
@@ -388,10 +391,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
             push(currentLine);
             currentLine = currentChar;
             currentLineWidthTillNow = width;
-              if (currentLineWidthTillNow === maxWidth) {
-                currentLine = "";
-                currentLineWidthTillNow = 0;
-              }
           } else {
             currentLine += currentChar;
           }
@@ -448,7 +447,6 @@ export const wrapText = (text: string, font: FontString, maxWidth: number) => {
       }
       push(currentLine);
     }
-    }
   });
   return lines.join("\n");
 };