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

Author: rajveermalviya

lib/model/katex.dart

@@ -424,6 +424,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(
@@ -439,6 +441,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
@@ -453,6 +469,8 @@ class _KatexParser {
         return KatexSpanStyles(
           heightEm: heightEm,
           verticalAlignEm: verticalAlignEm,
+          marginRightEm: marginRightEm,
+          marginLeftEm: marginLeftEm,
         );
       } else {
         throw KatexHtmlParseError();
@@ -491,6 +509,9 @@ class KatexSpanStyles {
   final double? heightEm;
   final double? verticalAlignEm;
 
+  final double? marginRightEm;
+  final double? marginLeftEm;
+
   final String? fontFamily;
   final double? fontSizeEm;
   final KatexSpanFontWeight? fontWeight;
@@ -500,6 +521,8 @@ class KatexSpanStyles {
   const KatexSpanStyles({
     this.heightEm,
     this.verticalAlignEm,
+    this.marginRightEm,
+    this.marginLeftEm,
     this.fontFamily,
     this.fontSizeEm,
     this.fontWeight,
@@ -512,6 +535,8 @@ class KatexSpanStyles {
     'KatexSpanStyles',
     heightEm,
     verticalAlignEm,
+    marginRightEm,
+    marginLeftEm,
     fontFamily,
     fontSizeEm,
     fontWeight,
@@ -524,6 +549,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 &&
@@ -536,6 +563,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');
@@ -548,6 +577,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,
@@ -559,6 +590,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,
@@ -568,6 +601,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

@@ -959,7 +959,30 @@ class _KatexSpan extends StatelessWidget {
         child: widget);
     }
 
-    return SizedBox(
+    final marginRight = switch (styles.marginRightEm) {
+      double marginRightEm => marginRightEm * em,
+      null => null,
+    };
+    final marginLeft = switch (styles.marginLeftEm) {
+      double marginLeftEm => marginLeftEm * em,
+      null => null,
+    };
+
+    EdgeInsets? margin;
+    if (marginRight != null || marginLeft != null) {
+      margin = EdgeInsets.zero;
+      if (marginRight != null) {
+        assert(marginRight >= 0);
+        margin += EdgeInsets.only(right: marginRight);
+      }
+      if (marginLeft != null) {
+        assert(marginLeft >= 0);
+        margin += EdgeInsets.only(left: marginLeft);
+      }
+    }
+
+    return Container(
+      margin: margin,
       height: styles.heightEm != null
         ? styles.heightEm! * em
         : null,