JSPM

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
  }}
  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

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

  triggers onSet

• resetCursorOnSet

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

• autoScrollCursorOnSet

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

• defineMode

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

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)
• onSet(editor, value)

  returns the initial value via value

• onBeforeSet(editor, next)

  if defined, next() must be invoked to trigger onSet

• editorWillUnmount(editor)
• onBeforeChange(editor, changeObj, next)

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

events cont. wrapped codemirror events

• onChange(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

MIT © 2017 scniro