Updating a link element by pasting a new link

[laukaichung]

CodeSandbox Example:

https://codesandbox.io/s/slate-2-images-and-links-forked-5p6mom

I made a withLink() plugin that would automatically linkify a link text when a user pastes a link string into the editor. I'm not sure how to update a link element when the user pastes a new link over it:

The problem is that using Transform.removeNode and Transform.insertNode together also removes the previous paragraph node when replacing the link. Do you have any suggestion?

Related Code:

export const wrapLink = (editor: Editor, url: string): void => {
  const { selection } = editor;
  const isCollapsed = selection && Range.isCollapsed(selection);
  const linkElement: LinkElement = {
    type: CustomElementTypes.link,
    url,
    children: [{ text: url }]
  };

  // Detect if the user is highlighting an old URL

  if (isCollapsed) {
    console.log("add new link");
    Transforms.insertNodes(editor, linkElement);
  } else {
    console.log("replace old link");
    Transforms.removeNodes(editor);
    Transforms.insertNodes(editor, linkElement);
    Transforms.collapse(editor, { edge: "end" });
  }
};