content: Support negative right-margin on KaTeX spans

Negative margin spans on web render to the offset being applied
to the specific span and all the adjacent spans, so mimic the
same behaviour here.

Author: rajveermalviya

lib/model/content.dart

@@ -441,6 +441,28 @@ class KatexVlistRowNode extends ContentNode {
   }
 }
 
+class KatexNegativeMarginNode extends KatexNode {
+  const KatexNegativeMarginNode({
+    required this.marginRightEm,
+    required this.nodes,
+    super.debugHtmlNode,
+  });
+
+  final double marginRightEm;
+  final List<KatexNode> nodes;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(StringProperty('marginRightEm', '$marginRightEm'));
+  }
+
+  @override
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return nodes.map((node) => node.toDiagnosticsNode()).toList();
+  }
+}
+
 class MathBlockNode extends MathNode implements BlockContentNode {
   const MathBlockNode({
     super.debugHtmlNode,

lib/model/katex.dart

@@ -123,13 +123,29 @@ class _KatexParser {
   }
 
   List<KatexNode> _parseChildSpans(dom.Element element) {
-    return List.unmodifiable(element.nodes.map((node) {
-      if (node case dom.Element(localName: 'span')) {
-        return _parseSpan(node);
-      } else {
+    var resultSpans = <KatexNode>[];
+    for (final node in element.nodes.reversed) {
+      if (node is! dom.Element || node.localName != 'span') {
         throw KatexHtmlParseError();
       }
-    }));
+
+      final span = _parseSpan(node);
+      resultSpans.add(span);
+
+      if (span is KatexSpanNode) {
+        final marginRightEm = span.styles.marginRightEm;
+        if (marginRightEm != null && marginRightEm.isNegative) {
+          final previousSpansReversed =
+            resultSpans.reversed.toList(growable: false);
+          resultSpans = [];
+          resultSpans.add(KatexNegativeMarginNode(
+            marginRightEm: marginRightEm,
+            nodes: previousSpansReversed));
+        }
+      }
+    }
+
+    return resultSpans.reversed.toList(growable: false);
   }
 
   static final _resetSizeClassRegExp = RegExp(r'^reset-size(\d\d?)$');
@@ -477,6 +493,7 @@ class _KatexParser {
       final stylesheet = css_parser.parse('*{$styleStr}');
       if (stylesheet.topLevels case [css_visitor.RuleSet() && final rule]) {
         double? heightEm;
+        double? marginRightEm;
         double? topEm;
         double? verticalAlignEm;
 
@@ -491,6 +508,10 @@ class _KatexParser {
                 heightEm = _getEm(expression);
                 if (heightEm != null) continue;
 
+              case 'margin-right':
+                marginRightEm = _getEm(expression);
+                if (marginRightEm != null) continue;
+
               case 'top':
                 topEm = _getEm(expression);
                 if (topEm != null) continue;
@@ -510,6 +531,7 @@ class _KatexParser {
 
         return KatexSpanStyles(
           heightEm: heightEm,
+          marginRightEm: marginRightEm,
           topEm: topEm,
           verticalAlignEm: verticalAlignEm,
         );
@@ -546,6 +568,7 @@ enum KatexSpanTextAlign {
 @immutable
 class KatexSpanStyles {
   final double? heightEm;
+  final double? marginRightEm;
   final double? topEm;
   final double? verticalAlignEm;
 
@@ -557,6 +580,7 @@ class KatexSpanStyles {
 
   const KatexSpanStyles({
     this.heightEm,
+    this.marginRightEm,
     this.topEm,
     this.verticalAlignEm,
     this.fontFamily,
@@ -570,6 +594,7 @@ class KatexSpanStyles {
   int get hashCode => Object.hash(
     'KatexSpanStyles',
     heightEm,
+    marginRightEm,
     topEm,
     verticalAlignEm,
     fontFamily,
@@ -583,6 +608,7 @@ class KatexSpanStyles {
   bool operator ==(Object other) {
     return other is KatexSpanStyles &&
       other.heightEm == heightEm &&
+      other.marginRightEm == marginRightEm &&
       other.topEm == topEm &&
       other.verticalAlignEm == verticalAlignEm &&
       other.fontFamily == fontFamily &&
@@ -596,6 +622,7 @@ class KatexSpanStyles {
   String toString() {
     final args = <String>[];
     if (heightEm != null) args.add('heightEm: $heightEm');
+    if (marginRightEm != null) args.add('marginRightEm: $marginRightEm');
     if (topEm != null) args.add('topEm: $topEm');
     if (verticalAlignEm != null) args.add('verticalAlignEm: $verticalAlignEm');
     if (fontFamily != null) args.add('fontFamily: $fontFamily');
@@ -609,6 +636,7 @@ class KatexSpanStyles {
   KatexSpanStyles merge(KatexSpanStyles other) {
     return KatexSpanStyles(
       heightEm: other.heightEm ?? heightEm,
+      marginRightEm: other.marginRightEm ?? marginRightEm,
       topEm: other.topEm ?? topEm,
       verticalAlignEm: other.verticalAlignEm ?? verticalAlignEm,
       fontFamily: other.fontFamily ?? fontFamily,

lib/widgets/content.dart

@@ -880,6 +880,7 @@ class _KatexNodeList extends StatelessWidget {
           child: switch (e) {
             KatexSpanNode() => _KatexSpan(e),
             KatexVlistNode() => _KatexVlist(e),
+            KatexNegativeMarginNode() => _KatexNegativeMargin(e),
           });
       }))));
   }
@@ -959,7 +960,10 @@ class _KatexSpan extends StatelessWidget {
         child: widget);
     }
 
-    return SizedBox(
+    return Container(
+      margin: styles.marginRightEm != null && !styles.marginRightEm!.isNegative
+        ? EdgeInsets.only(right: styles.marginRightEm! * em)
+        : null,
       height: styles.heightEm != null
         ? styles.heightEm! * em
         : null,
@@ -988,12 +992,38 @@ class _KatexVlist extends StatelessWidget {
               child: switch (e) {
                 KatexSpanNode() => _KatexSpan(e),
                 KatexVlistNode() => _KatexVlist(e),
+                KatexNegativeMarginNode() => _KatexNegativeMargin(e),
               });
           })))));
     })));
   }
 }
 
+class _KatexNegativeMargin extends StatelessWidget {
+  const _KatexNegativeMargin(this.node);
+
+  final KatexNegativeMarginNode node;
+
+  @override
+  Widget build(BuildContext context) {
+    final em = DefaultTextStyle.of(context).style.fontSize!;
+
+    return Transform.translate(
+      offset: Offset(node.marginRightEm * em, 0),
+      child: Text.rich(TextSpan(
+        children: List.unmodifiable(node.nodes.map((e) {
+          return WidgetSpan(
+            alignment: PlaceholderAlignment.baseline,
+            baseline: TextBaseline.alphabetic,
+            child: switch (e) {
+              KatexSpanNode() => _KatexSpan(e),
+              KatexVlistNode() => _KatexVlist(e),
+              KatexNegativeMarginNode() => _KatexNegativeMargin(e),
+            });
+        })))));
+  }
+}
+
 class WebsitePreview extends StatelessWidget {
   const WebsitePreview({super.key, required this.node});