move editor navbar & HandsontableModal into CodeMirrorEditor

src/client/js/components/PageEditor/CodeMirrorEditor.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import Modal from 'react-bootstrap/es/Modal';
+import Button from 'react-bootstrap/es/Button';
 
 import InterceptorManager from '@commons/service/interceptor-manager';
 
@@ -49,6 +50,7 @@ import EmojiAutoCompleteHelper from './EmojiAutoCompleteHelper';
 import PreventMarkdownListInterceptor from './PreventMarkdownListInterceptor';
 import MarkdownTableInterceptor from './MarkdownTableInterceptor';
 import mtu from './MarkdownTableUtil';
+import HandsontableModal from './HandsontableModal';
 
 export default class CodeMirrorEditor extends AbstractEditor {
 
@@ -641,6 +643,18 @@ export default class CodeMirrorEditor extends AbstractEditor {
     );
   }
 
+  renderNavbar() {
+    return (
+      <div className="m-0 navbar navbar-default navbar-editor" style={{ minHeight: 'unset' }}>
+        <ul className="pr-4 nav nav-navbar navbar-right">
+          <li>
+            <Button bsSize="small" onClick={ () => this.refs.handsontableModal.show(mtu.getMarkdownTable(this.getCodeMirror())) }><i className="icon-grid"></i></Button>
+          </li>
+        </ul>
+      </div>
+    );
+  }
+
   render() {
     const mode = this.state.isGfmMode ? 'gfm' : undefined;
     const defaultEditorOptions = {
@@ -653,6 +667,9 @@ export default class CodeMirrorEditor extends AbstractEditor {
     const placeholder = this.state.isGfmMode ? 'Input with Markdown..' : 'Input with Plane Text..';
 
     return <React.Fragment>
+
+      { this.renderNavbar() }
+
       <ReactCodeMirror
         ref="cm"
         className={additionalClasses}
@@ -717,6 +734,7 @@ export default class CodeMirrorEditor extends AbstractEditor {
         { this.state.isCheatsheetModalButtonShown && this.renderCheatsheetModalButton() }
       </div>
 
+      <HandsontableModal ref='handsontableModal' onSave={ table => mtu.replaceMarkdownTable(this.getCodeMirror(), table) }/>
     </React.Fragment>;
   }
 

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

@@ -1,19 +1,14 @@
 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';
 
-import mtu from './MarkdownTableUtil';
-
 export default class Editor extends AbstractEditor {
 
   constructor(props) {
@@ -199,18 +194,6 @@ export default class Editor extends AbstractEditor {
     );
   }
 
-  renderNavbar() {
-    return (
-      <div className="m-0 navbar navbar-default navbar-editor" style={{ minHeight: 'unset' }}>
-        <ul className="pr-4 nav nav-navbar navbar-right">
-          <li>
-            <Button bsSize="small" onClick={ () => this.refs.handsontableModal.show(mtu.getMarkdownTable(this.getEditorSubstance().getCodeMirror())) }><i className="icon-grid"></i></Button>
-          </li>
-        </ul>
-      </div>
-    );
-  }
-
   render() {
     const flexContainer = {
       height: '100%',
@@ -237,8 +220,6 @@ export default class Editor extends AbstractEditor {
 
           { this.state.dropzoneActive && this.renderDropzoneOverlay() }
 
-          { this.renderNavbar() }
-
           {/* for PC */}
           { !isMobile &&
             <CodeMirrorEditor
@@ -272,9 +253,6 @@ export default class Editor extends AbstractEditor {
             or pasting from the clipboard.
           </span>
         </button>
-
-        <HandsontableModal ref='handsontableModal' onSave={ table => mtu.replaceMarkdownTable(this.getEditorSubstance().getCodeMirror(), table) }/>
-
       </div>
     );
   }