What is @codemirror/view?
The @codemirror/view package is a part of the CodeMirror 6 code editor ecosystem. It provides the view layer for the editor, which is responsible for rendering the document and handling user interactions. It is designed to be extensible and customizable, allowing developers to create sophisticated code editing interfaces.
What are @codemirror/view's main functionalities?
Editor View Creation
This feature allows you to create a new editor view and attach it to the DOM. The 'parent' option specifies the DOM element to which the editor should be appended.
import { EditorView } from '@codemirror/view';
const view = new EditorView({
parent: document.body
});
Customizing the Appearance
This feature enables customization of the editor's appearance using decorations and extensions, such as highlighting special characters, drawing selections, and showing a drop cursor.
import { EditorView, highlightSpecialChars, drawSelection, dropCursor } from '@codemirror/view';
const view = new EditorView({
parent: document.body,
decorations: EditorView.decorations.of(highlightSpecialChars()),
extensions: [drawSelection(), dropCursor()]
});
Handling User Input
This feature involves handling user input through keymaps, which define how keyboard events are handled. The 'defaultKeymap' provides a set of standard key bindings for common editor actions.
import { EditorView, keymap } from '@codemirror/view';
import { defaultKeymap } from '@codemirror/commands';
const view = new EditorView({
parent: document.body,
extensions: [keymap.of(defaultKeymap)]
});
Other packages similar to @codemirror/view
monaco-editor
Monaco Editor is the code editor that powers VS Code. It offers rich IntelliSense, validation, and advanced editing features. Compared to @codemirror/view, Monaco is a full-featured editor with a larger bundle size and is less modular.
ace
Ace is a standalone code editor written in JavaScript. It provides syntax highlighting, themes, and extensions. While Ace is also extensible and customizable, @codemirror/view is part of a newer generation of editors with a more modern and modular architecture.
codemirror
CodeMirror (version 5 and below) is the predecessor to @codemirror/view. It is a versatile text editor implemented in JavaScript for the browser. Compared to @codemirror/view, it is less modular and not as optimized for performance and extensibility in modern web applications.
6.32.0 (2024-08-12)
Bug fixes
Fix a bug where the editor could draw way too big a viewport when not managing its own scrollbar.
New features
The new gutterWidgetClass
facet makes it possible to add a class to gutter elements next to widgets.