Open links when shift-click on link or url

[ayaankazerouni]

Before submitting your PR please make sure:

• You worked on the develop branch (or any other branch which was forked from develop),
• Your PR is not targeting the master branch,
• You tested your code and it works.

Related to: #198

Caveats:

The links only open when they're in the form https://github.com. Simple github.com or www.github.com won't do anything. I'm unsure if this is something electron does on purpose. @brrd Any ideas?

[brrd]

Any ideas?

According to the documentation about shell.openExternal():

Open the given external protocol URL in the desktop’s default manner. (For example, mailto: URLs in the user’s default mail agent).

So I think if the URL doesn't start with the protocol then the shell module can not guess how to open it.

Why not adding it when it misses?

[brrd]

if (url === "") return;
var hasProtocol = /^[a-z]+:\/\//.test(url);
if (!hasProtocol) {
    url = "http://" + url;
}
shell.openExternal(url);

[brrd]

Few comments about this PR:

Raw URL

It obviously doesn't work with raw URL:

This is working: [Test](http://google.com)

But clicking this does nothing: http://google.com

Pointer

I don't see the pointer when Alt key is pressed on a link, but a crosshair (I tried it on Windows 10). Probably related to https://github.com/codemirror/CodeMirror/blob/dda5d7220f0e3cbf8c203223ee4e7dc2d5c04bec/src/edit/key_events.js#L119

Alt key

I would not use Alt key because 1) on Windows and some Linux DE the Alt key also triggers the menu if it's hidden, making the editor contents move with possible confusion about what is clicked, 2) Alt is already used by CodeMirror for column selection.

Control/command is already used for multiple cursors and Shift is used for extending the current selection. My suggestion would be to:

1. use the Shift key
2. trigger the function on "mouseup" (instead of "mousedown")
3. stop execution if something is selected in the editor (cm.doc.somethingSelected())

This would also solve the pointer issue.

What do you think?

[ayaankazerouni]

Raw URL

Ok, this is dealt with. The following cases work:

http://google.com (raw url)
http://github.com ("github" is seen as a spelling error, so it breaks the link into `spans`)
[Facebook](facebook.com) (standard MD link without protocol)
[Facebook](https://facebook.com) (standard MD link)

Pointer, Alt Key

Ok, using Shift key now, when nothing is selected. CodeMirror doesn't seem to emit a mouseup event. What are the downsides of using mousedown?

[brrd]

What are the downsides of using mousedown?

Selection is not updated yet when mousedown event is fired, so cm.somethingSelected() will refer to the previous selection.

CodeMirror doesn't seem to emit a mouseup event.

You don't need to use CodeMirror events, you can simply do:

document.addEventListener("mouseup", function () {
// Do stuff
});

[brrd]

This part is smart, but I had to read it twice to understand why you did it this way. Could you rename the class name in something less confusing (maybe "link-clickable")?

[ayaankazerouni]

I now open the link on mouseup as requested. But I have to listen to mousedownas well to preventDefault the standard shift-click behaviour (it selects text between the original cursor position and the clicked position). I check for the same set of conditions as in mouseup to avoid to preventing default behaviour any more than necessary.

[brrd]

Thanks!

[ayaankazerouni]

No problem! This is a great app! Do you have an ETA on the next release?

[brrd]

As soon as possible! (I'm too busy right now 😕)