Migrate CustomRender to HtmlExtension

.circleci/config.yml

@@ -37,4 +37,4 @@ jobs:
           command: melos run analyze
       - run:
           name: Check That Flutter Code is Formatted Correctly
-          command: flutter format -o none --set-exit-if-changed .
+          command: dart format -o none --set-exit-if-changed .

.gitignore

@@ -154,4 +154,6 @@ modules.xml
 
 packages/**/pubspec_overrides.yaml
 ./pubspec_overrides.yaml
-/example/pubspec_overrides.yaml
+/example/pubspec_overrides.yaml
+
+coverage/

CHANGELOG.md

@@ -1,3 +1,21 @@
+# Change Log
+
+
+#### 3.0.0-beta.1 - *May 2023*
+
+ - Several Breaking Changes. See the [migration guide](https://github.com/Sub6Resources/flutter_html/wiki/Migration-Guides#300)
+
+ - **FIX**: Aspect ratio exception when height is 0 ([#1222](https://github.com/sub6resources/flutter_html/issues/1222)). ([ed75f8fe](https://github.com/sub6resources/flutter_html/commit/ed75f8fef779e920ecc1f27719a4150a29e3ebee))
+ - **FIX**: Fix issue with font scaling introduced in 3.0.0-alpha.6 ([#1173](https://github.com/sub6resources/flutter_html/issues/1173)). ([c75e0dfb](https://github.com/sub6resources/flutter_html/commit/c75e0dfb1be6cb79748f719487043d12bc330c60))
+ - **FIX**: Fix various issues with list rendering. ([520ff3c3](https://github.com/sub6resources/flutter_html/commit/520ff3c326d5dc8f5a601022c2a32d58e2e83cbb))
+ - **FIX**: Apply margins to <table> properly. ([7581ea79](https://github.com/sub6resources/flutter_html/commit/7581ea798744b2830affaaf75bbdff016b03f7af))
+ - **FIX**: Use enum instead of const int internally in length.dart. ([9dc7f08c](https://github.com/sub6resources/flutter_html/commit/9dc7f08ca238ff6a93314be5de716ad4e3baebb8))
+ - **FIX**: Change CSSBoxWidget to CssBoxWidget. ([a62449a7](https://github.com/sub6resources/flutter_html/commit/a62449a77c18701a0faf8ffd650f9c535b2d006c))
+ - **FEAT**: Support mmultiscripts. ([#1175](https://github.com/sub6resources/flutter_html/issues/1175)). ([a999a300](https://github.com/sub6resources/flutter_html/commit/a999a30027eff0aabb2825ffdbe383f9affab7f6))
+ - **FEAT**: Support mfenced. ([#1174](https://github.com/sub6resources/flutter_html/issues/1174)). ([9ca23084](https://github.com/sub6resources/flutter_html/commit/9ca230848beb15332f96294083ed4989831130d7))
+ - **FEAT**: Upgrade list-style-type to CSS3. ([deb726ae](https://github.com/sub6resources/flutter_html/commit/deb726ae2776f45305026c0aa081d4a5b5a1c71d))
+ - **FEAT**: Support mtable, mtd, mtr for draw matrix. ([#1164](https://github.com/sub6resources/flutter_html/issues/1164)). ([e99e2cc1](https://github.com/sub6resources/flutter_html/commit/e99e2cc1553ab17b4ceff08f784e99283b28dff4))
+
 ## 3.0.0-alpha.6 - *September 2022*
 
  - **FIX** #731 Resolve newline `<br>` issue

example/lib/main.dart

@@ -76,18 +76,18 @@ const htmlData = r"""
       </p>
       <table>
       <colgroup>
-        <col width="50%" />
-        <col span="2" width="25%" />
+        <col width="200" />
+        <col span="2" width="150" />
       </colgroup>
       <thead>
       <tr><th>One</th><th>Two</th><th>Three</th></tr>
       </thead>
       <tbody>
       <tr>
-        <td rowspan='2'>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan</td><td>Data</td><td>Data</td>
+        <td rowspan='2'>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan<br>Rowspan</td><td>Data</td><td>Data</td>
       </tr>
       <tr>
-        <td colspan="2"><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></td>
+        <td colspan="2"><img width="175" alt='xkcd' src='https://imgs.xkcd.com/comics/commemorative_plaque.png' /></td>
       </tr>
       </tbody>
       <tfoot>
@@ -135,7 +135,7 @@ const htmlData = r"""
       </p>
       <h3>Image support:</h3>
       <h3>Network png</h3>
-      <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
+      <img width="200" alt='xkcd' src='https://imgs.xkcd.com/comics/commemorative_plaque.png' />
       <h3>Network svg</h3>
       <img src='https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/android.svg' />
       <h3>Local asset png</h3>
@@ -154,7 +154,7 @@ const htmlData = r"""
       <img alt='No source' />
       <img alt='Empty source' src='' />
       <h3>Broken network image</h3>
-      <img alt='Broken image' src='https://www.notgoogle.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
+      <img alt='Broken image' src='https://www.example.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
       <h3>MathML Support:</h3>
       <math>
       <mrow>
@@ -203,7 +203,7 @@ const htmlData = r"""
           <mn>2</mn>
        </msup>
         <mo>&sdot;</mo>
-        <mi>&dd;</mi><mi>x</mi>
+        <mi>d</mi><mi>x</mi>
         <mo>=</mo>
         <mo>[</mo>
         <mfrac>
@@ -232,6 +232,7 @@ const htmlData = r"""
           <mi>3</mi>
        </mfrac>
       </math>
+      <br />
       <math>
         <msup>
           <mo>sin</mo>
@@ -280,90 +281,68 @@ class MyHomePageState extends State<MyHomePage> {
             "table": Style(
               backgroundColor: const Color.fromARGB(0x50, 0xee, 0xee, 0xee),
             ),
-            "tr": Style(
-              border: const Border(bottom: BorderSide(color: Colors.grey)),
-            ),
             "th": Style(
               padding: const EdgeInsets.all(6),
               backgroundColor: Colors.grey,
             ),
             "td": Style(
               padding: const EdgeInsets.all(6),
-              alignment: Alignment.topLeft,
+              border: const Border(bottom: BorderSide(color: Colors.grey)),
             ),
             'h5': Style(maxLines: 2, textOverflow: TextOverflow.ellipsis),
-          },
-          tagsList: Html.tags..addAll(['tex', 'bird', 'flutter']),
-          customRenders: {
-            tagMatcher("tex"): CustomRender.widget(
-                widget: (context, buildChildren) => Math.tex(
-                      context.tree.element?.innerHtml ?? '',
-                      mathStyle: MathStyle.display,
-                      textStyle: context.style.generateTextStyle(),
-                      onErrorFallback: (FlutterMathException e) {
-                        return Text(e.message);
-                      },
-                    )),
-            tagMatcher("bird"): CustomRender.inlineSpan(
-                inlineSpan: (context, buildChildren) =>
-                    const TextSpan(text: "🐦")),
-            tagMatcher("flutter"): CustomRender.widget(
-                widget: (context, buildChildren) => FlutterLogo(
-                      style: (context.tree.element!.attributes['horizontal'] !=
-                              null)
-                          ? FlutterLogoStyle.horizontal
-                          : FlutterLogoStyle.markOnly,
-                      textColor: context.style.color!,
-                      size: context.style.fontSize!.value * 5,
-                    )),
-            tagMatcher("table"): CustomRender.widget(
-                widget: (context, buildChildren) => SingleChildScrollView(
-                      scrollDirection: Axis.horizontal,
-                      child: tableRender
-                          .call()
-                          .widget!
-                          .call(context, buildChildren),
-                    )),
-            audioMatcher(): audioRender(),
-            iframeMatcher(): iframeRender(),
-            mathMatcher():
-                mathRender(onMathError: (error, exception, exceptionWithType) {
-              debugPrint(exception);
-              return Text(exception);
-            }),
-            svgTagMatcher(): svgTagRender(),
-            svgDataUriMatcher(): svgDataImageRender(),
-            svgAssetUriMatcher(): svgAssetImageRender(),
-            svgNetworkSourceMatcher(): svgNetworkImageRender(),
-            networkSourceMatcher(domains: ["flutter.dev"]):
-                CustomRender.widget(widget: (context, buildChildren) {
-              return const FlutterLogo(size: 36);
-            }),
-            networkSourceMatcher(domains: ["mydomain.com"]): networkImageRender(
-              headers: {"Custom-Header": "some-value"},
-              altWidget: (alt) => Text(alt ?? ""),
-              loadingWidget: () => const Text("Loading..."),
+            'flutter': Style(
+              display: Display.block,
+              fontSize: FontSize(5, Unit.em),
             ),
-            // On relative paths starting with /wiki, prefix with a base url
-            (context) =>
-                context.tree.element?.attributes["src"] != null &&
-                context.tree.element!.attributes["src"]!
-                    .startsWith("/wiki"): networkImageRender(
-                mapUrl: (url) => "https://upload.wikimedia.org${url!}"),
-            // Custom placeholder image for broken links
-            networkSourceMatcher():
-                networkImageRender(altWidget: (_) => const FlutterLogo()),
-            videoMatcher(): videoRender(),
           },
-          onLinkTap: (url, _, __, ___) {
+          extensions: [
+            TagExtension(
+              tagsToExtend: {"tex"},
+              builder: (context) => Math.tex(
+                context.innerHtml,
+                mathStyle: MathStyle.display,
+                textStyle: context.styledElement?.style.generateTextStyle(),
+                onErrorFallback: (FlutterMathException e) {
+                  return Text(e.message);
+                },
+              ),
+            ),
+            TagExtension.inline(
+              tagsToExtend: {"bird"},
+              child: const TextSpan(text: "🐦"),
+            ),
+            TagExtension(
+              tagsToExtend: {"flutter"},
+              builder: (context) => FlutterLogo(
+                style: context.attributes['horizontal'] != null
+                    ? FlutterLogoStyle.horizontal
+                    : FlutterLogoStyle.markOnly,
+                textColor: context.styledElement!.style.color!,
+                size: context.styledElement!.style.fontSize!.value,
+              ),
+            ),
+            ImageExtension(
+              handleAssetImages: false,
+              handleDataImages: false,
+              networkDomains: {"flutter.dev"},
+              child: const FlutterLogo(size: 36),
+            ),
+            ImageExtension(
+              handleAssetImages: false,
+              handleDataImages: false,
+              networkDomains: {"mydomain.com"},
+              networkHeaders: {"Custom-Header": "some-value"},
+            ),
+            const MathHtmlExtension(),
+            const AudioHtmlExtension(),
+            const VideoHtmlExtension(),
+            const IframeHtmlExtension(),
+            const TableHtmlExtension(),
+            const SvgHtmlExtension(),
+          ],
+          onLinkTap: (url, _, __) {
             debugPrint("Opening $url...");
           },
-          onImageTap: (src, _, __, ___) {
-            debugPrint(src);
-          },
-          onImageError: (exception, stackTrace) {
-            debugPrint(exception.toString());
-          },
           onCssParseError: (css, messages) {
             debugPrint("css that errored: $css");
             debugPrint("error messages:");
@@ -377,12 +356,3 @@ class MyHomePageState extends State<MyHomePage> {
     );
   }
 }
-
-CustomRenderMatcher texMatcher() =>
-    (context) => context.tree.element?.localName == 'tex';
-
-CustomRenderMatcher birdMatcher() =>
-    (context) => context.tree.element?.localName == 'bird';
-
-CustomRenderMatcher flutterMatcher() =>
-    (context) => context.tree.element?.localName == 'flutter';