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

@@ -47,7 +47,7 @@ class InheritedMessage extends InheritedWidget {
 
   @override
   bool updateShouldNotify(covariant InheritedMessage oldWidget) =>
-    !identical(oldWidget.message, message);
+      !identical(oldWidget.message, message);
 
   static Message of(BuildContext context) {
     final widget = context.dependOnInheritedWidgetOfExactType<InheritedMessage>();
@@ -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,27 @@ class BlockContentList extends StatelessWidget {
   }
 }
 
+/// A Divider matching the style found in:
+/// [web/styles/rendered_markdown.css](https://github.com/zulip/zulip/blob/main/web/styles/rendered_markdown.css)
+class ThematicBreak extends StatelessWidget {
+  const ThematicBreak({
+    super.key,
+    this.thickness = 2,
+    this.color,
+  });
+
+  final double thickness;
+  final Color? color;
+
+  @override
+  Widget build(BuildContext context) {
+    return Divider(
+      color: color ?? const HSLColor.fromAHSL(1, 0, 0, .87).toColor(),
+      thickness: 2,
+    );
+  }
+}
+
 class Paragraph extends StatelessWidget {
   const Paragraph({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) {
@@ -875,6 +893,8 @@ void main() {
       ]]),
     ]);
 
+  testParseExample(ContentExample.thematicBreaks);
+
   test('all content examples are tested', () {
     // Check that every ContentExample defined above has a corresponding
     // actual test case that runs on it.  If you've added a new example