Inline evaluation LightTable/Swift style


#1

That would be great to have inline code evaluation like in LightTable or Swift + inline matplotlib plots. Thats the only feature I miss in Atom now.
Any line referencing output can be drawn inline: compiler/linter errors, single-line evaluation results, inline documantation lookup. It can be user specified, to put results inline or in the console. Its very handy for prototyping to evaluate many expressions and see it together with the code.
Examples: http://www.lighttable.com/images/inline.png http://www.lighttable.com/images/watches.png


#2

I would absolutely love this! It would make sense to implement this as a package though.


#3

Hey LightTable style inline eval has already been implemented in the awesome Hydrogen package https://github.com/willwhitney/hydrogen !


#4

Hydrogen looks interesting, but it uses an overlay to show results rather than embedding them into the editor instance as LightTable does.

Does anyone know if it’s even possible to embed results into the Atom editor?


#5

If you mean insert text into the editor, then yes. Significant portions of the API deal with manipulating text in editors.


#6

Thanks for the answer!

So what I mean was not just inserting plain text in the editor but blocks of html that can be formatted, and cause the lines below to be moved down to allow for placement of the block.

Hydrogen must have gone with overlay for some reason. I also recall several months ago reading about the optimized tile rendering for large files which made it seem unlikely, and at that point I did a bit of looking at the API and wasn’t able to determine if it was actually possible.

If it’s possible that would be awesome. Can you point to a place in the API to start investigating?


#7

So you mean the text inserted appears as a block in the text but it is not in the file. It is sort of a pane, right? Brackets does that.

We have discussed that here and there are several ideas. The only one that I think would work is to actually insert it in the text buffer but style it to look like a pane. Then when closing the block or saving the file, the text would be removed.


#8

Exactly, it’s just a block of HTML injected into the editor at a particular position and has has different styling rules than the editor. Some may appear at end of a line, and some may break to a newline. What I was hoping for was the ability to do what LightTable does with it’s inline results.


#9

You may want to look at the minimap or pigments packages. minimap inserts a canvas element inside the editor view to display a smaller version of the text. pigments, in certain modes, inserts small colored circles next to the text to display the color described in things like CSS.


#10

Looks like pigments uses an absolute position overlay (lines 28-30)
github.com/abe33/atom-pigments/blob/master/lib/renderers/dot.coffee

Minimap appears to attach at the root level of the element that contains the editor (line 132)
github.com/atom-minimap/minimap/blob/master/lib/minimap-element.coffee

I poked around at TextEditorElement and TextEditor classes a bit. Still not clear it’s even possible and don’t have time to research further for the time being.

Thanks for the help guys!


#11

IMHO it is not possible to open up a space between the actual editor lines. There is a ton of code that assumes the position based on the line number.

As I said before I think one can hack it by putting real lines in the buffer, mark those lines with css to make them look like a pane, hide the numbers for those lines, and then overwrite the line numbers below that pane. When saving the file or closing the fake pane those fake lines could be removed. The end result would be exactly what you want.

It is a real kludge, but I’d do it. The basic capability could be made into a module for anyone to use.


#12

Based on some further testing, when attempting to manually insert some elements after a line, I think your entirely correct that this is really the only option for embedded panes/results.


#13

The following may also be of interest:


#14

There is however a proposal to fix this


#15

Good news, it looks like as-cii has done the hard work and has an open pull request!


#16

And the pull request has been merged.

I have played around with the pull request, but still don’t know how to make the inserted block text selectable by the plugin, if anyone does, please mention it.


#17

I don’t know if it is the same code but block decorations have just been released in 1.6.0-beta. http://blog.atom.io/2016/02/03/introducing-block-decorations.html


#18

any news here?