Merge pull request #1509 from weseek/imprv/markdown-setting

Imprv/markdown setting

resource/locales/en-US/admin/markdown_setting.json

@@ -0,0 +1,35 @@
+{
+  "lineBreak_header": "Line Break Setting",
+  "lineBreak_desc": "You can change line break settings.",
+  "lineBreak_options": {
+    "enable_lineBreak": "Enable Line Break",
+    "enable_lineBreak_desc": "Treat line break in the text page as<code>&lt;br&gt;</code>in HTML",
+    "enable_lineBreak_for_comment": "Enable Line Break in comment",
+    "enable_lineBreak_for_comment_desc": "Treat line break in comment as<code>&lt;br&gt;</code>in HTML"
+  },
+  "presentation_header": "Presentation Setting",
+  "presentation_desc": "You can change presentation settings.",
+  "presentation_options": {
+    "page_break_setting": "Page break Setting",
+    "preset_one_separator": "Preset 1",
+    "preset_one_separator_desc": "3 Blank lines",
+    "preset_one_separator_value": "\\n\\n\\n",
+    "preset_two_separator": "Preset 2",
+    "preset_two_separator_desc": "5 Hyphens",
+    "preset_two_separator_value": "-----",
+    "custom_separator": "Custom",
+    "custom_separator_desc": "Regular Expression"
+  },
+  "xss_header": "Prevent XSS(Cross Site Scripting) Setting",
+  "xss_desc": "You can change the handling of HTML tags in markdown text.",
+  "xss_options": {
+    "enable_xss_prevention": "Enable XSS Prevention",
+    "ignore_all_tags": "Ignore All Tags",
+    "ignore_all_tags_desc": "Stripe all HTML tags and attributes",
+    "recommended_setting": "Recommended Setting",
+    "custom_whitelist": "Custom Whitelist",
+    "tag_names": "Tag names",
+    "tag_attributes": "Tag attributes",
+    "import_recommended": "Import recommended"
+  }
+}

resource/locales/en-US/common/toaster.json

@@ -0,0 +1,3 @@
+{
+  "update_successed": "Succeeded to update {{target}} setting"
+}

resource/locales/en-US/translation.json

@@ -555,38 +555,6 @@
       "security:passport-saml:attrMapLastName": "Last Name"
     }
   },
-  "markdown_setting": {
-    "line_break_setting": "Line Break Setting",
-    "line_break_setting_desc": "You can change line break settings.",
-    "Enable Line Break": "Enable Line Break",
-    "Enable Line Break desc": "Treat line break in the text page as<code>&lt;br&gt;</code>in HTML",
-    "Enable Line Break for comment": "Enable Line Break in comment",
-    "Enable Line Break for comment desc": "Treat line break in comment as<code>&lt;br&gt;</code>in HTML",
-    "presentation_setting": "Presentation Setting",
-    "presentation_setting_desc": "You can change presentation settings.",
-    "Page break setting": "Page break Setting",
-    "Preset one separator": "Preset 1",
-    "Preset one separator desc": "3 Blank lines",
-    "Preset one separator value": "\\n\\n\\n",
-    "Preset two separator": "Preset 2",
-    "Preset two separator desc": "5 Hyphens",
-    "Preset two separator value": "-----",
-    "Custom separator": "Custom",
-    "Custom separator desc": "Regular Expression",
-    "XSS_setting": "Prevent XSS(Cross Site Scripting) Setting",
-    "XSS_setting_desc": "You can change the handling of HTML tags in markdown text.",
-    "Enable XSS prevention": "Enable XSS Prevention",
-    "Ignore all tags": "Ignore All Tags",
-    "Ignore all tags desc": "Stripe all HTML tags and attributes",
-    "Recommended setting": "Recommended Setting",
-    "Custom Whitelist": "Custom Whitelist",
-    "Tag names": "Tag names",
-    "Tag attributes": "Tag attributes",
-    "import_recommended": "Import recommended %s",
-    "updated_lineBreak": "Succeeded to update line braek setting",
-    "updated_presentation": "Succeeded to update presentation setting",
-    "updated_xss": "Succeeded to update XSS setting"
-  },
   "notification_setting": {
     "notification_list": "List of Notification Settings",
     "add_notification": "Add New",

resource/locales/ja/admin/markdown_setting.json

@@ -0,0 +1,35 @@
+{
+  "lineBreak_header": "Line Break設定",
+  "lineBreak_desc": "Line Breakの設定を変更できます。",
+  "lineBreak_options": {
+    "enable_lineBreak": "Line Break を有効にする",
+    "enable_lineBreak_desc": "ページテキスト中の改行を、HTML内で<code>&lt;br&gt;</code>として扱います",
+    "enable_lineBreak_for_comment": "コメント欄で Line Break を有効にする",
+    "enable_lineBreak_for_comment_desc": "コメント中の改行を、HTML内で<code>&lt;br&gt;</code>として扱います"
+  },
+  "presentation_header": "プレゼンテーション設定",
+  "presentation_desc": "プレゼンテーションの設定を変更できます。",
+  "presentation_options": {
+    "page_break_setting": "改頁を設定する",
+    "preset_one_separator": "プリセット 1",
+    "preset_one_separator_desc": "連続した空行3行で改頁します",
+    "preset_one_separator_value": "\\n\\n\\n",
+    "preset_two_separator": "プリセット 2",
+    "preset_two_separator_desc": "連続したハイフン5つで改頁します",
+    "preset_two_separator_value": "-----",
+    "custom_separator": "カスタム",
+    "custom_separator_desc": "正規表現を設定できます"
+  },
+  "xss_header": "XSS(Cross Site Scripting)対策設定",
+  "xss_desc": "マークダウンテキスト内の HTML タグの扱いを設定し、悪意のあるプログラムからの攻撃を防ぎます",
+  "xss_options": {
+    "enable_xss_prevention": "XSSを抑制する",
+    "ignore_all_tags": "すべてのタグを抑制する",
+    "ignore_all_tags_desc": "すべてのHTMLタグと属性を使用不可にします",
+    "recommended_setting": "おすすめ設定",
+    "custom_whitelist": "カスタムホワイトリスト",
+    "tag_names": "タグ名のホワイトリスト",
+    "tag_attributes": "タグ属性のホワイトリスト",
+    "import_recommended": "おすすめをインポート"
+  }
+}

resource/locales/ja/common/toaster.json

@@ -0,0 +1,3 @@
+{
+  "update_successed": "{{target}}設定を更新しました"
+}

resource/locales/ja/translation.json

@@ -539,38 +539,6 @@
       "security:passport-saml:attrMapLastName": "名"
     }
   },
-  "markdown_setting": {
-    "line_break_setting": "Line Break設定",
-    "line_break_setting_desc": "Line Breakの設定を変更できます。",
-    "Enable Line Break": "Line Break を有効にする",
-    "Enable Line Break desc": "ページテキスト中の改行を、HTML内で<code>&lt;br&gt;</code>として扱います",
-    "Enable Line Break for comment": "コメント欄で Line Break を有効にする",
-    "Enable Line Break for comment desc": "コメント中の改行を、HTML内で<code>&lt;br&gt;</code>として扱います",
-    "presentation_setting": "プレゼンテーション設定",
-    "presentation_setting_desc": "プレゼンテーションの設定を変更できます。",
-    "Page break setting": "改頁を設定する",
-    "Preset one separator": "プリセット 1",
-    "Preset one separator desc": "連続した空行3行で改頁します",
-    "Preset one separator value": "\\n\\n\\n",
-    "Preset two separator": "プリセット 2",
-    "Preset two separator desc": "連続したハイフン5つで改頁します",
-    "Preset two separator value": "-----",
-    "Custom separator": "カスタム",
-    "Custom separator desc": "正規表現を設定できます",
-    "XSS_setting": "XSS(Cross Site Scripting)対策設定",
-    "XSS_setting_desc": "マークダウンテキスト内の HTML タグの扱いを設定し、悪意のあるプログラムからの攻撃を防ぎます",
-    "Enable XSS prevention": "XSSを抑制する",
-    "Ignore all tags": "すべてのタグを抑制する",
-    "Ignore all tags desc": "すべてのHTMLタグと属性を使用不可にします",
-    "Recommended setting": "おすすめ設定",
-    "Custom Whitelist": "カスタムホワイトリスト",
-    "Tag names": "タグ名のホワイトリスト",
-    "Tag attributes": "タグ属性のホワイトリスト",
-    "import_recommended": "おすすめをインポート",
-    "updated_lineBreak": "改行設定を更新しました",
-    "updated_presentation": "プレゼンテーション設定を更新しました",
-    "updated_xss": "XSS設定を更新しました"
-  },
   "notification_setting": {
     "notification_list": "通知設定の一覧",
     "add_notification": "通知設定の追加",
@@ -591,7 +559,7 @@
     }
   },
   "customize_page": {
-    "recommended":"おすすめ",
+    "recommended": "おすすめ",
     "Behavior": "動作",
     "Layout": "レイアウト",
     "Function": "機能",
@@ -628,29 +596,29 @@
     "update_customHeader_success": "カスタムHTMLヘッダーを更新しました",
     "update_customCss_success": "カスタムCSSを更新しました",
     "update_script_success": "カスタムスクリプトを更新しました",
-    "layout_description":{
-      "growi_title":"シンプル・明瞭",
-      "growi_text1":"全画面レイアウトで、余白は少なくなります。",
-      "growi_text2":"コメントはページの下部に表示されます。",
-      "growi_text3":"ページ情報は下部に表示されます。",
-      "kibela_title":"閲覧重視の構造",
-      "kibela_text1":"コンテンツが中心に表示されます。",
-      "kibela_text2":"コメントはページの下部に表示されます。",
-      "kibela_text3":"ページ情報は下部に表示されます。",
-      "crowi_title":"ビュー・コントロールの分離",
-      "crowi_text1":"サイドバーを開くと情報が表示されます。",
-      "crowi_text2":"コメントはサイドバーに表示されます。",
-      "crowi_text3":"ページ情報はサイドバーに表示されます。"
+    "layout_description": {
+      "growi_title": "シンプル・明瞭",
+      "growi_text1": "全画面レイアウトで、余白は少なくなります。",
+      "growi_text2": "コメントはページの下部に表示されます。",
+      "growi_text3": "ページ情報は下部に表示されます。",
+      "kibela_title": "閲覧重視の構造",
+      "kibela_text1": "コンテンツが中心に表示されます。",
+      "kibela_text2": "コメントはページの下部に表示されます。",
+      "kibela_text3": "ページ情報は下部に表示されます。",
+      "crowi_title": "ビュー・コントロールの分離",
+      "crowi_text1": "サイドバーを開くと情報が表示されます。",
+      "crowi_text2": "コメントはサイドバーに表示されます。",
+      "crowi_text3": "ページ情報はサイドバーに表示されます。"
     },
-    "behavior_description":{
-      "growi_text1":"<code>/page</code>と<code>/page/</code>どちらのパスも同じページを表示します。",
-      "growi_text2":"<code>/nonexistent_page</code> では編集フォームを表示します",
-      "growi_text3":"<b>GROWI Enhanced Layout</b>では全てのページが配下のページリストを表示します",
-      "crowi_text1":"<code>/page</code> ではページを表示します。",
-      "crowi_text2":"<code>/page/</code> では配下のページを表示します。",
-      "crowi_text3":"<code>/page/</code>がポータルに適応している場合、ポータルページと配下のページリストを表示します。",
-      "crowi_text4":"<code>/nonexistent_page</code> では編集フォームを表示します",
-      "crowi_text5":"<code>/nonexistent_page</code> では配下のページリストを表示します。"
+    "behavior_description": {
+      "growi_text1": "<code>/page</code>と<code>/page/</code>どちらのパスも同じページを表示します。",
+      "growi_text2": "<code>/nonexistent_page</code> では編集フォームを表示します",
+      "growi_text3": "<b>GROWI Enhanced Layout</b>では全てのページが配下のページリストを表示します",
+      "crowi_text1": "<code>/page</code> ではページを表示します。",
+      "crowi_text2": "<code>/page/</code> では配下のページを表示します。",
+      "crowi_text3": "<code>/page/</code>がポータルに適応している場合、ポータルページと配下のページリストを表示します。",
+      "crowi_text4": "<code>/nonexistent_page</code> では編集フォームを表示します",
+      "crowi_text5": "<code>/nonexistent_page</code> では配下のページリストを表示します。"
     }
   },
   "user_management": {

src/client/js/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -26,7 +26,7 @@ class LineBreakForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updateLineBreakSetting();
-      toastSuccess(t('markdown_setting.updated_lineBreak'));
+      toastSuccess(t('toaster:update_successed', { target: 'Line Break' }));
     }
     catch (err) {
       toastError(err);
@@ -38,7 +38,7 @@ class LineBreakForm extends React.Component {
     const { t, adminMarkDownContainer } = this.props;
     const { isEnabledLinebreaks } = adminMarkDownContainer.state;
 
-    const helpLineBreak = { __html: t('markdown_setting.Enable Line Break desc') };
+    const helpLineBreak = { __html: t('markdown_setting:lineBreak_options.enable_lineBreak_desc') };
 
     return (
       <div className="form-group row">
@@ -51,7 +51,7 @@ class LineBreakForm extends React.Component {
               onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
             />
             <label htmlFor="isEnabledLinebreaks">
-              {t('markdown_setting.Enable Line Break')}
+              {t('markdown_setting:lineBreak_options.enable_lineBreak')}
             </label>
           </div>
           <p className="help-block" dangerouslySetInnerHTML={helpLineBreak} />
@@ -64,7 +64,7 @@ class LineBreakForm extends React.Component {
     const { t, adminMarkDownContainer } = this.props;
     const { isEnabledLinebreaksInComments } = adminMarkDownContainer.state;
 
-    const helpLineBreakInComment = { __html: t('markdown_setting.Enable Line Break for comment desc') };
+    const helpLineBreakInComment = { __html: t('markdown_setting:lineBreak_options.enable_lineBreak_for_comment_desc') };
 
     return (
       <div className="form-group row">
@@ -77,7 +77,7 @@ class LineBreakForm extends React.Component {
               onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
             />
             <label htmlFor="isEnabledLinebreaksInComments">
-              {t('markdown_setting.Enable Line Break for comment')}
+              {t('markdown_setting:lineBreak_options.enable_lineBreak')}
             </label>
           </div>
           <p className="help-block" dangerouslySetInnerHTML={helpLineBreakInComment} />

src/client/js/components/Admin/MarkdownSetting/LineBreakSetting.jsx

@@ -1,115 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { withTranslation } from 'react-i18next';
-import loggerFactory from '@alias/logger';
-
-import { createSubscribedElement } from '../../UnstatedUtils';
-import { toastSuccess, toastError } from '../../../util/apiNotification';
-
-import AppContainer from '../../../services/AppContainer';
-
-const logger = loggerFactory('growi:LineBreak');
-
-class LineBreakSetting extends React.Component {
-
-  constructor(props) {
-    super(props);
-
-    const { appContainer } = this.props;
-
-    this.state = {
-      isEnabledLinebreaks: appContainer.config.isEnabledLinebreaks,
-      isEnabledLinebreaksInComments: appContainer.config.isEnabledLinebreaksInComments,
-    };
-    this.onChangeEnableLineBreaks = this.onChangeEnableLineBreaks.bind(this);
-    this.onChangeEnableLineBreaksInComments = this.onChangeEnableLineBreaksInComments.bind(this);
-    this.changeLineBreakSettings = this.changeLineBreakSettings.bind(this);
-  }
-
-
-  onChangeEnableLineBreaks() {
-    this.setState({ isEnabledLinebreaks: !this.state.isEnabledLinebreaks });
-  }
-
-  onChangeEnableLineBreaksInComments() {
-    this.setState({ isEnabledLinebreaksInComments: !this.state.isEnabledLinebreaksInComments });
-  }
-
-  async changeLineBreakSettings() {
-    const { appContainer } = this.props;
-    const params = {
-      isEnabledLinebreaks: this.state.isEnabledLinebreaks,
-      isEnabledLinebreaksInComments: this.state.isEnabledLinebreaksInComments,
-    };
-    try {
-      await appContainer.apiPost('/admin/markdown/lineBreaksSetting', { params });
-      toastSuccess('Success change line braek setting');
-    }
-    catch (err) {
-      toastError(err);
-      logger.error(err);
-    }
-  }
-
-
-  render() {
-    const { t } = this.props;
-
-    return (
-      <React.Fragment>
-        <div className="row my-3">
-          <div className="form-group">
-            <legend>{ t('markdown_setting.line_break_setting') }</legend>
-            <p className="well">{ t('markdown_setting.line_break_setting_desc') }</p>
-            <fieldset className="row">
-              <div className="form-group">
-                <div className="col-xs-4 text-right">
-                  <div className="checkbox checkbox-success" onChange={this.onChangeEnableLineBreaks}>
-                    <input type="checkbox" name="isEnabledLinebreaks" checked={this.state.isEnabledLinebreaks} />
-                    <label>
-                      { t('markdown_setting.Enable Line Break') }
-                    </label>
-                    <p className="help-block">{ t('markdown_setting.Enable Line Break desc') }</p>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-            <fieldset className="row">
-              <div className="form-group my-3">
-                <div className="col-xs-4 text-right">
-                  <div className="checkbox checkbox-success" onChange={this.onChangeEnableLineBreaksInComments}>
-                    <input type="checkbox" name="isEnabledLinebreaksInComments" checked={this.state.isEnabledLinebreaksInComments} />
-                    <label>
-                      { t('markdown_setting.Enable Line Break for comment') }
-                    </label>
-                    <p className="help-block">{ t('markdown_setting.Enable Line Break for comment desc') }</p>
-                  </div>
-                </div>
-              </div>
-            </fieldset>
-          </div>
-          <div className="form-group my-3">
-            <div className="col-xs-offset-4 col-xs-5">
-              <button type="submit" className="btn btn-primary" onClick={this.changeLineBreakSettings}>{ t('Update') }</button>
-            </div>
-          </div>
-        </div>
-      </React.Fragment>
-    );
-  }
-
-}
-
-/**
- * Wrapper component for using unstated
- */
-const LineBreakSettingWrapper = (props) => {
-  return createSubscribedElement(LineBreakSetting, props, [AppContainer]);
-};
-
-LineBreakSetting.propTypes = {
-  t: PropTypes.func.isRequired, // i18next
-  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-};
-
-export default withTranslation()(LineBreakSettingWrapper);

src/client/js/components/Admin/MarkdownSetting/MarkDownSetting.jsx

@@ -38,22 +38,22 @@ class MarkdownSetting extends React.Component {
       <React.Fragment>
         {/* Line Break Setting */}
         <div className="row mb-5">
-          <h2 className="border-bottom">{ t('markdown_setting.line_break_setting') }</h2>
-          <p className="well">{ t('markdown_setting.line_break_setting_desc') }</p>
+          <h2 className="border-bottom">{t('markdown_setting:lineBreak_header')}</h2>
+          <p className="well">{t('markdown_setting:lineBreak_desc')}</p>
           <LineBreakForm />
         </div>
 
         {/* Presentation Setting */}
         <div className="row mb-5">
-          <h2 className="border-bottom">{ t('markdown_setting.presentation_setting') }</h2>
-          <p className="well">{ t('markdown_setting.presentation_setting_desc') }</p>
+          <h2 className="border-bottom">{t('markdown_setting:presentation_header')}</h2>
+          <p className="well">{t('markdown_setting:presentation_desc')}</p>
           <PresentationForm />
         </div>
 
         {/* XSS Setting */}
         <div className="row mb-5">
-          <h2 className="border-bottom">{ t('markdown_setting.XSS_setting') }</h2>
-          <p className="well">{ t('markdown_setting.XSS_setting_desc') }</p>
+          <h2 className="border-bottom">{t('markdown_setting:xss_header')}</h2>
+          <p className="well">{t('markdown_setting:xss_desc')}</p>
           <XssForm />
         </div>
       </React.Fragment>

src/client/js/components/Admin/MarkdownSetting/PresentationForm.jsx

@@ -24,7 +24,7 @@ class PresentationForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updatePresentationSetting();
-      toastSuccess(t('markdown_setting.updated_presentation'));
+      toastSuccess(t('toaster:update_successed', { target: 'Presentation' }));
     }
     catch (err) {
       toastError(err);
@@ -41,7 +41,7 @@ class PresentationForm extends React.Component {
       <fieldset className="form-group row my-2">
 
         <label className="col-xs-3 control-label text-right">
-          { t('markdown_setting.Page break setting') }
+          {t('markdown_setting:presentation_options.page_break_setting')}
         </label>
 
         <div className="col-xs-3 radio radio-primary">
@@ -52,10 +52,10 @@ class PresentationForm extends React.Component {
             onChange={() => adminMarkDownContainer.switchPageBreakSeparator(1)}
           />
           <label htmlFor="pageBreakOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset one separator') }</p>
+            <p className="font-weight-bold">{t('markdown_setting:presentation_options.preset_one_separator')}</p>
             <div className="mt-3">
-              { t('markdown_setting.Preset one separator desc') }
-              <pre><code>{ t('markdown_setting.Preset one separator value') }</code></pre>
+              {t('markdown_setting:presentation_options.preset_one_separator_desc')}
+              <pre><code>{t('markdown_setting:presentation_options.preset_one_separator_value')}</code></pre>
             </div>
           </label>
         </div>
@@ -68,10 +68,10 @@ class PresentationForm extends React.Component {
             onChange={() => adminMarkDownContainer.switchPageBreakSeparator(2)}
           />
           <label htmlFor="pageBreakOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Preset two separator') }</p>
+            <p className="font-weight-bold">{t('markdown_setting:presentation_options.preset_two_separator')}</p>
             <div className="mt-3">
-              { t('markdown_setting.Preset two separator desc') }
-              <pre><code>{ t('markdown_setting.Preset two separator value') }</code></pre>
+              {t('markdown_setting:presentation_options.preset_two_separator_desc')}
+              <pre><code>{t('markdown_setting:presentation_options.preset_two_separator_value')}</code></pre>
             </div>
           </label>
         </div>
@@ -84,9 +84,9 @@ class PresentationForm extends React.Component {
             onChange={() => adminMarkDownContainer.switchPageBreakSeparator(3)}
           />
           <label htmlFor="pageBreakOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom separator') }</p>
+            <p className="font-weight-bold">{t('markdown_setting:presentation_options.custom_separator')}</p>
             <div className="mt-3">
-              { t('markdown_setting.Custom separator desc') }
+              {t('markdown_setting:presentation_options.custom_separator_desc')}
               <input
                 className="form-control"
                 defaultValue={pageBreakCustomSeparator}
@@ -98,7 +98,7 @@ class PresentationForm extends React.Component {
 
         <div className="form-group my-3">
           <div className="col-xs-offset-4 col-xs-5">
-            <div className="btn btn-primary" onClick={this.onClickSubmit} disabled={adminMarkDownContainer.state.retrieveError != null}>{ t('Update') }</div>
+            <div className="btn btn-primary" onClick={this.onClickSubmit} disabled={adminMarkDownContainer.state.retrieveError != null}>{t('Update')}</div>
           </div>
         </div>
 

src/client/js/components/Admin/MarkdownSetting/WhiteListInput.jsx

@@ -15,7 +15,7 @@ class WhiteListInput extends React.Component {
 
     return (
       <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={() => { adminMarkDownContainer.setState({ tagWhiteList: tags }) }}>
-        { t('markdown_setting.import_recommended', 'tags') }
+        {t('markdown_setting:xss_options.import_recommended')}
       </p>
     );
   }
@@ -25,7 +25,7 @@ class WhiteListInput extends React.Component {
 
     return (
       <p id="btn-import-tags" className="btn btn-xs btn-primary" onClick={() => { adminMarkDownContainer.setState({ attrWhiteList: attrs }) }}>
-        { t('markdown_setting.import_recommended', 'Attrs') }
+        {t('markdown_setting:xss_options.import_recommended')}
       </p>
     );
   }
@@ -57,7 +57,7 @@ class WhiteListInput extends React.Component {
       <>
         <div className="m-t-15">
           <div className="d-flex justify-content-between">
-            { t('markdown_setting.Tag names') }
+            {t('markdown_setting:xss_options.tag_names')}
             {customizable && this.renderRecommendTagBtn()}
           </div>
           <textarea
@@ -72,7 +72,7 @@ class WhiteListInput extends React.Component {
         </div>
         <div className="m-t-15">
           <div className="d-flex justify-content-between">
-            { t('markdown_setting.Tag attributes') }
+            {t('markdown_setting:xss_options.tag_attributes')}
             {customizable && this.renderRecommendAttrBtn()}
           </div>
           <textarea

src/client/js/components/Admin/MarkdownSetting/XssForm.jsx

@@ -26,7 +26,7 @@ class XssForm extends React.Component {
 
     try {
       await this.props.adminMarkDownContainer.updateXssSetting();
-      toastSuccess(t('markdown_setting.updated_xss'));
+      toastSuccess(t('toaster:update_successed', { target: 'XSS' }));
     }
     catch (err) {
       toastError(err);
@@ -49,9 +49,9 @@ class XssForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ xssOption: 1 }) }}
           />
           <label htmlFor="xssOption1">
-            <p className="font-weight-bold">{ t('markdown_setting.Ignore all tags') }</p>
+            <p className="font-weight-bold">{t('markdown_setting:xss_options.ignore_all_tags')}</p>
             <div className="m-t-15">
-              { t('markdown_setting.Ignore all tags desc') }
+              {t('markdown_setting:xss_options.ignore_all_tags_desc')}
             </div>
           </label>
         </div>
@@ -65,7 +65,7 @@ class XssForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ xssOption: 2 }) }}
           />
           <label htmlFor="xssOption2">
-            <p className="font-weight-bold">{ t('markdown_setting.Recommended setting') }</p>
+            <p className="font-weight-bold">{t('markdown_setting:xss_options.recommended_setting')}</p>
             <WhiteListInput customizable={false} />
           </label>
         </div>
@@ -79,7 +79,7 @@ class XssForm extends React.Component {
             onChange={() => { adminMarkDownContainer.setState({ xssOption: 3 }) }}
           />
           <label htmlFor="xssOption3">
-            <p className="font-weight-bold">{ t('markdown_setting.Custom Whitelist') }</p>
+            <p className="font-weight-bold">{t('markdown_setting:xss_options.custom_whitelist')}</p>
             <WhiteListInput customizable />
           </label>
         </div>
@@ -106,7 +106,7 @@ class XssForm extends React.Component {
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
                 <label htmlFor="XssEnable">
-                  { t('markdown_setting.Enable XSS prevention') }
+                  {t('markdown_setting:xss_options.enable_xss_prevention')}
                 </label>
               </div>
             </div>