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
@@ -969,6 +982,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) {
@@ -107,6 +109,22 @@ class BlockContentList 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 Paragraph extends StatelessWidget {
   const Paragraph({super.key, required this.node});
 

test/model/content_test.dart

@@ -521,6 +521,17 @@ class ContentExample {
       blockUnimplemented('more text'),
     ]]),
   ]);
+
+  static const thematicBreak =  ContentExample(
+    'parse thematic break (<hr>)',
+    // https://chat.zulip.org/#narrow/stream/7-test-here/near/1774718
+    'a\n---\nb',
+    '<p>a</p>\n<hr>\n<p>b</p>',
+    [
+      ParagraphNode(links: null, nodes: [TextNode('a')]),
+      ThematicBreakNode(),
+      ParagraphNode(links: null, nodes: [TextNode('b')]),
+    ]);
 }
 
 UnimplementedBlockContentNode blockUnimplemented(String html) {
@@ -721,6 +732,8 @@ void main() {
       LineBreakNode(),
     ]);
 
+  testParseExample(ContentExample.thematicBreak);
+
   testParse('parse two plain-text paragraphs',
     // "hello\n\nworld"
     '<p>hello</p>\n<p>world</p>', const [

test/widgets/content_test.dart

@@ -62,6 +62,13 @@ void main() {
     });
   }
 
+  group('ThematicBreak', () {
+    testWidgets('smoke ThematicBreak', (tester) async {
+      await prepareContentBare(tester, ContentExample.thematicBreak.html);
+      tester.widget(find.byType(ThematicBreak));
+    });
+  });
+
   group('Heading', () {
     testWidgets('plain h6', (tester) async {
       await prepareContentBare(tester,