use useEditorSettings hook

packages/app/src/client/services/EditorContainer.js

@@ -17,7 +17,7 @@ export default class EditorContainer extends Container {
 
     this.appContainer = appContainer;
     this.appContainer.registerContainer(this);
-    this.retrieveEditorSettings = this.retrieveEditorSettings.bind(this);
+    // this.retrieveEditorSettings = this.retrieveEditorSettings.bind(this);
 
     const mainContent = document.querySelector('#content-main');
 
@@ -33,8 +33,8 @@ export default class EditorContainer extends Container {
       previewOptions: {},
 
       // Defaults to null to show modal when not in DB
-      isTextlintEnabled: null,
-      textlintRules: [],
+      // isTextlintEnabled: null,
+      // textlintRules: [],
 
       indentSize: this.appContainer.config.adminPreferredIndentSize || 4,
     };
@@ -181,24 +181,24 @@ export default class EditorContainer extends Container {
   /**
    * Retrieve Editor Settings
    */
-  async retrieveEditorSettings() {
-    if (this.appContainer.isGuestUser) {
-      return;
-    }
+  // async retrieveEditorSettings() {
+  //   if (this.appContainer.isGuestUser) {
+  //     return;
+  //   }
 
-    const { data } = await apiv3Get('/personal-setting/editor-settings');
+  //   const { data } = await apiv3Get('/personal-setting/editor-settings');
 
-    if (data?.textlintSettings == null) {
-      return;
-    }
+  //   if (data?.textlintSettings == null) {
+  //     return;
+  //   }
 
-    // Defaults to null to show modal when not in DB
-    const { isTextlintEnabled = null, textlintRules = [] } = data.textlintSettings;
+  //   // Defaults to null to show modal when not in DB
+  //   const { isTextlintEnabled = null, textlintRules = [] } = data.textlintSettings;
 
-    this.setState({
-      isTextlintEnabled,
-      textlintRules,
-    });
-  }
+  //   this.setState({
+  //     isTextlintEnabled,
+  //     textlintRules,
+  //   });
+  // }
 
 }

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

@@ -10,6 +10,7 @@ import * as loadScript from 'simple-load-script';
 import urljoin from 'url-join';
 
 import InterceptorManager from '~/services/interceptor-manager';
+import { useEditorSettings } from '~/stores/editor';
 import loggerFactory from '~/utils/logger';
 
 import { UncontrolledCodeMirror } from '../UncontrolledCodeMirror';
@@ -207,13 +208,16 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   async initializeTextlint() {
-    if (this.props.onInitializeTextlint != null) {
-      await this.props.onInitializeTextlint();
-      // If database has empty array, pass null instead to enable all default rules
-      const rulesForValidator = this.props.textlintRules?.length !== 0 ? this.props.textlintRules : null;
-      this.textlintValidator = createValidator(rulesForValidator);
-      this.codemirrorLintConfig = { getAnnotations: this.textlintValidator, async: true };
+    const { editorSettings } = this.props;
+
+    if (editorSettings == null) {
+      return;
     }
+
+    // If database has empty array, pass null instead to enable all default rules
+    const rulesForValidator = editorSettings.textlintRules?.length !== 0 ? editorSettings.textlintRules : null;
+    this.textlintValidator = createValidator(rulesForValidator);
+    this.codemirrorLintConfig = { getAnnotations: this.textlintValidator, async: true };
   }
 
   getCodeMirror() {
@@ -958,7 +962,10 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
 
   render() {
-    const lint = this.props.isTextlintEnabled ? this.codemirrorLintConfig : false;
+    const { editorSettings } = this.props;
+    const isTextlintEnabled = editorSettings?.isTextlintEnabled;
+
+    const lint = isTextlintEnabled ? this.codemirrorLintConfig : false;
     const additionalClasses = Array.from(this.state.additionalClassSet).join(' ');
     const placeholder = this.state.isGfmMode ? 'Input with Markdown..' : 'Input with Plain Text..';
 
@@ -966,7 +973,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
     if (this.props.lineNumbers != null) {
       gutters.push('CodeMirror-linenumbers', 'CodeMirror-foldgutter');
     }
-    if (this.props.isTextlintEnabled === true) {
+    if (isTextlintEnabled) {
       gutters.push('CodeMirror-lint-markers');
     }
 
@@ -1058,15 +1065,22 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
 CodeMirrorEditor.propTypes = Object.assign({
   editorOptions: PropTypes.object.isRequired,
-  isTextlintEnabled: PropTypes.bool,
-  textlintRules: PropTypes.array,
+  // isTextlintEnabled: PropTypes.bool,
+  // textlintRules: PropTypes.array,
   lineNumbers: PropTypes.bool,
+  editorSettings: PropTypes.object,
   onMarkdownHelpButtonClicked: PropTypes.func,
   onAddAttachmentButtonClicked: PropTypes.func,
-  onInitializeTextlint: PropTypes.func,
+  // onInitializeTextlint: PropTypes.func,
 }, AbstractEditor.propTypes);
 
 CodeMirrorEditor.defaultProps = {
   lineNumbers: true,
-  isTextlintEnabled: false,
+  // isTextlintEnabled: false,
+};
+
+const CodeMirrorEditorWrapper = (props) => {
+  const { editorSettings } = useEditorSettings();
+
+  return <CodeMirrorEditor {...props} editorSettings={editorSettings} />;
 };

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

@@ -1,24 +1,24 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Subscribe } from 'unstated';
 
+import PropTypes from 'prop-types';
+import Dropzone from 'react-dropzone';
 import {
   Modal, ModalHeader, ModalBody,
 } from 'reactstrap';
+import { Subscribe } from 'unstated';
 
-import Dropzone from 'react-dropzone';
 
-import EditorContainer from '~/client/services/EditorContainer';
 import AppContainer from '~/client/services/AppContainer';
+import EditorContainer from '~/client/services/EditorContainer';
+
 import { withUnstatedContainers } from '../UnstatedUtils';
 
-import Cheatsheet from './Cheatsheet';
 import AbstractEditor from './AbstractEditor';
+import Cheatsheet from './Cheatsheet';
 import CodeMirrorEditor from './CodeMirrorEditor';
+import pasteHelper from './PasteHelper';
 import TextAreaEditor from './TextAreaEditor';
 
-import pasteHelper from './PasteHelper';
 
 class Editor extends AbstractEditor {
 
@@ -285,7 +285,9 @@ class Editor extends AbstractEditor {
       flexDirection: 'column',
     };
 
-    const isMobile = this.props.isMobile;
+    const {
+      isMobile,
+    } = this.props;
 
     return (
       <>
@@ -320,9 +322,6 @@ class Editor extends AbstractEditor {
                           ref={(c) => { this.cmEditor = c }}
                           indentSize={editorContainer.state.indentSize}
                           editorOptions={editorContainer.state.editorOptions}
-                          isTextlintEnabled={editorContainer.state.isTextlintEnabled}
-                          textlintRules={editorContainer.state.textlintRules}
-                          onInitializeTextlint={editorContainer.retrieveEditorSettings}
                           onPasteFiles={this.pasteFilesHandler}
                           onDragEnter={this.dragEnterHandler}
                           onMarkdownHelpButtonClicked={this.showMarkdownHelp}
@@ -390,4 +389,5 @@ Editor.propTypes = Object.assign({
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 }, AbstractEditor.propTypes);
 
+
 export default withUnstatedContainers(Editor, [EditorContainer, AppContainer]);