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

@@ -818,24 +818,37 @@ class MathBlock extends StatelessWidget {
           children: [TextSpan(text: node.texSource)])));
     }
 
-    return _Katex(inline: false, nodes: nodes);
+    return _Katex(
+      inline: false,
+      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.inline,
+    required this.textStyle,
     required this.nodes,
   });
 
   final bool inline;
+  final TextStyle textStyle;
   final List<KatexNode> nodes;
 
   @override
@@ -851,9 +864,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));
   }
 }
@@ -870,7 +882,9 @@ class _KatexNodeList extends StatelessWidget {
         return WidgetSpan(
           alignment: PlaceholderAlignment.baseline,
           baseline: TextBaseline.alphabetic,
-          child: _KatexSpan(e));
+          child: MediaQuery(
+            data: MediaQueryData(textScaler: TextScaler.noScaling),
+            child: _KatexSpan(e)));
       }))));
   }
 }
@@ -1263,7 +1277,7 @@ class _InlineContentBuilder {
           : WidgetSpan(
               alignment: PlaceholderAlignment.baseline,
               baseline: TextBaseline.alphabetic,
-              child: _Katex(inline: true, nodes: nodes));
+              child: _Katex(inline: true, textStyle: widget.style, nodes: nodes));
 
       case GlobalTimeNode():
         return WidgetSpan(alignment: PlaceholderAlignment.middle,

test/widgets/content_test.dart

@@ -595,15 +595,19 @@ 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;
       final nodes = baseNode.nodes!.skip(1); // Skip .strut node.
       for (final katexNode in nodes) {
-        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!);
       }
     });
 
@@ -616,17 +620,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 {
@@ -642,22 +650,24 @@ void main() {
       final baseNode = mathBlockNode.nodes!.single;
       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;
       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) {
         katexNode = katexNode.nodes!.single; // Skip empty .mord parent.
         final fontFamily = katexNode.styles.fontFamily!;
         checkKatexText(tester, katexNode.text!,
           fontFamily: fontFamily,
-          fontSize: fontSize,
-          fontHeight: kBaseKatexTextStyle.height!);
+          fontSize: baseTextStyle.fontSize!,
+          fontHeight: baseTextStyle.height!);
       }
     });
   });