content: Handle multiple class names in code block nodes

Fixes: #933

Author: rajveermalviya

lib/model/content.dart

@@ -1023,17 +1023,28 @@ class _ZulipContentParser {
           span = CodeBlockSpanNode(text: text, type: CodeBlockSpanType.text);
 
         case dom.Element(localName: 'span', :final text, :final className):
-          final CodeBlockSpanType type = codeBlockSpanTypeFromClassName(className);
-          switch (type) {
-            case CodeBlockSpanType.unknown:
+          // The general form for Pygments nodes with multiple classes observed
+          // are, that the first class is the standard token class and trailing
+          // tokens are non-standard tokens. Zulip web client only styles the
+          // standard tokens classes. Same is done here, only standard token
+          // class names are emitted.
+          // See: https://github.com/zulip/zulip-flutter/issues/933
+          final spanType =
+            className
+              .split(' ')
+              .map(codeBlockSpanTypeFromClassName)
+              .firstWhereOrNull((e) => e != CodeBlockSpanType.unknown);
+
+          switch (spanType) {
+            case 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, type: type);
+              span = CodeBlockSpanNode(text: text, type: spanType);
           }
 
         default:

test/model/content_test.dart

@@ -395,6 +395,23 @@ class ContentExample {
       ParagraphNode(links: null, nodes: [TextNode("some content")]),
     ]);
 
+  static const codeBlockNodesWithMultipleClasses = ContentExample(
+    'code block nodes with multiple class names',
+    '```yaml\n- item\n```',
+    expectedText: '- item',
+    // https://chat.zulip.org/#narrow/channel/7-test-here/topic/Greg/near/1949014
+    '<div class="codehilite" data-code-language="YAML">'
+      '<pre><span></span><code><span class="p p-Indicator">-</span>'
+      '<span class="w"> </span>'
+      '<span class="l l-Scalar l-Scalar-Plain">item</span>\n'
+      '</code></pre></div>', [
+      CodeBlockNode([
+        CodeBlockSpanNode(text: "-", type: CodeBlockSpanType.punctuation),
+        CodeBlockSpanNode(text: " ", type: CodeBlockSpanType.whitespace),
+        CodeBlockSpanNode(text: "item", type: CodeBlockSpanType.literal)
+      ]),
+    ]);
+
   static final mathInline = ContentExample.inline(
     'inline math',
     r"$$ \lambda $$",
@@ -1164,6 +1181,7 @@ void main() {
   testParseExample(ContentExample.codeBlockWithHighlightedLines);
   testParseExample(ContentExample.codeBlockWithUnknownSpanType);
   testParseExample(ContentExample.codeBlockFollowedByMultipleLineBreaks);
+  testParseExample(ContentExample.codeBlockNodesWithMultipleClasses);
 
   testParseExample(ContentExample.mathBlock);
   testParseExample(ContentExample.mathBlockInQuote);

test/widgets/content_test.dart

@@ -480,6 +480,7 @@ void main() {
     testContentSmoke(ContentExample.codeBlockPlain);
     testContentSmoke(ContentExample.codeBlockHighlightedShort);
     testContentSmoke(ContentExample.codeBlockHighlightedMultiline);
+    testContentSmoke(ContentExample.codeBlockNodesWithMultipleClasses);
 
     testFontWeight('syntax highlighting: non-bold span',
       expectedWght: 400,