As you can see in the following screenshot:

Ace editors have a 'gutter' on the left-hand side that contains the line numbers. I would like to detect a click on this gutter and insert a marker for a breakpoint, as in the following screenshot from chrome dev tools

I've had a look at the Ace editor API, but can't figure out how to do it, could someone tell me the best way to go about it?

Thanks

As you can see in the following screenshot:

Ace editors have a 'gutter' on the left-hand side that contains the line numbers. I would like to detect a click on this gutter and insert a marker for a breakpoint, as in the following screenshot from chrome dev tools

I've had a look at the Ace editor API, but can't figure out how to do it, could someone tell me the best way to go about it?

Thanks

• javascript
• web
• editor
• breakpoints
• ace-editor

1 Answer 1

See this thread https://groups.google./d/msg/ace-discuss/sfGv4tRWZdY/ca1LuolbLnAJ

you can use this function

editor.on("guttermousedown", function(e) {
    var target = e.domEvent.target; 
    if (target.className.indexOf("ace_gutter-cell") == -1)
        return; 
    if (!editor.isFocused()) 
        return; 
    if (e.clientX > 25 + target.getBoundingClientRect().left) 
        return; 

    var row = e.getDocumentPosition().row;
    e.editor.session.setBreakpoint(row);
    e.stop();
})

and don't forget to add some styling for breakpoints e.g.

.ace_gutter-cell.ace_breakpoint{ 
    border-radius: 20px 0px 0px 20px; 
    box-shadow: 0px 0px 1px 1px red inset; 
}

Breakpoints are often toggled. To achieve this behavior, use

...

var breakpoints = e.editor.session.getBreakpoints(row, 0);
var row = e.getDocumentPosition().row;
if(typeof breakpoints[row] === typeof undefined)
    e.editor.session.setBreakpoint(row);
else
    e.editor.session.clearBreakpoint(row);

...

Notice the strange use of EditSession.getBreakpoints(), which doesn't return an array of row numbers as documentation suggests, but rather an array with indices corresponding to the row numbers.