openmonetis/hooks/use-calculator-keyboard.ts

import { useEffect } from "react";

type UseCalculatorKeyboardParams = {
	canCopy: boolean;
	onCopy: () => void | Promise<void>;
	onPaste: () => void | Promise<void>;
};

function shouldIgnoreForEditableTarget(target: EventTarget | null): boolean {
	if (!target || !(target instanceof HTMLElement)) {
		return false;
	}

	const tagName = target.tagName;
	return (
		tagName === "INPUT" || tagName === "TEXTAREA" || target.isContentEditable
	);
}

export function useCalculatorKeyboard({
	canCopy,
	onCopy,
	onPaste,
}: UseCalculatorKeyboardParams) {
	useEffect(() => {
		if (!canCopy) {
			return;
		}

		const handleKeyDown = (event: KeyboardEvent) => {
			if (!(event.ctrlKey || event.metaKey)) {
				return;
			}

			if (shouldIgnoreForEditableTarget(event.target)) {
				return;
			}

			if (event.key.toLowerCase() !== "c") {
				return;
			}

			const selection = window.getSelection();
			if (selection && selection.toString().trim().length > 0) {
				return;
			}

			event.preventDefault();
			void onCopy();
		};

		document.addEventListener("keydown", handleKeyDown);

		return () => {
			document.removeEventListener("keydown", handleKeyDown);
		};
	}, [canCopy, onCopy]);

	useEffect(() => {
		const handlePasteShortcut = (event: KeyboardEvent) => {
			if (!(event.ctrlKey || event.metaKey)) {
				return;
			}

			if (event.key.toLowerCase() !== "v") {
				return;
			}

			if (shouldIgnoreForEditableTarget(event.target)) {
				return;
			}

			const selection = window.getSelection();
			if (selection && selection.toString().trim().length > 0) {
				return;
			}

			if (!navigator.clipboard?.readText) {
				return;
			}

			event.preventDefault();
			void onPaste();
		};

		document.addEventListener("keydown", handlePasteShortcut);

		return () => {
			document.removeEventListener("keydown", handlePasteShortcut);
		};
	}, [onPaste]);
}