How to insert link text into an AutoLinkNode using $createAutoLinkNode? Is it supposed to do it automatically??

[peppies]

The $createAutoLinkNode is inserting the link element and the URL, but no link text. I assumed it would happen automatically, but I'm stuck. This is the plugin that is supposed to automatically create a link if you paste a valid URL directly into the editor. I can add regular links just fine, but not the autoLinkNode ones.

Here is what I have so far:

const config = {namespace: 'RichTextEditor',
  theme: exampleTheme,
  nodes: [
    lex.LinkNode,
    lex.AutoLinkNode
  ],
  onError: (error) => console.log(error)
};

var editor = lex.createEditor(config);

registerAutoLinkTransform(editor);

function registerAutoLinkTransform(editor) {
  editor.registerNodeTransform(lex.TextNode, (node) => {
    const textContent = node.getTextContent();
    // Simple regex for URLs
    const urlRegex = /(https?:\/\/[^\s]+)/g;

    let match;
    let lastIndex = 0;

    while ((match = urlRegex.exec(textContent)) !== null) {
      const url = match[0];
      const startIndex = match.index;
      const endIndex = startIndex + url.length;

      // Split the TextNode if there's text before the link
      if (startIndex > lastIndex) {
        const beforeText = textContent.substring(lastIndex, startIndex);
        node.insertBefore(lex.$createTextNode(beforeText));
      }
      
     const attributes = {
        rel: 'nofollow', 
        target: '_blank',
      };
 
      const autoLinkNode = lex.$createAutoLinkNode(url,attributes);
      node.insertBefore(autoLinkNode);

      lastIndex = endIndex;
	  
      // Handle any remaining text after the last link
      if (lastIndex < textContent.length && textContent.length > 1) {
        const afterText = textContent.substring(lastIndex);
        node.insertBefore(lex.$createTextNode(afterText));
      }

      // Remove the original TextNode as it's been replaced
      node.remove();
    }
  });
}

I also tried manually adding text by create a text node and appending it to the autoLinkNode

const autoLinkNode = lex.$createAutoLinkNode(url,attributes);
autoLinkNode.append(lex.$createTextNode(url));
node.insertBefore(autoLinkNode);

But this gives me this error:

Error code #14
One or more transforms are endlessly triggering additional transforms. May have encountered infinite recursion caused by transforms that have their preconditions too lose and/or conflict with each other.

There's not much more that I can explain here. I couldn't find any other way online on how to do this. Google says the URL itself should automatically become the text for the link (as I was expecting).

Let me know what I'm doing wrong, and if there is a better way for this function to work (or if I even need a function).

[etrepum]

You should take a look at the react AutoLinkPlugin source. Should be straightforward to port to vanilla js. The $create functions are just constructors that will only ever create a single node, so just the link and no text. Other functions or commands are used for higher-level operations such as $toggleLink.

[peppies]

Thanks for pointing me in the right direction. I believe I mostly figured out getting the autolink plugin working.