content: Handle vertical offset spans in KaTeX content

Implement handling most common types of `vlist` spans.

Author: rajveermalviya

lib/model/content.dart

@@ -424,6 +424,37 @@ class KatexStrutNode extends KatexNode {
   }
 }
 
+class KatexVlistNode extends KatexNode {
+  const KatexVlistNode({
+    required this.rows,
+    super.debugHtmlNode,
+  });
+
+  final List<KatexVlistRowNode> rows;
+
+  @override
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return rows.map((row) => row.toDiagnosticsNode()).toList();
+  }
+}
+
+class KatexVlistRowNode extends ContentNode {
+  const KatexVlistRowNode({
+    required this.verticalOffsetEm,
+    required this.node,
+    super.debugHtmlNode,
+  });
+
+  final double verticalOffsetEm;
+  final KatexSpanNode node;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(DoubleProperty('verticalOffsetEm', verticalOffsetEm));
+  }
+}
+
 class MathBlockNode extends MathNode implements BlockContentNode {
   const MathBlockNode({
     super.debugHtmlNode,

lib/model/katex.dart

@@ -156,6 +156,87 @@ class _KatexParser {
       }
     }
 
+    if (element.className.startsWith('vlist')) {
+      if (element case dom.Element(
+        localName: 'span',
+        className: 'vlist-t' || 'vlist-t vlist-t2',
+        nodes: [...],
+      ) && final vlistT) {
+        if (vlistT.attributes.containsKey('style')) throw KatexHtmlParseError();
+
+        final hasTwoVlistR = vlistT.className == 'vlist-t vlist-t2';
+        if (!hasTwoVlistR && vlistT.nodes.length != 1) throw KatexHtmlParseError();
+
+        if (hasTwoVlistR) {
+          if (vlistT.nodes case [
+            _,
+            dom.Element(localName: 'span', className: 'vlist-r', nodes: [
+              dom.Element(localName: 'span', className: 'vlist', nodes: [
+                dom.Element(localName: 'span', className: '', nodes: []),
+              ]),
+            ]),
+          ]) {
+            // Do nothing.
+          } else {
+            throw KatexHtmlParseError();
+          }
+        }
+
+        if (vlistT.nodes.first
+            case dom.Element(localName: 'span', className: 'vlist-r') &&
+                final vlistR) {
+          if (vlistR.attributes.containsKey('style')) throw KatexHtmlParseError();
+
+          if (vlistR.nodes.first
+              case dom.Element(localName: 'span', className: 'vlist') &&
+                  final vlist) {
+            final rows = <KatexVlistRowNode>[];
+
+            for (final innerSpan in vlist.nodes) {
+              if (innerSpan case dom.Element(
+                localName: 'span',
+                className: '',
+                nodes: [
+                  dom.Element(localName: 'span', className: 'pstrut') &&
+                      final pstrutSpan,
+                  ...final otherSpans,
+                ],
+              )) {
+                var styles = _parseSpanInlineStyles(innerSpan)!;
+                final topEm = styles.topEm ?? 0;
+
+                styles = styles.filter(topEm: false);
+
+                final pstrutStyles = _parseSpanInlineStyles(pstrutSpan)!;
+                final pstrutHeight = pstrutStyles.heightEm ?? 0;
+
+                rows.add(KatexVlistRowNode(
+                  verticalOffsetEm: topEm + pstrutHeight,
+                  debugHtmlNode: kDebugMode ? innerSpan : null,
+                  node: KatexSpanNode(
+                    styles: styles,
+                    text: null,
+                    nodes: _parseChildSpans(otherSpans))));
+              } else {
+                throw KatexHtmlParseError();
+              }
+            }
+
+            return KatexVlistNode(
+              rows: rows,
+              debugHtmlNode: kDebugMode ? vlistT : null,
+            );
+          } else {
+            throw KatexHtmlParseError();
+          }
+        } else {
+          throw KatexHtmlParseError();
+        }
+      } else {
+        throw KatexHtmlParseError();
+      }
+    }
+
     final debugHtmlNode = kDebugMode ? element : null;
 
     final inlineStyles = _parseSpanInlineStyles(element);
@@ -173,7 +254,9 @@ class _KatexParser {
     //   https://github.com/KaTeX/KaTeX/blob/2fe1941b/src/styles/katex.scss
     // A copy of class definition (where possible) is accompanied in a comment
     // with each case statement to keep track of updates.
-    final spanClasses = List<String>.unmodifiable(element.className.split(' '));
+    final spanClasses = element.className != ''
+      ? List<String>.unmodifiable(element.className.split(' '))
+      : const <String>[];
     String? fontFamily;
     double? fontSizeEm;
     KatexSpanFontWeight? fontWeight;

lib/widgets/content.dart

@@ -820,7 +820,7 @@ class MathBlock extends StatelessWidget {
     return Center(
       child: SingleChildScrollViewWithScrollbar(
         scrollDirection: Axis.horizontal,
-        child: _Katex(
+        child: Katex(
           textStyle: ContentTheme.of(context).textStylePlainParagraph,
           nodes: nodes)));
   }
@@ -841,8 +841,9 @@ TextStyle mkBaseKatexTextStyle(TextStyle style) {
     fontStyle: FontStyle.normal);
 }
 
-class _Katex extends StatelessWidget {
-  const _Katex({
+class Katex extends StatelessWidget {
+  const Katex({
+    super.key,
     required this.textStyle,
     required this.nodes,
   });
@@ -879,6 +880,7 @@ class _KatexNodeList extends StatelessWidget {
             child: switch (e) {
               KatexSpanNode() => _KatexSpan(e),
               KatexStrutNode() => _KatexStrut(e),
+              KatexVlistNode() => _KatexVlist(e),
             }));
       }))));
   }
@@ -1010,6 +1012,23 @@ class _KatexStrut extends StatelessWidget {
   }
 }
 
+class _KatexVlist extends StatelessWidget {
+  const _KatexVlist(this.node);
+
+  final KatexVlistNode node;
+
+  @override
+  Widget build(BuildContext context) {
+    final em = DefaultTextStyle.of(context).style.fontSize!;
+
+    return Stack(children: List.unmodifiable(node.rows.map((row) {
+      return Transform.translate(
+        offset: Offset(0, row.verticalOffsetEm * em),
+        child: _KatexSpan(row.node));
+    })));
+  }
+}
+
 class WebsitePreview extends StatelessWidget {
   const WebsitePreview({super.key, required this.node});
 
@@ -1328,7 +1347,7 @@ class _InlineContentBuilder {
           : WidgetSpan(
               alignment: PlaceholderAlignment.baseline,
               baseline: TextBaseline.alphabetic,
-              child: _Katex(textStyle: widget.style, nodes: nodes));
+              child: Katex(textStyle: widget.style, nodes: nodes));
 
       case GlobalTimeNode():
         return WidgetSpan(alignment: PlaceholderAlignment.middle,