a tiny react codemirror component wrapper
npm install react-codemirror2
demo @ scniro.github.io/react-codemirror2
``bash`
npm install react-codemirror2 codemirror --save
react-codemirror2 ships with the notion of an uncontrolled and controlled component. UnControlled consists of a simple wrapper largely powered by the inner workings of codemirror itself, while Controlled will demand state management from the user, preventing codemirror changes unless properly handled via value. The latter will offer more control and likely be more appropriate with redux heavy apps.
jsx
import {UnControlled as CodeMirror} from 'react-codemirror2'
I ♥ react-codemirror2
'
options={{
mode: 'xml',
theme: 'material',
lineNumbers: true
}}
onChange={(editor, data, value) => {
}}
/>
`controlled usage
jsx
import {Controlled as CodeMirror} from 'react-codemirror2'
options={options}
onBeforeChange={(editor, data, value) => {
this.setState({value});
}}
onChange={(editor, data, value) => {
}}
/>
`requiring codemirror resources
comes as a peer dependency, meaning you'll need to require it in your project _in addition to_ react-codemirror2. This prevents any versioning conflicts that would arise if codemirror came as a dependency through this wrapper. It's been observed that version mismatches can cause difficult to trace issues such as syntax highlighting disappearing without any explicit errors/warnings- additional
Since codemirror ships mostly unconfigured, the user is left with the responsibility for requiring any additional resources should they be necessary. This is often the case when specifying certain [language modes]() and [themes](). How to import/require these assets will vary according to the specifics of your development environment. Below is a sample to include the assets necessary to specify a mode of
xml (HTML) and a material theme.> note that the base codemirror.css file is required in all use cases
`css
@import 'codemirror/lib/codemirror.css';
@import 'codemirror/theme/material.css';
`jsx
import CodeMirror from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');
`props
| prop | type
| components | description |
|--------------|------------------------|-----------------------------------|-----------------------------------------------------------------------------------------------------------------------|
| autoCursor | boolean true | Controlled UnControlled | should component cursor position correct when value changed | |
| autoScroll | boolean true | Controlled UnControlled | should component scroll cursor position into view when value changed |
| className | string | Controlled UnControlled | pass through class class="react-codemirror2 className" |
| defineMode | object | Controlled UnControlled | pass a custom mode via {name: 'custom', fn: myModeFn} |
| detach | boolean | UnControlled | should component ignore new props |
| options | object | Controlled UnControlled | codemirror configuration |
| value | string | Controlled UnControlled | component value _must be managed for controlled components_ |props cont. (wrapped codemirror programming api)
-
cursor - setCursor
> will programmatically set cursor to the position specified
`jsx
cursor={{
line: 5,
ch: 10
}}
onCursor={(editor, data) => {}}
/>
`
- - scrollTo
> will programmatically scroll to the specified coordinate
`jsx
scroll={{
x: 50,
y: 50
}}
onScroll={(editor, data) => {}}
/>
`
- - setSelections
> will programmatically select the ranges specified
`jsx
selection={{
ranges: [{
anchor: {ch: 8, line: 5},
head: {ch: 37, line: 5}
}],
focus: true // defaults false if not specified
}}
onSelection={(editor, data) => {}}
/>
`events
| event | components | description |
|------------------------------------------------------------------|----------------------------------|-------------------------------------------------------------------------------------------------------------|
| editorDidAttach(editor) |
| component is now responding to new props |
| editorDidConfigure(editor) | Controlled UnControlled | component configuration has been set |
| editorDidDetach(editor) | UnControlled | component is now ignoring new props |
| editorDidMount(editor, _[next]_) | Controlled UnControlled | * invoking optional next will trigger editorDidConfigure |
| editorWillUnmount(editor) | Controlled UnControlled | invoked before componentWillUnmount |
| onBeforeChange(editor, data, value, _[next]_) | Controlled UnControlled | if used, next is returned via UnControlled and must* be invoked to trigger onChange |
| onChange(editor, data, value) | Controlled UnControlled | the component value has been changed |events cont. wrapped codemirror events
-
onBlur(editor, event) - blur
- onContextMenu(editor, event) - contextmenu
- onCopy(editor) - copy
- onCursor(editor, data)- cursorActivity
- onCursorActivity(editor) - cursorActivity
- onCut(editor) - cut
- onDblClick(editor, event) - dblclick
- onDragEnter(editor, event) - dragenter
- onDragOver(editor, event) - dragover
- onDragLeave(editor, event) - dragleave
- onDragStart(editor, event) - dragstart
- onDrop(editor, event) - drop
- onFocus(editor, event) - focus
- onGutterClick(editor, lineNumber, gutter, event) - gutterClick
- onInputRead(editor, changeObj) - gutterClick
- onKeyDown(editor, event) - keydown
- onKeyHandled(editor, key, event) - keyhandled
- onKeyPress(editor, event) - keypress
- onKeyUp(editor, event) - keyup
- onMouseDown(editor, event) - mousedown
- onPaste(editor) - paste
- onScroll(editor, data) - scroll
- onSelection(editor, data) - beforeSelectionChange
- onTouchStart(editor, event) - touchstart
- onUpdate(editor, event) - update
- onViewportChange(editor, from, to) - viewportChangeFAQ
- Is server side rendering supported?
Yes. react-codemirror2 will prevent rendering in absence of
window. You can also force the component to not render via a PREVENT_CODEMIRROR_RENDER global.- How can I get the instance?
The recommended technique to get the instance is to persist the
editor returned via event callbacks. There is no static method to get it on demand, e.g. CodeMirror.getInstance(). Example...`jsx
constructor() {
this.instance = null;
}render() {
{ this.instance = editor }}/>
}
`- How can I have a resizable editor?
Check out bokuweb/re-resizable. Wrapping your component with
works wellContributing
Pull Requests are welcome. Be mindful of the available scripts below to help submitting a well-received contribution.
-
npm run start to run the app on localhost:8000
- to ensure tests continue to pass
- npm run build to generate the demo bundlenote that it's necessary to bump the package.json version prior to final
npm run build so we can grab the proposed new version as seen in the demo header. Also note, the core changes are to be made in src/index.tsx as ./index.js and ./index.d.ts` are _generated_