feat(web): automatic links by pkaramon · Pull Request #598 · software-mansion/react-native-enriched-html

pkaramon · 2026-05-11T08:27:59Z

Summary

implemented automatic links on web
handled linkRegex prop
wrote e2e tests for automatic links
refactored useOnLinkDetected so it uses a shared LinkEmitter with autolink plugin, because we want to emit an event when an automatic link is created, but we also do no want to send the same event twice.
this PR doesn't use automatic link functionality from Link extensions from Tiptap, as it doesn't allow passing any regex, and it also struggles with extending automatic links on the right. I've implemented a custom plugin that looks at changed rages and research using a regex for texts where we should applied the automatic link mark.

Test Plan

Run yarn test:e2e:web to see if all the tests pass
Run yarn example-web dev and play around with automatic links, change LINK_REGEX in apps/example-web/App.tsx

Screenshots / Videos

Compatibility

OS	Implemented
iOS	❌
Android	❌
Web	✅

Checklist

E2E tests are passing
Required E2E tests have been added (if applicable)

- Add experimental web platform note; EnrichedText is iOS/Android only for now - Replace all "Both" platform cells with explicit iOS/Android/Web labels - cursorColor: Android, Web only (iOS uses selectionColor for cursor color) - useHtmlNormalizer: iOS, Android only — ignored on web - contextMenuItems: iOS, Android only — not available on web - linkRegex: update default value label to "platform default regex" - onPasteImages: add web note about blob URLs and URL.revokeObjectURL() - Add onSubmitEditing, returnKeyLabel, returnKeyType, submitBehavior props - returnKeyLabel: iOS/Android only — browsers don't allow customizing return key label - returnKeyType: web supports only enterkeyhint-compatible values - Add Keyboard Shortcuts (Web only) section with full shortcut table Assumes PRs #600 (submit props), #598 (automatic links), #584 (image paste), #603 (shortcuts) will be merged. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

kacperzolkiewski

When we type swmansion.com, in HTML I can see that https:// is automatically added to the href. Is this the intended behavior?

Screen.Recording.2026-05-26.at.09.02.49.mov

kacperzolkiewski · 2026-05-26T07:43:43Z

When we paste text containing a link, it is treated as a manually added link, which allows inserting new lines inside it:

Screen.Recording.2026-05-26.at.09.42.49.mov

hejsztynx · 2026-06-10T16:28:03Z

When we type swmansion.com, in HTML I can see that https:// is automatically added to the href. Is this the intended behavior?

Screen.Recording.2026-05-26.at.09.02.49.mov

removed automatic https prefix addition

hejsztynx · 2026-06-10T16:29:42Z

When we paste text containing a link, it is treated as a manually added link, which allows inserting new lines inside it:

Screen.Recording.2026-05-26.at.09.42.49.mov

now it checks if href equals to the text value of the html node - if so, we treat it as an autolink, just like in the native

kacperzolkiewski

Works good!

…tolink

exploIF · 2026-06-11T15:15:22Z

It looks to me like linkRegex prop is not working properly. Whenever I paste some valid URL, it is recognized as a link, even if I pass linkRegex={null}

Copilot

Pull request overview

This PR adds automatic link detection for the web EnrichedTextInput by introducing a custom ProseMirror/Tiptap plugin that applies link marks based on a configurable linkRegex, while sharing a single link-detection emitter to avoid duplicate onLinkDetected events.

Changes:

Added a custom AutolinkPlugin that scans edited blocks and applies/removes link marks based on a default URL regex or a provided linkRegex prop.
Refactored useOnLinkDetected to emit through a shared LinkEmitterState (emitLinkDetected) so autolink and selection-based detection dedupe properly.
Added/updated example UI + Playwright E2E coverage for autolink typing and paste flows, plus updated web docs.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
src/web/useOnLinkDetected.ts	Refactors link detection to use a shared emitter state and improved range detection at cursor boundaries.
src/web/pmPlugins/StripBoldInStyledHeadingsPlugin.ts	Types `Extension.create` options for the plugin configuration.
src/web/pmPlugins/AutolinkPlugin/index.ts	Adds the main autolink detection + mark application ProseMirror plugin.
src/web/pmPlugins/AutolinkPlugin/autolinkRegex.ts	Adds default URL matching + helper to globalize custom regex.
src/web/formats/EnrichedLink.ts	Adds an internal-only `auto` attribute to link marks.
src/web/EnrichedTextInput.tsx	Wires `linkRegex` + `AutolinkPlugin` + shared `LinkEmitterState` into the editor.
src/web/emitLinkDetected.ts	Introduces shared emitter state + dedupe logic for link-detected events.
docs/WEB.md	Documents automatic link detection as supported on web.
apps/example-web/src/testScreens/TestLinks.tsx	Adds controls for testing default/disabled/custom `linkRegex` modes.
apps/example-web/src/App.tsx	Demonstrates passing a `LINK_REGEX` prop on web example app.
.playwright/tests/links.spec.ts	Adds E2E tests for autolink while typing and pasting, and for disabling autolink.
.playwright/playwright.config.ts	Enables clipboard permissions needed for paste tests.
.playwright/helpers/clipboard.ts	Adds helper to dispatch a plain-text paste event into the editor.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

…anges Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

exploIF · 2026-06-18T15:21:39Z

Functionally works well, however there are failing e2e tests:

[chromium] › .playwright/tests/codeblockInlineStyles.spec.ts:60:7 › codeblock inline styles › paste into code block strips copied inline styles 
[chromium] › .playwright/tests/headingBoldFromStyle.spec.ts:45:7 › h1 bold from htmlStyle (h1.bold true) › paste into h1 strips copied bold mark 
[chromium] › .playwright/tests/headingBoldFromStyle.spec.ts:100:7 › h1 bold from htmlStyle (h1.bold false) › paste into h1 keeps copied bold mark when htmlStyle h1.bold is false

pkaramon changed the title ~~feat(web): autolink~~ feat(web): automatic links May 13, 2026

pkaramon requested review from exploIF and kacperzolkiewski May 13, 2026 17:11

pkaramon marked this pull request as ready for review May 13, 2026 17:11

pkaramon mentioned this pull request May 14, 2026

docs: update INPUT_API_REFERENCE for web platform support #604

Closed

pkaramon mentioned this pull request May 14, 2026

docs: updated INPUT_API_REFERENCE.md to acknowledge web #605

Merged

kacperzolkiewski reviewed May 26, 2026

View reviewed changes

pkaramon and others added 12 commits June 10, 2026 15:35

feat(web): autolinks base implementation

85029c0

fix: fixed bugs around edges and link detection

a8db549

fix: ref null potential issue

4a3875f

docs: checkpoint autolink e2e plan

b33599b

test: added tests

3d3d919

chore: remove useless .md file

f66ccd3

chore: tiny fixes

5a0afc2

fix: remove not needed stripAutolinkMarksOnPaste

15cf741

fix: auto https prefix in links

415c2e5

refactor: consistent autolink plugin creation

03cff9b

refactor: typed plugin options

8431bd6

fix: clearing link event

39080f7

hejsztynx force-pushed the @pkaramon/feat-web-autolink branch from 208c368 to 39080f7 Compare June 10, 2026 16:25

kacperzolkiewski reviewed Jun 11, 2026

View reviewed changes

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts Outdated

kacperzolkiewski approved these changes Jun 11, 2026

View reviewed changes

hejsztynx and others added 2 commits June 11, 2026 10:57

refactor: dead code

aa091a8

Merge remote-tracking branch 'origin/main' into @pkaramon/feat-web-au…

ae28c8f

…tolink

exploIF requested changes Jun 11, 2026

View reviewed changes

Comment thread apps/example-web/src/testScreens/TestLinks.tsx Outdated

Comment thread src/web/pmPlugins/AutolinkPlugin/autolinkRegex.ts Outdated

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts

exploIF requested a review from Copilot June 11, 2026 15:45

Copilot started reviewing on behalf of exploIF June 11, 2026 15:45 View session

Copilot AI reviewed Jun 11, 2026

View reviewed changes

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts Outdated

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts

Comment thread src/web/useOnLinkDetected.ts

Comment thread src/web/formats/EnrichedLink.ts

hejsztynx added 4 commits June 12, 2026 12:58

refactor: autlink plugin cleanup

6ce5c3a

fix: manual links disappear when they dont match the linkRegex

f83c8f2

fix: tiptap internal link detection on paste

8e1b476

fix: onLinkDetect event recalls

ba40ae5

hejsztynx requested a review from Copilot June 12, 2026 14:56

Copilot started reviewing on behalf of hejsztynx June 12, 2026 14:57 View session

Copilot AI reviewed Jun 12, 2026

View reviewed changes

Comment thread src/web/emitLinkDetected.ts

Comment thread src/web/pmPlugins/AutolinkPlugin/autolinkRegex.ts Outdated

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts Outdated

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts

Comment thread src/web/pmPlugins/AutolinkPlugin/index.ts

hejsztynx and others added 2 commits June 12, 2026 17:35

fix: unnecessary autolink plugin transaction run on only selection ch…

c3cde91

…anges Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

fix: short default regex for TLDs

2668e07

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

hejsztynx requested a review from exploIF June 12, 2026 15:41

hejsztynx added 3 commits June 12, 2026 20:07

feat: cleanup of unneccesary data-auto=false

e354b6f

feat: dropped data-auto attribute

0492efc

feat: internal tiptap link regex overwritten

ebceba8

hejsztynx and others added 3 commits June 18, 2026 21:12

test: fix e2e tests

ed676ce

Merge branch 'main' into @pkaramon/feat-web-autolink

a3d2727

refactor: lint cleanup

23dd676

Conversation

pkaramon commented May 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test Plan

Screenshots / Videos

Compatibility

Checklist

Uh oh!

kacperzolkiewski left a comment

Choose a reason for hiding this comment

Uh oh!

kacperzolkiewski commented May 26, 2026

Uh oh!

hejsztynx commented Jun 10, 2026

Uh oh!

hejsztynx commented Jun 10, 2026

Uh oh!

Uh oh!

kacperzolkiewski left a comment

Choose a reason for hiding this comment

Uh oh!

exploIF commented Jun 11, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

exploIF commented Jun 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

pkaramon commented May 11, 2026 •

edited

Loading