content: Handle positive margin-right and margin-left in KaTeX spans

Author: rajveermalviya

lib/model/katex.dart

@@ -492,6 +492,8 @@ class _KatexParser {
       if (stylesheet.topLevels case [css_visitor.RuleSet() && final rule]) {
         double? heightEm;
         double? verticalAlignEm;
+        double? marginRightEm;
+        double? marginLeftEm;
 
         for (final declaration in rule.declarationGroup.declarations) {
           if (declaration case css_visitor.Declaration(
@@ -507,6 +509,20 @@ class _KatexParser {
               case 'vertical-align':
                 verticalAlignEm = _getEm(expression);
                 if (verticalAlignEm != null) continue;
+
+              case 'margin-right':
+                marginRightEm = _getEm(expression);
+                if (marginRightEm != null) {
+                  if (marginRightEm < 0) throw _KatexHtmlParseError();
+                  continue;
+                }
+
+              case 'margin-left':
+                marginLeftEm = _getEm(expression);
+                if (marginLeftEm != null) {
+                  if (marginLeftEm < 0) throw _KatexHtmlParseError();
+                  continue;
+                }
             }
 
             // TODO handle more CSS properties
@@ -522,6 +538,8 @@ class _KatexParser {
         return KatexSpanStyles(
           heightEm: heightEm,
           verticalAlignEm: verticalAlignEm,
+          marginRightEm: marginRightEm,
+          marginLeftEm: marginLeftEm,
         );
       } else {
         throw _KatexHtmlParseError();
@@ -560,6 +578,9 @@ class KatexSpanStyles {
   final double? heightEm;
   final double? verticalAlignEm;
 
+  final double? marginRightEm;
+  final double? marginLeftEm;
+
   final String? fontFamily;
   final double? fontSizeEm;
   final KatexSpanFontWeight? fontWeight;
@@ -569,6 +590,8 @@ class KatexSpanStyles {
   const KatexSpanStyles({
     this.heightEm,
     this.verticalAlignEm,
+    this.marginRightEm,
+    this.marginLeftEm,
     this.fontFamily,
     this.fontSizeEm,
     this.fontWeight,
@@ -581,6 +604,8 @@ class KatexSpanStyles {
     'KatexSpanStyles',
     heightEm,
     verticalAlignEm,
+    marginRightEm,
+    marginLeftEm,
     fontFamily,
     fontSizeEm,
     fontWeight,
@@ -593,6 +618,8 @@ class KatexSpanStyles {
     return other is KatexSpanStyles &&
       other.heightEm == heightEm &&
       other.verticalAlignEm == verticalAlignEm &&
+      other.marginRightEm == marginRightEm &&
+      other.marginLeftEm == marginLeftEm &&
       other.fontFamily == fontFamily &&
       other.fontSizeEm == fontSizeEm &&
       other.fontWeight == fontWeight &&
@@ -605,6 +632,8 @@ class KatexSpanStyles {
     final args = <String>[];
     if (heightEm != null) args.add('heightEm: $heightEm');
     if (verticalAlignEm != null) args.add('verticalAlignEm: $verticalAlignEm');
+    if (marginRightEm != null) args.add('marginRightEm: $marginRightEm');
+    if (marginLeftEm != null) args.add('marginLeftEm: $marginLeftEm');
     if (fontFamily != null) args.add('fontFamily: $fontFamily');
     if (fontSizeEm != null) args.add('fontSizeEm: $fontSizeEm');
     if (fontWeight != null) args.add('fontWeight: $fontWeight');
@@ -624,6 +653,8 @@ class KatexSpanStyles {
     return KatexSpanStyles(
       heightEm: other.heightEm ?? heightEm,
       verticalAlignEm: other.verticalAlignEm ?? verticalAlignEm,
+      marginRightEm: other.marginRightEm ?? marginRightEm,
+      marginLeftEm: other.marginLeftEm ?? marginLeftEm,
       fontFamily: other.fontFamily ?? fontFamily,
       fontSizeEm: other.fontSizeEm ?? fontSizeEm,
       fontStyle: other.fontStyle ?? fontStyle,
@@ -635,6 +666,8 @@ class KatexSpanStyles {
   KatexSpanStyles filter({
     bool heightEm = true,
     bool verticalAlignEm = true,
+    bool marginRightEm = true,
+    bool marginLeftEm = true,
     bool fontFamily = true,
     bool fontSizeEm = true,
     bool fontWeight = true,
@@ -644,6 +677,8 @@ class KatexSpanStyles {
     return KatexSpanStyles(
       heightEm: heightEm ? this.heightEm : null,
       verticalAlignEm: verticalAlignEm ? this.verticalAlignEm : null,
+      marginRightEm: marginRightEm ? this.marginRightEm : null,
+      marginLeftEm: marginLeftEm ? this.marginLeftEm : null,
       fontFamily: fontFamily ? this.fontFamily : null,
       fontSizeEm: fontSizeEm ? this.fontSizeEm : null,
       fontWeight: fontWeight ? this.fontWeight : null,

lib/widgets/content.dart

@@ -909,7 +909,7 @@ class _KatexSpan extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final em = DefaultTextStyle.of(context).style.fontSize!;
+    var em = DefaultTextStyle.of(context).style.fontSize!;
 
     Widget widget = const SizedBox.shrink();
     if (node.text != null) {
@@ -929,6 +929,8 @@ class _KatexSpan extends StatelessWidget {
       double fontSizeEm => fontSizeEm * em,
       null => null,
     };
+    if (fontSize != null) em = fontSize;
+
     final fontWeight = switch (styles.fontWeight) {
       KatexSpanFontWeight.bold => FontWeight.bold,
       null => null,
@@ -973,11 +975,28 @@ class _KatexSpan extends StatelessWidget {
         child: widget);
     }
 
-    return SizedBox(
+    widget = SizedBox(
       height: styles.heightEm != null
-        ? styles.heightEm! * (fontSize ?? em)
+        ? styles.heightEm! * em
         : null,
       child: widget);
+
+    final margin = switch ((styles.marginLeftEm, styles.marginRightEm)) {
+      (null, null) => null,
+      (null, final marginRightEm?) =>
+        EdgeInsets.only(right: marginRightEm * em),
+      (final marginLeftEm?, null) =>
+        EdgeInsets.only(left: marginLeftEm * em),
+      (final marginLeftEm?, final marginRightEm?) =>
+        EdgeInsets.only(left: marginLeftEm * em, right: marginRightEm * em),
+    };
+
+    if (margin != null) {
+      assert(margin.isNonNegative);
+      widget = Padding(padding: margin, child: widget);
+    }
+
+    return widget;
   }
 }
 

test/model/content_test.dart

@@ -884,6 +884,65 @@ class ContentExample {
         ]),
     ]);
 
+  static const mathBlockKatexSpace = ContentExample(
+    'math block; KaTeX space',
+    // https://chat.zulip.org/#narrow/channel/7-test-here/topic/Rajesh/near/2214883
+    '```math\n1:2\n```',
+    '<p>'
+      '<span class="katex-display"><span class="katex">'
+        '<span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML" display="block"><semantics><mrow><mn>1</mn><mo>:</mo><mn>2</mn></mrow><annotation encoding="application/x-tex">1:2</annotation></semantics></math></span>'
+        '<span class="katex-html" aria-hidden="true">'
+          '<span class="base">'
+            '<span class="strut" style="height:0.6444em;"></span>'
+            '<span class="mord">1</span>'
+            '<span class="mspace" style="margin-right:0.2778em;"></span>'
+            '<span class="mrel">:</span>'
+            '<span class="mspace" style="margin-right:0.2778em;"></span></span>'
+          '<span class="base">'
+            '<span class="strut" style="height:0.6444em;"></span>'
+            '<span class="mord">2</span></span></span></span></span></p>', [
+      MathBlockNode(
+        texSource: '1:2',
+        nodes: [
+          KatexSpanNode(
+            styles: KatexSpanStyles(),
+            text: null,
+            nodes: [
+              KatexStrutNode(
+                heightEm: 0.6444,
+                verticalAlignEm: null),
+              KatexSpanNode(
+                styles: KatexSpanStyles(),
+                text: '1',
+                nodes: null),
+              KatexSpanNode(
+                styles: KatexSpanStyles(marginRightEm: 0.2778),
+                text: null,
+                nodes: []),
+              KatexSpanNode(
+                styles: KatexSpanStyles(),
+                text: ':',
+                nodes: null),
+              KatexSpanNode(
+                styles: KatexSpanStyles(marginRightEm: 0.2778),
+                text: null,
+                nodes: []),
+            ]),
+          KatexSpanNode(
+            styles: KatexSpanStyles(),
+            text: null,
+            nodes: [
+              KatexStrutNode(
+                heightEm: 0.6444,
+                verticalAlignEm: null),
+              KatexSpanNode(
+                styles: KatexSpanStyles(),
+                text: '2',
+                nodes: null),
+            ]),
+        ]),
+    ]);
+
   static const imageSingle = ContentExample(
     'single image',
     // https://chat.zulip.org/#narrow/stream/7-test-here/topic/Thumbnails/near/1900103
@@ -1973,6 +2032,7 @@ void main() async {
   testParseExample(ContentExample.mathBlockKatexSizing);
   testParseExample(ContentExample.mathBlockKatexNestedSizing);
   testParseExample(ContentExample.mathBlockKatexDelimSizing);
+  testParseExample(ContentExample.mathBlockKatexSpace);
 
   testParseExample(ContentExample.imageSingle);
   testParseExample(ContentExample.imageSingleNoDimensions);

test/widgets/content_test.dart

@@ -597,6 +597,11 @@ void main() {
           ('⌈', Offset(27.12, 20.14), Size(11.99, 25.00)),
           ('⌊', Offset(39.11, 20.14), Size(13.14, 25.00)),
         ]),
+        (ContentExample.mathBlockKatexSpace, skip: false, [
+          ('1', Offset(0.00, 2.24), Size(10.28, 25.00)),
+          (':', Offset(16.00, 2.24), Size(5.72, 25.00)),
+          ('2', Offset(27.43, 2.24), Size(10.28, 25.00)),
+        ]),
       ];
 
       for (final testCase in testCases) {