@haklex/rich-renderers-edit 0.0.65 → 0.0.66

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.
Files changed (4) hide show
  1. package/README.md +37 -152
  2. package/dist/config.d.ts.map +1 -1
  3. package/dist/config.mjs +1 -1
  4. package/package.json +25 -20
package/README.md CHANGED
@@ -1,180 +1,65 @@
1
1
  # @haklex/rich-renderers-edit
2
2
 
3
- 编辑态增强聚合包。
4
- 在 `@haklex/rich-renderers` 静态能力上，补齐 edit renderer、edit node、扩展插件与 slash 菜单能力。
3
+ Edit renderer aggregator that extends the static aggregator (`@haklex/rich-renderers`) with edit renderers and editor plugins.
5
4
 
6
- ## 包定位
7
-
8
- - 产出 `enhancedEditRendererConfig`
9
- - 导出编辑态扩展节点（`embedEditNodes`、`codeSnippetEditNodes`、`katexEditNodes`、`linkCardEditNodes`）
10
- - 导出常用插件（`SlashMenuPlugin`、`EmbedPlugin`、`TldrawPlugin`、`PasteLinkCardPlugin`、`BlockHandlePlugin`）
11
-
12
- 如果你想“一键接全套”，可直接用 `@haklex/rich-kit-shiro`。
13
-
14
- ## 安装
5
+ ## Installation
15
6
 
16
7
  ```bash
17
- pnpm add @haklex/rich-renderers-edit @haklex/rich-renderers @haklex/rich-editor
8
+ pnpm add @haklex/rich-renderers-edit
18
9
  ```
19
10
 
20
- ## 快速开始（手动装配）
11
+ ## Peer Dependencies
12
+
13
+ | Package | Version |
14
+ | --- | --- |
15
+ | `lexical` | `^0.41.0` |
16
+ | `@lexical/react` | `^0.41.0` |
17
+ | `react` | `>=19` |
18
+ | `react-dom` | `>=19` |
19
+
20
+ ## Usage
21
21
 
22
22
  ```tsx
23
+ import { enhancedEditRendererConfig } from '@haklex/rich-renderers-edit'
23
24
  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
25
 
39
26
  import '@haklex/rich-editor/style.css'
40
- import '@haklex/rich-editor-ui/style.css'
41
27
  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
28
 
58
29
  <RichEditor
59
30
  rendererConfig={enhancedEditRendererConfig}
60
- extraNodes={extraNodes}
61
- actions={<SlashMenuPlugin />}
62
- >
63
- <BlockHandlePlugin />
64
- <TldrawPlugin />
65
- <EmbedPlugin />
66
- <PasteLinkCardPlugin />
67
- </RichEditor>
68
- ```
69
-
70
- ## `enhancedEditRendererConfig` 说明
71
-
72
- `enhancedEditRendererConfig` 基于 `enhancedRendererConfig` 构建，并覆写为编辑态组件：
73
-
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`
84
-
85
- 注意：它只负责“如何渲染”，不负责“节点是否注册”“插件是否挂载”。
86
-
87
- ## 核心导出
88
-
89
- ### 1) 预置配置
90
-
91
- ```ts
92
- enhancedEditRendererConfig
93
- ```
94
-
95
- ### 2) Edit Renderer
96
-
97
- ```ts
98
- AlertEditRenderer
99
- BannerEditRenderer
100
- CodeBlockEditRenderer
101
- ImageEditRenderer
102
- MentionEditRenderer
103
- MermaidEditRenderer
104
- VideoEditRenderer
105
- CodeSnippetEditRenderer
106
- TldrawEditRenderer
31
+ variant="article"
32
+ />
107
33
  ```
108
34
 
109
- ### 3) Edit Node
35
+ This aggregator builds on `@haklex/rich-renderers` by replacing static renderers with their edit counterparts and adding editor-specific plugins (slash menu actions, toolbar integrations, etc.).
110
36
 
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
131
- ```
132
-
133
- ## 设计模式
134
-
135
- ### 1) 静态渲染器复用 + 编辑态覆盖
136
-
137
- 编辑配置通过：
138
-
139
- ```ts
140
- {
141
- ...enhancedRendererConfig,
142
- CodeBlock: CodeBlockEditRenderer,
143
- ...
144
- }
145
- ```
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
- ```
37
+ ## Exports
160
38
 
161
- `SlashMenuPlugin` 会通过 `collectNodeSlashItems(editor)` 自动收集并合并到菜单。
39
+ ### Configuration
162
40
 
163
- ### 4) 命令驱动扩展
41
+ - `enhancedEditRendererConfig` — Pre-configured renderer config with all edit renderers and editor plugins registered
164
42
 
165
- 扩展插入行为统一封装成 `INSERT_XXX_COMMAND`，菜单/按钮/快捷键都 dispatch 命令，避免 UI 与节点逻辑耦合。
43
+ ### Sub-path Exports
166
44
 
167
- ## 扩展编写与接入建议
45
+ | Path | Description |
46
+ | --- | --- |
47
+ | `@haklex/rich-renderers-edit` | Full exports with `enhancedEditRendererConfig` |
48
+ | `@haklex/rich-renderers-edit/alert` | Alert edit renderer |
49
+ | `@haklex/rich-renderers-edit/banner` | Banner edit renderer |
50
+ | `@haklex/rich-renderers-edit/codeblock` | CodeBlock edit renderer |
51
+ | `@haklex/rich-renderers-edit/config` | Base config utilities |
52
+ | `@haklex/rich-renderers-edit/mention` | Mention edit renderer |
53
+ | `@haklex/rich-renderers-edit/mermaid` | Mermaid edit renderer |
54
+ | `@haklex/rich-renderers-edit/ruby` | Ruby edit renderer |
55
+ | `@haklex/rich-renderers-edit/slash-menu` | Slash menu integration |
56
+ | `@haklex/rich-renderers-edit/code-snippet` | Code snippet edit renderer |
57
+ | `@haklex/rich-renderers-edit/embed` | Embed edit renderer |
58
+ | `@haklex/rich-renderers-edit/excalidraw` | Excalidraw edit renderer |
168
59
 
169
- 新增扩展（例如 `Foo`）时，建议按以下顺序：
60
+ ## Part of Haklex
170
61
 
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 的节点注册、插件挂载、样式引入说明
62
+ This package is part of the [Haklex](../../README.md) rich editor ecosystem.
178
63
 
179
64
  ## License
180
65
 
package/dist/config.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AAezD,eAAO,MAAM,0BAA0B,EAAE,cAaxC,CAAA"}
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../src/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAc1D,eAAO,MAAM,0BAA0B,EAAE,cAaxC,CAAC"}
package/dist/config.mjs CHANGED
@@ -1,4 +1,4 @@
1
- import { FootnoteRenderer } from "@haklex/rich-editor";
1
+ import { FootnoteRenderer } from "@haklex/rich-editor/renderers";
2
2
  import { CodeSnippetEditRenderer } from "@haklex/rich-ext-code-snippet";
3
3
  import { GalleryEditRenderer } from "@haklex/rich-ext-gallery";
4
4
  import { AlertEditRenderer } from "@haklex/rich-renderer-alert";
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@haklex/rich-renderers-edit",
3
3
  "type": "module",
4
- "version": "0.0.65",
4
+ "version": "0.0.66",
5
5
  "description": "Edit renderers aggregator for haklex rich editor",
6
6
  "license": "MIT",
7
7
  "exports": {
@@ -65,25 +65,25 @@
65
65
  "react-dom": ">=19"
66
66
  },
67
67
  "dependencies": {
68
- "@haklex/rich-ext-code-snippet": "0.0.65",
69
- "@haklex/rich-editor": "0.0.65",
70
- "@haklex/rich-ext-embed": "0.0.65",
71
- "@haklex/rich-ext-excalidraw": "0.0.65",
72
- "@haklex/rich-ext-gallery": "0.0.65",
73
- "@haklex/rich-plugin-mention": "0.0.65",
74
- "@haklex/rich-plugin-slash-menu": "0.0.65",
75
- "@haklex/rich-renderer-alert": "0.0.65",
76
- "@haklex/rich-renderer-banner": "0.0.65",
77
- "@haklex/rich-renderer-codeblock": "0.0.65",
78
- "@haklex/rich-renderer-image": "0.0.65",
79
- "@haklex/rich-renderer-katex": "0.0.65",
80
- "@haklex/rich-renderer-linkcard": "0.0.65",
81
- "@haklex/rich-renderer-mention": "0.0.65",
82
- "@haklex/rich-renderer-mermaid": "0.0.65",
83
- "@haklex/rich-renderer-ruby": "0.0.65",
84
- "@haklex/rich-renderer-video": "0.0.65",
85
- "@haklex/rich-renderers": "0.0.65",
86
- "@haklex/rich-plugin-block-handle": "0.0.65"
68
+ "@haklex/rich-editor": "0.0.66",
69
+ "@haklex/rich-ext-code-snippet": "0.0.66",
70
+ "@haklex/rich-ext-embed": "0.0.66",
71
+ "@haklex/rich-ext-gallery": "0.0.66",
72
+ "@haklex/rich-ext-excalidraw": "0.0.66",
73
+ "@haklex/rich-plugin-block-handle": "0.0.66",
74
+ "@haklex/rich-plugin-mention": "0.0.66",
75
+ "@haklex/rich-plugin-slash-menu": "0.0.66",
76
+ "@haklex/rich-renderer-alert": "0.0.66",
77
+ "@haklex/rich-renderer-banner": "0.0.66",
78
+ "@haklex/rich-renderer-image": "0.0.66",
79
+ "@haklex/rich-renderer-codeblock": "0.0.66",
80
+ "@haklex/rich-renderer-katex": "0.0.66",
81
+ "@haklex/rich-renderer-linkcard": "0.0.66",
82
+ "@haklex/rich-renderer-mention": "0.0.66",
83
+ "@haklex/rich-renderer-mermaid": "0.0.66",
84
+ "@haklex/rich-renderer-ruby": "0.0.66",
85
+ "@haklex/rich-renderer-video": "0.0.66",
86
+ "@haklex/rich-renderers": "0.0.66"
87
87
  },
88
88
  "devDependencies": {
89
89
  "@lexical/react": "^0.41.0",
@@ -99,6 +99,11 @@
99
99
  "publishConfig": {
100
100
  "access": "public"
101
101
  },
102
+ "repository": {
103
+ "type": "git",
104
+ "url": "https://github.com/Innei/haklex.git",
105
+ "directory": "packages/rich-renderers-edit"
106
+ },
102
107
  "scripts": {
103
108
  "build": "vite build",
104
109
  "dev:build": "vite build --watch"