Add support for disabling spell checking

res/css/views/settings/tabs/_SettingsTab.scss

@@ -37,6 +37,7 @@ limitations under the License.
     color: $primary-content;
     margin-top: 10px; // TODO: Use a spacing variable
     margin-bottom: 10px; // TODO: Use a spacing variable
+    margin-right: 100px; // TODO: Use a spacing variable
 
     &:nth-child(n + 2) {
         margin-top: var(--SettingsTab_heading_nth_child-margin-top);
@@ -50,6 +51,7 @@ limitations under the License.
     color: $primary-content;
     margin-top: $spacing-12;
     margin-bottom: 10px; // TODO: Use a spacing variable
+    margin-right: 100px; // TODO: Use a spacing variable
 }
 
 .mx_SettingsTab_subsectionText {

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -46,3 +46,7 @@ limitations under the License.
 .mx_GeneralUserSettingsTab_warningIcon {
     vertical-align: middle;
 }
+
+.mx_SettingsTab_section_spellcheck .mx_ToggleSwitch {
+    float: right;
+}

src/BasePlatform.ts

@@ -151,7 +151,7 @@ export default abstract class BasePlatform {
      * Return true if platform supports multi-language
      * spell-checking, otherwise false.
      */
-    public supportsMultiLanguageSpellCheck(): boolean {
+    public supportsSpellCheckSettings(): boolean {
         return false;
     }
 
@@ -274,6 +274,12 @@ export default abstract class BasePlatform {
 
     public setLanguage(preferredLangs: string[]) {}
 
+    public setSpellCheckEnabled(enabled: boolean): void {}
+
+    public async getSpellCheckEnabled(): Promise<boolean> {
+        return null;
+    }
+
     public setSpellCheckLanguages(preferredLangs: string[]) {}
 
     public getSpellCheckLanguages(): Promise<string[]> | null {

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/tabs/user/GeneralUserSettingsTab.tsx

@@ -50,13 +50,16 @@ 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;
 }
 
 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

src/i18n/strings/en_EN.json

@@ -1434,7 +1434,7 @@
     "Set a new account password...": "Set a new account password...",
     "Account": "Account",
     "Language and region": "Language and region",
-    "Spell check dictionaries": "Spell check dictionaries",
+    "Spell check": "Spell check",
     "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.": "Agree to the identity server (%(serverName)s) Terms of Service to allow yourself to be discoverable by email address or phone number.",
     "Account management": "Account management",
     "Deactivating your account is a permanent action — be careful!": "Deactivating your account is a permanent action — be careful!",