add custom keybinds

index.tsx

@@ -4,13 +4,107 @@
  * SPDX-License-Identifier: GPL-3.0-or-later
  */
 
-import definePlugin from "@utils/types";
-import { useEffect } from "@webpack/common";
-
-
+import { definePluginSettings } from "@api/Settings";
+import definePlugin, { IPluginOptionComponentProps, OptionType } from "@utils/types";
+import { findComponentByCodeLazy } from "@webpack";
+import { Button, Toasts, useEffect, useState } from "@webpack/common";
+// two lines because formatting removes the two spaces at the end of the line
+/**
+ * shortcut: keys & mods in a string, joined by "+"
+ *
+ *
+ * ctrl => mod
+ *
+ *
+ * all lowercase
+ */
+const KeyComponent = findComponentByCodeLazy<{ shortcut: string; }>("{let{shortcut");
+interface KeyBind {
+    ctrl: boolean,
+    shift: boolean,
+    alt: boolean,
+    key: string;
+}
+const ModKeys = new Set(["Control", "Alt", "Shift", "Meta"]);
+function KeybindRecorder({ onBind }: {
+    onBind: (kb: KeyBind) => void;
+}) {
+    useEffect(() => {
+        function eventListener(ev: KeyboardEvent) {
+            if (ModKeys.has(ev.key)) return;
+            ev.stopImmediatePropagation();
+            onBind({
+                alt: ev.altKey,
+                ctrl: ev.ctrlKey,
+                shift: ev.shiftKey,
+                key: ev.key
+            });
+        }
+        document.addEventListener("keydown", eventListener);
+        return () => {
+            document.removeEventListener("keydown", eventListener);
+        };
+    }, [onBind]);
+    return <></>;
+}
+function KeymapElement(props: IPluginOptionComponentProps) {
+    const [keybind, setKeybind] = useState<KeyBind>(settings.store.keymap ?? {});
+    const [recording, setRecording] = useState(false);
+    // there has to be a better way to do this
+    const keybindString: string[] = [];
+    if (keybind.alt) keybindString.push("alt");
+    if (keybind.ctrl) keybindString.push("mod");
+    if (keybind.shift) keybindString.push("shift");
+    if (keybind.key) keybindString.push(keybind.key.toLowerCase());
+    // dont let them save if they're recording
+    return <>
+        <p></p>
+        <div style={{
+            color: "var(--header-primary)"
+        }}>Record Your Keymap</div>
+        <Button onClick={() => {
+            props.setError(!recording);
+            setRecording(!recording);
+        }}>{recording ? "Stop Recording" : "Start Recording"}</Button>
+        {recording && <KeybindRecorder onBind={kb => {
+            props.setError(false);
+            setRecording(!recording);
+            setKeybind(kb);
+            props.setValue(kb);
+        }} />}
+        {keybind.key && <KeyComponent shortcut={keybindString.join("+")} />
+        }
+    </>;
+}
+function isMatch(ev: KeyboardEvent) {
+    const s: KeyBind = settings.store.keymap;
+    if (!s || Object.entries(s).length === 0) {
+        Toasts.show({
+            id: Toasts.genId(),
+            message: "(CtrlEnterSave) Set your keybind in settings",
+            type: Toasts.Type.FAILURE,
+            options: {
+                position: Toasts.Position.TOP,
+                duration: 2000
+            }
+        });
+    }
+    return ev.altKey === s.alt
+        && ev.key === s.key
+        && ev.ctrlKey === s.ctrl
+        && ev.shiftKey === s.shift;
+}
+const settings = definePluginSettings({
+    keymap: {
+        type: OptionType.COMPONENT,
+        description: "the keybind that you want to save on",
+        component: props => <KeymapElement {...props}></KeymapElement>
+    }
+});
 export default definePlugin({
+    settings,
     name: "CtrlEnterSave",
-    description: "",
+    description: "Adds a keybind to save settings. YOU HAVE TO SET THE KEYBIND IN SETTINGS.",
     authors: [
         {
             name: "sadan",
@@ -27,10 +121,13 @@ export default definePlugin({
         }
     ],
 
-    KeyListener(onClickFunc: () => void){
+    KeyListener(onClickFunc: () => void) {
         useEffect(() => {
-            function eventListener(ev: KeyboardEvent){
-                if (ev.ctrlKey && ev.key === "Enter") onClickFunc();
+            function eventListener(ev: KeyboardEvent) {
+                if (isMatch(ev)) {
+                    ev.stopImmediatePropagation();
+                    onClickFunc();
+                }
             }
             document.addEventListener("keydown", eventListener);
             return () => {