How to set link attributes

[fmay]

Using your example for link insertion ...

    setLinkUrl(url, type, focus) {
      type.command({ href: url, rel: '', target: '__blank', class:'my-class' })
      this.hideLinkMenu()
      focus()
    }

What is the correct approach for managing attributes such as target, class, rel etc?

Thanks

[fmay]

Sorry for answering my own questions!! I got off my ass and looked at the source and see how the nodes/marks are created and so it seems clear I should just write my own nodes and marks, which was next on my list anyway.

The more I see, the more I like.

[bdrtsky]

@fmay hello

I should just write my own nodes and marks

Can you please explain in two words what did you mean? Also want target="_blank" for the links...

[Ken-vdE]

Sorry for answering my own questions!! I got off my ass and looked at the source and see how the nodes/marks are created and so it seems clear I should just write my own nodes and marks, which was next on my list anyway.

The more I see, the more I like.

@fmay Could you show us a code example? I want to do something like this:

// Based on https://tiptap.dev/api/marks/bold#usage
this.editor.chain().focus().extendMarkRange('link').setLink({href: url, class: 'some-class'}).run()

However the class attribute can not be added dynamically like this unfortunately...

FYI I have two buttons for creating links, one being a normal link and a second button also creating a link but with an extra class attribute. Hence this question. That's why I can't use the HTMLAttributes option within Link.configure()

UPDATE

I've added a pull request which would allow for my example .setLink({class}) to work and set the class attribute dynamically: #2758

For now, if it's not yet merged and you want to use this functionality, do this:

import Link from '@tiptap/extension-link'
// Extend Link to allow being passed dynamic class attribute.
const ExtendedLink = Link.extend({
    addAttributes() {
        return {
            href: {
                default: null,
            },
            target: {
                default: this.options.HTMLAttributes.target,
            },
            class: {
                default: this.options.HTMLAttributes.class,
            }
        };
    },
});

  // Pass our extended Link extension (instead of the original) to the editor constructor. E.g.
  mounted() {
    this.editor = new Editor({
      content: '<p>I’m running Tiptap with Vue.js. 🎉</p>',
      extensions: [
        StarterKit,
        ExtendedLink
      ],
    })
  },

** UPDATE 2 **

My pull request has been merged, so this functionality now works out of the box. No need for the Link.extend() anymore.