Merge pull request #4227 from weseek/imprv/gw7279-reflect-isTextlint-enabled-new

Imprv/gw7279 reflect is textlint enabled new

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

@@ -158,9 +158,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
       ? { dicPath: '/static/dict/cdn' }
       : { dicPath: 'https://cdn.jsdelivr.net/npm/kuromoji@0.1.2/dict' };
 
-    // TODO: Get configs from db
-    this.isTextlintEnabled = true;
-
     this.textlintConfig = [
       { name: 'no-unmatched-pair' },
       { name: 'common-misspellings' },
@@ -235,7 +232,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   initTextlintSettings() {
     this.textlintValidator = createValidator(this.textlintConfig);
-    this.codemirrorLintConfig = this.isTextlintEnabled ? { getAnnotations: this.textlintValidator, async: true } : undefined;
+    this.codemirrorLintConfig = { getAnnotations: this.textlintValidator, async: true };
   }
 
   getCodeMirror() {
@@ -911,7 +908,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
   render() {
     const mode = this.state.isGfmMode ? 'gfm-growi' : undefined;
-    const lint = this.codemirrorLintConfig;
+    const lint = this.props.isTextlintEnabled ? this.codemirrorLintConfig : false;
     const additionalClasses = Array.from(this.state.additionalClassSet).join(' ');
     const placeholder = this.state.isGfmMode ? 'Input with Markdown..' : 'Input with Plain Text..';
 
@@ -919,7 +916,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     if (this.props.lineNumbers != null) {
       gutters.push('CodeMirror-linenumbers', 'CodeMirror-foldgutter');
     }
-    if (this.isTextlintEnabled === true) {
+    if (this.props.isTextlintEnabled === true) {
       gutters.push('CodeMirror-lint-markers');
     }
 
@@ -1013,6 +1010,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
 CodeMirrorEditor.propTypes = Object.assign({
   editorOptions: PropTypes.object.isRequired,
+  isTextlintEnabled: PropTypes.bool.isRequired,
   emojiStrategy: PropTypes.object,
   lineNumbers: PropTypes.bool,
   onMarkdownHelpButtonClicked: PropTypes.func,

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

@@ -316,6 +316,7 @@ export default class Editor extends AbstractEditor {
                         ref={(c) => { this.cmEditor = c }}
                         indentSize={editorContainer.state.indentSize}
                         editorOptions={editorContainer.state.editorOptions}
+                        isTextlintEnabled={editorContainer.state.isTextlintEnabled}
                         onPasteFiles={this.pasteFilesHandler}
                         onDragEnter={this.dragEnterHandler}
                         onMarkdownHelpButtonClicked={this.showMarkdownHelp}

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

@@ -126,7 +126,7 @@ class OptionsSelector extends React.Component {
   }
 
   async updateIsTextlintEnabledToDB(newVal) {
-    const { appContainer, editorContainer } = this.props;
+    const { appContainer } = this.props;
     try {
       await appContainer.apiv3Put('/personal-setting/editor-settings', { isTextlintEnabled: newVal });
     }
@@ -137,8 +137,10 @@ class OptionsSelector extends React.Component {
   }
 
   async switchTextlintEnabledHandler() {
+    const { editorContainer } = this.props;
     const newVal = !this.state.isTextlintEnabled;
     this.setState({ isTextlintEnabled: newVal });
+    editorContainer.setState({ isTextlintEnabled: newVal });
     this.updateIsTextlintEnabledToDB(newVal);
   }