From ed160598849e8427eae433e1acf1b68b9052e250 Mon Sep 17 00:00:00 2001
From: yanmao <55792257+yanmao-cc@users.noreply.github.com>
Date: Sat, 15 Jan 2022 10:45:20 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20popup=20=E4=BD=8D?=
 =?UTF-8?q?=E7=BD=AE=20#74?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/toolbar-vue/src/plugin/component/popup.ts | 13 ++++++++++---
 packages/toolbar/src/plugin/component/popup.tsx    | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/packages/toolbar-vue/src/plugin/component/popup.ts b/packages/toolbar-vue/src/plugin/component/popup.ts
index 9409075f..384fbf4e 100644
--- a/packages/toolbar-vue/src/plugin/component/popup.ts
+++ b/packages/toolbar-vue/src/plugin/component/popup.ts
@@ -81,8 +81,14 @@ export default class Popup {
 		}
 		const topRange = subRanges[0];
 		const bottomRange = subRanges[subRanges.length - 1];
-		const topRect = topRange.getBoundingClientRect();
-		const bottomRect = bottomRange.getBoundingClientRect();
+		const topRect = topRange
+			.cloneRange()
+			.collapse(true)
+			.getBoundingClientRect();
+		const bottomRect = bottomRange
+			.cloneRange()
+			.collapse(false)
+			.getBoundingClientRect();
 
 		let rootRect: DOMRect | undefined = undefined;
 		this.showContent(() => {
@@ -93,7 +99,8 @@ export default class Popup {
 			}
 			this.#align =
 				bottomRange.startNode.equal(selection.focusNode!) &&
-				!topRange.startNode.equal(selection.focusNode!)
+				(!topRange.startNode.equal(selection.focusNode!) ||
+					selection.focusOffset > selection.anchorOffset)
 					? 'bottom'
 					: 'top';
 			const space = 12;
diff --git a/packages/toolbar/src/plugin/component/popup.tsx b/packages/toolbar/src/plugin/component/popup.tsx
index 99cdeb4d..8a1f8a43 100644
--- a/packages/toolbar/src/plugin/component/popup.tsx
+++ b/packages/toolbar/src/plugin/component/popup.tsx
@@ -82,8 +82,14 @@ export default class Popup {
 		}
 		const topRange = subRanges[0];
 		const bottomRange = subRanges[subRanges.length - 1];
-		const topRect = topRange.getBoundingClientRect();
-		const bottomRect = bottomRange.getBoundingClientRect();
+		const topRect = topRange
+			.cloneRange()
+			.collapse(true)
+			.getBoundingClientRect();
+		const bottomRect = bottomRange
+			.cloneRange()
+			.collapse(false)
+			.getBoundingClientRect();
 
 		let rootRect: DOMRect | undefined = undefined;
 		this.showContent(() => {
@@ -94,7 +100,8 @@ export default class Popup {
 			}
 			this.#align =
 				bottomRange.startNode.equal(selection.focusNode!) &&
-				!topRange.startNode.equal(selection.focusNode!)
+				(!topRange.startNode.equal(selection.focusNode!) ||
+					selection.focusOffset > selection.anchorOffset)
 					? 'bottom'
 					: 'top';
 			const space = 12;