Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@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.10.0 (2023-04-25)
Fix a crash in drawSelection
when a measured position falls on a position that doesn't have corresponding screen coordinates.
Work around unhelpful interaction observer behavior that could cause the editor to not notice it was visible.
Give the cursor next to a line-wrapped placeholder a single-line height.
Make sure drop events below the editable element in a fixed-height editor get handled properly.
Widget decorations can now define custom coordsAtPos
methods to control the way the editor computes screen positions at or in the widget.
FAQs
DOM view component for the CodeMirror code editor
The npm package @codemirror/view receives a total of 1,385,458 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.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.