@uiw/codemirror-extensions-basic-setup

<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>  # Basic Setup Extensions  [![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.