Breakpoints in CM6?

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]);
  }
})

You’ll want to return this.show == other.show from the eq method (no need to redraw markers when they don’t change).

And though you didn’t tell us what is going wrong with your code, I guess the problem is related to the updating of markers. You’ll want to keep breakpoints in your editor state and update it (in a copying/immutable way) with a state effect, so that editor updates are kept in sync with marker updates.