docs: 添加 md-editor 自定义渲染示例和文档 #466
Conversation
📝 Walkthrough概述演练此次更改主要引入了一个新的 Markdown 编辑器演示，使用 Ant Design 的 Bubble 组件和 变更
序列图sequenceDiagram
participant User
participant Bubble
participant RenderMarkdown
participant MarkdownEditor
User->>Bubble: 触发渲染
Bubble->>RenderMarkdown: 传入 Markdown 内容
RenderMarkdown->>MarkdownEditor: 解析并渲染内容
MarkdownEditor-->>RenderMarkdown: 返回渲染结果
RenderMarkdown-->>Bubble: 显示渲染内容
可能相关的 PR
建议的审阅者
诗歌
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
|
Walkthrough: This pull request introduces a new demo for rendering markdown content using Changes:
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
Bundle ReportBundle size has no change ✅ |
|
New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
components/bubble/demo/stream_markdown.tsx (2)
7-263: 建议将示例文本内容移至单独的文件中当前的示例文本内容较长，建议将其提取到单独的
.md文件中，以提高代码的可维护性和可读性。-const text = `## 创始人...`.trim(); +import demoText from './demo-content.md'; +const text = demoText.trim();
289-304: 建议使用主题变量或设计令牌来设置间距为了保持样式的一致性和可维护性，建议使用主题变量或设计令牌来设置间距，而不是硬编码的数值。
- <div style={{ minHeight: 100, margin: 24 }}> + <div style={{ minHeight: 100, margin: token.marginLG }}>package.json (1)
100-100: 建议锁定依赖版本为了确保构建的稳定性，建议使用固定版本而不是 caret range。
- "@ant-design/md-editor": "^1.12.31", + "@ant-design/md-editor": "1.12.31",
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/bubble/demo/stream_markdown.md(1 hunks)components/bubble/demo/stream_markdown.tsx(1 hunks)components/bubble/index.en-US.md(1 hunks)components/bubble/index.zh-CN.md(1 hunks)package.json(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- components/bubble/demo/stream_markdown.md
⏰ Context from checks skipped due to timeout of 90000ms (7)
- GitHub Check: Socket Security: Pull Request Alerts
- GitHub Check: test / react component workflow
- GitHub Check: build preview
- GitHub Check: size
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: test / react component workflow
- GitHub Check: Cloudflare Pages
🔇 Additional comments (4)
components/bubble/demo/stream_markdown.tsx (1)
285-287: 实现正确且简洁renderMarkdown 函数的实现符合 React 最佳实践。
components/bubble/index.zh-CN.md (1)
29-29: 文档更新准确且完整新增的示例文档条目清晰地展示了 md-editor 的用法。
components/bubble/index.en-US.md (1)
28-28: 文档同步更新正确英文文档的更新与中文文档保持一致，维护了良好的多语言支持。
package.json (1)
237-237: 请确认移除 react-intl 的影响移除 react-intl 依赖可能会影响项目中的国际化功能，请确认：
- 是否有其他组件仍在使用 react-intl
- 是否已经迁移到其他国际化解决方案
Deploying ant-design-x with
|
| Latest commit: |
b74aa85
|
| Status: | 🚫 Build failed. |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
components/bubble/demo/stream_markdown.tsx (2)
290-290: 建议将样式值提取为常量建议将固定的样式值提取为命名常量，以提高代码的可维护性。
+ const CONTAINER_STYLES = { + minHeight: 100, + margin: 24, + }; - <div style={{ minHeight: 100, margin: 24 }}> + <div style={CONTAINER_STYLES}>🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
292-295: 建议调整打字动画的速度当前的打字速度（每50ms打印10个字符）可能过快，不利于用户阅读。建议降低速度以提供更好的阅读体验。
typing={{ - step: 10, - interval: 50, + step: 5, + interval: 100, }}🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (7)
components/attachments/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/attachments/__tests__/__snapshots__/demo.test.tsx.snapis excluded by!**/*.snapcomponents/bubble/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/bubble/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snapcomponents/sender/__tests__/__snapshots__/index.test.tsx.snapis excluded by!**/*.snapcomponents/thought-chain/__tests__/__snapshots__/demo-extend.test.ts.snapis excluded by!**/*.snapcomponents/thought-chain/__tests__/__snapshots__/demo.test.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (1)
components/bubble/demo/stream_markdown.tsx(1 hunks)
🧰 Additional context used
🪛 GitHub Actions: ✅ test
components/bubble/demo/stream_markdown.tsx
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (3)
components/bubble/demo/stream_markdown.tsx (3)
271-280: 需要优化 MarkdownEditor 的宽度设置使用
80vw作为固定宽度可能会在不同设备上造成布局问题，建议使用更灵活的布局方案。- width={'80vw'} + width={'100%'}🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
284-286: 代码实现简洁清晰函数实现遵循了函数式编程的原则，代码结构清晰。
🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
305-305: 导出实现正确默认导出的实现符合最佳实践。
🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
| "rules": [{ "required": true, "message": "此项为必填项" }] | ||
| }, | ||
| "width": "md" | ||
| }, | ||
| { | ||
| "title": "状态", | ||
| "dataIndex": "state", | ||
| "valueType": "select", | ||
| "width": "md" | ||
| }, | ||
| { "title": "标签", "dataIndex": "labels", "width": "md" }, | ||
| { | ||
| "valueType": "switch", | ||
| "title": "开关", | ||
| "dataIndex": "Switch", | ||
| "fieldProps": { "style": { "width": "200px" } }, | ||
| "width": "md" | ||
| }, | ||
| { | ||
| "title": "创建时间", | ||
| "key": "showTime", | ||
| "dataIndex": "createName", | ||
| "width": "md" | ||
| }, | ||
| { "title": "更新时间", "dataIndex": "updateName" }, | ||
| { | ||
| "title": "分组", | ||
| "valueType": "group", | ||
| "columns": [ | ||
| { | ||
| "title": "状态", | ||
| "dataIndex": "groupState", | ||
| "valueType": "select", | ||
| "width": "xs", | ||
| "colProps": { "xs": 12 } | ||
| }, | ||
| { | ||
| "title": "标题", | ||
| "width": "md", | ||
| "dataIndex": "groupTitle", | ||
| "colProps": { "xs": 12 }, | ||
| "formItemProps": { | ||
| "rules": [{ "required": true, "message": "此项为必填项" }] | ||
| } | ||
| } | ||
| ] | ||
| }, | ||
| { | ||
| "title": "列表", | ||
| "valueType": "formList", | ||
| "dataIndex": "list", | ||
| "columns": [ | ||
| { | ||
| "valueType": "group", | ||
| "columns": [ | ||
| { | ||
| "title": "状态", | ||
| "dataIndex": "state", | ||
| "valueType": "select", | ||
| "colProps": { "xs": 24, "sm": 12 }, | ||
| "width": "xs" | ||
| }, | ||
| { | ||
| "title": "标题", | ||
| "dataIndex": "title", | ||
| "width": "md", | ||
| "formItemProps": { | ||
| "rules": [{ "required": true, "message": "此项为必填项" }] | ||
| }, | ||
| "colProps": { "xs": 24, "sm": 12 } | ||
| } | ||
| ] | ||
| }, | ||
| { "valueType": "dateTime", "dataIndex": "currentTime", "width": "md" } | ||
| ] | ||
| }, | ||
| { | ||
| "title": "创建时间", | ||
| "dataIndex": "created_at", | ||
| "valueType": "dateRange", | ||
| "width": "md" | ||
| } | ||
| ] | ||
| \`\`\` | ||
|
|
||
|
|
||
| ## 代码 | ||
|
|
||
| \`\`\`java | ||
| Class A { | ||
| main() { | ||
| System.out.println("Hello World"); | ||
| } | ||
| } | ||
| \`\`\` | ||
|
|
||
| ## 删除线 | ||
| ~~腾讯六大事业群腾讯六大事业群腾讯六大事业群~~ | ||
|
|
||
| `.trim(); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
建议使用示例数据替换敏感业务数据
当前示例中包含了大量真实的业务数据（如财务数据、人员信息等）。建议使用虚构的示例数据来展示功能。
🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
| import { UserOutlined } from '@ant-design/icons'; | ||
| import { MarkdownEditor, MarkdownEditorInstance, parserMdToSchema } from '@ant-design/md-editor'; |
There was a problem hiding this comment.
缺少必要的依赖项
需要在项目的 package.json 中添加 @ant-design/md-editor 依赖。
// package.json
{
"dependencies": {
+ "@ant-design/md-editor": "^1.12.31"
}
}Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 GitHub Actions: ✅ test
[error] Cannot find module '@ant-design/md-editor'. Missing dependency in the project.
Summary by CodeRabbit
新功能
依赖变更
@ant-design/md-editor开发依赖react-intl依赖文档更新