feat: Upgrade list-style-type to CSS3

Sub6Resources · Oct 21, 2022 · deb726a · deb726a
1 parent e99e2cc
commit deb726a
Show file tree

Hide file tree

Showing 7 changed files with 352 additions and 310 deletions.
diff --git a/lib/custom_render.dart b/lib/custom_render.dart
@@ -8,6 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/html_elements.dart';
 import 'package:flutter_html/src/utils.dart';
+import 'package:list_counter/list_counter.dart';
 
 typedef CustomRenderMatcher = bool Function(RenderContext context);
 
@@ -156,81 +157,109 @@ CustomRender blockElementRender({Style? style, List<InlineSpan>? children}) =>
 CustomRender listElementRender(
         {Style? style, Widget? child, List<InlineSpan>? children}) =>
     CustomRender.inlineSpan(
-      inlineSpan: (context, buildChildren) => WidgetSpan(
-        child: CssBoxWidget(
-          key: context.key,
-          style: style ?? context.tree.style,
-          shrinkWrap: context.parser.shrinkWrap,
-          child: Row(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisSize: MainAxisSize.min,
-            textDirection: style?.direction ?? context.tree.style.direction,
-            children: [
-              (style?.listStylePosition ??
-                          context.tree.style.listStylePosition) ==
-                      ListStylePosition.outside
-                  ? Padding(
-                      padding: style?.padding?.nonNegative ??
-                          context.tree.style.padding?.nonNegative ??
-                          EdgeInsets.only(
-                              left: (style?.direction ??
-                                          context.tree.style.direction) !=
-                                      TextDirection.rtl
-                                  ? 10.0
-                                  : 0.0,
-                              right: (style?.direction ??
-                                          context.tree.style.direction) ==
-                                      TextDirection.rtl
-                                  ? 10.0
-                                  : 0.0),
-                      child:
-                          style?.markerContent ?? context.style.markerContent)
-                  : const SizedBox(height: 0, width: 0),
-              const Text("\u0020",
-                  textAlign: TextAlign.right,
-                  style: TextStyle(fontWeight: FontWeight.w400)),
-              Expanded(
-                child: Padding(
-                  padding: (style?.listStylePosition ??
-                              context.tree.style.listStylePosition) ==
-                          ListStylePosition.inside
-                      ? EdgeInsets.only(
-                          left: (style?.direction ??
-                                      context.tree.style.direction) !=
-                                  TextDirection.rtl
-                              ? 10.0
-                              : 0.0,
-                          right: (style?.direction ??
-                                      context.tree.style.direction) ==
-                                  TextDirection.rtl
-                              ? 10.0
-                              : 0.0)
-                      : EdgeInsets.zero,
-                  child: CssBoxWidget.withInlineSpanChildren(
-                    children: _getListElementChildren(
-                        style?.listStylePosition ??
-                            context.tree.style.listStylePosition,
-                        buildChildren)
-                      ..insertAll(
-                          0,
-                          context.tree.style.listStylePosition ==
-                                  ListStylePosition.inside
-                              ? [
-                                  WidgetSpan(
-                                      alignment: PlaceholderAlignment.middle,
-                                      child: style?.markerContent ??
-                                          context.style.markerContent ??
-                                          const SizedBox(height: 0, width: 0))
-                                ]
-                              : []),
-                    style: style ?? context.style,
+      inlineSpan: (context, buildChildren) {
+        final listStyleType = style?.listStyleType ??
+            context.style.listStyleType ??
+            ListStyleType.decimal;
+        final counterStyle =
+            CounterStyleRegistry.lookup(listStyleType.counterStyle);
+        String counterContent;
+        if (style?.marker?.content.isNormal ??
+            context.style.marker?.content.isNormal ??
+            true) {
+          counterContent = counterStyle.generateMarkerContent(
+              context.tree.counters.lastOrNull?.value ?? 0);
+        } else if (!(style?.marker?.content.display ??
+            context.style.marker?.content.display ??
+            true)) {
+          counterContent = '';
+        } else {
+          counterContent = style?.marker?.content.replacementContent ??
+              context.style.marker?.content.replacementContent ??
+              counterStyle.generateMarkerContent(
+                  context.tree.counters.lastOrNull?.value ?? 0);
+        }
+        final markerWidget = counterContent.isNotEmpty
+            ? Text.rich(TextSpan(
+                text: counterContent,
+                style: context.tree.style.marker?.style?.generateTextStyle(),
+              ))
+            : const SizedBox(width: 0, height: 0); //TODO this is hardcoded
+
+        return WidgetSpan(
+          child: CssBoxWidget(
+            key: context.key,
+            style: style ?? context.tree.style,
+            shrinkWrap: context.parser.shrinkWrap,
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisSize: MainAxisSize.min,
+              textDirection: style?.direction ?? context.tree.style.direction,
+              children: [
+                (style?.listStylePosition ??
+                            context.tree.style.listStylePosition) ==
+                        ListStylePosition.outside
+                    ? Padding(
+                        padding: style?.padding?.nonNegative ??
+                            context.tree.style.padding?.nonNegative ??
+                            EdgeInsets.only(
+                                left: (style?.direction ??
+                                            context.tree.style.direction) !=
+                                        TextDirection.rtl
+                                    ? 10.0
+                                    : 0.0,
+                                right: (style?.direction ??
+                                            context.tree.style.direction) ==
+                                        TextDirection.rtl
+                                    ? 10.0
+                                    : 0.0),
+                        child: markerWidget,
+                      )
+                    : const SizedBox(height: 0, width: 0),
+                const Text("\u0020",
+                    textAlign: TextAlign.right,
+                    style: TextStyle(fontWeight: FontWeight.w400)),
+                Expanded(
+                  child: Padding(
+                    padding: (style?.listStylePosition ??
+                                context.tree.style.listStylePosition) ==
+                            ListStylePosition.inside
+                        ? EdgeInsets.only(
+                            left: (style?.direction ??
+                                        context.tree.style.direction) !=
+                                    TextDirection.rtl
+                                ? 10.0
+                                : 0.0,
+                            right: (style?.direction ??
+                                        context.tree.style.direction) ==
+                                    TextDirection.rtl
+                                ? 10.0
+                                : 0.0)
+                        : EdgeInsets.zero,
+                    child: CssBoxWidget.withInlineSpanChildren(
+                      children: _getListElementChildren(
+                          style?.listStylePosition ??
+                              context.tree.style.listStylePosition,
+                          buildChildren)
+                        ..insertAll(
+                            0,
+                            context.tree.style.listStylePosition ==
+                                    ListStylePosition.inside
+                                ? [
+                                    WidgetSpan(
+                                        alignment: PlaceholderAlignment.middle,
+                                        child: markerWidget)
+                                  ]
+                                : []),
+                      style: style ?? context.style,
+                    ),
                   ),
                 ),
-              ),
-            ],
+              ],
+            ),
           ),
-        ),
-      ),
+        );
+      },
     );
 
 CustomRender replacedElementRender(