Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@codemirror/view
Advanced tools
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.
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)]
});
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 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 (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.
[ WEBSITE | DOCS | ISSUES | FORUM | CHANGELOG ]
This package implements the DOM view component for the CodeMirror code editor.
The project page has more information, a number of examples and the documentation.
This code is released under an MIT license.
We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.
6.29.0 (2024-07-25)
Fix an issue that caused typing into an editor marked read-only to cause document changes when using EditContext
.
Associate a cursor created by clicking above the end of the text on a wrap point with the line before it.
The package now exports the type of hover tooltip sources as HoverTooltipSource
.
FAQs
DOM view component for the CodeMirror code editor
The npm package @codemirror/view receives a total of 1,369,451 weekly downloads. As such, @codemirror/view popularity was classified as popular.
We found that @codemirror/view demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.