Question: How can I change highlighted text into link tags with modifier keys?

So I want to be able to add a link to a highlighted text, similar to the example on Link on the website, and that one is pretty straightforward. However I also want to add Cmd+K as a keyboard hotkey to bring up the same prompt menu.

I tried to extend the current Link and then adding my own keys, which made the hotkey work, however I couldn’t figure out how to actually turn the highlighted node into a link node (the example on the website uses the commands from Editor, which I don’t get access to inside keys). Any help here?

[edisonywh]

@philippkuehn that’s amazing! Couldn’t figure out how to use the selections to setNodeMarkup referred to the doc here but wasn’t sure how to actually use it, but using editor directly worked perfectly! It’s basically doing the exact same thing as what the menubar is doing.

Here’s my piece of code that worked if anyone else is struggling:

import { Link as BaseLink } from 'tiptap-extensions';

export default class Link extends BaseLink {
  keys() {
    return {
      'Mod-k': () => {
        const command = this.editor.commands.link
        this.handleAddLink(command)
      }
    }
  }

     handleAddLink(command) {
      const url = prompt('Enter the url you want to link to')
      if (url == "") {
        command({})
      } else {
        if (!this.isValidUrl(url)) {
          alert(`${url} doesn't seem to be a valid URL!`)
        } else {
          command({ "href": url })
        }
      }
    },

  isValidUrl(string) {
    try {
      new URL(string);
    } catch (_) {
      return false;
    }

    return true;
  }
}

Thanks for the help 😃

[BrianHung]

state, dispatch, view are all given as arguments to keys. Using state.selection, you should be able to the position of the highlighted node, and then use tr.setNodeMarkup to apply the link mark to the node.