content: Handle vertical offset spans in KaTeX content

Implement handling most common types of `vlist` spans.

Author: rajveermalviya

lib/model/content.dart

@@ -429,6 +429,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

@@ -209,6 +209,89 @@ class _KatexParser {
         debugHtmlNode: debugHtmlNode);
     }
 
+    if (element.className == 'vlist-t'
+        || element.className == 'vlist-t vlist-t2') {
+      final vlistT = element;
+      if (vlistT.nodes.isEmpty) throw _KatexHtmlParseError();
+      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);
+              if (styles == null) throw _KatexHtmlParseError();
+              if (styles.verticalAlignEm != null) throw _KatexHtmlParseError();
+              final topEm = styles.topEm ?? 0;
+
+              styles = styles.filter(topEm: false);
+
+              final pstrutStyles = _parseSpanInlineStyles(pstrutSpan);
+              if (pstrutStyles == null) throw _KatexHtmlParseError();
+              if (pstrutStyles.filter(heightEm: false)
+                  != const KatexSpanStyles()) {
+                throw _KatexHtmlParseError();
+              }
+              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();
+      }
+    }
+
     final inlineStyles = _parseSpanInlineStyles(element);
     if (inlineStyles != null) {
       // We expect `vertical-align` inline style to be only present on a
@@ -224,7 +307,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

@@ -893,6 +893,7 @@ class _KatexNodeList extends StatelessWidget {
             child: switch (e) {
               KatexSpanNode() => _KatexSpan(e),
               KatexStrutNode() => _KatexStrut(e),
+              KatexVlistNode() => _KatexVlist(e),
             }));
       }))));
   }
@@ -1025,6 +1026,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});