mirror/slate
1
0
Fork 0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-01-17 21:49:20 +01:00
Code Issues Releases Wiki Activity

Prevent swiftkey from closing when typing next to the placeholder element (#5070)

Browse Source
This commit is contained in:
Eric Meier 2022-08-02 17:02:19 +02:00 committed by GitHub
parent 1d5984cccd
commit 82a10a38e6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/slate-react/src/components/editable.tsx
View File

@ -1289,6 +1289,8 @@ export const Editable = (props: EditableProps) => {
onKeyDown={useCallback( onKeyDown={useCallback(
(event: React.KeyboardEvent<HTMLDivElement>) => { (event: React.KeyboardEvent<HTMLDivElement>) => {
if (!readOnly && hasEditableTarget(editor, event.target)) { if (!readOnly && hasEditableTarget(editor, event.target)) {
androidInputManager?.handleKeyDown(event)
const { nativeEvent } = event const { nativeEvent } = event
// COMPAT: The composition end event isn't fired reliably in all browsers, // COMPAT: The composition end event isn't fired reliably in all browsers,

25
packages/slate-react/src/hooks/android-input-manager/android-input-manager.ts
View File

@ -14,9 +14,9 @@ import {
import { isDOMSelection, isTrackedMutation } from '../../utils/dom' import { isDOMSelection, isTrackedMutation } from '../../utils/dom'
import { import {
EDITOR_TO_FORCE_RENDER, EDITOR_TO_FORCE_RENDER,
EDITOR_TO_PENDING_INSERTION_MARKS,
EDITOR_TO_PENDING_ACTION, EDITOR_TO_PENDING_ACTION,
EDITOR_TO_PENDING_DIFFS, EDITOR_TO_PENDING_DIFFS,
EDITOR_TO_PENDING_INSERTION_MARKS,
EDITOR_TO_PENDING_SELECTION, EDITOR_TO_PENDING_SELECTION,
EDITOR_TO_PLACEHOLDER_ELEMENT, EDITOR_TO_PLACEHOLDER_ELEMENT,
EDITOR_TO_USER_MARKS, EDITOR_TO_USER_MARKS,
@ -56,6 +56,7 @@ export type AndroidInputManager = {
event: React.CompositionEvent<HTMLDivElement> event: React.CompositionEvent<HTMLDivElement>
) => void ) => void
handleDOMBeforeInput: (event: InputEvent) => void handleDOMBeforeInput: (event: InputEvent) => void
handleKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void
handleDomMutations: (mutations: MutationRecord[]) => void handleDomMutations: (mutations: MutationRecord[]) => void
handleInput: () => void handleInput: () => void
@ -91,7 +92,6 @@ export function createAndroidInputManager({
onDOMSelectionChange, onDOMSelectionChange,
}: CreateAndroidInputManagerOptions): AndroidInputManager { }: CreateAndroidInputManagerOptions): AndroidInputManager {
let flushing: 'action' | boolean = false let flushing: 'action' | boolean = false
let compositionEndTimeoutId: ReturnType<typeof setTimeout> | null = null let compositionEndTimeoutId: ReturnType<typeof setTimeout> | null = null
let flushTimeoutId: ReturnType<typeof setTimeout> | null = null let flushTimeoutId: ReturnType<typeof setTimeout> | null = null
let actionTimeoutId: ReturnType<typeof setTimeout> | null = null let actionTimeoutId: ReturnType<typeof setTimeout> | null = null
@ -281,18 +281,18 @@ export function createAndroidInputManager({
} }
} }
const updatePlaceholderVisibility = () => { const updatePlaceholderVisibility = (forceHide = false) => {
const placeholderElement = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor) const placeholderElement = EDITOR_TO_PLACEHOLDER_ELEMENT.get(editor)
if (!placeholderElement) { if (!placeholderElement) {
return return
} }
if (hasPendingDiffs()) { if (hasPendingDiffs() || forceHide) {
placeholderElement.style.visibility = 'hidden' placeholderElement.style.display = 'none'
return return
} }
placeholderElement.style.removeProperty('visibility') placeholderElement.style.removeProperty('display')
} }
const storeDiff = (path: Path, diff: StringDiff) => { const storeDiff = (path: Path, diff: StringDiff) => {
@ -605,6 +605,18 @@ export function createAndroidInputManager({
} }
} }
const handleKeyDown = (_: React.KeyboardEvent) => {
// COMPAT: Swiftkey closes the keyboard when typing inside a empty node
// directly next to a non-contenteditable element (= the placeholder).
// The only event fired soon enough for us to allow hiding the placeholder
// without swiftkey picking it up is the keydown event, so we have to hide it
// here. See https://github.com/ianstormtaylor/slate/pull/4988#issuecomment-1201050535
if (!hasPendingDiffs()) {
updatePlaceholderVisibility(true)
setTimeout(updatePlaceholderVisibility)
}
}
const scheduleFlush = () => { const scheduleFlush = () => {
if (!hasPendingAction()) { if (!hasPendingAction()) {
actionTimeoutId = setTimeout(flush) actionTimeoutId = setTimeout(flush)
@ -637,6 +649,7 @@ export function createAndroidInputManager({
handleCompositionEnd, handleCompositionEnd,
handleCompositionStart, handleCompositionStart,
handleDOMBeforeInput, handleDOMBeforeInput,
handleKeyDown,
handleDomMutations, handleDomMutations,
handleInput, handleInput,