Add onBeforeInput listener #710
Conversation
|
Kudos, SonarCloud Quality Gate passed! |
| // Can be called by onPaste or onBeforeInput | ||
| const onPaste = (e: ClipboardEvent | InputEvent) => { | ||
| // this is required to handle edge case image pasting in Safari, see | ||
| // https://github.com/vector-im/element-web/issues/25327 | ||
| const isSpecialCaseInputEvent = | ||
| isInputEvent(e) && | ||
| e.inputType === 'insertFromPaste' && | ||
| e.dataTransfer !== null; | ||
|
|
||
| const isEventToHandle = | ||
| isClipboardEvent(e) || isSpecialCaseInputEvent; | ||
|
|
||
| if (isEventToHandle) { | ||
| e.preventDefault(); | ||
| e.stopPropagation(); | ||
|
|
||
| _handleInput(e); |
There was a problem hiding this comment.
Before we only used to call this when an event occurred and returned early (ie did nothing) if it was not an event from the clipboard.
Now we need to handle a special case as a clipboard event, so the check has become "check if it is a clipboard event or the special case, and if it's either of those, do stuff. Otherwise, do nothing"
| @@ -185,6 +199,7 @@ export function useListeners( | |||
| editorNode.removeEventListener('paste', onPaste); | |||
| editorNode.removeEventListener('wysiwygInput', onWysiwygInput); | |||
| editorNode.removeEventListener('keydown', onKeyDown); | |||
| editorNode.removeEventListener('beforeinput', onBeforeInput); | |||
There was a problem hiding this comment.
These lines create a reference to the onPaste function which will be called whenever a beforeInput event occurs. The addEventListener call attaches that function when the composer is created, the removeEventListener call removes it when the composer is removed from the page
Codecov ReportPatch coverage has no change and project coverage change:
Additional details and impacted files@@ Coverage Diff @@
## main #710 +/- ##
============================================
+ Coverage 88.28% 89.79% +1.50%
============================================
Files 145 79 -66
Lines 16652 13932 -2720
Branches 769 0 -769
============================================
- Hits 14702 12510 -2192
+ Misses 1765 1422 -343
+ Partials 185 0 -185
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. |
To handle a special case in element web (regarding pasting stuff from an iPhone to a Mac, see issue element-hq/element-web#25327) we require a before input listener to be added to the rich text editor.
This PR adds that listener and ensures it passes the event through when required to handle the case listed in the issue above. This listener will be required anyway to implement IME behaviour correctly (ie allowing composition of characters in certain foreign languages)