node_modules ignore

This commit is contained in:
oier committed 2025-05-08 23:43:47 +02:00
1 parent e19d52f172
commit 4574544c9f
65041 files changed
+10593536

No files matched your search

+187
View File
@@ -0,0 +1,187 @@
<!--rehype:ignore:start-->
# Basic Setup Extensions
<!--rehype:ignore:end-->
[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor)
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-basic-setup.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-basic-setup)
Basic configuration for the CodeMirror6 code editor. This is the official [basic-setup](https://github.com/codemirror/basic-setup) package fork, making configuration optional.
## Install
```bash
npm install @uiw/codemirror-extensions-basic-setup --save
```
## Usage
⚠️ Integrated into [**@uiw/react-codemirror**](https://npmjs.com/@uiw/react-codemirror) package
```jsx
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;
```
```js
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,
});
```
```diff
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
```ts
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!
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
</a>
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
## License
Licensed under the MIT License.
@@ -0,0 +1,82 @@
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[];
+125
View File
@@ -0,0 +1,125 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.minimalSetup = exports.basicSetup = void 0;
var _view = require("@codemirror/view");
var _state = require("@codemirror/state");
var _commands = require("@codemirror/commands");
var _search = require("@codemirror/search");
var _autocomplete = require("@codemirror/autocomplete");
var _language = require("@codemirror/language");
var _lint = require("@codemirror/lint");
/**
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.
*/
var basicSetup = exports.basicSetup = function basicSetup() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _options$crosshairCur = options.crosshairCursor,
initCrosshairCursor = _options$crosshairCur === void 0 ? false : _options$crosshairCur;
var keymaps = [];
if (options.closeBracketsKeymap !== false) {
keymaps = keymaps.concat(_autocomplete.closeBracketsKeymap);
}
if (options.defaultKeymap !== false) {
keymaps = keymaps.concat(_commands.defaultKeymap);
}
if (options.searchKeymap !== false) {
keymaps = keymaps.concat(_search.searchKeymap);
}
if (options.historyKeymap !== false) {
keymaps = keymaps.concat(_commands.historyKeymap);
}
if (options.foldKeymap !== false) {
keymaps = keymaps.concat(_language.foldKeymap);
}
if (options.completionKeymap !== false) {
keymaps = keymaps.concat(_autocomplete.completionKeymap);
}
if (options.lintKeymap !== false) {
keymaps = keymaps.concat(_lint.lintKeymap);
}
var extensions = [];
if (options.lineNumbers !== false) extensions.push((0, _view.lineNumbers)());
if (options.highlightActiveLineGutter !== false) extensions.push((0, _view.highlightActiveLineGutter)());
if (options.highlightSpecialChars !== false) extensions.push((0, _view.highlightSpecialChars)());
if (options.history !== false) extensions.push((0, _commands.history)());
if (options.foldGutter !== false) extensions.push((0, _language.foldGutter)());
if (options.drawSelection !== false) extensions.push((0, _view.drawSelection)());
if (options.dropCursor !== false) extensions.push((0, _view.dropCursor)());
if (options.allowMultipleSelections !== false) extensions.push(_state.EditorState.allowMultipleSelections.of(true));
if (options.indentOnInput !== false) extensions.push((0, _language.indentOnInput)());
if (options.syntaxHighlighting !== false) extensions.push((0, _language.syntaxHighlighting)(_language.defaultHighlightStyle, {
fallback: true
}));
if (options.bracketMatching !== false) extensions.push((0, _language.bracketMatching)());
if (options.closeBrackets !== false) extensions.push((0, _autocomplete.closeBrackets)());
if (options.autocompletion !== false) extensions.push((0, _autocomplete.autocompletion)());
if (options.rectangularSelection !== false) extensions.push((0, _view.rectangularSelection)());
if (initCrosshairCursor !== false) extensions.push((0, _view.crosshairCursor)());
if (options.highlightActiveLine !== false) extensions.push((0, _view.highlightActiveLine)());
if (options.highlightSelectionMatches !== false) extensions.push((0, _search.highlightSelectionMatches)());
if (options.tabSize && typeof options.tabSize === 'number') extensions.push(_language.indentUnit.of(' '.repeat(options.tabSize)));
return extensions.concat([_view.keymap.of(keymaps.flat())]).filter(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).
*/
var minimalSetup = exports.minimalSetup = function minimalSetup() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var keymaps = [];
if (options.defaultKeymap !== false) {
keymaps = keymaps.concat(_commands.defaultKeymap);
}
if (options.historyKeymap !== false) {
keymaps = keymaps.concat(_commands.historyKeymap);
}
var extensions = [];
if (options.highlightSpecialChars !== false) extensions.push((0, _view.highlightSpecialChars)());
if (options.history !== false) extensions.push((0, _commands.history)());
if (options.drawSelection !== false) extensions.push((0, _view.drawSelection)());
if (options.syntaxHighlighting !== false) extensions.push((0, _language.syntaxHighlighting)(_language.defaultHighlightStyle, {
fallback: true
}));
return extensions.concat([_view.keymap.of(keymaps.flat())]).filter(Boolean);
};
@@ -0,0 +1,82 @@
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[];
+124
View File
@@ -0,0 +1,124 @@
import { lineNumbers, highlightActiveLineGutter, highlightSpecialChars, drawSelection, dropCursor, rectangularSelection, crosshairCursor, highlightActiveLine, keymap } from '@codemirror/view';
import { EditorState } from '@codemirror/state';
import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
import { foldGutter, indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, indentUnit, foldKeymap } from '@codemirror/language';
import { lintKeymap } from '@codemirror/lint';
/**
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 var basicSetup = function basicSetup(options) {
if (options === void 0) {
options = {};
}
var {
crosshairCursor: initCrosshairCursor = false
} = options;
var keymaps = [];
if (options.closeBracketsKeymap !== false) {
keymaps = keymaps.concat(closeBracketsKeymap);
}
if (options.defaultKeymap !== false) {
keymaps = keymaps.concat(defaultKeymap);
}
if (options.searchKeymap !== false) {
keymaps = keymaps.concat(searchKeymap);
}
if (options.historyKeymap !== false) {
keymaps = keymaps.concat(historyKeymap);
}
if (options.foldKeymap !== false) {
keymaps = keymaps.concat(foldKeymap);
}
if (options.completionKeymap !== false) {
keymaps = keymaps.concat(completionKeymap);
}
if (options.lintKeymap !== false) {
keymaps = keymaps.concat(lintKeymap);
}
var extensions = [];
if (options.lineNumbers !== false) extensions.push(lineNumbers());
if (options.highlightActiveLineGutter !== false) extensions.push(highlightActiveLineGutter());
if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());
if (options.history !== false) extensions.push(history());
if (options.foldGutter !== false) extensions.push(foldGutter());
if (options.drawSelection !== false) extensions.push(drawSelection());
if (options.dropCursor !== false) extensions.push(dropCursor());
if (options.allowMultipleSelections !== false) extensions.push(EditorState.allowMultipleSelections.of(true));
if (options.indentOnInput !== false) extensions.push(indentOnInput());
if (options.syntaxHighlighting !== false) extensions.push(syntaxHighlighting(defaultHighlightStyle, {
fallback: true
}));
if (options.bracketMatching !== false) extensions.push(bracketMatching());
if (options.closeBrackets !== false) extensions.push(closeBrackets());
if (options.autocompletion !== false) extensions.push(autocompletion());
if (options.rectangularSelection !== false) extensions.push(rectangularSelection());
if (initCrosshairCursor !== false) extensions.push(crosshairCursor());
if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine());
if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches());
if (options.tabSize && typeof options.tabSize === 'number') extensions.push(indentUnit.of(' '.repeat(options.tabSize)));
return extensions.concat([keymap.of(keymaps.flat())]).filter(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 var minimalSetup = function minimalSetup(options) {
if (options === void 0) {
options = {};
}
var keymaps = [];
if (options.defaultKeymap !== false) {
keymaps = keymaps.concat(defaultKeymap);
}
if (options.historyKeymap !== false) {
keymaps = keymaps.concat(historyKeymap);
}
var extensions = [];
if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());
if (options.history !== false) extensions.push(history());
if (options.drawSelection !== false) extensions.push(drawSelection());
if (options.syntaxHighlighting !== false) extensions.push(syntaxHighlighting(defaultHighlightStyle, {
fallback: true
}));
return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
};
@@ -0,0 +1,56 @@
{
"name": "@uiw/codemirror-extensions-basic-setup",
"version": "4.22.2",
"description": "Basic configuration for the CodeMirror6 code editor.",
"homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/basic-setup",
"funding": "https://jaywcjlove.github.io/#/sponsor",
"author": "kenny wong <wowohoo@qq.com>",
"license": "MIT",
"main": "./cjs/index.js",
"module": "./esm/index.js",
"scripts": {
"watch": "tsbb watch src/*.ts --use-babel",
"build": "tsbb build src/*.ts --use-babel"
},
"repository": {
"type": "git",
"url": "https://github.com/uiwjs/react-codemirror.git"
},
"files": [
"src",
"esm",
"cjs"
],
"peerDependencies": {
"@codemirror/autocomplete": ">=6.0.0",
"@codemirror/commands": ">=6.0.0",
"@codemirror/language": ">=6.0.0",
"@codemirror/lint": ">=6.0.0",
"@codemirror/search": ">=6.0.0",
"@codemirror/state": ">=6.0.0",
"@codemirror/view": ">=6.0.0"
},
"dependencies": {
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/language": "^6.0.0",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0"
},
"keywords": [
"codemirror",
"codemirror6",
"basic-setup",
"extensions",
"ide",
"code"
],
"jest": {
"coverageReporters": [
"lcov",
"json-summary"
]
}
}
+177
View File
@@ -0,0 +1,177 @@
import {
KeyBinding,
lineNumbers,
highlightActiveLineGutter,
highlightSpecialChars,
drawSelection,
dropCursor,
rectangularSelection,
crosshairCursor,
highlightActiveLine,
keymap,
} from '@codemirror/view';
import { EditorState, Extension } from '@codemirror/state';
import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
import { highlightSelectionMatches, searchKeymap } from '@codemirror/search';
import { closeBrackets, autocompletion, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
import {
foldGutter,
indentOnInput,
syntaxHighlighting,
defaultHighlightStyle,
bracketMatching,
indentUnit,
foldKeymap,
} from '@codemirror/language';
import { lintKeymap } from '@codemirror/lint';
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 const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
const { crosshairCursor: initCrosshairCursor = false } = options;
let keymaps: KeyBinding[] = [];
if (options.closeBracketsKeymap !== false) {
keymaps = keymaps.concat(closeBracketsKeymap);
}
if (options.defaultKeymap !== false) {
keymaps = keymaps.concat(defaultKeymap);
}
if (options.searchKeymap !== false) {
keymaps = keymaps.concat(searchKeymap);
}
if (options.historyKeymap !== false) {
keymaps = keymaps.concat(historyKeymap);
}
if (options.foldKeymap !== false) {
keymaps = keymaps.concat(foldKeymap);
}
if (options.completionKeymap !== false) {
keymaps = keymaps.concat(completionKeymap);
}
if (options.lintKeymap !== false) {
keymaps = keymaps.concat(lintKeymap);
}
const extensions: Extension[] = [];
if (options.lineNumbers !== false) extensions.push(lineNumbers());
if (options.highlightActiveLineGutter !== false) extensions.push(highlightActiveLineGutter());
if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());
if (options.history !== false) extensions.push(history());
if (options.foldGutter !== false) extensions.push(foldGutter());
if (options.drawSelection !== false) extensions.push(drawSelection());
if (options.dropCursor !== false) extensions.push(dropCursor());
if (options.allowMultipleSelections !== false) extensions.push(EditorState.allowMultipleSelections.of(true));
if (options.indentOnInput !== false) extensions.push(indentOnInput());
if (options.syntaxHighlighting !== false)
extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }));
if (options.bracketMatching !== false) extensions.push(bracketMatching());
if (options.closeBrackets !== false) extensions.push(closeBrackets());
if (options.autocompletion !== false) extensions.push(autocompletion());
if (options.rectangularSelection !== false) extensions.push(rectangularSelection());
if (initCrosshairCursor !== false) extensions.push(crosshairCursor());
if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine());
if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches());
if (options.tabSize && typeof options.tabSize === 'number')
extensions.push(indentUnit.of(' '.repeat(options.tabSize)));
return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
};
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 const minimalSetup = (options: MinimalSetupOptions = {}) => {
let keymaps: KeyBinding[] = [];
if (options.defaultKeymap !== false) {
keymaps = keymaps.concat(defaultKeymap);
}
if (options.historyKeymap !== false) {
keymaps = keymaps.concat(historyKeymap);
}
const extensions: Extension[] = [];
if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());
if (options.history !== false) extensions.push(history());
if (options.drawSelection !== false) extensions.push(drawSelection());
if (options.syntaxHighlighting !== false)
extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }));
return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
};