After inserting the link, all words are also part of the link

[PolyakovDen]

What’s the bug you are facing?

If you insert a link in the text of the description, all subsequent words continue to be part of the hyperlink.

How can we reproduce the bug on our side?

1. write the word
2. insert link
3. confirm changes
4. press space
5. keep writing words

Can you provide a CodeSandbox?

No response

What did you expect to happen?

That after inserting a link and pressing a space, the word is not part of the link

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. 💖

[philippkuehn]

What did you expect to happen?
That after inserting a link and pressing a space, the word is not part of the link

This already happens for automatically added links. Manually added links behave exactly like other marks (bold, italic, etc.)

[aub]

I don't understand why this is closed, it's still behaving in the way described by the issue, which feels like a bug. It's true that automatically added links work correctly, but it seems like it's not possible to make manually-added ones work right. The inclusive setting for links is connected to whether autolinking is on or not... if I turn off autolinking then it works correctly, but now I don't have autolinking.

[aub]

To be clear, the problem is that while - as you say @philippkuehn - the links behave like the other marks by having the link remain active at the end of the line after adding it, turning off the link does not work the same way as turning off those things. If I turn off bold in this situation, the text that I already bolded remains that way but new things I type are no longer bold. But if I turn off the link then it removes it altogether, so there is no way to remove yourself from the link without getting rid of the link.

[chaosbiber]

Me thinks too this could be reopened, or for the 2.0 release there could be a docs enhancement or change of default behaviour, as the changes by the automatic links make it hard or impossible to create/insert links at the end of a document and continue the paragraph non-linked. At least I haven't found a simple command chain that succeeded. Not a huge issue for me, as automatic links are no important feature for me and thanks to the issue creator I found this workaround (disabling autolink)
But also huge thanks to the tiptap team!

[duhaime]

@philippkuehn can you please show us the preferred method of inserting some text with a link and then untoggling the link mark so that subsequent text will not have the mark?

The problem OP mentioned can be seen in your own Link demo: https://tiptap.dev/api/marks/link

Just go to the end of the document, click "setLink", type some text, then click "unsetLink". The link will disappear.

We were previously using:

editor
        .chain()
        .setTextSelection({ from: first, to: last })
        .insertContent(wrapInWhitespace ? head : "")
        .setLink({ href })
        .insertContent(text)
        .unsetLink()
        .insertContent(wrapInWhitespace ? tail : "")
        .focus()
        .run();

to add some whitespace, then the desired link text (grabbed from a modal like the Slack link UI), then whitespace. The link was clickable but the mark was removed at the end of the text. However, this recently broke after a tiptap upgrade and we're trying to figure out the correct way to insert a bounded link mark now...

[duhaime]

Quick follow up to say this is working for us:

      editor
        .chain()
        .setTextSelection({ from: first, to: last })
        .setLink({ href })
        .insertContent(text)
        .unsetMark("link")
        .insertContent(tail)
        .focus()
        .run();

where tail is just " " if we're at the end of the document (to get some whitespace separation between the link and subsequent text)

[nholden]

We're also bumping into this issue.

It's surprising to me that the docs explain that Link marks are configured to not be active when the cursor is at its end with inclusive: false. That would resolve this issue. Unfortunately, Link marks have been configured to inclusive: true by default since #2226, and there's no explanation in that PR as to why that's necessary.

[tascodes]

For those finding this issue, you can get around the autolink/inclusive options being tied like so:
Seems to work okay for the behavior I'm expecting (that once you create a link, all following text in that line is not included in the link)

Link.extend({ inclusive: false }).configure({
  autolink: true,
}),

[james-william-r]

For those finding this issue, you can get around the autolink/inclusive options being tied like so: Seems to work okay for the behavior I'm expecting (that once you create a link, all following text in that line is not included in the link)

Link.extend({ inclusive: false }).configure({
  autolink: true,
}),

Thanks so much for this! 😭 🙌

[JeffreyJoumjian]

@duhaime Your suggestion wasn't working for me as of 12/01/2024. This is what ended up working, courtesy of ChatGPT :)

editor
  .chain()
  .focus()
  .extendMarkRange("link")
  .command(({ tr, dispatch }) => {
    if (!dispatch) return true;

    const { from, to } = tr.selection;
	// i have a modal where you can enter a display text and the url
    const displayText = values.displayText || values.url || "";

    tr.insertText(displayText, from, to);
    tr.addMark(
      from,
      from + displayText.length,
      editor.schema.marks.link.create({ href: values.url }),
    );

    return true;
  })
  .run();

[iantanwx]

I don't know why this is the case but in 2.4.0 the link extension is not configured as exitable. changing this fixed my issue.

edit to include snippet:

import _Link from '@tiptap/extension-link';
import { atom } from 'jotai';
import { store } from '../../store';

export const Link = _Link.extend({
  exitable: true,
  addKeyboardShortcuts() {
    return {
      'Mod-k': ({ editor }) => {
        const { selection } = editor.state;
        if (selection.empty) return false;
        store.set(modalOpenAtom, true);
        return true;
      },
    };
  },
});

export const modalOpenAtom = atom(false);

inclusive did not work.

[harrisonhoward]

I don't know why this is the case but in 2.4.0 the link extension is not configured as exitable. changing this fixed my issue.

edit to include snippet:

import _Link from '@tiptap/extension-link';
import { atom } from 'jotai';
import { store } from '../../store';

export const Link = _Link.extend({
  exitable: true,
  addKeyboardShortcuts() {
    return {
      'Mod-k': ({ editor }) => {
        const { selection } = editor.state;
        if (selection.empty) return false;
        store.set(modalOpenAtom, true);
        return true;
      },
    };
  },
});

export const modalOpenAtom = atom(false);

inclusive did not work.

The inclusive trick for me worked on 2.5.6 of the extension.

Link.extend({ inclusive: false }).configure({
	defaultProtocol: "https",
	openOnClick: false,
	autolink: true
});

I am also rocking a custom control click link extension that allows you to CTRL (CMD) + Click a link, but that shouldn't affect this working.
Granted this doesn't achieve a blend where a user can type as the link and click space to break out unfortunately, but I'm sure you could create an extension of link that achieves that functionality.

In my setup the user can insert and edit a link via a dialog.

[harrisonhoward]

I think a more intuitive experience would be using arrow keys. Inserting link should immediately kick you out of the link mark. Using the arrows keys next to a link will jump you in and out of the mark without moving your caret.

Here is an example of links with TinyMCE, I'm not a fan of their editor but they introduce links perfectly https://codepen.io/harrisonax/pen/ExBNWYb

EDIT:
After looking at TipTap's link a little more, it has some similarities. You can use the right arrow key to add a space outside of the mark which allows you to break out of the mark without some hack. Additionally, you can do the right arrow trick then do a backspace to sit right next to the link but still remain markless.
Not a perfect world but still something to note

Add this to your chain if you want to add a space after the mark, remove insert content if you just want to toggle the mark instead. This will insert the link but immediately break out of the mark.
.toggleMark("link").insertContent(" ");

[stevaras]

JeffreyJoumjian my savior <3