remons-markdown-editor 1.0.0-beta.2 → 1.0.0-beta.3

package/readme.md

@@ -30,6 +30,7 @@ export default function App() {
 | onChange | (value: string) => void | - | 内容变更回调 |
 | showPreview | boolean | true | 是否显示预览面板 |
 | fullscreen | boolean | false | 是否显示全屏按钮 |
+| previewOptions | PreviewOptions | - | 预览渲染配置，类型继承自 `RenderMarkdownProps` |
 
 ### MarkdownEditorRef
 
@@ -37,9 +38,67 @@ export default function App() {
 |--------|----------|------|
 | getContent | () => string | 获取当前编辑器内容 |
 
-## 自定义容器
+### PreviewOptions
 
-通过 `useRegisterToolbar` hook 注册自定义容器组件，支持单个或批量注册：
+预览渲染配置，类型继承自 `RenderMarkdownProps`（来自 `remons-render-markdown`），并扩展了 `languages` 字段：
+
+```typescript
+import type { RenderMarkdownProps } from 'remons-render-markdown'
+
+export type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
+  languages?: Record<string, any> | null | undefined
+}
+```
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| languages | Record<string, any> | - | 自定义代码高亮语言配置 |
+| customRenderers | MarkdownPlugin[] | - | 自定义 markdown-it 渲染插件 |
+| excludedSelectors | string[] | - | 图片预览排除名单 |
+| isSlotMermaid | boolean | - | 是否使用 slot 方式渲染 mermaid |
+| isShowCollapsed | boolean | - | 是否显示代码折叠 |
+| defaultCollapsed | boolean | - | 默认识否折叠代码 |
+| showBackTop | boolean | - | 是否显示返回顶部 |
+| isPrintPreview | boolean | - | 是否为打印模式 |
+| mermaidDebounce | number | - | Mermaid 渲染防抖延迟（ms） |
+| cdn | Record<string, string> | - | 自定义 CDN 配置 |
+| chartConfig | (text: string) => string | - | 渲染前文本修改函数 |
+
+更多配置请参考 [remons-render-markdown](https://github.com/liRemons/render-markdown)。
+
+## 使用示例
+
+### 自定义预览配置
+
+```tsx
+import { MarkdownEditor } from 'remons-markdown-editor'
+import type { PreviewOptions } from 'remons-markdown-editor'
+import { languagesCommon } from 'remons-render-markdown'
+import 'remons-markdown-editor/style.css'
+
+function App() {
+  const previewOptions: PreviewOptions = {
+    // 自定义高亮语言（在 languagesCommon 基础上扩展）
+    languages: {
+      ...languagesCommon,
+      // 添加自定义语言配置
+    },
+    // 自定义 markdown-it 插件，可使用 remons-markdown-plugins 按需导入
+    // 参考 https://github.com/liRemons/markdown-plugin
+    customRenderers: [
+      (md) => md.use(yourCustomPlugin)
+    ],
+    // 禁用 mermaid slot 渲染
+    isSlotMermaid: false,
+    // 自定义排除选择器
+    excludedSelectors: ['.my-custom-class'],
+  }
+
+  return <MarkdownEditor previewOptions={previewOptions} />
+}
+```
+
+### 自定义容器
 
 ```tsx
 import { MarkdownEditor, useRegisterToolbar } from 'remons-markdown-editor'
@@ -61,7 +120,6 @@ const schema = {
 }
 
 export default function App() {
-  // 单个注册
   useRegisterToolbar(schema)
   return <MarkdownEditor />
 }