Add support for selectable text via SelectableText.rich #682

tneotia · 2021-05-16T22:31:24Z

Title.

Fixes #169.

Builds off work done in #679.

There are a few caveats due to Flutter #38474:

No support for customRender, customImageRender, onImageError, onImageTap, onMathError, and navigationDelegateForIframe. (Support for customRender may be added in the future - once the updated customRender changes are merged because then we can support CustomRender(textSpan: ...) or something similar).
You cannot whitelist tags, you must use blacklistedElements to remove any tags that shouldn't be rendered. This is to make sure unsupported tags are not accidentally whitelisted, causing errors in the widget code.
The list of tags that can be rendered is significantly reduced. Key omissions include no support for images/video/audio, table, and ul/ol because they all require widgets and WidgetSpans.
Styling support is significantly reduced. Only text-related styling works (e.g. bold or italic), while container related styling (e.g. borders or padding/margin) do not work because we can't use the ContainerSpan class (it needs an enclosing WidgetSpan).
Due to the above, the margins between elements no longer appear. As a result, the HTML content will not have proper spacing between elements like <h1>. The default margin for <body> is removed as well.

I think this PR will satisfy the majority of simple use-cases, but proper support can't happen until that linked issue is resolved.

lib/flutter_html.dart

erickok · 2021-05-17T07:57:32Z

If we were to add support for 'selectable html' I would most definitely do so as a separate widget, under its own name, and not as a named constructor to Html. Because it is so different and so limited, giving even an impression of the selectable variant to be on par with the default widget is opening up a storm of raised issues, I suspend. It would also be in line with the naming of Text.rich versus SelectableText.rich.

Also, are we sure a widget that can have selectable text but only cover basic text use-cases is enough to satisfy any of our users? Is it enough to warrant this feature right now, kwoing we also have to then maintain and support it?

tneotia · 2021-05-17T09:18:07Z

Also, are we sure a widget that can have selectable text but only cover basic text use-cases is enough to satisfy any of our users? Is it enough to warrant this feature right now, kwoing we also have to then maintain and support it?

My thinking is that it may not be enough but it's at least something. That flutter issue has been open for 2 years and there hasn't been any traction on it, so there's no telling when it will be fixed and thus allow full support with selectable content. Plus, the issue on this repo has the most upvotes and is the oldest feature request.

I do see the flip side though, where it's another thing to maintain that isn't as feature-rich and might bring about a slew of its own issues. I'll leave the decision up to you, if you think this is warranted then I can fix it up a bit to make it merge-ready or we can close this.

arianneorpilla · 2021-05-17T16:57:50Z

Hi, I coincidentally started working on a branch of my language learning application just a few hours ago to allow it to be used as an EPUB reader using the epub_view package, which uses this library as a dependency in order to render the HTML elements.

When I got it working, I found out the text could not be selected and it really got me down until I looked at the pull requests and found this one and got up to speed. I can select the text now! I am absolutely interested in this feature and will put it to good use, thank you for your work.

nandakav · 2021-05-18T10:19:11Z

I am waiting for this issue. Please fix it. A separate API is also fine. There is no selectable HTML widget in flutter. There is only one markdown widget but it has so many issues wherein * and _ gets dumped inadvertenly as the conversion from HTML to Markdown can have some bad after effects.
For example:
<strong>N</strong><strong>iranjana Das</strong> gets converted to **N****iranjana Das** which gets rendered as N****iranjana Das. The problem is that is the name of a person and it looks like we are beaping his name. I cant release my product with this and formatting the HTML'S is going to be a huge task as we have more than 10k content in our application.

We have an existing android app which gives this functionality so to disable it will also be uncool in a newer version due to this flutter issue.

tneotia · 2021-05-18T20:23:45Z

Because this PR has some traction I've gone ahead and added the SelectableHtml class like @erickok said and made sure to document the differences in the interface itself as @DFelten said.

README.md

lib/html_parser.dart

…into feature/selectable-text � Conflicts: � lib/flutter_html.dart

…into feature/selectable-text � Conflicts: � lib/html_parser.dart

amanokerim · 2021-06-01T06:11:05Z

Hurray!!! 🎉🎉🎉

All developer friend, who waited for this for a long time, we can import from master:

flutter_html:
    git:
      url: git://github.com/Sub6Resources/flutter_html.git
      ref: master

and, use this like:

SelectableHtml(
  data: menuButton.content ?? "",
  style: {
    "body": Style(
      margin: EdgeInsets.zero,
      color: Theme.of(context).primaryColor,
    ),
  },
  onLinkTap: (link, renderContext, map, element) async {
    if (link != null && link.isNotEmpty) {
      await launch(link);
    }
  },
)

THANK YOU SUPPORTERS OF THIS LIBRARY< WE LOVE YOU!!!

tneotia added 2 commits May 16, 2021 15:16

Add support for selectable text

0485db8

Update README

be3b38c

DFelten reviewed May 17, 2021

View reviewed changes

lib/flutter_html.dart Outdated Show resolved Hide resolved

API changes & improvements

bc1ed9d

erickok requested changes May 19, 2021

View reviewed changes

tneotia added 6 commits May 19, 2021 18:08

Fix nits and other minor code issues

056a9b3

Merge branch 'master' of https://github.com/Sub6Resources/flutter_html …

a3b7d98

…into feature/selectable-text � Conflicts: � lib/flutter_html.dart

Remove duplicate exports

7d9b367

Remove unnecessary ..addAll

42443ad

Merge branch 'master' of https://github.com/Sub6Resources/flutter_html …

cdcd018

…into feature/selectable-text � Conflicts: � lib/html_parser.dart

Merge changes with shrinkwrap fixes

fd26a16

erickok approved these changes May 31, 2021

View reviewed changes

erickok merged commit 8d2e91b into Sub6Resources:master May 31, 2021

jhass mentioned this pull request Jun 1, 2021

Feature parity between Html and SelectableHtml #717

Closed

praharshbhatt mentioned this pull request Jul 14, 2021

[BUG] onLinkTap is not called while using SingleChildScrollView #761

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add support for selectable text via SelectableText.rich #682

Add support for selectable text via SelectableText.rich #682

tneotia commented May 16, 2021 •

edited

Loading

erickok commented May 17, 2021

tneotia commented May 17, 2021

arianneorpilla commented May 17, 2021 •

edited

Loading

nandakav commented May 18, 2021 •

edited

Loading

tneotia commented May 18, 2021

amanokerim commented Jun 1, 2021

Add support for selectable text via SelectableText.rich #682

Add support for selectable text via SelectableText.rich #682

Conversation

tneotia commented May 16, 2021 • edited Loading

erickok commented May 17, 2021

tneotia commented May 17, 2021

arianneorpilla commented May 17, 2021 • edited Loading

nandakav commented May 18, 2021 • edited Loading

tneotia commented May 18, 2021

amanokerim commented Jun 1, 2021

tneotia commented May 16, 2021 •

edited

Loading

arianneorpilla commented May 17, 2021 •

edited

Loading

nandakav commented May 18, 2021 •

edited

Loading