@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/Vidwall/6747587746" title="Vidwall for macOS"><img align="center" alt="Vidwall" height="52" width="52" src="https://github.com/user-attachments/assets/7b5df70a-ed91-4d4b-85be-f00e60a09ce9"></a> <a target="_blank" href="https://wangchujiang.com/mousio-hint/" title="Mousio Hint for macOS"><img align="center" alt="Mousio Hint" height="52" width="52" src="https://github.com/user-attachments/assets/3c0af128-0cef-44e5-a8db-4741dc5a6690"></a> <a target="_blank" href="https://apps.apple.com/app/6746747327" title="Mousio for macOS"><img align="center" alt="Mousio" height="52" width="52" src="https://github.com/user-attachments/assets/9edf61ff-5a6c-4676-9cc2-8fd3c1ad0dfb"></a> <a target="_blank" href="https://apps.apple.com/app/6745227444" title="Musicer for macOS"><img align="center" alt="Musicer" height="52" width="52" src="https://github.com/user-attachments/assets/b7abfba8-88ff-4c86-a125-43073d5aef22"></a> <a target="_blank" href="https://apps.apple.com/app/6743841447" title="Audioer for macOS"><img align="center" alt="Audioer" height="52" width="52" src="https://github.com/user-attachments/assets/7a836865-8c90-4119-87bc-19e06a76c957"></a> <a target="_blank" href="https://apps.apple.com/app/6744690194" title="FileSentinel for macOS"><img align="center" alt="FileSentinel" height="52" width="52" src="https://github.com/user-attachments/assets/28bce2cc-290e-45bf-9068-585ff6ecafe9"></a> <a target="_blank" href="https://apps.apple.com/app/6743495172" title="FocusCursor for macOS"><img align="center" alt="FocusCursor" height="52" width="52" src="https://github.com/user-attachments/assets/d543668a-737b-4853-a6bb-eaa269e69836"></a> <a target="_blank" href="https://apps.apple.com/app/6742680573" title="Videoer for macOS"><img align="center" alt="Videoer" height="52" width="52" src="https://github.com/user-attachments/assets/10ffb0f1-0625-40d6-93f1-2c2496592595"></a> <a target="_blank" href="https://apps.apple.com/app/6740425504" title="KeyClicker for macOS"><img align="center" alt="KeyClicker" height="52" width="52" src="https://github.com/user-attachments/assets/5a19fcb9-cb81-4855-b4ea-31c604d9612a"></a> <a target="_blank" href="https://apps.apple.com/app/6739052447" title="DayBar for macOS"><img align="center" alt="DayBar" height="52" width="52" src="https://github.com/user-attachments/assets/771b608d-594c-492d-8532-d9231e383f5b"></a> <a target="_blank" href="https://apps.apple.com/app/6739444407" title="Iconed for macOS"><img align="center" alt="Iconed" height="52" width="52" src="https://github.com/user-attachments/assets/8a35dc7b-4faf-4e2a-9311-f66d6844a896"></a> <a target="_blank" href="https://apps.apple.com/app/6737160756" title="RightMenu Master for macOS"><img align="center" alt="RightMenu Master" height="52" width="52" src="https://github.com/user-attachments/assets/39a76541-71bf-4de7-a01c-c62f0557dff5"></a> <a target="_blank" href="https://apps.apple.com/app/6723903021" title="Paste Quick for macOS"><img align="center" alt="Quick RSS" height="52" width="52" src="https://github.com/user-attachments/assets/bdaad5b7-9810-44ce-8f17-8410864465d2"></a> <a target="_blank" href="https://apps.apple.com/app/6670696072" title="Quick RSS for macOS/iOS"><img align="center" alt="Quick RSS" height="52" width="52" src="https://github.com/user-attachments/assets/374106b5-a448-4d1d-9ccb-b04b6bc681ed"></a> <a target="_blank" href="https://apps.apple.com/app/6670167443" title="Web Serve for macOS"><img align="center" alt="Web Serve" height="52" width="52" src="https://github.com/user-attachments/assets/e1d9f76f-0f3d-4ba5-8a15-253ee173bb1c"></a> <a target="_blank" href="https://apps.apple.com/app/6503953628" title="Copybook Generator for macOS/iOS"><img align="center" alt="Copybook Generator" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/b90e42ff-158b-4534-82ca-5898fd0e8d73"></a> <a target="_blank" href="https://apps.apple.com/app/6471227008" title="DevTutor for macOS/iOS"><img align="center" alt="DevTutor for SwiftUI" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/f15c154d-0192-48eb-8e0e-9e245ffd974a"></a> <a target="_blank" href="https://apps.apple.com/app/6479819388" title="RegexMate for macOS/iOS"><img align="center" alt="RegexMate" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/aabe5aa9-9a96-4390-8bed-c3e4023d0dea"></a> <a target="_blank" href="https://apps.apple.com/app/6479194014" title="Time Passage for macOS/iOS"><img align="center" alt="Time Passage" height="52" width="52" src="https://github.com/jaywcjlove/time-passage/assets/1680273/6f30e429-e6f3-4dbe-9921-a5effe2a05e9"></a> <a target="_blank" href="https://apps.apple.com/app/6478772538" title="IconizeFolder for macOS"><img align="center" alt="Iconize Folder" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/fa9d8b9c-1e51-4ded-877c-fa5b21c47220"></a> <a target="_blank" href="https://apps.apple.com/app/6478511402" title="Textsound Saver for macOS/iOS"><img align="center" alt="Textsound Saver" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/0595e842-980b-4574-8891-a8ba853a08be"></a> <a target="_blank" href="https://apps.apple.com/app/6476924627" title="Create Custom Symbols for macOS"><img align="center" alt="Create Custom Symbols" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/8cd022ce-a3f1-4e89-b7c6-6fbd0d4db77c"></a> <a target="_blank" href="https://apps.apple.com/app/6476452351" title="DevHub for macOS"><img align="center" alt="DevHub" height="52" width="52" src="https://github.com/user-attachments/assets/4a44a4fd-67ce-430b-af0a-72f18feaa47d"></a> <a target="_blank" href="https://apps.apple.com/app/6476400184" title="Resume Revise for macOS"><img align="center" alt="Resume Revise" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c9954a20-1905-48de-bdf8-d71837974aa2"></a> <a target="_blank" href="https://apps.apple.com/app/6472593276" title="Palette Genius for macOS"><img align="center" alt="Palette Genius" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/27340413-d355-45b2-8f6f-6ac37682d957"></a> <a target="_blank" href="https://apps.apple.com/app/6470879005" title="Symbol Scribe for macOS"><img align="center" alt="Symbol Scribe" height="52" width="52" src="https://github.com/jaywcjlove/jaywcjlove/assets/1680273/c7249f05-fa70-4def-a1e9-571d5f171fc9"></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.