OpenCut/apps/web/src/stores/keybindings-store.ts

"use client";

import { create } from "zustand";
import { persist } from "zustand/middleware";
import type { TActionWithOptionalArgs } from "@/lib/actions";
import { getDefaultShortcuts } from "@/lib/actions";
import { isTypableDOMElement } from "@/utils/browser";
import { isAppleDevice } from "@/utils/platform";
import type { KeybindingConfig, ShortcutKey } from "@/types/keybinding";
import {
	runMigrations,
	CURRENT_VERSION,
} from "./keybindings/migrations";

export const defaultKeybindings: KeybindingConfig = getDefaultShortcuts();

export interface KeybindingConflict {
	key: ShortcutKey;
	existingAction: TActionWithOptionalArgs;
	newAction: TActionWithOptionalArgs;
}

interface KeybindingsState {
	keybindings: KeybindingConfig;
	isCustomized: boolean;
	keybindingsEnabled: boolean;
	isRecording: boolean;

	updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => void;
	removeKeybinding: (key: ShortcutKey) => void;
	resetToDefaults: () => void;
	importKeybindings: (config: KeybindingConfig) => void;
	exportKeybindings: () => KeybindingConfig;
	enableKeybindings: () => void;
	disableKeybindings: () => void;
	setIsRecording: (isRecording: boolean) => void;
	validateKeybinding: (
		key: ShortcutKey,
		action: TActionWithOptionalArgs,
	) => KeybindingConflict | null;
	getKeybindingsForAction: (action: TActionWithOptionalArgs) => ShortcutKey[];
	getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;
}

function isDOMElement(el: EventTarget | null): el is HTMLElement {
	return !!el && (el instanceof Element || el instanceof HTMLElement);
}

export const useKeybindingsStore = create<KeybindingsState>()(
	persist(
		(set, get) => ({
			keybindings: { ...defaultKeybindings },
			isCustomized: false,
			keybindingsEnabled: true,
			isRecording: false,

			updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => {
				set((state) => {
					const newKeybindings = { ...state.keybindings };
					newKeybindings[key] = action;

					return {
						keybindings: newKeybindings,
						isCustomized: true,
					};
				});
			},

			removeKeybinding: (key: ShortcutKey) => {
				set((state) => {
					const newKeybindings = { ...state.keybindings };
					delete newKeybindings[key];

					return {
						keybindings: newKeybindings,
						isCustomized: true,
					};
				});
			},

			resetToDefaults: () => {
				set({
					keybindings: { ...defaultKeybindings },
					isCustomized: false,
				});
			},

			enableKeybindings: () => {
				set({ keybindingsEnabled: true });
			},

			disableKeybindings: () => {
				set({ keybindingsEnabled: false });
			},

			importKeybindings: (config: KeybindingConfig) => {
				// Validate all keys and actions
				for (const [key] of Object.entries(config)) {
					// Validate the key format
					if (typeof key !== "string" || key.length === 0) {
						throw new Error(`Invalid key format: ${key}`);
					}
				}
				set({
					keybindings: { ...config },
					isCustomized: true,
				});
			},

			exportKeybindings: () => {
				return get().keybindings;
			},

			validateKeybinding: (
				key: ShortcutKey,
				action: TActionWithOptionalArgs,
			) => {
				const { keybindings } = get();
				const existingAction = keybindings[key];

				if (existingAction && existingAction !== action) {
					return {
						key,
						existingAction,
						newAction: action,
					};
				}

				return null;
			},
			setIsRecording: (isRecording: boolean) => {
				set({ isRecording });
			},

			getKeybindingsForAction: (action: TActionWithOptionalArgs) => {
				const { keybindings } = get();
				return Object.keys(keybindings).filter(
					(key) => keybindings[key as ShortcutKey] === action,
				) as ShortcutKey[];
			},

			getKeybindingString: (ev: KeyboardEvent) => {
				return generateKeybindingString(ev) as ShortcutKey | null;
			},
		}),
		{
			name: "opencut-keybindings",
			version: CURRENT_VERSION,
			partialize: (state) => ({
				keybindings: state.keybindings,
				isCustomized: state.isCustomized,
			}),
			migrate: (persisted, version) =>
				runMigrations({ state: persisted, fromVersion: version }),
		},
	),
);

// Utility functions
function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
	const target = ev.target;

	// We may or may not have a modifier key
	const modifierKey = getActiveModifier(ev);

	// We will always have a non-modifier key
	const key = getPressedKey(ev);
	if (!key) return null;

	// All key combos backed by modifiers are valid shortcuts (whether currently typing or not)
	if (modifierKey) {
		// If the modifier is shift and the target is an input, we ignore
		if (
			modifierKey === "shift" &&
			isDOMElement(target) &&
			isTypableDOMElement({ element: target as HTMLElement })
		) {
			return null;
		}

		return `${modifierKey}+${key}` as ShortcutKey;
	}

	// no modifier key here then we do not do anything while on input
	if (
		isDOMElement(target) &&
		isTypableDOMElement({ element: target as HTMLElement })
	)
		return null;

	// single key while not input
	return `${key}` as ShortcutKey;
}

function getPressedKey(ev: KeyboardEvent): string | null {
	// Sometimes the property code is not available on the KeyboardEvent object
	const key = (ev.key ?? "").toLowerCase();
	const code = ev.code ?? "";

	if (code === "Space" || key === " " || key === "spacebar" || key === "space")
		return "space";

	// Check arrow keys
	if (key.startsWith("arrow")) {
		return key.slice(5);
	}

	// Check for special keys
	if (key === "tab") return "tab";
	if (key === "home") return "home";
	if (key === "end") return "end";
	if (key === "delete") return "delete";
	if (key === "backspace") return "backspace";

	// Check letter keys
	if (code.startsWith("Key")) {
		const letter = code.slice(3).toLowerCase();
		if (letter.length === 1 && letter >= "a" && letter <= "z") {
			return letter;
		}
	}

	// Check number keys using physical position for AZERTY support
	if (code.startsWith("Digit")) {
		const digit = code.slice(5);
		if (digit.length === 1 && digit >= "0" && digit <= "9") {
			return digit;
		}
	}

	// Fallback for other layouts
	const isDigit = key.length === 1 && key >= "0" && key <= "9";
	if (isDigit) return key;

	// Check if slash, period or enter
	if (key === "/" || key === "." || key === "enter") return key;

	// If no other cases match, this is not a valid key
	return null;
}

function getActiveModifier(ev: KeyboardEvent): string | null {
	const modifierKeys = {
		ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
		alt: ev.altKey,
		shift: ev.shiftKey,
	};

	// active modifier: ctrl | alt | ctrl+alt | ctrl+shift | ctrl+alt+shift | alt+shift
	// modiferKeys object's keys are sorted to match the above order
	const activeModifier = Object.keys(modifierKeys)
		.filter((key) => modifierKeys[key as keyof typeof modifierKeys])
		.join("+");

	return activeModifier === "" ? null : activeModifier;
}