Merge pull request #499 from vrtdev/bugfix/link-wrapping

Fix inline rendering of (text) links
Sub6Resources · Jan 18, 2021 · e2a9933 · e2a9933
2 parents 5429f07 + c050862
commit e2a9933
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 24 deletions.
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -119,8 +119,9 @@ const htmlData = """
       </p>
       <h3>Image support:</h3>
       <p>
-        <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' />
-        <a href='https://google.com'><img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
+        <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /><br />
+        <a href='https://google.com'>A linked image: <img alt='Google' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png' /></a>
+        <img alt='Alt Text of an intentionally broken image' src='https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30d' />
       </p>
       <h3>Video support:</h3>
       <video controls>

diff --git a/lib/html_parser.dart b/lib/html_parser.dart
@@ -3,6 +3,7 @@ import 'dart:math';
 
 import 'package:csslib/parser.dart' as cssparser;
 import 'package:csslib/visitor.dart' as css;
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_html/flutter_html.dart';
 import 'package:flutter_html/src/css_parser.dart';
@@ -335,28 +336,39 @@ class HtmlParser extends StatelessWidget {
         );
       }
     } else if (tree is InteractableElement) {
-      return WidgetSpan(
-        child: RawGestureDetector(
-          gestures: {
-            MultipleTapGestureRecognizer: GestureRecognizerFactoryWithHandlers<
-                MultipleTapGestureRecognizer>(
-              () => MultipleTapGestureRecognizer(),
-              (instance) {
-                instance..onTap = () => onLinkTap?.call(tree.href);
-              },
-            ),
-          },
-          child: StyledText(
-            textSpan: TextSpan(
-              style: newContext.style.generateTextStyle(),
-              children: tree.children
-                      .map((tree) => parseTree(newContext, tree))
-                      .toList() ??
-                  [],
-            ),
-            style: newContext.style,
-          ),
-        ),
+      return TextSpan(
+        children: tree.children
+                .map((tree) => parseTree(newContext, tree))
+                .map((childSpan) {
+              if (childSpan is TextSpan) {
+                return TextSpan(
+                  text: childSpan.text,
+                  children: childSpan.children,
+                  style: (childSpan.style ?? TextStyle())
+                      .merge(newContext.style.generateTextStyle()),
+                  semanticsLabel: childSpan.semanticsLabel,
+                  recognizer: TapGestureRecognizer()
+                    ..onTap = () => onLinkTap?.call(tree.href),
+                );
+              } else {
+                return WidgetSpan(
+                  child: RawGestureDetector(
+                    gestures: {
+                      MultipleTapGestureRecognizer:
+                          GestureRecognizerFactoryWithHandlers<
+                              MultipleTapGestureRecognizer>(
+                        () => MultipleTapGestureRecognizer(),
+                        (instance) {
+                          instance..onTap = () => onLinkTap?.call(tree.href);
+                        },
+                      ),
+                    },
+                    child: (childSpan as WidgetSpan).child,
+                  ),
+                );
+              }
+            }).toList() ??
+            [],
       );
     } else if (tree is LayoutElement) {
       return WidgetSpan(