remons-markdown-editor 1.0.0-beta.2 → 1.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +386 -377
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +0 -220
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +84 -25
- package/dist/index.d.ts +84 -25
- package/dist/index.js +381 -373
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/readme.md +164 -7
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/Toolbar/renderers/TablePicker/index.module.less"
|
|
1
|
+
{"version":3,"sources":["../src/components/Toolbar/renderers/TablePicker/index.module.less"],"sourcesContent":[".container {\n padding: 4px;\n display: block;\n min-width: 200px;\n background: #fff;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.grid {\n display: grid;\n gap: 2px;\n transition: all 0.1s ease;\n justify-content: flex-start;\n}\n.grid .cell {\n width: 24px;\n height: 24px;\n border: 1px solid #e8e8e8;\n border-radius: 2px;\n background: transparent;\n cursor: pointer;\n transition: all 0.1s ease;\n}\n.grid .cell.cellActive {\n border-color: #91caff;\n background: #ddf4ff;\n}\n.hint {\n padding: 12px 16px;\n color: #999;\n font-size: 12px;\n text-align: center;\n cursor: pointer;\n}\n.label {\n margin-top: 8px;\n font-size: 13px;\n color: #666;\n font-weight: 500;\n min-height: 20px;\n text-align: center;\n}\n"],"mappings":";AAAA,CAAC;AACC,WAAS;AACT,WAAS;AACT,aAAW;AACX,cAAY;AACZ,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,cAAY,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACvC;AACA,CAAC;AACC,WAAS;AACT,OAAK;AACL,cAAY,IAAI,KAAK;AACrB,mBAAiB;AACnB;AACA,CANC,KAMK,CAAC;AACL,SAAO;AACP,UAAQ;AACR,UAAQ,IAAI,MAAM;AAClB,iBAAe;AACf,cAAY;AACZ,UAAQ;AACR,cAAY,IAAI,KAAK;AACvB;AACA,CAfC,KAeK,CATC,IASI,CAAC;AACV,gBAAc;AACd,cAAY;AACd;AACA,CAAC;AACC,WAAS,KAAK;AACd,SAAO;AACP,aAAW;AACX,cAAY;AACZ,UAAQ;AACV;AACA,CAAC;AACC,cAAY;AACZ,aAAW;AACX,SAAO;AACP,eAAa;AACb,cAAY;AACZ,cAAY;AACd;","names":[]}
|
package/dist/index.d.cts
CHANGED
|
@@ -2,23 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { EditorView } from '@codemirror/view';
|
|
4
4
|
import { EditorState } from '@codemirror/state';
|
|
5
|
-
|
|
6
|
-
interface MarkdownEditorRef {
|
|
7
|
-
getContent: () => string;
|
|
8
|
-
}
|
|
9
|
-
interface MarkdownEditorProps {
|
|
10
|
-
/** 初始内容 */
|
|
11
|
-
defaultValue?: string;
|
|
12
|
-
/** 受控内容 */
|
|
13
|
-
value?: string;
|
|
14
|
-
/** 内容变化回调 */
|
|
15
|
-
onChange?: (value: string) => void;
|
|
16
|
-
/** 是否显示预览面板 */
|
|
17
|
-
showPreview?: boolean;
|
|
18
|
-
/** 是否支持全屏 */
|
|
19
|
-
fullscreen?: boolean;
|
|
20
|
-
}
|
|
21
|
-
declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
|
|
5
|
+
import { RenderMarkdownProps } from 'remons-render-markdown';
|
|
22
6
|
|
|
23
7
|
interface ToolbarButtonConfig {
|
|
24
8
|
id?: string;
|
|
@@ -28,6 +12,8 @@ interface ToolbarButtonConfig {
|
|
|
28
12
|
handler?: (view: EditorView, state: EditorState) => void;
|
|
29
13
|
separatorBefore?: boolean;
|
|
30
14
|
customRender?: () => React__default.ReactNode;
|
|
15
|
+
wrapTags?: [string, string];
|
|
16
|
+
disabled?: boolean;
|
|
31
17
|
}
|
|
32
18
|
/**
|
|
33
19
|
* 弹窗属性配置
|
|
@@ -42,6 +28,7 @@ interface DialogField {
|
|
|
42
28
|
/**
|
|
43
29
|
* 组件 Schema
|
|
44
30
|
* 每个容器组件（如 :::linkCard）定义可编辑字段和弹窗渲染逻辑
|
|
31
|
+
* 也支持简单的标签包裹模式（通过 wrapTags）
|
|
45
32
|
*/
|
|
46
33
|
interface ComponentSchema {
|
|
47
34
|
/** 容器名称，对应 :::name 语法 */
|
|
@@ -50,24 +37,83 @@ interface ComponentSchema {
|
|
|
50
37
|
label: string;
|
|
51
38
|
/** 工具栏按钮显示的图标 */
|
|
52
39
|
icon?: React__default.ReactNode;
|
|
53
|
-
/** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段 */
|
|
54
|
-
fields: DialogField[];
|
|
55
40
|
/**
|
|
56
|
-
*
|
|
41
|
+
* 标签包裹配置：设置为 [openTag, closeTag] 时，使用标签包裹模式（而非 :::name 容器）
|
|
42
|
+
* 配置后无需提供 fields 和 renderDialog
|
|
43
|
+
*/
|
|
44
|
+
wrapTags?: [string, string];
|
|
45
|
+
/** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段（wrapTags 模式下可选） */
|
|
46
|
+
fields?: DialogField[];
|
|
47
|
+
/**
|
|
48
|
+
* 弹窗内容渲染函数（wrapTags 模式下可选）
|
|
57
49
|
* 接收当前属性值和回调函数，由用户完全自定义弹窗内容的渲染
|
|
58
50
|
* @param props 当前属性值，用于回显
|
|
59
51
|
* @param onChange 属性变更回调，用于更新表单值
|
|
60
52
|
* @returns 弹窗内容的 ReactNode
|
|
61
53
|
*/
|
|
62
|
-
renderDialog
|
|
54
|
+
renderDialog?: (props: Record<string, string>, onChange: (key: string, value: string) => void) => React__default.ReactNode;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* 图片上传配置
|
|
58
|
+
*/
|
|
59
|
+
interface ImageUploadConfig {
|
|
60
|
+
/**
|
|
61
|
+
* 图片上传接口地址
|
|
62
|
+
* 需与 onUploadImage 二选一（优先级低于 onUploadImage）
|
|
63
|
+
*/
|
|
64
|
+
uploadUrl?: string;
|
|
65
|
+
/**
|
|
66
|
+
* 自定义上传函数（优先级高于 uploadUrl）
|
|
67
|
+
* 传入此函数时，将完全接管上传逻辑
|
|
68
|
+
* @param file 要上传的图片文件
|
|
69
|
+
* @returns Promise<string> - 返回图片 URL，失败返回 null
|
|
70
|
+
*/
|
|
71
|
+
onUploadImage?: (file: File) => Promise<string | null>;
|
|
72
|
+
/**
|
|
73
|
+
* 处理服务器返回结果的回调，允许转换 URL
|
|
74
|
+
* 当使用 uploadUrl 方式上传时，可以使用此回调来自定义处理响应数据
|
|
75
|
+
* @param result 服务器返回的原始响应数据
|
|
76
|
+
* @returns 图片 URL，如果返回 null 则上传失败
|
|
77
|
+
*/
|
|
78
|
+
onGetUploadUrl?: (result: any) => string | null;
|
|
63
79
|
}
|
|
64
80
|
|
|
81
|
+
type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
|
|
82
|
+
languages?: Record<string, any> | null | undefined;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
interface MarkdownEditorRef {
|
|
86
|
+
getContent: () => string;
|
|
87
|
+
}
|
|
88
|
+
interface MarkdownEditorProps {
|
|
89
|
+
/** 初始内容 */
|
|
90
|
+
defaultValue?: string;
|
|
91
|
+
/** 受控内容 */
|
|
92
|
+
value?: string;
|
|
93
|
+
/** 内容变化回调 */
|
|
94
|
+
onChange?: (value: string) => void;
|
|
95
|
+
/** 是否显示预览面板 */
|
|
96
|
+
showPreview?: boolean;
|
|
97
|
+
/** 是否支持全屏 */
|
|
98
|
+
fullscreen?: boolean;
|
|
99
|
+
/** Preview 渲染配置 */
|
|
100
|
+
previewOptions?: PreviewOptions;
|
|
101
|
+
/** 图片上传配置 */
|
|
102
|
+
uploadConfig?: ImageUploadConfig;
|
|
103
|
+
}
|
|
104
|
+
declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
|
|
105
|
+
|
|
65
106
|
/**
|
|
66
107
|
* 注册自定义容器组件到工具栏。支持单个或批量注册。
|
|
67
|
-
*
|
|
68
|
-
*
|
|
108
|
+
* 支持两种模式：
|
|
109
|
+
*
|
|
110
|
+
* 1. 容器模式（linkCard）：name + fields + renderDialog
|
|
111
|
+
* 插入 :::name 格式的容器，支持弹窗编辑属性
|
|
112
|
+
*
|
|
113
|
+
* 2. 标签包裹模式：name + wrapTags
|
|
114
|
+
* 插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
|
|
69
115
|
*
|
|
70
|
-
* @example
|
|
116
|
+
* @example 容器模式
|
|
71
117
|
* ```tsx
|
|
72
118
|
* const schema: ComponentSchema = {
|
|
73
119
|
* name: 'alert',
|
|
@@ -85,6 +131,19 @@ interface ComponentSchema {
|
|
|
85
131
|
* }
|
|
86
132
|
* ```
|
|
87
133
|
*
|
|
134
|
+
* @example 标签包裹模式
|
|
135
|
+
* ```tsx
|
|
136
|
+
* function MyPage() {
|
|
137
|
+
* useRegisterToolbar({
|
|
138
|
+
* name: 'plugin-container',
|
|
139
|
+
* label: '自定义容器',
|
|
140
|
+
* icon: <AlertOutlined />,
|
|
141
|
+
* wrapTags: ['<plugin-container>', '</plugin-container>'],
|
|
142
|
+
* })
|
|
143
|
+
* return <MarkdownEditor />
|
|
144
|
+
* }
|
|
145
|
+
* ```
|
|
146
|
+
*
|
|
88
147
|
* @example 批量注册
|
|
89
148
|
* ```tsx
|
|
90
149
|
* function MyPage() {
|
|
@@ -95,4 +154,4 @@ interface ComponentSchema {
|
|
|
95
154
|
*/
|
|
96
155
|
declare function useRegisterToolbar(schemas: ComponentSchema | ComponentSchema[]): void;
|
|
97
156
|
|
|
98
|
-
export { type ComponentSchema, type DialogField, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, type ToolbarButtonConfig, useRegisterToolbar };
|
|
157
|
+
export { type ComponentSchema, type DialogField, type ImageUploadConfig, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, type PreviewOptions, type ToolbarButtonConfig, useRegisterToolbar };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,23 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import React__default from 'react';
|
|
3
3
|
import { EditorView } from '@codemirror/view';
|
|
4
4
|
import { EditorState } from '@codemirror/state';
|
|
5
|
-
|
|
6
|
-
interface MarkdownEditorRef {
|
|
7
|
-
getContent: () => string;
|
|
8
|
-
}
|
|
9
|
-
interface MarkdownEditorProps {
|
|
10
|
-
/** 初始内容 */
|
|
11
|
-
defaultValue?: string;
|
|
12
|
-
/** 受控内容 */
|
|
13
|
-
value?: string;
|
|
14
|
-
/** 内容变化回调 */
|
|
15
|
-
onChange?: (value: string) => void;
|
|
16
|
-
/** 是否显示预览面板 */
|
|
17
|
-
showPreview?: boolean;
|
|
18
|
-
/** 是否支持全屏 */
|
|
19
|
-
fullscreen?: boolean;
|
|
20
|
-
}
|
|
21
|
-
declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
|
|
5
|
+
import { RenderMarkdownProps } from 'remons-render-markdown';
|
|
22
6
|
|
|
23
7
|
interface ToolbarButtonConfig {
|
|
24
8
|
id?: string;
|
|
@@ -28,6 +12,8 @@ interface ToolbarButtonConfig {
|
|
|
28
12
|
handler?: (view: EditorView, state: EditorState) => void;
|
|
29
13
|
separatorBefore?: boolean;
|
|
30
14
|
customRender?: () => React__default.ReactNode;
|
|
15
|
+
wrapTags?: [string, string];
|
|
16
|
+
disabled?: boolean;
|
|
31
17
|
}
|
|
32
18
|
/**
|
|
33
19
|
* 弹窗属性配置
|
|
@@ -42,6 +28,7 @@ interface DialogField {
|
|
|
42
28
|
/**
|
|
43
29
|
* 组件 Schema
|
|
44
30
|
* 每个容器组件（如 :::linkCard）定义可编辑字段和弹窗渲染逻辑
|
|
31
|
+
* 也支持简单的标签包裹模式（通过 wrapTags）
|
|
45
32
|
*/
|
|
46
33
|
interface ComponentSchema {
|
|
47
34
|
/** 容器名称，对应 :::name 语法 */
|
|
@@ -50,24 +37,83 @@ interface ComponentSchema {
|
|
|
50
37
|
label: string;
|
|
51
38
|
/** 工具栏按钮显示的图标 */
|
|
52
39
|
icon?: React__default.ReactNode;
|
|
53
|
-
/** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段 */
|
|
54
|
-
fields: DialogField[];
|
|
55
40
|
/**
|
|
56
|
-
*
|
|
41
|
+
* 标签包裹配置：设置为 [openTag, closeTag] 时，使用标签包裹模式（而非 :::name 容器）
|
|
42
|
+
* 配置后无需提供 fields 和 renderDialog
|
|
43
|
+
*/
|
|
44
|
+
wrapTags?: [string, string];
|
|
45
|
+
/** 弹窗属性配置 — 用于定义 Markdown 内容中需要填充的字段（wrapTags 模式下可选） */
|
|
46
|
+
fields?: DialogField[];
|
|
47
|
+
/**
|
|
48
|
+
* 弹窗内容渲染函数（wrapTags 模式下可选）
|
|
57
49
|
* 接收当前属性值和回调函数，由用户完全自定义弹窗内容的渲染
|
|
58
50
|
* @param props 当前属性值，用于回显
|
|
59
51
|
* @param onChange 属性变更回调，用于更新表单值
|
|
60
52
|
* @returns 弹窗内容的 ReactNode
|
|
61
53
|
*/
|
|
62
|
-
renderDialog
|
|
54
|
+
renderDialog?: (props: Record<string, string>, onChange: (key: string, value: string) => void) => React__default.ReactNode;
|
|
55
|
+
}
|
|
56
|
+
/**
|
|
57
|
+
* 图片上传配置
|
|
58
|
+
*/
|
|
59
|
+
interface ImageUploadConfig {
|
|
60
|
+
/**
|
|
61
|
+
* 图片上传接口地址
|
|
62
|
+
* 需与 onUploadImage 二选一（优先级低于 onUploadImage）
|
|
63
|
+
*/
|
|
64
|
+
uploadUrl?: string;
|
|
65
|
+
/**
|
|
66
|
+
* 自定义上传函数（优先级高于 uploadUrl）
|
|
67
|
+
* 传入此函数时，将完全接管上传逻辑
|
|
68
|
+
* @param file 要上传的图片文件
|
|
69
|
+
* @returns Promise<string> - 返回图片 URL，失败返回 null
|
|
70
|
+
*/
|
|
71
|
+
onUploadImage?: (file: File) => Promise<string | null>;
|
|
72
|
+
/**
|
|
73
|
+
* 处理服务器返回结果的回调，允许转换 URL
|
|
74
|
+
* 当使用 uploadUrl 方式上传时，可以使用此回调来自定义处理响应数据
|
|
75
|
+
* @param result 服务器返回的原始响应数据
|
|
76
|
+
* @returns 图片 URL，如果返回 null 则上传失败
|
|
77
|
+
*/
|
|
78
|
+
onGetUploadUrl?: (result: any) => string | null;
|
|
63
79
|
}
|
|
64
80
|
|
|
81
|
+
type PreviewOptions = Omit<RenderMarkdownProps, 'content'> & {
|
|
82
|
+
languages?: Record<string, any> | null | undefined;
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
interface MarkdownEditorRef {
|
|
86
|
+
getContent: () => string;
|
|
87
|
+
}
|
|
88
|
+
interface MarkdownEditorProps {
|
|
89
|
+
/** 初始内容 */
|
|
90
|
+
defaultValue?: string;
|
|
91
|
+
/** 受控内容 */
|
|
92
|
+
value?: string;
|
|
93
|
+
/** 内容变化回调 */
|
|
94
|
+
onChange?: (value: string) => void;
|
|
95
|
+
/** 是否显示预览面板 */
|
|
96
|
+
showPreview?: boolean;
|
|
97
|
+
/** 是否支持全屏 */
|
|
98
|
+
fullscreen?: boolean;
|
|
99
|
+
/** Preview 渲染配置 */
|
|
100
|
+
previewOptions?: PreviewOptions;
|
|
101
|
+
/** 图片上传配置 */
|
|
102
|
+
uploadConfig?: ImageUploadConfig;
|
|
103
|
+
}
|
|
104
|
+
declare const _default: React.ForwardRefExoticComponent<MarkdownEditorProps & React.RefAttributes<MarkdownEditorRef>>;
|
|
105
|
+
|
|
65
106
|
/**
|
|
66
107
|
* 注册自定义容器组件到工具栏。支持单个或批量注册。
|
|
67
|
-
*
|
|
68
|
-
*
|
|
108
|
+
* 支持两种模式：
|
|
109
|
+
*
|
|
110
|
+
* 1. 容器模式（linkCard）：name + fields + renderDialog
|
|
111
|
+
* 插入 :::name 格式的容器，支持弹窗编辑属性
|
|
112
|
+
*
|
|
113
|
+
* 2. 标签包裹模式：name + wrapTags
|
|
114
|
+
* 插入简单的标签包裹文本，如 <plugin-container>...</plugin-container>
|
|
69
115
|
*
|
|
70
|
-
* @example
|
|
116
|
+
* @example 容器模式
|
|
71
117
|
* ```tsx
|
|
72
118
|
* const schema: ComponentSchema = {
|
|
73
119
|
* name: 'alert',
|
|
@@ -85,6 +131,19 @@ interface ComponentSchema {
|
|
|
85
131
|
* }
|
|
86
132
|
* ```
|
|
87
133
|
*
|
|
134
|
+
* @example 标签包裹模式
|
|
135
|
+
* ```tsx
|
|
136
|
+
* function MyPage() {
|
|
137
|
+
* useRegisterToolbar({
|
|
138
|
+
* name: 'plugin-container',
|
|
139
|
+
* label: '自定义容器',
|
|
140
|
+
* icon: <AlertOutlined />,
|
|
141
|
+
* wrapTags: ['<plugin-container>', '</plugin-container>'],
|
|
142
|
+
* })
|
|
143
|
+
* return <MarkdownEditor />
|
|
144
|
+
* }
|
|
145
|
+
* ```
|
|
146
|
+
*
|
|
88
147
|
* @example 批量注册
|
|
89
148
|
* ```tsx
|
|
90
149
|
* function MyPage() {
|
|
@@ -95,4 +154,4 @@ interface ComponentSchema {
|
|
|
95
154
|
*/
|
|
96
155
|
declare function useRegisterToolbar(schemas: ComponentSchema | ComponentSchema[]): void;
|
|
97
156
|
|
|
98
|
-
export { type ComponentSchema, type DialogField, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, type ToolbarButtonConfig, useRegisterToolbar };
|
|
157
|
+
export { type ComponentSchema, type DialogField, type ImageUploadConfig, _default as MarkdownEditor, type MarkdownEditorProps, type MarkdownEditorRef, type PreviewOptions, type ToolbarButtonConfig, useRegisterToolbar };
|