雨霖铃
0cad722479
- 添加 react-markdown 库以支持 markdown 内容渲染 - 引入 @types 相关类型定义包，包括 debug、estree-jsx、hast 等 - 添加解析 markdown 所需的工具库，如 micromark、mdast-util 系列 - 集成 hast-util-to-jsx-runtime 实现 hast 到 jsx 的转换 - 添加字符实体处理和样式解析相关依赖 - 引入支持 mdx 语法的相关工具包 - 添加统一的类型检查和开发依赖支持 - 更新 package-lock.json 锁定新增依赖版本
51 lines
1.5 KiB
JavaScript
51 lines
1.5 KiB
JavaScript
import './TodoMarkdownEditor.css';
|
|
import ReactMarkdown from "react-markdown";
|
|
import {useState, useRef} from "react";
|
|
|
|
const TodoMarkdownEditor = () => {
|
|
const [markdown, setMarkdown] = useState('# Hello, world!\n\nThis is a simple paragraph with some **bold** text.');
|
|
const textareaRef = useRef(null);
|
|
const handleClear = () => {
|
|
setMarkdown('');
|
|
};
|
|
|
|
const handleReset = () => {
|
|
setMarkdown('# Hello, world!\n\nThis is a simple paragraph with some **bold** text.');
|
|
};
|
|
|
|
return (<div className="markdown-editor">
|
|
<div className="editor-container">
|
|
<div className="preview-section">
|
|
<label>预览区</label>
|
|
<div className="markdown-preview">
|
|
<ReactMarkdown>{markdown}</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="input-section">
|
|
<label htmlFor="markdown-input">编辑区</label>
|
|
<textarea
|
|
id="markdown-input"
|
|
ref={textareaRef}
|
|
placeholder="输入Markdown内容..."
|
|
className="markdown-input"
|
|
value={markdown}
|
|
onChange={(e) => setMarkdown(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="toolbar">
|
|
<div className="toolbar-section">
|
|
<button className="action-button clear-button" onClick={handleClear}>
|
|
清空
|
|
</button>
|
|
<button className="action-button reset-button" onClick={handleReset}>
|
|
重置
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>);
|
|
};
|
|
|
|
export default TodoMarkdownEditor; |