remons-markdown-editor 1.0.0 → 2.0.0-beta.0

package/dist/registry/componentRegistry.d.ts

@@ -2,13 +2,30 @@ import { ComponentSchema } from '../types';
 /**
  * 组件注册中心，用于管理自定义组件的 schema。
  * 每个容器组件（如 :::linkCard）在此注册其可编辑字段。
+ * 内置版本计数 + 订阅：注册/移除后通知监听方（如编辑器工具栏）刷新。
  */
+type Listener = (version: number) => void;
 declare class ComponentRegistry {
     private schemas;
+    private listeners;
+    private version;
     /**
      * 注册组件 schema
      */
     register(name: string, schema: ComponentSchema): void;
+    /**
+     * 移除组件注册
+     */
+    unregister(name: string): void;
+    /**
+     * 当前版本号，任意注册变更都会自增
+     */
+    getVersion(): number;
+    /**
+     * 订阅注册变更，返回退订函数
+     */
+    subscribe(listener: Listener): () => void;
+    private emit;
     /**
      * 根据组件名获取已注册的 schema
      */
@@ -25,10 +42,6 @@ declare class ComponentRegistry {
      * 获取所有已注册的 schema
      */
     getAll(): ComponentSchema[];
-    /**
-     * 移除组件注册
-     */
-    unregister(name: string): void;
 }
 declare const componentRegistry: ComponentRegistry;
 export default componentRegistry;

package/dist/types/index.d.ts

@@ -1,10 +1,12 @@
 import { EditorView } from '@codemirror/view';
 import { EditorState as CMEditorState } from '@codemirror/state';
-import { FormInstance } from 'antd';
+import { FormInstance, FormItemProps } from 'antd';
 import { default as React } from 'react';
+import { ContainerProps } from '../utils/parseContainer';
 export interface ToolbarButtonConfig {
     id?: string;
-    icon?: React.ComponentType | React.ReactNode;
+    /** 图标统一为组件类型，由渲染层 <Icon /> 实例化 */
+    icon?: React.ComponentType;
     label?: string;
     children?: ToolbarButtonConfig[];
     handler?: (view: EditorView, state: CMEditorState) => void;
@@ -28,7 +30,7 @@ export interface DialogField {
     /** 字段显示名称（表单 label） */
     name?: string;
     /** 默认值 */
-    defaultValue?: string;
+    defaultValue?: string | number | boolean;
     /**
      * 表单组件类型（可选）
      * 配置后 EditDialog 会自动渲染对应的 antd 表单组件，无需手写 Form 结构
@@ -36,10 +38,15 @@ export interface DialogField {
      */
     componentType?: FormComponentType;
     /**
-     * 组件额外属性（可选）
-     * 传递对应 antd 组件的 props
+     * 控件组件额外属性（可选），仅传给表单控件本身
+     * 如 Select 的 options、Input.TextArea 的 rows
      */
     componentProps?: Record<string, any>;
+    /**
+     * Form.Item 额外属性（可选），仅传给 Form.Item
+     * 如 rules、required 等，不会污染控件 DOM
+     */
+    formItemProps?: FormItemProps;
 }
 /**
  * 组件 Schema
@@ -51,8 +58,8 @@ export interface ComponentSchema {
     name: string;
     /** 工具栏按钮显示的标签 */
     label: string;
-    /** 工具栏按钮显示的图标 */
-    icon?: React.ReactNode;
+    /** 工具栏按钮显示的图标（组件类型，与 ToolbarButtonConfig.icon 一致） */
+    icon?: React.ComponentType;
     /**
      * 标签包裹配置：设置为 [openTag, closeTag] 时，使用标签包裹模式（而非 :::name 容器）
      * 配置后无需提供 fields 和 renderDialog
@@ -114,14 +121,16 @@ export interface ComponentSchema {
  */
 export interface DialogRenderContext {
     /** 当前属性值（合并默认值与当前的值） */
-    props: Record<string, string>;
+    props: ContainerProps;
     /** 表单实例，用于 Form.Item 自动绑定 */
     form: FormInstance;
     /** 属性变更回调（手动控制方式） */
-    onChange: (key: string, value: string) => void;
+    onChange: (key: string, value: string | number | boolean) => void;
     /** 直接保存属性（完全自定义方式，调用后弹窗不会自动关闭） */
-    onSave: (props: Record<string, string>) => void;
+    onSave: (props: ContainerProps) => void;
 }
+/** 全局消息提示注入点（如 antd message.error），缺省用 console，宿主可接管 */
+export type NotifyFn = (type: 'info' | 'warning' | 'error', content: string) => void;
 /**
  * 图片上传配置
  */

package/dist/utils/parseContainer.d.ts

@@ -1,18 +1,32 @@
+/** 容器属性对象：值保留原始类型（string/number/boolean），写回时统一序列化 */
+export type ContainerProps = Record<string, string | number | boolean>;
 /**
- * 解析容器属性 JSON 字符串。
- * 支持标准 JSON 和宽松格式: { key: 'value', key2: 'value2' }
+ * 解析容器属性行。
+ * 优先按 JSON5 解析（兼容标准 JSON 与 { key: 'value' } 宽松写法），
+ * 失败时返回空对象，保证往返编辑不丢数据。
  */
-export declare function parseContainerProps(jsonStr: string): Record<string, string>;
+export declare function parseContainerProps(line: string): ContainerProps;
 /**
- * 在编辑器文档中查找容器块。
- * 返回包含类型、属性和行位置的容器位置数组。
+ * 容器块位置信息（基于文档的绝对字符偏移）
  */
 export interface ContainerBlock {
+    /** ::: 打开行行首位置 */
     startPos: number;
+    /** 组件类型名称 (如 "linkCard") */
     typeName: string;
+    /** 属性行起始位置（0 表示无属性行） */
     propsLineFrom: number;
+    /** 属性行结束位置（0 表示无属性行） */
     propsLineTo: number;
-    props: Record<string, string>;
+    /** 解析出的属性 */
+    props: ContainerProps;
+    /** ::: 关闭行行首位置（0 表示未闭合） */
     endPos: number;
+    /** 类型是否已在注册中心登记（未登记的仅装饰、不可编辑） */
+    registered: boolean;
 }
+/**
+ * 在编辑器文档中查找容器块。
+ * 单次遍历 + 预累计行偏移，复杂度 O(行数)。
+ */
 export declare function findContainers(docText: string): ContainerBlock[];

package/dist/utils/writeContainer.d.ts

@@ -1,16 +1,19 @@
 import { EditorView } from '@codemirror/view';
+import { ContainerProps } from './parseContainer';
 /**
- * 从属性对象生成 JSON 属性行。
- * 格式: { key: 'value', key2: 'value2' }
+ * 从属性对象生成属性行。
+ * 使用 JSON5 序列化：单引号风格与旧格式兼容，特殊字符会被正确转义，
+ * 配合 parseContainerProps 保证读写往返无损。
  */
-export declare function writeContainerProps(props: Record<string, string>): string;
+export declare function writeContainerProps(props: ContainerProps): string;
 /**
  * 更新编辑器文档中的容器属性。
- * 替换 JSON 属性行（::: 打开行之后的一行）为新属性。
+ * 已有属性行则整行替换；没有属性行则在容器头行后插入一行。
+ * @param headerPos 容器头行（:::type）任意位置，用于无属性行时定位插入点
  */
-export declare function updateContainerProps(view: EditorView, propsLineFrom: number, propsLineTo: number, newProps: Record<string, string>): void;
+export declare function updateContainerProps(view: EditorView, headerPos: number, propsLineFrom: number, propsLineTo: number, newProps: ContainerProps): void;
 /**
  * 在当前光标位置插入新容器。
- * 创建 :::type 打开行 + JSON 属性 + ::: 关闭行的结构。
+ * 创建 :::type 打开行 + 属性行 + ::: 关闭行的结构。
  */
-export declare function insertContainer(view: EditorView, typeName: string, defaultProps: Record<string, string>): void;
+export declare function insertContainer(view: EditorView, typeName: string, defaultProps: ContainerProps): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remons-markdown-editor",
-  "version": "1.0.0",
+  "version": "2.0.0-beta.0",
   "type": "module",
   "description": "一个可复用的 React Markdown 编辑器组件，支持工具栏、预览和自定义容器",
   "main": "dist/index.cjs",
@@ -13,21 +13,17 @@
   },
   "homepage": "https://github.com/liRemons/markdown-editor#readme",
   "sideEffects": [
-    "*.css"
+    "*.css",
+    "*.less"
   ],
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
     },
     "./style.css": "./dist/index.css"
   },
@@ -42,9 +38,7 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@ant-design/icons": "^6.3.4",
     "@codemirror/commands": "^6.11.0",
-    "@codemirror/highlight": "^0.19.8",
     "@codemirror/lang-markdown": "^6.3.2",
     "@codemirror/language": "^6.12.4",
     "@codemirror/state": "^6.5.2",
@@ -52,13 +46,16 @@
     "@codemirror/view": "^6.36.4",
     "@lezer/common": "^1.2.3",
     "@lezer/highlight": "^1.2.3",
-    "antd": "^6.6.3",
     "codemirror": "^6.0.1",
     "highlight.js": "^11.12.0",
-    "remons-markdown-plugins": "^1.0.0",
-    "remons-render-markdown": "^1.0.28"
+    "json5": "^2.2.3",
+    "remons-markdown-plugins": "^2.0.0-beta.1",
+    "remons-render-markdown": "^2.0.1-beta.5"
   },
   "peerDependencies": {
+    "antd": ">=5.21.6",
+    "@ant-design/icons": ">=5.0.0",
+    "dayjs": ">=1.11.13",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

package/readme.md

@@ -10,9 +10,10 @@ npm install remons-markdown-editor
 
 ## 基本用法
 
+入口已自动携带组件样式，无需手动导入 CSS；若使用打包器的 sideEffects 裁剪，也可显式引入 `remons-markdown-editor/style.css`。
+
 ```tsx
 import { MarkdownEditor } from 'remons-markdown-editor'
-import 'remons-markdown-editor/style.css'
 
 export default function App() {
   return <MarkdownEditor />
@@ -25,13 +26,18 @@ export default function App() {
 
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| value | string | - | 受控模式下的内容 |
+| value | string | - | 受控模式下的内容（需配合 onChange 使用） |
 | defaultValue | string | '' | 非受控模式下的初始内容 |
 | onChange | (value: string) => void | - | 内容变更回调 |
 | showPreview | boolean | true | 是否显示预览面板 |
 | fullscreen | boolean | true | 是否显示全屏按钮 |
 | previewOptions | PreviewOptions | - | 预览渲染配置，类型继承自 `RenderMarkdownProps` |
+| languages | Record<string, any> \| null | - | 代码高亮语言包（与内置 languagesCommon 合并注册） |
 | uploadConfig | ImageUploadConfig | - | 图片上传配置 |
+| schemas | ComponentSchema[] | - | 局部注册的容器 schema，仅对当前实例生效，同名时覆盖全局注册 |
+| onNotify | (type, content) => void | - | 提示注入点，缺省使用 antd App 上下文的 message |
+
+> 同页面存在多个编辑器实例时，推荐用 `schemas` 局部注册代替 `useRegisterToolbar`，避免全局注册表互相覆盖。
 
 ### MarkdownEditorRef
 
@@ -41,29 +47,32 @@ export default function App() {
 
 ### PreviewOptions
 
-预览渲染配置，类型继承自 `RenderMarkdownProps`（来自 `remons-render-markdown`），并扩展了 `languages` 字段：
+预览渲染配置，类型即 `Omit<RenderMarkdownProps, 'content'>`（来自 `remons-render-markdown` v2）：
 
 ```typescript
 import type { RenderMarkdownProps } from 'remons-render-markdown'
 
-export type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
-  languages?: Record<string, any> | null | undefined
-}
+export type PreviewOptions = Omit<RenderMarkdownProps, 'content'>
 ```
 
+常用字段（v2 重命名后的新名，旧名仍可用但已废弃）：
+
 | 属性名 | 类型 | 默认值 | 说明 |
 |--------|------|--------|------|
-| languages | Record<string, any> | - | 自定义代码高亮语言配置 |
 | customRenderers | MarkdownPlugin[] | - | 自定义 markdown-it 渲染插件 |
-| excludedSelectors | string[] | - | 图片预览排除名单 |
-| isSlotMermaid | boolean | - | 是否使用 slot 方式渲染 mermaid |
-| isShowCollapsed | boolean | - | 是否显示代码折叠 |
-| defaultCollapsed | boolean | - | 默认识否折叠代码 |
+| excludedSelectors | string[] | - | 图片预览排除名单（实例级） |
+| enableMermaid | boolean | - | 是否将 mermaid 代码块渲染为图表（旧名 isSlotMermaid） |
+| showCollapseButton | boolean | - | 是否显示代码折叠按钮（旧名 isShowCollapsed） |
+| defaultCollapsed | boolean | - | 代码块默认是否折叠 |
 | showBackTop | boolean | - | 是否显示返回顶部 |
+| showToc | boolean | - | 是否显示目录（TOC） |
+| incremental | boolean | - | 是否启用增量渲染（旧名 useIncremental） |
 | isPrintPreview | boolean | - | 是否为打印模式 |
-| mermaidDebounce | number | - | Mermaid 渲染防抖延迟（ms） |
+| toolbarDebounceMs | number | - | 工具栏/mermaid 扫描防抖延迟（旧名 mermaidDebounce） |
 | cdn | Record<string, string> | - | 自定义 CDN 配置 |
-| chartConfig | (text: string) => string | - | 渲染前文本修改函数 |
+| transformSource | (text: string) => string | - | 渲染前改写 mermaid 源码（旧名 chartConfig） |
+| html | boolean | true | 是否渲染源码中的原生 HTML |
+| validateLink | (url: string) => boolean | - | 覆盖链接校验 |
 
 更多配置请参考 [remons-render-markdown](https://github.com/liRemons/render-markdown)。
 
@@ -85,27 +94,22 @@ export type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
 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,
+    // 禁用 mermaid 图表渲染
+    enableMermaid: false,
     // 自定义排除选择器
     excludedSelectors: ['.my-custom-class'],
   }
 
-  return <MarkdownEditor previewOptions={previewOptions} />
+  // 高亮语言包通过独立的 languages prop 传入（在 languagesCommon 基础上扩展）
+  return <MarkdownEditor previewOptions={previewOptions} languages={{ ...languagesCommon }} />
 }
 ```
 

package/dist/App.d.ts

@@ -1,2 +0,0 @@
-declare function App(): import('react').JSX.Element;
-export default App;