content: implement support for unicode emojis in messages

assets/Noto_Color_Emoji/LICENSE

@@ -0,0 +1,92 @@
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

lib/licenses.dart

@@ -16,4 +16,7 @@ Stream<LicenseEntry> additionalLicenses() async* {
   yield LicenseEntryWithLineBreaks(
     ['Source Sans 3'],
     await rootBundle.loadString('assets/Source_Sans_3/LICENSE.md'));
+  yield LicenseEntryWithLineBreaks(
+    ['Noto Color Emoji'],
+    await rootBundle.loadString('assets/Noto_Color_Emoji/LICENSE'));
 }

lib/model/content.dart

@@ -452,22 +452,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));
   }
 }
 
@@ -523,7 +523,28 @@ class _ZulipContentParser {
     return result;
   }
 
-  static final _emojiClassRegexp = RegExp(r"^emoji(-[0-9a-f]+)?$");
+  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);
@@ -582,7 +603,14 @@ class _ZulipContentParser {
         && classes.length == 2
         && classes.contains('emoji')
         && classes.every(_emojiClassRegexp.hasMatch)) {
-      return UnicodeEmojiNode(text: element.text, debugHtmlNode: debugHtmlNode);
+      final emojiCode = classes
+        .firstWhere((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/app.dart

@@ -14,6 +14,14 @@ class ZulipApp extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final theme = ThemeData(
+      // This sets up the font fallback for normal text that
+      // may contain an emoji, where it will use any font from the "sans-serif"
+      // group to fetch the glyphs and fallback to "Noto Color Emoji" for emojis.
+      //
+      // Note that specifiying only "Noto Color Emoji" in the fallback list,
+      // Flutter tries to use it to draw even the non emoji characters
+      // which leads to broken text rendering.
+      fontFamilyFallback: const <String>['sans-serif', 'Noto Color Emoji'],
       useMaterial3: false, // TODO(#225) fix things and switch to true
       // This applies Material 3's color system to produce a palette of
       // appropriately matching and contrasting colors for use in a UI.

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});
 

lib/widgets/message_list.dart

@@ -216,7 +216,7 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
     assert(model != null);
     if (!model!.fetched) return const Center(child: CircularProgressIndicator());
 
-    return DefaultTextStyle(
+    return DefaultTextStyle.merge(
       // TODO figure out text color -- web is supposedly hsl(0deg 0% 20%),
       //   but seems much darker than that
       style: const TextStyle(color: Color.fromRGBO(0, 0, 0, 1)),

pubspec.yaml

@@ -90,6 +90,7 @@ flutter:
   assets:
     - assets/Source_Code_Pro/LICENSE.md
     - assets/Source_Sans_3/LICENSE.md
+    - assets/Noto_Color_Emoji/LICENSE
 
   fonts:
     # Zulip's custom icons.  To use or edit, see class ZulipIcons.
@@ -109,4 +110,8 @@ flutter:
         - asset: assets/Source_Sans_3/SourceSans3VF-Italic.otf
           style: italic
 
+    - family: Noto Color Emoji
+      fonts:
+        - asset: assets/Noto_Color_Emoji/Noto-COLRv1.ttf
+
     # If adding a font, remember to account for its license in lib/licenses.dart.

test/model/content_test.dart

@@ -141,10 +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, 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(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);