Skip to content

Commit 26c42e7

Browse files
authored
docs: supplement the editor api change document (#529)
#### What this PR does / why we need it: 补充编辑器 API 变更文档 #### Which issue(s) this PR fixes: Fixes #514 #### Does this PR introduce a user-facing change? ```release-note None ```
1 parent 8cf5aac commit 26c42e7

1 file changed

Lines changed: 98 additions & 0 deletions

File tree

‎docs/developer-guide/plugin/api-changelog.md‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,101 @@ pnpm install @halo-dev/ui-shared
5353
### 表单定义 > 新增 `array` 组件
5454

5555
在 2.22.0 中,我们为 FormKit 表单新增了 `array` 组件,用于定义一组数据,并计划使用 `array` 组件替换原有的 `repeater` 组件。详细文档可查阅:[表单定义#array](../../developer-guide/form-schema.md#array)
56+
57+
### 编辑器 > BubbleMenu 扩展点改动
58+
59+
在 Halo 2.22.0 中,我们升级了编辑器的 Tiptap 版本至 3.x,由于 Tiptap 在 3.x 中做了一些破坏性更新且 Halo 也遵循其更新,因此如果插件扩展了编辑器,并使用了 BubbleMenu 扩展点,则需要根据以下方式进行更新升级。
60+
61+
1. 使用 `options` 代替 `tippyOptions`。
62+
63+
```diff
64+
- tippyOptions: {
65+
- fixed: false,
66+
- },
67+
+ options: {
68+
+ strategy:"absolute",
69+
+ },
70+
```
71+
72+
2. 使用 `getReferencedVirtualElement` 代替 `getRenderContainer`。
73+
74+
```diff
75+
- getRenderContainer: (node: HTMLElement) => {
76+
- let container = node;
77+
- if (container.nodeName === "#text") {
78+
- container = node.parentElement as HTMLElement;
79+
- }
80+
- while (
81+
- container &&
82+
- container.classList &&
83+
- !container.classList.contains("column")
84+
- ) {
85+
- container = container.parentElement as HTMLElement;
86+
- }
87+
- return container;
88+
- },
89+
+ getReferencedVirtualElement() {
90+
+ const editor = this.editor;
91+
+ if (!editor) {
92+
+ return null;
93+
+ }
94+
+ const parentNode = findParentNode(
95+
+ (node) => node.type.name === Column.name
96+
+ )(editor.state.selection);
97+
+ if (parentNode) {
98+
+ const domRect = posToDOMRect(
99+
+ editor.view,
100+
+ parentNode.pos,
101+
+ parentNode.pos + parentNode.node.nodeSize
102+
+ );
103+
+ return {
104+
+ getBoundingClientRect: () => domRect,
105+
+ getClientRects: () => [domRect],
106+
+ };
107+
+ }
108+
+ return null;
109+
+ },
110+
```
111+
112+
3. 移除 `defaultAnimation`。
113+
114+
```diff
115+
- defaultAnimation: false,
116+
```
117+
118+
此外,扩展其他 Node 中 `BubbleMenu` 的旧方式将会失效,例如 [编辑器超链接卡片](https://github.com/halo-sigs/plugin-editor-hyperlink-card/blob/main/ui/src/editor/text-bubble-extension.ts) 扩展了 Text Node 的 `BubbleMenu`。 此版本中引入了 `extendsKey` 字段,用于扩展已有的 `BubbleMenu`。**需要已有的 `BubbleMenu` 设置了 PluginKey**。
119+
用法如下:
120+
121+
```ts
122+
Extension.create({
123+
name: "expandTextBubbleMenu",
124+
addOptions() {
125+
return {
126+
getBubbleMenu() {
127+
return {
128+
// 目标 BubbleMenu 的 PluginKey。当前版本会导出 Halo UI Editor 中的所有 PluginKey。
129+
extendsKey: TEXT_BUBBLE_MENU_KEY,
130+
items: [
131+
{
132+
priority: 10,
133+
// 具有同一个 key 的 items 将会被覆盖
134+
key: "textItem1",
135+
props: { title: "ExpandText" },
136+
},
137+
],
138+
};
139+
},
140+
};
141+
},
142+
}),
143+
```
144+
145+
有关 `BubbleMenu` 扩展的详细文档可查阅:[悬浮菜单扩展](./extension-points/ui/default-editor-extension-create.md#4-悬浮菜单扩展)
146+
147+
### 编辑器 > 新增 getDraggableMenuItems 扩展点
148+
149+
在 Halo 2.22.0 中,我们为编辑器增加了拖拽菜单的功能,同时支持插件动态扩展拖拽菜单。与此同时,旧的 `getDraggable` 扩展点被移除,取而代之的是 `getDraggableMenuItems` 扩展点。
150+
151+
可直接移除 `getDraggable` 扩展点,不再使用,也无需考虑兼容性问题。
152+
153+
关于 `getDraggableMenuItems` 扩展点的详细文档可查阅:[拖拽菜单扩展](./extension-points/ui/default-editor-extension-create.md#5-拖拽菜单扩展)

0 commit comments

Comments
 (0)