Added support for saving Markdown formatting option settings.

resource/locales/en_US/translation.json

@@ -308,6 +308,7 @@
   },
   "page_edit": {
     "Show active line": "Show active line",
+    "formatting_a_markdown_table": "Formatting a Markdown Table",
     "overwrite_scopes": "{{operation}} and Overwrite scopes of all descendants",
     "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."

resource/locales/ja_JP/translation.json

@@ -310,6 +310,7 @@
   },
   "page_edit": {
     "Show active line": "アクティブ行をハイライト",
+    "formatting_a_markdown_table": "Markdownの表を整形する",
     "overwrite_scopes": "{{operation}}と同時に全ての配下ページのスコープを上書き",
     "notice": {
       "conflict": "すでに他の人がこのページを編集していたため保存できませんでした。ページを再読み込み後、自分の編集箇所のみ再度編集してください。"

resource/locales/zh_CN/translation.json

@@ -286,6 +286,7 @@
 	},
 	"page_edit": {
 		"Show active line": "显示活动行",
+		"formatting_a_markdown_table": "格式化一个Markdown表",
 		"overwrite_scopes": "{{operation}和覆盖所有子体的作用域",
 		"notice": {
 			"conflict": "无法保存您所做的更改，因为其他人正在编辑此页。请在重新加载页面后重新编辑受影响的部分。"

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

@@ -49,6 +49,7 @@ class OptionsSelector extends React.Component {
     this.onChangeKeymapMode = this.onChangeKeymapMode.bind(this);
     this.onClickStyleActiveLine = this.onClickStyleActiveLine.bind(this);
     this.onClickRenderMathJaxInRealtime = this.onClickRenderMathJaxInRealtime.bind(this);
+    this.onClickReformMarkdownTable = this.onClickReformMarkdownTable.bind(this);
     this.onToggleConfigurationDropdown = this.onToggleConfigurationDropdown.bind(this);
   }
 
@@ -97,6 +98,17 @@ class OptionsSelector extends React.Component {
     editorContainer.saveOptsToLocalStorage();
   }
 
+  onClickReformMarkdownTable(event_unused) {
+    const { editorContainer } = this.props;
+
+    const newValue = !editorContainer.state.editorOptions.reformMarkdownTable;
+    const newOpts = Object.assign(editorContainer.state.editorOptions, { reformMarkdownTable: newValue });
+    editorContainer.setState({ editorOptions: newOpts });
+
+    // save to localStorage
+    editorContainer.saveOptsToLocalStorage();
+  }
+
   onToggleConfigurationDropdown(newValue) {
     this.setState({ isCddMenuOpened: !this.state.isCddMenuOpened });
   }
@@ -187,6 +199,7 @@ class OptionsSelector extends React.Component {
           <DropdownMenu>
             {this.renderActiveLineMenuItem()}
             {this.renderRealtimeMathJaxMenuItem()}
+            {this.renderReformMarkdownTableMenuItem()}
             {/* <DropdownItem divider /> */}
           </DropdownMenu>
 
@@ -244,6 +257,27 @@ class OptionsSelector extends React.Component {
     );
   }
 
+  renderReformMarkdownTableMenuItem() {
+    const { t, editorContainer } = this.props;
+    const isActive = editorContainer.state.editorOptions.reformMarkdownTable;
+
+    const iconClasses = ['text-info'];
+    if (isActive) {
+      iconClasses.push('ti-check');
+    }
+    const iconClassName = iconClasses.join(' ');
+
+    return (
+      <DropdownItem toggle={false} onClick={this.onClickReformMarkdownTable}>
+        <div className="d-flex justify-content-between">
+          <span className="icon-container"></span>
+          <span className="menuitem-label">{ t('page_edit.formatting_a_markdown_table') }</span>
+          <span className="icon-container"><i className={iconClassName}></i></span>
+        </div>
+      </DropdownItem>
+    );
+  }
+
   render() {
     return (
       <div className="d-flex flex-row">