@haklex/rich-renderers-edit 0.0.32 → 0.0.34
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/README.md +150 -65
- package/package.json +18 -18
package/README.md
CHANGED
|
@@ -1,96 +1,181 @@
|
|
|
1
1
|
# @haklex/rich-renderers-edit
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
编辑态增强聚合包。
|
|
4
|
+
在 `@haklex/rich-renderers` 静态能力上，补齐 edit renderer、edit node、扩展插件与 slash 菜单能力。
|
|
5
|
+
|
|
6
|
+
## 包定位
|
|
7
|
+
|
|
8
|
+
- 产出 `enhancedEditRendererConfig`
|
|
9
|
+
- 导出编辑态扩展节点（`embedEditNodes`、`codeSnippetEditNodes`、`katexEditNodes`、`linkCardEditNodes`）
|
|
10
|
+
- 导出常用插件（`SlashMenuPlugin`、`EmbedPlugin`、`TldrawPlugin`、`PasteLinkCardPlugin`、`BlockHandlePlugin`）
|
|
11
|
+
|
|
12
|
+
如果你想“一键接全套”，可直接用 `@haklex/rich-kit-shiro`。
|
|
4
13
|
|
|
5
14
|
## 安装
|
|
6
15
|
|
|
7
16
|
```bash
|
|
8
|
-
pnpm add @haklex/rich-renderers-edit @haklex/rich-editor
|
|
17
|
+
pnpm add @haklex/rich-renderers-edit @haklex/rich-renderers @haklex/rich-editor
|
|
9
18
|
```
|
|
10
19
|
|
|
11
|
-
##
|
|
20
|
+
## 快速开始（手动装配）
|
|
12
21
|
|
|
13
22
|
```tsx
|
|
14
|
-
import { RichEditor } from '@haklex/rich-editor
|
|
15
|
-
import {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
23
|
+
import { RichEditor } from '@haklex/rich-editor'
|
|
24
|
+
import { galleryEditNodes } from '@haklex/rich-renderers'
|
|
25
|
+
import {
|
|
26
|
+
BlockHandlePlugin,
|
|
27
|
+
codeSnippetEditNodes,
|
|
28
|
+
embedEditNodes,
|
|
29
|
+
enhancedEditRendererConfig,
|
|
30
|
+
katexEditNodes,
|
|
31
|
+
linkCardEditNodes,
|
|
32
|
+
PasteLinkCardPlugin,
|
|
33
|
+
SlashMenuPlugin,
|
|
34
|
+
TldrawEditNode,
|
|
35
|
+
TldrawPlugin,
|
|
36
|
+
EmbedPlugin,
|
|
37
|
+
} from '@haklex/rich-renderers-edit'
|
|
38
|
+
|
|
39
|
+
import '@haklex/rich-editor/style.css'
|
|
40
|
+
import '@haklex/rich-editor-ui/style.css'
|
|
41
|
+
import '@haklex/rich-renderers/style.css'
|
|
42
|
+
import '@haklex/rich-ext-code-snippet/style.css'
|
|
43
|
+
import '@haklex/rich-ext-embed/style.css'
|
|
44
|
+
import '@haklex/rich-plugin-slash-menu/style.css'
|
|
45
|
+
import '@haklex/rich-plugin-block-handle/style.css'
|
|
46
|
+
import 'katex/dist/katex.min.css'
|
|
47
|
+
import 'tldraw/tldraw.css'
|
|
48
|
+
|
|
49
|
+
const extraNodes = [
|
|
50
|
+
TldrawEditNode,
|
|
51
|
+
...embedEditNodes,
|
|
52
|
+
...linkCardEditNodes,
|
|
53
|
+
...katexEditNodes,
|
|
54
|
+
...galleryEditNodes,
|
|
55
|
+
...codeSnippetEditNodes,
|
|
56
|
+
]
|
|
57
|
+
|
|
58
|
+
<RichEditor
|
|
59
|
+
rendererConfig={enhancedEditRendererConfig}
|
|
60
|
+
extraNodes={extraNodes}
|
|
61
|
+
actions={<SlashMenuPlugin />}
|
|
62
|
+
>
|
|
63
|
+
<BlockHandlePlugin />
|
|
64
|
+
<TldrawPlugin />
|
|
65
|
+
<EmbedPlugin />
|
|
66
|
+
<PasteLinkCardPlugin />
|
|
67
|
+
</RichEditor>
|
|
25
68
|
```
|
|
26
69
|
|
|
27
|
-
##
|
|
70
|
+
## `enhancedEditRendererConfig` 说明
|
|
28
71
|
|
|
29
|
-
|
|
72
|
+
`enhancedEditRendererConfig` 基于 `enhancedRendererConfig` 构建，并覆写为编辑态组件：
|
|
30
73
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
| `CodeSnippetEditRenderer` | `@haklex/rich-ext-code-snippet` |
|
|
42
|
-
| `TldrawEditRenderer` | `@haklex/rich-ext-tldraw` |
|
|
74
|
+
- `Alert -> AlertEditRenderer`
|
|
75
|
+
- `Banner -> BannerEditRenderer`
|
|
76
|
+
- `CodeBlock -> CodeBlockEditRenderer`
|
|
77
|
+
- `Footnote -> FootnoteRenderer`
|
|
78
|
+
- `Gallery -> GalleryEditRenderer`
|
|
79
|
+
- `Image -> ImageEditRenderer`
|
|
80
|
+
- `Mention -> MentionEditRenderer`
|
|
81
|
+
- `Mermaid -> MermaidEditRenderer`
|
|
82
|
+
- `Video -> VideoEditRenderer`
|
|
83
|
+
- `CodeSnippet -> CodeSnippetEditRenderer`
|
|
43
84
|
|
|
44
|
-
|
|
85
|
+
注意：它只负责“如何渲染”，不负责“节点是否注册”“插件是否挂载”。
|
|
86
|
+
|
|
87
|
+
## 核心导出
|
|
88
|
+
|
|
89
|
+
### 1) 预置配置
|
|
45
90
|
|
|
46
91
|
```ts
|
|
47
|
-
|
|
48
|
-
export { enhancedEditRendererConfig } from './config'
|
|
49
|
-
|
|
50
|
-
// 编辑渲染器
|
|
51
|
-
export { AlertEditRenderer } from '@haklex/rich-renderer-alert'
|
|
52
|
-
export { BannerEditRenderer } from '@haklex/rich-renderer-banner'
|
|
53
|
-
export { CodeBlockEditRenderer } from '@haklex/rich-renderer-codeblock'
|
|
54
|
-
export { ImageEditRenderer } from '@haklex/rich-renderer-image'
|
|
55
|
-
export { MentionEditRenderer } from '@haklex/rich-renderer-mention'
|
|
56
|
-
export { MermaidEditRenderer } from '@haklex/rich-renderer-mermaid'
|
|
57
|
-
export { VideoEditRenderer } from '@haklex/rich-renderer-video'
|
|
58
|
-
export { CodeSnippetEditRenderer } from '@haklex/rich-ext-code-snippet'
|
|
59
|
-
export { TldrawEditRenderer } from '@haklex/rich-ext-tldraw'
|
|
60
|
-
|
|
61
|
-
// 编辑节点
|
|
62
|
-
export { CodeSnippetEditNode, codeSnippetEditNodes } from '@haklex/rich-ext-code-snippet'
|
|
63
|
-
export { EmbedEditNode, embedEditNodes } from '@haklex/rich-ext-embed'
|
|
64
|
-
export { LinkCardEditNode, linkCardEditNodes } from '@haklex/rich-renderer-linkcard'
|
|
65
|
-
export { KaTeXBlockEditNode, KaTeXInlineEditNode, katexEditNodes } from '@haklex/rich-renderer-katex'
|
|
66
|
-
|
|
67
|
-
// 插件
|
|
68
|
-
export { SlashMenuPlugin } from '@haklex/rich-plugin-slash-menu'
|
|
69
|
-
export { EmbedPlugin, INSERT_EMBED_COMMAND } from '@haklex/rich-ext-embed'
|
|
70
|
-
export { TldrawPlugin, INSERT_TLDRAW_COMMAND } from '@haklex/rich-ext-tldraw'
|
|
92
|
+
enhancedEditRendererConfig
|
|
71
93
|
```
|
|
72
94
|
|
|
73
|
-
|
|
95
|
+
### 2) Edit Renderer
|
|
74
96
|
|
|
75
|
-
```
|
|
76
|
-
|
|
97
|
+
```ts
|
|
98
|
+
AlertEditRenderer
|
|
99
|
+
BannerEditRenderer
|
|
100
|
+
CodeBlockEditRenderer
|
|
101
|
+
ImageEditRenderer
|
|
102
|
+
MentionEditRenderer
|
|
103
|
+
MermaidEditRenderer
|
|
104
|
+
VideoEditRenderer
|
|
105
|
+
CodeSnippetEditRenderer
|
|
106
|
+
TldrawEditRenderer
|
|
107
|
+
```
|
|
77
108
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
109
|
+
### 3) Edit Node
|
|
110
|
+
|
|
111
|
+
```ts
|
|
112
|
+
codeSnippetEditNodes
|
|
113
|
+
embedEditNodes
|
|
114
|
+
linkCardEditNodes
|
|
115
|
+
katexEditNodes
|
|
116
|
+
TldrawEditNode
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### 4) 插件与命令
|
|
120
|
+
|
|
121
|
+
```ts
|
|
122
|
+
SlashMenuPlugin
|
|
123
|
+
collectNodeSlashItems
|
|
124
|
+
getBuiltinItems
|
|
125
|
+
EmbedPlugin
|
|
126
|
+
INSERT_EMBED_COMMAND
|
|
127
|
+
TldrawPlugin
|
|
128
|
+
INSERT_TLDRAW_COMMAND
|
|
129
|
+
PasteLinkCardPlugin
|
|
130
|
+
BlockHandlePlugin
|
|
81
131
|
```
|
|
82
132
|
|
|
83
|
-
##
|
|
133
|
+
## 设计模式
|
|
84
134
|
|
|
85
|
-
|
|
135
|
+
### 1) 静态渲染器复用 + 编辑态覆盖
|
|
136
|
+
|
|
137
|
+
编辑配置通过：
|
|
138
|
+
|
|
139
|
+
```ts
|
|
86
140
|
{
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
"react": ">=19"
|
|
141
|
+
...enhancedRendererConfig,
|
|
142
|
+
CodeBlock: CodeBlockEditRenderer,
|
|
143
|
+
...
|
|
91
144
|
}
|
|
92
145
|
```
|
|
93
146
|
|
|
147
|
+
实现最大复用，最小维护面。
|
|
148
|
+
|
|
149
|
+
### 2) Edit Node 继承 Static Node
|
|
150
|
+
|
|
151
|
+
推荐让编辑节点继承静态节点，仅覆盖 `decorate()`（必要时再覆盖 `importJSON/clone`），保证 JSON 协议一致。
|
|
152
|
+
|
|
153
|
+
### 3) Slash 菜单自动发现
|
|
154
|
+
|
|
155
|
+
节点可在类上声明：
|
|
156
|
+
|
|
157
|
+
```ts
|
|
158
|
+
static slashMenuItems: SlashMenuItemConfig[]
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
`SlashMenuPlugin` 会通过 `collectNodeSlashItems(editor)` 自动收集并合并到菜单。
|
|
162
|
+
|
|
163
|
+
### 4) 命令驱动扩展
|
|
164
|
+
|
|
165
|
+
扩展插入行为统一封装成 `INSERT_XXX_COMMAND`，菜单/按钮/快捷键都 dispatch 命令，避免 UI 与节点逻辑耦合。
|
|
166
|
+
|
|
167
|
+
## 扩展编写与接入建议
|
|
168
|
+
|
|
169
|
+
新增扩展（例如 `Foo`）时，建议按以下顺序：
|
|
170
|
+
|
|
171
|
+
1. 在扩展包实现 `FooNode`（静态）与可选 `FooEditNode`
|
|
172
|
+
2. 实现 `FooRenderer` 与可选 `FooEditRenderer`
|
|
173
|
+
3. 提供 `fooNodes/fooEditNodes` 导出
|
|
174
|
+
4. 如需插入能力，实现 `FooPlugin + INSERT_FOO_COMMAND`
|
|
175
|
+
5. 在 `@haklex/rich-renderers` 注册静态侧导出
|
|
176
|
+
6. 在 `@haklex/rich-renderers-edit` 注册编辑侧导出与配置覆盖
|
|
177
|
+
7. 补充 README 的节点注册、插件挂载、样式引入说明
|
|
178
|
+
|
|
94
179
|
## License
|
|
95
180
|
|
|
96
181
|
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@haklex/rich-renderers-edit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.34",
|
|
4
4
|
"description": "Edit renderers aggregator for haklex rich editor",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -55,23 +55,23 @@
|
|
|
55
55
|
"dist"
|
|
56
56
|
],
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@haklex/rich-
|
|
59
|
-
"@haklex/rich-
|
|
60
|
-
"@haklex/rich-
|
|
61
|
-
"@haklex/rich-ext-
|
|
62
|
-
"@haklex/rich-
|
|
63
|
-
"@haklex/rich-
|
|
64
|
-
"@haklex/rich-
|
|
65
|
-
"@haklex/rich-
|
|
66
|
-
"@haklex/rich-renderer-
|
|
67
|
-
"@haklex/rich-
|
|
68
|
-
"@haklex/rich-
|
|
69
|
-
"@haklex/rich-renderer-
|
|
70
|
-
"@haklex/rich-renderer-
|
|
71
|
-
"@haklex/rich-renderer-
|
|
72
|
-
"@haklex/rich-renderer-
|
|
73
|
-
"@haklex/rich-
|
|
74
|
-
"@haklex/rich-
|
|
58
|
+
"@haklex/rich-editor": "0.0.34",
|
|
59
|
+
"@haklex/rich-ext-gallery": "0.0.34",
|
|
60
|
+
"@haklex/rich-plugin-slash-menu": "0.0.34",
|
|
61
|
+
"@haklex/rich-ext-code-snippet": "0.0.34",
|
|
62
|
+
"@haklex/rich-renderer-alert": "0.0.34",
|
|
63
|
+
"@haklex/rich-renderer-banner": "0.0.34",
|
|
64
|
+
"@haklex/rich-ext-embed": "0.0.34",
|
|
65
|
+
"@haklex/rich-ext-tldraw": "0.0.34",
|
|
66
|
+
"@haklex/rich-renderer-mention": "0.0.34",
|
|
67
|
+
"@haklex/rich-plugin-block-handle": "0.0.34",
|
|
68
|
+
"@haklex/rich-renderer-image": "0.0.34",
|
|
69
|
+
"@haklex/rich-renderer-katex": "0.0.34",
|
|
70
|
+
"@haklex/rich-renderer-linkcard": "0.0.34",
|
|
71
|
+
"@haklex/rich-renderer-codeblock": "0.0.34",
|
|
72
|
+
"@haklex/rich-renderer-video": "0.0.34",
|
|
73
|
+
"@haklex/rich-renderers": "0.0.34",
|
|
74
|
+
"@haklex/rich-renderer-mermaid": "0.0.34"
|
|
75
75
|
},
|
|
76
76
|
"devDependencies": {
|
|
77
77
|
"@lexical/react": "^0.40.0",
|