<commit_before>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, true)
    );
    const [marginResizers, setMarginResizers] = useState(() =>
      application.getPreference(PrefKey.EditorResizersEnabled, true)
    );
    const [spellcheck, setSpellcheck] = useState(() =>
      application.getPreference(PrefKey.EditorSpellcheck, true)
    );

    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>
    );
  }
);
<commit_msg>fix: spellcheck toggle note about plain editor only<commit_after>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, true)
    );
    const [marginResizers, setMarginResizers] = useState(() =>
      application.getPreference(PrefKey.EditorResizersEnabled, true)
    );
    const [spellcheck, setSpellcheck] = useState(() =>
      application.getPreference(PrefKey.EditorSpellcheck, true)
    );

    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. This option only controls
                  spellcheck in the Plain Editor.
                </Text>
              </div>
              <Switch onChange={toggleSpellcheck} checked={spellcheck} />
            </div>
          </div>
        </PreferencesSegment>
      </PreferencesGroup>
    );
  }
);

{'fraction_non_alphanumeric': 0.11356013416387159, 'fraction_numerical': 0.0015971889474524837, 'mean_word_length': 2.4654122855561704, 'pattern_counts': {'":': 0, '<': 79, '<?xml version=': 0, '>': 93, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1218981', 'n_tokens_mistral': 1658, 'n_tokens_neox': 1638, 'n_words': 352}