Re-add support for list-style-image and do some final cleanup

Sub6Resources · Sub6Resources · commit 91a7e702d3cf · 2022-10-20T15:14:18.000-06:00
diff --git a/lib/custom_render.dart b/lib/custom_render.dart
@@ -8,7 +8,6 @@ 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);
 
@@ -158,41 +157,12 @@ CustomRender listElementRender(
     {Style? style, Widget? child, List<InlineSpan>? children}) {
   return CustomRender.inlineSpan(
     inlineSpan: (context, buildChildren) {
-      final usedStyle = style ?? context.style;
-      final listStyleType = usedStyle.listStyleType ?? ListStyleType.decimal;
-      final counterStyle =
-          CounterStyleRegistry.lookup(listStyleType.counterStyle);
-      String counterContent;
-      if (usedStyle.marker?.content.isNormal ?? true) {
-        counterContent = counterStyle.generateMarkerContent(
-          context.tree.counters.lastOrNull?.value ?? 0,
-        );
-      } else if (!(usedStyle.marker?.content.display ?? true)) {
-        counterContent = '';
-      } else {
-        counterContent = usedStyle.marker?.content.replacementContent ??
-            counterStyle.generateMarkerContent(
-              context.tree.counters.lastOrNull?.value ?? 0,
-            );
-      }
-      final listChildren = buildChildren()
-        ..insertAll(
-          0,
-          [
-            if (usedStyle.listStylePosition == ListStylePosition.inside)
-              TextSpan(
-                text: counterContent,
-                style: usedStyle.marker?.style?.generateTextStyle(),
-              ),
-          ],
-        );
-
       return WidgetSpan(
         child: CssBoxWidget.withInlineSpanChildren(
           key: context.key,
-          style: usedStyle,
+          style: style ?? context.style,
           shrinkWrap: context.parser.shrinkWrap,
-          children: listChildren,
+          children: buildChildren(),
         ),
       );
     },
diff --git a/lib/src/css_box_widget.dart b/lib/src/css_box_widget.dart
@@ -57,7 +57,9 @@ class CssBoxWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final markerBox = _generateMarkerBox(style);
+    final markerBox = style.listStylePosition == ListStylePosition.outside
+        ? _generateMarkerBoxSpan(style)
+        : null;
 
     return _CSSBoxRenderer(
       width: style.width ?? Width.auto(),
@@ -80,7 +82,7 @@ class CssBoxWidget extends StatelessWidget {
           padding: style.padding ?? EdgeInsets.zero,
           child: child,
         ),
-        if (markerBox != null) markerBox,
+        if (markerBox != null) Text.rich(markerBox),
       ],
     );
   }
@@ -92,6 +94,15 @@ class CssBoxWidget extends StatelessWidget {
       return Container();
     }
 
+    // Generate an inline marker box if the list-style-position is set to
+    // inside. Otherwise the marker box will be added elsewhere.
+    if (style.listStylePosition == ListStylePosition.inside) {
+      final inlineMarkerBox = _generateMarkerBoxSpan(style);
+      if (inlineMarkerBox != null) {
+        children.insert(0, inlineMarkerBox);
+      }
+    }
+
     return Text.rich(
       TextSpan(
         style: style.generateTextStyle(),
@@ -129,17 +140,38 @@ class CssBoxWidget extends StatelessWidget {
     );
   }
 
-  static Widget? _generateMarkerBox(Style style) {
-    if (style.display == Display.listItem &&
-        style.listStylePosition == ListStylePosition.outside) {
-      if (style.marker?.content.replacementContent?.isNotEmpty ?? false) {
-        return Text.rich(
-          TextSpan(
-            text: style.marker!.content.replacementContent!,
-            style: style.marker!.style?.generateTextStyle(),
+  static InlineSpan? _generateMarkerBoxSpan(Style style) {
+    if (style.display == Display.listItem) {
+      // First handle listStyleImage
+      if (style.listStyleImage != null) {
+        return WidgetSpan(
+          alignment: PlaceholderAlignment.middle,
+          child: Image.network(
+            style.listStyleImage!.uriText,
+            errorBuilder: (_, __, ___) {
+              if (style.marker?.content.replacementContent?.isNotEmpty ??
+                  false) {
+                return Text.rich(
+                  TextSpan(
+                    text: style.marker!.content.replacementContent!,
+                    style: style.marker!.style?.generateTextStyle(),
+                  ),
+                );
+              }
+
+              return Container();
+            },
           ),
         );
       }
+
+      // Display list marker with given style
+      if (style.marker?.content.replacementContent?.isNotEmpty ?? false) {
+        return TextSpan(
+          text: style.marker!.content.replacementContent!,
+          style: style.marker!.style?.generateTextStyle(),
+        );
+      }
     }
 
     return null;
