Adding a widget at the end of line

1

I’m using CodeMirror to create a free-form todo list webapp and I need to add a widget at the end of each line. The widget is used to summarize metadata in a hierarchical list like this, where (…) is the replacedWith element showing the summaries and […] is the user entered metadata:

Stuff To Do (2h30m #code #design)
  o add end of line widgets [2h #code]
  o style end of line widgets [30m #design]

I’ve tried the following:

  1. Use doc.markText() to mark an empty range at the end of the line using the atomic, collapsed and replacedWith options. However it seems empty ranges (where start.ch == end.ch == line.length - 1 or line.length) are ignored by doc.markText().

  2. Used the ‘changes’ event to append a space to the end of any line that doesn’t have one and then use doc.markText() using the atomic, collapsed and replacedWith options to mark the trailing space. This works but it causes other problems when editing. I also don’t like the extra character being appended.

Is there another way that I can append an element to the end of each line and maintain its position there?

Thanks for creating CodeMirror it is a great library.

2

The setBookmark method can be used to create markers for empty stretches of text.

3

I just updated and simplified my code using setBookmark() and it works. Thank you very much!