Search code examples
javascriptcodemirrorcodemirror-modes

How can I limit an overlay to a specific range?


I want to add an overlay to my editor that will only apply in a given range (e.g. from line 3, column 44 to line 8, column 5).

The problem is that I couldn't come up with any way to find what the current line is in my token() method, since overlays are stateless, so I can't store the current line in the state.

I pored over the extensions in multiplex.js and overlay.js, and tried to grok how nested modes work, but I could not figure out a way to use any of these tools to help me here. Keep in mind I still want this to behave like an overlay, so without disturbing the base mode.

My alternative is to scan elements for the added class and manually modify them, using element.getBoundingClientRect() and cm.coorsChar() to check their position. But this is ugly, needs manual refreshing, and causes bugs when marked elements span across my range boundaries. Any idea on how to solve this properly?


Solution

  • You can't bound an overlay like that. But you also don't have to manually mess with the dom. The markText method provides a more convenient way to style specific pieces of your document.