diff --git a/demos/src/Marks/Link/React/index.jsx b/demos/src/Marks/Link/React/index.jsx index 53b3134a93f..255a203a3fe 100644 --- 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: `

- Wow, this editor has support for links to the whole world wide web. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try another one! Yep, seems to work. + Wow, this editor has support for links to the whole world wide web. We tested a lot of URLs and I think you can add *every URL* you want. Isn’t that cool? Let’s try another one! Yep, seems to work.

By default every link will get a rel="noopener noreferrer nofollow" attribute. It’s configurable though. diff --git a/packages/extension-link/src/helpers/clickHandler.ts b/packages/extension-link/src/helpers/clickHandler.ts index 23934f495e4..b2c4ce5fb76 100644 --- a/packages/extension-link/src/helpers/clickHandler.ts +++ b/packages/extension-link/src/helpers/clickHandler.ts @@ -15,9 +15,15 @@ export function clickHandler(options: ClickHandlerOptions): Plugin { return false } - const eventTarget = event.target as HTMLElement + let a = event.target as HTMLElement + const els = [] - if (eventTarget.nodeName !== 'A') { + while (a.nodeName !== 'DIV') { + els.push(a) + a = a.parentNode as HTMLElement + } + + if (!els.find(value => value.nodeName === 'A')) { return false } @@ -28,9 +34,7 @@ export function clickHandler(options: ClickHandlerOptions): Plugin { const target = link?.target ?? attrs.target if (link && href) { - if (view.editable) { - window.open(href, target) - } + window.open(href, target) return true }