impl AppContainer.registerComponentInstance

src/client/js/app.js

@@ -477,7 +477,6 @@ if (pageEditorWithHackmdElem) {
 /*
  * PageEditor
  */
-let pageEditor = null;
 // render PageEditor
 const pageEditorElem = document.getElementById('page-editor');
 if (pageEditorElem) {
@@ -485,11 +484,6 @@ if (pageEditorElem) {
     <I18nextProvider i18n={i18n}>
       <Provider inject={[appContainer, pageContainer, editorContainer]}>
         <PageEditor
-          ref={(elem) => {
-            if (pageEditor == null) {
-              pageEditor = elem;
-            }
-          }}
           crowiRenderer={crowiRenderer}
           onSaveWithShortcut={saveWithShortcut}
         />
@@ -497,9 +491,6 @@ if (pageEditorElem) {
     </I18nextProvider>,
     pageEditorElem,
   );
-  componentInstances.pageEditor = pageEditor;
-  // set refs for setCaretLine/forceToFocus when tab is changed
-  appContainer.setPageEditor(pageEditor);
 }
 
 // render comment form

src/client/js/components/PageEditor.jsx

@@ -60,9 +60,12 @@ class PageEditor extends React.Component {
     this.scrollEditorByPreviewScrollWithThrottle = throttle(20, this.scrollEditorByPreviewScroll);
     this.renderPreviewWithDebounce = debounce(50, throttle(100, this.renderPreview));
     this.saveDraftWithDebounce = debounce(800, this.saveDraft);
+
   }
 
   componentWillMount() {
+    this.props.appContainer.registerComponentInstance(this);
+
     // initial rendering
     this.renderPreview(this.state.markdown);
 
@@ -319,8 +322,6 @@ class PageEditor extends React.Component {
   }
 
   render() {
-    const { pageContainer } = this.props;
-
     const config = this.props.appContainer.getConfig();
     const noCdn = !!config.env.NO_CDN;
     const emojiStrategy = this.props.appContainer.getEmojiStrategy();

src/client/js/services/AppContainer.js

@@ -50,11 +50,12 @@ export default class AppContainer extends Container {
     this.userByName = {};
     this.userById = {};
     this.draft = {};
-    this.editorOptions = {};
 
     this.recoverData();
 
     this.socket = io();
+
+    this.componentInstances = {};
   }
 
   /**
@@ -68,12 +69,34 @@ export default class AppContainer extends Container {
     return this.config;
   }
 
-  setPage(page) {
-    this.page = page;
+  /**
+   * Register instance
+   * @param {object} instance React component instance
+   */
+  registerComponentInstance(instance) {
+    if (instance == null) {
+      throw new Error('The specified instance must not be null');
+    }
+
+    const className = instance.constructor.name;
+
+    if (this.componentInstances[className] != null) {
+      throw new Error('The specified instance couldn\'t register because the same type object has already been registered');
+    }
+
+    this.componentInstances[className] = instance;
+  }
+
+  /**
+   * Get registered instance
+   * @param {string} className
+   */
+  getComponentInstance(className) {
+    return this.componentInstances[className];
   }
 
-  setPageEditor(pageEditor) {
-    this.pageEditor = pageEditor;
+  setPage(page) {
+    this.page = page;
   }
 
   setIsDocSaved(isSaved) {
@@ -151,14 +174,16 @@ export default class AppContainer extends Container {
   }
 
   setCaretLine(line) {
-    if (this.pageEditor != null) {
-      this.pageEditor.setCaretLine(line);
+    const pageEditor = this.getComponentInstance('PageEditor');
+    if (pageEditor != null) {
+      pageEditor.setCaretLine(line);
     }
   }
 
   focusToEditor() {
-    if (this.pageEditor != null) {
-      this.pageEditor.focusToEditor();
+    const pageEditor = this.getComponentInstance('PageEditor');
+    if (pageEditor != null) {
+      pageEditor.focusToEditor();
     }
   }