content: Parse emojiUnicode in UnicodeEmojiNode

Author: rajveermalviya

lib/model/content.dart

@@ -438,22 +438,24 @@ abstract class EmojiNode extends InlineContentNode {
 }
 
 class UnicodeEmojiNode extends EmojiNode {
-  const UnicodeEmojiNode({super.debugHtmlNode, required this.text});
+  const UnicodeEmojiNode({super.debugHtmlNode, required this.emojiName, required this.emojiUnicode});
 
-  final String text;
+  final String emojiName;
+  final String? emojiUnicode;
 
   @override
   bool operator ==(Object other) {
-    return other is UnicodeEmojiNode && other.text == text;
+    return other is UnicodeEmojiNode && other.emojiName == emojiName && other.emojiUnicode == emojiUnicode;
   }
 
   @override
-  int get hashCode => Object.hash('UnicodeEmojiNode', text);
+  int get hashCode => Object.hash('UnicodeEmojiNode', emojiName, emojiUnicode);
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(StringProperty('text', text));
+    properties.add(StringProperty('emojiName', emojiName));
+    properties.add(StringProperty('emojiUnicode', emojiUnicode));
   }
 }
 
@@ -568,7 +570,8 @@ class _ZulipContentParser {
         && classes.length == 2
         && classes.contains('emoji')
         && classes.every(_emojiClassRegexp.hasMatch)) {
-      return UnicodeEmojiNode(text: element.text, debugHtmlNode: debugHtmlNode);
+      final emojiUnicode = tryParseEmojiCodeToUnicode(classes.elementAt(1).replaceFirst('emoji-', ''));
+      return UnicodeEmojiNode(emojiName: element.text, emojiUnicode: emojiUnicode, debugHtmlNode: debugHtmlNode);
     }
 
     if (localName == 'img'
@@ -627,6 +630,25 @@ class _ZulipContentParser {
     return ListNode(listStyle!, items, debugHtmlNode: debugHtmlNode);
   }
 
+  // Ported from https://github.com/zulip/zulip-mobile/tree/main/src/emoji/data.js
+  //
+  // Which was in turn ported from https://github.com/zulip/zulip/blob/main/zerver/models.py
+  // 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)));
+    } catch (_) {
+      return null;
+    }
+  }
+
   BlockContentNode parseCodeBlock(dom.Element divElement) {
     assert(_debugParserContext == _ParserContext.block);
     final mainElement = () {

lib/widgets/content.dart

@@ -449,8 +449,10 @@ 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 switch (node.emojiUnicode) {
+        String unicode => TextSpan(text: unicode, recognizer: _recognizer),
+        null => WidgetSpan(alignment: PlaceholderAlignment.middle, child: MessageUnicodeEmojiFallback(emojiName: node.emojiName)),
+      };
     } else if (node is ImageEmojiNode) {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
         child: MessageImageEmoji(node: node));
@@ -609,20 +611,17 @@ class UserMention extends StatelessWidget {
 //     borderRadius: BorderRadius.all(Radius.circular(3))));
 }
 
-class MessageUnicodeEmoji extends StatelessWidget {
-  const MessageUnicodeEmoji({super.key, required this.node});
+class MessageUnicodeEmojiFallback extends StatelessWidget {
+  const MessageUnicodeEmojiFallback({super.key, required this.emojiName});
 
-  final UnicodeEmojiNode node;
+  final String emojiName;
 
   @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));
+      decoration: BoxDecoration(color: Colors.white, border: Border.all(color: Colors.purple)),
+      child: Text(emojiName));
   }
 }
 

test/model/content_test.dart

@@ -143,7 +143,7 @@ void main() {
   testParseInline('parse Unicode emoji',
     // ":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(emojiName: ':thumbs_up:', emojiUnicode: '\u{1f44d}'));
 
   testParseInline('parse custom emoji',
     // ":flutter:"