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

Panels

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

The panel system provides persistent UI elements above or below the editor content area.

Panel Interface

interface Panel {
  dom: HTMLElement;
  mount?(): void;
  update?(update: ViewUpdate): void;
  destroy?(): void;
  top?: boolean;
}

interface PanelConfig {
  topContainer?: (view: EditorView) => HTMLElement;
  bottomContainer?: (view: EditorView) => HTMLElement;
}

type PanelConstructor = (view: EditorView) => Panel;

Panel Functions

const showPanel: Facet<Panel | null>;

function panels(config?: PanelConfig): Extension;
function getPanel(view: EditorView, panel: PanelConstructor): Panel | null;

Usage Examples

Status Panel

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

const statusPanel = showPanel.of(() => {
  const dom = document.createElement("div");
  dom.className = "cm-status-panel";
  
  return {
    dom,
    top: false,
    update(update) {
      const selection = update.view.state.selection.main;
      const line = update.view.state.doc.lineAt(selection.head);
      dom.textContent = `Line ${line.number}, Column ${selection.head - line.from + 1}`;
    }
  };
});