customize search engine

src/public/app/desktop.js

@@ -8,6 +8,7 @@ import contextMenu from "./menus/context_menu.js";
 import DesktopLayout from "./layouts/desktop_layout.js";
 import glob from "./services/glob.js";
 import zoomService from './components/zoom.js';
+import options from "./services/options.js";
 
 bundleService.getWidgetBundlesByParent().then(widgetBundles => {
     appContext.setLayout(new DesktopLayout(widgetBundles));
@@ -115,11 +116,27 @@ if (utils.isElectron()) {
                 ? (`${params.selectionText.substr(0, 13)}…`)
                 : params.selectionText;
 
+            // Read the search engine from the options and fallback to DuckDuckGo if the option is not set.
+            const customSearchEngineName = options.get("customSearchEngineName");
+            const customSearchEngineUrl = options.get("customSearchEngineUrl");
+            let searchEngineName;
+            let searchEngineUrl;
+            if (customSearchEngineName && customSearchEngineUrl) {
+                searchEngineName = customSearchEngineName;
+                searchEngineUrl = customSearchEngineUrl;
+            } else {
+                searchEngineName = "Duckduckgo";
+                searchEngineUrl = "https://duckduckgo.com/?q={keyword}";
+            }
+
+            // Replace the placeholder with the real search keyword.
+            let searchUrl = searchEngineUrl.replace("{keyword}", encodeURIComponent(params.selectionText));
+
             items.push({
                 enabled: editFlags.canPaste,
-                title: `Search for "${shortenedSelection}" with DuckDuckGo`,
+                title: `Search for "${shortenedSelection}" with ${searchEngineName}`,
                 uiIcon: "bx bx-search-alt",
-                handler: () => electron.shell.openExternal(`https://duckduckgo.com/?q=${encodeURIComponent(params.selectionText)}`)
+                handler: () => electron.shell.openExternal(searchUrl)
             });
         }
 

src/public/app/widgets/type_widgets/content_widget.js

@@ -18,6 +18,7 @@ import PasswordOptions from "./options/password.js";
 import EtapiOptions from "./options/etapi.js";
 import BackupOptions from "./options/backup.js";
 import SyncOptions from "./options/sync.js";
+import SearchEngineOptions from "./options/other/search_engine.js";
 import TrayOptions from "./options/other/tray.js";
 import NoteErasureTimeoutOptions from "./options/other/note_erasure_timeout.js";
 import NoteRevisionsSnapshotIntervalOptions from "./options/other/note_revisions_snapshot_interval.js";
@@ -75,6 +76,7 @@ const CONTENT_WIDGETS = {
     _optionsBackup: [ BackupOptions ],
     _optionsSync: [ SyncOptions ],
     _optionsOther: [
+        SearchEngineOptions,
         TrayOptions,
         NoteErasureTimeoutOptions,
         NoteRevisionsSnapshotIntervalOptions,

src/public/app/widgets/type_widgets/options/other/search_engine.js

@@ -0,0 +1,73 @@
+import OptionsWidget from "../options_widget.js";
+
+const TPL = `
+<div class="options-section">
+
+
+    <h4>Search Engine</h4>
+    
+    <p>Custom search engine requires both a name and a URL to be set. If either of these is not set, DuckDuckGo will be used as the default search engine.</p>
+    
+    <form class="sync-setup-form">
+        <div class="form-group">
+            <label>Predefined search engine templates</label>
+            <select class="predefined-search-engine-select form-control">
+                <option value="Bing">Bing</option>
+                <option value="Baidu">Baidu</option>
+                <option value="Duckduckgo">Duckduckgo</option>
+                <option value="Google">Google</option>
+            </select>
+        </div>
+        
+        <div class="form-group">
+            <label>Custom search engine name</label>
+            <input type="text" class="custom-search-engine-name form-control" placeholder="Customize search engine name">
+        </div>
+        
+        <div class="form-group">
+            <label>Custom search engine URL should include <code>{keyword}</code> as a placeholder for the search term.</label>
+            <input type="text" class="custom-search-engine-url form-control" placeholder="Customize search engine url">
+        </div>
+        
+        <div style="display: flex; justify-content: space-between;">
+            <button class="btn btn-primary">Save</button>
+        </div>
+    </form>
+</div>`;
+
+const SEARCH_ENGINES = {
+    "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 {
+    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 = 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) {
+        this.$predefinedSearchEngineSelect.val("");
+        this.$customSearchEngineName[0].value = options.customSearchEngineName;
+        this.$customSearchEngineUrl[0].value = options.customSearchEngineUrl;
+    }
+}

src/routes/api/options.js

@@ -61,7 +61,9 @@ const ALLOWED_OPTIONS = new Set([
     'downloadImagesAutomatically',
     'minTocHeadings',
     'checkForUpdates',
-    'disableTray'
+    'disableTray',
+    'customSearchEngineName',
+    'customSearchEngineUrl',
 ]);
 
 function getOptions() {