Port over linkifyJS to shared-components.#32731
Merged
Conversation
8 tasks
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Half-Shot
commented
Mar 5, 2026
5 tasks
florianduros
requested changes
Mar 11, 2026
Comment on lines
+131
to
+150
| // Register plugins | ||
| linkifyjs.registerPlugin(LinkifyMatrixOpaqueIdType.RoomAlias, ({ scanner, parser }) => { | ||
| const token = scanner.tokens.POUND as "#"; | ||
| matrixOpaqueIdLinkifyParser({ | ||
| scanner, | ||
| parser, | ||
| token, | ||
| name: LinkifyMatrixOpaqueIdType.RoomAlias, | ||
| }); | ||
| }); | ||
|
|
||
| linkifyjs.registerPlugin(LinkifyMatrixOpaqueIdType.UserId, ({ scanner, parser }) => { | ||
| const token = scanner.tokens.AT as "@"; | ||
| matrixOpaqueIdLinkifyParser({ | ||
| scanner, | ||
| parser, | ||
| token, | ||
| name: LinkifyMatrixOpaqueIdType.UserId, | ||
| }); | ||
| }); |
Member
There was a problem hiding this comment.
Should we avoid to automatically add plugin when the file is loaded?
Member
Author
There was a problem hiding this comment.
This matches prior behaviour with Element Web, and because linkifyjs can only exist as a single global instance we need to load these plugins prior to usage. What i've done instead is ensure we load the plugins once, and put a comment explaining why.
In the future, I'd like to burn linkifyjs away with fire and find a better solution.
Member
Author
There was a problem hiding this comment.
packages/shared-components/src/utils/LinkedText/LinkedText.stories.tsx
Outdated
Show resolved
Hide resolved
florianduros
approved these changes
Mar 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Partially completes #32689
Split out from #32525
Playwright test coverage is weak so added #32737
This change moves the global instance of "linkifyjs" to shared-components, along with it's string/html/react variants. The rationale for doing so is we want there to be a single canonical instance of this library to reduce any flakiness or cross contamination. I also had a brief look but I couldn't see a better library that would allow us to do this with less yuck.
Background
The URL Previews MVVM PR (#32525) requires URL previews to be linkified, but unfortunately the Linkify component is absolutely encrusted with lots of app-specific functionality and would take some time to unpack. This PR takes as much common logic as it can and moves it to shared-compoents.
Implementation
shared-components contains and wraps everything linkifyjs, including resolving our custom Room Alias and User ID types and defining any protocols we want to support. Both the linkifyString|linkifyHTML functions and component exist at this level.
element-web contains the logic to map these types into actions, so resolving permalinks and dispatching actions depending on the link found. This now lives entirely within
Linkify.tsx. TheElementLinkedTextcomponent exposes<LinkedText/>but with the enhancements added on top.Remaining work
<LinkedText>is not a drop-in replacement yet as it doesn't do any of the advanced replacement work that<ElementLinkedText>does. This could easily come as an update where we might expose a view model or some other way of directing the app, but there would be even more code to port. For the time being I'm satisfied the presents an improvement to the status quo and it can be finished off at a later date.