Insert line widget at the end of line

Question

I am writing a tool which validates predicate logic proofs that were entered into a CodeMirror editor instance in realtime. For that purpose, I want to display dynamically generated information right next to the line the information is associated to. Additionally, these hints should be aligned within a block but should not cover any code. Sadly, I have no clue how to hack codemirror so that this will work.

My current approach is to display the hint below the line using "LineWidgets":

But this looks quite confusing. My aim is to achive something like this (of course without the blank lines):

Both LineWidgets and Widgets does not come into question, because LineWidgets always take a whole line and Widgets act like a character which can be removed by the user. Also, widgets cannot be aligned vertically.

Does someone have an idea or suggestions how these hints could be displayed?

Answer 1

I think the most promising approach is to create your own absolutely positions DOM nodes, outside of the editor, and position them using charCoords and similar methods. Of course, you'll have to listen for "change" events and reposition your widgets when necessary, but unless you are dealing with large documents with thousands of widgets, this should be fast. (And if you are, write your repositioning logic in such a way that it knows about the current viewport, and only positions visible widgets.)