edits

shared/test/util-test.js

@@ -219,6 +219,9 @@ describe('util helpers', () => {
       expect(Util.truncate('aaa', 2)).toEqual('a…');
       expect(Util.truncate('aaa🥳', 4)).toEqual('aaa🥳');
       expect(Util.truncate('aaa🥳', 3)).toEqual('aa…');
+      expect(Util.truncate('aaa👨‍👨‍👦‍👦', 4)).toEqual('aaa👨‍👨‍👦‍👦');
+      expect(Util.truncate('aaa👨‍👨‍👦‍👦', 3)).toEqual('aa…');
+
       expect(Util.truncate('देवनागरी', 5)).toEqual('देवनागरी');
       expect(Util.truncate('देवनागरी', 4)).toEqual('देवना…');
 

shared/util.js

@@ -164,29 +164,12 @@ class Util {
     }
 
     const segmenter = new Intl.Segmenter(undefined, {granularity: 'grapheme'});
-    const iterator = segmenter.segment(string)[Symbol.iterator]();
-
-    let lastSegment;
-    for (let i = 0; i <= characterLimit - ellipseSuffix.length; i++) {
-      const result = iterator.next();
-      if (result.done) {
-        return string;
-      }
-
-      lastSegment = result.value;
+    const graphemes = [...segmenter.segment(string)].map(e => e.segment);
+    if (graphemes.length <= characterLimit) {
+      return graphemes.join('');
     }
-
-    if (!lastSegment) {
-      return ellipseSuffix;
-    }
-
-    for (let i = 0; i < ellipseSuffix.length; i++) {
-      if (iterator.next().done) {
-        return string;
-      }
-    }
-
-    return string.slice(0, lastSegment.index) + ellipseSuffix;
+    const elided = graphemes.slice(0, Math.max(0, characterLimit - ellipseSuffix.length));
+    return elided.join('') + ellipseSuffix;
   }
 
   /**