Feature: clickable URLs inside editor

[victorel-petrovich]

Most of my .txt, .md, asciidoc and other documents have plenty of URLs = web page links ( which is not surprising in this internet era). Would be helpful if I could ctrl-click on them in the editor, thus not having to select and copy then go in the browser.

Thanks for considering!

[akumpf]

You can do exactly that with the ext-linking extension. However, that also relies on your editor mode (syntax highlighting) to be aware of links and tokenize them and then writing some basic code to recognize when that link is clicked and opening the page.

On top of basic linking (via Cmd+Click), I've also been looking at embedding graphical/video content on-the-fly in the free space around a link.

See the FreeSpace Previews demo (with linking) here: http://fs_previews.kumpf.cc/

And more detailed info in the issue (feature suggestion) here: https://github.com/ajaxorg/ace/issues/2478

[victorel-petrovich]

Hi @akumpf Adam,

thanks for reply, I looked at that demo, it is fantastic! The links works, and the previews are awesome. And if one does not want to see the preview, one just does not leave it any space below the link.

However, that also relies on your editor mode (syntax highlighting) to be aware of links and tokenize them ...

Looks like asciidoc mode (and .md too) highlights urls: http://ace.c9.io/tool/mode_creator.html . Could you confirm that it will work with this mode?

You can do exactly that with the ext-linking extension. ..and then writing some basic code to recognize when that link is clicked and opening the page.

Could you please write step by step instructions for that? I'm not a developer, I just use Caret (https://github.com/thomaswilburn/Caret) editor for editing asciidoc, markdown, and MATLAB files (a bit of html too).

[akumpf]

Here's how to use the ext-linking extension (from my experience, others may know better ways).

• 1. Include the linking extension javascript.

<script src="ace/src-min/ext-linking.js" type="text/javascript" charset="utf-8"></script>

• 2. Enable the extension by setting an option with your Ace editor instance.

editor.setOptions({
  enableLinking: true
});

• 3. Add some code to handle clicking on links (note: you'll need to know what name the tokenizer/editor-mode gives to links and replace the word "link" with the appropriate name).

editor.on("linkClick",function(data){
  console.log("CLICK", data); // Just for testing so you can see what classes things are...
  if(data && data.token && data.token.type == "link"){
    window.open(data.token.value, "_blank");
  }
});

Hope that helps. :)

Cheers, Adam

[victorel-petrovich]

Hi Adam,

thanks for your time to write that, though I have no idea where to insert all those pieces of code. As I said, I just use Caret to edit, and all I know is that Caret is based on Ace editor, which is why I came here to suggest this feature. Perhaps I should ask the Caret developers for help

[akumpf]

Sure thing. :)

Yeah, I'd suggest you pass on the linking details to the developers of Caret. It's a pretty simple update and could be a nice new feature for them.

Cheers, Adam

[lezhnev74]

I'd like to extend the solution provided by @akumpf

If the link on row is surrounded by other text like this: "This is a link to www.google.com" then it will not work - data.token will contain the whole string.

I did this change:

editor.on("linkClick",function(data){

    // function to get only one word from the whole string
    // http://stackoverflow.com/a/5173501/1637031
    function GetWordByPos(str, pos) {
        var left = str.substr(0, pos);
        var right = str.substr(pos);

        left = left.replace(/^.+ /g, "");
        right = right.replace(/ .+$/g, "");

        return left + right;
    }

    var pos = data.position.column;
    var token = data.token.value;
    var url = GetWordByPos(token,pos);
    console.log('You clicked on '+url);

    // to make sure that url is real and can be opened
    // I used this library: http://soapbox.github.io/linkifyjs/
    // It will find valid URL
    console.log(linkify.find(url,'url'));

    // then we can redirect browser to found URL
    // ... 

});

Hope it will help.

[github-actions[bot]]

This issue has not received any attention in 1 year. If you want to keep this issue open, please leave a comment below and auto-close will be canceled.

[ldijkman]

dont know have been playing with this

could use a tooltip and ctrl button

https://github.com/ldijkman/Ace-Editor-Click-Link-window.open-URL/tree/main/docs

https://github.com/ldijkman/Ace-Editor-Click-Link-window.open-URL/tree/main/docs