Add link creation to rich text editor #9775

florianduros · 2022-12-15T14:21:56Z

Checklist

Tests written for new code (and old code if feasible)
Linter and other CI checks pass
Sign-off given on the changes (see CONTRIBUTING.md)

The scope of this PR is to support link creation in the RTE (only available in rich text mode). The link edition will be available in an other PR.

The link format is not checked
When text is selected, only the link field is available
The save button is enabled when all the fields are filled
I added a context to share the last selection of the RTE between all the RTE components
I have also fixed some missing act in the RTE tests.

Screen.Recording.2022-12-16.at.11.41.10.mov

Here's what your changelog entry will look like:

✨ Features

Add link creation to rich text editor (#9775). Contributed by @florianduros.

…-text-editor

florianduros · 2022-12-16T11:11:56Z

I just spotted one bug, I moving back the PR to draft.

weeman1337 · 2022-12-19T15:44:44Z

Quick feedback from testing on the deployment:

When starting the link dialog, it would be nice to have the first field focused
It would be also nice, if I can submit the dialog by pressing enter
Pressing enter again after creating the link opens the link creation again. Maybe the composer should place the cursor behind the link, so that I can go on typing my message.
~~Entering asd and asd in the dialog leads to an error: „unable to send message“~~ cannot reproduce any more 🤷‍♂️

Otherwise it works 👍

…-text-editor

weeman1337

Found some smaller issues / comments.

Otherwise code looks good 👍

res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss

src/components/views/rooms/wysiwyg_composer/components/LinkModal.tsx

test/components/views/rooms/wysiwyg_composer/components/LinkModal-test.tsx

florianduros · 2022-12-20T16:32:59Z

I have added auto focus for text field.

To make the focus work directly on the button, I should use a form but I can't use it in the QuestionDialog component.
The ScrollableBaseModal should be used here but it's an abstract class and I need to wrap in a new modal component. It means also add unit test suite for it.

I'll do it after the link creation and edition PR will be done.

The remaining selection behaviour will be done in the edition PR

…-text-editor

# Conflicts: # src/i18n/strings/en_EN.json

weeman1337

Looks good now. Tested on the deployment. Thanks for implementing the changes 👍

…-text-editor

@grimhilt

* Switch threads on for everyone ([\#9879](matrix-org/matrix-react-sdk#9879)). * Make threads use new Unable to Decrypt UI ([\#9876](matrix-org/matrix-react-sdk#9876)). Fixes element-hq/element-web#24060. * Add edit and remove actions to link in RTE ([\#9864](matrix-org/matrix-react-sdk#9864)). * Remove extensible events v1 experimental rendering ([\#9881](matrix-org/matrix-react-sdk#9881)). * Make create poll dialog scale better (PSG-929) ([\#9873](matrix-org/matrix-react-sdk#9873)). Fixes element-hq/element-web#21855. * Change RTE mode icons ([\#9861](matrix-org/matrix-react-sdk#9861)). * Device manager - prune client information events after remote sign out ([\#9874](matrix-org/matrix-react-sdk#9874)). * Check connection before starting broadcast ([\#9857](matrix-org/matrix-react-sdk#9857)). * Enable sent receipt for poll start events (PSG-962) ([\#9870](matrix-org/matrix-react-sdk#9870)). * Change clear notifications to have more readable copy ([\#9867](matrix-org/matrix-react-sdk#9867)). * Combine search results when the query is present in multiple successive messages ([\#9855](matrix-org/matrix-react-sdk#9855)). Fixes element-hq/element-web#3977. Contributed by @grimhilt. * Disable bubbles for broadcasts ([\#9860](matrix-org/matrix-react-sdk#9860)). Fixes element-hq/element-web#24140. * Enable reactions and replies for broadcasts ([\#9856](matrix-org/matrix-react-sdk#9856)). Fixes element-hq/element-web#24042. * Improve switching between rich and plain editing modes ([\#9776](matrix-org/matrix-react-sdk#9776)). * Redesign the picture-in-picture window ([\#9800](matrix-org/matrix-react-sdk#9800)). Fixes element-hq/element-web#23980. * User on-boarding tasks now appear in a static order. ([\#9799](matrix-org/matrix-react-sdk#9799)). Contributed by @GoodGuyMarco. * Device manager - contextual menus ([\#9832](matrix-org/matrix-react-sdk#9832)). * If listening a non-live broadcast and changing the room, the broadcast will be paused ([\#9825](matrix-org/matrix-react-sdk#9825)). Fixes element-hq/element-web#24078. * Consider own broadcasts from other device as a playback ([\#9821](matrix-org/matrix-react-sdk#9821)). Fixes element-hq/element-web#24068. * Add link creation to rich text editor ([\#9775](matrix-org/matrix-react-sdk#9775)). * Add mark as read option in room setting ([\#9798](matrix-org/matrix-react-sdk#9798)). Fixes element-hq/element-web#24053. * Device manager - current device design and copy tweaks ([\#9801](matrix-org/matrix-react-sdk#9801)). * Unify notifications panel event design ([\#9754](matrix-org/matrix-react-sdk#9754)). * Add actions for integration manager to send and read certain events ([\#9740](matrix-org/matrix-react-sdk#9740)). * Device manager - design tweaks ([\#9768](matrix-org/matrix-react-sdk#9768)). * Change room list sorting to activity and unread first by default ([\#9773](matrix-org/matrix-react-sdk#9773)). Fixes element-hq/element-web#24014. * Add a config flag to enable the rust crypto-sdk ([\#9759](matrix-org/matrix-react-sdk#9759)). * Improve decryption error UI by consolidating error messages and providing instructions when possible ([\#9544](matrix-org/matrix-react-sdk#9544)). Contributed by @duxovni. * Honor font settings in Element Call ([\#9751](matrix-org/matrix-react-sdk#9751)). Fixes element-hq/element-web#23661. * Device manager - use deleteAccountData to prune device manager client information events ([\#9734](matrix-org/matrix-react-sdk#9734)). * Display rooms & threads as unread (bold) if threads have unread messages. ([\#9763](matrix-org/matrix-react-sdk#9763)). Fixes element-hq/element-web#23907. * Don't prefer STIXGeneral over the default font ([\#9711](matrix-org/matrix-react-sdk#9711)). Fixes element-hq/element-web#23899. * Use the same avatar colour when creating 1:1 DM rooms ([\#9850](matrix-org/matrix-react-sdk#9850)). Fixes element-hq/element-web#23476. * Fix space lock icon size ([\#9854](matrix-org/matrix-react-sdk#9854)). Fixes element-hq/element-web#24128. * Make calls automatically disconnect if the widget disappears ([\#9862](matrix-org/matrix-react-sdk#9862)). Fixes element-hq/element-web#23664. * Fix emoji in RTE editing ([\#9827](matrix-org/matrix-react-sdk#9827)). * Fix export with attachments on formats txt and json ([\#9851](matrix-org/matrix-react-sdk#9851)). Fixes element-hq/element-web#24130. Contributed by @grimhilt. * Fixed empty `Content-Type` for encrypted uploads ([\#9848](matrix-org/matrix-react-sdk#9848)). Contributed by @K3das. * Fix sign-in instead link on password reset page ([\#9820](matrix-org/matrix-react-sdk#9820)). Fixes element-hq/element-web#24087. * The seekbar now initially shows the current position ([\#9796](matrix-org/matrix-react-sdk#9796)). Fixes element-hq/element-web#24051. * Fix: Editing a poll will silently change it to a closed poll ([\#9809](matrix-org/matrix-react-sdk#9809)). Fixes element-hq/element-web#23176. * Make call tiles look less broken in the right panel ([\#9808](matrix-org/matrix-react-sdk#9808)). Fixes element-hq/element-web#23716. * Prevent unnecessary m.direct updates ([\#9805](matrix-org/matrix-react-sdk#9805)). Fixes element-hq/element-web#24059. * Fix checkForPreJoinUISI for thread roots ([\#9803](matrix-org/matrix-react-sdk#9803)). Fixes element-hq/element-web#24054. * Snap in PiP widget when content changed ([\#9797](matrix-org/matrix-react-sdk#9797)). Fixes element-hq/element-web#24050. * Load RTE components only when RTE labs is enabled ([\#9804](matrix-org/matrix-react-sdk#9804)). * Ensure that events are correctly updated when they are edited. ([\#9789](matrix-org/matrix-react-sdk#9789)). * When stopping a broadcast also stop the playback ([\#9795](matrix-org/matrix-react-sdk#9795)). Fixes element-hq/element-web#24052. * Prevent to start two broadcasts at the same time ([\#9744](matrix-org/matrix-react-sdk#9744)). Fixes element-hq/element-web#23973. * Correctly handle limited sync responses by resetting the thread timeline ([\#3056](matrix-org/matrix-js-sdk#3056)). Fixes element-hq/element-web#23952. * Fix failure to start in firefox private browser ([\#3058](matrix-org/matrix-js-sdk#3058)). Fixes element-hq/element-web#24216.

@andybalaam

Changes in [1.11.20](https://github.com/vector-im/element-web/releases/tag/v1.11.20) (2023-01-20) ================================================================================================= ## 🐛 Bug Fixes * (Part 2) of prevent crash on older browsers (replace .at() with array.length-1) Changes in [1.11.19](https://github.com/vector-im/element-web/releases/tag/v1.11.19) (2023-01-18) ================================================================================================= ## 🐛 Bug Fixes * fix crash on browsers that don't support `Array.at` ([\#9935](matrix-org/matrix-react-sdk#9935)). Contributed by @andybalaam. Changes in [1.11.18](https://github.com/vector-im/element-web/releases/tag/v1.11.18) (2023-01-18) ================================================================================================= ## ✨ Features * Switch threads on for everyone ([\#9879](matrix-org/matrix-react-sdk#9879)). * Make threads use new Unable to Decrypt UI ([\#9876](matrix-org/matrix-react-sdk#9876)). Fixes #24060. * Add edit and remove actions to link in RTE [Labs] ([\#9864](matrix-org/matrix-react-sdk#9864)). * Remove extensible events v1 experimental rendering ([\#9881](matrix-org/matrix-react-sdk#9881)). * Make create poll dialog scale better (PSG-929) ([\#9873](matrix-org/matrix-react-sdk#9873)). Fixes #21855. * Change RTE mode icons ([\#9861](matrix-org/matrix-react-sdk#9861)). * Device manager - prune client information events after remote sign out ([\#9874](matrix-org/matrix-react-sdk#9874)). * Check connection before starting broadcast ([\#9857](matrix-org/matrix-react-sdk#9857)). * Enable sent receipt for poll start events (PSG-962) ([\#9870](matrix-org/matrix-react-sdk#9870)). * Change clear notifications to have more readable copy ([\#9867](matrix-org/matrix-react-sdk#9867)). * combine search results when the query is present in multiple successive messages ([\#9855](matrix-org/matrix-react-sdk#9855)). Fixes #3977. Contributed by @grimhilt. * Disable bubbles for broadcasts ([\#9860](matrix-org/matrix-react-sdk#9860)). Fixes #24140. * Enable reactions and replies for broadcasts ([\#9856](matrix-org/matrix-react-sdk#9856)). Fixes #24042. * Improve switching between rich and plain editing modes ([\#9776](matrix-org/matrix-react-sdk#9776)). * Redesign the picture-in-picture window ([\#9800](matrix-org/matrix-react-sdk#9800)). Fixes #23980. * User on-boarding tasks now appear in a static order. ([\#9799](matrix-org/matrix-react-sdk#9799)). Contributed by @GoodGuyMarco. * Device manager - contextual menus ([\#9832](matrix-org/matrix-react-sdk#9832)). * If listening a non-live broadcast and changing the room, the broadcast will be paused ([\#9825](matrix-org/matrix-react-sdk#9825)). Fixes #24078. * Consider own broadcasts from other device as a playback ([\#9821](matrix-org/matrix-react-sdk#9821)). Fixes #24068. * Add link creation to rich text editor ([\#9775](matrix-org/matrix-react-sdk#9775)). * Add mark as read option in room setting ([\#9798](matrix-org/matrix-react-sdk#9798)). Fixes #24053. * Device manager - current device design and copy tweaks ([\#9801](matrix-org/matrix-react-sdk#9801)). * Unify notifications panel event design ([\#9754](matrix-org/matrix-react-sdk#9754)). * Add actions for integration manager to send and read certain events ([\#9740](matrix-org/matrix-react-sdk#9740)). * Device manager - design tweaks ([\#9768](matrix-org/matrix-react-sdk#9768)). * Change room list sorting to activity and unread first by default ([\#9773](matrix-org/matrix-react-sdk#9773)). Fixes #24014. * Add a config flag to enable the rust crypto-sdk ([\#9759](matrix-org/matrix-react-sdk#9759)). * Improve decryption error UI by consolidating error messages and providing instructions when possible ([\#9544](matrix-org/matrix-react-sdk#9544)). Contributed by @duxovni. * Honor font settings in Element Call ([\#9751](matrix-org/matrix-react-sdk#9751)). Fixes #23661. * Device manager - use deleteAccountData to prune device manager client information events ([\#9734](matrix-org/matrix-react-sdk#9734)). ## 🐛 Bug Fixes * Display rooms & threads as unread (bold) if threads have unread messages. ([\#9763](matrix-org/matrix-react-sdk#9763)). Fixes #23907. * Don't prefer STIXGeneral over the default font ([\#9711](matrix-org/matrix-react-sdk#9711)). Fixes #23899. * Use the same avatar colour when creating 1:1 DM rooms ([\#9850](matrix-org/matrix-react-sdk#9850)). Fixes #23476. * Fix space lock icon size ([\#9854](matrix-org/matrix-react-sdk#9854)). Fixes #24128. * Make calls automatically disconnect if the widget disappears ([\#9862](matrix-org/matrix-react-sdk#9862)). Fixes #23664. * Fix emoji in RTE editing ([\#9827](matrix-org/matrix-react-sdk#9827)). * Fix export with attachments on formats txt and json ([\#9851](matrix-org/matrix-react-sdk#9851)). Fixes #24130. Contributed by @grimhilt. * Fixed empty `Content-Type` for encrypted uploads ([\#9848](matrix-org/matrix-react-sdk#9848)). Contributed by @K3das. * Fix sign-in instead link on password reset page ([\#9820](matrix-org/matrix-react-sdk#9820)). Fixes #24087. * The seekbar now initially shows the current position ([\#9796](matrix-org/matrix-react-sdk#9796)). Fixes #24051. * Fix: Editing a poll will silently change it to a closed poll ([\#9809](matrix-org/matrix-react-sdk#9809)). Fixes #23176. * Make call tiles look less broken in the right panel ([\#9808](matrix-org/matrix-react-sdk#9808)). Fixes #23716. * Prevent unnecessary m.direct updates ([\#9805](matrix-org/matrix-react-sdk#9805)). Fixes #24059. * Fix checkForPreJoinUISI for thread roots ([\#9803](matrix-org/matrix-react-sdk#9803)). Fixes #24054. * Snap in PiP widget when content changed ([\#9797](matrix-org/matrix-react-sdk#9797)). Fixes #24050. * Load RTE components only when RTE labs is enabled ([\#9804](matrix-org/matrix-react-sdk#9804)). * Ensure that events are correctly updated when they are edited. ([\#9789](matrix-org/matrix-react-sdk#9789)). * When stopping a broadcast also stop the playback ([\#9795](matrix-org/matrix-react-sdk#9795)). Fixes #24052. * Prevent to start two broadcasts at the same time ([\#9744](matrix-org/matrix-react-sdk#9744)). Fixes #23973. * Correctly handle limited sync responses by resetting the thread timeline ([\#3056](matrix-org/matrix-js-sdk#3056)). Fixes element-hq/element-web#23952. * Fix failure to start in firefox private browser ([\#3058](matrix-org/matrix-js-sdk#3058)). Fixes element-hq/element-web#24216.

florianduros added 8 commits December 12, 2022 17:07

Add link buttons

7b3dcee

Merge remote-tracking branch 'origin/develop' into feat/add-link-rich…

996e422

…-text-editor

Add link modal

1012488

Handle link click

761bab2

Add insert link to rich text editor

bed5c76

Upgrade matrix-wysiwyg version

8880d79

Fix plain text composer test warning

211e307

Add missing act

1f2366a

florianduros added the T-Enhancement New features, changes in functionality, performance boosts, user-facing improvements label Dec 15, 2022

florianduros changed the title ~~Feat/add link rich text editor~~ Add link creation to rich text editor Dec 15, 2022

github-actions bot deployed to Netlify December 15, 2022 14:26 View deployment

Add test to link creation

8891658

florianduros force-pushed the feat/add-link-rich-text-editor branch from 3a178c9 to 8891658 Compare December 15, 2022 15:57

Update i18n

9b9b91d

github-actions bot deployed to Netlify December 15, 2022 16:04 View deployment

fix ts errors

2cd4856

github-actions bot deployed to Netlify December 15, 2022 16:15 View deployment

Merge remote-tracking branch 'origin/develop' into feat/add-link-rich…

2831d0f

…-text-editor

github-actions bot deployed to Netlify December 16, 2022 10:18 View deployment

Add styling to LinkModal.tsx

5061d7e

github-actions bot deployed to Netlify December 16, 2022 10:42 View deployment

florianduros marked this pull request as ready for review December 16, 2022 11:02

florianduros requested review from a team as code owners December 16, 2022 11:02

florianduros requested review from t3chguy and weeman1337 December 16, 2022 11:02

florianduros marked this pull request as draft December 16, 2022 11:11

github-actions bot deployed to Netlify December 16, 2022 13:10 View deployment

florianduros force-pushed the feat/add-link-rich-text-editor branch from d6b154d to 2d13d10 Compare December 16, 2022 13:14

florianduros marked this pull request as ready for review December 16, 2022 13:44

Merge remote-tracking branch 'origin/develop' into feat/add-link-rich…

14de65b

…-text-editor

github-actions bot deployed to Netlify December 19, 2022 16:05 View deployment

weeman1337 reviewed Dec 19, 2022

View reviewed changes

florianduros added 3 commits December 20, 2022 15:19

Review changes

ad532cb

Remove custom style for Save button

38fb044

Add auto-focus for text field in LinkModal.tsx

421bc29

Merge remote-tracking branch 'origin/develop' into feat/add-link-rich…

c4f1935

…-text-editor

github-actions bot deployed to Netlify December 20, 2022 16:58 View deployment

florianduros added 2 commits December 21, 2022 15:12

Merge branch 'develop' into feat/add-link-rich-text-editor

51db9e1

# Conflicts: # src/i18n/strings/en_EN.json

Update i18n

7875d49

github-actions bot deployed to Netlify December 21, 2022 14:17 View deployment

florianduros requested a review from weeman1337 December 21, 2022 14:45

weeman1337 approved these changes Dec 22, 2022

View reviewed changes

github-actions bot deployed to Netlify December 22, 2022 09:06 View deployment

Merge remote-tracking branch 'origin/develop' into feat/add-link-rich…

1aeec8a

…-text-editor

florianduros force-pushed the feat/add-link-rich-text-editor branch from eabff47 to 1aeec8a Compare December 22, 2022 09:07

github-actions bot deployed to Netlify December 22, 2022 09:13 View deployment

t3chguy approved these changes Dec 23, 2022

View reviewed changes

Merge branch 'develop' into feat/add-link-rich-text-editor

a288fe1

florianduros enabled auto-merge (squash) December 23, 2022 10:12

github-actions bot deployed to Netlify December 23, 2022 10:15 View deployment

Merge branch 'develop' into feat/add-link-rich-text-editor

a0f058f

github-actions bot deployed to Netlify December 23, 2022 10:52 View deployment

florianduros merged commit fe0273b into develop Dec 23, 2022

florianduros deleted the feat/add-link-rich-text-editor branch December 23, 2022 11:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add link creation to rich text editor #9775

Add link creation to rich text editor #9775

florianduros commented Dec 15, 2022 •

edited by github-actions bot

Loading

florianduros commented Dec 16, 2022 •

edited

Loading

weeman1337 commented Dec 19, 2022 •

edited

Loading

weeman1337 left a comment

florianduros commented Dec 20, 2022 •

edited

Loading

weeman1337 left a comment

Add link creation to rich text editor #9775

Add link creation to rich text editor #9775

Conversation

florianduros commented Dec 15, 2022 • edited by github-actions bot Loading

Checklist

✨ Features

florianduros commented Dec 16, 2022 • edited Loading

weeman1337 commented Dec 19, 2022 • edited Loading

weeman1337 left a comment

Choose a reason for hiding this comment

florianduros commented Dec 20, 2022 • edited Loading

weeman1337 left a comment

Choose a reason for hiding this comment

florianduros commented Dec 15, 2022 •

edited by github-actions bot

Loading

florianduros commented Dec 16, 2022 •

edited

Loading

weeman1337 commented Dec 19, 2022 •

edited

Loading

florianduros commented Dec 20, 2022 •

edited

Loading