10000 feat: Upgrade list-style-type to CSS3 · Sub6Resources/flutter_html@deb726a · GitHub
[go: up one dir, main page]
Skip to content

Commit deb726a

Browse files
Sub6ResourcesSub6Resources
committed
feat: Upgrade list-style-type to CSS3
1 parent e99e2cc commit deb726a

File tree

7 files changed

+352
-310
lines changed

7 files changed

+352
-310
lines changed

‎lib/custom_render.dart

Lines changed: 101 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
88
import 'package:flutter_html/flutter_html.dart';
99
import 'package:flutter_html/src/html_elements.dart';
1010
import 'package:flutter_html/src/utils.dart';
11+
import 'package:list_counter/list_counter.dart';
1112

1213
typedef CustomRenderMatcher = bool Function(RenderContext context);
1314

@@ -156,81 +157,109 @@ CustomRender blockElementRender({Style? style, List<InlineSpan>? children}) =>
156157
CustomRender listElementRender(
157158
{Style? style, Widget? child, List<InlineSpan>? children}) =>
158159
CustomRender.inlineSpan(
159-
inlineSpan: (context, buildChildren) => WidgetSpan(
160-
child: CssBoxWidget(
161-
key: context.key,
162-
style: style ?? context.tree.style,
163-
shrinkWrap: context.parser.shrinkWrap,
164-
child: Row(
165-
crossAxisAlignment: CrossAxisAlignment.start,
166-
mainAxisSize: MainAxisSize.min,
167-
textDirection: style?.direction ?? context.tree.style.direction,
168-
children: [
169-
(style?.listStylePosition ??
170-
context.tree.style.listStylePosition) ==
171-
ListStylePosition.outside
172-
? Padding(
173-
padding: style?.padding?.nonNegative ??
174-
context.tree.style.padding?.nonNegative ??
175-
EdgeInsets.only(
176-
left: (style?.direction ??
177-
context.tree.style.direction) !=
178-
TextDirection.rtl
179-
? 10.0
180-
: 0.0,
181-
right: (style?.direction ??
182-
context.tree.style.direction) ==
183-
TextDirection.rtl
184-
? 10.0
185-
: 0.0),
186-
child:
187-
style?.markerContent ?? context.style.markerContent)
188-
: const SizedBox(height: 0, width: 0),
189-
const Text("\u0020",
190-
textAlign: TextAlign.right,
191-
style: TextStyle(fontWeight: FontWeight.w400)),
192-
Expanded(
193-
child: Padding(
194-
padding: (style?.listStylePosition ??
195-
context.tree.style.listStylePosition) ==
196-
ListStylePosition.inside
197-
? EdgeInsets.only(
198-
left: (style?.direction ??
199-
context.tree.style.direction) !=
200-
TextDirection.rtl
201-
? 10.0
202-
: 0.0,
203-
right: (style?.direction ??
204-
context.tree.style.direction) ==
205-
TextDirection.rtl
206-
? 10.0
207-
: 0.0)
208-
: EdgeInsets.zero,
209-
child: CssBoxWidget.withInlineSpanChildren(
210-
children: _getListElementChildren(
211-
style?.listStylePosition ??
212-
context.tree.style.listStylePosition,
213-
buildChildren)
214-
..insertAll(
215-
0,
216-
context.tree.style.listStylePosition ==
217-
ListStylePosition.inside
218-
? [
219-
WidgetSpan(
220-
alignment: PlaceholderAlignment.middle,
221-
child: style?.markerContent ??
222-
context.style.markerContent ??
223-
const SizedBox(height: 0, width: 0))
224-
]
225-
: []),
226-
style: style ?? context.style,
160+
inlineSpan: (context, buildChildren) {
161+
final listStyleType = style?.listStyleType ??
162+
context.style.listStyleType ??
163+
ListStyleType.decimal;
164+
final counterStyle =
165+
CounterStyleRegistry.lookup(listStyleType.counterStyle);
166+
String counterContent;
167+
if (style?.marker?.content.isNormal ??
168+
context.style.marker?.content.isNormal ??
169+
true) {
170+
counterContent = counterStyle.generateMarkerContent(
171+
context.tree.counters.lastOrNull?.value ?? 0);
172+
} else if (!(style?.marker?.content.display ??
173+
context.style.marker?.content.display ??
174+
true)) {
175+
counterContent = '';
176+
} else {
177+
counterContent = style?.marker?.content.replacementContent ??
178+
context.style.marker?.content.replacementContent ??
179+
counterStyle.generateMarkerContent(
180+
context.tree.counters.lastOrNull?.value ?? 0);
181+
}
182+
final markerWidget = counterContent.isNotEmpty
183+
? Text.rich(TextSpan(
184+
text: counterContent,
185+
style: context.tree.style.marker?.style?.generateTextStyle(),
186+
))
187+
: const SizedBox(width: 0, height: 0); //TODO this is hardcoded
188+
189+
return WidgetSpan(
190+
child: CssBoxWidget(
191+
key: context.key,
192+
style: style ?? context.tree.style,
193+
shrinkWrap: context.parser.shrinkWrap,
194+
child: Row(
195+
crossAxisAlignment: CrossAxisAlignment.start,
196+
mainAxisSize: MainAxisSize.min,
197+
textDirection: style?.direction ?? context.tree.style.direction,
198+
children: [
199+
(style?.listStylePosition ??
200+
context.tree.style.listStylePosition) ==
201+
ListStylePosition.outside
202+
? Padding(
203+
padding: style?.padding?.nonNegative ??
204+
context.tree.style.padding?.nonNegative ??
205+
EdgeInsets.only(
206+
left: (style?.direction ??
207+
context.tree.style.direction) !=
208+
TextDirection.rtl
209+
? 10.0
210+
: 0.0,
211+
right: (style?.direction ??
212+
context.tree.style.direction) ==
213+
TextDirection.rtl
214+
? 10.0
215+
: 0.0),
216+
child: markerWidget,
217+
)
218+
: const SizedBox(height: 0, width: 0),
219+
const Text("\u0020",
220+
textAlign: TextAlign.right,
221+
style: TextStyle(fontWeight: FontWeight.w400)),
222+
Expanded(
223+
child: Padding(
224+
padding: (style?.listStylePosition ??
225+
context.tree.style.listStylePosition) ==
226+
ListStylePosition.inside
227+
? EdgeInsets.only(
228+
left: (style?.direction ??
229+
context.tree.style.direction) !=
230+
TextDirection.rtl
231+
? 10.0
232+
: 0.0,
233+
right: (style?.direction ??
234+
context.tree.style.direction) ==
235+
TextDirection.rtl
236+
? 10.0
237+
: 0.0)
238+
: EdgeInsets.zero,
239+
child: CssBoxWidget.withInlineSpanChildren(
240+
children: _getListElementChildren(
241+
style?.listStylePosition ??
242+
context.tree.style.listStylePosition,
243+
buildChildren)
244+
..insertAll(
245+
0,
246+
context.tree.style.listStylePosition ==
247+
ListStylePosition.inside
248+
? [
249+
WidgetSpan(
250+
alignment: PlaceholderAlignment.middle,
251+
child: markerWidget)
252+
]
253+
: []),
254+
style: style ?? context.style,
255+
),
227256
),
228257
),
229-
),
230-
],
258+
],
259+
),
231260
),
232-
),
233-
),
261+
);
262+
},
234263
);
235264

236265
CustomRender replacedElementRender(

0 commit comments

Comments
 (0)
0