PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Fix Safari IME support (#11016)

Browse source 
* Fix Safari IME support

* Try remove hasIMEComposingJustEnded

* Remove redundant code

* Run prettier

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
SuperKenVery 2024-01-15 22:57:17 +08:00 committed by GitHub
parent 80e75e3b70
commit 97339ee2f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/views/rooms/BasicMessageComposer.tsx
View file

@ -129,6 +129,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
private modifiedFlag = false; private modifiedFlag = false;
private isIMEComposing = false; private isIMEComposing = false;
private hasTextSelected = false; private hasTextSelected = false;
private readonly isSafari: boolean;
private _isCaretAtEnd = false; private _isCaretAtEnd = false;
private lastCaret!: DocumentOffset; private lastCaret!: DocumentOffset;
@ -149,6 +150,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
showVisualBell: false, showVisualBell: false,
}; };
const ua = navigator.userAgent.toLowerCase();
this.isSafari = ua.includes("safari/") && !ua.includes("chrome/");
this.useMarkdownHandle = SettingsStore.watchSetting( this.useMarkdownHandle = SettingsStore.watchSetting(
"MessageComposerInput.useMarkdown", "MessageComposerInput.useMarkdown",
null, null,
@ -308,10 +312,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
// however, doing this async seems to break things in Safari for some reason, so browser sniff. // however, doing this async seems to break things in Safari for some reason, so browser sniff.
const ua = navigator.userAgent.toLowerCase(); if (this.isSafari) {
const isSafari = ua.includes("safari/") && !ua.includes("chrome/");
if (isSafari) {
this.onInput({ inputType: "insertCompositionText" }); this.onInput({ inputType: "insertCompositionText" });
} else { } else {
Promise.resolve().then(() => { Promise.resolve().then(() => {
@ -324,6 +325,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
// checking the event.isComposing flag just in case any browser out there // checking the event.isComposing flag just in case any browser out there
// emits events related to the composition after compositionend // emits events related to the composition after compositionend
// has been fired // has been fired
// From https://www.stum.de/2016/06/24/handling-ime-events-in-javascript/
// Safari emits an additional keyDown after compositionend
return !!(this.isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing)); return !!(this.isIMEComposing || (event.nativeEvent && event.nativeEvent.isComposing));
} }
@ -503,6 +507,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
private onKeyDown = (event: React.KeyboardEvent): void => { private onKeyDown = (event: React.KeyboardEvent): void => {
if (!this.editorRef.current) return; if (!this.editorRef.current) return;
if (this.isSafari && event.which == 229) {
// Swallow the extra keyDown by Safari
event.stopPropagation();
return;
}
const model = this.props.model; const model = this.props.model;
let handled = false; let handled = false;