Commit Graph

5 Commits

Author SHA1 Message Date
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
Takagi
1a19bdcb54 fix: resolving the issue of the draggable extension not working in the editor (#5570)
#### What type of PR is this?

/kind bug
/area editor
/milestone 2.14.x

#### What this PR does / why we need it:

解决在默认编辑器中,插件扩展 getDraggable 方法可能无效的问题。向 handleDrop 中添加属性 `selection`,方便插件对当前拖拽元素进行处理。

部分插件拖拽之后可能无效果,此时需要插件自行实现 `handleDrop` 方法来处理拖拽后的情况。

#### How to test it?

测试 getDraggable 方法是否正常。插件中使用此方法是否显示拖拽图标。

#### Which issue(s) this PR fixes:

Fixes #5208 

#### Does this PR introduce a user-facing change?
```release-note
解决默认编辑器 getDraggable 在部分插件中失效的问题。
```
2024-03-27 04:26:06 +00:00
John Niang
15f7fe2d4f Move folder console to ui 2024-02-02 22:22:51 +08:00