fix: Hyperlink a text selection when pasting a valid URL

[rfgamaral]

Overview

This PR closes #423 with an implementation that does not require an upstream fix, one that increases the priority for our custom "paste extensions", making sure they are above the built-in Link extension. This will make sure that our handlers kick-in first, handling Markdown if and when appropriate. On top of that, it will check if the content being pasted is a valid URL, and if it is, let the built-in handlers do their thing (thus fixing #423).

This approach will fix most of our issues - but not all - with a more consistent and predicable approach, which will make it easier to debug other issues that we have or might end up having in the future.

Note
For the detection of valid URLs I'm using the linkifyjs library, something that Tiptap already uses internally, so we are not increasing the bundle. I'm just making it an explicit peer dependency, so that it can also be used in our products without dependency issues.

PR Checklist

• Pull request title follows the Conventional Commits Specification

Test plan

• Open the preview Storybook deployed to Netlify
• Open the Rich-text → Default story
• Type a simple Markdown link (i.e. [lorem ipsum](https://example.com)
  • Observe that the typed text is converted to a link
• Type a Markdown link with title (i.e. [dolor sit amet](https://example.com "EXAMPLE")
  • Observe that the typed text is converted to a link
  • Observe that hovering over the link a EXAMPLE tooltip will show
• Copy [maximus lobortis](https://example.com) and paste into the editor (with Ctrl/Cmd + Shift + V)
  • Observe that the pasted text is converted to a link
• Copy [aliquet mauris](https://example.com "EXAMPLE") and paste into the editor (with Ctrl/Cmd + Shift + V)
  • Observe that the pasted text is converted to a link
  • Observe that hovering over the link a EXAMPLE tooltip will show
• Type [pellentesque metus vitae](message://%3cMB4777@DM6PR05.example.com%3e) and paste into the editor (with Ctrl/Cmd + Shift + V)
  • Observe that the typed text is converted to a link
• Copy [interdum ultrices tortor](message://%3cMB4777@DM6PR05.example.com%3e) and paste into the editor (with Ctrl/Cmd + Shift + V)
  • Observe that the pasted text is converted to a link
• Type vehicula congue, make sure it's not hyperlinked, select that text, and paste a URL on the selection (try multiple URLs, like valid public ones, localhost ones, and simple ones like example.com)
  • Observe that the selected text was hyperlinked correctly

It should look something like this:

[netlify]

✅ Deploy Preview for doist-typist ready!

Name	Link
🔨 Latest commit	36785c3
🔍 Latest deploy log	https://app.netlify.com/sites/doist-typist/deploys/64fb08f3237f2400083a49e8
😎 Deploy Preview	https://deploy-preview-435--doist-typist.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[gnapse]

Type a Markdown link with title (i.e. [dolor sit amet](https://example.com "EXAMPLE")

Wow, I did not know about that syntax to add a title.

(with Ctrl/Cmd + Shift + V)

Pressing this key combination did not paste anything for me. I was using Safari on macOS, which is apparently related because I then tried in Chrome, and it worked. Is this a known issue that this feature is not supported in Safari?

I marked all the related test plan items as checked, because it worked in Chrome. But it did not work in Safari.

Type vehicula congue, make sure it's not hyperlinked, select that text, and paste a URL on the selection (try multiple URLs, like valid public ones, localhost ones, message:// ones, simple ones like example.com)

In this part of the test plan, it worked as expected, except when using the message:// url pattern.

CleanShot.2023-09-08.at.09.21.07.mp4

[rfgamaral]

Is this a known issue that this feature is not supported in Safari?

I honestly have no idea, maybe the Safari shortcuts are different:

Could you try those?

except when using the message:// url pattern.

Hum, well, I guess linkify does not detect these patterns as "valid URLs", based on the docs it seems that only works for URLs and e-mail addresses. We could probably rewrite the validation using find (with the validationoption) instead of test, but would be more complex to implement, and it's probably not worth it until we actually get a use case or an issue about this. I'll remove that message:// URL pattern from the test plan.

[gnapse]

Could you try those?

Option-Shift-Command-V worked

I'll remove that message:// URL pattern from the test plan.

With that removed, I can check the plan fully.

[rfgamaral]

Thank you for this review, @gnapse 👍

[doistbot]

🎉 This PR is included in version 1.4.12 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀