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

@@ -350,7 +350,7 @@ class MathBlockNode extends BlockContentNode {
   });
 
   final String texSource;
-  final List<KatexSpanNode>? nodes;
+  final List<KatexNode>? nodes;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -364,7 +364,11 @@ class MathBlockNode extends BlockContentNode {
   }
 }
 
-class KatexSpanNode extends ContentNode {
+sealed class KatexNode extends ContentNode {
+  const KatexNode({super.debugHtmlNode});
+}
+
+class KatexSpanNode extends KatexNode {
   const KatexSpanNode({
     required this.styles,
     required this.text,
@@ -374,7 +378,7 @@ class KatexSpanNode extends ContentNode {
 
   final KatexSpanStyles styles;
   final String? text;
-  final List<KatexSpanNode> nodes;
+  final List<KatexNode> nodes;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -389,6 +393,28 @@ class KatexSpanNode extends ContentNode {
   }
 }
 
+class KatexNegativeMarginNode extends KatexNode {
+  const KatexNegativeMarginNode({
+    this.marginRightEm,
+    this.nodes = const [],
+    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 ImageNodeList extends BlockContentNode {
   const ImageNodeList(this.images, {super.debugHtmlNode});
 
@@ -858,7 +884,7 @@ class MathInlineNode extends InlineContentNode {
   });
 
   final String texSource;
-  final List<KatexSpanNode>? nodes;
+  final List<KatexNode>? nodes;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
@@ -895,7 +921,7 @@ class GlobalTimeNode extends InlineContentNode {
 
 ////////////////////////////////////////////////////////////////
 
-({List<KatexSpanNode>? spans, String texSource})? _parseMath(
+({List<KatexNode>? spans, String texSource})? _parseMath(
   dom.Element element, {
   required bool block,
 }) {
@@ -945,7 +971,7 @@ class GlobalTimeNode extends InlineContentNode {
       return null;
     }
 
-    List<KatexSpanNode>? spans;
+    List<KatexNode>? spans;
     try {
       spans = KatexParser().parseKatexHTML(katexHtmlElement);
     } on KatexHtmlParseError catch (e, st) {

lib/model/katex.dart

@@ -7,17 +7,31 @@ import '../log.dart';
 import 'content.dart';
 
 class KatexParser {
-  List<KatexSpanNode> parseKatexHTML(dom.Element element) {
+  List<KatexNode> parseKatexHTML(dom.Element element) {
     assert(element.localName == 'span');
     assert(element.className == 'katex-html');
     return _parseChildSpans(element);
   }
 
-  List<KatexSpanNode> _parseChildSpans(dom.Element element) {
-    return List.unmodifiable(element.nodes.map((node) {
+  List<KatexNode> _parseChildSpans(dom.Element element) {
+    var resultSpans = <KatexNode>[];
+    for (final node in element.nodes.reversed) {
       if (node is! dom.Element) throw KatexHtmlParseError();
-      return _parseSpan(node);
-    }));
+      final span = _parseSpan(node);
+      resultSpans.add(span);
+
+      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?)$');
@@ -220,7 +234,7 @@ class KatexParser {
     }
 
     String? text;
-    List<KatexSpanNode>? spans;
+    List<KatexNode>? spans;
     if (element.nodes case [dom.Text(data: final data)]) {
       text = data;
     } else {

lib/widgets/content.dart

@@ -830,7 +830,7 @@ class _Katex extends StatelessWidget {
   });
 
   final bool inline;
-  final List<KatexSpanNode> nodes;
+  final List<KatexNode> nodes;
 
   @override
   Widget build(BuildContext context) {
@@ -840,7 +840,10 @@ class _Katex extends StatelessWidget {
           return WidgetSpan(
             alignment: PlaceholderAlignment.baseline,
             baseline: TextBaseline.alphabetic,
-            child: _KatexSpan(e));
+            child: switch (e) {
+              KatexSpanNode() => _KatexSpan(e),
+              KatexNegativeMarginNode() => _KatexNegativeMargin(e),
+            });
         }))));
 
     if (!inline) {
@@ -879,7 +882,10 @@ class _KatexSpan extends StatelessWidget {
             return WidgetSpan(
               alignment: PlaceholderAlignment.baseline,
               baseline: TextBaseline.alphabetic,
-              child: _KatexSpan(e));
+              child: switch (e) {
+                KatexSpanNode() => _KatexSpan(e),
+                KatexNegativeMarginNode() => _KatexNegativeMargin(e),
+              });
           }))));
     }
 
@@ -946,6 +952,37 @@ class _KatexSpan extends StatelessWidget {
   }
 }
 
+class _KatexNegativeMargin extends StatelessWidget {
+  const _KatexNegativeMargin(this.node);
+
+  final KatexNegativeMarginNode node;
+
+  @override
+  Widget build(BuildContext context) {
+    final em = DefaultTextStyle.of(context).style.fontSize!;
+
+    final widget = RichText(
+      text: TextSpan(
+        children: List.unmodifiable(
+          node.nodes.map((e) {
+            return WidgetSpan(
+            alignment: PlaceholderAlignment.baseline,
+            baseline: TextBaseline.alphabetic,
+            child: switch (e) {
+              KatexSpanNode() => _KatexSpan(e),
+              KatexNegativeMarginNode() => _KatexNegativeMargin(e),
+            });
+          }))));
+
+    var offset = Offset.zero;
+    final marginRightEm = node.marginRightEm;
+    if (marginRightEm != null) offset += Offset(marginRightEm * em, 0);
+    return offset == Offset.zero
+      ? widget
+      : Transform.translate(offset: offset, child: widget);
+  }
+}
+
 class WebsitePreview extends StatelessWidget {
   const WebsitePreview({super.key, required this.node});