content: Add start attribute support for ordered list

Fixes: #59

Author: lakshya1goel

lib/model/content.dart

@@ -251,21 +251,11 @@ class HeadingNode extends BlockInlineContainerNode {
   }
 }
 
-enum ListStyle { ordered, unordered }
+sealed class ListNode extends BlockContentNode {
+  const ListNode({required this.items, super.debugHtmlNode});
 
-class ListNode extends BlockContentNode {
-  const ListNode(this.style, 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
   List<DiagnosticsNode> debugDescribeChildren() {
     return items
@@ -275,6 +265,22 @@ class ListNode extends BlockContentNode {
   }
 }
 
+class UnorderedListNode extends ListNode {
+  const UnorderedListNode({required super.items, super.debugHtmlNode});
+}
+
+class OrderedListNode extends ListNode {
+  const OrderedListNode({required super.items, required this.start, super.debugHtmlNode});
+
+  final int start;
+
+  @override
+  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
+    super.debugFillProperties(properties);
+    properties.add(IntProperty('start', start));
+  }
+}
+
 class QuotationNode extends BlockContentNode {
   const QuotationNode(this.nodes, {super.debugHtmlNode});
 
@@ -1063,12 +1069,6 @@ class _ZulipContentParser {
   }
 
   BlockContentNode parseListNode(dom.Element element) {
-    ListStyle? listStyle;
-    switch (element.localName) {
-      case 'ol': listStyle = ListStyle.ordered; break;
-      case 'ul': listStyle = ListStyle.unordered; break;
-    }
-    assert(listStyle != null);
     assert(element.className.isEmpty);
 
     final debugHtmlNode = kDebugMode ? element : null;
@@ -1081,7 +1081,15 @@ class _ZulipContentParser {
       items.add(parseImplicitParagraphBlockContentList(item.nodes));
     }
 
-    return ListNode(listStyle!, items, debugHtmlNode: debugHtmlNode);
+    if (element.localName == 'ol') {
+      final startAttr = element.attributes['start'];
+      final start = startAttr == null ? 1
+        : int.tryParse(startAttr, radix: 10);
+      if (start == null) return UnimplementedBlockContentNode(htmlNode: element);
+      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,13 +306,16 @@ 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, [
-          [HeadingNode(level: HeadingLevel.h2, links: null, nodes: [
-            TextNode('hello'),
-          ])]
-        ])],
-      ])],
+      header: [OrderedListNode(
+        start: 1,
+        items: [
+          [UnorderedListNode(items: [
+            [HeadingNode(level: HeadingLevel.h2, links: null, nodes: [
+              TextNode('hello'),
+            ])]
+          ])],
+        ]),
+      ],
       content: [ParagraphNode(links: null, nodes: [
         EmphasisNode(nodes: [TextNode('italic')]),
         TextNode(' '),
@@ -763,7 +766,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 +788,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 +817,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(' '),
@@ -1155,6 +1158,32 @@ class ContentExample {
       ], isHeader: false),
     ]),
   ]);
+
+  static const orderedListLargeStart = ContentExample(
+    'ordered list with large start number',
+    '9999. first\n10000. second',
+    '<ol start="9999">\n<li>first</li>\n<li>second</li>\n</ol>',
+    [OrderedListNode(
+        start: 9999,
+        items: [
+          [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
+          [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('second')])],
+        ])
+    ],
+  );
+
+  static const orderedListCustomStart = ContentExample(
+    'ordered list with custom start',
+    '5. fifth\n6. sixth',
+    '<ol start="5">\n<li>fifth</li>\n<li>sixth</li>\n</ol>',
+    [OrderedListNode(
+        start: 5,
+        items: [
+          [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('fifth')])],
+          [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('sixth')])],
+        ])
+    ],
+  );
 }
 
 UnimplementedBlockContentNode blockUnimplemented(String html) {
@@ -1382,16 +1411,18 @@ void main() {
     testParse('<ol>',
       // "1. first\n2. then"
       '<ol>\n<li>first</li>\n<li>then</li>\n</ol>', const [
-        ListNode(ListStyle.ordered, [
-          [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
-          [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('then')])],
-        ]),
+        OrderedListNode(
+          start: 1,
+          items: [
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
+            [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('then')])],
+          ]),
       ]);
 
     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 +1431,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 +1443,34 @@ 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 - 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 +1503,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 +1561,12 @@ 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(
+        start: 1,
+        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);