Merge pull request #11067 from growilabs/feat/160341-182636-design-fb-response

160341-182636-design-fb-response

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/DecorationTab.module.scss

@@ -3,8 +3,6 @@
 
 .decorationTab {
   min-width: map.get(bs.$grid-breakpoints, 'sm');
-  max-height: 80vh;
-  overflow-y: auto;
 }
 
 // Override the margin of callout in the preview

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/LayoutTab.module.scss

@@ -3,7 +3,6 @@
 
 .layoutTabContainer {
   min-width: map.get(bs.$grid-breakpoints, 'sm');
-  max-height: 80vh;
 }
 
 .checkboxMock {

apps/app/src/client/components/PageEditor/EditorGuideModal/contents/TextStyleTab.module.scss

@@ -1,10 +1,6 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use 'sass:map';
 
-.textStyleTab {
-  max-height: 80vh;
-}
-
 .codeBlockWrapper {
   width: fit-content;
 }

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

@@ -5,6 +5,8 @@ import { PrismAsyncLight } from 'react-syntax-highlighter';
 import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 
 import { toastError, toastSuccess } from '~/client/util/toastr';
+import { useGrowiDocumentationUrl } from '~/states/context';
+import { getLocale } from '~/utils/locale-utils';
 
 import styles from './TextStyleTab.module.scss';
 
@@ -64,7 +66,9 @@ const GuideRow = ({
 };
 
 export const TextStyleTab: React.FC = () => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
+  const documentationUrl = useGrowiDocumentationUrl();
+  const docsLang = getLocale(i18n.language).code === 'ja' ? 'ja' : 'en';
   const i18nKey = 'editor_guide.textstyle';
 
   const TEXT_STYLE_GUIDES = [
@@ -170,10 +174,10 @@ export const TextStyleTab: React.FC = () => {
     {
       id: 'link-docs',
       title: t(`${i18nKey}.link_label`),
-      code: `[${t(`${i18nKey}.link_docs`)}](https://docs.growi.org/ja/g)`,
+      code: `[${t(`${i18nKey}.link_docs`)}](${documentationUrl}/${docsLang})`,
       preview: (
         <a
-          href="https://docs.growi.org/ja/g"
+          href={`${documentationUrl}/${docsLang}`}
           target="_blank"
           rel="noreferrer"
           className="text-secondary text-decoration-underline"
@@ -201,7 +205,7 @@ export const TextStyleTab: React.FC = () => {
     },
   ];
   return (
-    <div className={`px-4 py-2 overflow-y-auto ${styles.textStyleTab}`}>
+    <div className="px-4 py-2">
       {TEXT_STYLE_GUIDES.map((item) => (
         <GuideRow
           key={item.id}

packages/editor/src/client/components-internal/CodeMirrorEditor/Toolbar/EditorGuideButton.tsx

@@ -1,22 +1,31 @@
-import { type JSX, useCallback } from 'react';
+import { type JSX, useCallback, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UncontrolledTooltip } from 'reactstrap';
 
 import { useEditorGuideModalActions } from '../../../../states/modal/editor-guide';
 
 export const EditorGuideButton = (): JSX.Element => {
   const { open: openEditorGuideModal } = useEditorGuideModalActions();
+  const id = useId();
+  const { t } = useTranslation('translation');
 
   const onClickEditorGuideButton = useCallback(() => {
     openEditorGuideModal();
   }, [openEditorGuideModal]);
 
   return (
-    <button
-      type="button"
-      className="btn btn-toolbar-button d-none d-lg-block"
-      onClick={onClickEditorGuideButton}
-      aria-label="Open Editor Guide"
-    >
-      <span className="growi-custom-icons fs-6">editor_guide</span>
-    </button>
+    <div className="d-none d-lg-block">
+      <button
+        id={id}
+        type="button"
+        className="btn btn-toolbar-button"
+        onClick={onClickEditorGuideButton}
+      >
+        <span className="growi-custom-icons fs-6">editor_guide</span>
+      </button>
+      <UncontrolledTooltip placement="top" target={CSS.escape(id)}>
+        {t('toolbar.editor_guide')}
+      </UncontrolledTooltip>
+    </div>
   );
 };