content: Support negative margins 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

@@ -455,6 +455,28 @@ class KatexVlistRowNode extends ContentNode {
   }
 }
 
+class KatexNegativeMarginNode extends KatexNode {
+  const KatexNegativeMarginNode({
+    required this.leftOffsetEm,
+    required this.nodes,
+    super.debugHtmlNode,
+  }) : assert(leftOffsetEm < 0);
+
+  final double leftOffsetEm;
+  final List<KatexNode> nodes;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DoubleProperty('leftOffsetEm', leftOffsetEm));
+  }
+
+  @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

@@ -1,3 +1,4 @@
+import 'package:collection/collection.dart';
 import 'package:csslib/parser.dart' as css_parser;
 import 'package:csslib/visitor.dart' as css_visitor;
 import 'package:flutter/foundation.dart';
@@ -118,13 +119,39 @@ class _KatexParser {
   }
 
   List<KatexNode> _parseChildSpans(List<dom.Node> nodes) {
-    return List.unmodifiable(nodes.map((node) {
-      if (node case dom.Element(localName: 'span')) {
-        return _parseSpan(node);
-      } else {
+    var resultSpans = QueueList<KatexNode>();
+    for (final node in nodes.reversed) {
+      if (node is! dom.Element || node.localName != 'span') {
         throw KatexHtmlParseError();
       }
-    }));
+
+      final span = _parseSpan(node);
+
+      if (span is KatexSpanNode) {
+        final marginRightEm = span.styles.marginRightEm;
+        if (marginRightEm != null && marginRightEm.isNegative) {
+          final previousSpans = resultSpans;
+          resultSpans = QueueList<KatexNode>();
+          resultSpans.addFirst(KatexNegativeMarginNode(
+            leftOffsetEm: marginRightEm,
+            nodes: previousSpans));
+        }
+      }
+
+      resultSpans.addFirst(span);
+
+      if (span is KatexSpanNode) {
+        final marginLeftEm = span.styles.marginLeftEm;
+        if (marginLeftEm != null && marginLeftEm.isNegative) {
+          final previousSpans = resultSpans;
+          resultSpans = QueueList<KatexNode>();
+          resultSpans.addFirst(KatexNegativeMarginNode(
+            leftOffsetEm: marginLeftEm,
+            nodes: previousSpans));
+        }
+      }
+    }
+    return resultSpans;
   }
 
   static final _resetSizeClassRegExp = RegExp(r'^reset-size(\d\d?)$');
@@ -210,13 +237,31 @@ class _KatexParser {
                 final pstrutStyles = _parseSpanInlineStyles(pstrutSpan)!;
                 final pstrutHeight = pstrutStyles.heightEm ?? 0;
 
+                KatexSpanNode innerSpanNode = KatexSpanNode(
+                  styles: styles,
+                  text: null,
+                  nodes: _parseChildSpans(otherSpans));
+
+                final marginRightEm = styles.marginRightEm;
+                final marginLeftEm = styles.marginLeftEm;
+                if (marginRightEm != null && marginRightEm.isNegative) {
+                  throw KatexHtmlParseError();
+                }
+                if (marginLeftEm != null && marginLeftEm.isNegative) {
+                  innerSpanNode = KatexSpanNode(
+                    styles: KatexSpanStyles(),
+                    text: null,
+                    nodes: [
+                      KatexNegativeMarginNode(
+                        leftOffsetEm: marginLeftEm,
+                        nodes: [innerSpanNode]),
+                    ]);
+                }
+
                 rows.add(KatexVlistRowNode(
                   verticalOffsetEm: topEm + pstrutHeight,
                   debugHtmlNode: kDebugMode ? innerSpan : null,
-                  node: KatexSpanNode(
-                    styles: styles,
-                    text: null,
-                    nodes: _parseChildSpans(otherSpans))));
+                  node: innerSpanNode));
               } else {
                 throw KatexHtmlParseError();
               }
@@ -532,17 +577,11 @@ class _KatexParser {
 
               case 'margin-right':
                 marginRightEm = _getEm(expression);
-                if (marginRightEm != null) {
-                  if (marginRightEm < 0) throw KatexHtmlParseError();
-                  continue;
-                }
+                if (marginRightEm != null) continue;
 
               case 'margin-left':
                 marginLeftEm = _getEm(expression);
-                if (marginLeftEm != null) {
-                  if (marginLeftEm < 0) throw KatexHtmlParseError();
-                  continue;
-                }
+                if (marginLeftEm != null) continue;
             }
 
             // TODO handle more CSS properties

lib/widgets/content.dart

@@ -20,6 +20,7 @@ import 'code_block.dart';
 import 'dialog.dart';
 import 'icons.dart';
 import 'inset_shadow.dart';
+import 'katex.dart';
 import 'lightbox.dart';
 import 'message_list.dart';
 import 'poll.dart';
@@ -882,6 +883,7 @@ class _KatexNodeList extends StatelessWidget {
               KatexSpanNode() => _KatexSpan(e),
               KatexStrutNode() => _KatexStrut(e),
               KatexVlistNode() => _KatexVlist(e),
+              KatexNegativeMarginNode() => _KatexNegativeMargin(e),
             }));
       }))));
   }
@@ -955,23 +957,21 @@ class _KatexSpan extends StatelessWidget {
     }
 
     final marginRight = switch (styles.marginRightEm) {
-      double marginRightEm => marginRightEm * em,
-      null => null,
+      double marginRightEm when marginRightEm >= 0 => marginRightEm * em,
+      _ => null,
     };
     final marginLeft = switch (styles.marginLeftEm) {
-      double marginLeftEm => marginLeftEm * em,
-      null => null,
+      double marginLeftEm when marginLeftEm >= 0 => marginLeftEm * em,
+      _ => 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);
       }
     }
@@ -1030,6 +1030,21 @@ class _KatexVlist 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!;
+
+    return NegativeLeftOffset(
+      leftOffset: node.leftOffsetEm * em,
+      child: _KatexNodeList(nodes: node.nodes));
+  }
+}
+
 class WebsitePreview extends StatelessWidget {
   const WebsitePreview({super.key, required this.node});