content: Add KaTeX spans parser, widgets for initial rendering; w/o styles

With this, if the new experimental flag is enabled, the result will be
really basic rendering of each text character in KaTeX spans.

Author: rajveermalviya

lib/model/content.dart

@@ -5,7 +5,9 @@ import 'package:html/parser.dart';
 
 import '../api/model/model.dart';
 import '../api/model/submessage.dart';
+import '../log.dart';
 import 'code_block.dart';
+import 'katex.dart';
 
 /// A node in a parse tree for Zulip message-style content.
 ///
@@ -341,22 +343,52 @@ class CodeBlockSpanNode extends ContentNode {
 }
 
 class MathBlockNode extends BlockContentNode {
-  const MathBlockNode({super.debugHtmlNode, required this.texSource});
+  const MathBlockNode({
+    super.debugHtmlNode,
+    required this.texSource,
+    required this.nodes,
+  });
 
   final String texSource;
+  final List<KatexNode>? nodes;
 
   @override
-  bool operator ==(Object other) {
-    return other is MathBlockNode && other.texSource == texSource;
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(StringProperty('texSource', texSource));
   }
 
   @override
-  int get hashCode => Object.hash('MathBlockNode', texSource);
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return nodes?.map((node) => node.toDiagnosticsNode()).toList() ?? const [];
+  }
+}
+
+class KatexNode extends ContentNode {
+  const KatexNode({
+    required this.text,
+    required this.nodes,
+    super.debugHtmlNode,
+  }) : assert((text != null) ^ (nodes != null));
+
+  /// The text or a single character this KaTeX span contains, generally
+  /// observed to be the leaf node in the KaTeX HTML tree.
+  /// It will be null if this span has child nodes.
+  final String? text;
+
+  /// The child nodes of this span in the KaTeX HTML tree.
+  /// It will be null if this span is a text node.
+  final List<KatexNode>? nodes;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(StringProperty('texSource', texSource));
+    properties.add(StringProperty('text', text));
+  }
+
+  @override
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return nodes?.map((node) => node.toDiagnosticsNode()).toList() ?? const [];
   }
 }
 
@@ -822,23 +854,25 @@ class ImageEmojiNode extends EmojiNode {
 }
 
 class MathInlineNode extends InlineContentNode {
-  const MathInlineNode({super.debugHtmlNode, required this.texSource});
+  const MathInlineNode({
+    super.debugHtmlNode,
+    required this.texSource,
+    required this.nodes,
+  });
 
   final String texSource;
-
-  @override
-  bool operator ==(Object other) {
-    return other is MathInlineNode && other.texSource == texSource;
-  }
-
-  @override
-  int get hashCode => Object.hash('MathInlineNode', texSource);
+  final List<KatexNode>? nodes;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
     properties.add(StringProperty('texSource', texSource));
   }
+
+  @override
+  List<DiagnosticsNode> debugDescribeChildren() {
+    return nodes?.map((node) => node.toDiagnosticsNode()).toList() ?? const [];
+  }
 }
 
 class GlobalTimeNode extends InlineContentNode {
@@ -864,7 +898,10 @@ class GlobalTimeNode extends InlineContentNode {
 
 ////////////////////////////////////////////////////////////////
 
-String? _parseMath(dom.Element element, {required bool block}) {
+({List<KatexNode>? spans, String texSource})? _parseMath(
+  dom.Element element, {
+  required bool block,
+}) {
   final dom.Element katexElement;
   if (!block) {
     assert(element.localName == 'span' && element.className == 'katex');
@@ -882,16 +919,15 @@ String? _parseMath(dom.Element element, {required bool block}) {
     }
   }
 
-  // Expect two children span.katex-mathml, span.katex-html .
-  // For now we only care about the .katex-mathml .
   if (katexElement.nodes case [
     dom.Element(localName: 'span', className: 'katex-mathml', nodes: [
       dom.Element(
         localName: 'math',
         namespaceUri: 'http://www.w3.org/1998/Math/MathML')
           && final mathElement,
     ]),
-    ...
+    dom.Element(localName: 'span', className: 'katex-html', nodes: [...])
+      && final katexHtmlElement,
   ]) {
     if (mathElement.attributes['display'] != (block ? 'block' : null)) {
       return null;
@@ -911,7 +947,15 @@ String? _parseMath(dom.Element element, {required bool block}) {
     } else {
       return null;
     }
-    return texSource;
+
+    List<KatexNode>? spans;
+    try {
+      spans = KatexParser().parseKatexHTML(katexHtmlElement);
+    } on KatexHtmlParseError catch (e, st) {
+      assert(debugLog('$e\n$st'));
+    }
+
+    return (spans: spans, texSource: texSource);
   } else {
     return null;
   }
@@ -927,9 +971,12 @@ String? _parseMath(dom.Element element, {required bool block}) {
 class _ZulipInlineContentParser {
   InlineContentNode? parseInlineMath(dom.Element element) {
     final debugHtmlNode = kDebugMode ? element : null;
-    final texSource = _parseMath(element, block: false);
-    if (texSource == null) return null;
-    return MathInlineNode(texSource: texSource, debugHtmlNode: debugHtmlNode);
+    final parsed = _parseMath(element, block: false);
+    if (parsed == null) return null;
+    return MathInlineNode(
+      texSource: parsed.texSource,
+      nodes: parsed.spans,
+      debugHtmlNode: debugHtmlNode);
   }
 
   UserMentionNode? parseUserMention(dom.Element element) {
@@ -1631,10 +1678,11 @@ class _ZulipContentParser {
     })());
 
     final firstChild = nodes.first as dom.Element;
-    final texSource = _parseMath(firstChild, block: true);
-    if (texSource != null) {
+    final parsed = _parseMath(firstChild, block: true);
+    if (parsed != null) {
       result.add(MathBlockNode(
-        texSource: texSource,
+        texSource: parsed.texSource,
+        nodes: parsed.spans,
         debugHtmlNode: kDebugMode ? firstChild : null));
     } else {
       result.add(UnimplementedBlockContentNode(htmlNode: firstChild));
@@ -1666,10 +1714,11 @@ class _ZulipContentParser {
       if (child case dom.Text(text: '\n\n')) continue;
 
       if (child case dom.Element(localName: 'span', className: 'katex-display')) {
-        final texSource = _parseMath(child, block: true);
-        if (texSource != null) {
+        final parsed = _parseMath(child, block: true);
+        if (parsed != null) {
           result.add(MathBlockNode(
-            texSource: texSource,
+            texSource: parsed.texSource,
+            nodes: parsed.spans,
             debugHtmlNode: debugHtmlNode));
           continue;
         }

lib/model/katex.dart

@@ -0,0 +1,49 @@
+import 'package:html/dom.dart' as dom;
+
+import 'content.dart';
+
+class KatexParser {
+  List<KatexNode> parseKatexHTML(dom.Element element) {
+    assert(element.localName == 'span');
+    assert(element.className == 'katex-html');
+    return _parseChildSpans(element);
+  }
+
+  List<KatexNode> _parseChildSpans(dom.Element element) {
+    return List.unmodifiable(element.nodes.map((node) {
+      if (node case dom.Element(localName: 'span')) {
+        return _parseSpan(node);
+      } else {
+        throw KatexHtmlParseError();
+      }
+    }));
+  }
+
+  KatexNode _parseSpan(dom.Element element) {
+    String? text;
+    List<KatexNode>? spans;
+    if (element.nodes case [dom.Text(data: final data)]) {
+      text = data;
+    } else {
+      spans = _parseChildSpans(element);
+    }
+    if (text == null && spans == null) throw KatexHtmlParseError();
+
+    return KatexNode(
+      text: text,
+      nodes: spans);
+  }
+}
+
+class KatexHtmlParseError extends Error {
+  final String? message;
+  KatexHtmlParseError([this.message]);
+
+  @override
+  String toString() {
+    if (message != null) {
+      return 'Katex HTML parse error: $message';
+    }
+    return 'Katex HTML parse error';
+  }
+}

lib/model/settings.dart

@@ -110,6 +110,9 @@ enum BoolGlobalSetting {
   /// (Having one stable value in this enum is also handy for tests.)
   placeholderIgnore(GlobalSettingType.placeholder, false),
 
+  /// An experimental flag to toggle rendering KaTeX content in messages.
+  renderKatex(GlobalSettingType.experimentalFeatureFlag, false),
+
   // Former settings which might exist in the database,
   // whose names should therefore not be reused:
   // (this list is empty so far)

lib/widgets/content.dart

@@ -13,6 +13,7 @@ import '../generated/l10n/zulip_localizations.dart';
 import '../model/avatar_url.dart';
 import '../model/content.dart';
 import '../model/internal_link.dart';
+import '../model/settings.dart';
 import 'actions.dart';
 import 'code_block.dart';
 import 'dialog.dart';
@@ -804,11 +805,80 @@ class MathBlock extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final contentTheme = ContentTheme.of(context);
-    return _CodeBlockContainer(
-      borderColor: contentTheme.colorMathBlockBorder,
-      child: Text.rich(TextSpan(
-        style: contentTheme.codeBlockTextStyles.plain,
-        children: [TextSpan(text: node.texSource)])));
+    final globalSettings = GlobalStoreWidget.settingsOf(context);
+    final renderKatex = globalSettings.getBool(BoolGlobalSetting.renderKatex);
+
+    final nodes = node.nodes;
+    if (!renderKatex || nodes == null) {
+      return _CodeBlockContainer(
+        borderColor: contentTheme.colorMathBlockBorder,
+        child: Text.rich(TextSpan(
+          style: contentTheme.codeBlockTextStyles.plain,
+          children: [TextSpan(text: node.texSource)])));
+    }
+
+    return _Katex(inline: false, nodes: nodes);
+  }
+}
+
+class _Katex extends StatelessWidget {
+  const _Katex({
+    required this.inline,
+    required this.nodes,
+  });
+
+  final bool inline;
+  final List<KatexNode> nodes;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget widget = RichText(
+      text: TextSpan(
+        children: List.unmodifiable(nodes.map((e) {
+          return WidgetSpan(
+            alignment: PlaceholderAlignment.baseline,
+            baseline: TextBaseline.alphabetic,
+            child: _KatexSpan(e));
+        }))));
+
+    if (!inline) {
+      widget = Center(
+        child: SingleChildScrollViewWithScrollbar(
+          scrollDirection: Axis.horizontal,
+          child: widget));
+    }
+
+    return Directionality(
+      textDirection: TextDirection.ltr,
+      child: DefaultTextStyle(
+        style: TextStyle(
+          fontSize: kBaseFontSize * 1.21,
+          fontFamily: 'KaTeX_Main',
+          height: 1.2),
+        child: widget));
+  }
+}
+
+class _KatexSpan extends StatelessWidget {
+  const _KatexSpan(this.span);
+
+  final KatexNode span;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget widget = const SizedBox.shrink();
+    if (span.text != null) widget = Text(span.text!);
+    if (span.nodes != null && span.nodes!.isNotEmpty) {
+      widget = RichText(
+        text: TextSpan(
+          children: List.unmodifiable(span.nodes!.map((e) {
+            return WidgetSpan(
+              alignment: PlaceholderAlignment.baseline,
+              baseline: TextBaseline.alphabetic,
+              child: _KatexSpan(e));
+          }))));
+    }
+    return widget;
   }
 }
 
@@ -1120,11 +1190,20 @@ class _InlineContentBuilder {
           child: MessageImageEmoji(node: node));
 
       case MathInlineNode():
-        return TextSpan(
-          style: widget.style
-            .merge(ContentTheme.of(_context!).textStyleInlineMath)
-            .apply(fontSizeFactor: kInlineCodeFontSizeFactor),
-          children: [TextSpan(text: node.texSource)]);
+        final globalSettings = GlobalStoreWidget.settingsOf(_context!);
+        final nodes = node.nodes;
+        final renderKatex =
+          globalSettings.getBool(BoolGlobalSetting.renderKatex);
+        return !renderKatex || nodes == null
+          ? TextSpan(
+              style: widget.style
+                .merge(ContentTheme.of(_context!).textStyleInlineMath)
+                .apply(fontSizeFactor: kInlineCodeFontSizeFactor),
+              children: [TextSpan(text: node.texSource)])
+          : WidgetSpan(
+              alignment: PlaceholderAlignment.baseline,
+              baseline: TextBaseline.alphabetic,
+              child: _Katex(inline: true, nodes: nodes));
 
       case GlobalTimeNode():
         return WidgetSpan(alignment: PlaceholderAlignment.middle,