Hover previews (image, color, etc:)

Any idea on how to add hover event previews?

Best example I can give is when you hover over an image tag in html or say a background image in css. The image will show in a preview.

Brackets and Dabblet have this feature integrated if you want to see it in action.

Right now, the core of inlet works by finding the location of the cursor

Inlet/src/inlet.js

Line 186 in ed840d9

var cursor = editor.getCursor(true);

in the onclick function

Inlet/src/inlet.js

Line 178 in ed840d9

function onClick(ev) {

fired by mouseup

Inlet/src/inlet.js

Line 32 in ed840d9

wrapper.addEventListener("mouseup", onClick);

matching for URLs and determining a preview for images shouldn't be too hard to add similar to these click events. I am more inclined to like the idea of needing a click than hovers so that you don't accidentally cover code when you move your mouse around (and hovers are not mobile friendly), but I do like the demo you posted.

You can attach a mouseover handler to any element in the editor, but we need to know what is under the hovering mouse, and if it's something to preview. One idea:

only attach that to parts that are URLs in the text (which is what the dabblet demo seems to do on the "url" class - note that the class "url" gets appended to the span when the url('') pattern is found on the page) this would require finding these tokens in the text and appending when the editor text changes.

I was playing with this idea for a bit today: http://kodeweave.sourceforge.net/editor/#f5643481378a470cd08ea0d848319883

Not the best solution, but something to work with encase anyone wants to go further with integration.

Basically when you hover over .CodemIrror-lines it searches the string in line to see if it has a color value, if it does color is displayed, and the same goes for if the string contains an image.

NOTE: .Codemirror-lines is a pre tag which in Codemirror is a display block element so when hovered on the far right your color/image will still show.

Here's a preview.

This is awesome. My only comment is that we might want to handle multiple colors on one line (I don't think this is too uncommon when doing datavis programming)

That's very common in CSS. Especially when working with gradients.

background: radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%, #827bd1 100%);

but also would have to handle images and colors on the same line too.

background: url("http://i.imgbox.com/GR1ChmDu.png"), radial-gradient(ellipse at center,  rgba(255,255,255,1) 0%, #d179ca 100%);