How to work in Atom Editor's view directly

Question

What I'm trying to do is somewhat bizarre - I want to add lines in some views that simply don't belong to the sourcecode. The idea is to use on a package that it would allow "layers" - like, for example, typing information or diff info.

What I'm trying to do is like the image below: notice that between line 45 and 46, there is a gap that would not be selectable by the user, nor it would be editable - it's just an additional info that I put there.

So far, I tried to create a marker with overlay, but the marker "floats" over the text, so it overlaps with what's already written (and there goes the notion of "Layers"). I've tried to edit the DOM directly, but when I scroll, if I add lines, they are invalidated or they scroll incorrectly (and it would need to update the cursor, gutter information and more things)

Is it possible? Is there a workaround?

Answer 1

This is already older, but as I understand it the Block Decorations that will be part of Atom 1.6 will do exactly what you want.

As described in the blog post, "A block decoration is a special kind of decoration that allows you to insert a DOM node before or after a certain line, and have it follow the line as the buffer changes. You can see it in action by running the snippet below in the DevTools":

var element = document.createElement('div')
element.textContent = 'Block decorations!'
var editor = atom.workspace.getActiveTextEditor()
var marker = editor.markScreenPosition([0, 0])
editor.decorateMarker(marker, {type: 'block', position: 'before', item: element})

Please note that as of now this only works in the Atom 1.6 beta release.