feat: add alert (callout) input modal

public/locales/en/alert-input-modal.json

@@ -0,0 +1,8 @@
+{
+  "title": "Insert Callout",
+  "type": "Type",
+  "content": "Content",
+  "contentPlaceholder": "Enter content",
+  "cancel": "Cancel",
+  "confirm": "Confirm"
+}

public/locales/en/tabs.json

@@ -19,6 +19,7 @@
     "italic": "italic",
     "numbered_list": "numbered_list",
     "quote": "quote",
+    "insert_alert": "insert alert",
     "table": "table"
   },
   "categorys": {

public/locales/zh-TW/alert-input-modal.json

@@ -0,0 +1,8 @@
+{
+  "title": "插入 Callout",
+  "type": "類型",
+  "content": "內容",
+  "contentPlaceholder": "請填寫內容",
+  "cancel": "取消",
+  "confirm": "確認"
+}

public/locales/zh-TW/tabs.json

@@ -18,6 +18,7 @@
     "italic": "斜體",
     "numbered_list": "編號清單",
     "quote": "引用",
+    "insert_alert": "插入 Callout",
     "table": "表格"
   },
   "categorys": {

src/components/alert-input-modal.js

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from '@/lib/i18n';
+import BasicModal from '@/components/core/modal/basic-modal';
+
+const ALERT_TYPES = ['Note', 'Tip', 'Important', 'Warning', 'Caution'];
+
+const AlertInputModal = ({ isOpen, onClose, onConfirm }) => {
+  const [type, setType] = useState(ALERT_TYPES[0]);
+  const [content, setContent] = useState('');
+  const t = useTranslation('alert-input-modal');
+
+  const resetForm = () => {
+    setType(ALERT_TYPES[0]);
+    setContent('');
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  const handleConfirm = () => {
+    onConfirm(`\n> [!${type.toUpperCase()}]${content.trim() ? ` ${content.trim()}` : ''}`);
+    handleClose();
+  };
+
+  return (
+    <BasicModal
+      title={t('title')}
+      isOpen={isOpen}
+      onClose={handleClose}
+      onCancel={handleClose}
+      onConfirm={handleConfirm}
+      cancelLabel={t('cancel')}
+      confirmLabel={t('confirm')}
+    >
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-2">
+          <label className="text-text-primary text-base" htmlFor="alert-type">
+            {t('type')}
+          </label>
+          <div className="relative w-full">
+            <select
+              id="alert-type"
+              value={type}
+              onChange={(e) => setType(e.target.value)}
+              className="w-full appearance-none border border-border-main rounded-lg px-4 py-3 text-base text-text-primary bg-white focus:outline-none focus:ring-2 focus:ring-primary"
+            >
+              {ALERT_TYPES.map((alertType) => (
+                <option key={alertType} value={alertType}>
+                  {alertType}
+                </option>
+              ))}
+            </select>
+            <div className="pointer-events-none absolute inset-y-0 right-4 flex items-center">
+              <svg
+                className="w-5 h-5 text-text-primary"
+                fill="none"
+                viewBox="0 0 20 20"
+                stroke="currentColor"
+                strokeWidth={1.5}
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 8l4 4 4-4" />
+              </svg>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col gap-2">
+          <label className="text-text-primary text-base" htmlFor="alert-content">
+            {t('content')}
+          </label>
+          <input
+            id="alert-content"
+            type="text"
+            value={content}
+            onChange={(e) => setContent(e.target.value)}
+            placeholder={t('contentPlaceholder')}
+            className="w-full border border-border-main rounded-lg px-4 py-3 text-base text-text-primary placeholder:text-text-placeholder focus:outline-none focus:ring-2 focus:ring-primary"
+          />
+        </div>
+      </div>
+    </BasicModal>
+  );
+};
+
+AlertInputModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default AlertInputModal;

src/components/edit-icons-tab.js

@@ -10,6 +10,7 @@ import { compare } from '@/lib/data-process';
 import mathTabList from '@/lib/tabs/math';
 import ImageUploadModal from './image-upload-modal';
 import LinkInputModal from './link-input-modal';
+import AlertInputModal from './alert-input-modal';
 import Tooltip from './core/tooltip';
 
 const generateUniqueId = (length = 8) => {
@@ -24,6 +25,7 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
   const [selectedMathTabIndex, setSelectedMathTabIndex] = useState(0);
   const [isImageModalOpen, setIsImageModalOpen] = useState(false);
   const [isLinkModalOpen, setIsLinkModalOpen] = useState(false);
+  const [isAlertModalOpen, setIsAlertModalOpen] = useState(false);
 
   const t = useTranslation('tabs');
 
@@ -38,6 +40,17 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
     [insertLatex]
   );
 
+  const handleAlertConfirm = useCallback(
+    (markdown) => {
+      insertLatex({
+        id: 'insert_alert',
+        latex: markdown,
+        offset: 0,
+      });
+    },
+    [insertLatex]
+  );
+
   const handleImageConfirm = useCallback(
     (file, altText) => {
       const fileID = generateUniqueId();
@@ -146,6 +159,10 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
                       setIsLinkModalOpen(true);
                       return;
                     }
+                    if (tab.id === 'insert_alert') {
+                      setIsAlertModalOpen(true);
+                      return;
+                    }
                     insertLatex(tab);
                   }}
                 >
@@ -166,6 +183,11 @@ const EditIconsTab = ({ insertLatex, addImageToExport }) => {
         onClose={() => setIsLinkModalOpen(false)}
         onConfirm={handleLinkConfirm}
       />
+      <AlertInputModal
+        isOpen={isAlertModalOpen}
+        onClose={() => setIsAlertModalOpen(false)}
+        onConfirm={handleAlertConfirm}
+      />
     </>
   );
 };

src/lib/tabs/markdowns.js

@@ -13,6 +13,7 @@ import { ReactComponent as CreateLink } from '@/components/svg/markdown/create_l
 import { ReactComponent as InsertImage } from '@/components/svg/markdown/insert_image.svg';
 import { ReactComponent as Quote } from '@/components/svg/markdown/quote.svg';
 import { ReactComponent as Table } from '@/components/svg/markdown/table.svg';
+import { ReactComponent as Alert } from '@/components/svg/markdown/alert.svg';
 
 const markdowns = [
   {
@@ -127,6 +128,14 @@ const markdowns = [
     shortcut: -1,
     Icon: Quote,
   },
+  {
+    id: 'insert_alert',
+    latex: '',
+    offset: 0,
+    category: 'markdown',
+    shortcut: -1,
+    Icon: Alert,
+  },
   {
     id: 'table',
     latex: `\n\nc1|c2|c3