Tiptap: Add an attribute to link for target="_blank"

[Neophen]

There is no way to add the target attribute to link mark. I've chnged the minified code at my end to achieve it.

[panayotisk]

Well, you do not have to change the code, because you will not be able to upgrade easily when a new version comes out. I had the same issue and made a CustomLink extension overriding Link as follows:

import { Link } from 'tiptap-extensions'
export default class CustomLink extends Link {
  get schema() {
    return {
      attrs: {
        href: {
            default: null,
        },
        target: {
            default: null,
        }
      },`
      inclusive: false,
      parseDOM: [
        {
          tag: 'a[href]',
          getAttrs: dom => ({
            href: dom.getAttribute('href'),
            target: dom.getAttribute('target')
          }),
        },
      ],
      toDOM: node => ['a', {
        ...node.attrs,
        target: '__blank',
        rel: 'noopener noreferrer nofollow',
      }, 0],
    }
  }
}

Then I used CustomLink instead of link when specifying editor options. I do not know if there is a better approach.

[philippkuehn]

Yeah @panayotisk shows a good way to extend nodes. At the moment I don't want to add target to the core.

[Alehandro231]

Well, you do not have to change the code, because you will not be able to upgrade easily when a new version comes out. I had the same issue and made a CustomLink extension overriding Link as follows:

import { Link } from 'tiptap-extensions'
export default class CustomLink extends Link {
  get schema() {
    return {
      attrs: {
        href: {
            default: null,
        },
        target: {
            default: null,
        }
      },`
      inclusive: false,
      parseDOM: [
        {
          tag: 'a[href]',
          getAttrs: dom => ({
            href: dom.getAttribute('href'),
            target: dom.getAttribute('target')
          }),
        },
      ],
      toDOM: node => ['a', {
        ...node.attrs,
        target: '__blank',
        rel: 'noopener noreferrer nofollow',
      }, 0],
    }
  }
}

Then I used CustomLink instead of link when specifying editor options. I do not know if there is a better approach.

Thank you @panayotisk for the decision 👍
I have updated the solution to use options in the target part:

class CustomLink extends Link {
  constructor(props) {
    super({ ...props })
    this.target = props.target
  }

  get schema() {
    return {
      attrs: {
        href: {
          default: null
        },
        target: {
          default: null
        }
      },
      inclusive: false,
      parseDOM: [
        {
          tag: 'a[href]',
          getAttrs: (dom) => ({
            href: dom.getAttribute('href'),
            target: dom.getAttribute('target')
          })
        }
      ],
      toDOM: (node) => [
        'a',
        {
          ...node.attrs,
          target: this.target
        },
        0
      ]
    }
  }
}

[hanspagel]

Thanks for sharing! ✌️