tessl/npm-codemirror--view

DOM view component for the CodeMirror code editor

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Gutters

Name: tessl/npm-codemirror--view
Author: tessl

The gutter system provides line-based information display including line numbers, folding controls, breakpoints, and custom markers.

Core Gutter Functions

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

GutterMarker Class

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

Gutter Utility Facets

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

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

Usage Examples

Basic Line Numbers

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

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

Custom Gutter Markers

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