create classes EditorOptions and PreviewOptions

resource/js/app.js

@@ -9,6 +9,7 @@ import HeaderSearchBox  from './components/HeaderSearchBox';
 import SearchPage       from './components/SearchPage';
 import PageEditor       from './components/PageEditor';
 import EditorOptionsSelector from './components/PageEditor/EditorOptionsSelector';
+import { EditorOptions, PreviewOptions } from './components/PageEditor/EditorOptionsSelector';
 import PageListSearch   from './components/PageListSearch';
 import PageHistory      from './components/PageHistory';
 import PageComments     from './components/PageComments';
@@ -121,9 +122,10 @@ let pageEditor = null;
 // render PageEditor
 const pageEditorElem = document.getElementById('page-editor');
 if (pageEditorElem) {
+  const editorOptions = new EditorOptions(crowi.editorOptions);
   pageEditor = ReactDOM.render(
     <PageEditor crowi={crowi} pageId={pageId} revisionId={pageRevisionId} pagePath={pagePath}
-        markdown={entities.decodeHTML(pageContent)} editorOptions={crowi.editorOptions}
+        markdown={entities.decodeHTML(pageContent)} editorOptions={editorOptions}
         onSaveSuccess={onSaveSuccess} />,
     pageEditorElem
   );
@@ -133,11 +135,12 @@ if (pageEditorElem) {
 // render EditorOptionsSelector
 const editorOptionSelectorElem = document.getElementById('page-editor-options-selector');
 if (editorOptionSelectorElem) {
+  const editorOptions = new EditorOptions(crowi.editorOptions);
   ReactDOM.render(
-    <EditorOptionsSelector options={crowi.editorOptions}
-        onChange={(opts) => { // set onChange event handler
-          pageEditor.setEditorOptions(opts);
-          crowi.saveEditorOptions(opts);
+    <EditorOptionsSelector editorOptions={editorOptions}
+        onChange={(newEditorOptions, newPreviewOptions) => { // set onChange event handler
+          pageEditor.setEditorOptions(newEditorOptions);
+          crowi.saveEditorOptions(newEditorOptions);
         }} />,
     editorOptionSelectorElem
   );

resource/js/components/PageEditor.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import * as toastr from 'toastr';
 import { throttle, debounce } from 'throttle-debounce';
 
+import { EditorOptions } from './PageEditor/EditorOptionsSelector';
 import Editor from './PageEditor/Editor';
 import Preview from './PageEditor/Preview';
 
@@ -305,5 +306,5 @@ PageEditor.propTypes = {
   revisionId: PropTypes.string,
   pagePath: PropTypes.string,
   onSaveSuccess: PropTypes.func,
-  editorOptions: PropTypes.object,
+  editorOptions: PropTypes.instanceOf(EditorOptions),
 };

resource/js/components/PageEditor/EditorOptionsSelector.js

@@ -6,13 +6,31 @@ import FormControl from 'react-bootstrap/es/FormControl';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
 import Button from 'react-bootstrap/es/Button';
 
+export class EditorOptions {
+  constructor(props) {
+    this.theme = 'elegant';
+    this.styleActiveLine = false;
+
+    Object.assign(this, props);
+  }
+}
+
+export class PreviewOptions {
+  constructor(props) {
+    this.renderMathJaxInRealtime = false;
+
+    Object.assign(this, props);
+  }
+}
+
 export default class EditorOptionsSelector extends React.Component {
 
   constructor(props) {
     super(props);
 
     this.state = {
-      options: this.props.options,
+      editorOptions: this.props.editorOptions || new EditorOptions(),
+      previewOptions: this.props.previewOptions || new PreviewOptions(),
     }
 
     this.availableThemes = [
@@ -28,23 +46,22 @@ export default class EditorOptionsSelector extends React.Component {
   }
 
   init() {
-    this.themeSelectorInputEl.value = this.state.options.theme || this.availableThemes[0];
+    this.themeSelectorInputEl.value = this.state.editorOptions.theme;
   }
 
   onChangeTheme() {
     const newValue = this.themeSelectorInputEl.value;
-    const newOpts = Object.assign(this.state.options, {theme: newValue});
-    this.setState({options: newOpts});
+    const newOpts = Object.assign(this.state.editorOptions, {theme: newValue});
+    this.setState({editorOptions: newOpts});
 
     // dispatch event
     this.dispatchOnChange();
   }
 
   onClickStyleActiveLine(event) {
-    const newValue = !this.state.options.styleActiveLine;
-    console.log(newValue);
-    const newOpts = Object.assign(this.state.options, {styleActiveLine: newValue});
-    this.setState({options: newOpts});
+    const newValue = !this.state.editorOptions.styleActiveLine;
+    const newOpts = Object.assign(this.state.editorOptions, {styleActiveLine: newValue});
+    this.setState({editorOptions: newOpts});
 
     // dispatch event
     this.dispatchOnChange();
@@ -52,7 +69,7 @@ export default class EditorOptionsSelector extends React.Component {
 
   dispatchOnChange() {
     if (this.props.onChange != null) {
-      this.props.onChange(this.state.options);
+      this.props.onChange(this.state.editorOptions, this.state.previewOptions);
     }
   }
 
@@ -76,7 +93,7 @@ export default class EditorOptionsSelector extends React.Component {
   }
 
   renderStyleActiveLineSelector() {
-    const bool = this.state.options.styleActiveLine || false;
+    const bool = this.state.editorOptions.styleActiveLine || false;
     return (
       <FormGroup controlId="formControlsSelect">
         <Button active={bool} className="btn-style-active-line"
@@ -94,6 +111,7 @@ export default class EditorOptionsSelector extends React.Component {
 }
 
 EditorOptionsSelector.propTypes = {
-  options: PropTypes.object,
+  editorOptions: PropTypes.instanceOf(EditorOptions),
+  previewOptions: PropTypes.instanceOf(PreviewOptions),
   onChange: PropTypes.func,
 };