Add support for disabling spell checking (#8604)

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/elements/Dropdown.tsx

@@ -82,6 +82,8 @@ interface IProps {
     // width.
     menuWidth?: number;
     searchEnabled?: boolean;
+    // Placeholder to show when no value is selected
+    placeholder?: string;
     // Called when the selected option changes
     onOptionChange(dropdownKey: string): void;
     // Called when the value of the search field changes
@@ -362,7 +364,7 @@ export default class Dropdown extends React.Component<IProps, IState> {
                 this.props.getShortOption(this.props.value) :
                 this.childrenByKey[this.props.value];
             currentValue = <div className="mx_Dropdown_option" id={`${this.props.id}_value`}>
-                { selectedChild }
+                { selectedChild || this.props.placeholder }
             </div>;
         }
 

src/components/views/elements/SpellCheckLanguagesDropdown.tsx

@@ -116,7 +116,9 @@ export default class SpellCheckLanguagesDropdown extends React.Component<SpellCh
             onSearchChange={this.onSearchChange}
             searchEnabled={true}
             value={value}
-            label={_t("Language Dropdown")}>
+            label={_t("Language Dropdown")}
+            placeholder={_t("Choose a locale")}
+        >
             { options }
         </Dropdown>;
     }

src/components/views/elements/ToggleSwitch.tsx

@@ -25,7 +25,7 @@ interface IProps {
     checked: boolean;
 
     // Whether or not the user can interact with the switch
-    disabled: boolean;
+    disabled?: boolean;
 
     // Called when the checked state changes. First argument will be the new state.
     onChange(checked: boolean): void;

src/components/views/settings/SpellCheckSettings.tsx

@@ -72,6 +72,7 @@ export default class SpellCheckLanguages extends React.Component<SpellCheckLangu
         e.preventDefault();
 
         const language = this.state.newLanguage;
+        this.setState({ newLanguage: "" });
 
         if (!language) return;
         if (this.props.languages.includes(language)) return;

src/components/views/settings/tabs/user/GeneralUserSettingsTab.tsx

@@ -50,6 +50,8 @@ import ChangePassword from "../../ChangePassword";
 import InlineTermsAgreement from "../../../terms/InlineTermsAgreement";
 import SetIdServer from "../../SetIdServer";
 import SetIntegrationManager from "../../SetIntegrationManager";
+import ToggleSwitch from "../../../elements/ToggleSwitch";
+import { IS_MAC } from "../../../../../Keyboard";
 
 interface IProps {
     closeSettingsFn: () => void;
@@ -57,6 +59,7 @@ interface IProps {
 
 interface IState {
     language: string;
+    spellCheckEnabled: boolean;
     spellCheckLanguages: string[];
     haveIdServer: boolean;
     serverSupportsSeparateAddAndBind: boolean;
@@ -85,6 +88,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
         this.state = {
             language: languageHandler.getCurrentLanguage(),
+            spellCheckEnabled: false,
             spellCheckLanguages: [],
             haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
             serverSupportsSeparateAddAndBind: null,
@@ -126,10 +130,16 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     }
 
     public async componentDidMount(): Promise<void> {
-        const plaf = PlatformPeg.get();
-        if (plaf) {
+        const plat = PlatformPeg.get();
+        const [spellCheckEnabled, spellCheckLanguages] = await Promise.all([
+            plat.getSpellCheckEnabled(),
+            plat.getSpellCheckLanguages(),
+        ]);
+
+        if (spellCheckLanguages) {
             this.setState({
-                spellCheckLanguages: await plaf.getSpellCheckLanguages(),
+                spellCheckEnabled,
+                spellCheckLanguages,
             });
         }
     }
@@ -238,11 +248,12 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
     private onSpellCheckLanguagesChange = (languages: string[]): void => {
         this.setState({ spellCheckLanguages: languages });
+        PlatformPeg.get()?.setSpellCheckLanguages(languages);
+    };
 
-        const plaf = PlatformPeg.get();
-        if (plaf) {
-            plaf.setSpellCheckLanguages(languages);
-        }
+    private onSpellCheckEnabledChange = (spellCheckEnabled: boolean): void => {
+        this.setState({ spellCheckEnabled });
+        PlatformPeg.get()?.setSpellCheckEnabled(spellCheckEnabled);
     };
 
     private onPasswordChangeError = (err): void => {
@@ -368,12 +379,18 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
     private renderSpellCheckSection(): JSX.Element {
         return (
-            <div className="mx_SettingsTab_section">
-                <span className="mx_SettingsTab_subheading">{ _t("Spell check dictionaries") }</span>
-                <SpellCheckSettings
+            <div className="mx_SettingsTab_section mx_SettingsTab_section_spellcheck">
+                <span className="mx_SettingsTab_subheading">
+                    { _t("Spell check") }
+                    <ToggleSwitch
+                        checked={this.state.spellCheckEnabled}
+                        onChange={this.onSpellCheckEnabledChange}
+                    />
+                </span>
+                { (this.state.spellCheckEnabled && !IS_MAC) && <SpellCheckSettings
                     languages={this.state.spellCheckLanguages}
                     onLanguagesChange={this.onSpellCheckLanguagesChange}
-                />
+                /> }
             </div>
         );
     }
@@ -449,7 +466,7 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
 
     public render(): JSX.Element {
         const plaf = PlatformPeg.get();
-        const supportsMultiLanguageSpellCheck = plaf.supportsMultiLanguageSpellCheck();
+        const supportsMultiLanguageSpellCheck = plaf.supportsSpellCheckSettings();
 
         const discoWarning = this.state.requiredPolicyInfo.hasTerms
             ? <img