How to draw shapes and text on top of the editor?


#1

I’m working on a plugin that needs to display information on top of the active editor, such as simple shapes and text. This wouldn’t be a decoration on the text, but rather something on a layer above the editor.

From the API reference, it seems as though it should be possible to do this, perhaps by modifying the DOM. Any suggestions?


#2

If you are creating a tooltip, you want to use editor.decorateMarker() with type as block or overlay depending on how you want to position your decoration. Those two types will take an item entry that should consist of something that renders to an HTML element (as stated in the documentation I’ve linked).

You can, of course, create an HTMLElement through document, but I’d recommend taking a look at the etch library. It works very similarly to React components, and is especially useful if your view needs to keep track of its state or change dynamically.