feat(react/settings): port search engine settings

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

@@ -3,7 +3,7 @@ import type { InputHTMLAttributes, RefObject } from "preact/compat";
 interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
     id?: string;
     currentValue?: string;
-    onChange?(newValue: string, validity: ValidityState): void | false;
+    onChange?(newValue: string, validity: ValidityState): void;
     inputRef?: RefObject<HTMLInputElement>;
 }
 

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

@@ -12,11 +12,14 @@ import { SANITIZER_DEFAULT_ALLOWED_TAGS } from "@triliumnext/commons";
 import FormCheckbox from "../../react/FormCheckbox";
 import FormGroup from "../../react/FormGroup";
 import search from "../../../services/search";
-import { FormTextBoxWithUnit } from "../../react/FormTextBox";
+import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
+import FormSelect from "../../react/FormSelect";
+import { isElectron } from "../../../services/utils";
 
 export default function OtherSettings() {
     return (
         <>
+            {isElectron() && <SearchEngineSettings />}
             <NoteErasureTimeout />
             <AttachmentErasureTimeout />
             <RevisionSnapshotInterval />
@@ -28,6 +31,57 @@ export default function OtherSettings() {
     )
 }
 
+function SearchEngineSettings() {
+    const [ customSearchEngineName, setCustomSearchEngineName ] = useTriliumOption("customSearchEngineName");
+    const [ customSearchEngineUrl, setCustomSearchEngineUrl ] = useTriliumOption("customSearchEngineUrl");
+
+    const searchEngines = useMemo(() => {
+        return [
+            { url: "https://www.bing.com/search?q={keyword}", name: t("search_engine.bing") },
+            { url: "https://www.baidu.com/s?wd={keyword}", name: t("search_engine.baidu") },
+            { url: "https://duckduckgo.com/?q={keyword}", name: t("search_engine.duckduckgo") },
+            { url: "https://www.google.com/search?q={keyword}", name: t("search_engine.google") }
+        ];
+    }, []);
+
+    return (
+        <OptionsSection title={t("search_engine.title")}>
+            <FormText>{t("search_engine.custom_search_engine_info")}</FormText>
+
+            <FormGroup label={t("search_engine.predefined_templates_label")}>
+                <FormSelect
+                    values={searchEngines}
+                    currentValue={customSearchEngineUrl}
+                    keyProperty="url" titleProperty="name"
+                    onChange={newValue => {
+                        const searchEngine = searchEngines.find(e => e.url === newValue);
+                        if (!searchEngine) {
+                            return;
+                        }
+
+                        setCustomSearchEngineName(searchEngine.name);
+                        setCustomSearchEngineUrl(searchEngine.url);
+                    }}
+                />
+            </FormGroup>
+
+            <FormGroup label={t("search_engine.custom_name_label")}>
+                <FormTextBox
+                    currentValue={customSearchEngineName} onChange={setCustomSearchEngineName}
+                    placeholder={t("search_engine.custom_name_placeholder")}
+                />
+            </FormGroup>
+
+            <FormGroup label={t("search_engine.custom_url_label")}>
+                <FormTextBox
+                    currentValue={customSearchEngineUrl} onChange={setCustomSearchEngineUrl}
+                    placeholder={t("search_engine.custom_url_placeholder")}
+                />
+            </FormGroup>
+        </OptionsSection>
+    )
+}
+
 function NoteErasureTimeout() {
     return (
         <OptionsSection title={t("note_erasure_timeout.note_erasure_timeout_title")}>

apps/client/src/widgets/type_widgets/options/other/search_engine.ts

@@ -1,84 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import utils from "../../../../services/utils.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("search_engine.title")}</h4>
-
-    <p class="form-text">${t("search_engine.custom_search_engine_info")}</p>
-
-    <form class="sync-setup-form">
-        <div class="form-group">
-            <label for="predefined-search-engine-select">${t("search_engine.predefined_templates_label")}</label>
-            <select id="predefined-search-engine-select" class="predefined-search-engine-select form-control">
-                <option value="Bing">${t("search_engine.bing")}</option>
-                <option value="Baidu">${t("search_engine.baidu")}</option>
-                <option value="DuckDuckGo">${t("search_engine.duckduckgo")}</option>
-                <option value="Google">${t("search_engine.google")}</option>
-            </select>
-        </div>
-
-        <div class="form-group">
-            <label>${t("search_engine.custom_name_label")}</label>
-            <input type="text" class="custom-search-engine-name form-control" placeholder="${t("search_engine.custom_name_placeholder")}">
-        </div>
-
-        <div class="form-group">
-            <label>${t("search_engine.custom_url_label")}</label>
-            <input type="text" class="custom-search-engine-url form-control" placeholder="${t("search_engine.custom_url_placeholder")}">
-        </div>
-
-        <div style="display: flex; justify-content: space-between;">
-            <button class="btn btn-primary">${t("search_engine.save_button")}</button>
-        </div>
-    </form>
-</div>`;
-
-const SEARCH_ENGINES: Record<string, string> = {
-    Bing: "https://www.bing.com/search?q={keyword}",
-    Baidu: "https://www.baidu.com/s?wd={keyword}",
-    DuckDuckGo: "https://duckduckgo.com/?q={keyword}",
-    Google: "https://www.google.com/search?q={keyword}"
-};
-
-export default class SearchEngineOptions extends OptionsWidget {
-
-    private $form!: JQuery<HTMLElement>;
-    private $predefinedSearchEngineSelect!: JQuery<HTMLElement>;
-    private $customSearchEngineName!: JQuery<HTMLInputElement>;
-    private $customSearchEngineUrl!: JQuery<HTMLInputElement>;
-
-    isEnabled() {
-        return super.isEnabled() && utils.isElectron();
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$form = this.$widget.find(".sync-setup-form");
-        this.$predefinedSearchEngineSelect = this.$widget.find(".predefined-search-engine-select");
-        this.$customSearchEngineName = this.$widget.find(".custom-search-engine-name");
-        this.$customSearchEngineUrl = this.$widget.find(".custom-search-engine-url");
-
-        this.$predefinedSearchEngineSelect.on("change", () => {
-            const predefinedSearchEngine = String(this.$predefinedSearchEngineSelect.val());
-            this.$customSearchEngineName[0].value = predefinedSearchEngine;
-            this.$customSearchEngineUrl[0].value = SEARCH_ENGINES[predefinedSearchEngine];
-        });
-
-        this.$form.on("submit", () => {
-            this.updateMultipleOptions({
-                customSearchEngineName: this.$customSearchEngineName.val(),
-                customSearchEngineUrl: this.$customSearchEngineUrl.val()
-            });
-        });
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        this.$predefinedSearchEngineSelect.val("");
-        this.$customSearchEngineName[0].value = options.customSearchEngineName;
-        this.$customSearchEngineUrl[0].value = options.customSearchEngineUrl;
-    }
-}