Panels

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;

const showPanel: Facet<Panel | null>;

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

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