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:
@@ -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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user