From 433897a3e0d2f592f4abffb0ce583baa8facc5f6 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 21 Sep 2024 00:36:19 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/12517

---
 app/src/assets/scss/protyle/_wysiwyg.scss | 13 +++++++
 app/src/protyle/util/editorCommonEvent.ts | 44 +++++++++++++++++------
 2 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/app/src/assets/scss/protyle/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
index 9ffa82ee1..dd52c91bc 100644
--- a/app/src/assets/scss/protyle/_wysiwyg.scss
+++ b/app/src/assets/scss/protyle/_wysiwyg.scss
@@ -55,6 +55,18 @@
       }
     }
 
+    .bq {
+      .dragover {
+        &__top:not(.av__row) {
+          box-shadow: 0 -3px 0 var(--b3-theme-primary-lighter), inset 0 1px 0 var(--b3-theme-primary-lighter) !important;
+        }
+
+        &__bottom:not(.av__row) {
+          box-shadow: 0 3px 0 var(--b3-theme-primary-lighter), inset 0 -1px 0 var(--b3-theme-primary-lighter) !important;
+        }
+      }
+    }
+
     &.list {
       padding-left: 0;
 
@@ -449,6 +461,7 @@
 
   &--select {
     background-color: var(--b3-theme-primary-lightest) !important;
+
     [data-node-id][style*="background-color"] {
       opacity: .86;
     }
diff --git a/app/src/protyle/util/editorCommonEvent.ts b/app/src/protyle/util/editorCommonEvent.ts
index 4feab7efd..5da609b80 100644
--- a/app/src/protyle/util/editorCommonEvent.ts
+++ b/app/src/protyle/util/editorCommonEvent.ts
@@ -1176,6 +1176,18 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
         event.preventDefault();
         let targetElement = hasClosestByClassName(event.target, "av__row") || hasClosestByClassName(event.target, "av__row--util") || hasClosestBlock(event.target);
         const point = {x: event.clientX, y: event.clientY, className: ""};
+
+        // 超级块中有a，b两个段落块，移动到 ab 之间的间隙 targetElement 会变为超级块，需修正为 a
+        if (targetElement && (targetElement.classList.contains("bq") || targetElement.classList.contains("sb") || targetElement.classList.contains("list") || targetElement.classList.contains("li"))) {
+            let prevElement = hasClosestBlock(document.elementFromPoint(point.x, point.y - 6))
+            while (prevElement && targetElement.contains(prevElement)) {
+                if (prevElement.nextElementSibling?.getAttribute("data-node-id")) {
+                    targetElement = prevElement;
+                }
+                prevElement = prevElement.parentElement;
+            }
+        }
+
         if (!targetElement) {
             if (event.clientY > editorElement.lastElementChild.getBoundingClientRect().bottom) {
                 // 命中底部
@@ -1248,14 +1260,17 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
                 return;
             }
             if (point.className) {
-                targetElement.classList.add(point.className, "dragover");
+                targetElement.classList.add(point.className);
+                addDragover(targetElement);
                 return;
             }
             if (targetElement.getAttribute("data-type") === "NodeListItem" || fileTreeIds.indexOf("-") > -1) {
                 if (event.clientY > nodeRect.top + nodeRect.height / 2) {
-                    targetElement.classList.add("dragover__bottom", "dragover");
+                    targetElement.classList.add("dragover__bottom");
+                    addDragover(targetElement);
                 } else if (!targetElement.classList.contains("av__row--header")) {
-                    targetElement.classList.add("dragover__top", "dragover");
+                    targetElement.classList.add("dragover__top");
+                    addDragover(targetElement);
                 }
                 return;
             }
@@ -1276,10 +1291,12 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
             }
             if (event.clientX < nodeRect.left + 32 && event.clientX >= nodeRect.left - 1 &&
                 !targetElement.classList.contains("av__row")) {
-                targetElement.classList.add("dragover__left", "dragover");
+                targetElement.classList.add("dragover__left");
+                addDragover(targetElement);
             } else if (event.clientX > nodeRect.right - 32 && event.clientX < nodeRect.right &&
                 !targetElement.classList.contains("av__row")) {
-                targetElement.classList.add("dragover__right", "dragover");
+                targetElement.classList.add("dragover__right");
+                addDragover(targetElement);
             } else if (targetElement.classList.contains("av__row--header")) {
                 targetElement.classList.add("dragover__bottom");
             } else if (targetElement.classList.contains("av__row--util")) {
@@ -1287,14 +1304,10 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
             } else {
                 if (event.clientY > nodeRect.top + nodeRect.height / 2 && disabledPosition !== "bottom") {
                     targetElement.classList.add("dragover__bottom");
-                    if (!targetElement.classList.contains("av__row")) {
-                        targetElement.classList.add("dragover");
-                    }
+                    addDragover(targetElement);
                 } else if (disabledPosition !== "top") {
                     targetElement.classList.add("dragover__top");
-                    if (!targetElement.classList.contains("av__row")) {
-                        targetElement.classList.add("dragover");
-                    }
+                    addDragover(targetElement);
                 }
             }
             return;
@@ -1369,3 +1382,12 @@ export const dropEvent = (protyle: IProtyle, editorElement: HTMLElement) => {
         });
     });
 };
+
+const addDragover = (element: HTMLElement) => {
+    if (element.classList.contains("sb") ||
+        element.classList.contains("li") ||
+        element.classList.contains("list") ||
+        element.classList.contains("bq")) {
+        element.classList.add("dragover")
+    }
+}