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

package/dist/types/index.d.ts

@@ -0,0 +1,148 @@
+import { EditorView } from '@codemirror/view';
+import { EditorState as CMEditorState } from '@codemirror/state';
+import { FormInstance } from 'antd';
+import { default as React } from 'react';
+export interface ToolbarButtonConfig {
+    id?: string;
+    icon?: React.ComponentType | React.ReactNode;
+    label?: string;
+    children?: ToolbarButtonConfig[];
+    handler?: (view: EditorView, state: CMEditorState) => void;
+    separatorBefore?: boolean;
+    customRender?: () => React.ReactNode;
+    wrapTags?: [string, string];
+    disabled?: boolean;
+}
+/**
+ * 内置表单组件类型映射
+ * 用于 fields 驱动的自动表单渲染，无需手写 Form 结构
+ */
+export type FormComponentType = 'input' | 'textarea' | 'number' | 'select' | 'switch' | 'slider' | 'rate' | 'color' | 'date' | 'dateRange';
+/**
+ * 弹窗属性配置
+ * 支持简单模式（key + defaultValue）和完整模式（带 componentType 自动渲染）
+ */
+export interface DialogField {
+    /** 字段键名，用于 Markdown 属性填充 */
+    key: string;
+    /** 字段显示名称（表单 label） */
+    name?: string;
+    /** 默认值 */
+    defaultValue?: string;
+    /**
+     * 表单组件类型（可选）
+     * 配置后 EditDialog 会自动渲染对应的 antd 表单组件，无需手写 Form 结构
+     * 如需完全自定义，可省略此项并提供 renderDialog
+     */
+    componentType?: FormComponentType;
+    /**
+     * 组件额外属性（可选）
+     * 传递对应 antd 组件的 props
+     */
+    componentProps?: Record<string, any>;
+}
+/**
+ * 组件 Schema
+ * 每个容器组件（如 :::linkCard）定义可编辑字段和弹窗渲染逻辑
+ * 也支持简单的标签包裹模式（通过 wrapTags）
+ */
+export interface ComponentSchema {
+    /** 容器名称，对应 :::name 语法 */
+    name: string;
+    /** 工具栏按钮显示的标签 */
+    label: string;
+    /** 工具栏按钮显示的图标 */
+    icon?: React.ReactNode;
+    /**
+     * 标签包裹配置：设置为 [openTag, closeTag] 时，使用标签包裹模式（而非 :::name 容器）
+     * 配置后无需提供 fields 和 renderDialog
+     */
+    wrapTags?: [string, string];
+    /** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段（wrapTags 模式下可选） */
+    fields?: DialogField[];
+    /**
+     * 弹窗内容渲染函数（wrapTags 模式下可选）
+     * 接收当前属性值、表单实例和回调函数，由用户完全自定义弹窗内容的渲染
+     *
+     * 如果省略 renderDialog 并为 fields 配置了 componentType，
+     * 弹窗会自动生成表单，无需手写 Form 结构。
+     * 支持的 componentType：'input' | 'textarea' | 'number' | 'select' | 'switch' | 'slider' | 'rate' | 'color' | 'date' | 'dateRange'
+     * 示例：
+     * ```tsx
+     * fields: [
+     *   { key: 'type', name: '类型', componentType: 'select',
+     *     componentProps: { options: [{ value: 'price', label: '价格' }, { value: 'info', label: '信息' }] } },
+     *   { key: 'content', name: '内容', componentType: 'textarea',
+     *     componentProps: { rows: 3 } },
+     *   { key: 'enabled', name: '启用', componentType: 'switch' },
+     * ],
+     * ```
+     *
+     * @example 使用 Form.Item 自动绑定（推荐）
+     * ```tsx
+     * renderDialog: ({ form }) => (
+     *   <Form form={form} layout="vertical">
+     *     <Form.Item name="type" label="类型">
+     *       <Input />
+     *     </Form.Item>
+     *   </Form>
+     * )
+     * ```
+     *
+     * @example 手动控制
+     * ```tsx
+     * renderDialog: ({ props, onChange }) => (
+     *   <Input value={props.content} onChange={e => onChange('content', e.target.value)} />
+     * )
+     * ```
+     *
+     * @example 完全自定义弹窗
+     * ```tsx
+     * renderDialog: ({ props, onSave }) => (
+     *   <MyCustomEditor value={props.content} onSave={({ content }) => onSave({ content })} />
+     * )
+     * ```
+     */
+    renderDialog?: (context: DialogRenderContext) => React.ReactNode;
+}
+/**
+ * 弹窗渲染上下文
+ * 提供多种表单控制方式，用户可根据需求选择：
+ * - `form` + `Form.Item`：推荐方式，自动管理状态
+ * - `props` + `onChange`：手动控制，适用于自定义组件
+ * - `onSave`：完全自定义弹窗，直接调用保存
+ */
+export interface DialogRenderContext {
+    /** 当前属性值（合并默认值与当前的值） */
+    props: Record<string, string>;
+    /** 表单实例，用于 Form.Item 自动绑定 */
+    form: FormInstance;
+    /** 属性变更回调（手动控制方式） */
+    onChange: (key: string, value: string) => void;
+    /** 直接保存属性（完全自定义方式，调用后弹窗不会自动关闭） */
+    onSave: (props: Record<string, string>) => void;
+}
+/**
+ * 图片上传配置
+ */
+export interface ImageUploadConfig {
+    /**
+     * 图片上传接口地址
+     * 需与 onUploadImage 二选一（优先级低于 onUploadImage）
+     */
+    uploadUrl?: string;
+    /**
+     * 自定义上传函数（优先级高于 uploadUrl）
+     * 传入此函数时，将完全接管上传逻辑
+     * @param file 要上传的图片文件
+     * @returns Promise<string> - 返回图片 URL，失败返回 null
+     */
+    onUploadImage?: (file: File) => Promise<string | null>;
+    /**
+     * 处理服务器返回结果的回调，允许转换 URL
+     * 当使用 uploadUrl 方式上传时，可以使用此回调来自定义处理响应数据
+     * @param result 服务器返回的原始响应数据
+     * @returns 图片 URL，如果返回 null 则上传失败
+     */
+    onGetUploadUrl?: (result: any) => string | null;
+}

package/dist/utils/parseContainer.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 解析容器属性 JSON 字符串。
+ * 支持标准 JSON 和宽松格式: { key: 'value', key2: 'value2' }
+ */
+export declare function parseContainerProps(jsonStr: string): Record<string, string>;
+/**
+ * 在编辑器文档中查找容器块。
+ * 返回包含类型、属性和行位置的容器位置数组。
+ */
+export interface ContainerBlock {
+    startPos: number;
+    typeName: string;
+    propsLineFrom: number;
+    propsLineTo: number;
+    props: Record<string, string>;
+    endPos: number;
+}
+export declare function findContainers(docText: string): ContainerBlock[];

package/dist/utils/writeContainer.d.ts

@@ -0,0 +1,16 @@
+import { EditorView } from '@codemirror/view';
+/**
+ * 从属性对象生成 JSON 属性行。
+ * 格式: { key: 'value', key2: 'value2' }
+ */
+export declare function writeContainerProps(props: Record<string, string>): string;
+/**
+ * 更新编辑器文档中的容器属性。
+ * 替换 JSON 属性行（::: 打开行之后的一行）为新属性。
+ */
+export declare function updateContainerProps(view: EditorView, propsLineFrom: number, propsLineTo: number, newProps: Record<string, string>): void;
+/**
+ * 在当前光标位置插入新容器。
+ * 创建 :::type 打开行 + JSON 属性 + ::: 关闭行的结构。
+ */
+export declare function insertContainer(view: EditorView, typeName: string, defaultProps: Record<string, string>): void;

package/package.json

@@ -1,81 +1,77 @@
-{
-  "name": "remons-markdown-editor",
-  "version": "1.0.0-beta.2",
-  "type": "module",
-  "description": "一个可复用的 React Markdown 编辑器组件，支持工具栏、预览和自定义容器",
-  "main": "dist/index.cjs",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "style": "dist/index.css",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/remons/markdown-editor"
-  },
-  "homepage": "https://github.com/remons/markdown-editor#readme",
-  "sideEffects": [
-    "*.css"
-  ],
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./style.css": "./dist/index.css"
-  },
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc -b && vite build",
-    "build:lib": "tsup",
-    "lint": "oxlint",
-    "preview": "vite preview"
-  },
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "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",
-    "@codemirror/theme-one-dark": "^6.1.2",
-    "@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",
-    "less": "^4.9.1",
-    "markdown-it": "^14.1.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "remons-markdown-plugins": "^1.0.0-beta.3",
-    "remons-render-markdown": "^2.0.1-beta.1"
-  },
-  "devDependencies": {
-    "@types/markdown-it": "^14.1.2",
-    "@types/node": "^24.13.3",
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4",
-    "@vitejs/plugin-react": "^6.1.0",
-    "oxlint": "^1.79.0",
-    "tsup": "^8.5.1",
-    "typescript": "~6.0.2",
-    "vite": "^8.2.2"
-  },
-  "license": "MIT"
-}
+{
+  "name": "remons-markdown-editor",
+  "version": "1.0.0-beta.21",
+  "type": "module",
+  "description": "一个可复用的 React Markdown 编辑器组件，支持工具栏、预览和自定义容器",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "style": "dist/index.css",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/liRemons/markdown-editor"
+  },
+  "homepage": "https://github.com/liRemons/markdown-editor#readme",
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build --mode lib",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "publishConfig": {
+    "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",
+    "@codemirror/theme-one-dark": "^6.1.2",
+    "@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-beta.13",
+    "remons-render-markdown": "^1.0.28-beta.11"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.13.3",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@vitejs/plugin-react": "^6.1.0",
+    "less": "^4.9.1",
+    "oxlint": "^1.79.0",
+    "typescript": "~6.0.2",
+    "vite": "^8.2.2",
+    "vite-plugin-dts": "^5.1.0"
+  },
+  "license": "MIT"
+}