-
-
+
+
{t('admin.common.loading')}
diff --git a/frontend/src/components/admin/MarkdownEditor.tsx b/frontend/src/components/admin/MarkdownEditor.tsx
new file mode 100644
index 0000000..0980c14
--- /dev/null
+++ b/frontend/src/components/admin/MarkdownEditor.tsx
@@ -0,0 +1,958 @@
+import { FC, useState, useRef, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
+import rehypeSanitize from 'rehype-sanitize';
+import rehypeHighlight from 'rehype-highlight';
+import 'highlight.js/styles/github-dark.css';
+import classNames from 'classnames';
+import axios from 'axios';
+import { useToast } from '@/hooks/useToast';
+import {
+ RiH1,
+ RiH2,
+ RiH3,
+ RiBold,
+ RiItalic,
+ RiListOrdered,
+ RiListUnordered,
+ RiLink,
+ RiImage2Line,
+ RiCodeLine,
+ RiCodeBoxLine,
+ RiTableLine,
+ RiDoubleQuotesL,
+ RiEyeLine,
+ RiEyeOffLine,
+ RiFullscreenLine,
+} from 'react-icons/ri';
+
+interface MarkdownEditorProps {
+ value: string;
+ onChange: (value: string) => void;
+ placeholder?: string;
+}
+
+type CodeBlockProps = {
+ inline?: boolean;
+ className?: string;
+ children: React.ReactNode;
+} & React.HTMLAttributes
;
+
+const MarkdownEditor: FC = ({
+ value,
+ onChange,
+ placeholder,
+}) => {
+ const { t } = useTranslation();
+ const { showToast } = useToast();
+ const textareaRef = useRef(null);
+ const tableMenuRef = useRef(null);
+ const langSelectorRef = useRef(null);
+ const [showTableMenu, setShowTableMenu] = useState(false);
+ const [showLangSelector, setShowLangSelector] = useState(false);
+ const [isPreview, setIsPreview] = useState(false);
+ const [isFullscreen, setIsFullscreen] = useState(false);
+ const [isDraggingOver, setIsDraggingOver] = useState(false);
+
+ // 检查当前行是否为空
+ const isCurrentLineEmpty = (textarea: HTMLTextAreaElement): boolean => {
+ const text = textarea.value;
+ const lines = text.split('\n');
+ const currentLine = getCurrentLine(textarea);
+ return !lines[currentLine].trim();
+ };
+
+ // 获取当前行号
+ const getCurrentLine = (textarea: HTMLTextAreaElement): number => {
+ const text = textarea.value.substring(0, textarea.selectionStart);
+ return text.split('\n').length - 1;
+ };
+
+ // 在当前位置插入文本
+ const insertText = (textarea: HTMLTextAreaElement, text: string) => {
+ const start = textarea.selectionStart;
+ const end = textarea.selectionEnd;
+ const before = textarea.value.substring(0, start);
+ const after = textarea.value.substring(end);
+
+ const needNewLine = !isCurrentLineEmpty(textarea) &&
+ (text.startsWith('#') || text.startsWith('>'));
+
+ const newText = needNewLine ? `\n${text}` : text;
+ const newValue = before + newText + after;
+
+ onChange(newValue);
+
+ textarea.value = newValue;
+ const newCursorPos = start + newText.length;
+ textarea.selectionStart = newCursorPos;
+ textarea.selectionEnd = newCursorPos;
+ textarea.focus();
+ };
+
+ const insertTable = (rows: number, cols: number) => {
+ if (!textareaRef.current) return;
+
+ const headers = Array(cols).fill('header').join(' | ');
+ const separators = Array(cols).fill('---').join(' | ');
+ const cells = Array(cols).fill('content').join(' | ');
+ const rows_content = Array(rows).fill(cells).join('\n| ');
+
+ insertText(
+ textareaRef.current,
+ `\n| ${headers} |\n| ${separators} |\n| ${rows_content} |\n\n`
+ );
+ setShowTableMenu(false);
+ };
+
+ const findTableAtCursor = (): { table: string; start: number; end: number; rows: string[][]; alignments: string[] } | null => {
+ if (!textareaRef.current) return null;
+
+ const text = textareaRef.current.value;
+ const cursorPos = textareaRef.current.selectionStart;
+
+ const tableRegex = /\|[^\n]+\|[\s]*\n\|[- |:]+\|[\s]*\n(\|[^\n]+\|[\s]*\n?)+/g;
+ let match;
+ while ((match = tableRegex.exec(text)) !== null) {
+ const start = match.index;
+ const end = start + match[0].length;
+ if (cursorPos >= start && cursorPos <= end) {
+ const rows = match[0]
+ .trim()
+ .split('\n')
+ .map(row =>
+ row
+ .trim()
+ .replace(/^\||\|$/g, '')
+ .split('|')
+ .map(cell => cell.trim())
+ );
+
+ const alignments = rows[1].map(cell => {
+ if (cell.startsWith(':') && cell.endsWith(':')) return 'center';
+ if (cell.endsWith(':')) return 'right';
+ return 'left';
+ });
+
+ return {
+ table: match[0],
+ start,
+ end,
+ rows: [rows[0], ...rows.slice(2)],
+ alignments,
+ };
+ }
+ }
+ return null;
+ };
+
+ const generateTableText = (rows: string[][], alignments: string[]): string => {
+ const colWidths = rows[0].map((_, colIndex) =>
+ Math.max(...rows.map(row => row[colIndex]?.length || 0))
+ );
+
+ const separator = alignments.map((align, i) => {
+ const width = Math.max(3, colWidths[i]);
+ switch (align) {
+ case 'center':
+ return ':' + '-'.repeat(width - 2) + ':';
+ case 'right':
+ return '-'.repeat(width - 1) + ':';
+ default:
+ return '-'.repeat(width);
+ }
+ });
+
+ const tableRows = [
+ rows[0],
+ separator,
+ ...rows.slice(1)
+ ].map(row =>
+ '| ' + row.map((cell, i) => cell.padEnd(colWidths[i])).join(' | ') + ' |'
+ );
+
+ return tableRows.join('\n') + '\n';
+ };
+
+ const updateTable = (pos: { table: string; start: number; end: number; rows: string[][]; alignments: string[] }, newRows?: string[][]) => {
+ if (!textareaRef.current) return;
+
+ const text = textareaRef.current.value;
+ const newTable = generateTableText(newRows || pos.rows, pos.alignments);
+ const newText = text.substring(0, pos.start) + newTable + text.substring(pos.end);
+ onChange(newText);
+ };
+
+ const tableActions = [
+ {
+ label: t('editor.insertTable'),
+ action: () => insertTable(2, 2),
+ },
+ {
+ label: t('editor.addRowAbove'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const cursorPos = textareaRef.current?.selectionStart || 0;
+ let rowIndex = 0;
+ let currentPos = tablePos.start;
+
+ for (let i = 0; i < tablePos.rows.length; i++) {
+ const rowText = generateTableText([tablePos.rows[i]], tablePos.alignments);
+ if (cursorPos <= currentPos + rowText.length) {
+ rowIndex = i;
+ break;
+ }
+ currentPos += rowText.length;
+ }
+
+ const newRows = [...tablePos.rows];
+ newRows.splice(rowIndex, 0, Array(tablePos.rows[0].length).fill(''));
+ updateTable(tablePos, newRows);
+ },
+ },
+ {
+ label: t('editor.addRowBelow'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const cursorPos = textareaRef.current?.selectionStart || 0;
+ let rowIndex = 0;
+ let currentPos = tablePos.start;
+
+ for (let i = 0; i < tablePos.rows.length; i++) {
+ const rowText = generateTableText([tablePos.rows[i]], tablePos.alignments);
+ if (cursorPos <= currentPos + rowText.length) {
+ rowIndex = i;
+ break;
+ }
+ currentPos += rowText.length;
+ }
+
+ const newRows = [...tablePos.rows];
+ newRows.splice(rowIndex + 1, 0, Array(tablePos.rows[0].length).fill(''));
+ updateTable(tablePos, newRows);
+ },
+ },
+ {
+ label: t('editor.addColumnLeft'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const cursorPos = textareaRef.current?.selectionStart || 0;
+ const line = textareaRef.current?.value
+ .substring(tablePos.start, cursorPos)
+ .split('\n')
+ .pop() || '';
+ const colIndex = (line.match(/\|/g) || []).length - 1;
+
+ const newRows = tablePos.rows.map(row => {
+ const newRow = [...row];
+ newRow.splice(colIndex, 0, '');
+ return newRow;
+ });
+
+ const newAlignments = [...tablePos.alignments];
+ newAlignments.splice(colIndex, 0, 'left');
+
+ tablePos.alignments = newAlignments;
+ updateTable(tablePos, newRows);
+ },
+ },
+ {
+ label: t('editor.addColumnRight'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const cursorPos = textareaRef.current?.selectionStart || 0;
+ const line = textareaRef.current?.value
+ .substring(tablePos.start, cursorPos)
+ .split('\n')
+ .pop() || '';
+ const colIndex = (line.match(/\|/g) || []).length - 1;
+
+ const newRows = tablePos.rows.map(row => {
+ const newRow = [...row];
+ newRow.splice(colIndex + 1, 0, '');
+ return newRow;
+ });
+
+ const newAlignments = [...tablePos.alignments];
+ newAlignments.splice(colIndex + 1, 0, 'left');
+
+ tablePos.alignments = newAlignments;
+ updateTable(tablePos, newRows);
+ },
+ },
+ {
+ label: t('editor.deleteRow'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const cursorPos = textareaRef.current?.selectionStart || 0;
+ let rowIndex = 0;
+ let currentPos = tablePos.start;
+
+ for (let i = 0; i < tablePos.rows.length; i++) {
+ const rowText = generateTableText([tablePos.rows[i]], tablePos.alignments);
+ if (cursorPos <= currentPos + rowText.length) {
+ rowIndex = i;
+ break;
+ }
+ currentPos += rowText.length;
+ }
+
+ const newRows = [...tablePos.rows];
+ newRows.splice(rowIndex, 1);
+ updateTable(tablePos, newRows);
+ },
+ },
+ {
+ label: t('editor.deleteColumn'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const cursorPos = textareaRef.current?.selectionStart || 0;
+ const line = textareaRef.current?.value
+ .substring(tablePos.start, cursorPos)
+ .split('\n')
+ .pop() || '';
+ const colIndex = (line.match(/\|/g) || []).length - 1;
+
+ const newRows = tablePos.rows.map(row => {
+ const newRow = [...row];
+ newRow.splice(colIndex, 1);
+ return newRow;
+ });
+
+ const newAlignments = [...tablePos.alignments];
+ newAlignments.splice(colIndex, 1);
+
+ tablePos.alignments = newAlignments;
+ updateTable(tablePos, newRows);
+ },
+ },
+ {
+ label: t('editor.deleteTable'),
+ action: () => {
+ const tablePos = findTableAtCursor();
+ if (!tablePos) return;
+
+ const text = textareaRef.current?.value || '';
+ const newText = text.substring(0, tablePos.start) + text.substring(tablePos.end);
+ onChange(newText);
+ },
+ },
+ ];
+
+ const toolbarButtons = [
+ {
+ icon: RiH1,
+ label: t('editor.heading1'),
+ shortcut: t('editor.heading1Shortcut'),
+ action: (textarea: HTMLTextAreaElement) => {
+ insertText(textarea, '# ');
+ },
+ },
+ {
+ icon: RiH2,
+ label: t('editor.heading2'),
+ shortcut: t('editor.heading2Shortcut'),
+ action: (textarea: HTMLTextAreaElement) => {
+ insertText(textarea, '## ');
+ },
+ },
+ {
+ icon: RiH3,
+ label: t('editor.heading3'),
+ shortcut: t('editor.heading3Shortcut'),
+ action: (textarea: HTMLTextAreaElement) => {
+ insertText(textarea, '### ');
+ },
+ },
+ {
+ icon: RiBold,
+ label: t('editor.bold'),
+ shortcut: t('editor.boldShortcut'),
+ action: (textarea: HTMLTextAreaElement) => {
+ const text = textarea.value.substring(
+ textarea.selectionStart,
+ textarea.selectionEnd
+ );
+ insertText(textarea, `**${text || t('editor.bold')}**`);
+ },
+ },
+ {
+ icon: RiItalic,
+ label: t('editor.italic'),
+ shortcut: t('editor.italicShortcut'),
+ action: (textarea: HTMLTextAreaElement) => {
+ const text = textarea.value.substring(
+ textarea.selectionStart,
+ textarea.selectionEnd
+ );
+ insertText(textarea, `_${text || t('editor.italic')}_`);
+ },
+ },
+ {
+ icon: RiListUnordered,
+ label: t('editor.unorderedList'),
+ action: (textarea: HTMLTextAreaElement) => {
+ insertText(textarea, '- ');
+ },
+ },
+ {
+ icon: RiListOrdered,
+ label: t('editor.orderedList'),
+ action: (textarea: HTMLTextAreaElement) => {
+ insertText(textarea, '1. ');
+ },
+ },
+ {
+ icon: RiDoubleQuotesL,
+ label: t('editor.quote'),
+ action: (textarea: HTMLTextAreaElement) => {
+ insertText(textarea, '> ');
+ },
+ },
+ {
+ icon: RiLink,
+ label: t('editor.link'),
+ shortcut: t('editor.linkShortcut'),
+ action: (textarea: HTMLTextAreaElement) => {
+ const text = textarea.value.substring(
+ textarea.selectionStart,
+ textarea.selectionEnd
+ );
+ insertText(textarea, `[${text || t('editor.link')}](url)`);
+ },
+ },
+ {
+ icon: RiImage2Line,
+ label: t('editor.image'),
+ action: () => {
+ const input = document.createElement('input');
+ input.type = 'file';
+ input.accept = 'image/*';
+ input.onchange = (e) => {
+ const file = (e.target as HTMLInputElement).files?.[0];
+ if (file) {
+ handleFileUpload(file);
+ }
+ };
+ input.click();
+ },
+ },
+ {
+ icon: RiCodeLine,
+ label: t('editor.inlineCode'),
+ action: (textarea: HTMLTextAreaElement) => {
+ const text = textarea.value.substring(
+ textarea.selectionStart,
+ textarea.selectionEnd
+ );
+ insertText(textarea, `\`${text || t('editor.inlineCode')}\``);
+ },
+ },
+ ];
+
+ const commonLanguages = [
+ { value: 'javascript', label: 'JavaScript' },
+ { value: 'typescript', label: 'TypeScript' },
+ { value: 'jsx', label: 'JSX' },
+ { value: 'tsx', label: 'TSX' },
+ { value: 'css', label: 'CSS' },
+ { value: 'html', label: 'HTML' },
+ { value: 'json', label: 'JSON' },
+ { value: 'markdown', label: 'Markdown' },
+ { value: 'python', label: 'Python' },
+ { value: 'java', label: 'Java' },
+ { value: 'c', label: 'C' },
+ { value: 'cpp', label: 'C++' },
+ { value: 'csharp', label: 'C#' },
+ { value: 'go', label: 'Go' },
+ { value: 'rust', label: 'Rust' },
+ { value: 'php', label: 'PHP' },
+ { value: 'ruby', label: 'Ruby' },
+ { value: 'swift', label: 'Swift' },
+ { value: 'kotlin', label: 'Kotlin' },
+ { value: 'sql', label: 'SQL' },
+ { value: 'shell', label: 'Shell' },
+ { value: 'yaml', label: 'YAML' },
+ { value: 'xml', label: 'XML' },
+ ];
+
+ const insertCodeBlock = (language?: string) => {
+ if (!textareaRef.current) return;
+ const lang = language || '';
+ insertText(textareaRef.current, `\n\`\`\`${lang}\n\n\`\`\`\n`);
+ const cursorPos = textareaRef.current.selectionStart - 4;
+ textareaRef.current.setSelectionRange(cursorPos, cursorPos);
+ setShowLangSelector(false);
+ };
+
+ // 处理文件上传
+ const handleFileUpload = async (file: File) => {
+ if (!file.type.startsWith('image/')) {
+ showToast('error', t('editor.uploadError', { error: 'Not an image file' }));
+ return;
+ }
+
+ const formData = new FormData();
+ formData.append('file', file);
+
+ try {
+ const response = await axios.post('/api/v1/media', formData, {
+ headers: {
+ 'Content-Type': 'multipart/form-data',
+ 'Authorization': `Bearer ${localStorage.getItem('token')}`,
+ },
+ withCredentials: true,
+ });
+
+ const imageUrl = response.data.data.url;
+ const imageMarkdown = ``;
+
+ if (textareaRef.current) {
+ const start = textareaRef.current.selectionStart;
+ const end = textareaRef.current.selectionEnd;
+ const before = value.substring(0, start);
+ const after = value.substring(end);
+ const newValue = before + imageMarkdown + after;
+ onChange(newValue);
+ showToast('success', t('editor.uploadSuccess'));
+ }
+ } catch (error: any) {
+ console.error('Upload error:', error);
+ const errorMessage = error.response?.data?.error?.message || error.message;
+ showToast('error', t('editor.uploadError', { error: errorMessage }));
+ }
+ };
+
+ // 处理拖放事件
+ const handleDragOver = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setIsDraggingOver(true);
+ };
+
+ const handleDragLeave = (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setIsDraggingOver(false);
+ };
+
+ const handleDrop = async (e: React.DragEvent) => {
+ e.preventDefault();
+ e.stopPropagation();
+ setIsDraggingOver(false);
+
+ const files = Array.from(e.dataTransfer.files);
+ for (const file of files) {
+ await handleFileUpload(file);
+ }
+ };
+
+ // 处理粘贴事件
+ const handlePaste = async (e: React.ClipboardEvent) => {
+ const items = Array.from(e.clipboardData.items);
+ for (const item of items) {
+ if (item.type.startsWith('image/')) {
+ e.preventDefault();
+ const file = item.getAsFile();
+ if (file) {
+ await handleFileUpload(file);
+ }
+ }
+ }
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.ctrlKey || e.metaKey) {
+ const key = e.key.toLowerCase();
+ switch (key) {
+ case 'b': // 粗体
+ e.preventDefault();
+ if (textareaRef.current) {
+ const text = textareaRef.current.value.substring(
+ textareaRef.current.selectionStart,
+ textareaRef.current.selectionEnd
+ );
+ insertText(textareaRef.current, `**${text}**`);
+ }
+ break;
+ case 'i': // 斜体
+ e.preventDefault();
+ if (textareaRef.current) {
+ const text = textareaRef.current.value.substring(
+ textareaRef.current.selectionStart,
+ textareaRef.current.selectionEnd
+ );
+ insertText(textareaRef.current, `_${text}_`);
+ }
+ break;
+ case 'k': // 链接
+ e.preventDefault();
+ if (textareaRef.current) {
+ const text = textareaRef.current.value.substring(
+ textareaRef.current.selectionStart,
+ textareaRef.current.selectionEnd
+ );
+ insertText(textareaRef.current, `[${text}](url)`);
+ }
+ break;
+ case '1': // 标题 1
+ if (e.shiftKey) {
+ e.preventDefault();
+ if (textareaRef.current) {
+ const text = textareaRef.current.value.substring(
+ textareaRef.current.selectionStart,
+ textareaRef.current.selectionEnd
+ );
+ insertText(textareaRef.current, `# ${text}`);
+ }
+ }
+ break;
+ case '2': // 标题 2
+ if (e.shiftKey) {
+ e.preventDefault();
+ if (textareaRef.current) {
+ const text = textareaRef.current.value.substring(
+ textareaRef.current.selectionStart,
+ textareaRef.current.selectionEnd
+ );
+ insertText(textareaRef.current, `## ${text}`);
+ }
+ }
+ break;
+ case '3': // 标题 3
+ if (e.shiftKey) {
+ e.preventDefault();
+ if (textareaRef.current) {
+ const text = textareaRef.current.value.substring(
+ textareaRef.current.selectionStart,
+ textareaRef.current.selectionEnd
+ );
+ insertText(textareaRef.current, `### ${text}`);
+ }
+ }
+ break;
+ case 'e': // 预览
+ e.preventDefault();
+ setIsPreview(!isPreview);
+ break;
+ }
+ }
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ tableMenuRef.current &&
+ !tableMenuRef.current.contains(event.target as Node)
+ ) {
+ setShowTableMenu(false);
+ }
+ if (
+ langSelectorRef.current &&
+ !langSelectorRef.current.contains(event.target as Node)
+ ) {
+ setShowLangSelector(false);
+ }
+ };
+
+ document.addEventListener('mousedown', handleClickOutside);
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside);
+ };
+ }, []);
+
+ return (
+
+
+ {/* 左侧编辑工具栏 */}
+
+ {toolbarButtons.map((button, index) => {
+ return (
+
+ );
+ })}
+
+ {/* 表格按钮 */}
+
+
+ {showTableMenu && (
+
+ {tableActions.map((action, index) => (
+
+ ))}
+
+ )}
+
+
+ {/* 代码块按钮 */}
+
+
+ {showLangSelector && (
+
+
+ {t('editor.selectLanguage')}
+
+
+
+ {commonLanguages.map(({ value, label }) => (
+
+ ))}
+
+
+ )}
+
+
+
+ {/* 右侧预览和全屏按钮 */}
+
+
+
+
+
+
+
+
+ {isDraggingOver && (
+
+
+ {t('editor.dragAndDrop')}
+
+
+ )}
+