Merge pull request #4210 from weseek/imprv/gw6988-switch-textlint-enabled

Imprv/gw6988 switch textlint enabled

packages/app/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -159,7 +159,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
       : { dicPath: 'https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict' };
 
     // TODO: Get configs from db
-    this.isLintEnabled = true;
+    this.isTextlintEnabled = true;
 
     this.textlintConfig = [
       { name: 'common-misspellings' },
@@ -224,7 +224,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   initTextlintSettings() {
     this.textlintValidator = createValidator(this.textlintConfig);
-    this.codemirrorLintConfig = this.isLintEnabled ? { getAnnotations: this.textlintValidator, async: true } : undefined;
+    this.codemirrorLintConfig = this.isTextlintEnabled ? { getAnnotations: this.textlintValidator, async: true } : undefined;
   }
 
   getCodeMirror() {
@@ -908,7 +908,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     if (this.props.lineNumbers != null) {
       gutters.push('CodeMirror-linenumbers', 'CodeMirror-foldgutter');
     }
-    if (this.isLintEnabled === true) {
+    if (this.isTextlintEnabled === true) {
       gutters.push('CodeMirror-lint-markers');
     }
 

packages/app/src/components/PageEditor/OptionsSelector.jsx

@@ -10,6 +10,7 @@ import {
 import { withUnstatedContainers } from '../UnstatedUtils';
 import AppContainer from '~/client/services/AppContainer';
 import EditorContainer from '~/client/services/EditorContainer';
+import { toastError } from '~/client/util/apiNotification';
 
 
 export const defaultEditorOptions = {
@@ -33,6 +34,7 @@ class OptionsSelector extends React.Component {
     this.state = {
       isCddMenuOpened: false,
       isMathJaxEnabled,
+      isTextlintEnabled: false,
     };
 
     this.availableThemes = [
@@ -51,6 +53,8 @@ class OptionsSelector extends React.Component {
     this.onClickStyleActiveLine = this.onClickStyleActiveLine.bind(this);
     this.onClickRenderMathJaxInRealtime = this.onClickRenderMathJaxInRealtime.bind(this);
     this.onClickMarkdownTableAutoFormatting = this.onClickMarkdownTableAutoFormatting.bind(this);
+    this.switchTextlintEnabledHandler = this.switchTextlintEnabledHandler.bind(this);
+    this.updateIsTextlintEnabledToDB = this.updateIsTextlintEnabledToDB.bind(this);
     this.onToggleConfigurationDropdown = this.onToggleConfigurationDropdown.bind(this);
     this.onChangeIndentSize = this.onChangeIndentSize.bind(this);
   }
@@ -109,6 +113,24 @@ class OptionsSelector extends React.Component {
 
     // save to localStorage
     editorContainer.saveOptsToLocalStorage();
+
+
+  }
+
+  async updateIsTextlintEnabledToDB() {
+    const { appContainer } = this.props;
+    try {
+      await appContainer.apiv3Put('/personal-setting/editor-settings', { isTextlintEnabled: this.state.isTextlintEnabled });
+    }
+    catch (err) {
+      toastError(err);
+    }
+
+  }
+
+  async switchTextlintEnabledHandler() {
+    this.setState({ isTextlintEnabled: !this.state.isTextlintEnabled });
+    this.updateIsTextlintEnabledToDB();
   }
 
   onToggleConfigurationDropdown(newValue) {
@@ -288,8 +310,8 @@ class OptionsSelector extends React.Component {
   }
 
   renderIsTextlintEnabledMenuItem() {
-    // TODO: GW-6988 connect to back end
-    const isActive = true;
+    const isActive = this.state.isTextlintEnabled;
+
     const iconClasses = ['text-info'];
     if (isActive) {
       iconClasses.push('ti-check');
@@ -297,9 +319,8 @@ class OptionsSelector extends React.Component {
     const iconClassName = iconClasses.join(' ');
 
     return (
-      // TODO: GW-6988 connect to back end
       // eslint-disable-next-line no-console
-      <DropdownItem toggle={false} onClick={console.log('Lint button pressed')}>
+      <DropdownItem toggle={false} onClick={this.switchTextlintEnabledHandler}>
         <div className="d-flex justify-content-between">
           <span className="icon-container"></span>
           <span className="menuitem-label">Textlint</span>