content: Handle 'position' & 'top' property in KaTeX span inline style

Allowing support for handling KaTeX HTML for big operators.

Fixes: #1671

Author: rajveermalviya

lib/model/katex.dart

@@ -320,10 +320,6 @@ class _KatexParser {
       // We expect `vertical-align` inline style to be only present on a
       // `strut` span, for which we emit `KatexStrutNode` separately.
       if (inlineStyles.verticalAlignEm != null) throw _KatexHtmlParseError();
-
-      // Currently, we expect `top` to only be inside a vlist, and
-      // we handle that case separately above.
-      if (inlineStyles.topEm != null) throw _KatexHtmlParseError();
     }
 
     // Aggregate the CSS styles that apply, in the same order as the CSS
@@ -586,10 +582,21 @@ class _KatexParser {
     }
     if (text == null && spans == null) throw _KatexHtmlParseError();
 
+    final mergedStyles = inlineStyles != null
+      ? styles.merge(inlineStyles)
+      : styles;
+
+    // We expect `top` style to be only present if `position: relative`
+    // is also present. As both are non-inherited CSS attributes and
+    // should only ever be present together.
+    // TODO account for other sides (left, right, bottom).
+    if (mergedStyles.topEm != null
+      && mergedStyles.position != KatexSpanPosition.relative) {
+      throw _KatexHtmlParseError();
+    }
+
     return KatexSpanNode(
-      styles: inlineStyles != null
-        ? styles.merge(inlineStyles)
-        : styles,
+      styles: mergedStyles,
       text: text,
       nodes: spans,
       debugHtmlNode: debugHtmlNode);
@@ -607,6 +614,7 @@ class _KatexParser {
         double? topEm;
         double? marginRightEm;
         double? marginLeftEm;
+        KatexSpanPosition? position;
 
         for (final declaration in rule.declarationGroup.declarations) {
           if (declaration case css_visitor.Declaration(
@@ -640,6 +648,13 @@ class _KatexParser {
                   if (marginLeftEm < 0) throw _KatexHtmlParseError();
                   continue;
                 }
+
+              case 'position':
+                position = switch (_getLiteral(expression)) {
+                  'relative' => KatexSpanPosition.relative,
+                  _ => null,
+                };
+                if (position != null) continue;
             }
 
             // TODO handle more CSS properties
@@ -658,6 +673,7 @@ class _KatexParser {
           verticalAlignEm: verticalAlignEm,
           marginRightEm: marginRightEm,
           marginLeftEm: marginLeftEm,
+          position: position,
         );
       } else {
         throw _KatexHtmlParseError();
@@ -674,6 +690,17 @@ class _KatexParser {
     }
     return null;
   }
+
+  /// Returns the CSS literal string value if the given [expression] is
+  /// actually a literal expression, else returns null.
+  String? _getLiteral(css_visitor.Expression expression) {
+    if (expression case css_visitor.LiteralTerm(:final value)) {
+      if (value case css_visitor.Identifier(:final name)) {
+        return name;
+      }
+    }
+    return null;
+  }
 }
 
 enum KatexSpanFontWeight {
@@ -691,6 +718,10 @@ enum KatexSpanTextAlign {
   right,
 }
 
+enum KatexSpanPosition {
+  relative,
+}
+
 @immutable
 class KatexSpanStyles {
   final double? heightEm;
@@ -707,6 +738,8 @@ class KatexSpanStyles {
   final KatexSpanFontStyle? fontStyle;
   final KatexSpanTextAlign? textAlign;
 
+  final KatexSpanPosition? position;
+
   const KatexSpanStyles({
     this.heightEm,
     this.verticalAlignEm,
@@ -718,6 +751,7 @@ class KatexSpanStyles {
     this.fontWeight,
     this.fontStyle,
     this.textAlign,
+    this.position,
   });
 
   @override
@@ -733,6 +767,7 @@ class KatexSpanStyles {
     fontWeight,
     fontStyle,
     textAlign,
+    position,
   );
 
   @override
@@ -747,7 +782,8 @@ class KatexSpanStyles {
       other.fontSizeEm == fontSizeEm &&
       other.fontWeight == fontWeight &&
       other.fontStyle == fontStyle &&
-      other.textAlign == textAlign;
+      other.textAlign == textAlign &&
+      other.position == position;
   }
 
   @override
@@ -763,6 +799,7 @@ class KatexSpanStyles {
     if (fontWeight != null) args.add('fontWeight: $fontWeight');
     if (fontStyle != null) args.add('fontStyle: $fontStyle');
     if (textAlign != null) args.add('textAlign: $textAlign');
+    if (position != null) args.add('position: $position');
     return '${objectRuntimeType(this, 'KatexSpanStyles')}(${args.join(', ')})';
   }
 
@@ -785,6 +822,7 @@ class KatexSpanStyles {
       fontStyle: other.fontStyle ?? fontStyle,
       fontWeight: other.fontWeight ?? fontWeight,
       textAlign: other.textAlign ?? textAlign,
+      position: other.position ?? position,
     );
   }
 
@@ -799,6 +837,7 @@ class KatexSpanStyles {
     bool fontWeight = true,
     bool fontStyle = true,
     bool textAlign = true,
+    bool position = true,
   }) {
     return KatexSpanStyles(
       heightEm: heightEm ? this.heightEm : null,
@@ -811,6 +850,7 @@ class KatexSpanStyles {
       fontWeight: fontWeight ? this.fontWeight : null,
       fontStyle: fontStyle ? this.fontStyle : null,
       textAlign: textAlign ? this.textAlign : null,
+      position: position ? this.position : null,
     );
   }
 }

lib/widgets/content.dart

@@ -925,10 +925,6 @@ class _KatexSpan extends StatelessWidget {
     // So, this should always be null for non `strut` spans.
     assert(styles.verticalAlignEm == null);
 
-    // 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,
@@ -1001,6 +997,13 @@ class _KatexSpan extends StatelessWidget {
       widget = Padding(padding: margin, child: widget);
     }
 
+    if (styles.topEm != null) {
+      assert(styles.position == KatexSpanPosition.relative);
+      widget = Transform.translate(
+        offset: Offset(0, styles.topEm! * em),
+        child: widget);
+    }
+
     return widget;
   }
 }

test/model/content_test.dart

@@ -1165,6 +1165,30 @@ class ContentExample {
       ]),
     ]);
 
+  static const mathBlockKatexBigOperators = ContentExample(
+    'math block katex big operators',
+    // https://chat.zulip.org/#narrow/channel/7-test-here/topic/Rajesh/near/2203220
+    '```math\n\\bigsqcup\n```',
+    '<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">\\bigsqcup</annotation></semantics></math></span>'
+      '<span class="katex-html" aria-hidden="true">'
+        '<span class="base">'
+          '<span class="strut" style="height:1.6em;vertical-align:-0.55em;"></span>'
+          '<span class="mop op-symbol large-op" style="position:relative;top:0em;">⨆</span></span></span></span></span></p>', [
+      MathBlockNode(texSource: '\\bigsqcup', nodes: [
+        KatexSpanNode(styles: KatexSpanStyles(), text: null, nodes: [
+          KatexStrutNode(heightEm: 1.6, verticalAlignEm: -0.55),
+          KatexSpanNode(
+            styles: KatexSpanStyles(
+              topEm: 0.0,
+              fontFamily: 'KaTeX_Size2',
+              position: KatexSpanPosition.relative),
+            text: '⨆', nodes: null),
+        ]),
+      ]),
+    ]);
+
   static const imageSingle = ContentExample(
     'single image',
     // https://chat.zulip.org/#narrow/stream/7-test-here/topic/Thumbnails/near/1900103
@@ -2259,6 +2283,7 @@ void main() async {
   testParseExample(ContentExample.mathBlockKatexSubscript);
   testParseExample(ContentExample.mathBlockKatexSubSuperScript);
   testParseExample(ContentExample.mathBlockKatexRaisebox);
+  testParseExample(ContentExample.mathBlockKatexBigOperators);
 
   testParseExample(ContentExample.imageSingle);
   testParseExample(ContentExample.imageSingleNoDimensions);