Fix Safari IME support (#11016)

* 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

View file

@ -129,6 +129,7 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
private modifiedFlag = false;
private isIMEComposing = false;
private hasTextSelected = false;
private readonly isSafari: boolean;
private _isCaretAtEnd = false;
private lastCaret!: DocumentOffset;
@ -149,6 +150,9 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
showVisualBell: false,
};
const ua = navigator.userAgent.toLowerCase();
this.isSafari = ua.includes("safari/") && !ua.includes("chrome/");
this.useMarkdownHandle = SettingsStore.watchSetting(
"MessageComposerInput.useMarkdown",
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.
const ua = navigator.userAgent.toLowerCase();
const isSafari = ua.includes("safari/") && !ua.includes("chrome/");
if (isSafari) {
if (this.isSafari) {
this.onInput({ inputType: "insertCompositionText" });
} else {
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
// emits events related to the composition after compositionend
// 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));
}
@ -503,6 +507,11 @@ export default class BasicMessageEditor extends React.Component<IProps, IState>
private onKeyDown = (event: React.KeyboardEvent): void => {
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;
let handled = false;