content: Handle image emoji

Author: chrisbobbe

lib/model/content.dart

@@ -177,9 +177,10 @@ class UnicodeEmojiNode extends EmojiNode {
 }
 
 class ImageEmojiNode extends EmojiNode {
-  const ImageEmojiNode({super.debugHtmlNode, required this.alt});
+  const ImageEmojiNode({super.debugHtmlNode, required this.src, required this.alt });
 
-  final String alt; // TODO parse actual emoji image URL
+  final String src;
+  final String alt;
 }
 
 ////////////////////////////////////////////////////////////////
@@ -246,7 +247,9 @@ InlineContentNode parseInlineContent(dom.Node node) {
       && classes.length == 1) {
     final alt = element.attributes['alt'];
     if (alt == null) return unimplemented();
-    return ImageEmojiNode(alt: alt, debugHtmlNode: debugHtmlNode);
+    final src = element.attributes['src'];
+    if (src == null) return unimplemented();
+    return ImageEmojiNode(src: src, alt: alt, debugHtmlNode: debugHtmlNode);
   }
 
   // TODO more types of node

lib/widgets/content.dart

@@ -439,13 +439,27 @@ class MessageImageEmoji extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // TODO show actual emoji image
-    final alt = node.alt;
-    return Container(
-        padding: const EdgeInsets.all(2),
-        decoration: BoxDecoration(
-            color: Colors.white, border: Border.all(color: Colors.purple)),
-        child: Text(alt));
+    final store = PerAccountStoreWidget.of(context);
+    final adjustedSrc = rewriteImageUrl(node.src, store.account);
+
+    const size = 20.0;
+
+    return Stack(
+        alignment: Alignment.center,
+        clipBehavior: Clip.none,
+        children: [
+          const SizedBox(width: size, height: kBaseFontSize),
+          Positioned(
+              // Web's css makes this seem like it should be -0.5, but that looks
+              // too low.
+              top: -1.5,
+              child: Image.network(
+                adjustedSrc.toString(),
+                filterQuality: FilterQuality.medium,
+                width: size,
+                height: size,
+              )),
+        ]);
   }
 }