fix(link): while popup for link is open, box cannot be selected when …

…clicking on it
lakejs · Aug 30, 2024 · 542e581 · 542e581
1 parent 5da1d9f
commit 542e581
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();