translate 'Show active line'

resource/locales/en-US/translation.json

@@ -169,9 +169,10 @@
   },
 
   "page_edit": {
-      "notice": {
-          "conflict": "Couldn't save the changes you made because someone else was editing this page. Please re-edit the affected section after reloading the page."
-      }
+    "Show active line": "Show active line",
+    "notice": {
+      "conflict": "Couldn't save the changes you made because someone else was editing this page. Please re-edit the affected section after reloading the page."
+    }
   },
 
   "page_api_error": {

resource/locales/ja/translation.json

@@ -185,9 +185,10 @@
   },
 
   "page_edit": {
-      "notice": {
-          "conflict": "すでに他の人がこのページを編集していたため保存できませんでした。ページを再読み込み後、自分の編集箇所のみ再度編集してください。"
-      }
+    "Show active line": "アクティブ行をハイライト",
+    "notice": {
+      "conflict": "すでに他の人がこのページを編集していたため保存できませんでした。ページを再読み込み後、自分の編集箇所のみ再度編集してください。"
+    }
   },
 
   "page_api_error": {

src/client/js/app.js

@@ -408,6 +408,7 @@ if (writeCommentElem) {
 const pageEditorOptionsSelectorElem = document.getElementById('page-editor-options-selector');
 if (pageEditorOptionsSelectorElem) {
   ReactDOM.render(
+    <I18nextProvider i18n={i18n}>
     <OptionsSelector crowi={crowi}
         editorOptions={editorOptions} previewOptions={previewOptions}
         onChange={(newEditorOptions, newPreviewOptions) => { // set onChange event handler
@@ -417,8 +418,8 @@ if (pageEditorOptionsSelectorElem) {
           // save
           crowi.saveEditorOptions(newEditorOptions);
           crowi.savePreviewOptions(newPreviewOptions);
-        }}
-      />,
+        }} />
+    </I18nextProvider>,
     pageEditorOptionsSelectorElem
   );
 }

src/client/js/components/PageEditor/OptionsSelector.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
 
 import FormGroup from 'react-bootstrap/es/FormGroup';
 import FormControl from 'react-bootstrap/es/FormControl';
@@ -8,7 +9,7 @@ import ControlLabel from 'react-bootstrap/es/ControlLabel';
 import Dropdown from 'react-bootstrap/es/Dropdown';
 import MenuItem from 'react-bootstrap/es/MenuItem';
 
-export default class OptionsSelector extends React.Component {
+class OptionsSelector extends React.Component {
 
   constructor(props) {
     super(props);
@@ -184,6 +185,7 @@ export default class OptionsSelector extends React.Component {
   }
 
   renderActiveLineMenuItem() {
+    const { t } = this.props;
     const isActive = this.state.editorOptions.styleActiveLine;
 
     const iconClasses = ['text-info'];
@@ -195,7 +197,7 @@ export default class OptionsSelector extends React.Component {
     return (
       <MenuItem onClick={this.onClickStyleActiveLine}>
         <span className="icon-container"></span>
-        <span className="menuitem-label">Show active line</span>
+        <span className="menuitem-label">{ t('page_edit.Show active line') }</span>
         <span className="icon-container"><i className={iconClassName}></i></span>
       </MenuItem>
     );
@@ -252,8 +254,11 @@ export class PreviewOptions {
 }
 
 OptionsSelector.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
   crowi: PropTypes.object.isRequired,
   editorOptions: PropTypes.instanceOf(EditorOptions).isRequired,
   previewOptions: PropTypes.instanceOf(PreviewOptions).isRequired,
   onChange: PropTypes.func.isRequired,
 };
+
+export default translate()(OptionsSelector);