Add support for disabling spell checking (#8604)

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

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

@@ -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.pcss

@@ -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/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

src/i18n/strings/en_EN.json

@@ -1435,7 +1435,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!",
@@ -2377,6 +2377,7 @@
     "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use %(brand)s with an existing Matrix account on a different homeserver.",
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",
     "Homeserver": "Homeserver",
+    "Choose a locale": "Choose a locale",
     "Continue with %(provider)s": "Continue with %(provider)s",
     "Sign in with single sign-on": "Sign in with single sign-on",
     "And %(count)s more...|other": "And %(count)s more...",