@codemirror/view

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.

README

@codemirror/view

[ 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.

Changelog

0.19.10 (2021-11-02)

Bug fixes

Don't crash when IntersectionObserver fires its callback without any records. Try to handle some backspace issues on Chrome Android

Using backspace near uneditable widgets on Chrome Android should now be more reliable.

Work around a number of browser bugs by always rendering zero-width spaces around in-content widgets, so that browsers will treat the positions near them as valid cursor positions and not try to run composition across widget boundaries.

Work around bogus composition changes created by Chrome Android after handled backspace presses.

Work around an issue where tapping on an uneditable node in the editor would sometimes fail to show the virtual keyboard on Chrome Android.

Prevent translation services from translating the editor content. Show direction override characters as special chars by default

specialChars will now, by default, replace direction override chars, to mitigate https://trojansource.codes/ attacks.

New features

The editor view will, if parent is given but root is not, derive the root from the parent element.

Line decorations now accept a class property to directly add DOM classes to the line.