implemented so that threeStrandedButton will get the active information from parent component

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,
@@ -195,7 +195,7 @@ const GrowiSubNavigation = (props) => {
             { !isPageNotFound && !isPageForbidden && <PageManagement /> }
           </div>
           <div className="mt-2">
-            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} />}
+            { !isCreatable && <ThreeStrandedButton onThreeStrandedButtonClicked={onThreeStrandedButtonClicked} editorMode={editorMode} />}
           </div>
         </div>
 

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

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 const ThreeStrandedButton = (props) => {
-  const { t } = props;
-  const [btnActive, setBtnActive] = useState('view');
+  const { t, editorMode } = props;
+  const [btnActive, setBtnActive] = useState(editorMode);
   function threeStrandedButtonClickedHandler(viewType) {
     if (props.onThreeStrandedButtonClicked != null) {
       props.onThreeStrandedButtonClicked(viewType);
@@ -45,6 +45,7 @@ const ThreeStrandedButton = (props) => {
 
 ThreeStrandedButton.propTypes = {
   t: PropTypes.func.isRequired, //  i18next
+  editorMode: PropTypes.string.isRequired,
   onThreeStrandedButtonClicked: PropTypes.func,
 };
 

src/client/js/components/PageEditorByHackmd.jsx

@@ -257,7 +257,7 @@ class PageEditorByHackmd extends React.Component {
         <div>
           <p className="text-center hackmd-status-label"><i className="fa fa-file-text"></i> { t('hackmd.used_for_not_found')}</p>
           {/* eslint-disable-next-line react/no-danger */}
-          <p dangerouslySetInnerHTML={{ __html: t('hackmd.need_to_make_page') }} />
+          <p>{t('hackmd.need_to_make_page')}<a href="#edit">{t('hackmd.open_editor')}</a></p>
         </div>
       );
     }