content: Add support for search highlighting in code blocks

Fixes: #1695

Author: rajveermalviya

lib/model/code_block.dart

@@ -8,6 +8,11 @@ enum CodeBlockSpanType {
   unknown,
   /// A run of unstyled text in a code block.
   text,
+  /// A code-block span with CSS class `highlight`.
+  ///
+  /// This span is emitted by server for content matching
+  /// used for displaying keyword search highlighting.
+  highlight,
   /// A code-block span with CSS class `hll`.
   ///
   /// Unlike most `CodeBlockSpanToken` values, this does not correspond to
@@ -174,6 +179,7 @@ enum CodeBlockSpanType {
 
 CodeBlockSpanType codeBlockSpanTypeFromClassName(String className) {
   return switch (className) {
+    'highlight' => CodeBlockSpanType.highlight,
     'hll' => CodeBlockSpanType.highlightedLines,
     'w' => CodeBlockSpanType.whitespace,
     'esc' => CodeBlockSpanType.escape,

lib/widgets/code_block.dart

@@ -19,6 +19,10 @@ class CodeBlockTextStyles {
           height: 1.4))
         .merge(weightVariableTextStyle(context)),
 
+      // .highlight { background-color: hsl(51deg 100% 79%); }
+      // See https://github.com/zulip/zulip/blob/f87479703/web/styles/rendered_markdown.css#L1037-L1039
+      highlight: TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 51, 1, 0.79).toColor()),
+
       // .hll { background-color: hsl(60deg 100% 90%); }
       hll: TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 60, 1, 0.90).toColor()),
 
@@ -259,6 +263,10 @@ class CodeBlockTextStyles {
           height: 1.4))
         .merge(weightVariableTextStyle(context)),
 
+      // .highlight { background-color: hsl(51deg 100% 23%); }
+      // See https://github.com/zulip/zulip/blob/f87479703/web/styles/dark_theme.css#L410-L412
+      highlight: TextStyle(backgroundColor: const HSLColor.fromAHSL(1, 51, 1, 0.23).toColor()),
+
       // .hll { background-color: #49483e; }
       hll: const TextStyle(backgroundColor: Color(0xff49483e)),
 
@@ -500,6 +508,7 @@ class CodeBlockTextStyles {
 
   CodeBlockTextStyles._({
     required this.plain,
+    required TextStyle highlight,
     required TextStyle hll,
     required TextStyle c,
     required TextStyle err,
@@ -580,6 +589,7 @@ class CodeBlockTextStyles {
     required TextStyle? vm,
     required TextStyle il,
   }) :
+    _highlight = highlight,
     _hll = hll,
     _c = c,
     _err = err,
@@ -663,6 +673,7 @@ class CodeBlockTextStyles {
   /// The baseline style that the [forSpan] styles get applied on top of.
   final TextStyle plain;
 
+  final TextStyle _highlight;
   final TextStyle _hll;
   final TextStyle _c;
   final TextStyle _err;
@@ -751,6 +762,7 @@ class CodeBlockTextStyles {
   TextStyle? forSpan(CodeBlockSpanType type) {
     return switch (type) {
       CodeBlockSpanType.text => null, // A span with type of text is always unstyled.
+      CodeBlockSpanType.highlight => _highlight,
       CodeBlockSpanType.highlightedLines => _hll,
       CodeBlockSpanType.comment => _c,
       CodeBlockSpanType.error => _err,
@@ -839,6 +851,7 @@ class CodeBlockTextStyles {
 
     return CodeBlockTextStyles._(
       plain: TextStyle.lerp(a.plain, b.plain, t)!,
+      highlight: TextStyle.lerp(a._highlight, b._highlight, t)!,
       hll: TextStyle.lerp(a._hll, b._hll, t)!,
       c: TextStyle.lerp(a._c, b._c, t)!,
       err: TextStyle.lerp(a._err, b._err, t)!,

test/model/content_test.dart

@@ -533,6 +533,49 @@ class ContentExample {
       ParagraphNode(links: null, nodes: [TextNode("some content")]),
     ]);
 
+  static const codeBlockSearchHighlight = ContentExample(
+    'code block, search highlight',
+    '```dart\nclass A {}\n```',
+    '<div class="codehilite" data-code-language="Dart">'
+      '<pre>'
+        '<span></span>'
+        '<code>'
+          '<span class="kd">'
+            '<span class="highlight">class</span></span>'
+          '<span class="w"> </span>'
+          '<span class="nc">A</span>'
+          '<span class="w"> </span>'
+          '<span class="p">{}</span>\n</code></pre></div>', [
+      CodeBlockNode([
+        CodeBlockSpanNode(text: 'class', spanTypes: [CodeBlockSpanType.keywordDeclaration, CodeBlockSpanType.highlight]),
+        CodeBlockSpanNode(text: ' ', spanTypes: [CodeBlockSpanType.whitespace]),
+        CodeBlockSpanNode(text: 'A', spanTypes: [CodeBlockSpanType.nameClass]),
+        CodeBlockSpanNode(text: ' ', spanTypes: [CodeBlockSpanType.whitespace]),
+        CodeBlockSpanNode(text: '{}', spanTypes: [CodeBlockSpanType.punctuation]),
+      ]),
+    ]);
+
+  static const codeBlockSearchHighlightBetweenText = ContentExample(
+    'code block, search highlight between text',
+    '```console\n# postgresql\nThe World\'s Most Advanced Open Source Relational Database\n```',
+    '<div class="codehilite" data-code-language="Bash Session">'
+      '<pre>'
+        '<span></span>'
+        '<code>'
+          '<span class="gp"># </span>postgresql\n'
+          '<span class="go">'
+            'The '
+            '<span class="highlight">World</span>'
+            '\'s Most Advanced Open Source Relational Database</span>\n</code></pre></div>', [
+      CodeBlockNode([
+        CodeBlockSpanNode(text: '# ', spanTypes: [CodeBlockSpanType.genericPrompt]),
+        CodeBlockSpanNode(text: "postgresql\n", spanTypes: [CodeBlockSpanType.text]),
+        CodeBlockSpanNode(text: 'The ', spanTypes: [CodeBlockSpanType.genericOutput]),
+        CodeBlockSpanNode(text: 'World', spanTypes: [CodeBlockSpanType.genericOutput, CodeBlockSpanType.highlight]),
+        CodeBlockSpanNode(text: '\'s Most Advanced Open Source Relational Database', spanTypes: [CodeBlockSpanType.genericOutput]),
+      ]),
+    ]);
+
   static final mathInline = ContentExample.inline(
     'inline math',
     r"$$ \lambda $$",
@@ -2047,6 +2090,8 @@ void main() async {
   testParseExample(ContentExample.codeBlockWithHighlightedLines);
   testParseExample(ContentExample.codeBlockWithUnknownSpanType);
   testParseExample(ContentExample.codeBlockFollowedByMultipleLineBreaks);
+  testParseExample(ContentExample.codeBlockSearchHighlight);
+  testParseExample(ContentExample.codeBlockSearchHighlightBetweenText);
 
   testParseExample(ContentExample.mathBlock);
   testParseExample(ContentExample.mathBlocksMultipleInParagraph);