retrieve theme, keymapMode and styleActiveLine from SWR

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

@@ -181,13 +181,7 @@ class CodeMirrorEditor extends AbstractEditor {
     // ensure to be able to resolve 'this' to use 'codemirror.commands.save'
     this.getCodeMirror().codeMirrorEditor = this;
 
-    // load theme
-    const theme = this.props.editorOptions.theme;
-    this.loadTheme(theme);
-
-    // set keymap
-    const keymapMode = this.props.editorOptions.keymapMode;
-    this.setKeymapMode(keymapMode);
+    this.initializeEditorSettings(this.props.editorSettings);
 
     // fold drawio section
     this.foldDrawioSection();
@@ -201,18 +195,30 @@ class CodeMirrorEditor extends AbstractEditor {
   }
 
   componentWillReceiveProps(nextProps) {
-    // load theme
-    const theme = nextProps.editorOptions.theme;
-    this.loadTheme(theme);
-
-    // set keymap
-    const keymapMode = nextProps.editorOptions.keymapMode;
-    this.setKeymapMode(keymapMode);
+    this.initializeEditorSettings(nextProps.editorSettings);
 
     // fold drawio section
     this.foldDrawioSection();
   }
 
+  initializeEditorSettings(editorSettings) {
+    if (editorSettings == null) {
+      return;
+    }
+
+    // load theme
+    const theme = editorSettings.theme;
+    if (theme != null) {
+      this.loadTheme(theme);
+    }
+
+    // set keymap
+    const keymapMode = editorSettings.keymapMode;
+    if (keymapMode != null) {
+      this.setKeymapMode(keymapMode);
+    }
+  }
+
   async initializeTextlint() {
     const { isTextlintEnabled, editorSettings } = this.props;
 

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

@@ -11,7 +11,7 @@ import AppContainer from '~/client/services/AppContainer';
 import EditorContainer from '~/client/services/EditorContainer';
 import { useEditorSettings, useIsTextlintEnabled } from '~/stores/editor';
 
-import { KeyMapMode } from '../../interfaces/editor-settings';
+import { DEFAULT_THEME, KeyMapMode } from '../../interfaces/editor-settings';
 import { withUnstatedContainers } from '../UnstatedUtils';
 
 import { DownloadDictModal } from './DownloadDictModal';
@@ -36,7 +36,7 @@ const ThemeSelector = (): JSX.Element => {
     </>
   ), [update]);
 
-  const selectedTheme = editorSettings?.theme ?? 'elegant';
+  const selectedTheme = editorSettings?.theme ?? DEFAULT_THEME;
 
   return (
     <div className="input-group flex-nowrap">

packages/app/src/components/UncontrolledCodeMirror.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, ReactNode, Ref } from 'react';
 
 import { ICodeMirror, UnControlled as CodeMirror } from 'react-codemirror2';
-import { Container, Subscribe } from 'unstated';
 
-import EditorContainer from '~/client/services/EditorContainer';
 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');
@@ -18,8 +18,9 @@ export interface UncontrolledCodeMirrorProps extends AbstractEditorProps {
 }
 
 interface UncontrolledCodeMirrorCoreProps extends UncontrolledCodeMirrorProps {
-  editorContainer: Container<EditorContainer>;
   forwardedRef: Ref<UncontrolledCodeMirrorCore>;
+  theme?: string,
+  styleActiveLine?: boolean,
 }
 
 class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCoreProps> {
@@ -27,12 +28,11 @@ class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCo
   render(): ReactNode {
 
     const {
-      value, isGfmMode, lineNumbers, editorContainer, options, forwardedRef, ...rest
+      value, isGfmMode, lineNumbers, options, forwardedRef,
+      theme, styleActiveLine,
+      ...rest
     } = this.props;
 
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const editorOptions = (editorContainer.state as any).editorOptions;
-
     return (
       <CodeMirror
         ref={forwardedRef}
@@ -40,8 +40,8 @@ class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCo
         options={{
           lineNumbers: lineNumbers ?? true,
           mode: isGfmMode ? 'gfm-growi' : undefined,
-          theme: editorOptions.theme,
-          styleActiveLine: editorOptions.styleActiveLine,
+          theme: theme ?? DEFAULT_THEME,
+          styleActiveLine,
           tabSize: 4,
           ...options,
         }}
@@ -52,8 +52,15 @@ class UncontrolledCodeMirrorCore extends AbstractEditor<UncontrolledCodeMirrorCo
 
 }
 
-export const UncontrolledCodeMirror = forwardRef<UncontrolledCodeMirrorCore, UncontrolledCodeMirrorProps>((props, ref) => (
-  <Subscribe to={[EditorContainer]}>
-    {(EditorContainer: Container<EditorContainer>) => <UncontrolledCodeMirrorCore {...props} forwardedRef={ref} editorContainer={EditorContainer} />}
-  </Subscribe>
-));
+export const UncontrolledCodeMirror = forwardRef<UncontrolledCodeMirrorCore, UncontrolledCodeMirrorProps>((props, ref) => {
+  const { data: editorSettings } = useEditorSettings();
+
+  return (
+    <UncontrolledCodeMirrorCore
+      {...props}
+      forwardedRef={ref}
+      theme={editorSettings?.theme}
+      styleActiveLine={editorSettings?.styleActiveLine}
+    />
+  );
+});

packages/app/src/interfaces/editor-settings.ts

@@ -9,6 +9,8 @@ export interface ITextlintSettings {
   textlintRules: ILintRule[];
 }
 
+export const DEFAULT_THEME = 'elegant';
+
 const KeyMapMode = {
   default: 'default',
   vim: 'vim',