refactor DecorationTab

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

@@ -1139,14 +1139,11 @@
       "copy_done": "Copied to clipboard!",
       "style": "Style",
       "alert": "Alert",
+      "alert_with_custom_title": "Alert with label",
+      "alert_with_custom_title_text": "Custom Title",
       "badge": "Badge",
       "text_color": "Text Color",
       "back_color": "Background Color",
-      "alert_block": "Alert Block",
-      "important_label": "Important",
-      "important_text": "Important information",
-      "caution_label": "Caution",
-      "caution_text": "Prohibited items or warnings",
       "placeholder": "Sample text goes here",
       "docs_title": "Bootstrap 5 Official Documentation",
       "docs_badge": "Learn more about Badges",

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

@@ -1131,14 +1131,12 @@
       "copy_done": "Copié dans le presse-papiers !",
       "style": "Style",
       "alert": "Alerte",
+      "alert_with_custom_title": "Alerte avec étiquette",
+      "alert_with_custom_title_text": "Titre personnalisé",
       "badge": "Badge",
       "text_color": "Couleur du texte",
       "back_color": "Couleur d'arrière-plan",
-      "alert_block": "Bloc d'alerte",
-      "important_label": "Important",
-      "important_text": "Informations importantes",
-      "caution_label": "Attention",
-      "caution_text": "Avertissements ou éléments interdits",
+
       "placeholder": "Le texte s'affiche ici",
       "docs_title": "Documentation officielle de Bootstrap 5",
       "docs_badge": "En savoir plus sur les Badges",

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

@@ -1172,14 +1172,12 @@
       "copy_done": "コピーしました！",
       "style": "スタイル",
       "alert": "アラート",
+      "alert_with_custom_title": "ラベル付きアラート",
+      "alert_with_custom_title_text": "カスタムタイトル",
       "badge": "バッジ",
       "text_color": "テキストカラー",
       "back_color": "背景色",
-      "alert_block": "アラートブロック",
-      "important_label": "Important",
-      "important_text": "重要な情報",
-      "caution_label": "Caution",
-      "caution_text": "禁止事項や警告",
+
       "placeholder": "テキストが入ります",
       "docs_title": "Bootstrap5 公式ドキュメント",
       "docs_badge": "バッジの詳細はこちら",

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

@@ -1099,14 +1099,12 @@
       "copy_done": "클립보드에 복사되었습니다!",
       "style": "스타일",
       "alert": "알림",
+      "alert_with_custom_title": "레이블이 있는 알림",
+      "alert_with_custom_title_text": "사용자 정의 제목",
       "badge": "배지",
       "text_color": "텍스트 색상",
       "back_color": "배경 색상",
-      "alert_block": "알림 블록",
-      "important_label": "Important",
-      "important_text": "중요한 정보",
-      "caution_label": "Caution",
-      "caution_text": "금지 사항 및 경고",
+
       "placeholder": "텍스트가 입력됩니다",
       "docs_title": "Bootstrap 5 공식 문서",
       "docs_badge": "배지 상세 정보",

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

@@ -1144,14 +1144,12 @@
       "copy_done": "已复制到剪贴板！",
       "style": "样式",
       "alert": "提示",
+      "alert_with_custom_title": "带标签的提示",
+      "alert_with_custom_title_text": "自定义标题",
       "badge": "徽章",
       "text_color": "文本颜色",
       "back_color": "背景颜色",
-      "alert_block": "警告框",
-      "important_label": "Important",
-      "important_text": "重要信息",
-      "caution_label": "Caution",
-      "caution_text": "禁止事项及警告",
+
       "placeholder": "此处显示文本内容",
       "docs_title": "Bootstrap 5 官方文档",
       "docs_badge": "了解更多关于徽章的信息",

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

@@ -7,6 +7,13 @@
   overflow-y: auto;
 }
 
+// Override the margin of callout in the preview
+.decorationBody {
+  :global(.callout) {
+    margin: 0.2rem 0;
+  }
+}
+
 .dropdownMenu {
   max-height: 300px;
   margin-top: bs.$dropdown-spacer;

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

@@ -1,6 +1,7 @@
 import type React from 'react';
 import { useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
 import {
   Dropdown,
   DropdownItem,
@@ -8,97 +9,95 @@ import {
   DropdownToggle,
 } from 'reactstrap';
 
+import { usePreviewOptions } from '~/stores/renderer';
+
 import type { LayoutGuideItem } from '../components/GuideRow';
 import { GuideRow } from '../components/GuideRow';
 
 import styles from './DecorationTab.module.scss';
 
-const BOOTSTRAP_COLORS = [
+const BOOTSTRAP_STYLES = [
   'primary',
-  'danger',
   'secondary',
+  'info',
   'success',
   'warning',
-  'info',
-  'light',
-  'dark',
+  'danger',
 ] as const;
-type BootstrapColor = (typeof BOOTSTRAP_COLORS)[number];
+type BOOTSTRAP_STYLES = (typeof BOOTSTRAP_STYLES)[number];
+
+// exclude 'secondary' as it's not suitable for callout style
+const CALLOUT_STYLES = BOOTSTRAP_STYLES.filter(
+  (style) => style !== 'secondary',
+);
+type CALLOUT_STYLES = (typeof CALLOUT_STYLES)[number];
+
+const BOOTSTRAP_STYLES_TO_CALLOUT_CONFIGS_MAPPINGS: Record<
+  CALLOUT_STYLES,
+  { icon: string; calloutType: string }
+> = {
+  primary: {
+    icon: 'feedback',
+    calloutType: 'important',
+  },
+  info: { icon: 'info', calloutType: 'note' },
+  success: { icon: 'lightbulb', calloutType: 'tip' },
+  warning: { icon: 'warning', calloutType: 'warning' },
+  danger: { icon: 'report', calloutType: 'caution' },
+};
 
 export const DecorationTab: React.FC = () => {
   const { t } = useTranslation();
   const i18nKey = 'editor_guide.decoration';
-  const [currentStyle, setCurrentStyle] = useState<BootstrapColor>('primary');
+  const [currentStyle, setCurrentStyle] = useState<
+    BOOTSTRAP_STYLES | CALLOUT_STYLES
+  >('primary');
   const [isOpen, setIsOpen] = useState(false);
 
-  const colorConfigs: Record<BootstrapColor, { icon: string; prefix: string }> =
-    {
-      primary: { icon: 'chat', prefix: '[!IMPORTANT]' },
-      danger: { icon: 'error', prefix: '[!CAUTION]' },
-      secondary: { icon: 'sell', prefix: '[!NOTE]' },
-      success: { icon: 'check_circle', prefix: '[!TIP]' },
-      warning: { icon: 'warning', prefix: '[!WARNING]' },
-      info: { icon: 'info', prefix: '[!NOTE]' },
-      light: { icon: 'light_mode', prefix: '[!NOTE]' },
-      dark: { icon: 'dark_mode', prefix: '[!IMPORTANT]' },
-    };
+  const { data: previewOptions } = usePreviewOptions();
 
-  const styleConfig = useMemo(() => {
-    const config = colorConfigs[currentStyle];
-    return {
-      colorName: currentStyle,
-      displayName: currentStyle.charAt(0).toUpperCase() + currentStyle.slice(1),
-      iconName: config.icon,
-      alertPrefix: config.prefix,
-      alertLabel: t(`${i18nKey}.${currentStyle}_label`, {
-        defaultValue: currentStyle.toUpperCase(),
-      }),
-      alertText: t(`${i18nKey}.${currentStyle}_text`, {
-        defaultValue: t(`${i18nKey}.placeholder`),
-      }),
-    };
-  }, [currentStyle, t]);
+  const calloutConfig: { icon: string; calloutType: string } =
+    BOOTSTRAP_STYLES_TO_CALLOUT_CONFIGS_MAPPINGS[currentStyle];
+  const displayName =
+    currentStyle.charAt(0).toUpperCase() + currentStyle.slice(1);
 
   const LAYOUT_GUIDES: LayoutGuideItem[] = useMemo(
     () => [
       {
         id: 'alert',
         title: t(`${i18nKey}.alert`),
-        code: `> ${styleConfig.alertPrefix}\n> ${styleConfig.alertText}`,
+        code: `> [!${calloutConfig.calloutType.toUpperCase()}]\n> ${t(`${i18nKey}.${currentStyle}_text`, { defaultValue: t(`${i18nKey}.placeholder`) })}`,
         preview: (
-          <div
-            className={`d-flex align-items-center border-start border-4 border-${styleConfig.colorName} ps-3 py-1`}
-            style={{ minHeight: '52px' }}
-          >
-            <div className="d-flex flex-column justify-content-center">
-              <div
-                className={`d-flex align-items-center fw-bold mb-1 ${
-                  styleConfig.colorName === 'light' ||
-                  styleConfig.colorName === 'dark'
-                    ? 'text-body'
-                    : `text-${styleConfig.colorName}`
-                }`}
-              >
-                <span className="me-2 d-flex align-items-center">
-                  <span className="material-symbols-outlined align-middle fs-6">
-                    {styleConfig.iconName}
-                  </span>
-                </span>
-                <span style={{ lineHeight: 1 }}>{styleConfig.alertLabel}</span>
-              </div>
-              <div className="text-body small lh-base">
-                {styleConfig.alertText}
-              </div>
-            </div>
-          </div>
+          <ReactMarkdown
+            {...previewOptions}
+          >{`> [!${calloutConfig.calloutType.toUpperCase()}]\n> ${t(`${i18nKey}.${currentStyle}_text`, { defaultValue: t(`${i18nKey}.placeholder`) })}`}</ReactMarkdown>
+        ),
+      },
+      {
+        id: 'alert2',
+        code: `:::${calloutConfig.calloutType}\n${t(`${i18nKey}.${currentStyle}_text`, { defaultValue: t(`${i18nKey}.placeholder`) })}\n:::`,
+        preview: (
+          <ReactMarkdown
+            {...previewOptions}
+          >{`:::${calloutConfig.calloutType}\n${t(`${i18nKey}.${currentStyle}_text`, { defaultValue: t(`${i18nKey}.placeholder`) })}\n:::`}</ReactMarkdown>
+        ),
+      },
+      {
+        id: 'alert3',
+        title: t(`${i18nKey}.alert_with_custom_title`),
+        code: `:::${calloutConfig.calloutType}[${t(`${i18nKey}.alert_with_custom_title_text`)}]\n${t(`${i18nKey}.${currentStyle}_text`, { defaultValue: t(`${i18nKey}.placeholder`) })}\n:::`,
+        preview: (
+          <ReactMarkdown
+            {...previewOptions}
+          >{`:::${calloutConfig.calloutType}[${t(`${i18nKey}.alert_with_custom_title_text`)}]\n${t(`${i18nKey}.${currentStyle}_text`, { defaultValue: t(`${i18nKey}.placeholder`) })}\n:::`}</ReactMarkdown>
         ),
       },
       {
         id: 'badge',
         title: t(`${i18nKey}.badge`),
-        code: `<span class="badge text-bg-${styleConfig.colorName}">${t(`${i18nKey}.badge`)}</span>`,
+        code: `<span class="badge text-bg-${currentStyle}">${t(`${i18nKey}.badge`)}</span>`,
         preview: (
-          <span className={`badge text-bg-${styleConfig.colorName}`}>
+          <span className={`badge text-bg-${currentStyle}`}>
             {t(`${i18nKey}.badge`)}
           </span>
         ),
@@ -106,9 +105,9 @@ export const DecorationTab: React.FC = () => {
       {
         id: 'text-color',
         title: t(`${i18nKey}.text_color`),
-        code: `<p class="text-${styleConfig.colorName}" >${t(`${i18nKey}.placeholder`)}</p>`,
+        code: `<p class="text-${currentStyle}">${t(`${i18nKey}.placeholder`)}</p>`,
         underContent: (
-          <p className={`text-${styleConfig.colorName} m-0`}>
+          <p className={`text-${currentStyle} m-0`}>
             {t(`${i18nKey}.placeholder`)}
           </p>
         ),
@@ -116,9 +115,9 @@ export const DecorationTab: React.FC = () => {
       {
         id: 'back-color',
         title: t(`${i18nKey}.back_color`),
-        code: `<p class="text-bg-${styleConfig.colorName}">${t(`${i18nKey}.placeholder`)}</p>`,
+        code: `<p class="text-bg-${currentStyle}">${t(`${i18nKey}.placeholder`)}</p>`,
         underContent: (
-          <p className={`text-bg-${styleConfig.colorName} px-2 m-0`}>
+          <p className={`text-bg-${currentStyle} px-2 m-0`}>
             {t(`${i18nKey}.placeholder`)}
           </p>
         ),
@@ -126,15 +125,15 @@ export const DecorationTab: React.FC = () => {
       {
         id: 'alert-block',
         title: t(`${i18nKey}.alert_block`),
-        code: `<div class="alert alert-${styleConfig.colorName}" role="alert">\n  ${t(`${i18nKey}.placeholder`)}\n</div>`,
+        code: `<div class="alert alert-${currentStyle}" role="alert">\n  ${t(`${i18nKey}.placeholder`)}\n</div>`,
         underContent: (
-          <div className={`alert alert-${styleConfig.colorName} m-0`}>
+          <div className={`alert alert-${currentStyle} m-0`}>
             {t(`${i18nKey}.placeholder`)}
           </div>
         ),
       },
     ],
-    [styleConfig, t],
+    [currentStyle, t, previewOptions, calloutConfig.calloutType],
   );
 
   return (
@@ -146,33 +145,28 @@ export const DecorationTab: React.FC = () => {
             outline
             color="body"
             caret
-            className={`border d-flex align-items-center gap-2 text-${styleConfig.colorName === 'light' ? 'dark' : styleConfig.colorName}`}
+            className={`border d-flex align-items-center gap-2 text-${currentStyle}`}
             style={{ minWidth: '160px' }}
           >
-            <span className="material-symbols-outlined align-middle fs-6">
-              {styleConfig.iconName}
+            <span className="flex-grow-1 justify-content-start d-flex align-items-center gap-1">
+              <span className="material-symbols-outlined align-middle fs-6">
+                {calloutConfig.icon}
+              </span>
+              {displayName}
             </span>
-            <span className="flex-grow-1">{styleConfig.displayName}</span>
           </DropdownToggle>
           <DropdownMenu className={styles.dropdownMenu}>
-            {BOOTSTRAP_COLORS.map((color) => (
+            {CALLOUT_STYLES.map((style) => (
               <DropdownItem
-                key={color}
-                className={`d-flex align-items-center gap-2 ${currentStyle === color ? 'active' : ''}`}
-                onClick={() => setCurrentStyle(color)}
-                style={
-                  currentStyle === color
-                    ? {
-                        backgroundColor: `var(--bs-${color})`,
-                        color: color === 'light' ? 'black' : 'white',
-                      }
-                    : {}
-                }
+                key={style}
+                active={currentStyle === style}
+                className="d-flex align-items-center gap-2"
+                onClick={() => setCurrentStyle(style)}
               >
                 <span className="material-symbols-outlined">
-                  {colorConfigs[color].icon}
+                  {BOOTSTRAP_STYLES_TO_CALLOUT_CONFIGS_MAPPINGS[style].icon}
                 </span>
-                {color.charAt(0).toUpperCase() + color.slice(1)}
+                {style.charAt(0).toUpperCase() + style.slice(1)}
               </DropdownItem>
             ))}
           </DropdownMenu>
@@ -181,7 +175,7 @@ export const DecorationTab: React.FC = () => {
 
       <hr />
 
-      <div key={currentStyle}>
+      <div key={currentStyle} className={styles.decorationBody}>
         {LAYOUT_GUIDES.map((item) => (
           <GuideRow key={item.id} {...item} minWidth="280px" />
         ))}