feat(markdown): 引入 react-markdown 及相关依赖支持 markdown 渲染

- 添加 react-markdown 库以支持 markdown 内容渲染
- 引入 @types 相关类型定义包，包括 debug、estree-jsx、hast 等
- 添加解析 markdown 所需的工具库，如 micromark、mdast-util 系列
- 集成 hast-util-to-jsx-runtime 实现 hast 到 jsx 的转换
- 添加字符实体处理和样式解析相关依赖
- 引入支持 mdx 语法的相关工具包
- 添加统一的类型检查和开发依赖支持
- 更新 package-lock.json 锁定新增依赖版本

src/components/TodoMarkdownEditor.js

@@ -0,0 +1,51 @@
+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;