Draw a "color rect" in the gutter, depending on the current line code

Hi, I would like to be able to draw a “color rect” in the gutter, depending on the current line code
example :
If my current line is Preformatted text{“wName”:“wsNodeDevDocumentsManager”,“wColor”:"#ddc4c4"},

I would like to draw a small rectangle filled with ‘#ddc4c4’. (See screenshot below)
(Just like in the Idea “intellij” editor)

What would be the best approach.
Thanks!

Capture

1 Like

See the gutters option and the addGutterMarker method.

That would be setGutterMarker I assume?

Where can this be hooked into the CodeMirror machinery? How do you determine the line number?

Missing some pieces of the puzzle here.

Those are rather basic questions—if you want to draw a rectangle in front of a specific line, I’d hope that you know which line, and thus are able to get its line number. My previous reply links the manual, which describes the way to use this functionality.

I’d hope that you know which line

Well, unfortunately I don’t. It depends on the contents of the line. So how do we scan the text (and possible new text entered by the user) matching the pattern we are looking for? In an overlay/addon?

An addon could scan the initial document and then listen to "changes" events to track changes, using them to keep a set of matches in the current document and the corresponding gutter markers.

I’m not quite sure what you’re doing but maybe this will help

doc.eachLIne(), or cm.eachLine(), loops through all the lines. If you need the total number of lines see doc.lineCount() or doc.lastLine()

doc.eachLine() calls a function of lineHandlle

I couldn’t find any documentation on what a lineHandle object looks like, and it varies depending the gutter state, so use this temporary code

cm.on("gutterClick", function(cm, line, gutter, e) {
	var handle = cm.getLineHandle(line)
	console.info(gutter)
	console.info(handle) // the whole object
	console.info('text: '+handle.text) // just the text
	console.info('line = '+cm.getLineNumber(handle))
});

Open your console and click on a line in the gutter

1 Like

Try this

cm.on("gutterClick", function(cm, line, gutter, e) { ////////////////temporary code ////////////////////
	var color = ["no color"]
	var handle = cm.getLineHandle(line)
	var check = handle.text.match(/{“wName”:“wsNodeDevDocumentsManager”,“wColor”:"#ddc4c4"}/)
	if(check) color = handle.text.match(/#[a-f0-9]{6}/)
	console.info(gutter)
	console.info(handle) // the whole object
	console.info('text: '+handle.text) // just the text
	console.info('line = '+cm.getLineNumber(handle))
	if(check) console.info("I found it")
	console.info('color = '+color[0])
});

Click on any line, then click on {“wName”:“wsNodeDevDocumentsManager”,“wColor”:"#ddc4c4"}