Clickable urls (in Markdown mode)

1

Hello everyone,

first of all: I really like CodeMirror - it is the best js code handler I know.

Now I want to use it within a project of mine. I’d like to extend the gfm / markdown mode with the ability of clickable links.

I tried something like:
$(‘div.CodeMirror’).on(‘click’, function(e){
var et = $(e.target);
window.console.log( $(e.target).attr(‘class’) );
});

Thanks to GFM mode, the links are already assigned their own class (cm-url).
But that only works from time to time.
One reason for this is that if the cursor is already placed on the link, it will catch all clicks…

Also I tried to use something like the multiplexingMode, but this let me only assign a wrapper I think.

Could you please help me to make urls clickable?

Greetings

1 Like
2

Using an event handler and inspecting the event target is a good approach. The cursor has a pointer-events: none style, so it won’t capture any clicks.

3

Hello marijn,
thank you very much for your response. I’ve got it :slight_smile:

For everyone else interested in the solution:

$('div.CodeMirror pre').on('click', function(e){
    
    var et = $(e.target);
    
    // Direct url-click
    if(et.hasClass('cm-url'))  {
        var url = $(e.target).text().replace(/[\(\)]+/g,'');
        window.console.log( url );
    }
    // Markdown link click
    if(et.hasClass('cm-link'))  {
        var url = $(e.target).next('.cm-url').text().replace(/[\(\)]+/g,'');
        window.console.log( url );
    }
    
});

Greetings
Kel

4

Note that this may fail if there’s markers added to the text (for example to match parentheses), which will cause the span to be smaller than the whole URL. To be safe, you should use coordsChar to find the position at the click and match the text around that.

5

Oh, you are right.
But I’m afraid I’m very confused now :wink:

The step after having the line and char-number I miss.
Maybe you could help me again.

// Recognize link and url clicks
$('div.CodeMirror pre').on('click', function(e){
    
    var et = $(e.target);
    
    var x = e.pageX;
    var y = e.pageY;
    var coords = {left: x, top: y};
    var loc = editor.coordsChar(coords);
    
    window.console.log(loc);
    // Returns: Pos {line: 34, ch: 66, sticky: "before", xRel: -4.7044677734375}
    
    // .....
    
});