hyperlinking a text in codemirror

Meta
1

I want a part of code in codemirror to be turned into hyperlink on alt-mouseover. Can someone suggest a good way to do it ?

2

You can’t turn the content DOM itself into a hyperlink, but you can do something like this:

  • Register a mouseover handler on the editor

  • When the mouse goes over a token that you are interested in (say, a span with cm-link class, or you could use markText to add a specific class to the elements you’re interested in)…

  • Use charCoords to find the position of that token and overlay your own link, styled to look like the content, over the editor.

1 Like
3

You can also try to use markText to replace the text with an atomic element that you watch for mouseovers on. You won’t really be able to edit it as easily, though.

4

Would it be possible to use an anchor tag, for better accessibility?

5

Not in CodeMirror 5.x, but version 6 allows you to wrap decorated text in arbitrary inline tags.

6

Wait seriously, how?

7

See the tagName option to Decoration.mark.