Skip to content

Commit

Permalink
优化 MarkdownEditor 组件,更新默认值并增强渲染逻辑
Browse files Browse the repository at this point in the history
  • Loading branch information
chenshuai2144 committed Nov 21, 2024
1 parent 036350f commit ca5c1af
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 7 deletions.
97 changes: 91 additions & 6 deletions src/MarkdownEditor/demos/render.tsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,97 @@
import { MarkdownEditor, parserMdToSchema } from '@ant-design/md-editor';
import { MarkdownEditor } from '@ant-design/md-editor';
import { Card } from 'antd';

const defaultValue = `- [2021 版的 SOFAStack 白皮书](https://gw.alipayobjects.com/os/bmw-prod/348b61a4-034f-4f01-8bd8-4bb2876b63d5.pdf)
- [SOFAStack 解决方案白皮书](https://gw.alipayobjects.com/os/bmw-prod/06b77ee6-82a9-4d8a-aee4-72ddef60cb23.pdf)
- [单元化解决方案白皮书](http://docs-aliyun.cn-hangzhou.oss.aliyun-inc.com/assets/attach/160617/AntCloud_zh/1585895792638/%E8%9A%82%E8%9A%81%E5%8D%95%E5%85%83%E5%8C%96%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E7%99%BD%E7%9A%AE%E4%B9%A6.pdf)`;
const defaultValue = `<!-- {"MarkdownType": "report", "id": "8", "section_ids": " [15, 16, 17] "} -->
# 腾讯研究报告
<!-- {"MarkdownType": "section", "id": "15" } -->
## 创始人
腾讯,全称深圳市腾讯计算机系统有限公司,是由五位创始人共同创立的,他们是马化腾、张志东、许晨晔、陈一丹和曾李青。 以下是关于这些创始人的详细信息: 马化腾 马化腾,1971 年 10 月 29 日出生于广东省东方县(现海南省东方市)八所港,广东汕头人,汉族,无党派人士。他毕业于深圳大学电子工程系计算机专业。马化腾是腾讯科技(深圳)有限公司的创始人、董事会主席、首席执行官,并曾是中华人民共和国第十二、十三届全国人民代表大会代表 。马化腾在 1998 年 11 月 11 日与合伙人共同注册成立了腾讯,并在 2004 年 6 月 16 日带领腾讯在香港联合交易所有限公司主板上市。 张志东 张志东,马化腾的同学,被称为 QQ 之父。他的计算机技术非常出色,曾是深圳大学最拔尖的学生之一。张志东在腾讯担任 CTO,并在 2014 年 9 月离职,转任腾讯公司终身荣誉顾问及腾讯学院荣誉院长等职位 。
<!-- {"MarkdownType": "section", "id": "16" } -->
## 表格
| 业务 | 2021Q1 | 2021Q2 | 2021Q3 | 2021Q4 | 2022Q1 | 2022Q2 | 2022Q3 | 2022Q4 | 2023Q1 | 2023Q2 | 2023Q3 | 2023Q4 |
| ------------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- | ------- |
| 收入 | 135,303 | 138,259 | 142,368 | 144,188 | 135,471 | 134,034 | 140,093 | 144,954 | 149,986 | 149,208 | 154,625 | 155,200 |
| 增值服务 | 72,443 | 72,013 | 75,203 | 71,913 | 72,738 | 71,683 | 72,727 | 70,417 | 79,337 | 74,211 | 75,748 | 69,100 |
| 网络游戏 | 43,600 | 43,000 | 44,900 | 42,800 | 43,600 | 42,500 | na | na | na | 44,500 | 46,000 | 40,900 |
| 社交网络收入 | 28,800 | 29,000 | 30,300 | 29,100 | 29,100 | 29,200 | na | na | na | 29,700 | 29,700 | 28,200 |
| 网络广告 | 21,820 | 22,833 | 22,495 | 21,518 | 17,988 | 18,638 | 21,443 | 24,660 | 20,964 | 25,003 | 25,721 | 29,794 |
| 其他 | 41,040 | 43,413 | 44,670 | 50,757 | 44,745 | 43,713 | 45,923 | 49,877 | 49,685 | 49,994 | 53,156 | 54,379 |
| 金融科技 | 39,028 | 41,892 | 43,317 | 47,958 | 42,768 | 42,208 | 44,844 | 47,244 | 48,701 | 48,635 | 52,048 | 52,435 |
| 云 | 62,012 | 1,521 | 1,353 | 2,799 | 1,977 | 1,505 | 1,079 | 2,633 | 984 | 1,359 | 1,108 | 1,944 |
## 图表
<!-- {"chartType": "bar", "x":"业务", "y":"2021Q1"} -->
| 业务 | 2021Q1 | 2021Q2 | 2021Q3 | 2021Q4 | 2022Q1 |
| ------------- | ------- | ------- | ------- | ------- | ------- |
| 收入 | 135,303 | 138,259 | 142,368 | 144,188 | 135,471 |
| 增值服务 | 72,443 | 72,013 | 75,203 | 71,913 | 72,738 |
| 网络游戏 | 43,600 | 43,000 | 44,900 | 42,800 | 43,600 |
| 社交网络收入 | 28,800 | 29,000 | 30,300 | 29,100 | 29,100 |
| 网络广告 | 21,820 | 22,833 | 22,495 | 21,518 | 17,988 |
| 其他 | 41,040 | 43,413 | 44,670 | 50,757 | 44,745 |
| 金融科技 | 39,028 | 41,892 | 43,317 | 47,958 | 42,768 |
| 云 | 162,012 | 111,521 | 111,353 | 112,799 | 111,977 |
| | num_of_data_levels |
|---:|---------------------:|
| 0 | 24 |
## 表单
\`\`\`schema
[
{
"title": "标题",
"dataIndex": "title",
"formItemProps": {
"rules": [{ "required": true, "message": "此项为必填项" }]
},
"width": "md"
}
]
\`\`\`
## 删除线
~~腾讯六大事业群腾讯六大事业群腾讯六大事业群~~
`;
export default () => {
console.log(parserMdToSchema(defaultValue));
return (
<MarkdownEditor width={'100vw'} height={'100vh'} initValue={defaultValue} />
<MarkdownEditor
width={'100vw'}
height={'100vh'}
initValue={defaultValue}
eleItemRender={(props, defaultDom) => {
if (
props.element.type !== 'table-cell' &&
props.element.type !== 'table-row' &&
props.element.type !== 'head'
) {
return (
<Card
title={props.element.type}
extra={<a href="#">More</a>}
style={{
marginBottom: 24,
}}
hoverable
>
{defaultDom}
</Card>
);
}
return defaultDom as React.ReactElement;
}}
/>
);
};
2 changes: 1 addition & 1 deletion src/MarkdownEditor/editor/utils/schemaToMarkdown.ts
Original file line number Diff line number Diff line change
Expand Up @@ -209,7 +209,7 @@ export const schemaToMarkdown = (
str += `[${p.checked ? 'x' : ' '}] `;
if (p.mentions && p.mentions.length) {
p.mentions.forEach((mention: any) => {
const url = mention.avatar;
const url = mention?.avatar || '';
const params = new URLSearchParams('?' + (url.split('?')[1] || ''));
params.set('id', mention.id);
str += `[${mention.name}](${
Expand Down

1 comment on commit ca5c1af

@vercel
Copy link

@vercel vercel bot commented on ca5c1af Nov 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.