content: Make TeX in link spans link-colored

Fixes #1823.

Author: chrisbobbe

lib/widgets/katex.dart

@@ -6,7 +6,6 @@ import 'package:flutter/rendering.dart';
 
 import '../model/content.dart';
 import '../model/katex.dart';
-import 'content.dart';
 
 /// Creates a base text style for rendering KaTeX content.
 ///
@@ -16,17 +15,14 @@ import 'content.dart';
 ///   https://github.com/KaTeX/KaTeX/blob/613c3da8/src/styles/katex.scss#L13-L15
 ///
 /// Requires the [ambientStyle.fontSize] to be non-null.
-TextStyle mkBaseKatexTextStyle(TextStyle ambientStyle, Color baseColor) {
+TextStyle mkBaseKatexTextStyle(TextStyle ambientStyle) {
   return ambientStyle.copyWith(
     ////// Overrides of our own styles:
 
     // Bold formatting is removed below by setting FontWeight.normal…
     // Just for completeness, remove "wght", but it wouldn't do anything anyway
     // since KaTeX_Main is not a variable-weight font.
     fontVariations: [],
-    // Remove link color, but
-    // TODO(#1823) do we want to do that? Web doesn't.
-    color: baseColor,
     // Italic is removed below.
 
     // Strikethrough is removed below, which affects formatting of rendered
@@ -68,8 +64,7 @@ class KatexWidget extends StatelessWidget {
     return Directionality(
       textDirection: TextDirection.ltr,
       child: DefaultTextStyle(
-        style: mkBaseKatexTextStyle(ambientTextStyle,
-          ContentTheme.of(context).textStylePlainParagraph.color!),
+        style: mkBaseKatexTextStyle(ambientTextStyle),
         child: widget));
   }
 }

test/widgets/content_test.dart

@@ -997,13 +997,22 @@ void main() {
 
     testContentSmoke(ContentExample.mathInline);
 
+    final mathInlineHtml = '<span class="katex">'
+      '<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>λ</mi></mrow>'
+        '<annotation encoding="application/x-tex"> \\lambda </annotation></semantics></math></span>'
+      '<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal">λ</span></span></span></span>';
+
+    testWidgets('is link-colored in link span', (tester) async {
+      // Regression test for: https://github.com/zulip/zulip-flutter/issues/1823
+      await prepareContent(tester,
+        plainContent('<p><a href="https://example/">$mathInlineHtml</a></p>'));
+      final style = mergedStyleOf(tester, 'λ');
+      check(style!.color).equals(const HSLColor.fromAHSL(1, 200, 1, 0.4).toColor());
+    });
+
     testWidgets('maintains font-size ratio with surrounding text', (tester) async {
-      const html = '<span class="katex">'
-        '<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mi>λ</mi></mrow>'
-          '<annotation encoding="application/x-tex"> \\lambda </annotation></semantics></math></span>'
-        '<span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.6944em;"></span><span class="mord mathnormal">λ</span></span></span></span>';
       await checkFontSizeRatio(tester,
-        targetHtml: html,
+        targetHtml: mathInlineHtml,
         targetFontSizeFinder: (rootSpan) {
           late final double result;
           rootSpan.visitChildren((span) {