Gutters

function lineNumbers(config?: LineNumberConfig): Extension;
function highlightActiveLineGutter(): Extension;
function gutter(config: GutterConfig): Extension;
function gutters(config?: GutterConfig[]): Extension;

abstract class GutterMarker {
  toDOM?(view: EditorView): Node;
  abstract eq(other: GutterMarker): boolean;
  destroy?(dom: Node): void;
  
  readonly elementClass: string;
  readonly domAtPos: boolean;
}

const gutterLineClass: Facet<string>;
const gutterWidgetClass: Facet<string>;
const lineNumberMarkers: Facet<RangeSet<GutterMarker>>;

function lineNumberWidgetMarker(marker: GutterMarker, side: -1 | 1): Extension;

import { lineNumbers } from "@codemirror/view";

const editor = new EditorView({
  state: EditorState.create({
    extensions: [lineNumbers()]
  }),
  parent: document.body
});

class BreakpointMarker extends GutterMarker {
  toDOM() {
    const marker = document.createElement("div");
    marker.className = "breakpoint-marker";
    marker.innerHTML = "●";
    return marker;
  }
  
  eq(other: GutterMarker) {
    return other instanceof BreakpointMarker;
  }
}

const breakpointGutter = gutter({
  class: "cm-breakpoint-gutter",
  markers: (view) => {
    // Return RangeSet of breakpoint markers
    return getBreakpointMarkers(view.state);
  }
});