Takagi
0f8ef82d6f
feat: refactor the drag function and add support for the drag menu ( #7861 )
...
#### What type of PR is this?
/kind feature
/area ui
/area editor
#### What this PR does / why we need it:
重构拖拽功能, 使用 Tiptap [extension-drag-handle-vue-3](https://github.com/ueberdosis/tiptap/tree/develop/packages/extension-drag-handle-vue-3 ) 代替原有的自定义方式。
并且,在此基础上,增加了添加至下一行及拖拽菜单的功能,且支持插件动态扩展拖拽菜单。
<img width="368" height="237" alt="image" src="https://github.com/user-attachments/assets/7f7be771-e549-446f-9f75-c289817965f6 " />
对于插件开发者,尤其是编辑器开发者来说,此 PR 有如下变更:
1. 移除了原有的 `getDraggable` 方法,不再使用它,直接移除即可。
2. 新增了 `getDraggableMenuItems` 方法,用于扩展拖拽菜单。
扩展方式如下:
```ts
getDraggableMenuItems() {
return {
parentKey: CONVERT_TO_KEY,
children: {
items: [
{
priority: 10,
icon: markRaw(MdiFormatParagraph),
title: i18n.global.t("editor.common.heading.paragraph"),
action: ({ editor }: { editor: Editor }) =>
editor.chain().focus().setParagraph().run(),
}
]
}
}
}
```
#### Does this PR introduce a user-facing change?
```release-note
重构编辑器拖拽功能,并为其增加功能操作菜单。
```
2025-10-30 07:38:18 +00:00
Takagi
da84c6c35d
chore: upgrade tiptap to version 3.7.2 ( #7811 )
...
#### What type of PR is this?
/kind improvement
/area editor
/area ui
#### What this PR does / why we need it:
升级 Tiptap 版本至 3.7.2。
⚠️ 由于 Tiptap 在 3.x 做了一些破坏性更新,并且 Halo 也遵循其更新,对 BubbleMenu 进行了更新,因此当前插件如果扩展了编辑器,并使用了 BubbleMenu,则需要根据以下方式进行更新升级。
1. 使用 `options` 代替 `tippyOptions`。
```diff
- tippyOptions: {
- fixed: false,
- },
+ options: {
+ strategy:"absolute",
+ },
```
2. 使用 `getReferencedVirtualElement` 代替 `getRenderContainer`。
```diff
- getRenderContainer: (node: HTMLElement) => {
- let container = node;
- if (container.nodeName === "#text") {
- container = node.parentElement as HTMLElement;
- }
- while (
- container &&
- container.classList &&
- !container.classList.contains("column")
- ) {
- container = container.parentElement as HTMLElement;
- }
- return container;
- },
+ getReferencedVirtualElement() {
+ const editor = this.editor;
+ if (!editor) {
+ return null;
+ }
+ const parentNode = findParentNode(
+ (node) => node.type.name === Column.name
+ )(editor.state.selection);
+ if (parentNode) {
+ const domRect = posToDOMRect(
+ editor.view,
+ parentNode.pos,
+ parentNode.pos + parentNode.node.nodeSize
+ );
+ return {
+ getBoundingClientRect: () => domRect,
+ getClientRects: () => [domRect],
+ };
+ }
+ return null;
+ },
```
3. 移除 `defaultAnimation`。
```diff
- defaultAnimation: false,
```
此外,更新后,原有插件中扩展已有 Node 的 `BubbleMenu` 方式将会失效,例如 [编辑器超链接卡片](https://www.halo.run/store/apps/app-UpUJA ) 扩展了 Text Node 的 `BubbleMenu`,因为此前并未支持扩展已实现的 `BubbleMenu`。
在当前 PR 中,为了解决升级版本后失效的问题,引入了 `extendsKey` 字段,用于扩展已有的 `BubbleMenu`。(需要已有的 `BubbleMenu` 设置了 PluginKey。
用法如下:
```ts
Extension.create({
name: "expandTextBubbleMenu",
addOptions() {
return {
getBubbleMenu() {
return {
// 目标 BubbleMenu 的 PluginKey。当前版本会导出 Halo UI Editor 中的所有 PluginKey。
extendsKey: TEXT_BUBBLE_MENU_KEY,
items: [
{
priority: 10,
// 具有同一个 key 的 items 将会被覆盖
key: "textItem1",
props: { title: "ExpandText" },
},
],
};
},
};
},
}),
```
这样当 text 中具有 `textItem1` 的 item 时,将会被覆盖,没有时将会追加合并。
#### How to test it?
#### Does this PR introduce a user-facing change?
```release-note
升级 Tiptap 至 3.x
```
2025-10-22 07:00:14 +00:00
Ryan Wang
796407c67d
refactor: improve type definitions for editor extension ( #7425 )
...
#### What type of PR is this?
/area plugin
/area editor
/milestone 2.20.x
#### What this PR does / why we need it:
Previously, editor extension related types were not exported because the type names conflicted with some UI component names, making it impossible to import extension types in plugins. This PR modifies the type names and exports them in index.ts.
#### Does this PR introduce a user-facing change?
```release-note
导出与编辑器扩展相关的类型定义
```
2025-05-13 09:56:06 +00:00