feat(react/settings): port shortcuts

apps/client/src/widgets/react/FormText.tsx

@@ -1,5 +1,5 @@
 import { ComponentChildren } from "preact";
 
 export default function FormText({ children }: { children: ComponentChildren }) {
-    return <p className="form-text">{children}</p>
+    return <p className="form-text use-tn-links">{children}</p>
 }

apps/client/src/widgets/type_widgets/content_widget.tsx

@@ -39,6 +39,7 @@ import EtapiSettings from "./options/etapi.js";
 import BackupSettings from "./options/backup.js";
 import SpellcheckSettings from "./options/spellcheck.js";
 import PasswordSettings from "./options/password.jsx";
+import ShortcutSettings from "./options/shortcuts.js";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -67,9 +68,7 @@ export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_options
 
 const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | JSX.Element)> = {
     _optionsAppearance: <AppearanceSettings />,
-    _optionsShortcuts: [
-        KeyboardShortcutsOptions
-    ],
+    _optionsShortcuts: <ShortcutSettings />,
     _optionsTextNotes: [
         EditorOptions,
         EditorFeaturesOptions,

apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx

@@ -1,13 +1,16 @@
 import type { ComponentChildren } from "preact";
+import { CSSProperties } from "preact/compat";
 
 interface OptionsSectionProps {
     title: string;
     children: ComponentChildren;
+    noCard?: boolean;
+    style?: CSSProperties;
 }
 
-export default function OptionsSection({ title, children }: OptionsSectionProps) {
+export default function OptionsSection({ title, children, noCard, style }: OptionsSectionProps) {
     return (
-        <div className="options-section">
+        <div className={`options-section ${noCard && "tn-no-card"}`} style={style}>
             <h4>{title}</h4>
 
             {children}

apps/client/src/widgets/type_widgets/options/shortcuts.ts

@@ -1,169 +0,0 @@
-import server from "../../../services/server.js";
-import utils from "../../../services/utils.js";
-import dialogService from "../../../services/dialog.js";
-import OptionsWidget from "./options_widget.js";
-import { t } from "../../../services/i18n.js";
-import type { OptionNames, KeyboardShortcut, KeyboardShortcutWithRequiredActionName } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section shortcuts-options-section tn-no-card">
-    <style>
-        .shortcuts-options-section {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-        }
-
-        .shortcuts-table-container {
-            overflow: auto;
-            flex-grow: 1;
-            flex-shrink: 1;
-        }
-
-        .shortcuts-options-buttons {
-            display: flex;
-            justify-content: space-between;
-            margin: 15px 15px 0 15px;
-        }
-    </style>
-
-    <h4>${t("shortcuts.keyboard_shortcuts")}</h4>
-
-    <p class="form-text use-tn-links">
-      ${t("shortcuts.multiple_shortcuts")}
-      ${t("shortcuts.electron_documentation")}
-    </p>
-
-    <div class="form-group">
-        <input type="text" class="keyboard-shortcut-filter form-control" placeholder="${t("shortcuts.type_text_to_filter")}">
-    </div>
-
-    <div class="shortcuts-table-container">
-        <table class="keyboard-shortcut-table" cellpadding="10">
-        <thead>
-            <tr class="text-nowrap">
-                <th>${t("shortcuts.action_name")}</th>
-                <th>${t("shortcuts.shortcuts")}</th>
-                <th>${t("shortcuts.default_shortcuts")}</th>
-                <th>${t("shortcuts.description")}</th>
-            </tr>
-        </thead>
-        <tbody></tbody>
-        </table>
-    </div>
-
-    <div class="shortcuts-options-buttons">
-        <button class="options-keyboard-shortcuts-reload-app btn btn-primary">${t("shortcuts.reload_app")}</button>
-
-        <button class="options-keyboard-shortcuts-set-all-to-default btn btn-secondary">${t("shortcuts.set_all_to_default")}</button>
-    </div>
-</div>`;
-
-let globActions: KeyboardShortcut[];
-
-export default class KeyboardShortcutsOptions extends OptionsWidget {
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$widget.find(".options-keyboard-shortcuts-reload-app").on("click", () => utils.reloadFrontendApp());
-
-        const $table = this.$widget.find(".keyboard-shortcut-table tbody");
-
-        server.get<KeyboardShortcut[]>("keyboard-actions").then((actions) => {
-            globActions = actions;
-
-            for (const action of actions) {
-                const $tr = $("<tr>");
-
-                if ("separator" in action) {
-                    $tr.append($('<td class="separator" colspan="4">').attr("style", "background-color: var(--accented-background-color); font-weight: bold;").text(action.separator));
-                } else if (action.defaultShortcuts && action.actionName) {
-                    $tr.append($("<td>").text(action.friendlyName))
-                        .append(
-                            $("<td>").append(
-                                $(`<input type="text" class="form-control">`)
-                                    .val((action.effectiveShortcuts ?? []).join(", "))
-                                    .attr("data-keyboard-action-name", action.actionName)
-                                    .attr("data-default-keyboard-shortcuts", action.defaultShortcuts.join(", "))
-                            )
-                        )
-                        .append($("<td>").text(action.defaultShortcuts.join(", ")))
-                        .append($("<td>").text(action.description ?? ""));
-                }
-
-                $table.append($tr);
-            }
-        });
-
-        $table.on("change", "input.form-control", (e) => {
-            const $input = this.$widget.find(e.target);
-            const actionName = $input.attr("data-keyboard-action-name");
-            if (!actionName) {
-                return;
-            }
-
-            const shortcuts = ($input.val() as String)
-                .replace("+,", "+Comma")
-                .split(",")
-                .map((shortcut) => shortcut.replace("+Comma", "+,"))
-                .filter((shortcut) => !!shortcut);
-
-            const optionName = `keyboardShortcuts${actionName.substr(0, 1).toUpperCase()}${actionName.substr(1)}`;
-
-            this.updateOption(optionName as OptionNames, JSON.stringify(shortcuts));
-        });
-
-        this.$widget.find(".options-keyboard-shortcuts-set-all-to-default").on("click", async () => {
-            if (!(await dialogService.confirm(t("shortcuts.confirm_reset")))) {
-                return;
-            }
-
-            $table.find("input.form-control").each((_index, el) => {
-                const defaultShortcuts = this.$widget.find(el).attr("data-default-keyboard-shortcuts");
-
-                if (defaultShortcuts && this.$widget.find(el).val() !== defaultShortcuts) {
-                    this.$widget.find(el).val(defaultShortcuts).trigger("change");
-                }
-            });
-        });
-
-        const $filter = this.$widget.find(".keyboard-shortcut-filter");
-
-        $filter.on("keyup", () => {
-            const filter = String($filter.val()).trim().toLowerCase();
-
-            $table.find("tr").each((i, el) => {
-                if (!filter) {
-                    this.$widget.find(el).show();
-                    return;
-                }
-
-                const actionName = this.$widget.find(el).find("input").attr("data-keyboard-action-name");
-
-                if (!actionName) {
-                    this.$widget.find(el).hide();
-                    return;
-                }
-
-                const action = globActions.find((act) => "actionName" in act && act.actionName === actionName) as KeyboardShortcutWithRequiredActionName;
-
-                if (!action) {
-                    this.$widget.find(el).hide();
-                    return;
-                }
-
-                this.$widget
-                    .find(el)
-                    .toggle(
-                        !!(
-                            action.actionName.toLowerCase().includes(filter) ||
-                            (action.friendlyName && action.friendlyName.toLowerCase().includes(filter)) ||
-                            (action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
-                            (action.effectiveShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
-                            (action.description && action.description.toLowerCase().includes(filter))
-                        )
-                    );
-            });
-        });
-    }
-}

apps/client/src/widgets/type_widgets/options/shortcuts.tsx

@@ -0,0 +1,140 @@
+import { ActionKeyboardShortcut, KeyboardShortcut } from "@triliumnext/commons";
+import { t } from "../../../services/i18n";
+import { reloadFrontendApp } from "../../../services/utils";
+import Button from "../../react/Button";
+import FormGroup from "../../react/FormGroup";
+import FormText from "../../react/FormText";
+import FormTextBox from "../../react/FormTextBox";
+import RawHtml from "../../react/RawHtml";
+import OptionsSection from "./components/OptionsSection";
+import { useCallback, useEffect, useState } from "preact/hooks";
+import server from "../../../services/server";
+import options from "../../../services/options";
+import dialog from "../../../services/dialog";
+
+export default function ShortcutSettings() {
+    const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);
+    const [ filter, setFilter ] = useState<string>();
+    
+    useEffect(() => {
+        server.get<KeyboardShortcut[]>("keyboard-actions").then(setKeyboardShortcuts);
+    }, [])
+
+    const resetShortcuts = useCallback(async () => {
+        if (!(await dialog.confirm(t("shortcuts.confirm_reset")))) {
+            return;
+        }
+
+        const newKeyboardShortcuts = [];
+        for (const keyboardShortcut of keyboardShortcuts) {
+            if (!("effectiveShortcuts" in keyboardShortcut)) {
+                continue;
+            }
+
+        }
+    }, [ keyboardShortcuts ]);
+
+    return (
+        <OptionsSection
+            title={t("shortcuts.keyboard_shortcuts")}
+            style={{ display: "flex", flexDirection: "column", height: "100%" }}
+            noCard
+        >
+            <FormText>
+                {t("shortcuts.multiple_shortcuts")}
+                <RawHtml html={t("shortcuts.electron_documentation")} />
+            </FormText>
+
+            <FormGroup>
+                <FormTextBox
+                    name="keyboard-shortcut-filter"
+                    placeholder={t("shortcuts.type_text_to_filter")}
+                    currentValue={filter} onChange={(value) => setFilter(value.toLowerCase())}
+                />
+            </FormGroup>
+
+            <div style={{overflow: "auto", flexGrow: 1, flexShrink: 1}}>
+                <KeyboardShortcutTable keyboardShortcuts={keyboardShortcuts} filter={filter} />
+            </div>
+
+            <div style={{ display: "flex", justifyContent: "space-between", margin: "15px 15px 0 15px"}}>
+                <Button
+                    text={t("shortcuts.reload_app")}
+                    onClick={reloadFrontendApp}
+                />
+
+                <Button
+                    text={t("shortcuts.set_all_to_default")}
+                    onClick={resetShortcuts}
+                />
+            </div>
+        </OptionsSection>
+    )
+}
+
+function filterKeyboardAction(action: ActionKeyboardShortcut, filter: string) {
+    return action.actionName.toLowerCase().includes(filter) ||
+        (action.friendlyName && action.friendlyName.toLowerCase().includes(filter)) ||
+        (action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
+        (action.effectiveShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
+        (action.description && action.description.toLowerCase().includes(filter));
+}
+
+function KeyboardShortcutTable({ filter, keyboardShortcuts }: { filter?: string, keyboardShortcuts: KeyboardShortcut[] }) {
+    return (
+        <table class="keyboard-shortcut-table" cellPadding="10">
+            <thead>
+                <tr class="text-nowrap">
+                    <th>{t("shortcuts.action_name")}</th>
+                    <th>{t("shortcuts.shortcuts")}</th>
+                    <th>{t("shortcuts.default_shortcuts")}</th>
+                    <th>{t("shortcuts.description")}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {keyboardShortcuts.map(action => (
+                    <tr>
+                        {"separator" in action ? ( !filter &&
+                            <td class="separator" colspan={4} style={{
+                                backgroundColor: "var(--accented-background-color)",
+                                fontWeight: "bold"
+                            }}>
+                                {action.separator}
+                            </td>
+                        ) : ( (!filter || filterKeyboardAction(action, filter)) && 
+                            <>
+                                <td>{action.friendlyName}</td>
+                                <td>
+                                    <ShortcutEditor keyboardShortcut={action} />
+                                </td>
+                                <td>{action.defaultShortcuts?.join(", ")}</td>
+                                <td>{action.description}</td>
+                            </>
+                        )}
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    );
+}
+
+function ShortcutEditor({ keyboardShortcut: action }: { keyboardShortcut: ActionKeyboardShortcut }) {
+    const [ shortcuts, setShortcuts ] = useState((action.effectiveShortcuts ?? []).join(", "));
+
+    useEffect(() => {
+        const { actionName } = action;
+        const optionName = `keyboardShortcuts${actionName.substr(0, 1).toUpperCase()}${actionName.substr(1)}`;
+        const newShortcuts = shortcuts
+            .replace("+,", "+Comma")
+            .split(",")
+            .map((shortcut) => shortcut.replace("+Comma", "+,"))
+            .filter((shortcut) => !!shortcut);
+        options.save(optionName, JSON.stringify(newShortcuts));
+    }, [ shortcuts ])
+
+    return (
+        <FormTextBox
+            currentValue={shortcuts} onChange={setShortcuts}
+        />
+    )
+}