Merge pull request #665 from weseek/imprv/editor-navbar

Imprv/editor navbar

src/client/js/components/PageComment/CommentForm.jsx

@@ -231,7 +231,7 @@ export default class CommentForm extends React.Component {
 
     const errorMessage = <span className="text-danger text-right mr-2">{this.state.errorMessage}</span>;
     const submitButton = (
-      <Button type="submit"bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
+      <Button type="submit" bsStyle="primary" className="fcbtn btn btn-sm btn-primary btn-outline btn-rounded btn-1b">
         Comment
       </Button>
     );
@@ -239,22 +239,23 @@ export default class CommentForm extends React.Component {
     return (
       <div>
 
-        { !this.state.isFormShown &&
-          <button className="btn btn-lg btn-primary center-block" onClick={this.showCommentFormBtnClickHandler}>
-            <i className="icon-bubble"></i> Add Comment
-          </button>
-        }
-
-        { this.state.isFormShown &&
-          <form className="form page-comment-form" id="page-comment-form" onSubmit={this.postComment}>
-            { username &&
-              <div className="comment-form">
-                <div className="comment-form-user">
-                  <a href={creatorsPage}>
-                    <UserPicture user={user} />
-                  </a>
-                </div>
-                <div className="comment-form-main">
+        <form className="form page-comment-form" id="page-comment-form" onSubmit={this.postComment}>
+          { username &&
+            <div className="comment-form">
+              <div className="comment-form-user">
+                <a href={creatorsPage}>
+                  <UserPicture user={user} />
+                </a>
+              </div>
+              <div className="comment-form-main">
+                {/* Add Comment Button */}
+                { !this.state.isFormShown &&
+                  <button className="btn btn-lg btn-link center-block" onClick={this.showCommentFormBtnClickHandler}>
+                    <i className="icon-bubble"></i> Add Comment
+                  </button>
+                }
+                {/* Editor */}
+                { this.state.isFormShown && <React.Fragment>
                   <div className="comment-write">
                     <Tabs activeKey={this.state.key} id="comment-form-tabs" onSelect={this.handleSelect} animation={false}>
                       <Tab eventKey={1} title="Write">
@@ -313,11 +314,11 @@ export default class CommentForm extends React.Component {
                       </div>
                     </div>
                   </div>
-                </div>
+                </React.Fragment>}
               </div>
-            }
-          </form>
-        }
+            </div>
+          }
+        </form>
 
       </div>
     );

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

@@ -15,6 +15,7 @@ export default class Editor extends AbstractEditor {
     super(props);
 
     this.state = {
+      isComponentDidMount: false,
       dropzoneActive: false,
       isUploading: false,
     };
@@ -32,6 +33,10 @@ export default class Editor extends AbstractEditor {
     this.renderDropzoneOverlay = this.renderDropzoneOverlay.bind(this);
   }
 
+  componentDidMount() {
+    this.setState({ isComponentDidMount: true });
+  }
+
   getEditorSubstance() {
     return this.props.isMobile
       ? this.refs.taEditor
@@ -207,11 +212,6 @@ export default class Editor extends AbstractEditor {
   }
 
   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 = [];
 
@@ -245,7 +245,7 @@ export default class Editor extends AbstractEditor {
 
           { this.state.dropzoneActive && this.renderDropzoneOverlay() }
 
-          { this.renderNavbar() }
+          { this.state.isComponentDidMount && this.renderNavbar() }
 
           {/* for PC */}
           { !isMobile &&