Insert link node in the middle of a text node

[mariusplanable]

Hi, everyone

So I'm trying to insert a link into the editor and have some problems with it.

The background:
I have implemented the typeahead menu (on '/') and one of the option is to insert a link wherever the / was pressed.

When clicking on Link option a modal will pop up:

On clicking Save in the modal I want to insert a LinkNode in that position.
What I've tried so far and is partially working:

attempt 1

const insertLink = (text: string, link: string) => {
      editor.update(() => {
        const selection = $getSelection();

        if ($isRangeSelection(selection)) {
          const linkNode = $createLinkNode(link, { target: '_blank' });
          linkNode.append($createTextNode(text));
          selection.anchor.getNode().insertAfter(linkNode);
        }
      });
    };

It is inserting the node ok but it's always at the end of the existing text node (I know it's because of insertAfter). I wander if I could do something like insertInTheMiddle or somehow at the current selection.

attempt 2

const insertLink = (text: string, link: string) => {
      editor.update(() => {
        const selection = $getSelection();

        if ($isRangeSelection(selection)) {
          selection.insertText(text);
          toggleLink(link);
        }
      });
    };

It is inserting the text correctly even in the middle of an existing TextNode, but it sets as a LinkNode the entire TextNode, not just the text I entered in the modal.

Hope I was clear.
Any help / suggestions will be much appreciated. Gracias.

[acywatson]

Hm, yea so to make this work you'd need to split the text node at the point of insertion and create three new nodes like:

TextNode (This is some)
LinkNode
- TextNode(MY LINK TEXT)
TextNode (random text)

There should be a util for this somewhere like splitText, but you'll probably need to get the split point from the Selection offset at the point where the LinkNode is inserted.

[reactuz]

@acywatson could you guys please handle this case or provide some API on library level? I have the same issue, and I believe it should be pretty common for everyone who's using lexical seriously.

[boluo-O]

I also encountered this problem, this is how I solved it.

import { $insertNodes } from 'lexical'
const insertLink = (text: string, link: string) => {
      editor.update(() => {
        const selection = $getSelection();

        if ($isRangeSelection(selection)) {
          const linkNode = $createLinkNode(link, { target: '_blank' });
          linkNode.append($createTextNode(text));
          $insertNodes([linkNode, $createTextNode('')]) // insert linkNode by this
        }
      });
 };

[reactuz]

@CrazyDiablo in my case, your solution was appending link at the end of the text paragraph, which is not what I want

[reactuz]

@mariusplanable were you able to resolve your issue afterwards? If yes, please share your solution.

[mariusplanable]

Here is how I solved it:
I'm inserting just the text --> select the inserted text --> toggle selection into a link

import { toggleLink } from '@lexical/link';

const insertLink = (text: string, link: string) => {
    editor.update(() => {
        const selection = $getSelection();

        if ($isRangeSelection(selection)) {
            const { anchor, focus } = selection;
            // inserting just the link text at the current selection
            selection.insertText(text);

            // selecting the inserted text
            anchor.offset -= text.length;
            focus.offset = anchor.offset + text.length;
            
            // transforming selection into a link
            toggleLink(link);
          }
      });
};

[timaxlucas]

Yes, that solves it, because toggleLink has all the text node splitting "hard-coded" in >100 loc.

Is there any way to do this for an extended (custom) TextNode without copy pasting?
EDIT: or even for inline ElementNodes that have TextNodes as children?

[reactuz]

@mariusplanable Thanks a lot for sharing your solution. It works like a charm 👍