detect hyperlinks in plain text and display them correctly

[pawelniegowski]

Most Markdown parsers, including Github's own (https://guides.github.com/features/mastering-markdown/) automatically mark http/https strings as hyperlinks in text and make them clickable. The square brackets syntax is impractical for a note-taking app - see similar features in vimwiki, for example.

This doesn't seem to introduce a lot of complexity or performance hit, and would make the editor a lot more usable.

[moughxyz]

We use CodeMirror for most MD editors, so if they allow this, we can add it. Haven't seen it done before though.

[pawelniegowski]

Seems like switching CM's mode to Github-flavored will do that out of the box https://codemirror.net/mode/gfm/index.html .

[bschlagel]

Came here to post this exact same request! After signing up for an extended account I spent a few hours playing around with all the editors, and the biggest thing I immediately found missing vs. Simplenote was the lack of clickable hyperlinks, something I use probably dozens of times per day, in all sorts of notes.

@mobitar if as the above comment suggests this could be supported with 'GFM Mode' in CodeMirror, hopefully this would be doable, and an enormously helpful enhancement. Ideally could be enabled for all the different Markdown editor options…must admit I'm not totally sure all the differences between 'em but if they're all based on CodeMirror, may as well :)

[moughxyz]

Links don't appear to be clickable in the GFM mode demo above.

[bschlagel]

Ah darn, yeah I see that now. It does seem to be properly parsing the links though and adding markup to show them blue highlighted/underlined…just not making them clickable!

When I inspect the example there, looks like link are getting wrapped in a special class, e.g.: <span class="cm-link">http://github.github.com/github-flavored-markdown/</span>

So it seems all it would take to make them clickable would be to wrap any such elements in an a tag e.g.: <a href="http://github.github.com/github-flavored-markdown/"><span class="cm-link">http://github.github.com/github-flavored-markdown/</span></a>

(Where the href value = identical to the text within the span.cm-link)

Does that seem like something that would be possible to add?

[moughxyz]

I'm not sure, but even if it were, overriding CodeMirror behavior is outside the scope of my experience. Would happily welcome a PR though if it were possible.

[bschlagel]

Gotcha. I also have no experience mucking around with overriding CodeMirror and not sure how feasible that would be. May be a little above my pay grade but does seem worth exploring :)

Any downside to enabling "GFM mode" in CodeMirror anyway so it at least highlights the links? Might make it easier to then add an extension to make them clickable, since the parsing would already be done at least?

I'd also be happy for this functionality (clickable hyperlinks) to work with the basic default editor, if that seems like a possibility. Not sure if that might be simpler than extending the CodeMirror functionality, guessing probably not…

I'm happy to look into this more at some point, just want to make sure I start in the right direction. Thanks!

[bschlagel]

Update: found this reference which seems to address basically how this could be done—

https://stackoverflow.com/questions/26933344/codemirror-detect-and-create-links-inside-editor

Sounds like the first step, an "overlay mode" recognizing links, might already be taken care of by the GFM mode, which adds the cm-link class.

So then would basically need to:

• Add a click listener, detect if target has cm-link class
• Use coordsChar to get clicked position in the doc + extract the link

Idk if that's the best solution but sounds like one approach at least.

[moughxyz]

Hmm interesting. Yeah a little too custom for my liking. But we can leave this open to see if anyone would be interested in working on it.