LinkedText (Linkify)

[justinmc]

On Android, you can use Linkify to turn URLs in some text into tappable links. Swift can also do this with its link property on NSAttributedString.

This PR attempts to bring this functionality to Flutter.

API

In order to avoid an explicitly dependency on url_launcher, the onTap handler is left up to the user. Otherwise, the API aims to handle the case of URLs by default as easily as possible, while also being as flexible as possible in non-default cases.

Urls (default)

LinkedText(
  text: 'Check out flutter.dev.',
  onTap: (String urlString) {
    Uri uri = Uri.parse(urlString);
    if (uri.host.isEmpty) {
      uri = Uri.parse('https://$uriString');
    }
    if (!await launchUrl(uri)) {
      throw 'Could not launch $urlString.';
    }
  },
)

Twitter handles

LinkedText(
  text: 'Check out @FlutterDev on Twitter for the latest.',
  regExp: RegExp(r'@[a-zA-Z0-9]{4,15}'),
  onTap: (String urlString) {
    final String handleWithoutAt = linkText.substring(1);
    Uri uri = Uri.parse('https://www.twitter.com/$handleWithoutAt');
    if (!await launchUrl(uri)) {
      throw 'Could not launch $uri.';
    }
  },
)

Both Urls and Twitter handles at the same time

LinkedText.textLinkers(
  text: text,
  textLinkers: <TextLinker>[
    TextLinker(
      rangesFinder: TextLinker.urlRangesFinder,
      linkBuilder: InlineLinkedText.getDefaultLinkBuilder(_onTapUrl),
    ),
    TextLinker(
      rangesFinder: TextLinker.rangesFinderFromRegExp(RegExp(r'@[a-zA-Z0-9]{4,15}')),
      linkBuilder: (String linkText) {
        return InlineLink(
          text: linkText,
          style: const TextStyle(
            color: Color(0xff00aaaa),
          ),
          onTap: _onTapTwitterHandle,
        );
      },
    ),
  ],
),

TextSpan trees

LinkedText.spans(
  onTap: _onTapUrl,
  children: <InlineSpan>[
    TextSpan(
      text: 'Check out fl',
      style: DefaultTextStyle.of(context).style,
      children: const <InlineSpan>[
        TextSpan(
          text: 'u',
          children: <InlineSpan>[
            TextSpan(
              style: TextStyle(
                fontWeight: FontWeight.w800,
              ),
              text: 'tt',
            ),
            TextSpan(
              text: 'er',
            ),
          ],
        ),
      ],
    ),
    const TextSpan(
      text: '.dev.',
    ),
  ],
),

Reference

Fixes #40505

[guidezpl]

Nice. I wonder if TextLink would be a better name, and more discoverable.

[justinmc]

@guidezpl Thank you, I was hoping a better name would come to me! I'll change it to TextLink.

[justinmc]

@guidezpl I went back and forth but I've currently got it named LinkedText. There is an inline version called InlineLinkedText. I'm still up for suggestions and might still change things around, though.

[Reprevise]

Here's a better RegEx to use as this allows users to have port numbers, paths, query params, and fragments in the URL.

Here are some URLs that match my updated RegEx:

http://example.com/
https://www.example.org/
ftp://subdomain.example.net
example.com
subdomain.example.io
www.example123.co.uk
http://example.com:8080/
https://www.example.com/path/to/resource
http://www.example.com/index.php?query=test#fragment
https://subdomain.example.io:8443/resource/file.html?search=query#result

And the RegEx itself:

((https?|ftp):\/\/)?(([a-zA-Z\-]*\.)?[a-zA-Z0-9\-]+)\.[a-zA-Z]+(?::\d{1,5})?(?:\/[^\s]*)?(?:\?[^\s#]*)?(?:#[^\s]*)?

[hahai96]

@Reprevise "example." return true with your Regex

[hahai96]

example.

[hahai96]

@justinmc Your regex also fails in this case

[Reprevise]

regex has been updated

[Reprevise]

Fine by me, though it does look weird seeing the ftp:// not highlighted but that will be the case for other protocols too so 🤷🏻

[justinmc]

Here's my attempt at fixing the "ftp://" thing:

(((https?:\/\/)(([a-zA-Z0-9\-]*\.)*[a-zA-Z0-9\-]+(\.[a-zA-Z]+)+))|((?<!\/|\.|[a-zA-Z0-9\-])((([a-zA-Z0-9\-]*\.)*[a-zA-Z0-9\-]+(\.[a-zA-Z]+)+))))(?::\d{1,5})?(?:\/[^\s]*)?(?:\?[^\s#]*)?(?:#[^\s]*)?

Now any URL with a scheme that isn't http or https won't be highlighted at all:

I had to duplicate part of the regex, so if anyone knows a better way to express that let me know.

My list of test URLs

'www.example123.co.uk\nasdf://subdomain.example.net\nsubdomain.example.net\nftp.subdomain.example.net\nhttp://subdomain.example.net\nhttps://subdomain.example.net\nhttp://example.com/\nhttps://www.example.org/\nftp://subdomain.example.net\nexample.com\nsubdomain.example.io\nwww.example123.co.uk\nhttp://example.com:8080/\nhttps://www.example.com/path/to/resource\nhttp://www.example.com/index.php?query=test#fragment\nhttps://subdomain.example.io:8443/resource/file.html?search=query#result\n"example.com"\n\'example.com\'\n(example.com)\nsubsub.www.example.com\nhttps://subsub.www.example.com'

[Reprevise]

Hey @justinmc, here's a simpler regex that maintains the functionality:

(?<![\/\.a-zA-Z0-9-])((https?:\/\/)?(([a-zA-Z0-9-]*\.)*[a-zA-Z0-9-]+(\.[a-zA-Z]+)+))(?::\d{1,5})?(?:\/[^\s]*)?(?:\?[^\s#]*)?(?:#[^\s]*)?

It also matches your list exactly.

[justinmc]

Thank you! Just added it and it works perfectly. Sorry I've been working on supporting TextSpans so I missed this for a while.

[justinmc]

I tweaked the regex again. Now it explicitly ignores email addresses.

My list of test URLs

'www.example123.co.uk\nasdf://subdomain.example.net\nsubdomain.example.net\nftp.subdomain.example.net\nhttp://subdomain.example.net\nhttps://subdomain.example.net\nhttp://example.com/\nhttps://www.example.org/\nftp://subdomain.example.net\nexample.com\nsubdomain.example.io\nwww.example123.co.uk\nhttp://example.com:8080/\nhttps://www.example.com/path/to/resource\nhttp://www.example.com/index.php?query=test#fragment\nhttps://subdomain.example.io:8443/resource/file.html?search=query#result\n"example.com"\n\'example.com\'\n(example.com)\nsubsub.www.example.com\nhttps://subsub.www.example.com\nexample@example.com\nexample.com@example.com'

[guidezpl]

@guidezpl I went back and forth but I've currently got it named LinkedText. There is an inline version called InlineLinkedText. I'm still up for suggestions and might still change things around, though.

Ah I see now how this works on the entire text, that makes sense.

[chunhtai]

should we also support textspan as input?

[justinmc]

I think you're right and it should. People are going to have existing span trees in which they want to highlight links. I'm going to think about that.

[justinmc]

Instead of just textit's now possible to passspans` instead 👍 .

[chunhtai]

Just some concerns around text linker API, the other part LGTM

[chunhtai]

I'm imagining looking up matches in a large Map or some data structure

Even so the regex should be enough?

Is supporting linking without a regex part of the use cases we want to support, it seems to me at that point what we are doing is helping people parse textspan into a smaller pieces given a text range. but the return data (displayString and linkString) does not seem useful....

[chunhtai]

LGTM

[justinmc]

I don't think anything actually failed in the Google tests, but I've rerun them just in case.

[Hixie]

I'm concerned that this PR makes it easier to make links but does not make them work on web, where links are most common and where not matching the platform is the most disruptive and where we have a solution for making links that have high fidelity with the core platform.

Would it make sense to make this a package instead? It does seem like functionality that does not need to be in the core framework, and our general policy is that we should put things in packages if possible. In particular, would it make sense to put this in url_launcher?

[justinmc]

This works on web just like any other platform, unless I'm missing something. Is the concern with the need to use url_launcher?

Using LinkedText like this:

import 'package:url_launcher/url_launcher.dart';

...

LinkedText(
  text: 'example.com',
  onTapUri: (Uri uri) async {
    if (!await launchUrl(uri)) {
      throw 'Could not launch $uri';
    }
  },
),

What is the existing high fidelity solution? I assumed that people were using things like TextSpan.recognizer + url_launcher (see StackOverflow). Using TextSpan.recognizer is tricky due to needing to manually manage a TapGestureRecognizer.

My concern with putting this inside of url_launcher is that devs might want to do something other than launch a URL when tapped. Maybe do something in-app when a user taps on a username or something like that? I'm just guessing though.

I would definitely be down to move this to its own package if you think that's best.

[Hixie]

if i right click on the link, do i get the browser's menu?

[justinmc]

Yes, but no link options like "Open link in new tab". Do you know if we have a way to do that on the web now? Maybe this is a good opportunity to automatically wire that up for people if it's possible.

[Hixie]

I believe the Link widget in url_opener does that. cc @yjbanov

Having it in url_opener wouldn't require that the developer use it to open a URL, it could still allow a callback. The idea would just be to default to the "right thing" for links.

[LongCatIsLooong]

(It looks like there's an ongoing discussion here and on discord. Please let me know when the PR is ready to reland and I'll get the g3fix CL ready).

[justinmc]

Ah I see (Link docs). LinkedText does seem to work with Link on web and the other platforms (example below), but I would have to rethink this as part of url_launcher to make that super slick by default.

LinkedText + Link example

LinkedText.textLinkers(
  text: 'Hello https://www.example.com world.', // spans seem to work too.
  textLinkers: <TextLinker>[
    TextLinker(
      regExp: LinkedText.defaultUriRegExp,
      linkBuilder: (String displayString, String linkString) {
        return WidgetSpan(
          child: Link(
            uri: Uri.parse(linkString),
            builder: (BuildContext context, FollowLink? followLink) {
              return Text.rich(
                TextSpan(
                  style: const TextStyle(color: Colors.blue),
                  text: displayString,
                  // Omitting lifecycle management for this recognizer for brevity.
                  recognizer: TapGestureRecognizer()..onTap = followLink,
                ),
              );
            },
          ),
        );
      },
    ),
  ],
),

If that's the best option here then I'll probably have to revisit this in January when I return from leave.