Links not working when editor is not editable

What’s the bug you are facing?

We have links in editor which work fine while the editor is editable. For scenarios where the editor is read only, we render the editor with the links but it always redirects to the last link on the page.

How can we reproduce the bug on our side?

<p><a target="_blank" rel="noopener noreferrer nofollow" href="http://google.com">google.com</a></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="http://www.google.com">www.google.com</a></p><p><a target="_blank" rel="noopener noreferrer nofollow" href="https://test.com">http://test.com</a></p>

Use this html in tiptap editor and set the editor to read only. There are three links but when you click on any of them, it always redirects to last link.

Can you provide a CodeSandbox?

No response

What did you expect to happen?

I expect it to work the same way as when the editor is editable.

Anything to add? (optional)

No response

Did you update your dependencies?

• Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• Yes, I’m a sponsor. 💖

[scottsidwell]

@bdbch I can reproduce it consistently by:

1. Opening that link
2. Toggling “editable” to be false immediately
3. Clicking on “test.com”

This is actually a pretty interesting bug.

The underlying cause is that “selectionchange” events aren’t triggered when clicking a link in a non-editable div, and that our clickHandler::handleClick still fires when isEditable is false (instead of letting the browser do it). As a result, since selectionchange events don’t fire, the editor retains its previous selection when our clickHandler then calls to getAttributes for the mark attrs getting the wrong link href and target https://github.com/ueberdosis/tiptap/blob/e07a5b625d90c77fc5820e5eefa093d3cfb96512/packages/extension-link/src/helpers/clickHandler.ts#L13-L15

The simplest fix is to just not handle clicks when the editor is disabled:

handleClick: (view, pos, event) => {
  // Rely on default browser link handling when editing is disabled
  if (!view.editable) {
    return false;
  }
  ...
}

But it might be a better idea to rely on the onClick pos rather than deferring to the selection for link clicks, so we’d end up with:

handleClick: (view, pos, event) => {
  // Rely on default browser link handling when editing is disabled
  if (!view.editable) {
      return false;
  }
  
  // If we clicked at a position with a link, follow it
  const $pos = view.state.doc.resolve(pos)
  const link = options.type.isInSet($pos.marks());
  if (link && link.attrs.href) {
      window.open(link.attrs.href, link.attrs.target);
      return true;
  }
  return false;
}

[bdbch]

Thanks @scottsidwell! This looks promising. I’ll work on a fix for this. Maybe this also resolves issue #2669 - it seems like the clickHandler is doing something fishy here too.