Fix emoji in RTE editing #9827

florianduros · 2022-12-23T16:28:30Z

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)

Currently, the emoji feature doesn't work in RTE editing:

Screen.Recording.2023-01-03.at.15.21.24.mov

Now:

Screen.Recording.2023-01-02.at.12.11.29.mov

Two changes were needed:

The listener of The RTE in editing wasn't handling some events, the composerInsert in our case. The emoji button is dispatching this event with the emoji in it
The other more complex:
- The emoji button component is in the main composer (inside the outline)
- In editing, the emoji button were still altering the selection of the main composer instead of the RTE in editing
- I moved the selection stuff from the emoji to the RTE listeners

Here's what your changelog entry will look like:

🐛 Bug Fixes

Fix emoji in RTE editing (#9827). Contributed by @florianduros.

richvdh · 2023-01-03T13:49:43Z

@florianduros just fyi in English, "edition" ~= "version", normally referring to a book or magazine. The act of making an edit is "editing". I've updated the PR title.

richvdh

I'm struggling to follow this somewhat; the main problem is that I don't know what bug you're trying to fix.

Please could you update the PR with a bit of information about the bug you are fixing, as well as why these changes fix it?

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

florianduros · 2023-01-03T14:32:09Z

@richvdh I added comments in the code as requested. I have also added extra details in the PR description :)

richvdh

looks plausible!

richvdh · 2023-01-03T14:52:03Z

src/components/views/rooms/wysiwyg_composer/hooks/useWysiwygEditActionHandler.ts

+                case Action.ComposerInsert:
+                    if (payload.timelineRenderingType !== roomContext.timelineRenderingType) break;
+                    if (payload.composerType !== ComposerType.Edit) break;
+
+                    if (payload.text) {
+                        setSelection(composerContext.selection).then(() => composerFunctions.insertText(payload.text));
+                    }
+                    break;


ComposerInsert is documented as:

Inserts content into the active composer. Should be used with ComposerInsertPayload.

It doesn't mention anything about changing the selection or checking the timeline rendering type. Maybe it should?

In the previous composer, the selection change is made in the EditorModel, in the call of insertText.

Why ? Because when we are clicking or using the modal, the composer loses the focus and its selection. The selection is saved on blur and set when needed (here for example with emoji modal).

that's fine. Just saying, maybe the documentation for ComposerInsert should be updated to reflect the current behaviour, even if that means noting the different behaviour for the two composers.

richvdh · 2023-01-03T15:33:28Z

I have also added extra details in the PR description :)

By the way, this is much clearer now, thank you ❤️

@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 the T-Defect Bugs, crashes, hangs, vulnerabilities, or other reported problems label Dec 23, 2022

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

Fix emoji in RTE edition

e06139c

florianduros force-pushed the florianduros/fix/emoji-edition-rte branch from ab9f690 to e06139c Compare December 25, 2022 16:00

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

Merge branch 'develop' into florianduros/fix/emoji-edition-rte

d3864aa

github-actions bot deployed to Netlify January 2, 2023 10:13 View deployment

Add test for emoji in edition mode

3ffcefc

github-actions bot deployed to Netlify January 2, 2023 11:03 View deployment

Merge branch 'develop' into florianduros/fix/emoji-edition-rte

915d178

github-actions bot deployed to Netlify January 2, 2023 11:18 View deployment

florianduros marked this pull request as ready for review January 2, 2023 11:30

florianduros requested a review from a team as a code owner January 2, 2023 11:30

florianduros requested review from richvdh and weeman1337 January 2, 2023 11:30

richvdh changed the title ~~Fix emoji in RTE edition~~ Fix emoji in RTE editing Jan 3, 2023

richvdh requested changes Jan 3, 2023

View reviewed changes

test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx Outdated Show resolved Hide resolved

test/components/views/rooms/wysiwyg_composer/EditWysiwygComposer-test.tsx Outdated Show resolved Hide resolved

Add comments to EditWysiwygComposer-test.tsx

f0192e5

github-actions bot deployed to Netlify January 3, 2023 14:22 View deployment

Merge branch 'develop' into florianduros/fix/emoji-edition-rte

06aa2af

florianduros requested a review from richvdh January 3, 2023 14:32

github-actions bot deployed to Netlify January 3, 2023 14:34 View deployment

richvdh approved these changes Jan 3, 2023

View reviewed changes

florianduros enabled auto-merge (squash) January 3, 2023 15:02

florianduros merged commit 6b15562 into develop Jan 3, 2023

florianduros deleted the florianduros/fix/emoji-edition-rte branch January 3, 2023 15:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix emoji in RTE editing #9827

Fix emoji in RTE editing #9827

florianduros commented Dec 23, 2022 •

edited by github-actions bot

Loading

richvdh commented Jan 3, 2023

richvdh left a comment

florianduros commented Jan 3, 2023

richvdh left a comment

richvdh Jan 3, 2023

florianduros Jan 3, 2023 •

edited

Loading

richvdh Jan 3, 2023

richvdh commented Jan 3, 2023

Fix emoji in RTE editing #9827

Fix emoji in RTE editing #9827

Conversation

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

Checklist

🐛 Bug Fixes

richvdh commented Jan 3, 2023

richvdh left a comment

Choose a reason for hiding this comment

florianduros commented Jan 3, 2023

richvdh left a comment

Choose a reason for hiding this comment

richvdh Jan 3, 2023

Choose a reason for hiding this comment

florianduros Jan 3, 2023 • edited Loading

Choose a reason for hiding this comment

richvdh Jan 3, 2023

Choose a reason for hiding this comment

richvdh commented Jan 3, 2023

florianduros commented Dec 23, 2022 •

edited by github-actions bot

Loading

florianduros Jan 3, 2023 •

edited

Loading