content: Support nested code block spans

The code block spans with `hll` (and `highlight` used for search
keyword highlighting) classes can be nested inside other types of
code block spans. So add support for parsing those types of spans.

The rendered text style will be result of merging all the
corresponding `TextStyle` using `TextStyle.merge`, preserving the
order of those nested spans.

Author: rajveermalviya

lib/model/content.dart

@@ -324,7 +324,7 @@ class CodeBlockSpanNode extends ContentNode {
     super.debugHtmlNode,
     required this.text,
     required this.spanTypes,
-  }) : assert(spanTypes.length == 1);
+  });
 
   final String text;
   final List<CodeBlockSpanType> spanTypes;
@@ -1228,50 +1228,68 @@ class _ZulipContentParser {
       return UnimplementedBlockContentNode(htmlNode: divElement);
     }
 
-    final spans = <CodeBlockSpanNode>[];
+    // Empirically, when a Pygments node has multiple classes, the first
+    // class names a standard token type and the rest are for non-standard
+    // token types specific to the language.  Zulip web only styles the
+    // standard token classes and ignores the others, so we do the same.
+    // See: https://github.com/zulip/zulip-flutter/issues/933
+    CodeBlockSpanType? parseCodeBlockSpanType(String className) {
+      return className.split(' ')
+      .map(codeBlockSpanTypeFromClassName)
+      .firstWhereOrNull((e) => e != CodeBlockSpanType.unknown);
+    }
+
+    List<CodeBlockSpanNode> spans = [];
+    List<CodeBlockSpanType> spanTypes = [];
+    bool hasFailed = false;
+
     for (int i = 0; i < mainElement.nodes.length; i++) {
       final child = mainElement.nodes[i];
 
-      final CodeBlockSpanNode span;
-      switch (child) {
-        case dom.Text(:var text):
-          if (i == mainElement.nodes.length - 1) {
-            // The HTML tends to have a final newline here.  If included in the
-            // [Text] widget, that would make a trailing blank line.  So cut it out.
-            text = text.replaceFirst(RegExp(r'\n$'), '');
-          }
-          if (text.isEmpty) {
-            continue;
-          }
-          span = CodeBlockSpanNode(text: text, spanTypes: const [CodeBlockSpanType.text]);
-
-        case dom.Element(localName: 'span', :final text, :final className):
-          // Empirically, when a Pygments node has multiple classes, the first
-          // class names a standard token type and the rest are for non-standard
-          // token types specific to the language.  Zulip web only styles the
-          // standard token classes and ignores the others, so we do the same.
-          // See: https://github.com/zulip/zulip-flutter/issues/933
-          final spanType = className.split(' ')
-            .map(codeBlockSpanTypeFromClassName)
-            .firstWhereOrNull((e) => e != CodeBlockSpanType.unknown);
-
-          switch (spanType) {
-            case null:
+      void parseCodeBlockSpan(dom.Node child, bool isLastNode) {
+        switch (child) {
+          case dom.Text(:var text):
+            if (isLastNode) {
+              // The HTML tends to have a final newline here.  If included in the
+              // [Text] widget, that would make a trailing blank line.  So cut it out.
+              text = text.replaceFirst(RegExp(r'\n$'), '');
+            }
+            if (text.isEmpty) {
+              break;
+            }
+            spans.add(CodeBlockSpanNode(
+              text: text,
+              spanTypes: spanTypes.isEmpty
+                ? const [CodeBlockSpanType.text]
+                : List.unmodifiable(spanTypes)));
+
+          case dom.Element(localName: 'span', :final className):
+            final spanType = parseCodeBlockSpanType(className);
+            if (spanType == null) {
               // TODO(#194): Show these as un-syntax-highlighted code, in production.
-              return UnimplementedBlockContentNode(htmlNode: divElement);
-            case CodeBlockSpanType.highlightedLines:
-              // TODO: Implement nesting in CodeBlockSpanNode to support hierarchically
-              //       inherited styles for `span.hll` nodes.
-              return UnimplementedBlockContentNode(htmlNode: divElement);
-            default:
-              span = CodeBlockSpanNode(text: text, spanTypes: [spanType]);
-          }
+              hasFailed = true;
+              return;
+            }
 
-        default:
-          return UnimplementedBlockContentNode(htmlNode: divElement);
+            spanTypes.add(spanType);
+
+            for (int i = 0; i < child.nodes.length; i++) {
+              final grandchild = child.nodes[i];
+              parseCodeBlockSpan(grandchild,
+                isLastNode ? i == child.nodes.length - 1 : false);
+              if (hasFailed) return;
+            }
+
+            assert(spanTypes.removeLast() == spanType);
+
+          default:
+            hasFailed = true;
+            return;
+        }
       }
 
-      spans.add(span);
+      parseCodeBlockSpan(child, i == mainElement.nodes.length - 1);
+      if (hasFailed) return UnimplementedBlockContentNode(htmlNode: divElement);
     }
 
     return CodeBlockNode(spans, debugHtmlNode: debugHtmlNode);

lib/widgets/content.dart

@@ -778,13 +778,23 @@ class CodeBlock extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final styles = ContentTheme.of(context).codeBlockTextStyles;
+    final codeBlockTextStyles = ContentTheme.of(context).codeBlockTextStyles;
     return _CodeBlockContainer(
       borderColor: Colors.transparent,
       child: Text.rich(TextSpan(
-        style: styles.plain,
+        style: codeBlockTextStyles.plain,
         children: node.spans
-          .map((node) => TextSpan(style: styles.forSpan(node.spanTypes.single), text: node.text))
+          .map((node) {
+            TextStyle? style;
+            for (final spanType in node.spanTypes) {
+              final spanStyle = codeBlockTextStyles.forSpan(spanType);
+              if (spanStyle == null) continue;
+              style = style == null
+                ? spanStyle
+                : style.merge(spanStyle);
+            }
+            return TextSpan(style: style, text: node.text);
+          })
           .toList(growable: false))));
   }
 }

test/model/content_test.dart

@@ -382,7 +382,7 @@ class ContentExample {
       QuotationNode([ParagraphNode(links: null, nodes: [TextNode('words')])])
     ]);
 
-  static final codeBlockPlain = ContentExample(
+  static const codeBlockPlain = ContentExample(
     'code block without syntax highlighting',
     "```\nverb\natim\n```",
     expectedText: 'verb\natim',
@@ -394,7 +394,7 @@ class ContentExample {
       ]),
     ]);
 
-  static final codeBlockHighlightedShort = ContentExample(
+  static const codeBlockHighlightedShort = ContentExample(
     'code block with syntax highlighting',
     "```dart\nclass A {}\n```",
     expectedText: 'class A {}',
@@ -415,7 +415,7 @@ class ContentExample {
       ]),
     ]);
 
-  static final codeBlockHighlightedMultiline = ContentExample(
+  static const codeBlockHighlightedMultiline = ContentExample(
     'code block, multiline, with syntax highlighting',
     '```rust\nfn main() {\n    print!("Hello ");\n\n    print!("world!\\n");\n}\n```',
     expectedText: 'fn main() {\n    print!("Hello ");\n\n    print!("world!\\n");\n}',
@@ -466,7 +466,7 @@ class ContentExample {
       ]),
     ]);
 
-  static final codeBlockSpansWithMultipleClasses = ContentExample(
+  static const codeBlockSpansWithMultipleClasses = ContentExample(
     'code block spans with multiple CSS classes',
     '```yaml\n- item\n```',
     expectedText: '- item',
@@ -499,18 +499,22 @@ class ContentExample {
     'code block, with syntax highlighting and highlighted lines',
     '```\n::markdown hl_lines="2 4"\n# he\n## llo\n### world\n```',
     '<div class="codehilite"><pre>'
-        '<span></span><code>::markdown hl_lines=&quot;2 4&quot;\n'
-        '<span class="hll"><span class="gh"># he</span>\n'
-        '</span><span class="gu">## llo</span>\n'
-        '<span class="hll"><span class="gu">### world</span>\n'
-        '</span></code></pre></div>', [
-      // TODO: Fix this, see comment under `CodeBlockSpanType.highlightedLines` case in lib/model/content.dart.
-      blockUnimplemented('<div class="codehilite"><pre>'
-        '<span></span><code>::markdown hl_lines=&quot;2 4&quot;\n'
-        '<span class="hll"><span class="gh"># he</span>\n'
-        '</span><span class="gu">## llo</span>\n'
-        '<span class="hll"><span class="gu">### world</span>\n'
-        '</span></code></pre></div>'),
+        '<span></span>'
+        '<code>'
+          '::markdown hl_lines=&quot;2 4&quot;\n'
+          '<span class="hll">'
+            '<span class="gh"># he</span>\n</span>'
+          '<span class="gu">## llo</span>\n'
+          '<span class="hll">'
+            '<span class="gu">### world</span>\n</span></code></pre></div>', [
+      CodeBlockNode([
+        CodeBlockSpanNode(text: '::markdown hl_lines="2 4"\n', spanTypes: [CodeBlockSpanType.text]),
+        CodeBlockSpanNode(text: '# he', spanTypes: [CodeBlockSpanType.highlightedLines, CodeBlockSpanType.genericHeading]),
+        CodeBlockSpanNode(text: '\n', spanTypes: [CodeBlockSpanType.highlightedLines]),
+        CodeBlockSpanNode(text: '## llo', spanTypes: [CodeBlockSpanType.genericSubheading]),
+        CodeBlockSpanNode(text: '\n', spanTypes: [CodeBlockSpanType.text]),
+        CodeBlockSpanNode(text: '### world', spanTypes: [CodeBlockSpanType.highlightedLines, CodeBlockSpanType.genericSubheading]),
+      ]),
     ]);
 
   static final codeBlockWithUnknownSpanType = ContentExample(
@@ -524,7 +528,7 @@ class ContentExample {
         '\n</code></pre></div>'),
     ]);
 
-  static final codeBlockFollowedByMultipleLineBreaks = ContentExample(
+  static const codeBlockFollowedByMultipleLineBreaks = ContentExample(
     'blank text nodes after code blocks',
     '    code block.\n\nsome content',
     // https://chat.zulip.org/#narrow/stream/7-test-here/near/1774823
@@ -2060,7 +2064,7 @@ void main() async {
     // "1. > ###### two\n   > * three\n\n      four"
     '<ol>\n<li>\n<blockquote>\n<h6>two</h6>\n<ul>\n<li>three</li>\n'
         '</ul>\n</blockquote>\n<div class="codehilite"><pre><span></span>'
-        '<code>four\n</code></pre></div>\n\n</li>\n</ol>', [
+        '<code>four\n</code></pre></div>\n\n</li>\n</ol>', const [
       OrderedListNode(start: 1, [[
         QuotationNode([
           HeadingNode(level: HeadingLevel.h6, links: null, nodes: [TextNode('two')]),