MOBILE-4902 format-text: Force redraw message to solve iOS emojis render

Author: crazyserver

src/core/directives/format-text.ts

@@ -476,10 +476,21 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
         // Emit the afterRender output.
         this.afterRender.emit();
         if (triggerFilterRender) {
-            this.filterContentRenderingComplete.emit();
+            this.finishFilterContentRendering();
         }
     }
 
+    /**
+     * Finish the rendering once filters have been applied.
+     */
+    protected async finishFilterContentRendering(): Promise<void> {
+        // Force redraw to make sure emojis are displayed on iOS.
+        if (CorePlatform.isIOS() && CoreText.containsEmoji(this.element.innerText)) {
+            await CoreDom.forceElementRedraw(this.element);
+        }
+        this.filterContentRenderingComplete.emit();
+    }
+
     /**
      * Format contents and render.
      */
@@ -530,7 +541,7 @@ export class CoreFormatTextDirective implements OnDestroy, AsyncDirective {
                 this.componentId(),
                 this.getSiteId(),
             ).finally(() => {
-                this.filterContentRenderingComplete.emit();
+                this.finishFilterContentRendering();
             });
         }
 

src/core/singletons/dom.ts

@@ -1259,6 +1259,24 @@ export class CoreDom {
         return elementPoint > window.innerHeight || elementPoint < scrollTopPos;
     }
 
+    /**
+     * Force a redraw of an element.
+     *
+     * @param element Element to redraw.
+     */
+    static async forceElementRedraw(element?: HTMLElement): Promise<void> {
+        if (!element) {
+            return;
+        }
+
+        const oldDisplay = element.style.display;
+        element.style.display = 'none';
+
+        await CoreWait.nextTick();
+
+        element.style.display = oldDisplay;
+    }
+
 }
 
 /**

src/core/singletons/tests/text.test.ts

@@ -126,4 +126,47 @@ describe('CoreText singleton', () => {
         expect(CoreText.camelCaseToKebabCase('mix_of-differentTextCases')).toEqual('mix_of-different-text-cases');
     });
 
+    it('check strings contains emojis', () => {
+        expect(CoreText.containsEmoji('')).toBe(false);
+        expect(CoreText.containsEmoji('Hello!')).toBe(false);
+        expect(CoreText.containsEmoji('😀')).toBe(true);
+        expect(CoreText.containsEmoji('Hello 😀!')).toBe(true);
+        expect(CoreText.containsEmoji('👩‍💻')).toBe(true);
+        expect(CoreText.containsEmoji('☀️Moodle')).toBe(true);
+
+        // Check also emojis with skin tones.
+        expect(CoreText.containsEmoji('👍')).toBe(true);
+        expect(CoreText.containsEmoji('👍🏻')).toBe(true);
+
+        // Check also flags.
+        expect(CoreText.containsEmoji('🇺🇦')).toBe(true);
+        expect(CoreText.containsEmoji('🇵🇸')).toBe(true);
+        expect(CoreText.containsEmoji('🏳️‍⚧️')).toBe(true);
+        expect(CoreText.containsEmoji('🏴󠁵󠁳󠁴󠁸󠁿')).toBe(true);
+
+        // Check complex emojis.
+        expect(CoreText.containsEmoji('👩🏽‍⚕️')).toBe(true);
+        expect(CoreText.containsEmoji('👨‍👩‍👧‍👦')).toBe(true);
+        expect(CoreText.containsEmoji('🤼🏻‍♀️')).toBe(true);
+
+        // Check some edge cases.
+        expect(CoreText.containsEmoji('1️⃣')).toBe(true);
+        expect(CoreText.containsEmoji('#️⃣')).toBe(true);
+        expect(CoreText.containsEmoji('*️⃣')).toBe(true);
+        expect(CoreText.containsEmoji('©️')).toBe(true);
+        expect(CoreText.containsEmoji('®️')).toBe(true);
+        expect(CoreText.containsEmoji('™️')).toBe(true);
+        expect(CoreText.containsEmoji('0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣')).toBe(true);
+        expect(CoreText.containsEmoji('E=mc²')).toBe(false);
+        expect(CoreText.containsEmoji('3³')).toBe(false);
+        expect(CoreText.containsEmoji('10⁹')).toBe(false);
+        expect(CoreText.containsEmoji('x²')).toBe(false);
+        expect(CoreText.containsEmoji('SO₄²⁻')).toBe(false);
+
+        // Some sequences of characters that look like emojis but aren't.
+        expect(CoreText.containsEmoji('<:custom_emoji:123456789012345678>')).toBe(false);
+        expect(CoreText.containsEmoji('<a:custom_emoji:123456789012345678>')).toBe(false);
+        expect(CoreText.containsEmoji(':)')).toBe(false);
+        expect(CoreText.containsEmoji(':-)')).toBe(false);
+    });
 });

src/core/singletons/text.ts

@@ -665,6 +665,19 @@ export class CoreText {
         return Locutus.unserialize<T>(data);
     }
 
+    /**
+     * Check if a string contains any emoji.
+     *
+     * @param text Text to check.
+     * @returns True if contains emoji, false otherwise.
+     */
+    static containsEmoji(text: string): boolean {
+        const base = String.raw`\p{Emoji}(?:\p{EMod}|[\u{E0020}-\u{E007E}]+\u{E007F}|\uFE0F?\u20E3?)`;
+        const regexEmoji = new RegExp(String.raw`\p{RI}{2}|(?![#*\d](?!\uFE0F?\u20E3))${base}(?:\u200D${base})*`, 'gu');
+
+        return regexEmoji.test(text);
+    }
+
 }
 
 /**