[FEATURE] Support oembed links

[dJani97]

Describe your feature request

Hey!

Our API returns embedded links in the following format:

<p>There should be a YouTube video link below this</p>
<figure class="media">
   <oembed url="https://youtu.be/4FGnb2lgPBA"></oembed>
</figure> 

The current version of flutter_html simply ignores those lines and only displays the <p> tag.

Can you please give a hint on how I could parse that oembed URL into a working link with this plugin?

Since it could be anything (not only YT videos), my intention is to simply display it as a regular link:

<a href="https://youtu.be/4FGnb2lgPBA">https://youtu.be/4FGnb2lgPBA</a>

A picture of a cute animal (not mandatory but encouraged)

[tneotia]

You can make a customrender for the oembed tag and just render a link element with the inner contents. I recommend checking out the README which has a few examples for customrender to get a better idea.

[erickok]

Please let us know if this is an open issue still. We can provide concrete examples.

For this concrete example:

Html(
  data: r"""
    <p>There should be a YouTube video link below this</p>
    <figure class="media">
       <oembed url="https://youtu.be/4FGnb2lgPBA"></oembed>
    </figure>""",
  tagsList: Html.tags..addAll(["figure", "oembed"]),
  customRender: {
    "figure": (context, child) {
      final url = context.tree.element!.children.first.attributes["url"]!;
      return ElevatedButton(
        onPressed: () {
          // Do something with the url
        },
        child: Text(url),
      );
    },
  },
)

Which renders as:

[dJani97]

Thank you for the example, it does solve my issue, although I have to use SelectableHtml which does not support customRender yet.

Is there any way for me to use some kind of pre-release version which includes this PR?

The app I'm working on will be released soon, and it would be nice to have this feature included.

[tneotia]

You could use a git dependency on my fork of the repo with that branch as the reference. However, since you use SelectableHtml, you cannot add "widgets" like buttons due to a limitation in Flutter.

This limitation has been fixed on the dev branch if I remember correctly, but since it hasn't hit Flutter stable yet, I haven't added the capability for users to use a WidgetSpan inside the customRender.

Thus, if you want to support oembed inside SelectableHtml, you will need to use a TextSpan with the customRender PR, so that limits you to only showing the URL text and maybe styling it to look like a hyperlink, then add the TapGestureRecognizer to the TextSpan and you can make the link open in a 3rd party application.