Automatically add a link card for URLs in the composer

[haileyok]

Why

Because it's easy to forget to add a link card whenever you mean to, we should instead add them as soon as they are typed or pasted into the composer. This mimics the behavior of other apps such as Threads or Twitter.

How

We want to add a link card in the following situations:

• As soon as a link gets pasted. We should feel confident that the user has pasted a full and correct link into the composer, and we shouldn't need to wait for them to press space.
• As soon as the user presses space after entering a URL. We don't want to make a bunch of requests for every character of a URL as it gets typed out.

Things to note

• On iOS, if we paste a link into the middle of an existing block of text, it will insert a space after the pasted input. However, if it is at the end of the block of text, the extra space is not inserted. We need to account for that when figuring out the cursor position.
• We cannot simply use try { new URL(uri); return true; } catch (e) { return false } to determine if a link is valid, because something like https://facebook will be considered valid. Instead, we use a little (very big!) regex to determine the validity of a link.
• The TipTap editor keeps it's pos value for the cursor one ahead of what React Native keeps it at. In the web implementation, we just subtract 1 from the position to keep the rest of the logic the same.

Step One - Determine if it was a paste

This is pretty simple. We know that the text has been pasted if the new text is two or more characters greater than the previous text.

Step Two - Figure out if we want to add a link card yet

Given the logic above about cursor position, we can assume that the link is complete and we should attempt to add a link card if:

• The user has typed out the link and has pressed space
  • We can tell if this happens if the cursor location is one greater than the length of the URL's last position
• The user has pasted a link
  • We just use the wasPaste variable to detect this.

Step Three - Keep track of previously added URIs

If we add a URI and then remove it, we shouldn't add again if you paste it again. Keeping track of this also stops something like this from happening

• I paste in https://github.com/bluesky-social/social-app/issues/3561
• The link card is added, then I remove it
• I press space to start typing something
• I delete what I just typed and my cursor ends up at the end of the link
• I type something else

If we didn't keep track of previously added links, we'd end up re-adding this link.

With that said, we do want to be able to add back a link card if we remove the link card and the link from the text entirely. So, we clean up our set of URIs each time we update the rich text.

Step Four - Verify it is a good link

Simple regex check.

Step Five - Add the card

Call onNewLink(uri) and add the link to the previously added links.

Test Plan

Various test cases:

Paste Input

Don't add it again

But add it again if you completely remove it from the text

Don't add until finished typing

Even if you're adding a path

Remember not to add it back!

And of course, accept a different link if you have removed one, even if it's in the middle of the text

It's definitely possible I missed something here, so we should play with it and see if we run into any strange edge cases.

[github-actions]

Old size	New size	Diff
6.41 MB	6.41 MB	351 B (0.01%)

---

[gaearon]

what happens if i press Post while it's attaching?

[haileyok]

@gaearon It gives me this if I try to submit too early

- tested on both iOS and browser. Is that not happening for you?

[gaearon]

i think it should not ask me to wait, but should get into a "posting..." state and wait for it automatically

[haileyok]

yeah that should be fine. will add in a subsequent PR. going to check why you can't post just a link card on web as well.

one thing i noticed too during this was that threads will fall back to some other image on the page if there isn't an og:image tag available, might be something to look at on backend. we have a lot of cards without images on our network.

[surfdude29]

This fixes #2321 🙏

This comment in that issue raises a question: as things stand, would editing a URL automatically update the link card? Before generating the link card I also often edit URLs to remove gunk at the end.

[pfrazee]

Brilliant work @haileyok, it feels great. My one thing is, on iOS it was giving me a full "app crashed" error for links that dont have an image (https://example.com being one). Android and web seemed fine with it. Not sure what's going on there, so might want to double-check it.

[haileyok]

@pfrazee This has been a thing for a while I think. I don't get a crash on prod builds but definitely do on the dev client. Unsure why, I assume because file paths are different (the simulator somehow uses a local directory outside the simulator's environment). Checked on main and I see the same crash there right now. Weird.

[pfrazee]

Huh. Okay. Guess we don't need to prioritize it then.

[gaearon]

This is more like mayBePaste right? You could have multiple added characters for other reasons, like maybe accepting an autocomplete suggestion or an autofix.

[haileyok]

That's a good point. Let me verify that it doesn't actually matter (it shouldn't, since your cursor won't be next to the URL if you're doing an auto correct) 👍

[haileyok]

Oky, we are not relying on it being a paste, but going to update the wording to make it more clear here.

[gaearon]

yeah this feels great, one question above re: naming (i.e. do we rely on it being a paste, or are false positives ok)

[haileyok]

@surfdude29 That's something we can probably do, needs a bit of thinking on how to do it. Fwiw, all the requests go through CardyB so you're fine whenever you paste. Do need to just clear the gunk out then re-add though for the moment.