Merge branch 'master' of https://github.com/Sub6Resources/flutter_html into feature/improve-linking

tneotia · tneotia · commit 8a28f934808d · 2021-04-24T18:52:34.000-04:00
� Conflicts:
�	lib/flutter_html.dart
diff --git a/README.md b/README.md
@@ -36,6 +36,8 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
   - [Constructors](#constructors)
 
   - [Parameters Table](#parameters)
+  
+  - [Getters](#getters)
 
   - [Data](#data)
     
@@ -51,7 +53,7 @@ A Flutter widget for rendering HTML and CSS as Flutter widgets.
 
   - [onImageTap](#onimagetap)
 
-  - [blacklistedElements](#blacklistedelements)
+  - [tagsList](#tagslist)
 
   - [style](#style)
 
@@ -161,11 +163,15 @@ If you would like to modify or sanitize the HTML before rendering it, then `Html
 | `omMathError` | A function that defines what the widget should do when a math fails to render. The function exposes the parsed Tex `String`, as well as the error and error with type from `flutter_math` as a `String`. |
 | `shrinkWrap` | A `bool` used while rendering different widgets to specify whether they should be shrink-wrapped or not, like `ContainerSpan` |
 | `onImageTap` | A function that defines what the widget should do when an image is tapped. The function exposes the `src` of the image as a `String` to use in your implementation. |
-| `blacklistedElements` | A list of elements the `Html` widget should not render. The list should contain the tags of the HTML elements you wish to blacklist.  |
+| `tagsList` | A list of elements the `Html` widget should render. The list should contain the tags of the HTML elements you wish to include.  |
 | `style` | A powerful API that allows you to customize the style that should be used when rendering a specific HTMl tag. |
 | `navigationDelegateForIframe` | Allows you to set the `NavigationDelegate` for the `WebView`s of all the iframes rendered by the `Html` widget. |
 | `customImageRender` | A powerful API that allows you to fully customize how images are loaded. |
 
+### Getters:
+
+Currently the only getter is `Html.tags`. This provides a list of all the tags the package renders. The main use case is to assist in blacklisting elements using `tagsList`. See an [example](#example-usage---tagslist---excluding-tags) below.
+
 ### Data:
 
 The HTML data passed to the `Html` widget as a `String`. This is required and cannot be null when using `Html`.
@@ -375,25 +381,43 @@ Widget html = Html(
 );
 ```
 
-### blacklistedElements:
+### tagsList:
 
-A list of elements the `Html` widget should not render. The list should contain the tags of the HTML elements you wish to blacklist.
+A list of elements the `Html` widget should render. The list should contain the tags of the HTML elements you wish to whitelist.
 
-#### Example Usage - blacklistedElements:
+#### Example Usage - tagsList - Excluding Tags:
 You may have instances where you can choose between two different types of HTML tags to display the same content. In the example below, the `<video>` and `<iframe>` elements are going to display the same content.
 
 The `blacklistedElements` parameter allows you to change which element is rendered. Iframes can be advantageous because they allow parallel loading - Flutter just has to wait for the webview to be initialized before rendering the page, possibly cutting down on load time. Video can be advantageous because it provides a 100% native experience with Flutter widgets, but it may take more time to render the page. You may know that Flutter webview is a little janky in its current state on Android, so using `blacklistedElements` and a simple condition, you can get the best of both worlds - choose the video widget to render on Android and the iframe webview to render on iOS.
+
 ```dart
 Widget html = Html(
   data: """
   <video controls>
     <source src="https://www.w3schools.com/html/mov_bbb.mp4" />
   </video>
   <iframe src="https://www.w3schools.com/html/mov_bbb.mp4"></iframe>""",
-  blacklistedElements: [Platform.isAndroid ? "iframe" : "video"]
+  tagsList: Html.tags..remove(Platform.isAndroid ? "iframe" : "video")
 );
 ```
 
+`Html.tags` provides easy access to a list of all the tags the package can render, and you can remove specific tags from this list to blacklist them.
+
+#### Example Usage - tagsList - Allowing Tags:
+You may also have instances where you would only like the package to render a handful of html tags. You can do that like so:
+```dart
+Widget html = Html(
+  data: """
+    <p>Render this item</p>
+    <span>Do not render this item or any other item</span>
+    <img src='https://flutter.dev/images/flutter-mono-81x100.png'/>
+  """,
+  tagsList: ['p']
+);
+```
+
+Here, the package will only ever render `<p>` and ignore all other tags.
+
 ### style:
 
 A powerful API that allows you to customize the style that should be used when rendering a specific HTMl tag.
diff --git a/example/lib/generated_plugin_registrant.dart b/example/lib/generated_plugin_registrant.dart
@@ -4,13 +4,15 @@
 
 // ignore_for_file: lines_longer_than_80_chars
 
+import 'package:url_launcher_web/url_launcher_web.dart';
 import 'package:video_player_web/video_player_web.dart';
 import 'package:wakelock_web/wakelock_web.dart';
 
 import 'package:flutter_web_plugins/flutter_web_plugins.dart';
 
 // ignore: public_member_api_docs
 void registerPlugins(Registrar registrar) {
+  UrlLauncherPlugin.registerWith(registrar);
   VideoPlayerPlugin.registerWith(registrar);
   WakelockWeb.registerWith(registrar);
   registrar.registerMessageHandler();
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -1,8 +1,5 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
-import 'package:flutter_html/image_render.dart';
-import 'package:flutter_html/src/layout_element.dart';
-import 'package:flutter_html/style.dart';
 
 void main() => runApp(new MyApp());
 
diff --git a/lib/flutter_html.dart b/lib/flutter_html.dart
@@ -1,9 +1,22 @@
 library flutter_html;
 
+//export image render api
+export 'package:flutter_html/image_render.dart';
+//export style api
+export 'package:flutter_html/style.dart';
+//export render context api
+export 'package:flutter_html/html_parser.dart';
+//export src for advanced custom render uses (e.g. casting context.tree)
+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/interactable_element.dart';
+
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:flutter_html/html_parser.dart';
 import 'package:flutter_html/image_render.dart';
+import 'package:flutter_html/src/html_elements.dart';
 import 'package:flutter_html/style.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 import 'package:html/dom.dart' as dom;
@@ -30,7 +43,7 @@ class Html extends StatelessWidget {
   ///
   /// **onImageTap** This is called whenever an image is tapped.
   ///
-  /// **blacklistedElements** Tag names in this array are ignored during parsing and rendering.
+  /// **tagsList** Tag names in this array will be the only tags rendered. By default all tags are rendered.
   ///
   /// **style** Pass in the style information for the Html here.
   /// See [its wiki page](https://github.com/Sub6Resources/flutter_html/wiki/Style) for more info.
@@ -44,7 +57,7 @@ class Html extends StatelessWidget {
     this.onMathError,
     this.shrinkWrap = false,
     this.onImageTap,
-    this.blacklistedElements = const [],
+    this.tagsList = const [],
     this.style = const {},
     this.navigationDelegateForIframe,
   }) : document = null,
@@ -62,7 +75,7 @@ class Html extends StatelessWidget {
     this.onMathError,
     this.shrinkWrap = false,
     this.onImageTap,
-    this.blacklistedElements = const [],
+    this.tagsList = const [],
     this.style = const {},
     this.navigationDelegateForIframe,
   }) : data = null,
@@ -102,7 +115,7 @@ class Html extends StatelessWidget {
   final OnTap? onImageTap;
 
   /// A list of HTML tags that defines what elements are not rendered
-  final List<String> blacklistedElements;
+  final List<String> tagsList;
 
   /// Either return a custom widget for specific node types or return null to
   /// fallback to the default rendering.
@@ -116,6 +129,13 @@ class Html extends StatelessWidget {
   /// to use NavigationDelegate.
   final NavigationDelegate? navigationDelegateForIframe;
 
+  static List<String> get tags => new List<String>.from(STYLED_ELEMENTS)
+    ..addAll(INTERACTABLE_ELEMENTS)
+    ..addAll(REPLACED_ELEMENTS)
+    ..addAll(LAYOUT_ELEMENTS)
+    ..addAll(TABLE_CELL_ELEMENTS)
+    ..addAll(TABLE_DEFINITION_ELEMENTS);
+
   @override
   Widget build(BuildContext context) {
     final dom.Document doc = data != null ? HtmlParser.parseHTML(data!) : document!;
@@ -133,8 +153,10 @@ class Html extends StatelessWidget {
         shrinkWrap: shrinkWrap,
         style: style,
         customRender: customRender,
-        imageRenders: {}..addAll(customImageRenders)..addAll(defaultImageRenders),
-        blacklistedElements: blacklistedElements,
+        imageRenders: {}
+          ..addAll(customImageRenders)
+          ..addAll(defaultImageRenders),
+        tagsList: tagsList.isEmpty ? Html.tags : tagsList,
         navigationDelegateForIframe: navigationDelegateForIframe,
       ),
     );
diff --git a/lib/html_parser.dart b/lib/html_parser.dart
@@ -45,7 +45,7 @@ class HtmlParser extends StatelessWidget {
   final Map<String, Style> style;
   final Map<String, CustomRender> customRender;
   final Map<ImageSourceMatcher, ImageRender> imageRenders;
-  final List<String> blacklistedElements;
+  final List<String> tagsList;
   final NavigationDelegate? navigationDelegateForIframe;
   final OnTap? _onAnchorTap;
 
@@ -60,7 +60,7 @@ class HtmlParser extends StatelessWidget {
     required this.style,
     required this.customRender,
     required this.imageRenders,
-    required this.blacklistedElements,
+    required this.tagsList,
     required this.navigationDelegateForIframe,
   }): this._onAnchorTap = key != null ? _handleAnchorTap(key, onLinkTap): null, super(key: key);
 
@@ -69,7 +69,7 @@ class HtmlParser extends StatelessWidget {
     StyledElement lexedTree = lexDomTree(
       htmlData,
       customRender.keys.toList(),
-      blacklistedElements,
+      tagsList,
       navigationDelegateForIframe,
     );
     StyledElement inlineStyledTree = applyInlineStyles(lexedTree);
@@ -117,7 +117,7 @@ class HtmlParser extends StatelessWidget {
   static StyledElement lexDomTree(
     dom.Document html,
     List<String> customRenderTags,
-    List<String> blacklistedElements,
+    List<String> tagsList,
     NavigationDelegate? navigationDelegateForIframe,
   ) {
     StyledElement tree = StyledElement(
@@ -131,7 +131,7 @@ class HtmlParser extends StatelessWidget {
       tree.children.add(_recursiveLexer(
         node,
         customRenderTags,
-        blacklistedElements,
+        tagsList,
         navigationDelegateForIframe,
       ));
     });
@@ -146,7 +146,7 @@ class HtmlParser extends StatelessWidget {
   static StyledElement _recursiveLexer(
     dom.Node node,
     List<String> customRenderTags,
-    List<String> blacklistedElements,
+    List<String> tagsList,
     NavigationDelegate? navigationDelegateForIframe,
   ) {
     List<StyledElement> children = <StyledElement>[];
@@ -155,14 +155,14 @@ class HtmlParser extends StatelessWidget {
       children.add(_recursiveLexer(
         childNode,
         customRenderTags,
-        blacklistedElements,
+        tagsList,
         navigationDelegateForIframe,
       ));
     });
 
     //TODO(Sub6Resources): There's probably a more efficient way to look this up.
     if (node is dom.Element) {
-      if (blacklistedElements.contains(node.localName)) {
+      if (!tagsList.contains(node.localName)) {
         return EmptyContentElement();
       }
       if (STYLED_ELEMENTS.contains(node.localName)) {
diff --git a/lib/style.dart b/lib/style.dart
@@ -307,6 +307,9 @@ class Style {
       listStyleType: child.listStyleType ?? listStyleType,
       listStylePosition: child.listStylePosition ?? listStylePosition,
       textAlign: child.textAlign ?? textAlign,
+      textDecoration: TextDecoration.combine(
+          [child.textDecoration ?? TextDecoration.none,
+            textDecoration ?? TextDecoration.none]),
       textShadow: child.textShadow ?? textShadow,
       whiteSpace: child.whiteSpace ?? whiteSpace,
       wordSpacing: child.wordSpacing ?? wordSpacing,
