Tiptap: Remove link under cursor when no text is selected

[tobyzerner]

Is your feature request related to a problem? Please describe.
Using the menu bubble component, I am trying to build a UI for editing/remove links similar to Google Docs. The desired behaviour is that when you place the cursor inside a link, the menu bubble shows with the link's URL, and controls to edit/remove the link.

I can get halfway there.

First, I overrode the Link extension to remove the ProseMirror plugin that causes the URL to open when you click on a link mark (I think that is not a great choice for the default behaviour, at the very least it should be configurable, or maybe require a modifier key like Ctrl to be pressed).

Second, rather than using menu.isActive to show or hide the menu bubble, if I just use isActive.link() I can get the menu bubble to display when the cursor is inside a link, even without a text selection:

<editor-menu-bubble :editor="editor" v-slot="{ commands, isActive, getMarkAttrs, menu }">
  <div
    class="tooltip richtext-link"
    :class="{ 'is-active': isActive.link() }"
    :style="{ left: `${menu.left}px`, bottom: `${menu.bottom}px` }"
  >
    <a :href="getMarkAttrs('link').href" target="_blank">{{ getMarkAttrs('link').href }}</a>
    <button type="button" class="button tooltip-button" @click="commands.link({})">Remove</button>
  </div>
</editor-menu-bubble>

However, clicking the Remove button without a text selection, it does nothing.

Describe the solution you'd like
If the link command is executed with { attr: null } without a text selection, I would like any link marks that the cursor is within to be removed.

[jonasdumas]

+1

[pkkid]

First, I overrode the Link extension to remove the ProseMirror plugin that causes the URL to open when you click on a link mark (I think that is not a great choice for the default behaviour, at the very least it should be configurable, or maybe require a modifier key like Ctrl to be pressed).

Can you explain how you did this part of your work?

[tobyzerner]

@pkkid

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

export default class Link extends BaseLink {
  /**
   * Remove the default plugin so that clicking on a link does not open it.
   */
  get plugins() {
    return [];
  }
}

[pkkid]

Cool thanks. New to Vue and Typescript, I forgot we have classes that can be inherited.

[philippkuehn]

There is a new setting for links:

new Link({
  openOnClick: false,
})

I've also changed how updating marks work now, so you'll be able to update links for empty selections.

[pkkid]

Both changes are working great for me, thanks!