Update correct shortcut

apps/app/public/static/locales/ja_JP/translation.json

@@ -487,7 +487,7 @@
   "modal_shortcuts": {
     "global": {
       "title": "グローバルショートカット",
-      "Open/Close shortcut help": "ショートカットヘルプ<br>の表示/非表示",
+      "Open/Close shortcut help": "ショートカットヘルプの<br>表示/非表示",
       "Edit Page": "ページ編集",
       "Create Page": "ページ作成",
       "Search": "検索",
@@ -501,11 +501,14 @@
       "Indent": "インデント",
       "Outdent": "左インデント",
       "Save Page": "保存",
-      "Delete Line": "行削除"
-    },
-    "commentform": {
-      "title": "コメントフォームショートカット",
-      "Post": "投稿"
+      "Only Editor": "(エディターのみ)",
+      "Delete Line": "行削除",
+      "Search in Editor": "エディター内検索",
+      "Move Line": "行の移動",
+      "Copy Line": "行のコピー",
+      "Toggle Line": "行の非表示化",
+      "Insert Line": "行を挿入",
+      "Post Comment": "(コメント投稿)"
     }
   },
   "modal_resolve_conflict": {

apps/app/src/client/components/ShortcutsModal.tsx

@@ -26,7 +26,7 @@ const ShortcutsModal = (): JSX.Element => {
     return (
       <div className="container">
         <div className="row">
-          <div className="col-lg-7">
+          <div className="col-lg-6">
             <h6>
               <strong>{t('modal_shortcuts.global.title')}</strong>
             </h6>
@@ -36,10 +36,12 @@ const ShortcutsModal = (): JSX.Element => {
                 <tr>
                   <th>
                     {/* eslint-disable-next-line react/no-danger */}
-                    <span dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Open/Close shortcut help') }} />
+                    <span className="text-nowrap" dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Open/Close shortcut help') }} />
                   </th>
                   <td>
-                    <span className={`key cmd-key ${additionalClassByOs}`}></span><span className="text-secondary mx-1">+</span><span className="key">/</span>
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">/</span>
                   </td>
                 </tr>
                 <tr>
@@ -56,12 +58,14 @@ const ShortcutsModal = (): JSX.Element => {
                 </tr>
                 <tr>
                   <th>{t('modal_shortcuts.global.Search')}</th>
-                  <td><span className="key">/</span></td>
+                  <td>
+                    <span className="key">/</span>
+                  </td>
                 </tr>
                 <tr>
                   <th>
                     {/* eslint-disable-next-line react/no-danger */}
-                    <span dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Show Contributors') }} />
+                    <span className="text-nowrap" dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.global.Show Contributors') }} />
                   </th>
                   <td className="text-nowrap d-flex justify-content-end">
                     <div className="text-start">
@@ -71,11 +75,15 @@ const ShortcutsModal = (): JSX.Element => {
                         </span>
                       </a>
                       <br />
-                      <span className="key key-small">&uarr;</span>&nbsp;<span className="key key-small">&uarr;</span>
-                      <span className="key key-small">&darr;</span>&nbsp;<span className="key key-small">&darr;</span>
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_upward</span>&nbsp;
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_upward</span>
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_downward</span>&nbsp;
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_downward</span>
                       <br />
-                      <span className="key key-small">&larr;</span>&nbsp;<span className="key key-small">&rarr;</span>
-                      <span className="key key-small">&larr;</span>&nbsp;<span className="key key-small">&rarr;</span>
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_back</span>&nbsp;
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_forward</span>
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_back</span>&nbsp;
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_forward</span>
                       <br />
                       <span className="key key-small">B</span>&nbsp;<span className="key key-small">A</span>
                     </div>
@@ -97,7 +105,8 @@ const ShortcutsModal = (): JSX.Element => {
                       <span className="key key-small">A</span>&nbsp;<span className="key key-small">Y</span>
                       <span className="key key-small">A</span>&nbsp;<span className="key key-small">Y</span>
                       <br />
-                      <span className="key key-small">&darr;</span>&nbsp;<span className="key key-small">&larr;</span>
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_downward</span>&nbsp;
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_back</span>
                     </div>
                   </td>
                 </tr>
@@ -105,12 +114,31 @@ const ShortcutsModal = (): JSX.Element => {
             </table>
           </div>
 
-          <div className="col-lg-5">
+          <div className="col-lg-6">
             <h6>
               <strong>{t('modal_shortcuts.editor.title')}</strong>
             </h6>
             <table className="table">
               <tbody>
+                <tr>
+                  <th>{t('modal_shortcuts.editor.Search in Editor')}</th>
+                  <td className="text-nowrap">
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">F</span>
+                  </td>
+                </tr>
+                <tr>
+                  <th>
+                    {t('modal_shortcuts.editor.Save Page')}
+                    <span className="small text-secondary ms-1">{t('modal_shortcuts.editor.Only Editor')}</span>
+                  </th>
+                  <td className="text-nowrap">
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">S</span>
+                  </td>
+                </tr>
                 <tr>
                   <th>{t('modal_shortcuts.editor.Indent')}</th>
                   <td>
@@ -120,43 +148,64 @@ const ShortcutsModal = (): JSX.Element => {
                 <tr>
                   <th>{t('modal_shortcuts.editor.Outdent')}</th>
                   <td className="text-nowrap">
-                    <span className="key key-long">Shift</span><span className="text-secondary mx-1">+</span><span className="key key-longer">Tab</span>
+                    <span className="key">Shift</span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key key-longer">Tab</span>
                   </td>
                 </tr>
                 <tr>
-                  <th>{t('modal_shortcuts.editor.Save Page')}</th>
-                  <td>
-                    <span className={`key cmd-key ${additionalClassByOs}`}></span><span className="text-secondary mx-1">+</span><span className="key">S</span>
+                  <th>{t('modal_shortcuts.editor.Delete Line')}</th>
+                  <td className="text-nowrap">
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">Shift</span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">K</span>
                   </td>
                 </tr>
                 <tr>
-                  <th>{t('modal_shortcuts.editor.Delete Line')}</th>
-                  <td>
-                    <span className={`key cmd-key ${additionalClassByOs}`}></span><span className="text-secondary mx-1">+</span><span className="key">D</span>
+                  <th>
+                    {/* eslint-disable-next-line react/no-danger */}
+                    <span dangerouslySetInnerHTML={{ __html: t('modal_shortcuts.editor.Insert Line') }} />
+                    <br />
+                    <span className="small text-secondary ms-1">{t('modal_shortcuts.editor.Post Comment')}</span>
+                  </th>
+                  <td className="text-nowrap">
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">Enter</span>
                   </td>
                 </tr>
-              </tbody>
-            </table>
-
-            <h6>
-              <strong>{t('modal_shortcuts.commentform.title')}</strong>
-            </h6>
-
-            <table className="table">
-              <tbody>
                 <tr>
-                  <th>{t('modal_shortcuts.commentform.Post')}</th>
+                  <th>{t('modal_shortcuts.editor.Move Line')}</th>
                   <td className="text-nowrap">
-                    <span className={`key cmd-key ${additionalClassByOs}`}></span> +
-                    <span className="key key-longer">
-                      <span className="material-symbols-outlined">keyboard_return</span>
-                    </span>
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_downward</span>
+                    <span className="text-secondary mx-1">or</span>
+                    <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_upward</span>
                   </td>
                 </tr>
                 <tr>
-                  <th>{t('modal_shortcuts.editor.Delete Line')}</th>
-                  <td>
-                    <span className={`key cmd-key ${additionalClassByOs}`}></span><span className="text-secondary mx-1">+</span><span className="key">D</span>
+                  <th>{t('modal_shortcuts.editor.Copy Line')}</th>
+                  <td className="text-nowrap d-flex justify-content-end">
+                    <div className="text-start">
+                      <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                      <span className="text-secondary mx-1">+</span>
+                      <span className="key">Shift</span>
+                      <span className="text-secondary mx-1">+</span><br />
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_downward</span>
+                      <span className="text-secondary mx-1">or</span>
+                      <span className="key key-small material-symbols-outlined fs-5 px-0">arrow_upward</span>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <th>{t('modal_shortcuts.editor.Toggle Line')}</th>
+                  <td className="text-nowrap">
+                    <span className={`key cmd-key ${additionalClassByOs}`}></span>
+                    <span className="text-secondary mx-1">+</span>
+                    <span className="key">/</span>
                   </td>
                 </tr>
               </tbody>