Add support for disabling spell checking

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

@@ -28,6 +28,7 @@ limitations under the License.
     color: $primary-content;
     margin-bottom: 10px;
     margin-top: 10px;
+    margin-right: 100px;
 }
 
 .mx_SettingsTab_heading:nth-child(n + 2) {
@@ -41,6 +42,7 @@ limitations under the License.
     color: $primary-content;
     margin-bottom: 10px;
     margin-top: 12px;
+    margin-right: 100px;
 }
 
 .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/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,12 @@ export default class GeneralUserSettingsTab extends React.Component<IProps, ISta
     }
 
     public async componentDidMount(): Promise<void> {
-        const plaf = PlatformPeg.get();
-        if (plaf) {
+        const spellCheckLanguages = await PlatformPeg.get().getSpellCheckLanguages();
+
+        if (spellCheckLanguages) {
             this.setState({
-                spellCheckLanguages: await plaf.getSpellCheckLanguages(),
+                spellCheckEnabled: Boolean(spellCheckLanguages.length),
+                spellCheckLanguages,
             });
         }
     }
@@ -238,10 +244,20 @@ 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 });
+
+        if (spellCheckEnabled && IS_MAC) {
+            // XXX: On macOS the languages are controlled by the system
+            // settings, so we just set something, so that spell check gets
+            // enabled
+            PlatformPeg.get()?.setSpellCheckLanguages(["en_US"]);
+        } else if (!spellCheckEnabled) {
+            this.setState({ spellCheckLanguages: [] });
+            PlatformPeg.get()?.setSpellCheckLanguages([]);
         }
     };
 
@@ -368,12 +384,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>
         );
     }

src/i18n/strings/en_EN.json

@@ -1432,7 +1432,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!",