Skip to content

Commit

Permalink
content: Add start attribute support for ordered list
Browse files Browse the repository at this point in the history 
Fixes: #59
  • Loading branch information
@lakshya1goel
lakshya1goel committed Feb 5, 2025
1 parent 9517336 commit 6dfb1da
Show file tree
Hide file tree
Showing 4 changed files with 90 additions and 19 deletions.
36 changes: 32 additions & 4 deletions lib/model/content.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -253,11 +253,11 @@ class HeadingNode extends BlockInlineContainerNode {

enum ListStyle { ordered, unordered }

class ListNode extends BlockContentNode {
const ListNode(this.style, this.items, {super.debugHtmlNode});
abstract class ListNode extends BlockContentNode {
const ListNode({required this.items, super.debugHtmlNode});

final ListStyle style;
final List<List<BlockContentNode>> items;
ListStyle get style;

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
Expand All @@ -275,6 +275,28 @@ class ListNode extends BlockContentNode {
}
}

class OrderedListNode extends ListNode {
const OrderedListNode({this.start = 1, required super.items, super.debugHtmlNode});

final int start;

@override
ListStyle get style => ListStyle.ordered;

@override
void debugFillProperties(DiagnosticPropertiesBuilder properties) {
super.debugFillProperties(properties);
properties.add(IntProperty('start', start));
}
}

class UnorderedListNode extends ListNode {
const UnorderedListNode({required super.items, super.debugHtmlNode});

@override
ListStyle get style => ListStyle.unordered;
}

class QuotationNode extends BlockContentNode {
const QuotationNode(this.nodes, {super.debugHtmlNode});

Expand Down Expand Up @@ -1081,7 +1103,13 @@ class _ZulipContentParser {
items.add(parseImplicitParagraphBlockContentList(item.nodes));
}

return ListNode(listStyle!, items, debugHtmlNode: debugHtmlNode);
if (listStyle == ListStyle.ordered) {
final startAttr = element.attributes['start'];
final start = startAttr != null ? (int.tryParse(startAttr) ?? 1) : 1;
return OrderedListNode(start: start, items: items, debugHtmlNode: debugHtmlNode);
} else {
return UnorderedListNode(items: items, debugHtmlNode: debugHtmlNode);
}
}

BlockContentNode parseSpoilerNode(dom.Element divElement) {
Expand Down
4 changes: 1 addition & 3 deletions lib/widgets/content.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -491,8 +491,7 @@ class ListNodeWidget extends StatelessWidget {
// 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 ListStyle.ordered: marker = "${(node as OrderedListNode).start + index}. "; break;
}
return ListItemWidget(marker: marker, nodes: item);
});
Expand All @@ -516,7 +515,6 @@ class ListItemWidget extends StatelessWidget {
textBaseline: localizedTextBaseline(context),
children: [
SizedBox(
width: 20, // TODO handle long numbers in <ol>, like https://github.com/zulip/zulip/pull/25063
child: Align(
alignment: AlignmentDirectional.topEnd, child: Text(marker))),
Expanded(child: BlockContentList(nodes: nodes)),
Expand Down
54 changes: 42 additions & 12 deletions test/model/content_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
])]
Expand Down Expand Up @@ -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,
Expand All @@ -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(' '),
Expand Down Expand Up @@ -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(' '),
Expand Down Expand Up @@ -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')])],
]),
Expand All @@ -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')])],
]),
Expand All @@ -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(),
Expand All @@ -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);
Expand Down Expand Up @@ -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')]),
])],
Expand Down Expand Up @@ -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')]),
]]),
]),
Expand Down
15 changes: 15 additions & 0 deletions test/widgets/content_test.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1158,4 +1158,19 @@ void main() {
check(linkText.textAlign).equals(TextAlign.center);
});
});

group('ListNodeWidget', () {
testWidgets('ordered list with custom start', (tester) async {
await prepareContent(tester, plainContent('''
<ol start="3">
<li>third</li>
<li>fourth</li>
</ol>'''));

expect(find.text('3. '), findsOneWidget);
expect(find.text('4. '), findsOneWidget);
expect(find.text('third'), findsOneWidget);
expect(find.text('fourth'), findsOneWidget);
});
});
}

0 comments on commit 6dfb1da

Please sign in to comment.