i18n en-US

resource/locales/en-US/translation.json

@@ -366,6 +366,19 @@
     "insert_image": "inserts an image",
     "open_sandbox": "Open Sandbox"
   },
+  "hackmd": {
+    "not_set_up": "HackMD is not set up.",
+    "start_to_edit": "Start to edit with HackMD",
+    "clone_page_content": "Click to clone page content and start to edit.",
+    "unsaved_draft": "HackMD has unsaved draft.",
+    "draft_outdated": "DRAFT MAY BE OUTDATED",
+    "based_on_revision": "The current draft on HackMD is based on",
+    "view_outdated_draft": "View the outdated draft on HackMD",
+    "resume_to_edit": "Resume to edit with HackMD",
+    "discard_changes": "Discard changes of HackMD",
+    "integration_failed": "HackMD Integration failed",
+    "check_configuration": "Check your configuration following <a href='https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html'>the manual</a>."
+  },
   "security_setting": {
     "Security settings": "Security settings",
     "Guest Users Access": "Guest Users Access",

src/client/js/components/PageEditorByHackmd.jsx

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import loggerFactory from '@alias/logger';
 
+import { withTranslation } from 'react-i18next';
+
 import AppContainer from '../services/AppContainer';
 import PageContainer from '../services/PageContainer';
 import EditorContainer from '../services/EditorContainer';
@@ -225,7 +227,7 @@ class PageEditorByHackmd extends React.Component {
 
   renderPreInitContent() {
     const hackmdUri = this.getHackmdUri();
-    const { pageContainer } = this.props;
+    const { pageContainer, t } = this.props;
     const {
       revisionId, revisionIdHackmdSynced, remoteRevisionId,
     } = pageContainer.state;
@@ -239,27 +241,27 @@ class PageEditorByHackmd extends React.Component {
     if (hackmdUri == null) {
       content = (
         <div>
-          <p className="text-center hackmd-status-label"><i className="fa fa-file-text"></i> HackMD is not set up.</p>
+          <p className="text-center hackmd-status-label"><i className="fa fa-file-text"></i> { t('hackmd.not_set_up')}</p>
         </div>
       );
     }
     /*
      * Resume to edit or discard changes
      */
-    else if (this.isResume) {
+    else if (!this.isResume) {
       const isHackmdDocumentOutdated = revisionIdHackmdSynced !== remoteRevisionId;
 
       content = (
         <div>
           <p className="text-center hackmd-status-label"><i className="fa fa-file-text"></i> HackMD is READY!</p>
-          <p className="text-center"><strong>HackMD has unsaved draft.</strong></p>
+          <p className="text-center"><strong>{t('hackmd.unsaved_draft')}</strong></p>
 
           { isHackmdDocumentOutdated && (
             <div className="panel panel-warning">
-              <div className="panel-heading"><i className="icon-fw icon-info"></i> DRAFT MAY BE OUTDATED</div>
+              <div className="panel-heading"><i className="icon-fw icon-info"></i> {t('hackmd.draft_outdated')}</div>
               <div className="panel-body text-center">
-                The current draft on HackMD is based on&nbsp;
-                <a href={`?revision=${revisionIdHackmdSynced}`}><span className="label label-default">{revisionIdHackmdSynced.substr(-8)}</span></a>.
+                {t('hackmd.based_on_revision')}&nbsp;
+                <a href={`?revision=${revisionIdHackmdSynced}`}><span className="label label-default">{revisionIdHackmdSynced.substr(-8)}</span></a>
 
                 <div className="text-center mt-3">
                   <button
@@ -268,7 +270,7 @@ class PageEditorByHackmd extends React.Component {
                     disabled={this.state.isInitializing}
                     onClick={() => { return this.resumeToEdit() }}
                   >
-                    View the outdated draft on HackMD
+                    {t('hackmd.view_outdated_draft')}
                   </button>
                 </div>
               </div>
@@ -284,7 +286,7 @@ class PageEditorByHackmd extends React.Component {
                 onClick={() => { return this.resumeToEdit() }}
               >
                 <span className="btn-label"><i className="icon-control-end"></i></span>
-                <span className="btn-text">Resume to edit with HackMD</span>
+                <span className="btn-text">{t('hackmd.resume_to_edit')}</span>
               </button>
             </div>
           ) }
@@ -296,7 +298,7 @@ class PageEditorByHackmd extends React.Component {
               onClick={() => { return this.discardChanges() }}
             >
               <span className="btn-label"><i className="icon-control-start"></i></span>
-              <span className="btn-text">Discard changes of HackMD</span>
+              <span className="btn-text">{t('hackmd.discard_changes')}</span>
             </button>
           </div>
 
@@ -320,10 +322,10 @@ class PageEditorByHackmd extends React.Component {
               onClick={() => { return this.startToEdit() }}
             >
               <span className="btn-label"><i className="icon-paper-plane"></i></span>
-              Start to edit with HackMD
+              {t('hackmd.start_to_edit')}
             </button>
           </div>
-          <p className="text-center">Click to clone page content and start to edit.</p>
+          <p className="text-center">{t('hackmd.clone_page_content')}</p>
         </div>
       );
     }
@@ -337,7 +339,7 @@ class PageEditorByHackmd extends React.Component {
 
   render() {
     const hackmdUri = this.getHackmdUri();
-    const { pageContainer } = this.props;
+    const { pageContainer, t } = this.props;
     const {
       markdown, pageIdOnHackmd,
     } = pageContainer.state;
@@ -374,14 +376,13 @@ class PageEditorByHackmd extends React.Component {
         { this.state.hasError && (
           <div className="hackmd-error position-absolute d-flex flex-column justify-content-center align-items-center">
             <div className="white-box text-center">
-              <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> HackMD Integration failed</h2>
+              <h2 className="text-warning"><i className="icon-fw icon-exclamation"></i> {t('hackmd.integration_failed')}</h2>
               <h4>{this.state.errorMessage}</h4>
               <p className="well well-sm text-danger">
                 {this.state.errorReason}
               </p>
-              <p>
-                Check your configuration following <a href="https://docs.growi.org/guide/admin-cookbook/integrate-with-hackmd.html">the manual</a>.
-              </p>
+              {/* eslint-disable-next-line react/no-danger */}
+              <p dangerouslySetInnerHTML={{ __html: t('hackmd.check_configuration') }} />
             </div>
           </div>
         ) }
@@ -400,9 +401,11 @@ const PageEditorByHackmdWrapper = (props) => {
 };
 
 PageEditorByHackmd.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   pageContainer: PropTypes.instanceOf(PageContainer).isRequired,
   editorContainer: PropTypes.instanceOf(EditorContainer).isRequired,
 };
 
-export default PageEditorByHackmdWrapper;
+export default withTranslation()(PageEditorByHackmdWrapper);