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

Built-in Extensions

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

CodeMirror provides a collection of ready-to-use extensions for common editor features.

Selection and Cursor Extensions

function drawSelection(): Extension;
function dropCursor(config?: DropCursorConfig): Extension;
function rectangularSelection(options?: RectangularSelectionOptions): Extension;
function crosshairCursor(options?: CrosshairCursorOptions): Extension;

Text Highlighting Extensions

function highlightSpecialChars(config?: SpecialCharConfig): Extension;
function highlightActiveLine(): Extension;
function highlightWhitespace(config?: HighlightWhitespaceOptions): Extension;
function highlightTrailingWhitespace(config?: HighlightTrailingWhitespaceOptions): Extension;

UI Enhancement Extensions

function placeholder(content: string | HTMLElement): Extension;
function scrollPastEnd(): Extension;

Configuration Interfaces

interface DropCursorConfig {
  color?: string;
  class?: string;
}

interface SpecialCharConfig {
  render?: (code: number, description: string | null, placeHolder: string) => HTMLElement | null;
  specialChars?: RegExp;
  addSpecialChars?: RegExp | null;
}

Usage Examples

Basic Editor Setup

import { 
  EditorView, 
  drawSelection, 
  highlightActiveLine, 
  dropCursor,
  rectangularSelection,
  highlightSpecialChars
} from "@codemirror/view";

const extensions = [
  drawSelection(),
  highlightActiveLine(),
  dropCursor(),
  rectangularSelection(),
  highlightSpecialChars()
];

const view = new EditorView({
  state: EditorState.create({ extensions }),
  parent: document.body
});

Placeholder Text

const placeholderExt = placeholder("Enter your code here...");

// Or with HTML element
const placeholderElement = document.createElement("div");
placeholderElement.innerHTML = "<em>Type something...</em>";
const htmlPlaceholder = placeholder(placeholderElement);

Custom Special Character Rendering

const customSpecialChars = highlightSpecialChars({
  render: (code, description, placeholder) => {
    const span = document.createElement("span");
    span.className = "cm-special-char";
    span.textContent = `[${String.fromCharCode(code)}]`;
    span.title = description || `Character code ${code}`;
    return span;
  },
  addSpecialChars: /[\u200b-\u200f]/g // Zero-width characters
});