content: Show code, mentions, and times properly even in headings etc.

Fixes: zulip#538

Author: chrisbobbe

lib/widgets/content.dart

@@ -628,18 +628,22 @@ class _InlineContentBuilder {
       return _buildInlineCode(node);
     } else if (node is UserMentionNode) {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
-        child: UserMention(node: node));
+        child: UserMention(node: node, surroundingTextStyle: widget.style));
     } else if (node is UnicodeEmojiNode) {
       return TextSpan(text: node.emojiUnicode, recognizer: _recognizer);
     } else if (node is ImageEmojiNode) {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
         child: MessageImageEmoji(node: node));
     } else if (node is MathInlineNode) {
-      return TextSpan(style: _kInlineMathStyle,
+      assert(widget.style.fontSize != null);
+      return TextSpan(
+        style: widget.style
+          .merge(_kInlineMathStyle)
+          .apply(fontSizeFactor: _kInlineCodeFontSizeFactor),
         children: [TextSpan(text: node.texSource)]);
     } else if (node is GlobalTimeNode) {
       return WidgetSpan(alignment: PlaceholderAlignment.middle,
-        child: GlobalTime(node: node));
+        child: GlobalTime(node: node, surroundingTextStyle: widget.style));
     } else if (node is UnimplementedInlineContentNode) {
       return _errorUnimplemented(node);
     } else {
@@ -688,8 +692,14 @@ class _InlineContentBuilder {
 
     // TODO `code`: find equivalent of web's `unicode-bidi: embed; direction: ltr`
 
-    // Use a light gray background, instead of a border.
-    return _buildNodes(style: _kInlineCodeStyle, node.nodes);
+    assert(widget.style.fontSize != null);
+    return _buildNodes(
+      // Use a light gray background, instead of a border.
+      style: widget.style
+        .merge(_kInlineCodeStyle)
+        .apply(fontSizeFactor: _kInlineCodeFontSizeFactor),
+      node.nodes,
+    );
 
     // Another fun solution -- we can in fact have a border!  Like so:
     //   TextStyle(
@@ -709,17 +719,27 @@ class _InlineContentBuilder {
   }
 }
 
+/// The [TextStyle] for inline math, excluding font-size adjustment.
+///
+/// Inline math should use this and also apply [_kInlineCodeFontSizeFactor]
+/// to the font size of the surrounding text
+/// (which might be a Paragraph, a Heading, etc.).
 final _kInlineMathStyle = _kInlineCodeStyle.merge(TextStyle(
   backgroundColor: const HSLColor.fromAHSL(1, 240, 0.4, 0.93).toColor()));
 
+const _kInlineCodeFontSizeFactor = 0.825;
+
+/// The [TextStyle] for inline code, excluding font-size adjustment.
+///
+/// Inline code should use this and also apply [_kInlineCodeFontSizeFactor]
+/// to the font size of the surrounding text
+/// (which might be a Paragraph, a Heading, etc.).
 // Even though [kMonospaceTextStyle] is a variable-weight font,
 // it's acceptable to skip [weightVariableTextStyle] here,
 // assuming the text gets the effect of [weightVariableTextStyle]
 // through inheritance, e.g., from a [DefaultTextStyle].
 final _kInlineCodeStyle = kMonospaceTextStyle
-  .merge(const TextStyle(
-    backgroundColor: Color(0xffeeeeee),
-    fontSize: 0.825 * kBaseFontSize));
+  .merge(const TextStyle(backgroundColor: Color(0xffeeeeee)));
 
 final _kCodeBlockStyle = kMonospaceTextStyle
   .merge(const TextStyle(
@@ -750,9 +770,14 @@ final _kCodeBlockStyle = kMonospaceTextStyle
 // const _kInlineCodeRightBracket = '⟩';
 
 class UserMention extends StatelessWidget {
-  const UserMention({super.key, required this.node});
+  const UserMention({
+    super.key,
+    required this.node,
+    required this.surroundingTextStyle,
+  });
 
   final UserMentionNode node;
+  final TextStyle surroundingTextStyle;
 
   @override
   Widget build(BuildContext context) {
@@ -765,7 +790,7 @@ class UserMention extends StatelessWidget {
         // One hopes an @-mention can't contain an embedded link.
         // (The parser on creating a UserMentionNode has a TODO to check that.)
         linkRecognizers: null,
-        style: Paragraph.textStyle,
+        style: surroundingTextStyle,
         nodes: node.nodes));
   }
 
@@ -832,9 +857,14 @@ class MessageImageEmoji extends StatelessWidget {
 }
 
 class GlobalTime extends StatelessWidget {
-  const GlobalTime({super.key, required this.node});
+  const GlobalTime({
+    super.key,
+    required this.node,
+    required this.surroundingTextStyle,
+  });
 
   final GlobalTimeNode node;
+  final TextStyle surroundingTextStyle;
 
   static final _backgroundColor = const HSLColor.fromAHSL(1, 0, 0, 0.93).toColor();
   static final _borderColor = const HSLColor.fromAHSL(1, 0, 0, 0.8).toColor();
@@ -861,7 +891,7 @@ class GlobalTime extends StatelessWidget {
               // Ad-hoc spacing adjustment per feedback:
               //   https://chat.zulip.org/#narrow/stream/101-design/topic/clock.20icons/near/1729345
               const SizedBox(width: 1),
-              Text(text, style: Paragraph.textStyle),
+              Text(text, style: surroundingTextStyle),
             ]))));
   }
 }