From 78839671e8083005ec104e151914b0edb36d0574 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 11 Jan 2025 21:25:51 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/13583

---
 app/src/assets/scss/component/_list.scss |  6 ++++++
 app/src/boot/globalEvent/click.ts        | 21 ++-------------------
 app/src/boot/globalEvent/dragover.ts     | 22 ++++++++++++++++++++++
 app/src/boot/globalEvent/keydown.ts      |  2 ++
 4 files changed, 32 insertions(+), 19 deletions(-)
 create mode 100644 app/src/boot/globalEvent/dragover.ts

diff --git a/app/src/assets/scss/component/_list.scss b/app/src/assets/scss/component/_list.scss
index ae172a694..d56b31c10 100644
--- a/app/src/assets/scss/component/_list.scss
+++ b/app/src/assets/scss/component/_list.scss
@@ -12,6 +12,12 @@
       background-color: var(--b3-list-hover);
     }
 
+    &.dragover,
+    &.dragover__top,
+    &.dragover__bottom {
+      cursor: copy;
+    }
+
     &.dragover::after {
       background-color: var(--b3-theme-primary-lightest);
       position: absolute;
diff --git a/app/src/boot/globalEvent/click.ts b/app/src/boot/globalEvent/click.ts
index 1fed945f9..a2c35d411 100644
--- a/app/src/boot/globalEvent/click.ts
+++ b/app/src/boot/globalEvent/click.ts
@@ -8,27 +8,10 @@ import {hideAllElements} from "../../protyle/ui/hideElements";
 import {isWindow} from "../../util/functions";
 import {writeText} from "../../protyle/util/compatibility";
 import {showMessage} from "../../dialog/message";
+import {cancelDrag} from "./dragover";
 
 export const globalClick = (event: MouseEvent & { target: HTMLElement }) => {
-    const ghostElement = document.getElementById("dragGhost");
-    if (ghostElement) {
-        if (ghostElement.dataset.ghostType === "dock") {
-            ghostElement.parentElement.querySelectorAll(".dock__item").forEach((item: HTMLElement) => {
-                item.style.opacity = "";
-            });
-            document.querySelector("#dockMoveItem")?.remove();
-        } else {
-            const startElement = ghostElement.parentElement.querySelector(`[data-node-id="${ghostElement.getAttribute("data-node-id")}"]`) as HTMLElement;
-            if (startElement) {
-                startElement.style.opacity = "";
-            }
-            ghostElement.parentElement.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach((item: HTMLElement) => {
-                item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current");
-                item.style.opacity = "";
-            });
-        }
-        ghostElement.remove();
-    }
+    cancelDrag();
     if (!window.siyuan.menus.menu.element.contains(event.target) && !hasClosestByAttribute(event.target, "data-menu", "true")) {
         if (getSelection().rangeCount > 0 && window.siyuan.menus.menu.element.contains(getSelection().getRangeAt(0).startContainer) &&
             window.siyuan.menus.menu.element.contains(document.activeElement)) {
diff --git a/app/src/boot/globalEvent/dragover.ts b/app/src/boot/globalEvent/dragover.ts
new file mode 100644
index 000000000..53c121bc1
--- /dev/null
+++ b/app/src/boot/globalEvent/dragover.ts
@@ -0,0 +1,22 @@
+export const cancelDrag = () => {
+    const ghostElement = document.getElementById("dragGhost");
+    if (ghostElement) {
+        if (ghostElement.dataset.ghostType === "dock") {
+            ghostElement.parentElement.querySelectorAll(".dock__item").forEach((item: HTMLElement) => {
+                item.style.opacity = "";
+            });
+            document.querySelector("#dockMoveItem")?.remove();
+        } else {
+            const startElement = ghostElement.parentElement.querySelector(`[data-node-id="${ghostElement.getAttribute("data-node-id")}"]`) as HTMLElement;
+            if (startElement) {
+                startElement.style.opacity = "";
+            }
+            ghostElement.parentElement.querySelectorAll(".dragover__top, .dragover__bottom, .dragover, .dragover__current").forEach((item: HTMLElement) => {
+                item.classList.remove("dragover__top", "dragover__bottom", "dragover", "dragover__current");
+                item.style.opacity = "";
+            });
+        }
+        ghostElement.remove();
+        document.onmousemove = null;
+    }
+}
diff --git a/app/src/boot/globalEvent/keydown.ts b/app/src/boot/globalEvent/keydown.ts
index a5ad57321..fe9acb3ef 100644
--- a/app/src/boot/globalEvent/keydown.ts
+++ b/app/src/boot/globalEvent/keydown.ts
@@ -74,6 +74,7 @@ import {globalCommand} from "./command/global";
 import {duplicateCompletely} from "../../protyle/render/av/action";
 import {copyTextByType} from "../../protyle/toolbar/util";
 import {onlyProtyleCommand} from "./command/protyle";
+import {cancelDrag} from "./dragover";
 
 const switchDialogEvent = (app: App, event: MouseEvent) => {
     event.preventDefault();
@@ -1395,6 +1396,7 @@ export const windowKeyDown = (app: App, event: KeyboardEvent) => {
     }
 
     if (event.key === "Escape" && !event.isComposing) {
+        cancelDrag();
         const imgPreviewElement = document.querySelector(".protyle-img");
         if (imgPreviewElement) {
             imgPreviewElement.remove();