Hello, I’m currently trying to implement a breakpoint system and was trying to use the old breakpoint demo as a starting point. I’m afraid, however, that it is just not possible to do that easily.
This is the CM5 Code sample from the demo:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
gutters: ["CodeMirror-linenumbers", "breakpoints"]
});
editor.on("gutterClick", function(cm, n) {
var info = cm.lineInfo(n);
cm.setGutterMarker(n, "breakpoints", info.gutterMarkers ? null : makeMarker());
});
function makeMarker() {
var marker = document.createElement("div");
marker.style.color = "#822";
marker.innerHTML = "●";
return marker;
}
This is what I have so far in CM6. My Problem is that I don’t know how to make the markers move with the document and I’m also not sure whether this is the right way to go in general.
If anyone here could point me in the right direction, I’d be grateful.
My code so far:
import {lineNumbers, gutter, GutterMarker} from '@codemirror/gutter';
class BreakMarker extends GutterMarker {
constructor(show) {
super();
this.show = show;
}
eq(other) {return false;}
toDOM() {
var el = document.createElement('span');
el.setAttribute("class",this.show ? "active" : "");
el.innerText = this.show ? "⬤" : "•";
return el;
}
}
var breakpoints = {};
export const breakPointGutter = gutter({
class: "ap-breakpoints",
renderEmptyElements: true,
domEventHandlers: {
click: (view, line) => {
var num = view.state.doc.lineAt(line.from).number;
breakpoints[num] = !breakpoints[num];
var changespec = {from: line.from, to: line.to};
var updated = view.state.update([{changes: changespec}]);
view.dispatch(updated);
}
},
lineMarker(view, line) {
var num = view.state.doc.lineAt(line.from).number;
return new BreakMarker(!!breakpoints[num]);
}
})