content: Add support for displaying unicode emojis

- Parse the zulip emoji code class names to unicode codepoints
- Generate a tappable TextSpan for each unicode emoji
- Remove fallback emoji name container

Author: rajveermalviya

lib/model/content.dart

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart';
@@ -452,22 +453,22 @@ abstract class EmojiNode extends InlineContentNode {
 }
 
 class UnicodeEmojiNode extends EmojiNode {
-  const UnicodeEmojiNode({super.debugHtmlNode, required this.text});
+  const UnicodeEmojiNode({super.debugHtmlNode, required this.emojiUnicode});
 
-  final String text;
+  final String emojiUnicode;
 
   @override
   bool operator ==(Object other) {
-    return other is UnicodeEmojiNode && other.text == text;
+    return other is UnicodeEmojiNode && other.emojiUnicode == emojiUnicode;
   }
 
   @override
-  int get hashCode => Object.hash('UnicodeEmojiNode', text);
+  int get hashCode => Object.hash('UnicodeEmojiNode', emojiUnicode);
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(StringProperty('text', text));
+    properties.add(StringProperty('emojiUnicode', emojiUnicode));
   }
 }
 
@@ -525,6 +526,27 @@ class _ZulipContentParser {
 
   static final _emojiClassRegexp = RegExp(r"^emoji(-[0-9a-f]+)*$");
 
+  // Ported from https://github.com/zulip/zulip-mobile/blob/c979530d6804db33310ed7d14a4ac62017432944/src/emoji/data.js#L108-L112
+  //
+  // Which was in turn ported from https://github.com/zulip/zulip/blob/63c9296d5339517450f79f176dc02d77b08020c8/zerver/models.py#L3235-L3242
+  // and that describes the encoding as follows:
+  //
+  // > * For Unicode emoji, [emoji_code is] a dash-separated hex encoding of
+  // >   the sequence of Unicode codepoints that define this emoji in the
+  // >   Unicode specification.  For examples, see "non_qualified" or
+  // >   "unified" in the following data, with "non_qualified" taking
+  // >   precedence when both present:
+  // >   https://raw.githubusercontent.com/iamcal/emoji-data/master/emoji_pretty.json
+  String? tryParseEmojiCodeToUnicode(String code) {
+    try {
+      return String.fromCharCodes(code.split('-').map((hex) => int.parse(hex, radix: 16)));
+    } on FormatException { // thrown by `int.parse`
+      return null;
+    } on ArgumentError { // thrown by `String.fromCharCodes`
+      return null;
+    }
+  }
+
   InlineContentNode parseInlineContent(dom.Node node) {
     assert(_debugParserContext == _ParserContext.inline);
     final debugHtmlNode = kDebugMode ? node : null;
@@ -582,7 +604,14 @@ class _ZulipContentParser {
         && classes.length == 2
         && classes.contains('emoji')
         && classes.every(_emojiClassRegexp.hasMatch)) {
-      return UnicodeEmojiNode(text: element.text, debugHtmlNode: debugHtmlNode);
+      final emojiCode = classes
+        .firstWhereOrNull((className) => className.startsWith('emoji-'))!
+        .replaceFirst('emoji-', '');
+      assert(emojiCode.isNotEmpty);
+
+      final unicode = tryParseEmojiCodeToUnicode(emojiCode);
+      if (unicode == null) return unimplemented();
+      return UnicodeEmojiNode(emojiUnicode: unicode, debugHtmlNode: debugHtmlNode);
     }
 
     if (localName == 'img'

lib/widgets/content.dart

@@ -460,8 +460,7 @@ class _InlineContentBuilder {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
         child: UserMention(node: node));
     } else if (node is UnicodeEmojiNode) {
-      return WidgetSpan(alignment: PlaceholderAlignment.middle,
-        child: MessageUnicodeEmoji(node: node));
+      return TextSpan(text: node.emojiUnicode, recognizer: _recognizer);
     } else if (node is ImageEmojiNode) {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
         child: MessageImageEmoji(node: node));
@@ -620,23 +619,6 @@ class UserMention extends StatelessWidget {
 //     borderRadius: BorderRadius.all(Radius.circular(3))));
 }
 
-class MessageUnicodeEmoji extends StatelessWidget {
-  const MessageUnicodeEmoji({super.key, required this.node});
-
-  final UnicodeEmojiNode node;
-
-  @override
-  Widget build(BuildContext context) {
-    // TODO(#58) get spritesheet and show actual emoji glyph
-    final text = node.text;
-    return Container(
-      padding: const EdgeInsets.all(2),
-      decoration: BoxDecoration(
-        color: Colors.white, border: Border.all(color: Colors.purple)),
-      child: Text(text));
-  }
-}
-
 class MessageImageEmoji extends StatelessWidget {
   const MessageImageEmoji({super.key, required this.node});
 

test/model/content_test.dart

@@ -141,15 +141,20 @@ void main() {
     // TODO test group mentions and wildcard mentions
   });
 
-  testParseInline('parse Unicode emoji',
+  testParseInline('parse Unicode emoji, encoded in span element',
     // ":thumbs_up:"
     '<p><span aria-label="thumbs up" class="emoji emoji-1f44d" role="img" title="thumbs up">:thumbs_up:</span></p>',
-    const UnicodeEmojiNode(text: ':thumbs_up:'));
+    const UnicodeEmojiNode(emojiUnicode: '\u{1f44d}')); // "👍"
 
-  testParseInline('parse Unicode emoji, multiple codepoints',
+  testParseInline('parse Unicode emoji, encoded in span element, multiple codepoints',
     // ":transgender_flag:"
     '<p><span aria-label="transgender flag" class="emoji emoji-1f3f3-fe0f-200d-26a7-fe0f" role="img" title="transgender flag">:transgender_flag:</span></p>',
-    const UnicodeEmojiNode(text: ':transgender_flag:'));
+    const UnicodeEmojiNode(emojiUnicode: '\u{1f3f3}\u{fe0f}\u{200d}\u{26a7}\u{fe0f}')); // "🏳️‍⚧️"
+
+  testParseInline('parse Unicode emoji, not encoded in span element',
+    // "\u{1fabf}"
+    '<p>\u{1fabf}</p>',
+    const TextNode('\u{1fabf}')); // "🪿"
 
   testParseInline('parse custom emoji',
     // ":flutter:"

test/widgets/content_test.dart

@@ -155,6 +155,33 @@ void main() {
     });
   });
 
+  group('UnicodeEmoji', () {
+    Future<void> prepareContent(WidgetTester tester, String html) async {
+      await tester.pumpWidget(MaterialApp(home: BlockContentList(nodes: parseContent(html).nodes)));
+    }
+
+    testWidgets('encoded emoji span', (tester) async {
+      await prepareContent(tester,
+        // ":thumbs_up:"
+        '<p><span aria-label="thumbs up" class="emoji emoji-1f44d" role="img" title="thumbs up">:thumbs_up:</span></p>');
+      tester.widget(find.text('\u{1f44d}')); // "👍"
+    });
+
+    testWidgets('encoded emoji span, with multiple codepoints', (tester) async {
+      await prepareContent(tester,
+        // ":transgender_flag:"
+        '<p><span aria-label="transgender flag" class="emoji emoji-1f3f3-fe0f-200d-26a7-fe0f" role="img" title="transgender flag">:transgender_flag:</span></p>');
+      tester.widget(find.text('\u{1f3f3}\u{fe0f}\u{200d}\u{26a7}\u{fe0f}')); // "🏳️‍⚧️"
+    });
+
+    testWidgets('non encoded emoji', (tester) async {
+      await prepareContent(tester,
+        // "\u{1fabf}"
+        '<p>\u{1fabf}</p>');
+      tester.widget(find.text('\u{1fabf}')); // "🪿"
+    });
+  });
+
   group('RealmContentNetworkImage', () {
     final authHeaders = authHeader(email: eg.selfAccount.email, apiKey: eg.selfAccount.apiKey);