225 lines
13 KiB
Plaintext
225 lines
13 KiB
Plaintext
<div markdown="1">
|
|
<sup>Using <a href="https://wangchujiang.com/#/app" target="_blank">my app</a> is also a way to <a href="https://wangchujiang.com/#/sponsor" target="_blank">support</a> me:</sup>
|
|
<br>
|
|
<a target="_blank" href="https://apps.apple.com/app/Deskmark/6755948110" title="Deskmark for macOS"><img alt="Deskmark" height="52" width="52" src="https://wangchujiang.com/appicon/deskmark.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/Keyzer/6500434773" title="Keyzer for macOS"><img alt="Keyzer" height="52" width="52" src="https://wangchujiang.com/appicon/keyzer.png"></a>
|
|
<a target="_blank" href="https://github.com/jaywcjlove/vidwall-hub" title="Vidwall Hub for macOS"><img alt="Vidwall Hub" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall-hub.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/VidCrop/6752624705" title="VidCrop for macOS"><img alt="VidCrop" height="52" width="52" src="https://wangchujiang.com/appicon/vidcrop.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/Vidwall/6747587746" title="Vidwall for macOS"><img alt="Vidwall" height="52" width="52" src="https://wangchujiang.com/appicon/vidwall.png"></a>
|
|
<a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img alt="Mousio Hint" height="52" width="52" src="https://wangchujiang.com/appicon/mousio-hint.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/mousio.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img alt="Musicer" height="52" width="52" src="https://wangchujiang.com/appicon/musicer.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img alt="Audioer" height="52" width="52" src="https://wangchujiang.com/appicon/audioer.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img alt="FileSentinel" height="52" width="52" src="https://wangchujiang.com/appicon/file-sentinel.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img alt="FocusCursor" height="52" width="52" src="https://wangchujiang.com/appicon/focus-cursor.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img alt="Videoer" height="52" width="52" src="https://wangchujiang.com/appicon/videoer.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img alt="KeyClicker" height="52" width="52" src="https://wangchujiang.com/appicon/key-clicker.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img alt="DayBar" height="52" width="52" src="https://wangchujiang.com/appicon/daybar.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img alt="Iconed" height="52" width="52" src="https://wangchujiang.com/appicon/iconed.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6737160756" title="Mousio for macOS"><img alt="Mousio" height="52" width="52" src="https://wangchujiang.com/appicon/rightmenu-master.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/paste-quick.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img alt="Quick RSS" height="52" width="52" src="https://wangchujiang.com/appicon/quick-rss.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img alt="Web Serve" height="52" width="52" src="https://wangchujiang.com/appicon/web-serve.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img alt="Copybook Generator" height="52" width="52" src="https://wangchujiang.com/appicon/copybook-generator.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img alt="DevTutor for SwiftUI" height="52" width="52" src="https://wangchujiang.com/appicon/devtutor.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img alt="RegexMate" height="52" width="52" src="https://wangchujiang.com/appicon/regex-mate.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img alt="Time Passage" height="52" width="52" src="https://wangchujiang.com/appicon/time-passage.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img alt="Iconize Folder" height="52" width="52" src="https://wangchujiang.com/appicon/iconize-folder.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img alt="Textsound Saver" height="52" width="52" src="https://wangchujiang.com/appicon/textsound-saver.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img alt="Create Custom Symbols" height="52" width="52" src="https://wangchujiang.com/appicon/create-custom-symbols.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img alt="DevHub" height="52" width="52" src="https://wangchujiang.com/appicon/devhub.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img alt="Resume Revise" height="52" width="52" src="https://wangchujiang.com/appicon/resume-revise.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img alt="Palette Genius" height="52" width="52" src="https://wangchujiang.com/appicon/palette-genius.png"></a>
|
|
<a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img alt="Symbol Scribe" height="52" width="52" src="https://wangchujiang.com/appicon/symbol-scribe.png"></a>
|
|
<br><br>
|
|
</div>
|
|
<hr>
|
|
|
|
<!--rehype:ignore:start-->
|
|
|
|
# Basic Setup Extensions
|
|
|
|
<!--rehype:ignore:end-->
|
|
|
|
[](https://jaywcjlove.github.io/#/sponsor)
|
|
[](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.
|