content: Add start attribute support for ordered list

Fixes: #59

Author: lakshya1goel

lib/model/content.dart

@@ -253,17 +253,14 @@ class HeadingNode extends BlockInlineContainerNode {
 
 enum ListStyle { ordered, unordered }
 
-class ListNode extends BlockContentNode {
-  const ListNode(this.style, this.items, {super.debugHtmlNode});
+sealed class ListNode extends BlockContentNode {
+  const ListNode({required this.items, super.debugHtmlNode});
 
-  final ListStyle style;
   final List<List<BlockContentNode>> items;
 
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);
-    properties.add(FlagProperty('ordered', value: style == ListStyle.ordered,
-      ifTrue: 'ordered', ifFalse: 'unordered'));
   }
 
   @override
@@ -275,6 +272,22 @@ class ListNode extends BlockContentNode {
   }
 }
 
+class OrderedListNode extends ListNode {
+  const OrderedListNode({this.start = 1, required super.items, super.debugHtmlNode});
+
+  final int start;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(IntProperty('start', start));
+  }
+}
+
+class UnorderedListNode extends ListNode {
+  const UnorderedListNode({required super.items, super.debugHtmlNode});
+}
+
 class QuotationNode extends BlockContentNode {
   const QuotationNode(this.nodes, {super.debugHtmlNode});
 
@@ -1081,7 +1094,14 @@ class _ZulipContentParser {
       items.add(parseImplicitParagraphBlockContentList(item.nodes));
     }
 
-    return ListNode(listStyle!, items, debugHtmlNode: debugHtmlNode);
+    if (listStyle == ListStyle.ordered) {
+      final startAttr = element.attributes['start'];
+      final parsedStart = startAttr == null ? null : int.tryParse(startAttr);
+      final start = parsedStart ?? 1;
+      return OrderedListNode(start: start, items: items, debugHtmlNode: debugHtmlNode);
+    } else {
+      return UnorderedListNode(items: items, debugHtmlNode: debugHtmlNode);
+    }
   }
 
   BlockContentNode parseSpoilerNode(dom.Element divElement) {

lib/widgets/content.dart

@@ -482,17 +482,16 @@ class ListNodeWidget extends StatelessWidget {
     final items = List.generate(node.items.length, (index) {
       final item = node.items[index];
       String marker;
-      switch (node.style) {
+      switch (node) {
         // TODO(#161): different unordered marker styles at different levels of nesting
         //   see:
         //     https://html.spec.whatwg.org/multipage/rendering.html#lists
         //     https://www.w3.org/TR/css-counter-styles-3/#simple-symbolic
         // TODO proper alignment of unordered marker; should be "• ", one space,
         //   but that comes out too close to item; not sure what's fixing that
         //   in a browser
-        case ListStyle.unordered: marker = "•   "; break;
-        // TODO(#59) ordered lists starting not at 1
-        case ListStyle.ordered: marker = "${index+1}. "; break;
+        case UnorderedListNode(): marker = "•   "; break;
+        case OrderedListNode(:final start): marker = "${start + index}. "; break;
       }
       return ListItemWidget(marker: marker, nodes: item);
     });

test/model/content_test.dart

@@ -306,8 +306,8 @@ class ContentExample {
         '<p><em>italic</em> <a href="https://zulip.com/">zulip</a></p>\n'
         '</div></div>',
     [SpoilerNode(
-      header: [ListNode(ListStyle.ordered, [
-        [ListNode(ListStyle.unordered, [
+      header: [OrderedListNode(items: [
+        [UnorderedListNode(items: [
           [HeadingNode(level: HeadingLevel.h2, links: null, nodes: [
             TextNode('hello'),
           ])]
@@ -763,7 +763,7 @@ class ContentExample {
         '<div class="message_inline_image">'
           '<a href="https://chat.zulip.org/user_avatars/2/realm/icon.png">'
             '<img src="https://chat.zulip.org/user_avatars/2/realm/icon.png"></a></div></li>\n</ul>', [
-    ListNode(ListStyle.unordered, [[
+    UnorderedListNode(items: [[
       ImageNodeList([
         ImageNode(srcUrl: 'https://chat.zulip.org/user_avatars/2/realm/icon.png',
           thumbnailUrl: null, loading: false,
@@ -785,7 +785,7 @@ class ContentExample {
         '<div class="message_inline_image">'
           '<a href="https://chat.zulip.org/user_avatars/2/realm/icon.png?version=2" title="icon.png">'
             '<img src="https://chat.zulip.org/user_avatars/2/realm/icon.png?version=2"></a></div></li>\n</ul>', [
-    ListNode(ListStyle.unordered, [[
+    UnorderedListNode(items: [[
       ParagraphNode(wasImplicit: true, links: null, nodes: [
         LinkNode(url: 'https://chat.zulip.org/user_avatars/2/realm/icon.png', nodes: [TextNode('icon.png')]),
         TextNode(' '),
@@ -814,7 +814,7 @@ class ContentExample {
           '<a href="https://chat.zulip.org/user_avatars/2/realm/icon.png" title="icon.png">'
             '<img src="https://chat.zulip.org/user_avatars/2/realm/icon.png"></a></div>'
         'more text</li>\n</ul>', [
-    ListNode(ListStyle.unordered, [[
+    UnorderedListNode(items: [[
       const ParagraphNode(wasImplicit: true, links: null, nodes: [
         LinkNode(url: 'https://chat.zulip.org/user_avatars/2/realm/icon.png', nodes: [TextNode('icon.png')]),
         TextNode(' '),
@@ -1382,7 +1382,7 @@ void main() {
     testParse('<ol>',
       // "1. first\n2. then"
       '<ol>\n<li>first</li>\n<li>then</li>\n</ol>', const [
-        ListNode(ListStyle.ordered, [
+        OrderedListNode(items: [
           [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
           [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('then')])],
         ]),
@@ -1391,7 +1391,7 @@ void main() {
     testParse('<ul>',
       // "* something\n* another"
       '<ul>\n<li>something</li>\n<li>another</li>\n</ul>', const [
-        ListNode(ListStyle.unordered, [
+        UnorderedListNode(items: [
           [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('something')])],
           [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('another')])],
         ]),
@@ -1400,7 +1400,7 @@ void main() {
     testParse('implicit paragraph with internal <br>',
       // "* a\n  b"
       '<ul>\n<li>a<br>\n  b</li>\n</ul>', const [
-        ListNode(ListStyle.unordered, [
+        UnorderedListNode(items: [
           [ParagraphNode(wasImplicit: true, links: null, nodes: [
             TextNode('a'),
             LineBreakInlineNode(),
@@ -1412,13 +1412,43 @@ void main() {
     testParse('explicit paragraphs',
       // "* a\n\n  b"
       '<ul>\n<li>\n<p>a</p>\n<p>b</p>\n</li>\n</ul>', const [
-        ListNode(ListStyle.unordered, [
+        UnorderedListNode(items: [
           [
             ParagraphNode(links: null, nodes: [TextNode('a')]),
             ParagraphNode(links: null, nodes: [TextNode('b')]),
           ],
         ]),
       ]);
+
+    testParse('ordered list - large start number (9999)',
+      // "9999. first\n10000. second"
+      '<ol start="9999">\n<li>first</li>\n<li>second</li>\n</ol>', const [
+        OrderedListNode(
+          start: 9999,
+          items: [
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('second')])],
+          ]),
+      ]);
+
+    testParse('ordered list - default start (1)',
+      '<ol>\n<li>first</li>\n<li>second</li>\n</ol>', const [
+        OrderedListNode(
+          items: [
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('second')])],
+          ]),
+      ]);
+
+    testParse('ordered list - custom start (5)',
+      '<ol start="5">\n<li>fifth</li>\n<li>sixth</li>\n</ol>', const [
+        OrderedListNode(
+          start: 5,
+          items: [
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('fifth')])],
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('sixth')])],
+          ]),
+      ]);
   });
 
   testParseExample(ContentExample.spoilerDefaultHeader);
@@ -1451,7 +1481,7 @@ void main() {
     testParse('link in list item',
       // "* [t](/u)"
       '<ul>\n<li><a href="/u">t</a></li>\n</ul>', const [
-        ListNode(ListStyle.unordered, [
+        UnorderedListNode(items: [
           [ParagraphNode(links: null, wasImplicit: true, nodes: [
             LinkNode(url: '/u', nodes: [TextNode('t')]),
           ])],
@@ -1509,10 +1539,10 @@ void main() {
     '<ol>\n<li>\n<blockquote>\n<h6>two</h6>\n<ul>\n<li>three</li>\n'
         '</ul>\n</blockquote>\n<div class="codehilite"><pre><span></span>'
         '<code>four\n</code></pre></div>\n\n</li>\n</ol>', const [
-      ListNode(ListStyle.ordered, [[
+      OrderedListNode(items: [[
         QuotationNode([
           HeadingNode(level: HeadingLevel.h6, links: null, nodes: [TextNode('two')]),
-          ListNode(ListStyle.unordered, [[
+          UnorderedListNode(items: [[
             ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('three')]),
           ]]),
         ]),

test/widgets/content_test.dart

@@ -230,6 +230,17 @@ void main() {
     });
   });
 
+  group('ListNodeWidget', () {
+    testWidgets('ordered list with custom start', (tester) async {
+      await prepareContent(tester, plainContent('<ol start="3">\n<li>third</li>\n<li>fourth</li>\n</ol>'));
+
+      expect(find.text('3. '), findsOneWidget);
+      expect(find.text('4. '), findsOneWidget);
+      expect(find.text('third'), findsOneWidget);
+      expect(find.text('fourth'), findsOneWidget);
+    });
+  });
+
   group('Spoiler', () {
     testContentSmoke(ContentExample.spoilerDefaultHeader);
     testContentSmoke(ContentExample.spoilerPlainCustomHeader);