katex: Handle position & top property in span inline styles

Allowing support for handling KaTeX HTML for big operators.

Fixes: #1671

Author: rajveermalviya

lib/model/katex.dart

@@ -631,6 +631,7 @@ class _KatexParser {
       marginLeftEm: _takeStyleEm(inlineStyles, 'margin-left'),
       marginRightEm: _takeStyleEm(inlineStyles, 'margin-right'),
       color: _takeStyleColor(inlineStyles, 'color'),
+      position: _takeStylePosition(inlineStyles, 'position'),
       // TODO handle more CSS properties
     );
     if (inlineStyles != null && inlineStyles.isNotEmpty) {
@@ -642,8 +643,8 @@ class _KatexParser {
     }
     // Currently, we expect `top` to only be inside a vlist, and
     // we handle that case separately above.
-    if (styles.topEm != null) {
-      throw _KatexHtmlParseError('unsupported inline CSS property: top');
+    if (styles.topEm != null && styles.position != KatexSpanPosition.relative) {
+      throw _KatexHtmlParseError('unsupported inline CSS property "top", when "position: ${styles.position}"');
     }
 
     String? text;
@@ -765,6 +766,34 @@ class _KatexParser {
     _hasError = true;
     return null;
   }
+
+  /// Remove the given property from the given style map,
+  /// and parse as a literal value of CSS position attribute.
+  ///
+  /// If the property is present but is not a valid literal value of
+  /// position attribute, record an error and return null.
+  ///
+  /// If the property is absent, return null with no error.
+  ///
+  /// If the map is null, treat it as empty.
+  ///
+  /// To produce the map this method expects, see [_parseInlineStyles].
+  KatexSpanPosition? _takeStylePosition(Map<String, css_visitor.Expression>? styles, String property) {
+    final expression = styles?.remove(property);
+    if (expression == null) return null;
+    if (expression case css_visitor.LiteralTerm(:final value)) {
+      if (value case css_visitor.Identifier(:final name)) {
+        if (name == 'relative') {
+          return KatexSpanPosition.relative;
+        }
+      }
+    }
+    assert(debugLog('KaTeX: Unsupported value for CSS property $property,'
+      ' expected a position literal value: ${expression.toDebugString()}'));
+    unsupportedInlineCssProperties.add(property);
+    _hasError = true;
+    return null;
+  }
 }
 
 enum KatexSpanFontWeight {
@@ -782,6 +811,10 @@ enum KatexSpanTextAlign {
   right,
 }
 
+enum KatexSpanPosition {
+  relative,
+}
+
 class KatexSpanColor {
   const KatexSpanColor(this.r, this.g, this.b, this.a);
 
@@ -832,6 +865,7 @@ class KatexSpanStyles {
   final KatexSpanTextAlign? textAlign;
 
   final KatexSpanColor? color;
+  final KatexSpanPosition? position;
 
   const KatexSpanStyles({
     this.heightEm,
@@ -844,6 +878,7 @@ class KatexSpanStyles {
     this.fontStyle,
     this.textAlign,
     this.color,
+    this.position,
   });
 
   @override
@@ -859,6 +894,7 @@ class KatexSpanStyles {
     fontStyle,
     textAlign,
     color,
+    position,
   );
 
   @override
@@ -873,7 +909,8 @@ class KatexSpanStyles {
       other.fontWeight == fontWeight &&
       other.fontStyle == fontStyle &&
       other.textAlign == textAlign &&
-      other.color == color;
+      other.color == color &&
+      other.position == position;
   }
 
   @override
@@ -889,6 +926,7 @@ class KatexSpanStyles {
     if (fontStyle != null) args.add('fontStyle: $fontStyle');
     if (textAlign != null) args.add('textAlign: $textAlign');
     if (color != null) args.add('color: $color');
+    if (position != null) args.add('position: $position');
     return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
   }
 
@@ -904,6 +942,7 @@ class KatexSpanStyles {
     bool fontStyle = true,
     bool textAlign = true,
     bool color = true,
+    bool position = true,
   }) {
     return KatexSpanStyles(
       heightEm: heightEm ? this.heightEm : null,
@@ -916,6 +955,7 @@ class KatexSpanStyles {
       fontStyle: fontStyle ? this.fontStyle : null,
       textAlign: textAlign ? this.textAlign : null,
       color: color ? this.color : null,
+      position: position ? this.position : null,
     );
   }
 }

lib/widgets/katex.dart

@@ -97,10 +97,6 @@ class _KatexSpan extends StatelessWidget {
 
     final styles = node.styles;
 
-    // Currently, we expect `top` to be only present with the
-    // vlist inner row span, and parser handles that explicitly.
-    assert(styles.topEm == null);
-
     final fontFamily = styles.fontFamily;
     final fontSize = switch (styles.fontSizeEm) {
       double fontSizeEm => fontSizeEm * em,
@@ -180,6 +176,23 @@ class _KatexSpan extends StatelessWidget {
       widget = Padding(padding: margin, child: widget);
     }
 
+    switch (styles.position) {
+      case KatexSpanPosition.relative:
+        final offset = switch (styles.topEm) {
+          final topEm? => Offset(0, topEm * em),
+          null => null,
+        };
+
+        if (offset != null) {
+          widget = Transform.translate(
+            offset: offset,
+            child: widget);
+        }
+
+      case null:
+        break;
+    }
+
     return widget;
   }
 }

test/model/katex_test.dart

@@ -643,6 +643,29 @@ class KatexExample extends ContentExample {
           text: '∗'),
       ]),
     ]);
+
+  static final bigOperators = KatexExample.block(
+    r'big operators: \int',
+    // https://chat.zulip.org/#narrow/channel/7-test-here/topic/Rajesh/near/2240766
+    r'\int',
+    '<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><mo>∫</mo></mrow><annotation encoding="application/x-tex">\\int</annotation></semantics></math></span>'
+        '<span class="katex-html" aria-hidden="true">'
+          '<span class="base">'
+            '<span class="strut" style="height:2.2222em;vertical-align:-0.8622em;"></span>'
+            '<span class="mop op-symbol large-op" style="margin-right:0.44445em;position:relative;top:-0.0011em;">∫</span></span></span></span></span></p>', [
+      KatexSpanNode(nodes: [
+        KatexStrutNode(heightEm: 2.2222, verticalAlignEm: -0.8622),
+        KatexSpanNode(
+          styles: KatexSpanStyles(
+            topEm: -0.0011,
+            marginRightEm: 0.44445,
+            fontFamily: 'KaTeX_Size2',
+            position: KatexSpanPosition.relative),
+          text: '∫'),
+      ]),
+    ]);
 }
 
 void main() async {
@@ -663,6 +686,7 @@ void main() async {
   testParseExample(KatexExample.textColor);
   testParseExample(KatexExample.customColorMacro);
   testParseExample(KatexExample.phantom);
+  testParseExample(KatexExample.bigOperators);
 
   group('parseCssHexColor', () {
     const testCases = [