From 542e581718c66ddd23ee0639670abbab4fb8d966 Mon Sep 17 00:00:00 2001
From: luolonghao <luolonghao@gmail.com>
Date: Fri, 30 Aug 2024 14:32:26 +0800
Subject: [PATCH] fix(link): while popup for link is open, box cannot be
 selected when clicking on it

---
 src/editor.ts                 |  2 +-
 src/plugins/format-painter.ts |  3 +--
 src/plugins/link.ts           | 17 ++++++++++++-----
 src/ui/link-popup.ts          |  4 ++++
 tests/editor.test.ts          |  6 +++---
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/editor.ts b/src/editor.ts
index 50d82288..3091b4ef 100644
--- a/src/editor.ts
+++ b/src/editor.ts
@@ -196,7 +196,7 @@ export class Editor {
 
   private clickListener: EventListener = event => {
     const targetNode = new Nodes(event.target as Element);
-    if (!targetNode.get(0).isConnected || targetNode.closest('.lake-popup').length > 0) {
+    if (!targetNode.get(0).isConnected) {
       return;
     }
     this.event.emit('click', targetNode);
diff --git a/src/plugins/format-painter.ts b/src/plugins/format-painter.ts
index 0c087038..c22ab5d8 100644
--- a/src/plugins/format-painter.ts
+++ b/src/plugins/format-painter.ts
@@ -35,8 +35,7 @@ export default (editor: Editor) => {
     if (editor.container.contains(targetNode)) {
       return;
     }
-    const buttonNode = targetNode.closest('button[name="formatPainter"]');
-    if (buttonNode.length > 0) {
+    if (targetNode.closest('button[name="formatPainter"]').length > 0) {
       return;
     }
     editor.container.removeClass(formatPainterClassName);
diff --git a/src/plugins/link.ts b/src/plugins/link.ts
index 3f815dc7..9dba0a5a 100644
--- a/src/plugins/link.ts
+++ b/src/plugins/link.ts
@@ -29,15 +29,22 @@ export default (editor: Editor) => {
     popup.position();
   });
   editor.event.on('click', (targetNode: Nodes) => {
-    if (targetNode.closest('button[name="link"]').length > 0) {
+    if (popup.container.contains(targetNode)) {
       return;
     }
-    const linkNode = targetNode.closest('a');
-    if (linkNode.length === 0) {
-      popup.hide();
+    if (targetNode.closest('button[name="link"]').length > 0) {
       return;
     }
-    if (!editor.container.contains(linkNode) || linkNode.closest('lake-box').length > 0) {
+    const linkNode = targetNode.closest('a');
+    if (
+      linkNode.length === 0 ||
+      !editor.container.contains(linkNode) ||
+      linkNode.closest('lake-box').length > 0
+    ) {
+      if (!popup.visible) {
+        return;
+      }
+      editor.selection.sync();
       popup.hide();
       return;
     }
diff --git a/src/ui/link-popup.ts b/src/ui/link-popup.ts
index a67e51ff..56a1d0ef 100644
--- a/src/ui/link-popup.ts
+++ b/src/ui/link-popup.ts
@@ -187,6 +187,10 @@ export class LinkPopup {
     button.render();
   }
 
+  public get visible(): boolean {
+    return this.container.get(0).isConnected && this.container.computedCSS('display') !== 'none';
+  }
+
   public getInputValue(name: string): string {
     const inputElement = this.container.find(`input[name="${name}"]`);
     const nativeInputElement = inputElement.get(0) as HTMLInputElement;
diff --git a/tests/editor.test.ts b/tests/editor.test.ts
index 7629043a..a156dccb 100644
--- a/tests/editor.test.ts
+++ b/tests/editor.test.ts
@@ -798,7 +798,7 @@ describe('editor', () => {
     click(rootNode);
     expect(clickCount).to.equal(1);
     click(query(editor.popupContainer));
-    expect(clickCount).to.equal(1);
+    expect(clickCount).to.equal(2);
     editor.unmount();
   });
 
@@ -825,8 +825,8 @@ describe('editor', () => {
     expect(clickCount).to.equal(1);
     expect(clickCount2).to.equal(1);
     click(query(editor.popupContainer));
-    expect(clickCount).to.equal(1);
-    expect(clickCount2).to.equal(1);
+    expect(clickCount).to.equal(2);
+    expect(clickCount2).to.equal(2);
     editor.unmount();
     editor2.unmount();
     rootNode2.remove();