// Copyright: Ankitects Pty Ltd and contributors // License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html import { getRange, getSelection } from "../lib/cross-browser"; import { on } from "../lib/events"; import { isArrowDown, isArrowLeft, isArrowRight, isArrowUp } from "../lib/keys"; import { singleCallback } from "../lib/typing"; import { HandlerList } from "./handler-list"; const nbsp = "\xa0"; export type SetupInputHandlerAction = (element: HTMLElement) => { destroy(): void }; export interface InputEventParams { event: InputEvent; } export interface InsertTextParams { event: InputEvent; text: Text; } type SpecialKeyAction = | "caretUp" | "caretDown" | "caretLeft" | "caretRight" | "enter" | "tab"; export interface SpecialKeyParams { event: KeyboardEvent; action: SpecialKeyAction; } export interface InputHandlerAPI { readonly beforeInput: HandlerList; readonly insertText: HandlerList; readonly pointerDown: HandlerList<{ event: PointerEvent }>; readonly specialKey: HandlerList; } /** * An interface that allows Svelte components to attach event listeners via triggers. * They will be attached to the component(s) that install the manager. * Prevents that too many event listeners are attached and allows for some * coordination between them. */ function useInputHandler(): [InputHandlerAPI, SetupInputHandlerAction] { const beforeInput = new HandlerList(); const insertText = new HandlerList(); async function onBeforeInput(this: Element, event: InputEvent): Promise { const selection = getSelection(this)!; const range = getRange(selection); await beforeInput.dispatch({ event }); if (!range || event.inputType !== "insertText" || insertText.length === 0) { return; } event.preventDefault(); const content = !event.data || event.data === " " ? nbsp : event.data; const text = new Text(content); range.deleteContents(); range.insertNode(text); range.selectNode(text); range.collapse(false); await insertText.dispatch({ event, text }); range.commonAncestorContainer.normalize(); } const pointerDown = new HandlerList<{ event: PointerEvent }>(); function clearInsertText(): void { insertText.clear(); } function onPointerDown(event: PointerEvent): void { pointerDown.dispatch({ event }); clearInsertText(); } const specialKey = new HandlerList(); async function onKeyDown(this: Element, event: KeyboardEvent): Promise { if (isArrowDown(event)) { specialKey.dispatch({ event, action: "caretDown" }); } else if (isArrowUp(event)) { specialKey.dispatch({ event, action: "caretUp" }); } else if (isArrowRight(event)) { specialKey.dispatch({ event, action: "caretRight" }); } else if (isArrowLeft(event)) { specialKey.dispatch({ event, action: "caretLeft" }); } else if (event.code === "Enter" || event.code === "NumpadEnter") { specialKey.dispatch({ event, action: "enter" }); } else if (event.code === "Tab") { specialKey.dispatch({ event, action: "tab" }); } } function setupHandler(element: HTMLElement): { destroy(): void } { const destroy = singleCallback( on(element, "beforeinput", onBeforeInput), on(element, "blur", clearInsertText), on(element, "pointerdown", onPointerDown), on(element, "keydown", onKeyDown), on(document, "selectionchange", clearInsertText), ); return { destroy }; } return [ { beforeInput, insertText, specialKey, pointerDown, }, setupHandler, ]; } export default useInputHandler;