content: Handle 'nulldelimiter' KaTeX CSS

Author: rajveermalviya

lib/model/katex.dart

@@ -146,6 +146,7 @@ class _KatexParser {
     // 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(' '));
+    double? widthEm;
     String? fontFamily;
     double? fontSizeEm;
     KatexSpanFontWeight? fontWeight;
@@ -330,7 +331,11 @@ class _KatexParser {
             _ => throw KatexHtmlParseError(),
           };
 
-        // TODO handle .nulldelimiter and .delimcenter .
+        case 'nulldelimiter':
+          // .nulldelimiter { display: inline-block; width: 0.12em; }
+          widthEm = 0.12;
+
+        // TODO .delimcenter .
 
         case 'op-symbol':
           // .op-symbol { ... }
@@ -361,6 +366,7 @@ class _KatexParser {
       }
     }
     final styles = KatexSpanStyles(
+      widthEm: widthEm,
       fontFamily: fontFamily,
       fontSizeEm: fontSizeEm,
       fontWeight: fontWeight,
@@ -453,6 +459,7 @@ enum KatexSpanTextAlign {
 
 @immutable
 class KatexSpanStyles {
+  final double? widthEm;
   final double? heightEm;
 
   final String? fontFamily;
@@ -462,6 +469,7 @@ class KatexSpanStyles {
   final KatexSpanTextAlign? textAlign;
 
   const KatexSpanStyles({
+    this.widthEm,
     this.heightEm,
     this.fontFamily,
     this.fontSizeEm,
@@ -473,6 +481,7 @@ class KatexSpanStyles {
   @override
   int get hashCode => Object.hash(
     'KatexSpanStyles',
+    widthEm,
     heightEm,
     fontFamily,
     fontSizeEm,
@@ -484,6 +493,7 @@ class KatexSpanStyles {
   @override
   bool operator ==(Object other) {
     return other is KatexSpanStyles &&
+      other.widthEm == widthEm &&
       other.heightEm == heightEm &&
       other.fontFamily == fontFamily &&
       other.fontSizeEm == fontSizeEm &&
@@ -495,6 +505,7 @@ class KatexSpanStyles {
   @override
   String toString() {
     final args = <String>[];
+    if (widthEm != null) args.add('widthEm: $widthEm');
     if (heightEm != null) args.add('heightEm: $heightEm');
     if (fontFamily != null) args.add('fontFamily: $fontFamily');
     if (fontSizeEm != null) args.add('fontSizeEm: $fontSizeEm');
@@ -506,6 +517,7 @@ class KatexSpanStyles {
 
   KatexSpanStyles merge(KatexSpanStyles other) {
     return KatexSpanStyles(
+      widthEm: other.widthEm ?? widthEm,
       heightEm: other.heightEm ?? heightEm,
       fontFamily: other.fontFamily ?? fontFamily,
       fontSizeEm: other.fontSizeEm ?? fontSizeEm,

lib/widgets/content.dart

@@ -940,6 +940,9 @@ class _KatexSpan extends StatelessWidget {
     }
 
     return SizedBox(
+      width: styles.widthEm != null
+        ? styles.widthEm! * em
+        : null,
       height: styles.heightEm != null
         ? styles.heightEm! * em
         : null,

test/model/content_test.dart

@@ -893,6 +893,67 @@ class ContentExample {
         ]),
     ]);
 
+  static const mathBlockKatexNulldelimiter = ContentExample(
+    'math block; KaTeX nulldelimiter',
+    // https://chat.zulip.org/#narrow/channel/7-test-here/topic/Rajesh/near/2205534
+    '```math\n\\left. a \\middle. b \\right.\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><mi>a</mi><mo fence="true" lspace="0.05em" rspace="0.05em">.</mo><mi>b</mi></mrow><annotation encoding="application/x-tex">\\left. a \\middle. b \\right.</annotation></semantics></math></span>'
+      '<span class="katex-html" aria-hidden="true">'
+        '<span class="base">'
+          '<span class="strut" style="height:0.6944em;"></span>'
+            '<span class="minner">'
+              '<span class="mopen nulldelimiter"></span>'
+              '<span class="mord mathnormal">a</span>'
+              '<span class="nulldelimiter"></span>'
+              '<span class="mord mathnormal">b</span>'
+              '<span class="mclose nulldelimiter"></span></span></span></span></span></span></p>',
+    [
+      MathBlockNode(
+        texSource: '\\left. a \\middle. b \\right.',
+        nodes: [
+          KatexSpanNode(
+            styles: KatexSpanStyles(),
+            text: null,
+            nodes: [
+              KatexSpanNode(
+                styles: KatexSpanStyles(heightEm: 0.6944),
+                text: null,
+                nodes: []),
+              KatexSpanNode(
+                styles: KatexSpanStyles(),
+                text: null,
+                nodes: [
+                  KatexSpanNode(
+                    styles: KatexSpanStyles(widthEm: 0.12),
+                    text: null,
+                    nodes: []),
+                  KatexSpanNode(
+                    styles: KatexSpanStyles(
+                      fontFamily: 'KaTeX_Math',
+                      fontStyle: KatexSpanFontStyle.italic),
+                    text: 'a',
+                    nodes: null),
+                  KatexSpanNode(
+                    styles: KatexSpanStyles(widthEm: 0.12),
+                    text: null,
+                    nodes: []),
+                  KatexSpanNode(
+                    styles: KatexSpanStyles(
+                      fontFamily: 'KaTeX_Math',
+                      fontStyle: KatexSpanFontStyle.italic),
+                    text: 'b',
+                    nodes: null),
+                  KatexSpanNode(
+                    styles: KatexSpanStyles(widthEm: 0.12),
+                    text: null,
+                    nodes: []),
+                ]),
+            ]),
+        ]),
+    ]);
+
   static const imageSingle = ContentExample(
     'single image',
     // https://chat.zulip.org/#narrow/stream/7-test-here/topic/Thumbnails/near/1900103
@@ -1967,6 +2028,7 @@ void main() async {
   //       `vertical-align` in inline styles. Currently it fails
   //       because `strut` span has `vertical-align`.
   testParseExample(ContentExample.mathBlockKatexDelimSizing, skip: true);
+  testParseExample(ContentExample.mathBlockKatexNulldelimiter);
 
   testParseExample(ContentExample.imageSingle);
   testParseExample(ContentExample.imageSingleNoDimensions);