fix(extension-link): prevent click handler from blocking non-link element selection (#7359)

* fix: early return false if its not a link

* fix(extension-link): prevent click handler from blocking non-link element selection

* use closest instead

* add editor view dom as stop traversal

* add editor view dom as stop traversal

* add editor view dom as stop traversal

Author: Aslam97

.changeset/fast-moons-chew.md

@@ -0,0 +1,5 @@
+---
+'@tiptap/extension-link': patch
+---
+
+Fixed an issue where clicking on non-link elements (like images) required multiple clicks to select them. The link click handler now properly returns early when the clicked element is not a link, allowing other node handlers to process the click event.

packages/extension-link/__tests__/link.spec.ts

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/core'
 import Document from '@tiptap/extension-document'
+import Image from '@tiptap/extension-image'
 import Link from '@tiptap/extension-link'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
@@ -257,6 +258,56 @@ describe('extension-link', () => {
     })
   })
 
+  it('should return false when clicking on non-link elements', () => {
+    editor = new Editor({
+      element: createEditorEl(),
+      extensions: [
+        Document,
+        Text,
+        Paragraph,
+        Image,
+        Link.configure({
+          openOnClick: false,
+        }),
+      ],
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'image',
+                attrs: {
+                  src: 'https://placehold.co/400',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    })
+
+    const editorEl = getEditorEl()
+    const img = editorEl?.querySelector('img')
+
+    expect(img).toBeTruthy()
+
+    const clickEvent = new MouseEvent('click', {
+      bubbles: true,
+      cancelable: true,
+      button: 0,
+    })
+
+    const wasDefaultPrevented = !img?.dispatchEvent(clickEvent)
+
+    // The event should not be prevented by the link handler
+    expect(wasDefaultPrevented).toBe(false)
+
+    editor?.destroy()
+    getEditorEl()?.remove()
+  })
+
   describe('shouldAutoLink', () => {
     it('default shouldAutoLink rejects bare hostnames without TLD', () => {
       // Test using Link extension's default options

packages/extension-link/src/helpers/clickHandler.ts

@@ -23,6 +23,31 @@ export function clickHandler(options: ClickHandlerOptions): Plugin {
           return false
         }
 
+        let link: HTMLAnchorElement | null = null
+
+        if (event.target instanceof HTMLAnchorElement) {
+          link = event.target
+        } else {
+          const target = event.target as HTMLElement | null
+          if (!target) {
+            return false
+          }
+
+          const root = options.editor.view.dom
+
+          // Tntentionally limit the lookup to the editor root.
+          // Using tag names like DIV as boundaries breaks with custom NodeViews,
+          link = target.closest<HTMLAnchorElement>('a')
+
+          if (link && !root.contains(link)) {
+            link = null
+          }
+        }
+
+        if (!link) {
+          return false
+        }
+
         let handled = false
 
         if (options.enableClickSelection) {
@@ -31,30 +56,11 @@ export function clickHandler(options: ClickHandlerOptions): Plugin {
         }
 
         if (options.openOnClick) {
-          let link: HTMLAnchorElement | null = null
-
-          if (event.target instanceof HTMLAnchorElement) {
-            link = event.target
-          } else {
-            let a = event.target as HTMLElement
-            const els = []
-
-            while (a.nodeName !== 'DIV') {
-              els.push(a)
-              a = a.parentNode as HTMLElement
-            }
-            link = els.find(value => value.nodeName === 'A') as HTMLAnchorElement
-          }
-
-          if (!link) {
-            return handled
-          }
-
           const attrs = getAttributes(view.state, options.type.name)
-          const href = link?.href ?? attrs.href
-          const target = link?.target ?? attrs.target
+          const href = link.href ?? attrs.href
+          const target = link.target ?? attrs.target
 
-          if (link && href) {
+          if (href) {
             window.open(href, target)
             handled = true
           }