[FEATURE] Make all <a> tag clickable or fix alignment of extensions

[EArminjon]

Describe your feature request

I want to know when a user tap on a tag even if the href is is empty or missing. By default, Html() make a tag not clickable when href is missing so i need to provide a custom extension.

Html(
  text: "Ship to: <a>75017</a> <a>PARIS</a>",
  extensions: <HtmlExtension>[
    TagWrapExtension(
      tagsToWrap: <String>{'a'},
      builder: (Widget child) {
        return GestureDetector(
          onTap: () {
            print('onTap');
          },
          child: child,
        );
      },
    ),
   ],
  'a': Style.fromTextStyle(
    context.texts.linkPrimary.copyWith(
      color: Color(0xFF2E4EAA),
    ), 
  ).copyWith(
    margin: Margins.zero,
    textDecoration: TextDecoration.none,
  ),
)

If i run this code this will display :

Instead of :

To bypass this issue, i used the bellow code, but that require an unsexy import and for more complexe scenario i will maybe be blocked later. :

// ignore: implementation_imports
import 'package:flutter_html/src/builtins/interactive_element_builtin.dart';

class InteractiveElementOverride extends InteractiveElementBuiltIn {
  const InteractiveElementOverride();

  @override
  bool matches(ExtensionContext context) =>
      supportedTags.contains(context.elementName);
}
/// ...
extensions: <HtmlExtension>[
  InteractiveElementOverride(),
],
/// ...

Additional context

flutter_html: 3.0.0-beta.2

[Sub6Resources]

I added the verticalAlign property in 3.0.0 - does using baseline or middle for this fix your issue?

[FoxHere]

Hi

In my case it is causing a overflow issue when links are in table cell:

I´m not using any widget for test and yet it extends the link itself inside the table cell:

final List<HtmlExtension> htmlExtensions = [
    const TableHtmlExtension(),

    TagWrapExtension(
      tagsToWrap: {'a'},
      builder: (child) {
        return child;
      },
    ),
  ];

Here is how it should be displayed:

I just need this TagWrapExtension, because mouse icon doesn´t change to pointer

In my html render I´m using the following code:

Html(
  data: widget.legislativeDescription,
  style: widget.htmlStyle,
  extensions: widget.htmlExtensions,
  onLinkTap: (url, _, __) async {
    if (url != null && await canLaunchUrl(Uri.parse(url))) {
      await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
    }
  },
),

[Sub6Resources]

@FoxHere yours is a slightly different issue related to text wrapping inside extensions, and particularly link text wrapping. I've moved your comment to a new issue #1471