add editorMode

src/client/js/components/Navbar/GrowiSubNavigation.jsx

@@ -139,7 +139,7 @@ const GrowiSubNavigation = (props) => {
   const {
     appContainer, navigationContainer, pageContainer, isCompactMode,
   } = props;
-  const { isDrawerMode } = navigationContainer.state;
+  const { isDrawerMode, editorMode } = navigationContainer.state;
   const {
     pageId, path, createdAt, creator, updatedAt, revisionAuthor,
     isForbidden: isPageForbidden, pageUser, isCreatable,
@@ -197,7 +197,13 @@ const GrowiSubNavigation = (props) => {
           </div>
           <div className="mt-2">
             { !isCreatable && !isPageInTrash
-            && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} isBtnDisabled={currentUser == null} />}
+            && (
+            <ThreeStrandedButton
+              onThreeStrandedButtonClicked={onThreeStrandedButtonClicked}
+              isBtnDisabled={currentUser == null}
+              editorMode={editorMode}
+            />
+)}
           </div>
         </div>
 

src/client/js/components/Navbar/ThreeStrandedButton.jsx

@@ -4,7 +4,7 @@ import { withTranslation } from 'react-i18next';
 import { UncontrolledTooltip } from 'reactstrap';
 
 const ThreeStrandedButton = (props) => {
-  const { t, isBtnDisabled } = props;
+  const { t, isBtnDisabled, editorMode } = props;
 
 
   function threeStrandedButtonClickedHandler(viewType) {
@@ -26,7 +26,7 @@ const ThreeStrandedButton = (props) => {
       >
         <button
           type="button"
-          className={`btn btn-outline-primary view-button ${ === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          className={`btn btn-outline-primary view-button ${editorMode === 'view' && 'active'} ${isBtnDisabled && 'disabled'}`}
           onClick={() => { threeStrandedButtonClickedHandler('view') }}
         >
           <i className="icon-control-play icon-fw grw-three-stranded-button-icon" />
@@ -34,7 +34,7 @@ const ThreeStrandedButton = (props) => {
         </button>
         <button
           type="button"
-          className={`btn btn-outline-primary edit-button ${=== 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          className={`btn btn-outline-primary edit-button ${editorMode === 'edit' && 'active'} ${isBtnDisabled && 'disabled'}`}
           onClick={() => { threeStrandedButtonClickedHandler('edit') }}
         >
           <i className="icon-note icon-fw grw-three-stranded-button-icon" />
@@ -42,7 +42,7 @@ const ThreeStrandedButton = (props) => {
         </button>
         <button
           type="button"
-          className={`btn btn-outline-primary hackmd-button ${=== 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
+          className={`btn btn-outline-primary hackmd-button ${editorMode === 'hackmd' && 'active'} ${isBtnDisabled && 'disabled'}`}
           onClick={() => { threeStrandedButtonClickedHandler('hackmd') }}
         >
           <i className="fa fa-fw fa-file-text-o grw-three-stranded-button-icon" />
@@ -63,6 +63,7 @@ ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
   onThreeStrandedButtonClicked: PropTypes.func,
   isBtnDisabled: PropTypes.bool,
+  editorMode: PropTypes.string,
 };
 
 ThreeStrandedButton.defaultProps = {