feedback: split renderNavbar into renderNavbar and getNavbarItems

src/client/js/components/PageEditor/AbstractEditor.js

@@ -110,6 +110,12 @@ export default class AbstractEditor extends React.Component {
     }
   }
 
+  /**
+   * returns items(an array of react elements) in navigation bar for editor
+   */
+  getNavbarItems() {
+    return null;
+  }
 }
 
 AbstractEditor.propTypes = {

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

@@ -649,16 +649,8 @@ export default class CodeMirrorEditor extends AbstractEditor {
     this.refs.handsontableModal.show(mtu.getMarkdownTable(this.getCodeMirror()));
   }
 
-  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.showHandsonTableHandler }><i className="icon-grid"></i></Button>
-          </li>
-        </ul>
-      </div>
-    );
+  getNavbarItems() {
+    return <Button bsSize="small" onClick={ this.showHandsonTableHandler }><i className="icon-grid"></i></Button>;
   }
 
   render() {
@@ -674,8 +666,6 @@ export default class CodeMirrorEditor extends AbstractEditor {
 
     return <React.Fragment>
 
-      { this.renderNavbar() }
-
       <ReactCodeMirror
         ref="cm"
         className={additionalClasses}

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

@@ -194,6 +194,31 @@ 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">
+          { this.getNavbarItems() != null && this.getNavbarItems().map((item, idx) => {
+            return <li key={idx}>{item}</li>;
+          }) }
+        </ul>
+      </div>
+    );
+  }
+
+  getNavbarItems() {
+    // wait for rendering CodeMirrorEditor or TextAreaEditor
+    if (this.getEditorSubstance() == null) {
+      return null;
+    }
+
+    // set navbar items(react elements) here that are common in CodeMirrorEditor or TextAreaEditor
+    const navbarItems = [];
+
+    // concat common items and items specific to CodeMirrorEditor or TextAreaEditor
+    return navbarItems.concat(this.getEditorSubstance().getNavbarItems());
+  }
+
   render() {
     const flexContainer = {
       height: '100%',
@@ -220,6 +245,8 @@ export default class Editor extends AbstractEditor {
 
           { this.state.dropzoneActive && this.renderDropzoneOverlay() }
 
+          { this.renderNavbar() }
+
           {/* for PC */}
           { !isMobile &&
             <CodeMirrorEditor