@uiw/codemirror-extensions-basic-setup

What is @uiw/codemirror-extensions-basic-setup?

@uiw/codemirror-extensions-basic-setup is an npm package that provides a set of basic extensions for CodeMirror 6, a versatile text editor implemented in JavaScript for the browser. This package includes a collection of commonly used extensions to set up a basic CodeMirror editor with essential functionalities such as syntax highlighting, line numbers, and more.

What are @uiw/codemirror-extensions-basic-setup's main functionalities?

Basic Setup

This code demonstrates how to set up a basic CodeMirror editor with the `basicSetup` extension. It initializes the editor state with a document and applies the basic setup extensions, then creates an editor view and attaches it to the DOM.

import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';

const state = EditorState.create({
  doc: 'Hello, CodeMirror!',
  extensions: [basicSetup]
});

const view = new EditorView({
  state,
  parent: document.body
});

Syntax Highlighting

This code sample shows how to add JavaScript syntax highlighting to the CodeMirror editor using the `basicSetup` extension along with the `@codemirror/lang-javascript` package.

import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { javascript } from '@codemirror/lang-javascript';

const state = EditorState.create({
  doc: 'const x = 10;',
  extensions: [basicSetup, javascript()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Line Numbers

This example demonstrates how to enable line numbers in the CodeMirror editor using the `basicSetup` extension along with the `lineNumbers` extension from `@codemirror/view`.

import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
import { EditorState } from '@codemirror/state';
import { EditorView } from '@codemirror/view';
import { lineNumbers } from '@codemirror/view';

const state = EditorState.create({
  doc: 'Line 1\nLine 2\nLine 3',
  extensions: [basicSetup, lineNumbers()]
});

const view = new EditorView({
  state,
  parent: document.body
});

Other packages similar to @uiw/codemirror-extensions-basic-setup

@codemirror/basic-setup

@codemirror/basic-setup is a package that provides a similar set of basic extensions for setting up a CodeMirror 6 editor. It includes essential features like line numbers, syntax highlighting, and more. It is very similar to @uiw/codemirror-extensions-basic-setup in terms of functionality and usage.

codemirror

The `codemirror` package is the original CodeMirror library for creating versatile text editors in the browser. While it is not specifically for CodeMirror 6, it provides a wide range of extensions and plugins for various functionalities. It is more mature and has a larger ecosystem compared to @uiw/codemirror-extensions-basic-setup.

@codemirror/view

@codemirror/view is a core package for CodeMirror 6 that provides the main editor view component. It allows for extensive customization and extension of the editor's appearance and behavior. While it does not bundle basic setup extensions, it is a fundamental building block for creating a CodeMirror 6 editor.

README

Basic Setup Extensions

Basic configuration for the CodeMirror6 code editor. This is the official basic-setup package fork, making configuration optional.

Install

npm install @uiw/codemirror-extensions-basic-setup --save

Usage

⚠️ Integrated into @uiw/react-codemirror package

import CodeMirror from '@uiw/react-codemirror';

function App() {
  return (
    <CodeMirror
      value="console.log('hello world!');"
      height="200px"
      basicSetup={{
        foldGutter: false,
        dropCursor: false,
        allowMultipleSelections: false,
        indentOnInput: false,
      }}
    />
  );
}
export default App;

import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { basicSetup, minimalSetup } from '@uiw/codemirror-extensions-basic-setup';

const state = EditorState.create({
  doc: 'my source code',
  extensions: [
    basicSetup({
      foldGutter: false,
      dropCursor: false,
      allowMultipleSelections: false,
      indentOnInput: false,
    }),
  ],
});

const view = new EditorView({
  parent: document.querySelector('#editor'),
  state,
});

import { EditorView } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
- import { basicSetup, minimalSetup } from 'codemirror';
+ import { basicSetup, minimalSetup } from '@uiw/codemirror-extensions-basic-setup';

const state = EditorState.create({
  doc: 'my source code',
  extensions: [
-    basicSetup
+    basicSetup({
+      foldGutter: false,
+      dropCursor: false,
+    })
  ],
});

const view = new EditorView({
  parent: document.querySelector('#editor'),
  state,
});

API

import { Extension } from '@codemirror/state';
export interface BasicSetupOptions extends MinimalSetupOptions {
  lineNumbers?: boolean;
  highlightActiveLineGutter?: boolean;
  foldGutter?: boolean;
  dropCursor?: boolean;
  allowMultipleSelections?: boolean;
  indentOnInput?: boolean;
  bracketMatching?: boolean;
  closeBrackets?: boolean;
  autocompletion?: boolean;
  rectangularSelection?: boolean;
  crosshairCursor?: boolean;
  highlightActiveLine?: boolean;
  highlightSelectionMatches?: boolean;
  closeBracketsKeymap?: boolean;
  searchKeymap?: boolean;
  foldKeymap?: boolean;
  completionKeymap?: boolean;
  lintKeymap?: boolean;
  /**
   * Facet for overriding the unit by which indentation happens. Should be a string consisting either entirely of spaces or entirely of tabs. When not set, this defaults to 2 spaces
   * https://codemirror.net/docs/ref/#language.indentUnit
   * @default 2
   */
  tabSize?: number;
}
/**
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.
*/
export declare const basicSetup: (options?: BasicSetupOptions) => Extension[];
export interface MinimalSetupOptions {
  highlightSpecialChars?: boolean;
  history?: boolean;
  drawSelection?: boolean;
  syntaxHighlighting?: boolean;
  defaultKeymap?: boolean;
  historyKeymap?: boolean;
}
/**
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).
*/
export declare const minimalSetup: (options?: MinimalSetupOptions) => Extension[];

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.