content: Parse emojiUnicode in UnicodeEmojiNode

Author: rajveermalviya

lib/model/content.dart

@@ -438,22 +438,22 @@ abstract class EmojiNode extends InlineContentNode {
 }
 
 class UnicodeEmojiNode extends EmojiNode {
-  const UnicodeEmojiNode({super.debugHtmlNode, required this.text});
+  const UnicodeEmojiNode({super.debugHtmlNode, required this.unicode});
 
-  final String text;
+  final String unicode;
 
   @override
   bool operator ==(Object other) {
-    return other is UnicodeEmojiNode && other.text == text;
+    return other is UnicodeEmojiNode && other.unicode == unicode;
   }
 
   @override
-  int get hashCode => Object.hash('UnicodeEmojiNode', text);
+  int get hashCode => Object.hash('UnicodeEmojiNode', unicode);
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(StringProperty('text', text));
+    properties.add(StringProperty('unicode', unicode));
   }
 }
 
@@ -568,7 +568,19 @@ class _ZulipContentParser {
         && classes.length == 2
         && classes.contains('emoji')
         && classes.every(_emojiClassRegexp.hasMatch)) {
-      return UnicodeEmojiNode(text: element.text, debugHtmlNode: debugHtmlNode);
+      // TODO: Check if fonts contain the glyph for the specific unicodes.
+      //   Either by parsing the font and generating a list of
+      //   unicodes that have a corresponding glyph.
+      //   Or by checking if an emoji is present in an emoji set,
+      //   eg. unicode v15 set of emojis.
+
+      final className = classes
+        .firstWhere((className) => className.startsWith('emoji-'), orElse: () => '')
+        .replaceFirst('emoji-', '');
+      if (className.isEmpty) return unimplemented();
+      final unicode = tryParseEmojiCodeToUnicode(className);
+      if (unicode == null) return unimplemented();
+      return UnicodeEmojiNode(unicode: unicode, debugHtmlNode: debugHtmlNode);
     }
 
     if (localName == 'img'
@@ -627,6 +639,27 @@ class _ZulipContentParser {
     return ListNode(listStyle!, items, debugHtmlNode: debugHtmlNode);
   }
 
+  // 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;
+    }
+  }
+
   BlockContentNode parseCodeBlock(dom.Element divElement) {
     assert(_debugParserContext == _ParserContext.block);
     final mainElement = () {

lib/widgets/content.dart

@@ -449,8 +449,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.unicode, recognizer: _recognizer);
     } else if (node is ImageEmojiNode) {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
         child: MessageImageEmoji(node: node));
@@ -609,23 +608,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

@@ -140,10 +140,15 @@ 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(unicode: '\u{1f44d}'));
+
+  testParseInline('parse Unicode emoji, not encoded in span element',
+    // "🪿"
+    '<p>🪿</p>',
+    const TextNode('\u{1fabf}'));
 
   testParseInline('parse custom emoji',
     // ":flutter:"

test/widgets/content_test.dart

@@ -161,4 +161,27 @@ void main() {
       check(tester.takeException()).isA<AssertionError>();
     });
   });
+
+  group('UnicodeEmoji', () {
+    Future<void> prepareContent(WidgetTester tester, String html) async {
+      await tester.pumpWidget(MaterialApp(home: BlockContentList(nodes: parseContent(html).nodes)));
+      await tester.pump();
+    }
+
+    testWidgets('encoded emoji span, with emoji name', (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>');
+
+      expect(find.text('\u{1f44d}'), findsOneWidget); // "👍"
+    });
+
+    testWidgets('non encoded emoji', (tester) async {
+      await prepareContent(tester,
+        // "🪿"
+        '<p>🪿</p>');
+
+      expect(find.text('\u{1fabf}'), findsOneWidget); // "🪿"
+    });
+  });
 }