content: Implement h1-h5

Fixes: zulip#192
sirpengi · Jan 29, 2024 · 0ec82ce · 0ec82ce
1 parent 3c91597
commit 0ec82ce
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 13 deletions.
diff --git a/lib/model/content.dart b/lib/model/content.dart
@@ -927,11 +927,10 @@ class _ZulipContentParser {
       case 'h5': headingLevel = HeadingLevel.h5; break;
       case 'h6': headingLevel = HeadingLevel.h6; break;
     }
-    if (headingLevel == HeadingLevel.h6 && classes.isEmpty) {
-      // TODO(#192) handle h1, h2, h3, h4, h5
+    if (headingLevel != null && classes.isEmpty) {
       final parsed = parseBlockInline(element.nodes);
       return HeadingNode(debugHtmlNode: debugHtmlNode,
-        level: headingLevel!,
+        level: headingLevel,
         links: parsed.links,
         nodes: parsed.nodes);
     }

diff --git a/lib/widgets/content.dart b/lib/widgets/content.dart
@@ -136,12 +136,22 @@ class Heading extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // TODO(#192) h1, h2, h3, h4, h5 -- same as h6 except font size
-    assert(node.level == HeadingLevel.h6);
+    // Em-heights taken from zulip:web/styles/rendered_markdown.css .
+    final emHeight = switch(node.level) {
+      HeadingLevel.h1 => 1.4,
+      HeadingLevel.h2 => 1.3,
+      HeadingLevel.h3 => 1.2,
+      HeadingLevel.h4 => 1.1,
+      HeadingLevel.h5 => 1.05,
+      HeadingLevel.h6 => 1.0,
+    };
     return Padding(
       padding: const EdgeInsets.only(top: 15, bottom: 5),
       child: _buildBlockInlineContainer(
-        style: const TextStyle(fontWeight: FontWeight.w600, height: 1.4),
+        style: TextStyle(
+          fontSize: kBaseFontSize * emHeight,
+          fontWeight: FontWeight.w600,
+          height: 1.4),
         node: node));
   }
 }

diff --git a/test/model/content_test.dart b/test/model/content_test.dart
@@ -219,14 +219,14 @@ void main() {
         ParagraphNode(links: null, nodes: [TextNode('text')]),
       ]);
 
-    testParse('h1, h2, h3, h4, h5 unimplemented',
+    testParse('h1, h2, h3, h4, h5',
       // "# one\n## two\n### three\n#### four\n##### five"
-      '<h1>one</h1>\n<h2>two</h2>\n<h3>three</h3>\n<h4>four</h4>\n<h5>five</h5>', [
-        blockUnimplemented('<h1>one</h1>'),
-        blockUnimplemented('<h2>two</h2>'),
-        blockUnimplemented('<h3>three</h3>'),
-        blockUnimplemented('<h4>four</h4>'),
-        blockUnimplemented('<h5>five</h5>'),
+      '<h1>one</h1>\n<h2>two</h2>\n<h3>three</h3>\n<h4>four</h4>\n<h5>five</h5>', const [
+        HeadingNode(level: HeadingLevel.h1, links: null, nodes: [TextNode('one')]),
+        HeadingNode(level: HeadingLevel.h2, links: null, nodes: [TextNode('two')]),
+        HeadingNode(level: HeadingLevel.h3, links: null, nodes: [TextNode('three')]),
+        HeadingNode(level: HeadingLevel.h4, links: null, nodes: [TextNode('four')]),
+        HeadingNode(level: HeadingLevel.h5, links: null, nodes: [TextNode('five')]),
       ]);
   });
 

diff --git a/test/widgets/content_test.dart b/test/widgets/content_test.dart
@@ -24,6 +24,26 @@ import 'page_checks.dart';
 void main() {
   TestZulipBinding.ensureInitialized();
 
+  group('Headings', () {
+    Future<void> prepareContent(WidgetTester tester, String html) async {
+      await tester.pumpWidget(MaterialApp(home: BlockContentList(nodes: parseContent(html).nodes)));
+    }
+
+    testWidgets('plain h6', (tester) async {
+      await prepareContent(tester,
+        // "###### six"
+        '<h6>six</h6>');
+      tester.widget(find.text('six'));
+    });
+
+    testWidgets('smoke test for h1, h2, h3, h4, h5', (tester) async {
+      await prepareContent(tester,
+        // "# one\n## two\n### three\n#### four\n##### five"
+        '<h1>one</h1>\n<h2>two</h2>\n<h3>three</h3>\n<h4>four</h4>\n<h5>five</h5>');
+      check(find.byType(Heading).evaluate()).length.equals(5);
+    });
+  });
+
   group("CodeBlock", () {
     Future<void> prepareContent(WidgetTester tester, String html) async {
       await tester.pumpWidget(MaterialApp(home: BlockContentList(nodes: parseContent(html).nodes)));