feat(options/spellcheck): add button to edit custom words

This commit is contained in:
Elian Doran
2026-04-06 21:50:54 +03:00
parent 7b056fe1af
commit a70142a4dc
2 changed files with 44 additions and 12 deletions

View File

@@ -1500,7 +1500,12 @@
"description": "These options apply only for desktop builds, browsers will use their own native spell check.",
"enable": "Check spelling",
"language_code_label": "Spell Check Languages",
"restart-required": "Changes to the spell check options will take effect after application restart."
"restart-required": "Changes to the spell check options will take effect after application restart.",
"custom_dictionary_title": "Custom Dictionary",
"custom_dictionary_description": "Words added to the dictionary are synced across all your devices.",
"custom_dictionary_edit": "Custom words",
"custom_dictionary_edit_description": "Edit the list of words that should not be flagged by the spell checker. Changes will be visible after a restart.",
"custom_dictionary_open": "Edit dictionary"
},
"sync_2": {
"config_title": "Sync Configuration",

View File

@@ -1,7 +1,9 @@
import { useCallback, useMemo } from "preact/hooks";
import appContext from "../../../components/app_context";
import { t } from "../../../services/i18n";
import { dynamicRequire, isElectron } from "../../../services/utils";
import Button from "../../react/Button";
import FormText from "../../react/FormText";
import FormToggle from "../../react/FormToggle";
import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
@@ -25,19 +27,23 @@ function ElectronSpellcheckSettings() {
const [ spellCheckEnabled, setSpellCheckEnabled ] = useTriliumOptionBool("spellCheckEnabled");
return (
<OptionsSection title={t("spellcheck.title")}>
<FormText>{t("spellcheck.restart-required")}</FormText>
<>
<OptionsSection title={t("spellcheck.title")}>
<FormText>{t("spellcheck.restart-required")}</FormText>
<OptionsRow name="spell-check-enabled" label={t("spellcheck.enable")}>
<FormToggle
switchOnName="" switchOffName=""
currentValue={spellCheckEnabled}
onChange={setSpellCheckEnabled}
/>
</OptionsRow>
<OptionsRow name="spell-check-enabled" label={t("spellcheck.enable")}>
<FormToggle
switchOnName="" switchOffName=""
currentValue={spellCheckEnabled}
onChange={setSpellCheckEnabled}
/>
</OptionsRow>
{spellCheckEnabled && <SpellcheckLanguages />}
</OptionsSection>
{spellCheckEnabled && <SpellcheckLanguages />}
</OptionsSection>
{spellCheckEnabled && <CustomDictionary />}
</>
);
}
@@ -84,6 +90,27 @@ function SpellcheckLanguages() {
);
}
function CustomDictionary() {
function openDictionary() {
appContext.triggerCommand("openInPopup", { noteIdOrPath: "_customDictionary" });
}
return (
<OptionsSection title={t("spellcheck.custom_dictionary_title")}>
<FormText>{t("spellcheck.custom_dictionary_description")}</FormText>
<OptionsRow name="custom-dictionary" label={t("spellcheck.custom_dictionary_edit")} description={t("spellcheck.custom_dictionary_edit_description")}>
<Button
name="open-custom-dictionary"
text={t("spellcheck.custom_dictionary_open")}
icon="bx bx-edit"
onClick={openDictionary}
/>
</OptionsRow>
</OptionsSection>
);
}
function WebSpellcheckSettings() {
return (
<OptionsSection title={t("spellcheck.title")}>