Skip to content

Commit 54ab8af

Browse files
jaywcjlovejaywcjlove
committed
feat: add basic-setup extensions.
1 parent 95f6021 commit 54ab8af

File tree

16 files changed

+332
-58
lines changed

16 files changed

+332
-58
lines changed

‎core/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@
3535
"react-dom": ">=16.8.0"
3636
},
3737
"dependencies": {
38-
"@babel/runtime": ">=7.11.0",
38+
"@babel/runtime": "^7.18.6",
3939
"@codemirror/theme-one-dark": "^6.0.0",
40+
"@uiw/codemirror-extensions-basic-setup": "^4.11.1",
4041
"codemirror": "^6.0.0"
4142
},
4243
"keywords": [

‎core/src/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import React, { useRef, forwardRef, useImperativeHandle } from 'react';
22
import { EditorState, EditorStateConfig, Extension } from '@codemirror/state';
33
import { EditorView, ViewUpdate } from '@codemirror/view';
4+
import { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup';
45
import { useCodeMirror } from './useCodeMirror';
56
import { Statistics } from './utils';
6-
import { BasicSetupOptions } from './basicSetup';
77

8-
export * from './basicSetup';
8+
export * from '@uiw/codemirror-extensions-basic-setup';
99
export * from './useCodeMirror';
1010
export * from './utils';
1111

‎core/src/useCodeMirror.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
22
import { EditorState, StateEffect } from '@codemirror/state';
33
import { indentWithTab } from '@codemirror/commands';
44
import { EditorView, keymap, ViewUpdate, placeholder } from '@codemirror/view';
5+
import { basicSetup } from '@uiw/codemirror-extensions-basic-setup';
56
import { oneDark } from '@codemirror/theme-one-dark';
6-
import { basicSetup } from './basicSetup';
77
import { getStatistics } from './utils';
88
import { ReactCodeMirrorProps } from '.';
99

‎extensions/basic-setup/README.md‎

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
<!--rehype:ignore:start-->
2+
3+
# Basic Setup Extensions
4+
5+
<!--rehype:ignore:end-->
6+
7+
[![npm version](https://img.shields.io/npm/v/@uiw/codemirror-extensions-basic-setup.svg)](https://www.npmjs.com/package/@uiw/codemirror-extensions-basic-setup)
8+
9+
Basic configuration for the CodeMirror6 code editor. This is the official [basic-setup](https://github.com/codemirror/basic-setup) package fork, making configuration optional.
10+
11+
## Install
12+
13+
```bash
14+
npm install @uiw/codemirror-extensions-basic-setup --save
15+
```
16+
17+
## Usage
18+
19+
⚠️ Integrated into **@uiw/react-codemirror** package
20+
21+
```jsx
22+
import CodeMirror from '@uiw/react-codemirror';
23+
24+
function App() {
25+
return (
26+
<CodeMirror
27+
value="console.log('hello world!');"
28+
height="200px"
29+
basicSetup={{
30+
foldGutter: false,
31+
dropCursor: false,
32+
allowMultipleSelections: false,
33+
indentOnInput: false,
34+
}}
35+
/>
36+
);
37+
}
38+
export default App;
39+
```
40+
41+
```js
42+
import { EditorView } from '@codemirror/view';
43+
import { EditorState } from '@codemirror/state';
44+
import { basicSetup, minimalSetup } from '@uiw/codemirror-extensions-basic-setup';
45+
46+
const state = EditorState.create({
47+
doc: 'my source code',
48+
extensions: [
49+
basicSetup({
50+
foldGutter: false,
51+
dropCursor: false,
52+
allowMultipleSelections: false,
53+
indentOnInput: false,
54+
}),
55+
],
56+
});
57+
58+
const view = new EditorView({
59+
parent: document.querySelector('#editor'),
60+
state,
61+
});
62+
```
63+
64+
```diff
65+
import { EditorView } from '@codemirror/view';
66+
import { EditorState } from '@codemirror/state';
67+
- import { basicSetup, minimalSetup } from 'codemirror';
68+
+ import { basicSetup, minimalSetup } from '@uiw/codemirror-extensions-basic-setup';
69+
70+
const state = EditorState.create({
71+
doc: 'my source code',
72+
extensions: [
73+
- basicSetup
74+
+ basicSetup({
75+
+ foldGutter: false,
76+
+ dropCursor: false,
77+
+ })
78+
],
79+
});
80+
81+
const view = new EditorView({
82+
parent: document.querySelector('#editor'),
83+
state,
84+
});
85+
```
86+
87+
## API
88+
89+
```ts
90+
import { Extension } from '@codemirror/state';
91+
export interface BasicSetupOptions extends MinimalSetupOptions {
92+
lineNumbers?: boolean;
93+
highlightActiveLineGutter?: boolean;
94+
foldGutter?: boolean;
95+
dropCursor?: boolean;
96+
allowMultipleSelections?: boolean;
97+
indentOnInput?: boolean;
98+
bracketMatching?: boolean;
99+
closeBrackets?: boolean;
100+
autocompletion?: boolean;
101+
rectangularSelection?: boolean;
102+
crosshairCursor?: boolean;
103+
highlightActiveLine?: boolean;
104+
highlightSelectionMatches?: boolean;
105+
closeBracketsKeymap?: boolean;
106+
searchKeymap?: boolean;
107+
foldKeymap?: boolean;
108+
completionKeymap?: boolean;
109+
lintKeymap?: boolean;
110+
}
111+
/**
112+
This is an extension value that just pulls together a number of
113+
extensions that you might want in a basic editor. It is meant as a
114+
convenient helper to quickly set up CodeMirror without installing
115+
and importing a lot of separate packages.
116+
117+
Specifically, it includes...
118+
119+
- [the default command bindings](https://codemirror.net/6/docs/ref/#commands.defaultKeymap)
120+
- [line numbers](https://codemirror.net/6/docs/ref/#view.lineNumbers)
121+
- [special character highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars)
122+
- [the undo history](https://codemirror.net/6/docs/ref/#commands.history)
123+
- [a fold gutter](https://codemirror.net/6/docs/ref/#language.foldGutter)
124+
- [custom selection drawing](https://codemirror.net/6/docs/ref/#view.drawSelection)
125+
- [drop cursor](https://codemirror.net/6/docs/ref/#view.dropCursor)
126+
- [multiple selections](https://codemirror.net/6/docs/ref/#state.EditorState^allowMultipleSelections)
127+
- [reindentation on input](https://codemirror.net/6/docs/ref/#language.indentOnInput)
128+
- [the default highlight style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle) (as fallback)
129+
- [bracket matching](https://codemirror.net/6/docs/ref/#language.bracketMatching)
130+
- [bracket closing](https://codemirror.net/6/docs/ref/#autocomplete.closeBrackets)
131+
- [autocompletion](https://codemirror.net/6/docs/ref/#autocomplete.autocompletion)
132+
- [rectangular selection](https://codemirror.net/6/docs/ref/#view.rectangularSelection) and [crosshair cursor](https://codemirror.net/6/docs/ref/#view.crosshairCursor)
133+
- [active line highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLine)
134+
- [active line gutter highlighting](https://codemirror.net/6/docs/ref/#view.highlightActiveLineGutter)
135+
- [selection match highlighting](https://codemirror.net/6/docs/ref/#search.highlightSelectionMatches)
136+
- [search](https://codemirror.net/6/docs/ref/#search.searchKeymap)
137+
- [linting](https://codemirror.net/6/docs/ref/#lint.lintKeymap)
138+
139+
(You'll probably want to add some language package to your setup
140+
too.)
141+
142+
This extension does not allow customization. The idea is that,
143+
once you decide you want to configure your editor more precisely,
144+
you take this package's source (which is just a bunch of imports
145+
and an array literal), copy it into your own code, and adjust it
146+
as desired.
147+
*/
148+
export declare const basicSetup: (options?: BasicSetupOptions) => Extension[];
149+
export interface MinimalSetupOptions {
150+
highlightSpecialChars?: boolean;
151+
history?: boolean;
152+
drawSelection?: boolean;
153+
syntaxHighlighting?: boolean;
154+
defaultKeymap?: boolean;
155+
historyKeymap?: boolean;
156+
}
157+
/**
158+
A minimal set of extensions to create a functional editor. Only
159+
includes [the default keymap](https://codemirror.net/6/docs/ref/#commands.defaultKeymap), [undo
160+
history](https://codemirror.net/6/docs/ref/#commands.history), [special character
161+
highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars), [custom selection
162+
drawing](https://codemirror.net/6/docs/ref/#view.drawSelection), and [default highlight
163+
style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle).
164+
*/
165+
export declare const minimalSetup: (options?: MinimalSetupOptions) => Extension[];
166+
```
167+
168+
## Contributors
169+
170+
As always, thanks to our amazing contributors!
171+
172+
<a href="https://github.com/uiwjs/react-codemirror/graphs/contributors">
173+
<img src="https://uiwjs.github.io/react-codemirror/CONTRIBUTORS.svg" />
174+
</a>
175+
176+
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
177+
178+
## License
179+
180+
Licensed under the MIT License.

‎extensions/basic-setup/package.json‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
{
2+
"name": "@uiw/codemirror-extensions-basic-setup",
3+
"version": "4.11.1",
4+
"description": "Basic configuration for the CodeMirror6 code editor.",
5+
"homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/basic-setup",
6+
"author": "kenny wong <[email protected]>",
7+
"license": "MIT",
8+
"main": "./cjs/index.js",
9+
"module": "./esm/index.js",
10+
"scripts": {
11+
"watch": "tsbb watch",
12+
"build": "tsbb build"
13+
},
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/uiwjs/react-codemirror.git"
17+
},
18+
"files": [
19+
"src",
20+
"esm",
21+
"cjs"
22+
],
23+
"peerDependencies": {
24+
"@codemirror/autocomplete": ">=6.0.0",
25+
"@codemirror/commands": ">=6.0.0",
26+
"@codemirror/language": ">=6.0.0",
27+
"@codemirror/lint": ">=6.0.0",
28+
"@codemirror/search": ">=6.0.0",
29+
"@codemirror/state": ">=6.0.0",
30+
"@codemirror/view": ">=6.0.0"
31+
},
32+
"dependencies": {
33+
"@codemirror/autocomplete": "^6.0.0",
34+
"@codemirror/commands": "^6.0.0",
35+
"@codemirror/language": "^6.0.0",
36+
"@codemirror/lint": "^6.0.0",
37+
"@codemirror/search": "^6.0.0",
38+
"@codemirror/state": "^6.0.0",
39+
"@codemirror/view": "^6.0.0"
40+
},
41+
"keywords": [
42+
"codemirror",
43+
"codemirror6",
44+
"basic-setup",
45+
"extensions",
46+
"ide",
47+
"code"
48+
],
49+
"jest": {
50+
"coverageReporters": [
51+
"lcov",
52+
"json-summary"
53+
]
54+
}
55+
}

‎core/src/basicSetup.ts‎ renamed to ‎extensions/basic-setup/src/index.ts‎

Lines changed: 46 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -22,19 +22,16 @@ import {
2222
bracketMatching,
2323
foldKeymap,
2424
} from '@codemirror/language';
25+
2526
import { lintKeymap } from '@codemirror/lint';
2627

27-
export interface BasicSetupOptions {
28+
export interface BasicSetupOptions extends MinimalSetupOptions {
2829
lineNumbers?: boolean;
2930
highlightActiveLineGutter?: boolean;
30-
highlightSpecialChars?: boolean;
31-
history?: boolean;
3231
foldGutter?: boolean;
33-
drawSelection?: boolean;
3432
dropCursor?: boolean;
3533
allowMultipleSelections?: boolean;
3634
indentOnInput?: boolean;
37-
syntaxHighlighting?: boolean;
3835
bracketMatching?: boolean;
3936
closeBrackets?: boolean;
4037
autocompletion?: boolean;
@@ -44,9 +41,7 @@ export interface BasicSetupOptions {
4441
highlightSelectionMatches?: boolean;
4542

4643
closeBracketsKeymap?: boolean;
47-
defaultKeymap?: boolean;
4844
searchKeymap?: boolean;
49-
historyKeymap?: boolean;
5045
foldKeymap?: boolean;
5146
completionKeymap?: boolean;
5247
lintKeymap?: boolean;
@@ -90,27 +85,27 @@ and an array literal), copy it into your own code, and adjust it
9085
as desired.
9186
*/
9287
export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
93-
const keymaps: KeyBinding[][] = [];
88+
let keymaps: KeyBinding[] = [];
9489
if (options.closeBracketsKeymap !== false) {
95-
keymaps.push([...closeBracketsKeymap]);
90+
keymaps = keymaps.concat(closeBracketsKeymap);
9691
}
9792
if (options.defaultKeymap !== false) {
98-
keymaps.push([...defaultKeymap]);
93+
keymaps = keymaps.concat(defaultKeymap);
9994
}
10095
if (options.searchKeymap !== false) {
101-
keymaps.push([...searchKeymap]);
96+
keymaps = keymaps.concat(searchKeymap);
10297
}
10398
if (options.historyKeymap !== false) {
104-
keymaps.push([...historyKeymap]);
99+
keymaps = keymaps.concat(historyKeymap);
105100
}
106101
if (options.foldKeymap !== false) {
107-
keymaps.push([...foldKeymap]);
102+
keymaps = keymaps.concat(foldKeymap);
108103
}
109104
if (options.completionKeymap !== false) {
110-
keymaps.push([...completionKeymap]);
105+
keymaps = keymaps.concat(completionKeymap);
111106
}
112107
if (options.lintKeymap !== false) {
113-
keymaps.push([...lintKeymap]);
108+
keymaps = keymaps.concat(lintKeymap);
114109
}
115110
const extensions: Extension[] = [];
116111
if (options.lineNumbers !== false) extensions.push(lineNumbers());
@@ -132,5 +127,40 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
132127
if (options.highlightActiveLine !== false) extensions.push(highlightActiveLine());
133128
if (options.highlightSelectionMatches !== false) extensions.push(highlightSelectionMatches());
134129

135-
return [...extensions, keymap.of(keymaps.flat())].filter(Boolean);
130+
return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
131+
};
132+
133+
export interface MinimalSetupOptions {
134+
highlightSpecialChars?: boolean;
135+
history?: boolean;
136+
drawSelection?: boolean;
137+
syntaxHighlighting?: boolean;
138+
139+
defaultKeymap?: boolean;
140+
historyKeymap?: boolean;
141+
}
142+
143+
/**
144+
A minimal set of extensions to create a functional editor. Only
145+
includes [the default keymap](https://codemirror.net/6/docs/ref/#commands.defaultKeymap), [undo
146+
history](https://codemirror.net/6/docs/ref/#commands.history), [special character
147+
highlighting](https://codemirror.net/6/docs/ref/#view.highlightSpecialChars), [custom selection
148+
drawing](https://codemirror.net/6/docs/ref/#view.drawSelection), and [default highlight
149+
style](https://codemirror.net/6/docs/ref/#language.defaultHighlightStyle).
150+
*/
151+
export const minimalSetup = (options: MinimalSetupOptions = {}) => {
152+
let keymaps: KeyBinding[] = [];
153+
if (options.defaultKeymap !== false) {
154+
keymaps = keymaps.concat(defaultKeymap);
155+
}
156+
if (options.historyKeymap !== false) {
157+
keymaps = keymaps.concat(historyKeymap);
158+
}
159+
const extensions: Extension[] = [];
160+
if (options.highlightSpecialChars !== false) extensions.push(highlightSpecialChars());
161+
if (options.history !== false) extensions.push(history());
162+
if (options.drawSelection !== false) extensions.push(drawSelection());
163+
if (options.syntaxHighlighting !== false)
164+
extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }));
165+
return extensions.concat([keymap.of(keymaps.flat())]).filter(Boolean);
136166
};

‎extensions/basic-setup/tsconfig.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"extends": "../../tsconfig",
3+
"include": ["src"],
4+
"compilerOptions": {
5+
"outDir": "./cjs",
6+
"baseUrl": ".",
7+
"noEmit": false
8+
}
9+
}

0 commit comments

Comments
 (0)