replace editorContainer.editorOptions with editorSettings

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

@@ -7,12 +7,6 @@ import { apiv3Get } from '../util/apiv3-client';
 const logger = loggerFactory('growi:services:EditorContainer');
 
 
-const defaultEditorOptions = {
-  theme: 'elegant',
-  keymapMode: 'default',
-  styleActiveLine: false,
-};
-
 const defaultPreviewOptions = {
   renderMathJaxInRealtime: false,
   renderDrawioInRealtime: true,
@@ -41,7 +35,6 @@ export default class EditorContainer extends Container {
     this.state = {
       tags: null,
 
-      editorOptions: defaultEditorOptions,
       previewOptions: defaultPreviewOptions,
 
       // Defaults to null to show modal when not in DB

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

@@ -519,7 +519,7 @@ class CodeMirrorEditor extends AbstractEditor {
     const context = {
       handlers: [], // list of handlers which process enter key
       editor: this,
-      editorOptions: this.props.editorOptions,
+      editorSettings: this.props.editorSettings,
     };
 
     const interceptorManager = this.interceptorManager;
@@ -1008,6 +1008,8 @@ class CodeMirrorEditor extends AbstractEditor {
           value={this.state.value}
           options={{
             indentUnit: this.props.indentSize,
+            theme: this.props.editorSettings.theme ?? 'elegant',
+            styleActiveLine: this.props.editorSettings.styleActiveLine,
             lineWrapping: true,
             scrollPastEnd: true,
             autoRefresh: { force: true }, // force option is enabled by autorefresh.ext.js -- Yuki Takei
@@ -1066,7 +1068,7 @@ class CodeMirrorEditor extends AbstractEditor {
         <HandsontableModal
           ref={this.handsontableModal}
           onSave={(table) => { return mtu.replaceFocusedMarkdownTableWithEditor(this.getCodeMirror(), table) }}
-          ignoreAutoFormatting={this.props.editorOptions.ignoreMarkdownTableAutoFormatting}
+          autoFormatMarkdownTable={this.props.editorSettings.autoFormatMarkdownTable}
         />
         <DrawioModal
           ref={this.drawioModal}
@@ -1080,11 +1082,10 @@ class CodeMirrorEditor extends AbstractEditor {
 }
 
 CodeMirrorEditor.propTypes = Object.assign({
-  editorOptions: PropTypes.object.isRequired,
   isTextlintEnabled: PropTypes.bool,
   // textlintRules: PropTypes.array,
   lineNumbers: PropTypes.bool,
-  editorSettings: PropTypes.object,
+  editorSettings: PropTypes.object.isRequired,
   onMarkdownHelpButtonClicked: PropTypes.func,
   onAddAttachmentButtonClicked: PropTypes.func,
   // onInitializeTextlint: PropTypes.func,
@@ -1092,14 +1093,6 @@ CodeMirrorEditor.propTypes = Object.assign({
 
 CodeMirrorEditor.defaultProps = {
   lineNumbers: true,
-  // isTextlintEnabled: false,
 };
 
-const CodeMirrorEditorWrapper = React.forwardRef((props, ref) => {
-  const { data: editorSettings } = useEditorSettings();
-  const { data: idTextlintEnabled } = useIsTextlintEnabled();
-
-  return <CodeMirrorEditor ref={ref} {...props} idTextlintEnabled={idTextlintEnabled} editorSettings={editorSettings} />;
-});
-
-export default CodeMirrorEditorWrapper;
+export default CodeMirrorEditor;

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

@@ -10,6 +10,7 @@ import { Subscribe } from 'unstated';
 
 import AppContainer from '~/client/services/AppContainer';
 import EditorContainer from '~/client/services/EditorContainer';
+import { useEditorSettings, useIsTextlintEnabled } from '~/stores/editor';
 
 import { withUnstatedContainers } from '../UnstatedUtils';
 
@@ -321,7 +322,6 @@ class Editor extends AbstractEditor {
                         <CodeMirrorEditor
                           ref={(c) => { this.cmEditor = c }}
                           indentSize={editorContainer.state.indentSize}
-                          editorOptions={editorContainer.state.editorOptions}
                           onPasteFiles={this.pasteFilesHandler}
                           onDragEnter={this.dragEnterHandler}
                           onMarkdownHelpButtonClicked={this.showMarkdownHelp}
@@ -383,11 +383,26 @@ Editor.propTypes = Object.assign({
   isMobile: PropTypes.bool,
   isUploadable: PropTypes.bool,
   isUploadableFile: PropTypes.bool,
+  idTextlintEnabled: PropTypes.bool,
   onChange: PropTypes.func,
   onUpload: PropTypes.func,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  editorSettings: PropTypes.object.isRequired,
 }, AbstractEditor.propTypes);
 
 
-export default withUnstatedContainers(Editor, [EditorContainer, AppContainer]);
+const EditorWithContainer = withUnstatedContainers(Editor, [EditorContainer, AppContainer]);
+
+const EditorWrapper = React.forwardRef((props, ref) => {
+  const { data: editorSettings } = useEditorSettings();
+  const { data: idTextlintEnabled } = useIsTextlintEnabled();
+
+  if (editorSettings == null) {
+    return <></>;
+  }
+
+  return <EditorWithContainer ref={ref} {...props} idTextlintEnabled={idTextlintEnabled} editorSettings={editorSettings} />;
+});
+
+export default EditorWrapper;

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

@@ -1,20 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import { HotTable } from '@handsontable/react';
+import Handsontable from 'handsontable';
+import PropTypes from 'prop-types';
 import {
   Collapse,
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
-
-import Handsontable from 'handsontable';
-import { HotTable } from '@handsontable/react';
 import { debounce } from 'throttle-debounce';
 
 
-import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
 import MarkdownTable from '~/client/models/MarkdownTable';
+
 import ExpandOrContractButton from '../ExpandOrContractButton';
 
+import MarkdownTableDataImportForm from './MarkdownTableDataImportForm';
+
 const DEFAULT_HOT_HEIGHT = 300;
 const MARKDOWNTABLE_TO_HANDSONTABLE_ALIGNMENT_SYMBOL_MAPPING = {
   r: 'htRight',
@@ -401,7 +402,7 @@ export default class HandsontableModal extends React.PureComponent {
   get markdownTableOption() {
     return {
       align: [].concat(this.state.markdownTable.options.align),
-      pad: this.props.ignoreAutoFormatting !== true,
+      pad: this.props.autoFormatMarkdownTable !== false,
     };
   }
 
@@ -518,5 +519,5 @@ export default class HandsontableModal extends React.PureComponent {
 
 HandsontableModal.propTypes = {
   onSave: PropTypes.func,
-  ignoreAutoFormatting: PropTypes.bool,
+  autoFormatMarkdownTable: PropTypes.bool,
 };

packages/app/src/components/PageEditor/MarkdownTableInterceptor.js

@@ -1,8 +1,9 @@
 import { BasicInterceptor } from '@growi/core';
 
-import mtu from './MarkdownTableUtil';
 import MarkdownTable from '~/client/models/MarkdownTable';
 
+import mtu from './MarkdownTableUtil';
+
 /**
  * Interceptor for markdown table
  */
@@ -56,8 +57,8 @@ export default class MarkdownTableInterceptor extends BasicInterceptor {
   async process(contextName, ...args) {
     const context = Object.assign(args[0]); // clone
     const editor = context.editor; // AbstractEditor instance
-    // "ignoreMarkdownTableAutoFormatting" may be undefined, so it is compared to true and converted to bool.
-    const noIntercept = (context.editorOptions.ignoreMarkdownTableAutoFormatting === true);
+    // "autoFormatMarkdownTable" may be undefined, so it is compared to true and converted to bool.
+    const noIntercept = (context.editorSettings?.autoFormatMarkdownTable === false);
 
     // do nothing if editor is not a CodeMirrorEditor or no intercept
     if (editor == null || editor.getCodeMirror() == null || noIntercept) {

packages/app/src/components/UncontrolledCodeMirror.tsx

@@ -3,8 +3,6 @@ import React, { forwardRef, ReactNode, Ref } from 'react';
 import { ICodeMirror, UnControlled as CodeMirror } from 'react-codemirror2';
 
 import AbstractEditor, { AbstractEditorProps } from '~/components/PageEditor/AbstractEditor';
-import { DEFAULT_THEME } from '~/interfaces/editor-settings';
-import { useEditorSettings } from '~/stores/editor';
 
 window.CodeMirror = require('codemirror');
 require('codemirror/addon/display/placeholder');
@@ -19,8 +17,6 @@ export interface UncontrolledCodeMirrorProps extends AbstractEditorProps {
 
 interface UncontrolledCodeMirrorCoreProps extends UncontrolledCodeMirrorProps {
   forwardedRef: Ref<UncontrolledCodeMirrorCore>;
-  theme?: string,
-  styleActiveLine?: boolean,
 }
 
 class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCoreProps> {
@@ -29,7 +25,6 @@ class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCo
 
     const {
       value, isGfmMode, lineNumbers, options, forwardedRef,
-      theme, styleActiveLine,
       ...rest
     } = this.props;
 
@@ -40,8 +35,6 @@ class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCo
         options={{
           lineNumbers: lineNumbers ?? true,
           mode: isGfmMode ? 'gfm-growi' : undefined,
-          theme: theme ?? DEFAULT_THEME,
-          styleActiveLine,
           tabSize: 4,
           ...options,
         }}
@@ -53,14 +46,10 @@ class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCo
 }
 
 export const UncontrolledCodeMirror = forwardRef<UncontrolledCodeMirrorCore, UncontrolledCodeMirrorProps>((props, ref) => {
-  const { data: editorSettings } = useEditorSettings();
-
   return (
     <UncontrolledCodeMirrorCore
       {...props}
       forwardedRef={ref}
-      theme={editorSettings?.theme}
-      styleActiveLine={editorSettings?.styleActiveLine}
     />
   );
 });