📝 docs: update docs

src/ErrorBoundary/index.zh-CN.md

@@ -9,17 +9,13 @@ group:
 
 # ErrorBoundary 错误提示
 
-## 示例
+通用错误提示面板
 
-### 生产环境
+## 代码示例
 
-<code src='./demos/_prod.tsx' ></code>
+<code src='./demos/_prod.tsx' title="生产环境"></code>
 
-### 开发环境
-
-开发时会直接显示报错信息：
-
-<code src='./demos/_dev.tsx' ></code>
+<code src='./demos/_dev.tsx' title="开发环境" description="开发时会直接显示报错信息"></code>
 
 ## API
 

src/FreeCanvas/index.tsx

@@ -1,12 +1,9 @@
 import type { FC, ReactNode } from 'react';
 import type { Viewport } from 'reactflow';
 import ReactFlow, { Background, ReactFlowProvider } from 'reactflow';
-
 import Artboard from './Artboard';
 import ControlAction from './ControlAction';
-
 import { useStyle } from './style';
-
 // 只有引入默认 style 才能保证交互是正常的
 import 'reactflow/dist/style.css';
 

src/FreeCanvas/index.zh-CN.md

@@ -6,7 +6,9 @@ group: 面板模块
 
 # FreeCanvas 自由画布
 
-## 示例
+基于 `ReactFlow` 的自由画布封装
+
+## 代码示例
 
 <code src='./demos/basic.tsx' ></code>
 

src/Highlight/demos/auto.tsx

@@ -1,8 +1,3 @@
-/**
- * title: 自动根据当前主题判断
- * description: 默认开启 `auto`，会根据当前主题自动判断
- */
-
 import { Highlight } from '@ant-design/pro-editor';
 
 export default () => (

src/Highlight/demos/basic.tsx

@@ -1,8 +1,3 @@
-/**
- * title: 指定语言和主题
- * description: 你可以通过 `language` 指定语言高亮，通过 `theme` 指定高亮主题
- */
-
 import { Highlight } from '@ant-design/pro-editor';
 
 export default () => (

src/Highlight/demos/lineNumber.tsx

@@ -1,6 +1,5 @@
 /**
- * title: 展示代码块行号
- * description: 你可以通过 `lineNumber` 指定是否需要展示代码块行号
+
  */
 
 import { Highlight } from '@ant-design/pro-editor';

src/Highlight/demos/shiki.tsx

@@ -1,6 +1,5 @@
 /**
- * title: 关闭 shiki
- * description: 默认开启 `shiki`渲染，在弱网或无网络情况下可以设置 `shiki=false` 关闭
+ *
  */
 
 import { Highlight } from '@ant-design/pro-editor';

src/Highlight/demos/theme.tsx

@@ -1,6 +1,5 @@
 /**
- * title: 切换语言与主题
- * description: 你可以通过这个示例查看不同语言在不同主题下的效果
+
  */
 
 import { Highlight } from '@ant-design/pro-editor';

src/Highlight/index.zh-CN.md

@@ -6,31 +6,21 @@ group: 基础组件
 
 # Highlight 代码高亮
 
-## 何时使用
-
 展示代码时使用，Highlight 默认使用 [Shiki](https://github.com/shikijs/shiki) 渲染，Shiki 使用 TextMate 语法器更加精确，不过需要加载额外的 wasm 文件，在网络不好的情况下体验不佳，若初始化失败组件会设定渲染器为 [highlight.js](https://highlightjs.org/) 来替代。
 
 ## 代码演示
 
-### 自动主题
-
-<code src="./demos/auto.tsx" ></code>
-
-### 关闭 Shiki
-
-<code src="./demos/shiki.tsx" ></code>
-
-### 指定语言
-
-<code src="./demos/basic.tsx" ></code>
+<code src="./demos/auto.tsx" title="自动主题" description="默认开启 `auto`，会根据当前环境自动切换主题"></code>
 
-### 展示代码块行号
+<code src="./demos/shiki.tsx"  title="关闭 shiki" description="默认开启 `shiki`渲染，在弱网或无网络情况下可以设置 `shiki=false` 关闭"></code>
 
-<code src="./demos/lineNumber.tsx" ></code>
+<code src="./demos/basic.tsx" title="指定语言和主题" description="你可以通过 `language` 指定语言高亮，通过 `theme` 指定高亮主题"></code>
 
-### 主题 & 语言 & 行号 & 渲染器
+<code src="./demos/lineNumber.tsx"  title="展示代码块行号"
+description="你可以通过 `lineNumber` 指定是否需要展示代码块行号"></code>
 
-<code src="./demos/theme.tsx" ></code>
+<code src="./demos/theme.tsx"  title="切换语言与主题"
+ description="你可以通过这个示例查看不同语言在不同主题下的效果"></code>
 
 ## API 参数
 

src/IconPicker/index.zh-CN.md

@@ -8,30 +8,18 @@ group:
 
 # IconPicker 图标选择器
 
-## 何时使用
-
 选择 Icon 时使用。
 
 ## 代码演示
 
-### 基本使用
-
-<code src="./demos/normal.tsx" ></code>
-
-### 受控模式
+<code src="./demos/normal.tsx" title="基本使用"></code>
 
-<code src="./demos/controlled.tsx" ></code>
+<code src="./demos/controlled.tsx" title="受控模式"></code>
 
-### 外部传入 scripts
-
-如果外部传入 iconfontScripts 源并且不设置 onChange 方法，那么默认会隐藏添加图标源的按钮。
-
-<code src="./demos/scripts.tsx" ></code>
+<code src="./demos/scripts.tsx" title="外部传入 scripts" description="如果外部传入 `iconfontScripts`` 源并且不设置 `onChange` 方法，那么默认会隐藏添加图标源的按钮。"></code>
 
 ## API
 
-## 基础属性
-
 | 属性名                       | 类型                                           | 描述                             |
 | ---------------------------- | ---------------------------------------------- | -------------------------------- |
 | defaultIcon                  | `IconUnit`                                     | 默认图标单元                     |

src/Layout/index.zh-CN.md

@@ -10,45 +10,23 @@ EditorLayout 是我们专门为了编辑器场景制作的编辑器布局组件
 
 ## 代码演示
 
-### 基础用法
+<code src="./demos/basic.tsx" title="基础用法"></code>
 
-<code src="./demos/basic.tsx"></code>
+<code src="./demos/single.tsx" title="只需要面板" description="你可以通过设置 `header` 和 `footer` 为 `false` 来隐藏头和尾的配置"></code>
 
-### 只需要面板
-
-你可以通过设置 header 和 footer 为 false 来隐藏头和尾的配置
-
-<code src="./demos/single.tsx" ></code>
-
-当然你也可以对某个 pannel 设置 false 来关闭其内容
-
-<code src="./demos/noLeftPannel.tsx" ></code>
+<code src="./demos/noLeftPannel.tsx" title="关闭 panel" description="当然你也可以对某个 `pannel` 设置 false 来关闭其内容"></code>
 
 ### 改变布局
 
-你可以通过声明不同的 types 来渲染一些不同结构的布局
-
-我们把布局分为 4 种，分别对应下方的图片，默认是 Bottom 模式，足以适应市面上大部分编辑器的场景。
-
 ![layout-types](https://mdn.alipayobjects.com/huamei_re70wt/afts/img/A*-asvT7GkKIwAAAAAAAAAAAAADmuEAQ/original)
 
-<code src="./demos/types.tsx" ></code>
+<code src="./demos/types.tsx" title="改变布局" description="你可以通过声明不同的 `types` 来渲染一些不同结构的布局，我们把布局分为 4 种，默认是 `Bottom` 模式，足以适应市面上大部分编辑器的场景。"></code>
 
-### 布局主题类型
-
-你可以指定 ThemeType 来切换一些简单的布局主题样式
-
-你也可以对每个部分单独配置 ThemeType，会优先于全局的配置
+<code src="./demos/themeType.tsx" title="布局主题类型" description="你可以指定 ThemeType 来切换一些简单的布局主题样式，你也可以对每个部分单独配置 ThemeType，会优先于全局的配置"></code>
 
 > 注意：在 pure 模式下，我们会将原有的 Pannel 之间的间距、各部分的 Radius、背景色都会关闭，这个时候，如果你不给每一个区域加上颜色或者一些特殊 css 进行区分，是很难看清楚各个部分的。
 
-<code src="./demos/themeType.tsx"></code>
-
-### 对话布局
-
-你可以简单通过配置和样式来搭建一个类似对话内容的布局
-
-<code src="./demos/dingding.tsx"></code>
+<code src="./demos/dingding.tsx" title="对话布局" description="你可以简单通过配置和样式来搭建一个类似对话内容的布局"></code>
 
 ## APIs
 

src/Markdown/index.zh-CN.md

@@ -8,29 +8,15 @@ description:
 
 # Markdown 文档展示
 
-## 何时使用
-
 Markdown 是一个用于渲染 Markdown 文本的 React 组件。它支持各种 Markdown 语法，如标题、列表、链接、图片、代码块等。它通常用于文档、博客和其他文本密集型应用中。
 
 ## 代码演示
 
-### 默认渲染
-
-<code src="./demos/index.tsx" nopadding></code>
-
-### 代码
-
-<code src="./demos/code.tsx" nopadding></code>
-
-### 自定义传入 Plugins
-
-我们内置了一些对于 Markdown 转换的 Plugins，但是如果你有别的需求，你可以自定义传入 rehypePlugins 和 remarkPlugins 来扩充当前的渲染能力。
-
-例如，下方是一个传入 rehypeRaw 用来渲染 Html 能力的样例。
+<code src="./demos/index.tsx" nopadding title="默认渲染"></code>
 
-> 需要注意的是，不同的插件之间可能会出现解析冲突的问题，这个可能需要用户自己解决。
+<code src="./demos/code.tsx" nopadding title="代码"></code>
 
-<code src="./demos/htmlPlugin.tsx" nopadding></code>
+<code src="./demos/htmlPlugin.tsx" nopadding title="自定义传入 Plugins" description="我们内置了一些对于 Markdown 转换的 Plugins，但是如果你有别的需求，你可以自定义传入 `rehypePlugins` 和 `remarkPlugins` 来扩充当前的渲染能力。例子是一个传入 rehypeRaw 用来渲染 Html 能力的样例。需要注意的是，不同的插件之间可能会出现解析冲突的问题，这个可能需要用户自己解决。"></code>
 
 ## APIs
 

src/Snippet/demos/spotlight.tsx

@@ -0,0 +1,9 @@
+import { Snippet } from '@ant-design/pro-editor';
+
+export default () => {
+  return (
+    <Snippet language="sh" spotlight>
+      pnpm install @ant-design/pro-chat
+    </Snippet>
+  );
+};

src/Snippet/index.zh-CN.md

@@ -9,7 +9,9 @@ description: Snippet 组件用于显示带有语法突出显示的代码片段
 
 ## Default
 
-<code src="./demos/index.tsx" nopadding></code>
+<code src="./demos/index.tsx" nopadding title="基础示例"></code>
+
+<code src="./demos/spotlight.tsx" nopadding title="聚光灯背景效果" description="你可以设置 `spotlight` 属性来开启聚光灯背景效果"></code>
 
 ## APIs