markdown help

resource/locales/en-US/translation.json

@@ -273,6 +273,37 @@
     }
   },
 
+  "sandbox": {
+    "header": "Header {{index}}",
+    "block": "Paragraph",
+    "block_detail": "makes a paragraph",
+    "empty_line": "Empty Line",
+    "line_break": "Line Break",
+    "line_break_detail": "(2 spaces) make a line break",
+    "typography": "Typography",
+    "italics": "Italics",
+    "bold": "Bold",
+    "italic_bold": "Italic Bold",
+    "strikethrough": "strikethrough",
+    "link": "Link",
+    "code_highlight": "Code Highlight",
+    "list": "List",
+    "unordered_list": "Unordered List {{index}}",
+    "ordered_list": "Ordered List {{index}}",
+    "task": "Task",
+    "task_checked": "Checked",
+    "task_unchecked": "Unchecked",
+    "quote": "Quote",
+    "quote1": "You can write",
+    "quote2": "multi-line quotations",
+    "quote_nested": "Nested Quote",
+    "table": "Table",
+    "image": "Image",
+    "alt_text": "Alt Text",
+    "insert_image": "inserts an image",
+    "open_sandbox": "Open Sandbox"
+  },
+
   "admin_top": {
     "Management Wiki": "Management Wiki",
     "System Information": "System Information",

resource/locales/ja/translation.json

@@ -286,6 +286,37 @@
     }
   },
 
+  "sandbox": {
+    "header": "見出し {{index}}",
+    "block": "ブロック",
+    "block_detail": "を挟むことで段落になります",
+    "empty_line": "空白行",
+    "line_break": "改行",
+    "line_break_detail": "(スペース2つ) で改行されます",
+    "typography": "タイポグラフィー",
+    "italics": "斜体",
+    "bold": "強調",
+    "italic_bold": "イタリックボールド",
+    "strikethrough": "取り消し線",
+    "link": "リンク",
+    "code_highlight": "コードハイライト",
+    "list": "リスト",
+    "unordered_list": "リスト {{index}}",
+    "ordered_list": "番号付きリスト {{index}}",
+    "task": "タスク",
+    "task_checked": "チェック付き",
+    "task_unchecked": "チェックなし",
+    "quote": "引用",
+    "quote1": "複数行の引用文を",
+    "quote2": "書くことができます",
+    "table": "テーブル",
+    "quote_nested": "多重引用",
+    "image": "画像",
+    "alt_text": "Alt文字列",
+    "insert_image": "で画像を挿入できます",
+    "open_sandbox": "Sandbox を開く"
+  },
+
   "admin_top": {
     "Management Wiki": "Wiki管理",
     "System Information": "システム情報",

src/client/js/components/PageEditor/Cheatsheet.js

@@ -0,0 +1,102 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+
+class Cheatsheet extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="row small">
+        <div className="col-sm-6">
+          <h4>{t('sandbox.header')}</h4>
+          <ul className="hljs">
+            <li><code># </code>{t('sandbox.header', {index: '1'})}</li>
+            <li><code>## </code>{t('sandbox.header', {index: '2'})}</li>
+            <li><code>### </code>{t('sandbox.header', {index: '3'})}</li>
+          </ul>
+          <h4>{t('sandbox.block')}</h4>
+          <p className="mb-1"><code>[{t('sandbox.empty_line')}]</code>{t('sandbox.block_detail')}</p>
+          <ul className="hljs">
+            <li>text</li>
+            <li></li>
+            <li>text</li>
+          </ul>
+          <h4>{t('sandbox.line_break')}</h4>
+          <p className="mb-1"><code>[ ][ ]</code> {t('sandbox.line_break_detail')}</p>
+          <ul className="hljs">
+            <li>text</li>
+            <li>text</li>
+          </ul>
+          <h4>{t('sandbox.typography')}</h4>
+          <ul className="hljs">
+            <li><i>*{t('sandbox.italics')}*</i></li>
+            <li><b>**{t('sandbox.bold')}**</b></li>
+            <li><i><b>***{t('sandbox.italic_bold')}***</b></i></li>
+            <li>~~{t('sandbox.strikethrough')}~~ => <s>{t('sandbox.strikethrough')}</s></li>
+          </ul>
+          <h4>{t('sandbox.link')}</h4>
+          <ul className="hljs">
+            <li>[Google](https://www.google.co.jp/)</li>
+            <li>[/Page1/ChildPage1]</li>
+          </ul>
+          <h4>{t('sandbox.code_highlight')}</h4>
+          <ul className="hljs">
+            <li>```javascript:index.js</li>
+            <li>writeCode();</li>
+            <li>```</li>
+          </ul>
+        </div>
+        <div className="col-sm-6">
+          <h4>{t('sandbox.list')}</h4>
+          <ul className="hljs">
+            <li>- {t('sandbox.unordered_list', {index: '1'})}</li>
+            <li>&nbsp;&nbsp;- {t('sandbox.unordered_list', {index: '1_1'})}</li>
+            <li>- {t('sandbox.unordered_list', {index: '2'})}</li>
+          </ul>
+          <ul className="hljs">
+            <li>1. {t('sandbox.ordered_list', {index: '1'})}</li>
+            <li>1. {t('sandbox.ordered_list', {index: '2'})}</li>
+          </ul>
+          <ul className="hljs">
+            <li>- [ ] {t('sandbox.task')}({t('sandbox.task_unchecked')})</li>
+            <li>- [x] {t('sandbox.task')}({t('sandbox.task_checked')})</li>
+          </ul>
+          <h4>{t('sandbox.quote')}</h4>
+          <ul className="hljs">
+            <li>> {t('sandbox.quote1')}</li>
+            <li>> {t('sandbox.quote2')}</li>
+          </ul>
+          <ul className="hljs">
+            <li>>> {t('sandbox.quote_nested')}</li>
+            <li>>>> {t('sandbox.quote_nested')}</li>
+            <li>>>>> {t('sandbox.quote_nested')}</li>
+          </ul>
+          <h4>{t('sandbox.table')}</h4>
+          <ul className="hljs text-center">
+            <li>|Left&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;Mid&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Right|</li>
+            <li>|:----------|:---------:|----------:|</li>
+            <li>|col 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;col 2&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;col 3|</li>
+            <li>|col 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;col 2&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;col 3|</li>
+          </ul>
+          <h4>{t('sandbox.image')}</h4>
+          <p className="mb-1"><code> ![{t('sandbox.alt_text')}](URL)</code> {t('sandbox.insert_image')}</p>
+          <ul className="hljs">
+            <li>![ex](https://example.com/image.png)</li>
+          </ul>
+
+          <hr />
+          <a href="/Sandbox" className="btn btn-info btn-block" target="_blank">
+            <i className="icon-share-alt"/> {t('sandbox.open_sandbox')}
+          </a>
+        </div>
+      </div>
+    );
+  }
+}
+
+Cheatsheet.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
+};
+
+export default translate()(Cheatsheet);

src/client/js/components/PageEditor/CodeMirrorEditor.js

@@ -44,6 +44,9 @@ require('../../util/codemirror/autorefresh.ext');
 
 import AbstractEditor from './AbstractEditor';
 
+import SimpleCheatsheet from './SimpleCheatsheet';
+import Cheatsheet from './Cheatsheet';
+
 import pasteHelper from './PasteHelper';
 import EmojiAutoCompleteHelper from './EmojiAutoCompleteHelper';
 
@@ -510,130 +513,11 @@ export default class CodeMirrorEditor extends AbstractEditor {
   }
 
   renderSimpleCheatsheet() {
-    return (
-      <div className="panel panel-default gfm-cheatsheet mb-0">
-        <div className="panel-body small p-b-0">
-          <div className="row">
-            <div className="col-xs-6">
-              <p>
-                # 見出し1<br />
-                ## 見出し2
-              </p>
-              <p><i>*斜体*</i>&nbsp;&nbsp;<b>**強調**</b></p>
-              <p>
-                [リンク](http://..)<br />
-                [/ページ名/子ページ名]
-              </p>
-              <p>
-                ```javascript:index.js<br />
-                writeCode();<br />
-                ```
-              </p>
-            </div>
-            <div className="col-xs-6">
-              <p>
-                - リスト 1<br />
-                &nbsp;&nbsp;&nbsp;&nbsp;- リスト 1_1<br />
-                - リスト 2<br />
-                1. 番号付きリスト 1<br />
-                1. 番号付きリスト 2
-              </p>
-              <hr />
-              <p>行末にスペース2つ[ ][ ]<br />で改行</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
+    return <SimpleCheatsheet />;
   }
 
   renderCheatsheetModalBody() {
-    return (
-      <div className="row small">
-        <div className="col-sm-6">
-          <h4>Header</h4>
-          <ul className="hljs">
-            <li><code># </code>見出し1</li>
-            <li><code>## </code>見出し2</li>
-            <li><code>### </code>見出し3</li>
-          </ul>
-          <h4>Block</h4>
-          <p className="mb-1"><code>[空白行]</code>を挟むことで段落になります</p>
-          <ul className="hljs">
-            <li>text</li>
-            <li></li>
-            <li>text</li>
-          </ul>
-          <h4>Line breaks</h4>
-          <p className="mb-1">段落中、<code>[space][space]</code>(スペース2つ) で改行されます</p>
-          <ul className="hljs">
-            <li>text<code> </code><code> </code></li>
-            <li>text</li>
-          </ul>
-          <h4>Typography</h4>
-          <ul className="hljs">
-            <li><i>*イタリック*</i></li>
-            <li><b>**ボールド**</b></li>
-            <li><i><b>***イタリックボールド***</b></i></li>
-            <li>~~取り消し線~~ => <s>striked text</s></li>
-          </ul>
-          <h4>Link</h4>
-          <ul className="hljs">
-            <li>[Google](https://www.google.co.jp/)</li>
-            <li>[/Page1/ChildPage1]</li>
-          </ul>
-          <h4>コードハイライト</h4>
-          <ul className="hljs">
-            <li>```javascript:index.js</li>
-            <li>writeCode();</li>
-            <li>```</li>
-          </ul>
-        </div>
-        <div className="col-sm-6">
-          <h4>リスト</h4>
-          <ul className="hljs">
-            <li>- リスト 1</li>
-            <li>&nbsp;&nbsp;- リスト 1_1</li>
-            <li>- リスト 2</li>
-          </ul>
-          <ul className="hljs">
-            <li>1. 番号付きリスト 1</li>
-            <li>1. 番号付きリスト 2</li>
-          </ul>
-          <ul className="hljs">
-            <li>- [ ] タスク(チェックなし)</li>
-            <li>- [x] タスク(チェック付き)</li>
-          </ul>
-          <h4>引用</h4>
-          <ul className="hljs">
-            <li>> 複数行の引用文を</li>
-            <li>> 書くことができます</li>
-          </ul>
-          <ul className="hljs">
-            <li>>> 多重引用</li>
-            <li>>>> 多重引用</li>
-            <li>>>>> 多重引用</li>
-          </ul>
-          <h4>Table</h4>
-          <ul className="hljs text-center">
-            <li>|&nbsp;&nbsp;&nbsp;左寄せ&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;中央寄せ&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;右寄せ&nbsp;&nbsp;&nbsp;|</li>
-            <li>|:-----------|:----------:|-----------:|</li>
-            <li>|column 1&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;column 2&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;column 3|</li>
-            <li>|column 1&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;column 2&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;column 3|</li>
-          </ul>
-          <h4>Images</h4>
-          <p className="mb-1"><code> ![Alt文字列](URL)</code> で<span className="text-info">&lt;img&gt;</span>タグを挿入できます</p>
-          <ul className="hljs">
-            <li>![ex](https://example.com/images/a.png)</li>
-          </ul>
-
-          <hr />
-          <a href="/Sandbox" className="btn btn-info btn-block" target="_blank">
-            <i className="icon-share-alt"/> Sandbox を開く
-          </a>
-        </div>
-      </div>
-    );
+    return <Cheatsheet />;
   }
 
   renderCheatsheetModalButton() {

src/client/js/components/PageEditor/SimpleCheatsheet.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { translate } from 'react-i18next';
+
+class SimpleCheatsheet extends React.Component {
+  render() {
+    const { t } = this.props;
+
+    return (
+      <div className="panel panel-default gfm-cheatsheet mb-0">
+        <div className="panel-body small p-b-0">
+          <div className="row">
+            <div className="col-xs-6">
+              <p>
+                # {t('sandbox.header', {index: '1'})}<br />
+                ## {t('sandbox.header', {index: '2'})}
+              </p>
+              <p><i>*{t('sandbox.italics')}*</i>&nbsp;&nbsp;<b>**{t('sandbox.bold')}**</b></p>
+              <p>
+                [{t('sandbox.link')}](http://..)<br />
+                [/Page1/ChildPage1]
+              </p>
+              <p>
+                ```javascript:index.js<br />
+                writeCode();<br />
+                ```
+              </p>
+            </div>
+            <div className="col-xs-6">
+              <p>
+                - {t('sandbox.unordered_list', {index: '1'})}<br />
+                &nbsp;&nbsp;&nbsp;- {t('sandbox.unordered_list', {index: '1_1'})}<br />
+                - {t('sandbox.unordered_list', {index: '2'})}<br />
+                1. {t('sandbox.ordered_list', {index: '1'})}<br />
+                1. {t('sandbox.ordered_list', {index: '2'})}
+              </p>
+              <hr />
+              <p>[ ][ ] {t('sandbox.block_detail')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+SimpleCheatsheet.propTypes = {
+  t: PropTypes.func.isRequired,               // i18next
+};
+
+export default translate()(SimpleCheatsheet);