Built-in Extensions

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

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

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

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

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

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

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

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