refactor: move methods related to drafts to EditorContainer

src/client/js/app.js

@@ -173,7 +173,7 @@ const saveWithShortcut = function(markdown) {
 
 const saveWithSubmitButtonSuccessHandler = function() {
   const { path } = pageContainer.state;
-  pageContainer.clearDraft(path);
+  editorContainer.clearDraft(path);
   window.location.href = path;
 };
 

src/client/js/components/MyDraftList/MyDraftList.jsx

@@ -6,6 +6,7 @@ import Pagination from 'react-bootstrap/lib/Pagination';
 import { createSubscribedElement } from '../UnstatedUtils';
 import AppContainer from '../../services/AppContainer';
 import PageContainer from '../../services/PageContainer';
+import EditorContainer from '../../services/EditorContainer';
 
 import Draft from '../PageList/Draft';
 
@@ -34,7 +35,7 @@ class MyDraftList extends React.Component {
   }
 
   async getDraftsFromLocalStorage() {
-    const draftsAsObj = this.props.pageContainer.drafts;
+    const draftsAsObj = this.props.editorContainer.drafts;
 
     const res = await this.props.appContainer.apiGet('/pages.exist', {
       pages: draftsAsObj,
@@ -82,7 +83,6 @@ class MyDraftList extends React.Component {
       return (
         <Draft
           key={draft.path}
-          crowiOriginRenderer={this.props.crowiOriginRenderer}
           path={draft.path}
           markdown={draft.markdown}
           isExist={draft.isExist}
@@ -93,7 +93,7 @@ class MyDraftList extends React.Component {
   }
 
   clearDraft(path) {
-    this.props.pageContainer.clearDraft(path);
+    this.props.editorContainer.clearDraft(path);
 
     this.setState((prevState) => {
       return {
@@ -104,7 +104,7 @@ class MyDraftList extends React.Component {
   }
 
   clearAllDrafts() {
-    this.props.pageContainer.clearAllDrafts();
+    this.props.editorContainer.clearAllDrafts();
 
     this.setState({
       drafts: [],
@@ -255,15 +255,14 @@ class MyDraftList extends React.Component {
  * Wrapper component for using unstated
  */
 const MyDraftListWrapper = (props) => {
-  return createSubscribedElement(MyDraftList, props, [AppContainer, PageContainer]);
+  return createSubscribedElement(MyDraftList, props, [AppContainer, PageContainer, EditorContainer]);
 };
 
 
 MyDraftList.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
-
-  crowiOriginRenderer: PropTypes.object.isRequired,
+  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 };
 
 export default MyDraftListWrapper;

src/client/js/components/PageEditor.jsx

@@ -12,6 +12,7 @@ import { createSubscribedElement } from './UnstatedUtils';
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
 import scrollSyncHelper from './PageEditor/ScrollSyncHelper';
+import EditorContainer from '../services/EditorContainer';
 
 
 class PageEditor extends React.Component {
@@ -262,15 +263,15 @@ class PageEditor extends React.Component {
   }
 
   saveDraft() {
-    const { pageContainer } = this.props;
+    const { pageContainer, editorContainer } = this.props;
     // only when the first time to edit
     if (!pageContainer.state.revisionId) {
-      pageContainer.saveDraft(pageContainer.state.path, this.state.markdown);
+      editorContainer.saveDraft(pageContainer.state.path, this.state.markdown);
     }
   }
 
   clearDraft() {
-    this.props.pageContainer.clearDraft(this.props.pageContainer.state.path);
+    this.props.editorContainer.clearDraft(this.props.pageContainer.state.path);
   }
 
   renderPreview(value) {
@@ -362,12 +363,13 @@ class PageEditor extends React.Component {
  * Wrapper component for using unstated
  */
 const PageEditorWrapper = (props) => {
-  return createSubscribedElement(PageEditor, props, [AppContainer, PageContainer]);
+  return createSubscribedElement(PageEditor, props, [AppContainer, PageContainer, EditorContainer]);
 };
 
 PageEditor.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
+  editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 
   onSaveWithShortcut: PropTypes.func.isRequired,
 };

src/client/js/components/PageList/Draft.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import { createSubscribedElement } from '../UnstatedUtils';
-import GrowiRenderer from '../../util/GrowiRenderer';
 import AppContainer from '../../services/AppContainer';
 
 import RevisionBody from '../Page/RevisionBody';
@@ -19,7 +18,7 @@ class Draft extends React.Component {
       isOpen: false,
     };
 
-    this.growiRenderer = new GrowiRenderer(window.crowi, this.props.crowiOriginRenderer, { mode: 'draft' });
+    this.growiRenderer = this.props.appContainer.getRenderer('draft');
 
     this.renderHtml = this.renderHtml.bind(this);
     this.toggleContent = this.toggleContent.bind(this);
@@ -168,7 +167,6 @@ Draft.propTypes = {
   t: PropTypes.func.isRequired,
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-  crowiOriginRenderer: PropTypes.object.isRequired,
   path: PropTypes.string.isRequired,
   markdown: PropTypes.string.isRequired,
   isExist: PropTypes.bool.isRequired,

src/client/js/legacy/crowi.js

@@ -573,8 +573,8 @@ $(() => {
       const templateId = $(this).data('template');
       const template = $(`#${templateId}`).html();
 
-      const pageContainer = appContainer.getContainer('PageContainer');
-      pageContainer.saveDraft(path, template);
+      const editorContainer = appContainer.getContainer('EditorContainer');
+      editorContainer.saveDraft(path, template);
       top.location.href = `${path}#edit`;
     });
 

src/client/js/services/EditorContainer.js

@@ -38,6 +38,7 @@ export default class EditorContainer extends Container {
     };
 
     this.initStateGrant();
+    this.initDrafts();
 
     this.initEditorOptions('editorOptions', 'editorOptions', defaultEditorOptions);
     this.initEditorOptions('previewOptions', 'previewOptions', defaultPreviewOptions);
@@ -60,6 +61,31 @@ export default class EditorContainer extends Container {
     }
   }
 
+  /**
+   * initialize state for drafts
+   */
+  initDrafts() {
+    this.drafts = {};
+
+    // restore data from localStorage
+    const contents = window.localStorage.drafts;
+    if (contents != null) {
+      try {
+        this.drafts = JSON.parse(contents);
+      }
+      catch (e) {
+        window.localStorage.removeItem('drafts');
+      }
+    }
+
+    if (this.state.pageId == null) {
+      const draft = this.findDraft(this.state.path);
+      if (draft != null) {
+        this.state.markdown = draft;
+      }
+    }
+  }
+
   initEditorOptions(stateKey, localStorageKey, defaultOptions) {
     // load from localStorage
     const optsStr = window.localStorage[localStorageKey];
@@ -112,4 +138,26 @@ export default class EditorContainer extends Container {
     return opt;
   }
 
+  clearDraft(path) {
+    delete this.drafts[path];
+    window.localStorage.setItem('drafts', JSON.stringify(this.drafts));
+  }
+
+  clearAllDrafts() {
+    window.localStorage.removeItem('drafts');
+  }
+
+  saveDraft(path, body) {
+    this.drafts[path] = body;
+    window.localStorage.setItem('drafts', JSON.stringify(this.drafts));
+  }
+
+  findDraft(path) {
+    if (this.drafts != null && this.drafts[path]) {
+      return this.drafts[path];
+    }
+
+    return null;
+  }
+
 }

src/client/js/services/PageContainer.js

@@ -53,7 +53,6 @@ export default class PageContainer extends Container {
 
     this.initStateMarkdown();
     this.initStateOthers();
-    this.initDrafts();
 
     this.addWebSocketEventHandlers = this.addWebSocketEventHandlers.bind(this);
     this.addWebSocketEventHandlers();
@@ -94,31 +93,6 @@ export default class PageContainer extends Container {
     }
   }
 
-  /**
-   * initialize state for drafts
-   */
-  initDrafts() {
-    this.drafts = {};
-
-    // restore data from localStorage
-    const contents = window.localStorage.drafts;
-    if (contents != null) {
-      try {
-        this.drafts = JSON.parse(contents);
-      }
-      catch (e) {
-        window.localStorage.removeItem('drafts');
-      }
-    }
-
-    if (this.state.pageId == null) {
-      const draft = this.findDraft(this.state.path);
-      if (draft != null) {
-        this.state.markdown = draft;
-      }
-    }
-  }
-
   setLatestRemotePageData(page, user) {
     this.setState({
       remoteRevisionId: page.revision._id,
@@ -127,28 +101,6 @@ export default class PageContainer extends Container {
     });
   }
 
-  clearDraft(path) {
-    delete this.drafts[path];
-    window.localStorage.setItem('drafts', JSON.stringify(this.drafts));
-  }
-
-  clearAllDrafts() {
-    window.localStorage.removeItem('drafts');
-  }
-
-  saveDraft(path, body) {
-    this.drafts[path] = body;
-    window.localStorage.setItem('drafts', JSON.stringify(this.drafts));
-  }
-
-  findDraft(path) {
-    if (this.drafts != null && this.drafts[path]) {
-      return this.drafts[path];
-    }
-
-    return null;
-  }
-
   addWebSocketEventHandlers() {
     const pageContainer = this;
     const websocketContainer = this.appContainer.getContainer('WebsocketContainer');