Merge branch 'master' of https://github.com/Sub6Resources/flutter_html into bugfix/audio-video-disposing

� Conflicts:
�	lib/flutter_html.dart
�	lib/src/replaced_element.dart
�	lib/src/styled_element.dart

Author: tneotia

CHANGELOG.md

@@ -1,3 +1,23 @@
+## [2.2.1] - December 8, 2021:
+* Allow styling on ruby tags
+* Allow width/height/alignment styling on table/tr/td tags
+* Prevent images causing rebuilding and leaking memory
+* Fixes display of list items on iOS with font weights below 400
+* Prevent crash on negative margins or paddings
+
+## [2.2.0] - November 29, 2021:
+* Explicitly declare multiplatform support
+* Extended and fixed list-style (marker) support
+* Basic support for height/width css properties
+* Support changing scroll physics of SelectableText.rich
+* Support text transform css property
+* Bumped minimum flutter_math_fork version for Flutter 2.5 compatibility
+* Fix styling of iframes
+* Fix nested font tag application
+* Fix whitespace rendering between list items
+* Prevent crash on empty <table> tag and tables with both colspan/rowspan
+* Prevent crash on use of negative margins in css
+
 ## [2.1.5] - October 7, 2021:
 * Ignore unsupported custom style selectors when using fromCss
 * Fix SVG tag usage inside tables

README.md

@@ -100,7 +100,7 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
 Add the following to your `pubspec.yaml` file:
 
     dependencies:
-      flutter_html: ^2.1.5
+      flutter_html: ^2.2.1
 
 ## Currently Supported HTML Tags:
 |            |           |       |             |         |         |       |      |        |        |        |

lib/flutter_html.dart

@@ -10,8 +10,8 @@ import 'package:flutter_html/src/html_elements.dart';
 import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
+import 'package:flutter_html/src/navigation_delegate.dart';
 import 'package:video_player/video_player.dart';
-import 'package:webview_flutter/webview_flutter.dart';
 
 //export render context api
 export 'package:flutter_html/html_parser.dart';
@@ -22,6 +22,7 @@ export 'package:flutter_html/src/interactable_element.dart';
 export 'package:flutter_html/src/layout_element.dart';
 export 'package:flutter_html/src/replaced_element.dart';
 export 'package:flutter_html/src/styled_element.dart';
+export 'package:flutter_html/src/navigation_delegate.dart';
 //export style api
 export 'package:flutter_html/style.dart';
 
@@ -67,8 +68,7 @@ class Html extends StatefulWidget {
     this.tagsList = const [],
     this.style = const {},
     this.navigationDelegateForIframe,
-  })
-      : document = null,
+  })  : document = null,
         assert(data != null),
         _anchorKey = anchorKey ?? GlobalKey(),
         super(key: key);
@@ -89,8 +89,7 @@ class Html extends StatefulWidget {
     this.tagsList = const [],
     this.style = const {},
     this.navigationDelegateForIframe,
-  })
-      : data = null,
+  })  : data = null,
         assert(document != null),
         _anchorKey = anchorKey ?? GlobalKey(),
         super(key: key);

lib/html_parser.dart

@@ -13,12 +13,12 @@ import 'package:flutter_html/src/anchor.dart';
 import 'package:flutter_html/src/css_parser.dart';
 import 'package:flutter_html/src/html_elements.dart';
 import 'package:flutter_html/src/layout_element.dart';
+import 'package:flutter_html/src/navigation_delegate.dart';
 import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 import 'package:html/dom.dart' as dom;
 import 'package:html/parser.dart' as htmlparser;
 import 'package:numerus/numerus.dart';
-import 'package:webview_flutter/webview_flutter.dart';
 
 typedef OnTap = void Function(
     String? url,
@@ -62,6 +62,8 @@ class HtmlParser extends StatelessWidget {
   final TextSelectionControls? selectionControls;
   final ScrollPhysics? scrollPhysics;
 
+  final Map<String, Size> cachedImageSizes = {};
+
   HtmlParser({
     required this.key,
     required this.htmlData,
@@ -216,7 +218,7 @@ class HtmlParser extends StatelessWidget {
       } else if (INTERACTABLE_ELEMENTS.contains(node.localName)) {
         return parseInteractableElement(node, children);
       } else if (REPLACED_ELEMENTS.contains(node.localName)) {
-        return parseReplacedElement(node, navigationDelegateForIframe);
+        return parseReplacedElement(node, children, navigationDelegateForIframe);
       } else if (LAYOUT_ELEMENTS.contains(node.localName)) {
         return parseLayoutElement(node, children);
       } else if (TABLE_CELL_ELEMENTS.contains(node.localName)) {
@@ -403,9 +405,11 @@ 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) {
+          final tabSpan = WidgetSpan(
+            child: Text("\t", textAlign: TextAlign.right, style: TextStyle(fontWeight: FontWeight.w400)),
+          );
           children.insert(0, tabSpan);
         }
         return children;
@@ -424,10 +428,10 @@ class HtmlParser extends StatelessWidget {
             children: [
               tree.style.listStylePosition == ListStylePosition.OUTSIDE ?
               Padding(
-                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),
+                padding: tree.style.padding?.nonNegative ?? EdgeInsets.only(left: tree.style.direction != TextDirection.rtl ? 10.0 : 0.0, right: tree.style.direction == TextDirection.rtl ? 10.0 : 0.0),
                 child: newContext.style.markerContent
               ) : Container(height: 0, width: 0),
-              Text("\t", textAlign: TextAlign.right),
+              Text("\t", textAlign: TextAlign.right, style: TextStyle(fontWeight: FontWeight.w400)),
               Expanded(
                   child: Padding(
                       padding: tree.style.listStylePosition == ListStylePosition.INSIDE ?
@@ -739,7 +743,6 @@ class HtmlParser extends StatelessWidget {
       String marker = "";
       switch (tree.style.listStyleType!) {
         case ListStyleType.NONE:
-          tree.style.markerContent = '';
           break;
         case ListStyleType.CIRCLE:
           marker = '○';
@@ -961,7 +964,7 @@ class HtmlParser extends StatelessWidget {
       if (child is EmptyContentElement || child is EmptyLayoutElement) {
         toRemove.add(child);
       } else if (child is TextContentElement
-          && tree.name == "body"
+          && (tree.name == "body" || tree.name == "ul")
           && child.text!.replaceAll(' ', '').isEmpty) {
         toRemove.add(child);
       } else if (child is TextContentElement
@@ -1055,8 +1058,8 @@ class ContainerSpan extends StatelessWidget {
       ),
       height: style.height,
       width: style.width,
-      padding: style.padding,
-      margin: style.margin,
+      padding: style.padding?.nonNegative,
+      margin: style.margin?.nonNegative,
       alignment: shrinkWrap ? null : style.alignment,
       child: child ??
           StyledText(

lib/image_render.dart

@@ -108,48 +108,44 @@ ImageRender networkImageRender({
 }) =>
     (context, attributes, element) {
       final src = mapUrl?.call(_src(attributes)) ?? _src(attributes)!;
-      precacheImage(
-        NetworkImage(
-          src,
-          headers: headers,
-        ),
-        context.buildContext,
-        onError: (exception, StackTrace? stackTrace) {
-          context.parser.onImageError?.call(exception, stackTrace);
-        },
-      );
       Completer<Size> completer = Completer();
-      Image image = Image.network(src, frameBuilder: (ctx, child, frame, _) {
-        if (frame == null) {
+      if (context.parser.cachedImageSizes[src] != null) {
+        completer.complete(context.parser.cachedImageSizes[src]);
+      } else {
+        Image image = Image.network(src, frameBuilder: (ctx, child, frame, _) {
+          if (frame == null) {
+            if (!completer.isCompleted) {
+              completer.completeError("error");
+            }
+            return child;
+          } else {
+            return child;
+          }
+        });
+
+        ImageStreamListener? listener;
+        listener = ImageStreamListener((ImageInfo imageInfo, bool synchronousCall) {
+          var myImage = imageInfo.image;
+          Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
           if (!completer.isCompleted) {
-            completer.completeError("error");
+            context.parser.cachedImageSizes[src] = size;
+            completer.complete(size);
+            image.image.resolve(ImageConfiguration()).removeListener(listener!);
           }
-          return child;
-        } else {
-          return child;
-        }
-      });
-
-      var listener =
-          ImageStreamListener((ImageInfo image, bool synchronousCall) {
-        var myImage = image.image;
-        Size size = Size(myImage.width.toDouble(), myImage.height.toDouble());
-        if (!completer.isCompleted) {
-          completer.complete(size);
-        }
-      }, onError: (object, stacktrace) {
-        if (!completer.isCompleted) {
-          completer.completeError(object);
-        }
-      });
-
-      image.image.resolve(ImageConfiguration()).addListener(listener);
+        }, onError: (object, stacktrace) {
+          if (!completer.isCompleted) {
+            completer.completeError(object);
+            image.image.resolve(ImageConfiguration()).removeListener(listener!);
+          }
+        });
+
+        image.image.resolve(ImageConfiguration()).addListener(listener);
+      }
+
       return FutureBuilder<Size>(
         future: completer.future,
+        initialData: context.parser.cachedImageSizes[src],
         builder: (BuildContext buildContext, AsyncSnapshot<Size> snapshot) {
-          if (completer.isCompleted) {
-            image.image.resolve(ImageConfiguration()).removeListener(listener);
-          }
           if (snapshot.hasData) {
             return Container(
               constraints: BoxConstraints(

lib/src/html_elements.dart

@@ -22,6 +22,7 @@ const STYLED_ELEMENTS = [
   "kbd",
   "mark",
   "q",
+  "rt",
   "s",
   "samp",
   "small",

lib/src/interactable_element.dart

@@ -22,20 +22,30 @@ enum Gesture {
   TAP,
 }
 
-InteractableElement parseInteractableElement(
+StyledElement parseInteractableElement(
     dom.Element element, List<StyledElement> children) {
   switch (element.localName) {
     case "a":
-      return InteractableElement(
+      if (element.attributes.containsKey('href')) {
+        return InteractableElement(
+            name: element.localName!,
+            children: children,
+            href: element.attributes['href'],
+            style: Style(
+              color: Colors.blue,
+              textDecoration: TextDecoration.underline,
+            ),
+            node: element,
+            elementId: element.id
+        );
+      }
+      // When <a> tag have no href, it must be non clickable and without decoration.
+      return StyledElement(
         name: element.localName!,
         children: children,
-        href: element.attributes['href'],
-        style: Style(
-          color: Colors.blue,
-          textDecoration: TextDecoration.underline,
-        ),
+        style: Style(),
         node: element,
-        elementId: element.id
+        elementId: element.id,
       );
     /// will never be called, just to suppress missing return warning
     default:
@@ -48,4 +58,4 @@ InteractableElement parseInteractableElement(
         elementId: "[[No ID]]"
       );
   }
-}
+}

lib/src/layout_element.dart

@@ -5,6 +5,7 @@ import 'package:flutter_html/html_parser.dart';
 import 'package:flutter_html/src/anchor.dart';
 import 'package:flutter_html/src/html_elements.dart';
 import 'package:flutter_html/src/styled_element.dart';
+import 'package:flutter_html/src/utils.dart';
 import 'package:flutter_html/style.dart';
 import 'package:flutter_layout_grid/flutter_layout_grid.dart';
 import 'package:html/dom.dart' as dom;
@@ -33,8 +34,9 @@ class TableLayoutElement extends LayoutElement {
   Widget toWidget(RenderContext context) {
     return Container(
       key: AnchorKey.of(context.parser.key, this),
-      margin: style.margin,
-      padding: style.padding,
+      padding: style.padding?.nonNegative,
+      margin: style.margin?.nonNegative,
+      alignment: style.alignment,
       decoration: BoxDecoration(
         color: style.backgroundColor,
         border: style.border,
@@ -87,35 +89,42 @@ class TableLayoutElement extends LayoutElement {
     }
 
     // All table rows have a height intrinsic to their (spanned) contents
-    final rowSizes =
-        List.generate(rows.length, (_) => IntrinsicContentTrackSize());
+    final rowSizes = List.generate(rows.length, (_) => IntrinsicContentTrackSize());
 
     // Calculate column bounds
-    int columnMax = rows
-        .map((row) => row.children
-            .whereType<TableCellElement>()
-            .fold(0, (int value, child) => value + child.colspan))
-        .fold(0, max);
+    int columnMax = 0;
+    List<int> rowSpanOffsets = [];
+    for (final row in rows) {
+      final cols = row.children.whereType<TableCellElement>().fold(0, (int value, child) => value + child.colspan) +
+          rowSpanOffsets.fold<int>(0, (int offset, child) => child);
+      columnMax = max(cols, columnMax);
+      rowSpanOffsets = [
+        ...rowSpanOffsets.map((value) => value - 1).where((value) => value > 0),
+        ...row.children.whereType<TableCellElement>().map((cell) => cell.rowspan - 1),
+      ];
+    }
 
     // Place the cells in the rows/columns
     final cells = <GridPlacement>[];
     final columnRowOffset = List.generate(columnMax, (_) => 0);
+    final columnColspanOffset = List.generate(columnMax, (_) => 0);
     int rowi = 0;
     for (var row in rows) {
       int columni = 0;
       for (var child in row.children) {
         if (columni > columnMax - 1 ) {
           break;
         }
-        while (columnRowOffset[columni] > 0) {
-          columnRowOffset[columni] = columnRowOffset[columni] - 1;
-          columni++;
-        }
         if (child is TableCellElement) {
+          while (columnRowOffset[columni] > 0) {
+            columnRowOffset[columni] = columnRowOffset[columni] - 1;
+            columni += columnColspanOffset[columni].clamp(1, columnMax - columni - 1);
+          }
           cells.add(GridPlacement(
             child: Container(
-              width: double.infinity,
-              padding: child.style.padding ?? row.style.padding,
+              width: child.style.width ?? double.infinity,
+              height: child.style.height,
+              padding: child.style.padding?.nonNegative ?? row.style.padding?.nonNegative,
               decoration: BoxDecoration(
                 color: child.style.backgroundColor ?? row.style.backgroundColor,
                 border: child.style.border ?? row.style.border,
@@ -139,6 +148,7 @@ class TableLayoutElement extends LayoutElement {
             rowSpan: min(child.rowspan, rows.length - rowi),
           ));
           columnRowOffset[columni] = child.rowspan - 1;
+          columnColspanOffset[columni] = child.colspan;
           columni += child.colspan;
         }
       }
@@ -155,6 +165,11 @@ class TableLayoutElement extends LayoutElement {
         max(0, columnMax - finalColumnSizes.length),
         (_) => IntrinsicContentTrackSize());
 
+    if (finalColumnSizes.isEmpty || rowSizes.isEmpty) {
+      // No actual cells to show
+      return SizedBox();
+    }
+
     return LayoutGrid(
       gridFit: GridFit.loose,
       columnSizes: finalColumnSizes,