From 1ac665f59c2a18523ba36410461bf5a03bfb20a6 Mon Sep 17 00:00:00 2001
From: Takagi <1103069291@qq.com>
Date: Mon, 30 Jun 2025 11:03:29 +0800
Subject: [PATCH] refactor: optimize the drag-and-drop performance (#7601)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/kind importment
/area editor
/milestone 2.21.x

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

为默认编辑器拖拽事件增加节流，解决部分由于鼠标移动事件所产生的性能损耗。

#### Does this PR introduce a user-facing change?
```release-note
None
```
---
 .../editor/src/extensions/draggable/index.ts  | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/ui/packages/editor/src/extensions/draggable/index.ts b/ui/packages/editor/src/extensions/draggable/index.ts
index 4c4015f62..372fbe052 100644
--- a/ui/packages/editor/src/extensions/draggable/index.ts
+++ b/ui/packages/editor/src/extensions/draggable/index.ts
@@ -16,6 +16,7 @@ import {
 } from "@/tiptap/pm";
 import { Editor, Extension } from "@/tiptap/vue-3";
 import type { DraggableItemType, ExtensionOptions } from "@/types";
+import { throttle } from "lodash-es";
 
 // https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API
 // https://github.com/ueberdosis/tiptap/blob/7832b96afbfc58574785043259230801e179310f/demos/src/Experiments/GlobalDragHandle/Vue/DragHandle.js
@@ -376,8 +377,8 @@ const dropPoint = (doc: Node, pos: number, slice: Slice) => {
         dep == $pos.depth
           ? 0
           : $pos.pos <= ($pos.start(dep + 1) + $pos.end(dep + 1)) / 2
-            ? -1
-            : 1;
+          ? -1
+          : 1;
       const insertPos = $pos.index(dep) + (bias > 0 ? 1 : 0);
       const parent = $pos.node(dep);
       let fits = false;
@@ -396,8 +397,8 @@ const dropPoint = (doc: Node, pos: number, slice: Slice) => {
         return bias == 0
           ? $pos.pos
           : bias < 0
-            ? $pos.before(dep + 1)
-            : $pos.after(dep + 1);
+          ? $pos.before(dep + 1)
+          : $pos.after(dep + 1);
       }
     }
   }
@@ -468,7 +469,7 @@ const Draggable = Extension.create({
         props: {
           handleDOMEvents: {
             // @ts-ignore
-            mousemove: (view: EditorView, event) => {
+            mousemove: throttle((view: EditorView, event: MouseEvent) => {
               const coords = { left: event.clientX, top: event.clientY };
               const pos = view.posAtCoords(coords);
               if (!pos || !pos.pos) return false;
@@ -479,6 +480,7 @@ const Draggable = Extension.create({
                 view.nodeDOM(nodePos) ||
                 view.domAtPos(nodePos)?.node ||
                 event.target;
+
               if (!nodeDom) {
                 hideDragHandleDOM();
                 return false;
@@ -514,14 +516,14 @@ const Draggable = Extension.create({
               }
               renderDragHandleDOM(view, activeNode);
               return false;
-            },
-            mouseleave: () => {
+            }, 100),
+            mouseleave: throttle(() => {
               clearTimeout(mouseleaveTimer);
               mouseleaveTimer = setTimeout(() => {
                 hideDragHandleDOM();
-              }, 400);
+              }, 800);
               return false;
-            },
+            }, 100),
           },
           handleKeyDown() {
             if (!draggableHandleDom) return false;