Skip to content

Commit

Permalink
Work around iOS Enter+autocorrect behavior
Browse files Browse the repository at this point in the history
FIX: Avoid the editor getting confused when iOS autocorrects on pressing
Enter and does the correction and the break insertion in two different
events.

Closes codemirror/dev#1349
  • Loading branch information
marijnh committed Mar 6, 2024
1 parent 2be7f39 commit e094a92
Show file tree
Hide file tree
Showing 3 changed files with 6 additions and 3 deletions.
1 change: 1 addition & 0 deletions src/dom.ts
Original file line number Diff line number Diff line change
Expand Up @@ -283,6 +283,7 @@ export function textRange(node: Text, from: number, to = from) {
}

export function dispatchKey(elt: HTMLElement, name: string, code: number): boolean {
console.log("dispatch", name)
let options = {key: name, code: name, keyCode: code, which: code, cancelable: true}
let down = new KeyboardEvent("keydown", options)
;(down as any).synthetic = true
Expand Down
2 changes: 1 addition & 1 deletion src/domchange.ts
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,7 @@ export function applyDOMChange(view: EditorView, domChange: DOMChange): boolean
}

if (change) {
if (browser.ios && view.inputState.flushIOSKey()) return true
if (browser.ios && view.inputState.flushIOSKey(change)) return true
// Android browsers don't fire reasonable key events for enter,
// backspace, or delete. So this detects changes that look like
// they're caused by those keys, and reinterprets them as key
Expand Down
6 changes: 4 additions & 2 deletions src/input.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import {EditorSelection, EditorState, SelectionRange, RangeSet, Annotation} from "@codemirror/state"
import {EditorSelection, EditorState, SelectionRange, RangeSet, Annotation, Text} from "@codemirror/state"
import {EditorView} from "./editorview"
import {ContentView} from "./contentview"
import {LineView} from "./blockview"
Expand Down Expand Up @@ -142,9 +142,11 @@ export class InputState {
return false
}

flushIOSKey() {
flushIOSKey(change?: {from: number, to: number, insert: Text}) {
let key = this.pendingIOSKey
if (!key) return false
// This looks like an autocorrection before Enter
if (key.key == "Enter" && change && change.from < change.to && /^\S+$/.test(change.insert.toString())) return false
this.pendingIOSKey = undefined
return dispatchKey(this.view.contentDOM, key.key, key.keyCode)
}
Expand Down

0 comments on commit e094a92

Please sign in to comment.