150341-172821 useTranslation実装の修正、日本語コメント削除

apps/app/src/client/components/PageEditor/EditorGuideModal/EditorGuideModal.tsx

@@ -5,6 +5,7 @@ import {
 
 import { useEditorGuideModalStatus, useEditorGuideModalActions } from '@growi/editor/dist/states/modal/editor-guide';
 import { createPortal } from 'react-dom';
+import { useTranslation } from 'react-i18next';
 
 import { CustomNavTab } from '../../CustomNavigation/CustomNav';
 import CustomTabContent from '../../CustomNavigation/CustomTabContent';
@@ -17,6 +18,9 @@ type TabType = 'textstyle' | 'layout' | 'decoration';
 type Props = {
   containerRef: RefObject<HTMLDivElement | null>,
 };
+const isTabType = (key: string): key is TabType => {
+  return ['textstyle', 'layout', 'decoration'].includes(key);
+};
 
 /**
  * EditorGuideModal
@@ -25,29 +29,29 @@ type Props = {
  * not the entire screen. Uses createPortal to render into document.body.
  */
 export const EditorGuideModal = ({ containerRef }: Props): JSX.Element => {
+  const { t } = useTranslation();
   const { isOpened } = useEditorGuideModalStatus();
   const { close } = useEditorGuideModalActions();
   const [isShown, setIsShown] = useState(false);
   const [rect, setRect] = useState<DOMRect | null>(null);
 
   const [activeTab, setActiveTab] = useState<TabType>('textstyle');
-
-  const navTabMapping = useMemo(() => {
+  const navTabMapping = useMemo((): Record<TabType, { i18n: string, Content: () => JSX.Element }> => {
     return {
       textstyle: {
-        i18n: 'テキストスタイル',
+        i18n: t('editor_guide.tabs.textstyle'),
         Content: () => <TextStyleTab />,
       },
       layout: {
-        i18n: 'レイアウト',
+        i18n: t('editor_guide.tabs.layout'),
         Content: () => <LayoutTab />,
       },
       decoration: {
-        i18n: '装飾',
+        i18n: t('editor_guide.tabs.decoration'),
         Content: () => <DecorationTab />,
       },
     };
-  }, []);
+  }, [t]);
 
   // Get rect on open and on resize
   useLayoutEffect(() => {
@@ -89,7 +93,11 @@ export const EditorGuideModal = ({ containerRef }: Props): JSX.Element => {
               <CustomNavTab
                 activeTab={activeTab}
                 navTabMapping={navTabMapping}
-                onNavSelected={tab => setActiveTab(tab as TabType)}
+                onNavSelected={(tabKey) => {
+                  if (isTabType(tabKey)) {
+                    setActiveTab(tabKey);
+                  }
+                }}
                 hideBorderBottom
               />
             </div>

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.tsx

@@ -57,7 +57,15 @@ const GuideRow = ({
               width: 'fit-content',
             }}
           >
-            <pre className="m-0 small font-monospace" style={{ whiteSpace: 'pre', color: '#ABB2BF', lineHeight: '1.5' }}>
+            <pre
+              className="m-0 small font-monospace"
+              style={{
+                whiteSpace: 'pre',
+                color: '#ABB2BF',
+                fontWeight: 400,
+                fontSize: '14px',
+              }}
+            >
               {code}
             </pre>
             <small className="position-absolute badge bg-secondary opacity-50" style={{ fontSize: '0.4rem', top: '2px', right: '4px' }}>
@@ -66,7 +74,13 @@ const GuideRow = ({
           </div>
         </div>
         <div className="flex-grow-1" style={{ whiteSpace: 'nowrap' }}>
-          <div className="wiki-content small">
+          <div
+            className="wiki-content"
+            style={{
+              fontWeight: 400,
+              fontSize: '14px',
+            }}
+          >
             {preview}
           </div>
         </div>
@@ -78,96 +92,98 @@ const GuideRow = ({
 
 export const TextStyleTab: React.FC = () => {
   const { t } = useTranslation();
-  const ts = 'editor_guide.textstyle';
+  const i18nKey = 'editor_guide.textstyle';
 
   const TEXT_STYLE_GUIDES = [
     {
       id: 'bold',
-      title: t(`${ts}.bold`),
-      code: `${t(`${ts}.is_text`, { val: `**${t(`${ts}.bold`)}**` })}\n${t(`${ts}.is_text`, { val: `__${t(`${ts}.bold`)}__` })}`,
+      title: t(`${i18nKey}.bold`),
+      code: `${
+        t(`${i18nKey}.this`)} **${t(`${i18nKey}.bold`)}** ${t(`${i18nKey}.is`)}\n${t(`${i18nKey}.this`)} __${t(`${i18nKey}.bold`)}__ ${t(`${i18nKey}.is`)}`,
       preview: (
         <div className="lh-base">
-          {t(`${ts}.this`)} <strong>{t(`${ts}.bold`)}</strong> {t(`${ts}.is`)}<br />
-          {t(`${ts}.this`)} <strong>{t(`${ts}.bold`)}</strong> {t(`${ts}.is`)}
+          {t(`${i18nKey}.this`)} <strong>{t(`${i18nKey}.bold`)}</strong> {t(`${i18nKey}.is`)}<br />
+          {t(`${i18nKey}.this`)} <strong>{t(`${i18nKey}.bold`)}</strong> {t(`${i18nKey}.is`)}
         </div>
       ),
     },
     {
       id: 'italic',
-      title: t(`${ts}.italic`),
-      code: `${t(`${ts}.this`)} *${t(`${ts}.italic`)}* ${t(`${ts}.is`)}\n${t(`${ts}.this`)} _${t(`${ts}.italic`)}_ ${t(`${ts}.is`)}`,
+      title: t(`${i18nKey}.italic`),
+      code: `${
+        t(`${i18nKey}.this`)} *${t(`${i18nKey}.italic`)}*${t(`${i18nKey}.is`)}\n${t(`${i18nKey}.this`)} _${t(`${i18nKey}.italic`)}_${t(`${i18nKey}.is`)}`,
       preview: (
         <div className="lh-base">
-          {t(`${ts}.this`)} <em>{t(`${ts}.italic`)}</em> {t(`${ts}.is`)}<br />
-          {t(`${ts}.this`)} <em>{t(`${ts}.italic`)}</em> {t(`${ts}.is`)}
+          {t(`${i18nKey}.this`)} <em>{t(`${i18nKey}.italic`)}</em> {t(`${i18nKey}.is`)}<br />
+          {t(`${i18nKey}.this`)} <em>{t(`${i18nKey}.italic`)}</em> {t(`${i18nKey}.is`)}
         </div>
       ),
     },
     {
       id: 'strikethrough',
-      title: t(`${ts}.strikethrough`),
-      code: `~~${t(`${ts}.strikethrough`)}~~`,
-      preview: <del>{t(`${ts}.strikethrough`)}</del>,
+      title: t(`${i18nKey}.strikethrough`),
+      code: `~~${t(`${i18nKey}.strikethrough`)}~~`,
+      preview: <del>{t(`${i18nKey}.strikethrough`)}</del>,
     },
     {
       id: 'inline-code',
-      title: t(`${ts}.inline_code`),
-      code: `\`${t(`${ts}.inline_code`)}\` \n~~~${t(`${ts}.inline_code`)}~~~`,
+      title: t(`${i18nKey}.inline_code`),
+      code: `\`${t(`${i18nKey}.inline_code`)}\` \n~~~${t(`${i18nKey}.inline_code`)}~~~`,
       preview: (
         <div className="d-flex flex-column gap-2">
           <code
             className="rounded px-1"
             style={{
               width: 'fit-content',
-              color: '#D63384', // 文字の色
-              border: '1px solid #D63384', // 枠線の色（太さ1px、実線、指定の色）
-              backgroundColor: 'transparent', // 背景を透明にする場合（必要に応じて）
+              color: '#D63384',
+              border: '1px solid #D63384',
+              backgroundColor: 'transparent',
             }}
           >
-            {t(`${ts}.inline_code`)}
+            {t(`${i18nKey}.inline_code`)}
           </code>
           <code
             className="rounded px-1"
             style={{
               width: 'fit-content',
-              color: '#D63384', // 文字の色
-              border: '1px solid #D63384', // 枠線の色
+              color: '#D63384',
+              border: '1px solid #D63384',
               backgroundColor: 'transparent',
             }}
           >
-            {t(`${ts}.inline_code`)}
+            {t(`${i18nKey}.inline_code`)}
           </code>
         </div>
       ),
     },
     {
       id: 'bold-italic',
-      title: t(`${ts}.bold_italic`),
-      code: `***${t(`${ts}.all_important`)}***`,
-      preview: <strong><u>{t(`${ts}.all_important`).replace('\n', '')}</u></strong>,
+      title: t(`${i18nKey}.bold_italic`),
+      code: `***${t(`${i18nKey}.all_important`)}***`,
+      preview: <strong><u>{t(`${i18nKey}.all_important`).replace('\n', '')}</u></strong>,
     },
     {
       id: 'emoji',
-      title: t(`${ts}.emoji`),
+      title: t(`${i18nKey}.emoji`),
       code: ':+1:\n:white_check_mark:\n:lock:',
       preview: <span style={{ fontSize: '1.2rem' }}>👍✅🔒</span>,
     },
     {
       id: 'sub',
-      title: t(`${ts}.sub_sup`),
-      code: t(`${ts}.is_text`, { val: `<sub>${t(`${ts}.sub_text`)}</sub>` }),
-      preview: <span>{t(`${ts}.this`)} <sub>{t(`${ts}.sub_text`)}</sub> {t(`${ts}.is`)}</span>,
+      title: t(`${i18nKey}.sub_sup`),
+      code: t(`${i18nKey}.is_text`, { val: `<sub>${t(`${i18nKey}.sub_text`)}</sub>` }),
+      preview: <span>{t(`${i18nKey}.this`)} <sub>{t(`${i18nKey}.sub_text`)}</sub> {t(`${i18nKey}.is`)}</span>,
     },
     {
       id: 'sup',
       title: '',
-      code: t(`${ts}.is_text`, { val: `<sup>${t(`${ts}.sup_text`)}</sup>` }),
-      preview: <span>{t(`${ts}.this`)} <sup>{t(`${ts}.sup_text`)}</sup> {t(`${ts}.is`)}</span>,
+      code: t(`${i18nKey}.is_text`, { val: `<sup>${t(`${i18nKey}.sup_text`)}</sup>` }),
+      preview: <span>{t(`${i18nKey}.this`)} <sup>{t(`${i18nKey}.sup_text`)}</sup> {t(`${i18nKey}.is`)}</span>,
     },
     {
       id: 'link-docs',
-      title: t(`${ts}.link_label`),
-      code: `[${t(`${ts}.link_docs`)}](https://docs.growi.org/ja/g)`,
+      title: t(`${i18nKey}.link_label`),
+      code: `[${t(`${i18nKey}.link_docs`)}](https://docs.growi.org/ja/g)`,
       preview: (
         <a
           href="https://docs.growi.org/ja/g"
@@ -177,7 +193,7 @@ export const TextStyleTab: React.FC = () => {
           style={{ color: '#777570' }}
           onClick={e => e.stopPropagation()}
         >
-          {t(`${ts}.link_growi`)}
+          {t(`${i18nKey}.link_growi`)}
           <ExternalLinkIcon />
         </a>
       ),
@@ -185,7 +201,7 @@ export const TextStyleTab: React.FC = () => {
     {
       id: 'link-sandbox',
       title: '',
-      code: `[${t(`${ts}.link_sandbox`)}](/Sandbox)`,
+      code: `[${t(`${i18nKey}.link_sandbox`)}](/Sandbox)`,
       preview: (
         <a
           href="/Sandbox"
@@ -193,7 +209,7 @@ export const TextStyleTab: React.FC = () => {
           style={{ color: '#777570' }}
           onClick={e => e.stopPropagation()}
         >
-          {t(`${ts}.link_sandbox`)}
+          {t(`${i18nKey}.link_sandbox`)}
           <ExternalLinkIcon />
         </a>
       ),