JSPM – react-codemirror2@0.0.7

Package Exports

react-codemirror2

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-codemirror2) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-codemirror2

demo @ scniro.github.io/react-codemirror2

npm install react-codemirror2

basic usage

import CodeMirror from 'react-codemirror2'

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

requiring codemirror resources

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 '~/node_modules/codemirror/lib/codemirror.css';
@import '~/node_modules/codemirror/theme/material.css';

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

props

className - sets class="react-codemirror2 yourClassName"
options - see codemirror configuration
value - set component value through props

triggers onValueSet

component specific events

editorWillMount()
editorDidMount(editor, next)

calling optional next() will trigger editorDidConfigure
editorDidConfigure(editor)
onValueSet(editor, value)

returns the initial value via value
editorWillUnmount(editor)

codemirror wrapped events

onValueChange(editor, metadata, value)

returns the internal value of the editor
onCursorActivity(editor)
onViewportChange(editor, viewportStart, viewportEnd)
onGutterClick(editor, lineNumber, event)
onFocus(editor, event)
onBlur(editor, event)
onScroll(editor, event)
onUpdate(editor, event)
onKeyDown(editor, event)
onKeyUp(editor, event)
onKeyPress(editor, event)
onDragEnter(editor, event)
onDragOver(editor, event)
onDrop(editor, event)