link click handler fixed

ueberdosis · Sep 7, 2023 · e861b24 · e861b24
1 parent 9a9e94b
commit e861b24
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/demos/src/Marks/Link/React/index.jsx b/demos/src/Marks/Link/React/index.jsx
@@ -1,5 +1,6 @@
 import './styles.scss'
 
+import Bold from '@tiptap/extension-bold'
 import Code from '@tiptap/extension-code'
 import Document from '@tiptap/extension-document'
 import Link from '@tiptap/extension-link'
@@ -15,13 +16,14 @@ export default () => {
       Paragraph,
       Text,
       Code,
+      Bold,
       Link.configure({
-        openOnClick: false,
+        openOnClick: true,
       }),
     ],
     content: `
         <p>
-          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web">world wide web</a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
+          Wow, this editor has support for links to the whole <a href="https://en.wikipedia.org/wiki/World_Wide_Web"><b>world wide web</b>></a>. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try <a href="https://statamic.com/">another one!</a> Yep, seems to work.
         </p>
         <p>
           By default every link will get a <code>rel="noopener noreferrer nofollow"</code> attribute. It’s configurable though.

diff --git a/packages/extension-link/src/helpers/clickHandler.ts b/packages/extension-link/src/helpers/clickHandler.ts
@@ -15,16 +15,26 @@ export function clickHandler(options: ClickHandlerOptions): Plugin {
           return false
         }
 
+        let a = event.target as HTMLElement
+        const els = []
+
+        while (a.nodeName !== 'DIV') {
+          els.push(a)
+          a = a.parentNode as HTMLElement
+        }
+
+        if (!els.find(value => value.nodeName === 'A')) {
+          return false
+        }
+
         const attrs = getAttributes(view.state, options.type.name)
         const link = (event.target as HTMLLinkElement)
 
         const href = link?.href ?? attrs.href
         const target = link?.target ?? attrs.target
 
         if (link && href) {
-          if (view.editable) {
-            window.open(href, target)
-          }
+          window.open(href, target)
 
           return true
         }