Fix emojis rendering at unconstrained size, now set specific CSS style when rendering

CHANGELOG.md

@@ -1,5 +1,12 @@
 # Relatica Change Log
 
+## Unreleased
+
+* Changes
+* Fixes
+    * Emojis are rendered at correct size
+* New Features
+
 ## Version 0.5.0 (beta), 27 April 2023
 
 * Changes

beta-program.md

@@ -156,8 +156,6 @@ wanted to lay out some expectations before getting into the small details
 
 * Sometimes timelines get confused so swapping between the different groups/timelines creates a
   muddled display. Restarting the app fixes this.
-* Some images within posts, usually graphical emojis, are rendered drastically larger than they
-  should be.
 * On Linux you will need to login to the key manager and unlock it before opening the app. Some
   Linux versions do this
   automatically while others do not.

lib/controls/html_text_viewer_control.dart

@@ -0,0 +1,32 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
+import 'package:html/dom.dart' as dom;
+
+const _emojiSize = {'width': '20px', 'height': '20px', 'margin-left': '-3px'};
+
+class HtmlTextViewerControl extends StatelessWidget {
+  final String content;
+  final FutureOr<bool> Function(String)? onTapUrl;
+
+  const HtmlTextViewerControl(
+      {super.key, required this.content, this.onTapUrl});
+
+  @override
+  Widget build(BuildContext context) {
+    return HtmlWidget(
+      content,
+      customStylesBuilder: _defaultStylesBuilder,
+      onTapUrl: onTapUrl,
+    );
+  }
+
+  Map<String, String>? _defaultStylesBuilder(dom.Element element) {
+    if (element.classes.contains('emoji')) {
+      return _emojiSize;
+    }
+
+    return null;
+  }
+}

lib/controls/notifications_control.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:go_router/go_router.dart';
 import 'package:logging/logging.dart';
 import 'package:provider/provider.dart';
@@ -15,6 +14,7 @@ import '../services/timeline_manager.dart';
 import '../utils/active_profile_selector.dart';
 import '../utils/dateutils.dart';
 import '../utils/snackbar_builder.dart';
+import 'html_text_viewer_control.dart';
 import 'image_control.dart';
 
 class NotificationControl extends StatelessWidget {
@@ -123,8 +123,8 @@ class NotificationControl extends StatelessWidget {
       leading: fromIcon,
       title: GestureDetector(
         onTap: onTap == null ? null : () async => onTap!(),
-        child: HtmlWidget(
-          notification.content,
+        child: HtmlTextViewerControl(
+          content: notification.content,
           onTapUrl: onTap == null ? null : (_) async => onTap!(),
         ),
       ),

lib/controls/search_result_status_control.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:logging/logging.dart';
 
 import '../models/timeline_entry.dart';
 import '../utils/clipboard_utils.dart';
 import '../utils/url_opening_utils.dart';
+import 'html_text_viewer_control.dart';
 import 'media_attachment_viewer_control.dart';
 import 'padding.dart';
 import 'timeline/link_preview_control.dart';
@@ -114,11 +114,10 @@ class _SearchResultStatusControlState extends State<SearchResultStatusControl> {
   }
 
   Widget buildBody(BuildContext context) {
-    return HtmlWidget(
-      widget.status.body,
-      onTapUrl: (url) async {
-        return await openUrlStringInSystembrowser(context, url, 'link');
-      },
+    return HtmlTextViewerControl(
+      content: widget.status.body,
+      onTapUrl: (url) async =>
+          await openUrlStringInSystembrowser(context, url, 'link'),
     );
   }
 

lib/controls/timeline/flattened_tree_entry_control.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:go_router/go_router.dart';
 import 'package:logging/logging.dart';
 
@@ -12,6 +11,7 @@ import '../../utils/clipboard_utils.dart';
 import '../../utils/html_to_edit_text_helper.dart';
 import '../../utils/responsive_sizes_calculator.dart';
 import '../../utils/url_opening_utils.dart';
+import '../html_text_viewer_control.dart';
 import '../media_attachment_viewer_control.dart';
 import '../padding.dart';
 import 'interactions_bar_control.dart';
@@ -143,11 +143,10 @@ class _StatusControlState extends State<FlattenedTreeEntryControl> {
   }
 
   Widget buildBody(BuildContext context) {
-    return HtmlWidget(
-      entry.body,
-      onTapUrl: (url) async {
-        return await openUrlStringInSystembrowser(context, url, 'link');
-      },
+    return HtmlTextViewerControl(
+      content: entry.body,
+      onTapUrl: (url) async =>
+          await openUrlStringInSystembrowser(context, url, 'link'),
     );
   }
 

lib/screens/editor.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart' hide Visibility;
-import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:go_router/go_router.dart';
 import 'package:logging/logging.dart';
 import 'package:multi_trigger_autocomplete/multi_trigger_autocomplete.dart';
@@ -11,6 +10,7 @@ import '../controls/autocomplete/hashtag_autocomplete_options.dart';
 import '../controls/autocomplete/mention_autocomplete_options.dart';
 import '../controls/entry_media_attachments/gallery_selector_control.dart';
 import '../controls/entry_media_attachments/media_uploads_control.dart';
+import '../controls/html_text_viewer_control.dart';
 import '../controls/login_aware_cached_network_image.dart';
 import '../controls/padding.dart';
 import '../controls/standard_appbar.dart';
@@ -383,7 +383,7 @@ class _EditorScreenState extends State<EditorScreen> {
                   ),
                   const VerticalPadding(height: 3)
                 ],
-                HtmlWidget(entry.body),
+                HtmlTextViewerControl(content: entry.body),
               ],
             ),
           ),

lib/screens/follow_request_adjudication_screen.dart

@@ -1,9 +1,9 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 import 'package:result_monad/result_monad.dart';
 
+import '../controls/html_text_viewer_control.dart';
 import '../controls/login_aware_cached_network_image.dart';
 import '../controls/padding.dart';
 import '../globals.dart';
@@ -164,8 +164,8 @@ class _FollowRequestAdjudicationScreenState
             ],
           ),
           const VerticalPadding(),
-          HtmlWidget(
-            contact.note,
+          HtmlTextViewerControl(
+            content: contact.note,
             onTapUrl: (url) async {
               return await openUrlStringInSystembrowser(context, url, 'link');
             },

lib/screens/user_profile_screen.dart

@@ -1,9 +1,8 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
 import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
-import 'package:relatica/utils/active_profile_selector.dart';
 
+import '../controls/html_text_viewer_control.dart';
 import '../controls/login_aware_cached_network_image.dart';
 import '../controls/padding.dart';
 import '../globals.dart';
@@ -12,6 +11,7 @@ import '../models/group_data.dart';
 import '../routes.dart';
 import '../services/auth_service.dart';
 import '../services/connections_manager.dart';
+import '../utils/active_profile_selector.dart';
 import '../utils/snackbar_builder.dart';
 import '../utils/url_opening_utils.dart';
 
@@ -84,8 +84,8 @@ class _UserProfileScreenState extends State<UserProfileScreen> {
                 ],
               ),
               const VerticalPadding(),
-              HtmlWidget(
-                profile.note,
+              HtmlTextViewerControl(
+                content: profile.note,
                 onTapUrl: (url) async {
                   return await openUrlStringInSystembrowser(
                       context, url, 'link');

pubspec.lock

@@ -558,7 +558,7 @@ packages:
     source: hosted
     version: "2.2.0"
   html:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: html
       sha256: "79d498e6d6761925a34ee5ea8fa6dfef38607781d2fa91e37523474282af55cb"

pubspec.yaml

@@ -57,6 +57,7 @@ dependencies:
   device_preview: ^1.1.0
   color_blindness: ^0.1.2
   stack_trace: ^1.11.0
+  html: ^0.15.2
 
 dev_dependencies:
   flutter_test: