Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add an attribute to link for target="_blank" #161

Closed
Neophen opened this issue Jan 12, 2019 · 4 comments
Closed

Add an attribute to link for target="_blank" #161

Neophen opened this issue Jan 12, 2019 · 4 comments

Comments

@Neophen
Copy link

Neophen commented Jan 12, 2019

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
Copy link

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
Copy link
Contributor

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

@Alehandro231
Copy link

Alehandro231 commented Sep 18, 2020

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 hanspagel mentioned this issue Sep 18, 2020
6 tasks
@hanspagel
Copy link
Contributor

Thanks for sharing! ✌️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants