feat: per-note spellcheck (#815)

* feat: per-note spellcheck control

* fix: remove fill from svg

* feat: move spellcheck pref into defaults preferences section

* fix: use faded css class instead of opacity

* feat: plus editor 1.6.0
This commit is contained in:
Mo
2022-01-14 14:32:16 -06:00
committed by GitHub
parent 2b12f7f0e9
commit 063c3b2fee
15 changed files with 265 additions and 106 deletions

View File

@@ -1,6 +1,6 @@
import { Dropdown, DropdownItem } from '@/components/Dropdown';
import { IconType } from '@/components/Icon';
import { FeatureIdentifier } from '@standardnotes/snjs';
import { FeatureIdentifier, PrefKey } from '@standardnotes/snjs';
import {
PreferencesGroup,
PreferencesSegment,
@@ -16,6 +16,8 @@ import {
} from '@standardnotes/snjs';
import { FunctionComponent } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
import { Switch } from '@/components/Switch';
type Props = {
application: WebApplication;
@@ -87,6 +89,15 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
getDefaultEditor(application)?.package_info?.identifier || 'plain-editor'
);
const [spellcheck, setSpellcheck] = useState(() =>
application.getPreference(PrefKey.EditorSpellcheck, true)
);
const toggleSpellcheck = () => {
setSpellcheck(!spellcheck);
application.getAppState().toggleGlobalSpellcheck();
};
useEffect(() => {
const editors = application.componentManager
.componentsForArea(ComponentArea.Editor)
@@ -149,6 +160,17 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
/>
</div>
</div>
<HorizontalSeparator classes="mt-5 mb-3" />
<div className="flex items-center justify-between">
<div className="flex flex-col">
<Subtitle>Spellcheck</Subtitle>
<Text>
The default spellcheck value for new notes. Spellcheck can be configured per note from the note context menu.
Spellcheck may degrade overall typing performance with long notes.
</Text>
</div>
<Switch onChange={toggleSpellcheck} checked={spellcheck} />
</div>
</PreferencesSegment>
</PreferencesGroup>
);

View File

@@ -25,9 +25,6 @@ export const Tools: FunctionalComponent<Props> = observer(
const [marginResizers, setMarginResizers] = useState(() =>
application.getPreference(PrefKey.EditorResizersEnabled, true)
);
const [spellcheck, setSpellcheck] = useState(() =>
application.getPreference(PrefKey.EditorSpellcheck, true)
);
const toggleMonospaceFont = () => {
setMonospaceFont(!monospaceFont);
@@ -39,11 +36,6 @@ export const Tools: FunctionalComponent<Props> = observer(
application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers);
};
const toggleSpellcheck = () => {
setSpellcheck(!spellcheck);
application.setPreference(PrefKey.EditorSpellcheck, !spellcheck);
};
return (
<PreferencesGroup>
<PreferencesSegment>
@@ -67,17 +59,6 @@ export const Tools: FunctionalComponent<Props> = observer(
checked={marginResizers}
/>
</div>
<HorizontalSeparator classes="mt-5 mb-3" />
<div className="flex items-center justify-between">
<div className="flex flex-col">
<Subtitle>Spellcheck</Subtitle>
<Text>
May degrade performance, especially with long notes. This option only controls
spellcheck in the Plain Editor.
</Text>
</div>
<Switch onChange={toggleSpellcheck} checked={spellcheck} />
</div>
</div>
</PreferencesSegment>
</PreferencesGroup>