anki/ts/editable/content-editable.ts
Henrik Giesel 30bbbaf00b
Use eslint for sorting our imports (#1637)
* Make eslint sort our imports

* fix missing deps in eslint rule (dae)

Caught on Linux due to the stricter sandboxing

* Remove exports-last eslint rule (for now?)

* Adjust browserslist settings

- We use ResizeObserver which is not supported in browsers like KaiOS,
  Baidu or Android UC

* Raise minimum iOS version 13.4

- It's the first version that supports ResizeObserver

* Apply new eslint rules to sort imports
2022-02-04 18:36:34 +10:00

107 lines
3.1 KiB
TypeScript

// Copyright: Ankitects Pty Ltd and contributors
// License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import type { SelectionLocation } from "../domlib/location";
import { restoreSelection, saveSelection } from "../domlib/location";
import { placeCaretAfterContent } from "../domlib/place-caret";
import { bridgeCommand } from "../lib/bridgecommand";
import { on, preventDefault } from "../lib/events";
import { isApplePlatform } from "../lib/platform";
import { registerShortcut } from "../lib/shortcuts";
function safePlaceCaretAfterContent(editable: HTMLElement): void {
/**
* Workaround: If you try to invoke an IME after calling
* `placeCaretAfterContent` on a cE element, the IME will immediately
* end and the input character will be duplicated
*/
placeCaretAfterContent(editable);
restoreSelection(editable, saveSelection(editable)!);
}
function onFocus(location: SelectionLocation | null): () => void {
return function (this: HTMLElement): void {
if (!location) {
safePlaceCaretAfterContent(this);
return;
}
try {
restoreSelection(this, location);
} catch {
safePlaceCaretAfterContent(this);
}
};
}
interface CustomFocusHandlingAPI {
setupFocusHandling(element: HTMLElement): { destroy(): void };
flushCaret(): void;
}
export function customFocusHandling(): CustomFocusHandlingAPI {
const focusHandlingEvents: (() => void)[] = [];
function flushEvents(): void {
let removeEvent: (() => void) | undefined;
while ((removeEvent = focusHandlingEvents.pop())) {
removeEvent();
}
}
function prepareFocusHandling(
editable: HTMLElement,
latestLocation: SelectionLocation | null = null,
): void {
const off = on(editable, "focus", onFocus(latestLocation), { once: true });
focusHandlingEvents.push(off, on(editable, "pointerdown", off, { once: true }));
}
/**
* Must execute before DOMMirror.
*/
function onBlur(this: HTMLElement): void {
prepareFocusHandling(this, saveSelection(this));
}
function setupFocusHandling(editable: HTMLElement): { destroy(): void } {
prepareFocusHandling(editable);
const off = on(editable, "blur", onBlur);
return {
destroy() {
flushEvents();
off();
},
};
}
return {
setupFocusHandling,
flushCaret: flushEvents,
};
}
if (isApplePlatform()) {
registerShortcut(() => bridgeCommand("paste"), "Control+Shift+V");
}
export function preventBuiltinContentEditableShortcuts(editable: HTMLElement): void {
for (const keyCombination of ["Control+B", "Control+U", "Control+I", "Control+R"]) {
registerShortcut(preventDefault, keyCombination, editable);
}
}
/** API */
export interface ContentEditableAPI {
/**
* Can be used to turn off the caret restoring functionality of
* the ContentEditable. Can be used when you want to set the caret
* yourself.
*/
flushCaret(): void;
}