content: Scale inline KaTeX content based on the surrounding text

This applies the correct font scaling if the KaTeX content is
inside a header.

Author: rajveermalviya

lib/widgets/content.dart

@@ -822,22 +822,33 @@ class MathBlock extends StatelessWidget {
       child: SingleChildScrollViewWithScrollbar(
         scrollDirection: Axis.horizontal,
         child: _Katex(
+          textStyle: ContentTheme.of(context).textStylePlainParagraph,
           nodes: nodes)));
   }
 }
 
-// Base text style from .katex class in katex.scss :
-//   https://github.com/KaTeX/KaTeX/blob/613c3da8/src/styles/katex.scss#L13-L15
-const kBaseKatexTextStyle = TextStyle(
-  fontSize: kBaseFontSize * 1.21,
-  fontFamily: 'KaTeX_Main',
-  height: 1.2);
+/// Creates a base text style for rendering KaTeX content.
+///
+/// This applies the CSS styles defined in .katex class in katex.scss :
+///   https://github.com/KaTeX/KaTeX/blob/613c3da8/src/styles/katex.scss#L13-L15
+///
+/// Requires the [style.fontSize] to be non-null.
+TextStyle mkBaseKatexTextStyle(TextStyle style) {
+  return style.copyWith(
+    fontSize: style.fontSize! * 1.21,
+    fontFamily: 'KaTeX_Main',
+    height: 1.2,
+    fontWeight: FontWeight.normal,
+    fontStyle: FontStyle.normal);
+}
 
 class _Katex extends StatelessWidget {
   const _Katex({
+    required this.textStyle,
     required this.nodes,
   });
 
+  final TextStyle textStyle;
   final List<KatexNode> nodes;
 
   @override
@@ -846,9 +857,8 @@ class _Katex extends StatelessWidget {
 
     return Directionality(
       textDirection: TextDirection.ltr,
-      child: DefaultTextStyle(
-        style: kBaseKatexTextStyle.copyWith(
-          color: ContentTheme.of(context).textStylePlainParagraph.color),
+      child: DefaultTextStyle.merge(
+        style: mkBaseKatexTextStyle(textStyle),
         child: widget));
   }
 }
@@ -865,9 +875,11 @@ class _KatexNodeList extends StatelessWidget {
         return WidgetSpan(
           alignment: PlaceholderAlignment.baseline,
           baseline: TextBaseline.alphabetic,
-          child: switch (e) {
-            KatexSpanNode() => _KatexSpan(e),
-          });
+          child: MediaQuery(
+            data: MediaQueryData(textScaler: TextScaler.noScaling),
+            child: switch (e) {
+              KatexSpanNode() => _KatexSpan(e),
+            }));
       }))));
   }
 }
@@ -1266,7 +1278,7 @@ class _InlineContentBuilder {
           : WidgetSpan(
               alignment: PlaceholderAlignment.baseline,
               baseline: TextBaseline.alphabetic,
-              child: _Katex(nodes: nodes));
+              child: _Katex(textStyle: widget.style, nodes: nodes));
 
       case GlobalTimeNode():
         return WidgetSpan(alignment: PlaceholderAlignment.middle,

test/widgets/content_test.dart

@@ -595,16 +595,20 @@ void main() {
       final content = ContentExample.mathBlockKatexSizing;
       await prepareContent(tester, plainContent(content.html));
 
+      final context = tester.element(find.byType(MathBlock));
+      final baseTextStyle =
+        mkBaseKatexTextStyle(ContentTheme.of(context).textStylePlainParagraph);
+
       final mathBlockNode = content.expectedNodes.single as MathBlockNode;
       final baseNode = mathBlockNode.nodes!.single as KatexSpanNode;
       final nodes = baseNode.nodes!.skip(1); // Skip .strut node.
       for (var katexNode in nodes) {
         katexNode = katexNode as KatexSpanNode;
-        final fontSize = katexNode.styles.fontSizeEm! * kBaseKatexTextStyle.fontSize!;
+        final fontSize = katexNode.styles.fontSizeEm! * baseTextStyle.fontSize!;
         checkKatexText(tester, katexNode.text!,
           fontFamily: 'KaTeX_Main',
           fontSize: fontSize,
-          fontHeight: kBaseKatexTextStyle.height!);
+          fontHeight: baseTextStyle.height!);
       }
     });
 
@@ -617,17 +621,21 @@ void main() {
       final content = ContentExample.mathBlockKatexNestedSizing;
       await prepareContent(tester, plainContent(content.html));
 
-      var fontSize = 0.5 * kBaseKatexTextStyle.fontSize!;
+      final context = tester.element(find.byType(MathBlock));
+      final baseTextStyle =
+        mkBaseKatexTextStyle(ContentTheme.of(context).textStylePlainParagraph);
+
+      var fontSize = 0.5 * baseTextStyle.fontSize!;
       checkKatexText(tester, '1',
         fontFamily: 'KaTeX_Main',
         fontSize: fontSize,
-        fontHeight: kBaseKatexTextStyle.height!);
+        fontHeight: baseTextStyle.height!);
 
       fontSize = 4.976 * fontSize;
       checkKatexText(tester, '2',
         fontFamily: 'KaTeX_Main',
         fontSize: fontSize,
-        fontHeight: kBaseKatexTextStyle.height!);
+        fontHeight: baseTextStyle.height!);
     });
 
     testWidgets('displays KaTeX content with different delimiter sizing', (tester) async {
@@ -643,13 +651,15 @@ void main() {
       final baseNode = mathBlockNode.nodes!.single as KatexSpanNode;
       var nodes = baseNode.nodes!.skip(1); // Skip .strut node.
 
-      final fontSize = kBaseKatexTextStyle.fontSize!;
+      final context = tester.element(find.byType(MathBlock));
+      final baseTextStyle =
+        mkBaseKatexTextStyle(ContentTheme.of(context).textStylePlainParagraph);
 
       final firstNode = nodes.first as KatexSpanNode;
       checkKatexText(tester, firstNode.text!,
         fontFamily: 'KaTeX_Main',
-        fontSize: fontSize,
-        fontHeight: kBaseKatexTextStyle.height!);
+        fontSize: baseTextStyle.fontSize!,
+        fontHeight: baseTextStyle.height!);
       nodes = nodes.skip(1);
 
       for (var katexNode in nodes) {
@@ -658,8 +668,8 @@ void main() {
         final fontFamily = katexNode.styles.fontFamily!;
         checkKatexText(tester, katexNode.text!,
           fontFamily: fontFamily,
-          fontSize: fontSize,
-          fontHeight: kBaseKatexTextStyle.height!);
+          fontSize: baseTextStyle.fontSize!,
+          fontHeight: baseTextStyle.height!);
       }
     }, skip: true); // TODO: Re-enable this test after adding support for parsing
                     // `vertical-align` in inline styles. Currently it fails