Merge pull request Sub6Resources#537 from tneotia/feature/start-and-padding-for-lists

erickok · web-flow · commit 957ae3b61956 · 2021-02-23T09:04:56.000+01:00
Support padding and 'start' attribute for lists, support RTL direction for lists, fix "unknown character" box for \t on iOS
diff --git a/lib/html_parser.dart b/lib/html_parser.dart
@@ -295,40 +295,53 @@ class HtmlParser extends StatelessWidget {
         ),
       );
     } else if (tree.style?.display == Display.LIST_ITEM) {
+      List<InlineSpan> getChildren(StyledElement tree) {
+        InlineSpan tabSpan = WidgetSpan(child: Text("\t", textAlign: TextAlign.right));
+        List<InlineSpan> children = tree.children?.map((tree) => parseTree(newContext, tree))?.toList() ?? [];
+        if (tree.style?.listStylePosition == ListStylePosition.INSIDE) {
+          children.insert(0, tabSpan);
+        }
+        return children;
+      }
+
       return WidgetSpan(
         child: ContainerSpan(
           newContext: newContext,
           style: tree.style,
           shrinkWrap: context.parser.shrinkWrap,
-          child: Stack(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisSize: MainAxisSize.min,
+            textDirection: tree.style?.direction,
             children: [
-              if (tree.style?.listStylePosition == ListStylePosition.OUTSIDE ||
-                  tree.style?.listStylePosition == null)
-                PositionedDirectional(
-                  width: 30, //TODO derive this from list padding.
-                  start: 0,
-                  child: Text('${newContext.style.markerContent}\t',
-                      textAlign: TextAlign.right,
-                      style: newContext.style.generateTextStyle()),
-                ),
+              tree.style?.listStylePosition == ListStylePosition.OUTSIDE ||
+                  tree.style?.listStylePosition == null ?
               Padding(
-                padding: EdgeInsetsDirectional.only(
-                    start: 30), //TODO derive this from list padding.
-                child: StyledText(
-                  textSpan: TextSpan(
-                    text: (tree.style?.listStylePosition ==
-                            ListStylePosition.INSIDE)
-                        ? '${newContext.style.markerContent}\t'
-                        : null,
-                    children: tree.children
-                            ?.map((tree) => parseTree(newContext, tree))
-                            ?.toList() ??
-                        [],
-                    style: newContext.style.generateTextStyle(),
-                  ),
-                  style: newContext.style,
-                  renderContext: context,
+                padding: tree.style?.padding ?? EdgeInsets.only(left: tree.style?.direction != TextDirection.rtl ? 10.0 : 0.0, right: tree.style?.direction == TextDirection.rtl ? 10.0 : 0.0),
+                child: Text(
+                    newContext.style.markerContent,
+                    textAlign: TextAlign.right,
+                    style: newContext.style.generateTextStyle()
                 ),
+              ) : Container(height: 0, width: 0),
+              Text("\t", textAlign: TextAlign.right),
+              Expanded(
+                  child: Padding(
+                      padding: tree.style?.listStylePosition == ListStylePosition.INSIDE ?
+                        EdgeInsets.only(left: tree.style?.direction != TextDirection.rtl ? 10.0 : 0.0, right: tree.style?.direction == TextDirection.rtl ? 10.0 : 0.0) : EdgeInsets.zero,
+                      child: StyledText(
+                        textSpan: TextSpan(
+                          text: (tree.style?.listStylePosition ==
+                              ListStylePosition.INSIDE)
+                              ? '${newContext.style.markerContent}'
+                              : null,
+                          children: getChildren(tree),
+                          style: newContext.style.generateTextStyle(),
+                        ),
+                        style: newContext.style,
+                        renderContext: context,
+                      )
+                  )
               )
             ],
           ),
@@ -519,7 +532,7 @@ class HtmlParser extends StatelessWidget {
   static StyledElement _processListCharactersRecursive(
       StyledElement tree, ListQueue<Context<int>> olStack) {
     if (tree.name == 'ol') {
-      olStack.add(Context(0));
+      olStack.add(Context((tree.attributes['start'] != null ? int.tryParse(tree.attributes['start']) ?? 1 : 1) - 1));
     } else if (tree.style.display == Display.LIST_ITEM) {
       switch (tree.style.listStyleType) {
         case ListStyleType.DISC:
