Vue TipTap Editor - Can't add Link

user_1575127 0
Viewed 710

I'm using Vue3 & TypeScript to build a TipTap Wysiwyg editor. Having issues when trying to use the Link Extension (other extensions such as StarterKit, Highlight and TaskList work fine).

Following the docs here: https://tiptap.dev/api/marks/link/

I installed the correct Link extension yarn add @tiptap/extension-link
imported import Link from '@tiptap/extension-link'
Added the Link extension using default options to the editor as such: 

setup() {
  const editor = useEditor({
    extensions: [..., Link],
    ...
  return {
    editor,
  }
}

Getting the following error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'target')   tiptap-extension-link.esm.js?2dbe:148

Any help will be greatly appriciated.

tiptap
1 Answers

the extension-link is currently beta as you can see in the npm package site, so I believe there are currently bugs or missing parameters inside the package itself so to overcome that error you can pass the parameter yourself by configuring the Link like this:

Link.configure({
          HTMLAttributes: { target: '_blank' },
          linkOnPaste: false,
          openOnClick: true,
        }),

and by doing that, the package might not work as intended which as happened to me so you can make use of the fact that now your editor understands the tag but the logic to transformed to links automatically might not work so you should write the logic urself and pass the new text to the editor like this:

replaceUrls(string) {
  const urlRegex = /(?<!href=")(?<!>)(((https?:\/\/)|(www\.))[^\s|<]+)/g
  return string.replace(urlRegex, (url) => {
    let hyperLink = url
    if (!hyperLink.match('^https?://')) {
      hyperLink = 'http://' + hyperLink
    }
    return (
      '<a href="' + hyperLink + '" target="_blank" >' + url + '</a> &nbsp;'
    )
  })
}

and so you can update your Editor content with this command so you can transform the links into a tags that the editor understands

editor.commands.setContent(replaceUrls(editor.getHTML()), false)
user_105974640
Related