Skip to content
This repository has been archived by the owner on Sep 27, 2024. It is now read-only.

Add onBeforeInput listener #710

Merged
merged 1 commit into from
Jun 8, 2023
Merged

Add onBeforeInput listener #710

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 23 additions & 8 deletions platforms/web/lib/useListeners/useListeners.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,15 +123,24 @@ export function useListeners(
const onInput = (e: Event) => isInputEvent(e) && _handleInput(e);
editorNode.addEventListener('input', onInput);

const onPaste = (e: Event) => {
if (!isClipboardEvent(e)) {
return;
// 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);
Comment on lines +126 to +142
Copy link
Contributor Author

@artcodespace artcodespace Jun 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"

}

e.preventDefault();
e.stopPropagation();

_handleInput(e);
};
editorNode.addEventListener('paste', onPaste);

Expand Down Expand Up @@ -177,6 +186,11 @@ export function useListeners(
};
document.addEventListener('selectionchange', onSelectionChange);

// this is required to handle edge case image pasting in Safari, see
// https://github.com/vector-im/element-web/issues/25327
const onBeforeInput = onPaste;
editorNode.addEventListener('beforeinput', onBeforeInput);

setAreListenersReady(true);

return () => {
Expand All @@ -185,6 +199,7 @@ export function useListeners(
editorNode.removeEventListener('paste', onPaste);
editorNode.removeEventListener('wysiwygInput', onWysiwygInput);
editorNode.removeEventListener('keydown', onKeyDown);
editorNode.removeEventListener('beforeinput', onBeforeInput);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

document.removeEventListener('selectionchange', onSelectionChange);
};
}, [
Expand Down