diff --git a/web/src/components/Markdown/index.tsx b/web/src/components/Markdown/index.tsx index fdaec143..d16b72e4 100644 --- a/web/src/components/Markdown/index.tsx +++ b/web/src/components/Markdown/index.tsx @@ -1,5 +1,4 @@ -import { Image, Input, Select, Form, Checkbox, Radio, ColorPicker, DatePicker, TimePicker, InputNumber, Slider, Button } from 'antd' -import { EditOutlined, SaveOutlined, CloseOutlined } from '@ant-design/icons' +import { Image, Input, Select, Form, Checkbox, Radio, ColorPicker, DatePicker, TimePicker, InputNumber, Slider } from 'antd' import ReactMarkdown from 'react-markdown' import RemarkGfm from 'remark-gfm' import RemarkMath from 'remark-math' @@ -20,7 +19,6 @@ interface RbMarkdownProps { showHtmlComments?: boolean; // 是否显示 HTML 注释,默认为 false(隐藏) editable?: boolean; // 是否可编辑,默认为 false onContentChange?: (content: string) => void; // 内容变化回调 - onSave?: (content: string) => void; // 保存回调 } const components = { @@ -51,7 +49,7 @@ const components = { video: ({ src, ...props }: any) => , audio: ({ src, ...props }: any) => , a: ({ href, children, ...props }: any) => {children}, - button: ({ children, ...props }: any) => {[children]}, + button: ({ children }: any) => {[children]}, table: ({ children, ...props }: any) => {children}
, tr: ({ children, ...props }: any) => {children}, th: ({ children, ...props }: any) => {children}, @@ -100,9 +98,7 @@ const RbMarkdown: FC = ({ showHtmlComments = false, editable = false, onContentChange, - onSave, }) => { - const [isEditing, setIsEditing] = useState(editable) // 如果可编辑,默认进入编辑模式 const [editContent, setEditContent] = useState(content) const textareaRef = useRef(null) @@ -111,44 +107,6 @@ const RbMarkdown: FC = ({ setEditContent(content) }, [content]) - // 当editable变化时,自动切换编辑状态 - useEffect(() => { - if (editable) { - setIsEditing(true) - // 延迟聚焦,确保 textarea 已渲染 - setTimeout(() => { - textareaRef.current?.focus() - }, 100) - } - }, [editable]) - - // 进入编辑模式 - const handleEdit = () => { - setIsEditing(true) - setEditContent(content) - // 延迟聚焦,确保 textarea 已渲染 - setTimeout(() => { - textareaRef.current?.focus() - }, 100) - } - - // 保存编辑 - const handleSave = () => { - onContentChange?.(editContent) - onSave?.(editContent) - if (!editable) { - setIsEditing(false) // 只有在非强制编辑模式下才退出编辑 - } - } - - // 取消编辑 - const handleCancel = () => { - setEditContent(content) // 恢复原内容 - if (!editable) { - setIsEditing(false) // 只有在非强制编辑模式下才退出编辑 - } - } - // 处理 textarea 内容变化 const handleTextareaChange = (e: React.ChangeEvent) => { const newContent = e.target.value @@ -160,15 +118,15 @@ const RbMarkdown: FC = ({ // 根据参数决定是否将 HTML 注释转换为可见文本 // 使用特殊的 markdown 语法来显示注释,避免被 rehype-raw 过滤 const processedContent = showHtmlComments - ? (isEditing ? editContent : content).replace(//g, (_match, commentContent) => { + ? (editable ? editContent : content).replace(//g, (_match, commentContent) => { // 转换为带样式的文本,使用 标记 const escaped = commentContent.trim().replace(//g, '>') return `<!-- ${escaped} -->` }) - : (isEditing ? editContent : content) + : (editable ? editContent : content) // 如果是编辑模式,显示 textarea - if (isEditing) { + if (editable) { return (
- - {/* 编辑工具栏 - 只在非强制编辑模式下显示 */} - {!editable && ( -
- - -
- )} {/* 编辑区域 */} = ({ // 预览模式 return ( -
+
- - {/* 编辑按钮 - 只在非强制编辑模式且鼠标悬停时显示 */} - {!editable && ( -
- -
- )}