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.4.0 (2022-10-18)
Bug fixes
Avoid an issue where scrollPastEnd
makes a single-line editor have a vertical scrollbar.
Work around a Chrome bug where it inserts a newline when you press space at the start of a wrapped line.
Align rectangularSelection
's behavior with other popular editors by making it create cursors at the end of lines that are too short to touch the rectangle.
Fix an issue where coordinates on mark decoration boundaries were sometimes taken from the wrong side of the position.
Prevent scrolling artifacts caused by attempts to scroll stuff into view when the editor isn't being displayed.
New features
TooltipView
objects can now provide a destroy
method to be called when the tooltip is removed.