fix: improve open link on link popup

toeverything · Sep 25, 2024 · 3f7a79c · 3f7a79c
1 parent 0ca1163
commit 3f7a79c
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 20 deletions.
diff --git a/packages/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts b/packages/affine/components/src/rich-text/inline/presets/nodes/link-node/affine-link.ts
@@ -32,23 +32,6 @@ export class AffineLink extends ShadowlessElement {
   // The link has been identified.
   private _identified: boolean = false;
 
-  private _onClick = (e: MouseEvent) => {
-    if (!this._identified) {
-      this._identified = true;
-      this._identify();
-    }
-
-    const referenceInfo = this._referenceInfo;
-    if (!referenceInfo) return;
-
-    const refNodeSlotsProvider = this.std?.getOptional(RefNodeSlotsProvider);
-    if (!refNodeSlotsProvider) return;
-
-    e.preventDefault();
-
-    refNodeSlotsProvider.docLinkClicked.emit(referenceInfo);
-  };
-
   // see https://github.com/toeverything/AFFiNE/issues/1540
   private _onMouseUp = () => {
     const anchorElement = this.querySelector('a');
@@ -87,13 +70,34 @@ export class AffineLink extends ShadowlessElement {
           this.inlineEditor,
           'view',
           this.selfInlineRange,
-          abortController
+          abortController,
+          (e?: MouseEvent) => {
+            this.openLink(e);
+            abortController.abort();
+          }
         ),
       };
     },
     { enterDelay: 500 }
   );
 
+  openLink = (e?: MouseEvent) => {
+    if (!this._identified) {
+      this._identified = true;
+      this._identify();
+    }
+
+    const referenceInfo = this._referenceInfo;
+    if (!referenceInfo) return;
+
+    const refNodeSlotsProvider = this.std?.getOptional(RefNodeSlotsProvider);
+    if (!refNodeSlotsProvider) return;
+
+    e?.preventDefault();
+
+    refNodeSlotsProvider.docLinkClicked.emit(referenceInfo);
+  };
+
   // Workaround for links not working in contenteditable div
   // see also https://stackoverflow.com/questions/12059211/how-to-make-clickable-anchor-in-contenteditable-div
   //
@@ -156,7 +160,7 @@ export class AffineLink extends ShadowlessElement {
       rel="noopener noreferrer"
       target="_blank"
       style=${styleMap(style)}
-      @click=${this._onClick}
+      @click=${this.openLink}
       @mouseup=${this._onMouseUp}
       ><v-text .str=${this.delta.insert}></v-text
     ></a>`;

diff --git a/...s/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts b/...s/affine/components/src/rich-text/inline/presets/nodes/link-node/link-popup/link-popup.ts
@@ -128,6 +128,11 @@ export class LinkPopup extends WithDisposable(LitElement) {
   private _embedOptions: EmbedOptions | null = null;
 
   private _openLink = () => {
+    if (this.openLink) {
+      this.openLink();
+      return;
+    }
+
     let link = this.currentLink;
     if (!link) return;
     if (!link.match(/^[a-zA-Z]+:\/\//)) {
@@ -161,6 +166,7 @@ export class LinkPopup extends WithDisposable(LitElement) {
           href=${this.currentLink}
           rel="noopener noreferrer"
           target="_blank"
+          @click=${(e: MouseEvent) => this.openLink?.(e)}
         >
           <span>${getHostName(this.currentLink)}</span>
         </a>
@@ -619,6 +625,9 @@ export class LinkPopup extends WithDisposable(LitElement) {
   @query('.mock-selection-container')
   accessor mockSelectionContainer!: HTMLDivElement;
 
+  @property({ attribute: false })
+  accessor openLink: ((e?: MouseEvent) => void) | null = null;
+
   @query('.affine-link-popover-container')
   accessor popupContainer!: HTMLDivElement;
 

diff --git a/...e/components/src/rich-text/inline/presets/nodes/link-node/link-popup/toggle-link-popup.ts b/...e/components/src/rich-text/inline/presets/nodes/link-node/link-popup/toggle-link-popup.ts
@@ -8,12 +8,14 @@ export function toggleLinkPopup(
   inlineEditor: AffineInlineEditor,
   type: LinkPopup['type'],
   targetInlineRange: InlineRange,
-  abortController: AbortController
+  abortController: AbortController,
+  openLink: ((e?: MouseEvent) => void) | null = null
 ): LinkPopup {
   const popup = new LinkPopup();
   popup.inlineEditor = inlineEditor;
   popup.type = type;
   popup.targetInlineRange = targetInlineRange;
+  popup.openLink = openLink;
   popup.abortController = abortController;
 
   document.body.append(popup);