JSPM – react-codemirror2@0.0.10

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
resetCursorOnSet

boolean reset the internal codemirror cursor position should a new value prop be set. Default: false

props cont. (wrapped codemirror programming api)

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, ranges) => {}}
/>

scroll - scrollTo

will programmatically scroll to the specified coordinate

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

cursor - setCursor

will programmatically set cursor to the position specified

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

events

editorWillMount()
editorDidMount(editor, next)

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

returns the initial value via value
editorWillUnmount(editor)

events cont. wrapped codemirror events

onValueChange(editor, metadata, value) - change

returns the internal value of the editor
onCursorActivity(editor) - cursorActivity
onViewportChange(editor, viewportStart, viewportEnd) - viewportChange
onGutterClick(editor, lineNumber, event) - gutterClick
onFocus(editor, event) - focus
onBlur(editor, event) - blur
onUpdate(editor, event) - update
onKeyDown(editor, event) - keydown
onKeyUp(editor, event) - keyup
onKeyPress(editor, event) - keypress
onDragEnter(editor, event) - dragenter
onDragOver(editor, event) - dragover
onDrop(editor, event) - drop
onSelection(editor, ranges) - beforeSelectionChange
onScroll(editor, position) - scroll
onCursor(editor, position)- cursorActivity