-
-
Notifications
You must be signed in to change notification settings - Fork 124
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
95f6021
commit 54ab8af
Showing
16 changed files
with
332 additions
and
58 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,180 @@ | ||
| <!--rehype:ignore:start--> | ||
|
|
||
| # Basic Setup Extensions | ||
|
|
||
| <!--rehype:ignore:end--> | ||
|
|
||
| [](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** 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; | ||
| } | ||
| /** | ||
| 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| { | ||
| "name": "@uiw/codemirror-extensions-basic-setup", | ||
| "version": "4.11.1", | ||
| "description": "Basic configuration for the CodeMirror6 code editor.", | ||
| "homepage": "https://uiwjs.github.io/react-codemirror/#/extensions/basic-setup", | ||
| "author": "kenny wong <wowohoo@qq.com>", | ||
| "license": "MIT", | ||
| "main": "./cjs/index.js", | ||
| "module": "./esm/index.js", | ||
| "scripts": { | ||
| "watch": "tsbb watch", | ||
| "build": "tsbb build" | ||
| }, | ||
| "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" | ||
| ] | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "extends": "../../tsconfig", | ||
| "include": ["src"], | ||
| "compilerOptions": { | ||
| "outDir": "./cjs", | ||
| "baseUrl": ".", | ||
| "noEmit": false | ||
| } | ||
| } |
Oops, something went wrong.