87 lines
3.0 KiB
TypeScript
87 lines
3.0 KiB
TypeScript
import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
|
|
import { Switch } from '@/components/Switch';
|
|
import {
|
|
PreferencesGroup,
|
|
PreferencesSegment,
|
|
Subtitle,
|
|
Text,
|
|
Title,
|
|
} from '@/preferences/components';
|
|
import { WebApplication } from '@/ui_models/application';
|
|
import { PrefKey } from '@standardnotes/snjs';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { FunctionalComponent } from 'preact';
|
|
import { useState } from 'preact/hooks';
|
|
|
|
type Props = {
|
|
application: WebApplication;
|
|
};
|
|
|
|
export const Tools: FunctionalComponent<Props> = observer(
|
|
({ application }: Props) => {
|
|
const [monospaceFont, setMonospaceFont] = useState(() =>
|
|
application.getPreference(PrefKey.EditorMonospaceEnabled)
|
|
);
|
|
const [marginResizers, setMarginResizers] = useState(() =>
|
|
application.getPreference(PrefKey.EditorResizersEnabled)
|
|
);
|
|
const [spellcheck, setSpellcheck] = useState(() =>
|
|
application.getPreference(PrefKey.EditorSpellcheck)
|
|
);
|
|
|
|
const toggleMonospaceFont = () => {
|
|
setMonospaceFont(!monospaceFont);
|
|
application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont);
|
|
};
|
|
|
|
const toggleMarginResizers = () => {
|
|
setMarginResizers(!marginResizers);
|
|
application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers);
|
|
};
|
|
|
|
const toggleSpellcheck = () => {
|
|
setSpellcheck(!spellcheck);
|
|
application.setPreference(PrefKey.EditorSpellcheck, !spellcheck);
|
|
};
|
|
|
|
return (
|
|
<PreferencesGroup>
|
|
<PreferencesSegment>
|
|
<Title>Tools</Title>
|
|
<div className="mt-2">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<Subtitle>Monospace Font</Subtitle>
|
|
<Text>Toggles the font style in the Plain Text editor.</Text>
|
|
</div>
|
|
<Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
|
|
</div>
|
|
<HorizontalSeparator classes="mt-5 mb-3" />
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<Subtitle>Margin Resizers</Subtitle>
|
|
<Text>Allows left and right editor margins to be resized.</Text>
|
|
</div>
|
|
<Switch
|
|
onChange={toggleMarginResizers}
|
|
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. Available
|
|
in the Plain Text editor and most specialty editors.
|
|
</Text>
|
|
</div>
|
|
<Switch onChange={toggleSpellcheck} checked={spellcheck} />
|
|
</div>
|
|
</div>
|
|
</PreferencesSegment>
|
|
</PreferencesGroup>
|
|
);
|
|
}
|
|
);
|