fix: Clicking comment overlapping link opens link (BLO-1091) (#2696)

* Made first click of overlapping comment/link only show comment and added test

* Refactored extensions to both be BlockNote extensions, use `runsBefore` instead of `priority`

* Removed log

* Implemented PR feedback

* Updated AI test snapshot

Author: matthewlipski

packages/core/src/comments/extension.ts

@@ -158,6 +158,8 @@ export const CommentsExtension = createExtension(
     return {
       key: "comments",
       store,
+      runsBefore: ["link"],
+      tiptapExtensions: [CommentMark],
       prosemirrorPlugins: [
         new Plugin<CommentsPluginState>({
           key: PLUGIN_KEY,
@@ -224,7 +226,7 @@ export const CommentsExtension = createExtension(
             },
             handleClick: (view, pos, event) => {
               if (event.button !== 0) {
-                return;
+                return false;
               }
 
               const node = view.state.doc.nodeAt(pos);
@@ -235,23 +237,41 @@ export const CommentsExtension = createExtension(
                   ...prev,
                   selectedThreadId: undefined,
                 }));
-                return;
+                return false;
               }
 
               const commentMark = node.marks.find(
                 (mark) =>
                   mark.type.name === markType && mark.attrs.orphan !== true,
               );
 
-              const threadId = commentMark?.attrs.threadId as
-                | string
-                | undefined;
-              if (threadId !== store.state.selectedThreadId) {
-                store.setState((prev) => ({
-                  ...prev,
-                  selectedThreadId: threadId,
-                }));
+              if (!commentMark) {
+                // Clicked outside any comment thread. Deselect if needed but
+                // don't consume the event so other handlers (e.g. link
+                // navigation) can process it.
+                if (store.state.selectedThreadId !== undefined) {
+                  store.setState((prev) => ({
+                    ...prev,
+                    selectedThreadId: undefined,
+                  }));
+                }
+                return false;
+              }
+
+              const threadId = commentMark.attrs.threadId as string;
+
+              // If the clicked thread is already selected, do nothing and let
+              // other handlers process the event (e.g. navigating a link).
+              if (threadId === store.state.selectedThreadId) {
+                return false;
               }
+
+              store.setState((prev) => ({
+                ...prev,
+                selectedThreadId: threadId,
+              }));
+
+              return true;
             },
           },
         }),
@@ -356,7 +376,6 @@ export const CommentsExtension = createExtension(
       },
       userStore,
       commentEditorSchema,
-      tiptapExtensions: [CommentMark],
     } as const;
   },
 );

packages/core/src/editor/managers/ExtensionManager/extensions.ts

@@ -5,7 +5,7 @@ import {
   Extension as TiptapExtension,
 } from "@tiptap/core";
 import { Gapcursor } from "@tiptap/extensions/gap-cursor";
-import { Link } from "../../../extensions/tiptap-extensions/Link/link.js";
+import { LinkExtension } from "../../../extensions/tiptap-extensions/Link/link.js";
 import { Text } from "@tiptap/extension-text";
 import { createDropFileExtension } from "../../../api/clipboard/fromClipboard/fileDropExtension.js";
 import { createPasteFromClipboardExtension } from "../../../api/clipboard/fromClipboard/pasteExtension.js";
@@ -73,14 +73,6 @@ export function getDefaultTiptapExtensions(
     SuggestionAddMark,
     SuggestionDeleteMark,
     SuggestionModificationMark,
-    Link.configure({
-      HTMLAttributes: options.links?.HTMLAttributes ?? {},
-      editor,
-      onClick: options.links?.onClick,
-      ...(options.links?.isValidLink
-        ? { isValidLink: options.links.isValidLink }
-        : {}),
-    }),
     ...(Object.values(editor.schema.styleSpecs).map((styleSpec) => {
       return styleSpec.implementation.mark.configure({
         editor: editor,
@@ -169,6 +161,13 @@ export function getDefaultExtensions(
     DropCursorExtension(options),
     FilePanelExtension(options),
     FormattingToolbarExtension(options),
+    LinkExtension({
+      HTMLAttributes: options.links?.HTMLAttributes ?? {},
+      onClick: options.links?.onClick,
+      ...(options.links?.isValidLink
+        ? { isValidLink: options.links.isValidLink }
+        : {}),
+    }),
     LinkToolbarExtension(options),
     NodeSelectionKeyboardExtension(),
     PlaceholderExtension(options),

packages/core/src/extensions/tiptap-extensions/Link/index.ts

@@ -1,2 +1,2 @@
-export { Link } from "./link.js";
+export { Link, LinkExtension } from "./link.js";
 export { isAllowedUri } from "./link.js";

packages/core/src/extensions/tiptap-extensions/Link/link.ts

@@ -2,6 +2,7 @@ import type { PasteRuleMatch } from "@tiptap/core";
 import { Mark, markPasteRule, mergeAttributes } from "@tiptap/core";
 import type { Plugin } from "@tiptap/pm/state";
 import type { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import { createExtension } from "../../../editor/BlockNoteExtension.js";
 import { autolink } from "./helpers/autolink.js";
 import { findLinks } from "./helpers/linkDetector.js";
 import { clickHandler } from "./helpers/clickHandler.js";
@@ -67,8 +68,6 @@ export type LinkOptions = {
 export const Link = Mark.create<LinkOptions>({
   name: "link",
 
-  priority: 1000,
-
   keepOnSplit: false,
 
   exitable: true,
@@ -207,3 +206,33 @@ export const Link = Mark.create<LinkOptions>({
     return plugins;
   },
 });
+
+type LinkExtensionOptions = {
+  HTMLAttributes?: Record<string, any>;
+  onClick?: (
+    event: MouseEvent,
+    editor: BlockNoteEditor<any, any, any>,
+  ) => boolean | void;
+  isValidLink?: (href: string) => boolean;
+};
+
+/**
+ * BlockNote extension wrapping the {@link Link} TipTap mark. Wrapping the mark
+ * lets other extensions order their click handlers relative to the link click
+ * handler via `runsBefore: ["link"]`.
+ */
+export const LinkExtension = createExtension<any, LinkExtensionOptions>(
+  ({ editor, options }) => {
+    return {
+      key: "link",
+      tiptapExtensions: [
+        Link.configure({
+          HTMLAttributes: options.HTMLAttributes ?? {},
+          editor,
+          onClick: options.onClick,
+          ...(options.isValidLink ? { isValidLink: options.isValidLink } : {}),
+        }),
+      ],
+    } as const;
+  },
+);