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(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(super.items, {super.debugHtmlNode});
+}
+
+class OrderedListNode extends ListNode {
+  const OrderedListNode(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});
 
@@ -1108,12 +1114,7 @@ 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.localName == 'ol' || element.localName == 'ul');
     assert(element.className.isEmpty);
 
     final debugHtmlNode = kDebugMode ? element : null;
@@ -1126,7 +1127,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(items, start: start, debugHtmlNode: debugHtmlNode);
+    } else {
+      return UnorderedListNode(items, debugHtmlNode: debugHtmlNode);
+    }
   }
 
   BlockContentNode parseSpoilerNode(dom.Element divElement) {

lib/widgets/content.dart

@@ -492,17 +492,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

@@ -269,6 +269,26 @@ class ContentExample {
       url: '/#narrow/channel/378-api-design/topic/notation.20for.20near.20links/near/1972281',
       nodes: [TextNode('#api design > notation for near links @ 💬')]));
 
+  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, [
+        [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('fifth')])],
+        [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('sixth')])],
+      ])],
+  );
+
+  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, [
+        [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('first')])],
+        [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('second')])],
+      ])],
+  );
+
   static const spoilerDefaultHeader = ContentExample(
     'spoiler with default header',
     '```spoiler\nhello world\n```',
@@ -306,13 +326,13 @@ 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, [[
+          UnorderedListNode([
+            [HeadingNode(level: HeadingLevel.h2, links: null, nodes: [
+              TextNode('hello'),
+            ])]
           ])]
         ])],
-      ])],
       content: [ParagraphNode(links: null, nodes: [
         EmphasisNode(nodes: [TextNode('italic')]),
         TextNode(' '),
@@ -836,7 +856,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([[
       ImageNodeList([
         ImageNode(srcUrl: 'https://chat.zulip.org/user_avatars/2/realm/icon.png',
           thumbnailUrl: null, loading: false,
@@ -858,7 +878,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([[
       ParagraphNode(wasImplicit: true, links: null, nodes: [
         LinkNode(url: 'https://chat.zulip.org/user_avatars/2/realm/icon.png', nodes: [TextNode('icon.png')]),
         TextNode(' '),
@@ -887,7 +907,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([[
       const ParagraphNode(wasImplicit: true, links: null, nodes: [
         LinkNode(url: 'https://chat.zulip.org/user_avatars/2/realm/icon.png', nodes: [TextNode('icon.png')]),
         TextNode(' '),
@@ -1559,16 +1579,16 @@ 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, [
+            [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([
           [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('something')])],
           [ParagraphNode(wasImplicit: true, links: null, nodes: [TextNode('another')])],
         ]),
@@ -1577,8 +1597,8 @@ 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, [
-          [ParagraphNode(wasImplicit: true, links: null, nodes: [
+        UnorderedListNode([[
+          ParagraphNode(wasImplicit: true, links: null, nodes: [
             TextNode('a'),
             LineBreakInlineNode(),
             TextNode('\n  b'), // TODO: this renders misaligned
@@ -1589,13 +1609,15 @@ 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([[
             ParagraphNode(links: null, nodes: [TextNode('a')]),
             ParagraphNode(links: null, nodes: [TextNode('b')]),
           ],
         ]),
       ]);
+
+    testParseExample(ContentExample.orderedListCustomStart);
+    testParseExample(ContentExample.orderedListLargeStart);
   });
 
   testParseExample(ContentExample.spoilerDefaultHeader);
@@ -1628,7 +1650,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([
           [ParagraphNode(links: null, wasImplicit: true, nodes: [
             LinkNode(url: '/u', nodes: [TextNode('t')]),
           ])],
@@ -1695,10 +1717,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(start: 1, [[
         QuotationNode([
           HeadingNode(level: HeadingLevel.h6, links: null, nodes: [TextNode('two')]),
-          ListNode(ListStyle.unordered, [[
+          UnorderedListNode([[
             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);