CodeMirror Basic Setup

CodeMirror Basic Setup provides convenient configuration presets for the CodeMirror 6 code editor. It offers both comprehensive and minimal setup extensions that bundle together commonly needed editor features, allowing developers to quickly initialize CodeMirror without manually configuring individual extensions.

Package Information

• Package Name: codemirror
• Package Type: npm
• Language: TypeScript
• Installation: npm install codemirror

Core Imports

import { basicSetup, minimalSetup, EditorView } from "codemirror";

For CommonJS:

const { basicSetup, minimalSetup, EditorView } = require("codemirror");

Basic Usage

import { EditorView, basicSetup } from "codemirror";

// Create editor with comprehensive setup
const view = new EditorView({
  parent: document.body,
  doc: "Hello World",
  extensions: [basicSetup]
});

// Create editor with minimal setup
const minimalView = new EditorView({
  parent: document.body,
  doc: "Hello World", 
  extensions: [minimalSetup]
});

Architecture

CodeMirror Basic Setup is a simple configuration package that provides pre-bundled extension arrays:

• Two Extension Presets: basicSetup (comprehensive) and minimalSetup (minimal) configuration bundles
• Pre-configured Arrays: Extensions are pre-assembled into ready-to-use arrays
• Dependency Aggregator: Bundles multiple @codemirror packages into convenient presets
• Copy-and-Customize Pattern: Source code is meant to be copied and modified rather than extended

This package serves as a convenience wrapper around the modular @codemirror ecosystem, providing example configurations that can be used directly or as starting points for custom setups.

Capabilities

Basic Setup Extension

Comprehensive editor setup with all common features for a full-featured code editor experience.

/**
 * Comprehensive editor setup including line numbers, syntax highlighting,
 * bracket matching, autocompletion, search, folding, multiple selections,
 * and complete keymap bindings for all features.
 */
const basicSetup: Extension;

Features included:

• Line numbers with active line gutter highlighting
• Special character highlighting
• Undo/redo history with keymap bindings
• Code folding with gutter and keymap bindings
• Custom selection drawing and drop cursor
• Multiple selections support
• Automatic indentation on input
• Syntax highlighting with default style (fallback)
• Bracket matching and automatic bracket closing
• Autocompletion with keymap bindings
• Rectangular selection with crosshair cursor
• Active line highlighting
• Selection match highlighting
• Complete keymap including: close brackets, default commands, search, history, folding, completion, and linting

Minimal Setup Extension

Essential editor features for a functional but lightweight code editor.

/**
 * Minimal editor setup with only essential features: special character
 * highlighting, undo history, selection drawing, syntax highlighting,
 * and basic keymap bindings.
 */
const minimalSetup: Extension;

Features included:

• Special character highlighting
• Undo/redo history with keymap bindings
• Custom selection drawing
• Syntax highlighting with default style (fallback)
• Basic keymap bindings (default commands and history)

EditorView Class

The main CodeMirror editor view class, re-exported for convenience from @codemirror/view.

/**
 * The main CodeMirror editor view class (re-exported from @codemirror/view)
 * This is the complete EditorView class from the @codemirror/view package.
 * Refer to @codemirror/view documentation for full API details.
 */
export { EditorView } from "@codemirror/view";

Types

/**
 * CodeMirror extension type (from @codemirror/state)
 * Represents a configuration unit that can extend editor functionality
 */
type Extension = any;

Note: This package only exports the Extension type and re-exports EditorView. For complete type definitions of EditorView, EditorState, Transaction, and other CodeMirror types, refer to the respective @codemirror/* packages.