content: Handle <hr> horizontal lines

Fixes: zulip#353

Author: Khader-1

lib/model/content.dart

@@ -178,6 +178,19 @@ class LineBreakNode extends BlockContentNode {
   int get hashCode => 'LineBreakNode'.hashCode;
 }
 
+/// A `hr` element
+class ThematicBreakNode extends BlockContentNode {
+  const ThematicBreakNode({super.debugHtmlNode});
+
+  @override
+  bool operator ==(Object other) {
+    return other is ThematicBreakNode;
+  }
+
+  @override
+  int get hashCode => 'ThematicBreakNode'.hashCode;
+}
+
 /// A `p` element, or a place where the DOM tree logically wanted one.
 ///
 /// We synthesize these in the absence of an actual `p` element in cases where
@@ -962,6 +975,10 @@ class _ZulipContentParser {
       return LineBreakNode(debugHtmlNode: debugHtmlNode);
     }
 
+    if (localName == 'hr' && className.isEmpty) {
+      return ThematicBreakNode(debugHtmlNode: debugHtmlNode);
+    }
+
     if (localName == 'p' && className.isEmpty) {
       // Oddly, the way a math block gets encoded in Zulip HTML is inside a <p>.
       if (element.nodes case [dom.Element(localName: 'span') && var child, ...]) {

lib/widgets/content.dart

@@ -74,6 +74,8 @@ class BlockContentList extends StatelessWidget {
           // This goes in a Column.  So to get the effect of a newline,
           // just use an empty Text.
           return const Text('');
+        } else if (node is ThematicBreakNode) {
+          return const ThematicBreak();
         } else if (node is ParagraphNode) {
           return Paragraph(node: node);
         } else if (node is HeadingNode) {
@@ -167,6 +169,22 @@ class Heading extends StatelessWidget {
   }
 }
 
+class ThematicBreak extends StatelessWidget {
+  const ThematicBreak({super.key});
+
+  static const htmlHeight = 2.0;
+  static const htmlMarginY = 20.0;
+
+  @override
+  Widget build(BuildContext context) {
+    return Divider(
+      color: const HSLColor.fromAHSL(1, 0, 0, .87).toColor(),
+      thickness: htmlHeight,
+      height: 2 * htmlMarginY + htmlHeight,
+    );
+  }
+}
+
 class Quotation extends StatelessWidget {
   const Quotation({super.key, required this.node});
 

test/model/content_test.dart

@@ -521,6 +521,24 @@ class ContentExample {
       blockUnimplemented('more text'),
     ]]),
   ]);
+
+  static const thematicBreaks =  ContentExample(
+    'parse thematic break (<hr>) in block context',
+    '---'
+    '---'
+    'a'
+    '---'
+    'b'
+    '---',
+    '<hr><hr><p>a</p><hr><p>b</p><hr>',
+    [
+      ThematicBreakNode(),
+      ThematicBreakNode(),
+      ParagraphNode(links: null, nodes: [TextNode('a')]),
+      ThematicBreakNode(),
+      ParagraphNode(links: null, nodes: [TextNode('b')]),
+      ThematicBreakNode(),
+    ]);
 }
 
 UnimplementedBlockContentNode blockUnimplemented(String html) {
@@ -713,6 +731,8 @@ void main() {
       LineBreakNode(),
     ]);
 
+  testParseExample(ContentExample.thematicBreaks);
+
   testParse('parse two plain-text paragraphs',
     // "hello\n\nworld"
     '<p>hello</p>\n<p>world</p>', const [

test/widgets/content_test.dart

@@ -95,6 +95,15 @@ void main() {
     });
   });
 
+  group('ThematicBreak', () {
+    testWidgets('smoke ThematicBreak', (tester) async {
+      await prepareContentBare(tester,
+        // "---"
+        '<hr>');
+      tester.widget(find.byType(ThematicBreak));
+    });
+  });
+
   group('Spoiler', () {
     testContentSmoke(ContentExample.spoilerDefaultHeader);
     testContentSmoke(ContentExample.spoilerPlainCustomHeader);