move HandsontableModal as a child of Editor

src/client/js/app.js

@@ -19,7 +19,6 @@ import SearchPage       from './components/SearchPage';
 import PageEditor       from './components/PageEditor';
 import OptionsSelector  from './components/PageEditor/OptionsSelector';
 import { EditorOptions, PreviewOptions } from './components/PageEditor/OptionsSelector';
-import HandsontableModal from './components/PageEditor/HandsontableModal';
 import SavePageControls from './components/SavePageControls';
 import PageEditorByHackmd from './components/PageEditorByHackmd';
 import Page             from './components/Page';
@@ -404,29 +403,11 @@ if (pageEditorOptionsSelectorElem) {
           crowi.saveEditorOptions(newEditorOptions);
           crowi.savePreviewOptions(newPreviewOptions);
         }}
-        onClickHandsontableButton={() => {
-          const handsontableModal = componentInstances.handsontableModal;
-          if (handsontableModal != null) {
-            handsontableModal.show(null, null);
-          }
-        }}
       />,
     pageEditorOptionsSelectorElem
   );
 }
 
-// render HandsontableModal
-let handsontableModal;
-const handsontableModalElem = document.getElementById('handsontable-modal');
-if (handsontableModalElem) {
-  handsontableModal = ReactDOM.render(
-    <HandsontableModal
-      />,
-    handsontableModalElem
-  );
-  componentInstances.handsontableModal = handsontableModal;
-}
-
 // render PageStatusAlert
 let pageStatusAlert = null;
 const pageStatusAlertElem = document.getElementById('page-status-alert');

src/client/js/components/PageEditor/Editor.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import Button from 'react-bootstrap/es/Button';
+
 import AbstractEditor from './AbstractEditor';
 import CodeMirrorEditor from './CodeMirrorEditor';
 import TextAreaEditor from './TextAreaEditor';
 
 import Dropzone from 'react-dropzone';
 
+import HandsontableModal from './HandsontableModal';
 import pasteHelper from './PasteHelper';
 
 export default class Editor extends AbstractEditor {
@@ -194,6 +197,18 @@ export default class Editor extends AbstractEditor {
     );
   }
 
+  renderNavbar() {
+    return (
+      <div className="m-0 navbar navbar-default" style={{ minHeight: 'unset' }}>
+        <ul className="pr-4 nav nav-navbar navbar-right">
+          <li>
+            <Button bsSize="small" onClick={ () => this.refs.handsontableModal.show() }><i className="icon-grid"></i></Button>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
   render() {
     const flexContainer = {
       height: '100%',
@@ -220,6 +235,8 @@ export default class Editor extends AbstractEditor {
 
           { this.state.dropzoneActive && this.renderDropzoneOverlay() }
 
+          { this.renderNavbar() }
+
           {/* for PC */}
           { !isMobile &&
             <CodeMirrorEditor
@@ -254,6 +271,8 @@ export default class Editor extends AbstractEditor {
           </span>
         </button>
 
+        <HandsontableModal ref='handsontableModal' />
+
       </div>
     );
   }

src/client/js/components/PageEditor/OptionsSelector.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import Button from 'react-bootstrap/es/Button';
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import FormControl from 'react-bootstrap/es/FormControl';
 import ControlLabel from 'react-bootstrap/es/ControlLabel';
@@ -39,8 +38,6 @@ export default class OptionsSelector extends React.Component {
     this.onClickStyleActiveLine = this.onClickStyleActiveLine.bind(this);
     this.onClickRenderMathJaxInRealtime = this.onClickRenderMathJaxInRealtime.bind(this);
     this.onToggleConfigurationDropdown = this.onToggleConfigurationDropdown.bind(this);
-
-    this.dispatchOnClickHandsontableButton = this.dispatchOnClickHandsontableButton.bind(this);
   }
 
   componentDidMount() {
@@ -107,13 +104,6 @@ export default class OptionsSelector extends React.Component {
     }
   }
 
-  /**
-   * dispatch onClickHandsontableButton event
-   */
-  dispatchOnClickHandsontableButton() {
-    this.props.onClickHandsontableButton();
-  }
-
   /**
    * dispatch onChange event
    */
@@ -121,12 +111,6 @@ export default class OptionsSelector extends React.Component {
     this.props.onChange(this.state.editorOptions, this.state.previewOptions);
   }
 
-  renderHandsontableModalButton() {
-    return (
-      <Button bsSize="small" onClick={this.dispatchOnClickHandsontableButton}><i className="icon-grid"></i></Button>
-    );
-  }
-
   renderThemeSelector() {
     const optionElems = this.availableThemes.map((theme) => {
       return <option key={theme} value={theme}>{theme}</option>;
@@ -242,7 +226,6 @@ export default class OptionsSelector extends React.Component {
 
   render() {
     return <div className="d-flex flex-row">
-      <span className="m-l-5">{this.renderHandsontableModalButton()}</span>
       <span className="m-l-5">{this.renderThemeSelector()}</span>
       <span className="m-l-5">{this.renderKeymapModeSelector()}</span>
       <span className="m-l-5">{this.renderConfigurationDropdown()}</span>
@@ -273,5 +256,4 @@ OptionsSelector.propTypes = {
   editorOptions: PropTypes.instanceOf(EditorOptions).isRequired,
   previewOptions: PropTypes.instanceOf(PreviewOptions).isRequired,
   onChange: PropTypes.func.isRequired,
-  onClickHandsontableButton: PropTypes.func.isRequired,
 };