WIP: impl theme selector

save/load theme of CodeMirror with localStorage

resource/js/app.js

@@ -105,23 +105,31 @@ if (elem) {
   ReactDOM.render(<PageCommentFormBehavior crowi={crowi} pageComments={componentInstances['page-comments-list']} />, elem);
 }
 
-// render PageEditor
+/*
+ * PageEditor
+ */
 let pageEditor = null;
+// load editorTheme
+const editorTheme = crowi.loadEditorTheme();
+// render PageEditor
 const pageEditorElem = document.getElementById('page-editor');
 if (pageEditorElem) {
   pageEditor = ReactDOM.render(
     <PageEditor crowi={crowi} pageId={pageId} revisionId={pageRevisionId} pagePath={pagePath}
-        markdown={entities.decodeHTML(pageContent)}
+        markdown={entities.decodeHTML(pageContent)} editorTheme={editorTheme}
         onSaveSuccess={onSaveSuccess} />,
     pageEditorElem
   );
 }
+// render ThemeSelector
 const themeSelectorElem = document.getElementById('page-editor-theme-selector');
 if (themeSelectorElem) {
   ReactDOM.render(
-    <ThemeSelector onChange={(value) => { // set onChange event handler
-      pageEditor.setEditorTheme(value);
-    }} />,
+    <ThemeSelector value={editorTheme}
+        onChange={(value) => { // set onChange event handler
+          pageEditor.setEditorTheme(value);
+          crowi.saveEditorTheme(value);
+        }} />,
     themeSelectorElem
   );
 }

resource/js/components/PageEditor.js

@@ -21,6 +21,7 @@ export default class PageEditor extends React.Component {
       markdown: this.props.markdown,
       isUploadable,
       isUploadableFile,
+      editorTheme: this.props.editorTheme,
     };
 
     this.setCaretLine = this.setCaretLine.bind(this);
@@ -61,11 +62,11 @@ export default class PageEditor extends React.Component {
   }
 
   /**
-   * set theme
-   * @param {string} theme name
+   * set theme (used from the outside)
+   * @param {string} theme theme name
    */
-  setEditorTheme(name) {
-    this.refs.editor.setTheme(name);
+  setEditorTheme(theme) {
+    this.setState({ editorTheme: theme });
   }
 
   /**
@@ -190,6 +191,9 @@ export default class PageEditor extends React.Component {
     return top;
   };
 
+  /*
+   * methods for draft
+   */
   restoreDraft() {
     // restore draft when the first time to edit
     const draft = this.props.crowi.findDraft(this.props.pagePath);
@@ -285,6 +289,7 @@ export default class PageEditor extends React.Component {
           <Editor ref="editor" value={this.state.markdown}
               isUploadable={this.state.isUploadable}
               isUploadableFile={this.state.isUploadableFile}
+              theme={this.state.editorTheme}
               onScroll={this.onEditorScroll}
               onChange={this.onMarkdownChanged}
               onSave={this.onSave}
@@ -306,4 +311,5 @@ PageEditor.propTypes = {
   revisionId: PropTypes.string,
   pagePath: PropTypes.string,
   onSaveSuccess: PropTypes.func,
+  editorTheme: PropTypes.string,
 };

resource/js/components/PageEditor/Editor.js

@@ -48,7 +48,6 @@ export default class Editor extends React.Component {
       value: this.props.value,
       dropzoneActive: false,
       isUploading: false,
-      theme: 'elegant',
     };
 
     this.getCodeMirror = this.getCodeMirror.bind(this);
@@ -98,14 +97,6 @@ export default class Editor extends React.Component {
     editor.setCursor({line: line-1});   // leave 'ch' field as null/undefined to indicate the end of line
   }
 
-  /**
-   * set theme
-   * @param {string} theme name
-   */
-  setTheme(name) {
-    this.setState({ theme: name });
-  }
-
   /**
    * remove overlay and set isUploading to false
    */
@@ -272,7 +263,7 @@ export default class Editor extends React.Component {
       height: 'calc(100% - 20px)'
     }
 
-    const theme = this.state.theme;
+    const theme = this.props.theme || 'elegant';
     return (
       <div style={flexContainer}>
         <Dropzone
@@ -356,6 +347,7 @@ export default class Editor extends React.Component {
 
 Editor.propTypes = {
   value: PropTypes.string,
+  theme: PropTypes.string,
   isUploadable: PropTypes.bool,
   isUploadableFile: PropTypes.bool,
   onChange: PropTypes.func,

resource/js/util/Crowi.js

@@ -147,6 +147,14 @@ export default class Crowi {
     return null;
   }
 
+  saveEditorTheme(theme) {
+    this.localStorage.setItem('editorTheme', theme);
+  }
+
+  loadEditorTheme() {
+    return this.localStorage.getItem('editorTheme');
+  }
+
   findUserById(userId) {
     if (this.userById && this.userById[userId]) {
       return this.userById[userId];