react-codemirror2

demo @ scniro.github.io/react-codemirror2

npm install react-codemirror2

new in 3.0.0

react-codemirror2 now 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.

uncontrolled usage

import {UnControlled as CodeMirror} from 'react-codemirror2'

<CodeMirror
  value='<h1>I ♥ react-codemirror2</h1>'
  options={{
    mode: 'xml',
    theme: 'material',
    lineNumbers: true
  }}
  onChange={(editor, metadata, value) => {
  }}
/>

controlled usage

import {Controlled as CodeMirror} from 'react-codemirror2'

<CodeMirror
  value={this.state.value}
  options={options}
  onBeforeChange={(editor, data, value) => {
    this.setState({value});
  }}
  onChange={(editor, metadata, value) => {
  }}
/>

requiring codemirror resources

• codemirror

codemirror 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 sytax 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

@import 'codemirror/lib/codemirror.css';
@import 'codemirror/theme/material.css';

import CodeMirror from 'react-codemirror2';
require('codemirror/mode/xml/xml');
require('codemirror/mode/javascript/javascript');

props

• autoCursor

boolean if false, allow the defaulted internal codemirror cursor position to reset should a new value prop be set. Default: true

• autoFocus

boolean if true, set focus to the instance onSet. Will be invoked within the componentDidMount lifecycle stage. Default: false

• autoScroll

boolean if true, scroll the cursor position into view automatically. Default: false

• className - sets class="react-codemirror2 yourClassName"
• defineMode

pass a custom mode object {name: 'custom', fn: myModeFn}

• options - see codemirror configuration
• value - set component value through props

must be managed for controlled components

props cont. (wrapped codemirror programming api)

• cursor - setCursor

will programmatically set cursor to the position specified

<CodeMirror
  [...]
  cursor={{
    line: 5,
    ch: 10
  }}
  onCursor={(editor, data) => {}}
/>

• scroll - scrollTo

will programmatically scroll to the specified coordinate

<CodeMirror
  [...]
  scroll={{
    x: 50,
    y: 50
  }}
  onScroll={(editor, data) => {}}
/>

• selection={array<{anchor, head}>} - setSelections

will programmatically select the ranges specified

<CodeMirror
  [...]
  selection={[{
    anchor: {ch: 8, line: 5},
    head: {ch: 37, line: 5}
  }]}
  onSelection={(editor, data) => {}}
/>

events

• editorDidConfigure(editor)
• editorDidMount(editor, next)

invoking optional next() will trigger editorDidConfigure

• editorWillMount()
• editorWillUnmount(editor)
• onBeforeChange(editor, data, value) [controlled]

required - hook to manage state and update value

• onBeforeChange(editor, data, value, next) [uncontrolled]

optional - if defined, next() must be invoked to trigger onChange.

• onChange(editor, data, value)

events cont. wrapped codemirror events

• onBlur(editor, event) - blur
• onCursor(editor, data)- cursorActivity
• onCursorActivity(editor) - cursorActivity
• onDragEnter(editor, event) - dragenter
• onDragOver(editor, event) - dragover
• onDrop(editor, event) - drop
• onFocus(editor, event) - focus
• onGutterClick(editor, lineNumber, gutter, event) - gutterClick
• onKeyDown(editor, event) - keydown
• onKeyPress(editor, event) - keypress
• onKeyUp(editor, event) - keyup
• onScroll(editor, data) - scroll
• onSelection(editor, data) - beforeSelectionChange
• onUpdate(editor, event) - update
• onViewportChange(editor, from, to) - viewportChange

MIT © 2017 scniro