codemirror

  • Version 6.0.1
  • Published
  • 17.8 kB
  • 7 dependencies
  • MIT license

Install

npm i codemirror
yarn add codemirror
pnpm add codemirror

Overview

Basic configuration for the CodeMirror code editor

Index

Variables

variable basicSetup

const basicSetup: Extension;
  • This is an extension value that just pulls together a number of extensions that you might want in a basic editor. It is meant as a convenient helper to quickly set up CodeMirror without installing and importing a lot of separate packages.

    Specifically, it includes...

    - [the default command bindings](https://codemirror.net/6/docs/ref/#commands.defaultKeymap) - [line numbers](https://codemirror.net/6/docs/ref/#view.lineNumbers) - [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars) - [the undo history](https://codemirror.net/6/docs/ref/#commands.history) - [a fold gutter](https://codemirror.net/6/docs/ref/#language.foldGutter) - [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection) - [drop cursor](https://codemirror.net/6/docs/ref/#view.dropCursor) - [multiple selections](https://codemirror.net/6/docs/ref/#state.EditorState^allowMultipleSelections) - [reindentation on input](https://codemirror.net/6/docs/ref/#language.indentOnInput) - [the default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle) (as fallback) - [bracket matching](https://codemirror.net/6/docs/ref/#language.bracketMatching) - [bracket closing](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets) - [autocompletion](https://codemirror.net/6/docs/ref/#autocomplete.autocompletion) - [rectangular selection](https://codemirror.net/6/docs/ref/#view.rectangularSelection) and [crosshair cursor](https://codemirror.net/6/docs/ref/#view.crosshairCursor) - [active line highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLine) - [active line gutter highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLineGutter) - [selection match highlighting](https://codemirror.net/6/docs/ref/#search.highlightSelectionMatches) - [search](https://codemirror.net/6/docs/ref/#search.searchKeymap) - [linting](https://codemirror.net/6/docs/ref/#lint.lintKeymap)

    (You'll probably want to add some language package to your setup too.)

    This extension does not allow customization. The idea is that, once you decide you want to configure your editor more precisely, you take this package's source (which is just a bunch of imports and an array literal), copy it into your own code, and adjust it as desired.

variable minimalSetup

const minimalSetup: Extension;
  • A minimal set of extensions to create a functional editor. Only includes [the default keymap](https://codemirror.net/6/docs/ref/#commands.defaultKeymap), [undo history](https://codemirror.net/6/docs/ref/#commands.history), [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars), [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection), and [default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle).

Package Files (1)

Dependencies (7)

Dev Dependencies (1)

Peer Dependencies (0)

No peer dependencies.

Badge

To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/codemirror.

  • Markdown
    [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/codemirror)
  • HTML
    <a href="https://www.jsdocs.io/package/codemirror"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>