Get link text by cursor position

[Dragonite24]

I want to do the following functionality:
There is text and a link in it, having focus on the text with the link (the text is not selected, just focus) when you click on some button, I want to be able (in a separate popup component) to change the current link and text.

In the pictures, I want to get out of this:

(...some edit in my popup) to this:

There are no problems with changing the link. But how to get text of link by cursor position? and is it possible?

[flowt-au]

Did you ever work this out? I need the same thing.

[jrief]

I use the following snippet to set the link with some content:

const selection = editor.view.state.selection;
editor.chain().focus()
  .extendMarkRange('link')
  .setLink({href: 'http://www.example.org'})
  .insertContentAt({from: selection.from, to: selection.to}, 'EditTextAndLink')
  .run();

[andersr]

@jrief This is useful info but I think is doing the opposite of what the OP is asking for which is getting, not setting the text link.

I'm also trying to access the link text. I've made numerous attempts at trying to get this but no luck so far. Here are some things I've tried:

const attr = editor.getAttributes("link");

This gets the attributes of the link itself, but unfortunately does not include the link text, which I guess is a child node(?)

   editor .chain() .focus().extendMarkRange("link").command(({ tr }) => {
      // tried consoling out the tr to see if it included the text but no luck.
 }).run();

Have read through both the TipTap and ProseMirror docs but so far have not been able to find anything. Any insights would be appreciated!

[nperez0111]

@andersr you were very close, editor.chain().focus().extendMarkRange('link') sets the selection to be as wide as the mark is applied

So if you console log tr.selection.content() that is the slice of the content that this range applies to.

Hope this is helpful!

[andersr]

Thanks @nperez0111. However, that did not work for me.

This is my code:

   editor.chain().focus().extendMarkRange("link").command(({ tr }) => {
    console.log("tr: ", tr.selection.content());
    return true;
 }) .run();

This is what I see in the console (maybe the link text is in there somewhere?):

[nperez0111]

The text should be in that sub content somewhere, though it looks like it copied the whole bulletList which is unexpected

[andersr]

This worked for me:

 const { from } = editor.view.state.selection;
 const linkNode = editor.state.doc.nodeAt(from);
 console.log("linkNode: ", linkNode?.textContent);

(I got that based on a partially correct answer from ChatGPT that I was able to make work.)

[nperez0111]

Yea that can work too. Just not as generalizable to other mark types since they may not only contain text. But if it works, it works