Merge pull request #10976 from growilabs/feat/161862-180061-shortcuts-modal-other-link

feat(ui): Add Other Shortcuts link to modal footer

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

@@ -528,7 +528,8 @@
       "Code Block": "Code Block",
       "Comment Out": "Comment Out",
       "Comment Out Desc": "(Hide)"
-    }
+    },
+    "Other Shortcuts": "Other Shortcuts"
   },
   "modal_resolve_conflict": {
     "conflicts_with_new_body_on_server_side": "Conflict with new body on server side. Please select or edit the page body to resolve the conflict.",

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

@@ -524,7 +524,8 @@
       "Code Block": "Bloc de code",
       "Comment Out": "Masquer",
       "Comment Out Desc": "(Commenter)"
-    }
+    },
+    "Other Shortcuts": "Autres raccourcis"
   },
   "modal_resolve_conflict": {
     "file_conflicting_with_newer_remote": "Ce fichier est en conflit avec une autre version",

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

@@ -562,7 +562,8 @@
       "Code Block": "コードブロック",
       "Comment Out": "非表示にする",
       "Comment Out Desc": "(コメントアウト)"
-    }
+    },
+    "Other Shortcuts": "その他のショートカット"
   },
   "modal_resolve_conflict": {
     "conflicts_with_new_body_on_server_side": "サーバー側の新しい本文と衝突します。ページ本文を選択または編集して衝突を解消してください。",

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

@@ -499,7 +499,8 @@
       "Code Block": "코드 블록",
       "Comment Out": "주석 처리",
       "Comment Out Desc": "(숨기기)"
-    }
+    },
+    "Other Shortcuts": "기타 단축키"
   },
   "modal_resolve_conflict": {
     "conflicts_with_new_body_on_server_side": "서버 측의 새 본문과 충돌합니다. 충돌을 해결하려면 페이지 본문을 선택하거나 편집하십시오.",

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

@@ -520,7 +520,8 @@
       "Code Block": "代码块",
       "Comment Out": "隐藏",
       "Comment Out Desc": "（注释）"
-    }
+    },
+    "Other Shortcuts": "其他快捷键"
   },
   "modal_resolve_conflict": {
     "conflicts_with_new_body_on_server_side": "与服务器端的新正文文本冲突。 请选择或编辑页面正文以解决冲突",

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

@@ -3,10 +3,12 @@ import { useMemo } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 
+import { useGrowiDocumentationUrl } from '~/states/context';
 import {
   useShortcutsModalActions,
   useShortcutsModalStatus,
 } from '~/states/ui/modal/shortcuts';
+import { getLocale } from '~/utils/locale-utils';
 
 import styles from './ShortcutsModal.module.scss';
 
@@ -14,8 +16,10 @@ import styles from './ShortcutsModal.module.scss';
  * ShortcutsModalSubstance - Presentation component (heavy logic, rendered only when isOpen)
  */
 const ShortcutsModalSubstance = (): React.JSX.Element => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const { close } = useShortcutsModalActions();
+  const documentationUrl = useGrowiDocumentationUrl();
+  const langCode = getLocale(i18n.language).code === 'ja' ? 'ja' : 'en';
 
   // Memoize OS-specific class
   const additionalClassByOs = useMemo(() => {
@@ -514,6 +518,17 @@ const ShortcutsModalSubstance = (): React.JSX.Element => {
       </ModalHeader>
       <ModalBody className="p-md-4 mb-3 grw-modal-body-style overflow-auto">
         {bodyContent}
+        <div className="mt-4 ps-3">
+          <a
+            href={`${documentationUrl}/${langCode}/guide/features/shortcut-keys`}
+            target="_blank"
+            rel="noreferrer"
+            className="d-inline-flex align-items-center gap-2 px-3 py-2 border border-2 rounded text-secondary text-decoration-none"
+          >
+            <span className="material-symbols-outlined fs-5">help</span>
+            {t('modal_shortcuts.Other Shortcuts')}
+          </a>
+        </div>
       </ModalBody>
     </>
   );