Clicking on link icon when selected text is already a link does not show the current URL

[swergas]

Hi,

Once a selected text has been converted into a link using the link icon, there is no way to know what the link URL was and modify it.

When I select text that is already a link and I click on the link icon, the prompt that asks what link to use has a blank content. I would expect it to be pre-filled with the current link content.

Would it be possible and not too difficult to implement this?

Thanks in advance

[algorys]

Not so easy to make this kind of things, but you can get the selection value before calling callback of pell. Here is a working example:

1/ Add a dedicated function to get only links and the href value:

function getSelectedParagraphText() {
    let selection;
    if (window.getSelection) {
        selection = window.getSelection();
    } else if (document.selection) {
        selection = document.selection.createRange();
    }
    let parent = selection.anchorNode;
    while (parent != null && parent.localName !== "a") {
        parent = parent.parentNode;
    }
    if (parent == null) {
        return "";
    } else {
        return parent.getAttribute('href');
    }
}

2/ Then in pell, simply call the function on link handler:

{
    name: 'link',
    title: 'Add URL link',
    icon: '<i class="fa fa-fw fa-link fa-sm"></i>',
    result: () => {
        let link = getSelectedParagraphText() || '';
        const url = window.prompt('Enter the link URL', link);
        if (url) window.pell.exec('createLink', url)
    }
}

@jaredreich if you're interested, I think this feature can be a great idea for a new version ?

[swergas]

OK thanks @algorys for your tips, in the meantime I was trying to do it, here is my first implementation: (inspired from anuradhaspidy/widgeditor#21)

{
      name: 'link',
      title: 'Add a link (on selected text)',
      result: function() {
        var selection = document.getSelection();
        if (selection == "")
        {
          alert("Please first select the text you want to link.");
          return;
        }
        var range = selection.getRangeAt(0);
        var foundLink = false;
        var defaultURL = "https://";
        var emptyLinkPromptText = "Write here the link address (starting with http:// or https://) for selected text";
        var existingLinkPromptText = "Write here the link address (starting with http:// or https://) to replace on selected text";
        var promptText = emptyLinkPromptText;
        var linkNode = null;
        var rangeNodes = Array.from(range.cloneContents().childNodes);
        var sz = rangeNodes.length;
        for (var i = 0; i < sz; ++i){
          if (rangeNodes[i].nodeName.toLowerCase() == "a"){
            foundLink = true;
            linkNode = rangeNodes[i];
          }
        }
        if (!linkNode){
          var parentNode = range.commonAncestorContainer;
          var currentNode = parentNode;
          while (!foundLink && currentNode && currentNode.nodeName){
            if (currentNode.nodeName.toLowerCase() == "a"){
              foundLink = true;
              linkNode = currentNode;
            }
            else {
              currentNode = currentNode.parentNode;
            }
          }
        }
        if (foundLink){
          defaultURL = linkNode.href;
          promptText = existingLinkPromptText;
        }
        var url = window.prompt(promptText, defaultURL);
        if (url){
          pell.exec('createLink', url);
        }
      }
    }

[algorys]

It depends on what you want to do next, I stayed on something very simple because the goal of this editor is to be as light as possible.