Overlapping annotations in CodeMirror

I want to use CodeMirror in an application for text annotation (like this


The annotations should be able to overlap and they should be editable (i.e. you can select some text and create an annotation).

As far as I understand, with CM6 I should be able to write a Plugin that creates corresponding Decorations. However, I were not able to figure out to register a plugin with an EditorView from the existing examples.

Is there a minimal example explaining how to register a plugin (or to create decorations without a plugin, if that’s also possible)?

Best wishes

Possibly the current version of the (unpublished) system guide is helpful: https://github.com/codemirror/website/blob/master/site/docs/guide/index.md

Yes, this is really helpful! Even if it’s still wip, it’d definitely helps if it would be published.

@cgawron Here’s a thread about some of difficulties of this problem: Overlapping Text Annotations

Did you find a way to make this work?

I’m currently at the point that I understand the issues you ran into with the MarkDecorations.
The PointDecoration created by Decoration.replace() seem to provide more flexibility, but I could not yet figure out how I get the replaced text in the Widget.toDOM() method (so that I can display it along with an overlay).
Do you also develop a tool like BRAT/WebAnno?

@marijn: Am I supposed to create an individual instance of WidgetType<T> for every PointDecoration (so that I can store the replaced text in T)? My first understanding was that the WidgetType instances are supposed to be shared, but than I’m missing a reference to the associated decoration and/or range in the WidgetType.toDOM() method.

If they have a different value, yes. These are compared to figure out whether a given widget in the content needs to be redrawn. If you have a bunch of conceptually-identical widgets you can use the same instance for them, but if not, you’ll want separate instances.