scniro / react-codemirror2

Codemirror integrated components for React

react-codemirror2

demo @ scniro.github.io/react-codemirror2

Install

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.

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, data, 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, data, 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 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

@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

prop	type default	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

<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={{ranges: array<{anchor, head}>, focus?: boolean} - setSelections

will programmatically select the ranges specified

<CodeMirror
  [...]
  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)	UnControlled	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) - viewportChange

FAQ

• Is server side rendering supported?

Yes. react-codemirror2 will prevent rendering in absence of navigator. 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...

constructor() {
  this.instance = null;
}

render() {
  <CodeMirror editorDidMount={editor => { this.instance = editor }}/>
}

• How can I have a resizable editor?

Check out bokuweb/re-resizable. Wrapping your component with <Resizable/>'s works well

Contributing

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
• npm run test to ensure tests continue to pass
• npm run build to generate the demo bundle

note 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

MIT © 2020 scniro

react-codemirror2's Issues

Does not support matchbrackets

This project doesn't currently support the addon matchbrackets because CodeMirror has a bug that breaks the addon when multiple CodeMirror instances are active. react-codemirror2 internally uses multiple instances: https://github.com/scniro/react-codemirror2/blob/master/src/index.tsx#L389 and https://github.com/scniro/react-codemirror2/blob/master/src/index.tsx#L393

I'm putting this issue here so that people are aware of the problem, though the issue I think lies in CodeMirror itself.

Can't change value from '' to 'foo'

This line looks wrong to me, why are we checking for this.props.value? By doing this I can't set a truthy value if the previous one was falsy.

VIM - Strange behavior in VIM mode with Controlled Usage

The VIM mode has strange behavior when working with states. For example, when I press either 'o' or 'i' to enter insert mode, then press Backspace. It doesn't seem to allow me to delete previous characters before the insert position, which seems weird. And also, the cursor in insert mode will change from the line shape to the block shape after one insertion operation. Is it related to the rerendering when state changing? Because it does not happen in UnControlled Usage.

I use the OnClick function to change the state and use states for changing the value in the editor.

Preview:

• I enter the edit mode and move cursor to the end of the line.
  

• Then I press Backspace and the cursor change its shape and I cannot delete any more.
  

Is there any example how to get setCursor & scrollTo to work?

I have tried setting props to cursor & scroll but it doesn't seem to get <CodeMirror /> to move at all.

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

<CodeMirror
        className="content"
        value={this.state.fullText}
        options={options}
        cursor={cursor}
        scroll={this.state.scroll}
        onBeforeChange={(editor, data, value) => {
          this.setState({ fullText: value });
        }}
        onChange={this.updateCode.bind(this)}
        onCursor={this.updateCursor.bind(this)}
        onScroll={this.handleOnScroll.bind(this)}
 />

Every event initiated by my cursor can be captured, but when I change cursor or scroll programmatically, nothing changes.

I would be appreciated if you could guide me what I'm missing.

how could I modify the editor's size

RT

commands.save

I'm trying to add a handler for the save command. I came across #46 and tried the suggestion to use editorDidMount, but I can't seem to find the commands attribute.

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

export class TextEditor extends React.Component {
  onEditorDidMount = (editor) => {
    // This is the only place I've been able to find the `save` command.
    editor.__proto__.constructor.commands.save = this.onSave;

    editor.commands === undefined  // ==> true
    editor.save === undefined  // ==> true
  }

  render() {
    // I've searched around the ref a bit too (which seems to be different from the `editor`
    // passed to `onEditorDidMount`, but no luck.
    component = <CodeMirror ... ref={((ref) => { this.cm = ref; })} />
  }

  componentDidMount = () => {
    this.cm.commands === undefined  // ==> true
    this.cm.save === undefined  // ==> true

    this.cm.mirror.commands === undefined  // ==> true
    this.cm.mirror.save === undefined  // ==> true

    this.cm.editor.commands === undefined  // ==> true
    this.cm.editor.save === undefined  // ==> true
  }

Is there something I'm missing, or is there another way to get the CodeMirror instance where the commands attribute is accessible?

Versions:

• codemirror: 5.34.0
• react-codemirror2: 4.0.0

[Question] Is it possible to get current value of editor on external event without setting state?

Hello,

I'm using an UnControlled codemirror component in a form in my React+Redux application. It seems a bit of an overkill to me to have to call setState in my component on every change, so I'm wondering if there is a getValue() or similar method in the editor instance that I can use, for example, on a form submit event? Just like how I can get an input's value using refs like in this example from React docs

readonly and nocursor options support are missing

Undo / redo does not fire onBeforeChange() in controlled component

When making a change within the editor, and hitting CMD-Z to undo your changes, the onBeforeChange() event does not fire. However, the onChange() event does fire.

I'm willing to use onChange() to get around the issue, but all of the documentation around the controlled component states that onBeforeChange() should be used for managing the value of the component.

Here's a GIF of the problem in action:

Easiest way to reproduce:

Do as I did in the GIF: Visit the provided example with the React DevTools extension opened in Chrome, and you can see that the value of the input does not update in component state (done via onBeforeChange); though you do see the change event firing in the console, and the text within the component reflects what we see in the console.

ReferenceError: navigator is not defined

@scniro
Facing same issue in react-codemirror2
JedWatson/react-codemirror#77

Issue addressed in this PR JedWatson/react-codemirror#31

Can you please include in react-codemirror2.

Thanks

Not rendering code

When using those component with the following code:

import CodeMirror from "react-codemirror2"
import "codemirror/lib/codemirror"
import "codemirror/lib/codemirror.css"
import "codemirror/mode/php/php"
import "codemirror/theme/material.css"

const Editor = () => (
    <CodeMirror
        value='<h1>I ♥ react-codemirror2</h1>'
        options={options}
        onChange={(editor, metadata, value) => {
        }}
    />
)

All I get is a grey screen that I can't do anything with.

There's no code inside, and clicking it doesn't do anything either.

But I still cannot edit code, nor does it render the value it was given.

why the editor look like this

hi,
i got the issue like this
the text runs outside the editor
and the editor will longer and longer when re-render every time

select which mode when using language `C` and `CPP`

select which mode when using language C and CPP

Incorrect Typing of parameter in "onSelection"

According to the type information provided by react-codemirror2, the onSelection callback is defined as follows:

onSelection?: (editor: IInstance, ranges: ISetSelectionOptions) => void;

... where ISetSelectionOptions is defined as:

export interface ISetSelectionOptions {
    anchor: codemirror.Position;
    head: codemirror.Position;
}

However, when the listener is actually fired during runtime, the object I receive as the ranges parameter does not match the type outlined above. It is:

It's an object with a property ranges, which in turn is an array of ISetSelectionOptions.

I am using:

• react-codemirror2: 3.0.3
• codemirror: 5.31.0

Lagging page performance on Long Text...

Hi!

Thanks for creating this component.

When we receive a quite long text and insert in the component as value, the whole page becomes very slow (only the page)...

Do you know what could be the reason? And how we can fix it??

Thanks!

Codemirror do not show the init value for the first time

I encounter a strange problem. I use Codemirror 2 Controlled component. When the first time to load and show the codemirror 2 in my app, the initialized value was not show. and then if I reenter the page, the value will be show correctly. Even if I hard the value in the render method.

render() {
...
const initContent = '12345';

return (
 ...
<CodeMirror
                value={initContent}
                options={options}
                onBeforeChange={(editor, data, value) => {
                  this.setState({ markdownText: value });
                }}
                onChange={(editor, value) => {
                  // console.log('controlled', { value });
                }}
              />
...
);
}

Cannot read property 'value' of undefined

Hi,
I'm getting the following error when I type in codemirror: Cannot read property 'value' of undefined
My code:

<CodeMirror onChange={(event) => this.updateInput('paste', event.target.value)} value={this.state.paste} className="w-full flex" options={options} />

and the updateInput function:

updateInput(field, value) {
this.setState({ [field]: value });
}
Normal input works, but codemirror doesn't

codemirror lib size

The codemirror package is about 364 K,
How do you handle this problem?

How to get editor instance?

I am migrating from react-codemirror. I would like to know how to get code mirror instance or is it supported?

How to add autocompletion?

Is there any way to access the CodeMirror object as it was possible in react-codemirror through editorRef.getCodeMirrorInstance()?
If that ain't possible is there any other way to add completion/show-hint without access to it?

Calling showHint on the editor object (accessed through the keybinding callback) seems to have no effect.

Page jumps around with CodeMirror instances below the fold

I figured it would be better to have a separate issue for this, so here is what @scniro wrote about it in #3:

@stiang thanks for the feedback and sharing more details on this secondary issue! I indeed get the page jump you describe when I have enough instances on the page. This side effect seems to have been introduced from the fix I implemented for #1 - specifically, preserving and setting the cursor position. The page is jumping down because it's trying to set the cursor for the last instance, even if untouched and is internally at 0,0.

Without a change, there is a workaround currently but I'm not thrilled with it. If you specify resetCursorOnSet={true} - you'll be okay and the page won't jump. However, you'll not be getting a cursor position saved/set for your editor. There may be a better way to address this now that both sides of the above mentioned fix have surfaced. In the least, I'll be renaming this prop soon (I don't think it's very descriptive). Also please give #1 a look for some background on the issue should my suggestion not make total sense here.

I can confirm that resetCursorOnSet={true} fixes the jumping-around-issue, but unfortunately it resets the cursor even in the active CodeMirror instance (the one you’re typing in), so that doesn’t really work. And even if it did, for my use case it would be best to retain the cursor position in all instances.

It would be awesome if you were able to come up with a fix :)

onChange not working

onChange not working for Controlled

Having issues with preventing edits

I don't know if this is something that's supposed to be supported but I thought I'd bring it up.
I'm using the Controlled version and checking for edits to some fields when onBeforeChange fires (this is editing JSON). If everything is all good, I set the content from onBeforeChange into my container components state and it gets passed back down to the CodeMirror component.

However, if the user has attempted to edit a 'locked' field, I show them a message and then just pass the previous content back into CodeMirror's value prop.

While visually this appears to work, I believe there's an invisible internal state of the codemirror editor that isn't getting updated. This means what the user sees and the actual internal contents of CodeMirror become out of sync and things start breaking fairly quickly.

I've hacked around this for now by manually calling initChange and setCursor on a CodeMirror ref but it doesn't exactly feel great to do that.

Is there a proper way to do this sort of thing?

EDIT: I've been doing some more stuff and I think this issue could be more generic in that setting the value prop doesn't appear to to be able to CHANGE anything in the internal representation if it's in response to an onBeforeChange event because the deferred field is active internally causing ReactMirror to ignore the passed in value.

setting new scroll values not working

Hi,
I'm trying to scroll programmatically using

const {scroll} = this.state;

<CodeMirror
                 ...
                    onScroll={(editor, data) => {
                        this.setScroll(data);
                    }}
                    scroll={scroll}
                    autoScrollCursorOnSet={false}
                />

where state.scroll is {x,y} .
scrolling is working fine but when I'm trying to scroll programmatically nothing happens.
I've tried also using code mirror "native" scroll ( cm.scrollTo(x,y) ) and it's not working.
any idea?

Needs a transpiled distribution version of js

Thanks for passing along this wrapper!
We don't typically transpile our node_modules folder. Could you create a transpiled version of the component for distribution?

Probably should have been a major version

Thanks for this library!

I feel like the 1.1.x release should probably be a major version. It moved codemirror to peer dependency, and the requires are also different.

Would be great if such breaking changes can result in a major version in the future.

Thanks!

Mobile browser error: Cannot read property 'setOption' of undefined

We're getting an error thrown in Chrome for Android 7 and MS Edge Mobile:

TypeError: Cannot read property 'setOption' of undefined

Looks like it's being thrown here.

Per Codemirror's browser support page, mobile browser support is experimental. We can catch the mobile browsers in our application and render a textarea instead, but I thought maybe this error was introduced by recent changes made to your library since we never saw the issue prior to our release a couple days ago.

Thanks!

Installing a CodeMirror addon

Hi,
First, thanks for react-codemirror2.

My question: is there any documentation about addons?
I'd like to use one but don't know where to start.

I'm using react-codemirror2 from ClojureScript but will be able to adapt from jsx.

Thanks

Thank You

Just wanted to thank for this awesome component. I am using this on https://transform.now.sh/ and it is working great.

Update the props to better reflect the Codemirror APIs

This was the only confusing the first time I switched to this repo, basically I didn't understand why onChange didn't work, then I went to read the docs here and updated it.

I think onChange follows better the apis described here http://codemirror.net/doc/manual.html

Also I need to use the beforeChange event, and looking at the source code it seems you didn't expose it to the component. Is that right?

All the other things did work fine, great job with this repo!

Change handlers should not fire because of prop change

I finally got around to experiment with this component. Thanks for providing a react-redux friendly API via a controlled component. It works well so far, however I do have one issue.

Let's assume we have a react-codemirror2 instance in controlled mode (slightly adapted from your readme.md):

<CodeMirror
    value={reduxState.editor.value}
    options={options}
    onBeforeChange={(editor, data, value) => {dispatch(...state change...)}}
    onChange={(editor, metadata, value) => {}}
/>

It appears to work nicely when you use it regularly. However, if you try to use the "time travel" feature provided by redux, you notice something strange: the onBeforeChange(...) listener fires when the value prop changes. This creates new actions in the redux store during playback, which is clearly not intended.

Compare this to how <input type="text"/> works. Here, onChange(...) only fires when the actual user input changes, but changing the value prop programmatically will not fire the listener. This is one of the core concepts of flux/redux.

So, long story short, in order to make the behaviour consistent with all text areas and text inputs out there, please do not fire change listeners of any kind if the "change" was triggered programmatically via props. They also should not fire due to changes during the mounting of the codemirror component.

autoScrollCursorOnSet={false} deprecation has no replacement

Using autoScrollCursorOnSet = false on version 2.0.2, my editor does not scroll new content into view.

I can't seem to find any combination of scroll, autoScroll and autoCursor (I tried all six of them) that works the same. I do not want to scroll on new content since it comes from a server which might update it at any time, and I'm there to read in the middle of a big JSON.

Please provide a fix, this is keeping me from upgrading.

By the way, was using the Controlled component version.

Issue with the order of options

First of all, thank you for your work on this project. Especially given that react-codemirror appears abandoned.

I encountered an odd bug with the lint plugin. Specifically, I discovered that the order of options passed the CodeMirror component matter.

For example:

<CodeMirror options={{
  lint: true,
  gutters: ["CodeMirror-lint-markers"]  
}} />

Will not render lint warnings in the gutter. It works by instead doing:

<CodeMirror options={{
  gutters: ["CodeMirror-lint-markers"],
  lint: true
}} />

I think the problem is two parts:

1. react-codemirror2 iterates in setting options: https://github.com/scniro/react-codemirror2/blob/master/src/index.tsx#L296
2. Codemirror immediately invokes the constructor of the LintState when the lint: true option is set. In that constructor, the hasGutter flag is defined as false because the gutters option has yet to be set: https://github.com/codemirror/CodeMirror/blob/master/addon/lint/lint.js#L62

So, we could either try and get CodeMirror to not immediately invoke the constructor, or we could some how change react-codemirror2 to not iterate in setting options, but do it all at once.

Note: this is not a problem of react-codemirror, but only in react-codemirror2

thank you for being better than the original

took me a while to realize there was a fork, I was actually about to do it myself when I found this. A RCM project that is actually maintained and modern! SO much better. Deserves more stars. Thanks!

using it for a little pet project just for fun: http://cs-playground-react.surge.sh/

Feel free to close this, just had to say it.

Help: JSONLint not working

Hi,
Trying to make JSONLinting work for react-codemirror2.
Looks like im missing something here.

Code - Imports

import CodeMirror from 'react-codemirror2'
import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/theme/material.css'

import 'codemirror/lib/codemirror'
import 'codemirror/mode/javascript/javascript'
import jsonlint from 'jsonlint/lib/jsonlint'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'

window.jsonlint = jsonlint

Component

render () {
    const codeMirrorOptions = {
      lineNumbers: true,
      mode: 'application/json',
      lint: true,
      gutters: ['CodeMirror-lint-markers'],
      theme: 'material'
    }

   const value = {
      name: 'Hello'
   }

    return (
      <CodeMirror
        value={value}
        options={codeMirrorOptions}
      />
    )
  }

No error on browser console, but lint is not working. :(

Expected

typescript definition

Hi
Do you plan to create a typescript definition ?
I'm using @types/react-codemirror but I needed to change it as your module exports different object

Unit testing/coverage

While writing some basic tests, I've stumbled upon the difficulty of testing components with Enzyme/Jest due to the nature of codemirror creating an editor after the component has mounted. Enzyme seems to not see this in it's wrapper, thus any sort of API methods I expect to use are simply not there.

Any PR's and/or suggestions are more than welcome. I plan to leave this as a long running open issue until we get to > 90% coverage 😎

Slows down when there's lots of code

Hey there,

When I have a lot of text on the editor, it starts slowing down quite considerably. I suspect it's because of updating state all the time whenever a keystroke is made, and when there is a lot of code, there is a lot to update.

I'm basically using the example code onChangeBefore on the Controlled version. Around 400 lines and it becomes unusable. Should I have like a timeout or something?

Sorry if this is dumb. :)

Updating the value resets cursor position

Hi, thanks for writing this, I used react-codemirror before but ran into JedWatson/react-codemirror#121 ...
Now, when I update the state used in the value prop in onValueChange, the cursor resets to the beginning of the text. Any hint on how to prevent that?

Error because this.cursorPos is undefined

First of all - thanks for stepping up now that react-codemirror appears to be unmaintained!

I get an error when I include a <CodeMirror> element. The reason appears to be that this.cursorPos is undefined, but is still being used as an argument for this.editor.setCursor().

Looking at the source, it will indeed be undefined if the first outer if statement doesn’t trigger, but the second outer does:

componentWillReceiveProps(nextProps) {

    if (this.props.value !== nextProps.value) {
      this.hydrated = false;

      if (!this.props.resetCursorOnSet) {
        this.cursorPos = this.editor.getCursor();
      }
    }

    this.hydrate(nextProps);

    if (!this.props.resetCursorOnSet) {
      this.editor.setCursor(this.cursorPos);
    }
  }

I was able to solve this by initializing this.cursorPos in componentDidMount:

  this.cursorPos = {line: 0, ch: 0};

At this point the library appears to work, but I encountered another problem (the page scrolls down whenever the prop that controls the editor value is changed, on a page with multiple editors), but I’ll file that as a separate issue if it turns out to be related to the library.

addLineClass

Is it possible to access commands such as addLineClass in react-codemirror2?

I was attempting to set the node like so:

<CodeMirror
  ref={ c => this.codeMirror = c }
/>

and add a class to a line like so:

this.codeMirror.addLineClass((nextState.errorLine - 1), 'errorLine')

No luck though.

react-codemirror2 - add support for server-side rendering

Description

As of version 2.0.2, react-codemirror2 breaks server-side rendering, due to the import of codemirror requiring browser-level. A server-side render app needs extensive workaround (such as dynamic imports) or separate server/client components to use react-codemirror2 in an isomorphic app. See an example of an error below.

Desired Outcome

Enable react-codemirror2 to handle import of codemirror from a node context as is the case with server-side rendering.

Potential Fixes

• using a textarea if in an environment that does not support codemirror: server-side or mobile
  • sample implementation available in react-code-mirror
• having a dummy codemirror implementation if no window/navigator global found.

Example Error:

> node dist/server/index.js

/home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:18
var userAgent = navigator.userAgent;
                ^

ReferenceError: navigator is not defined
    at /home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:18:17
    at userAgent (/home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:11:82)
    at Object.<anonymous> (/home/dpula/projects/rookeries/node_modules/codemirror/lib/codemirror.js:14:2)
    at Module._compile (module.js:624:30)
    at Object.Module._extensions..js (module.js:635:10)
    at Module.load (module.js:545:32)
    at tryModuleLoad (module.js:508:12)
    at Function.Module._load (module.js:500:3)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

How to access keyHandled event

Hey guys, I'm trying to access a keyHandled event so I can preventDefault the original event.

I'm mapping a save command to the options like so:

var codeMirrorOptions = {
      lineNumbers: true,
      tabSize: 2,
      theme: this.state.theme,
      mode: 'jsx',
      extraKeys: {
        "Cmd-S": this.codeKeyPress,
        "Ctrl-S": this.codeKeyPress,
      }
    }

but this.codeKeyPress is not getting an event passed to it, just the code mirror module.

Coloration issue with codemirror 5.29.0

Hi there,

First, thanks for taking over maintenance of react-codemirror.
This is hugely needed and I'm found of the fact that people in the community take this over.

I've been using react-codemirror2 for a while, and when updating to [email protected], the coloration stopped working.

Reproduction repo: https://github.com/Jerskouille/repro-codemirror-issue/ (notice the doesnt branch).

• First pull master, run yarn && yarn start, and you'll see that it works fine
• Then git checkout doesnt && rm -rf node_modules && yarn && yarn start and you should not see syntax coloration anymore

In case this matters, I'm using node 8.4.0.

I've tried to reproduce on a CodeSandbox instance, but it doesn't fail there.

Please can you provide support for React 16

I've just tried upgrading to React 16 and yarn warns me:

"[email protected]" has incorrect peer dependency "react@>=15.5 <16"

Please could you make this compatible with 16 so we can upgrade React to v16

Many thanks

PS When I upgraded I got errors with other modules before I hit any errors with this module so I cannot yet identify a specific problem but hopefully you know why this is not compatible with 16 and are able to fix it so that people using this module have an upgrade path in the future. Many thanks

how to use defineMode?

I want to use my custom mode.

not rendering on mobile

It seems like codemirror is intentionally blocked on mobiles.
Why is that?

if (!IS_MOBILE) {
  cm = require('codemirror');
}

CodeMirror scrolls current line to the bottom of the viewport on change

Here’s a GIF:

CodeMirror’s value comes from parent component state, and the handleChange method updates parent component state.

Upgrade from 2.0.2 -> 3.0 crashes our app

When I first saw the 3.0.0 tag diff I did not think a new major release was warranted.

However for us before things just run smoothly, afterward upgrading we get this error:

In warning.js?4064:33

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `CodeAsset`. 
    in CodeAsset (created by CodeAssetForm)
    in fieldset (created by CodeAssetForm)
    in form (created by CodeAssetForm)
    in div (created by CodeAssetForm)
    in CodeAssetForm (created by Connect(CodeAssetForm))
    in Connect(CodeAssetForm) (created by withGettext(Connect(CodeAssetForm)))
    in withGettext(Connect(CodeAssetForm)) (created by AppCodeAssetForm)
    in AppCodeAssetForm
    in Provider

In invariant.js?4b7b:42 

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check the render method of `CodeAsset`.
    at invariant (invariant.js?4b7b:42)
    at createFiberFromElementType (react-dom.development.js?054f:8185)
    at createFiberFromElement (react-dom.development.js?054f:8130)
    at createChild (react-dom.development.js?054f:8832)
    at reconcileChildrenArray (react-dom.development.js?054f:9132)
    at reconcileChildFibers (react-dom.development.js?054f:9495)
    at reconcileChildrenAtPriority (react-dom.development.js?054f:10127)
    at reconcileChildren (react-dom.development.js?054f:10118)
    at updateHostComponent (react-dom.development.js?054f:10370)
    at beginWork (react-dom.development.js?054f:10609)

In react-dom.development.js?054f:8305 

The above error occurred in the <div> component:
    in div (created by CodeAsset)
    in label (created by CodeAsset)
    in div (created by CodeAsset)
    in CodeAsset (created by CodeAssetForm)
    in fieldset (created by CodeAssetForm)
    in form (created by CodeAssetForm)
    in div (created by CodeAssetForm)
    in CodeAssetForm (created by Connect(CodeAssetForm))
    in Connect(CodeAssetForm) (created by withGettext(Connect(CodeAssetForm)))
    in withGettext(Connect(CodeAssetForm)) (created by AppCodeAssetForm)
    in AppCodeAssetForm
    in Provider

Consider adding an error boundary to your tree to customize error handling behavior.
You can learn more about error boundaries at https://fb.me/react-error-boundaries.

In react-dom.development.js?054f:1345

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js?054f:1345)
    at invokeGuardedCallback (react-dom.development.js?054f:1195)
    at performWork (react-dom.development.js?054f:12800)
    at scheduleUpdateImpl (react-dom.development.js?054f:13185)
    at scheduleUpdate (react-dom.development.js?054f:13124)
    at scheduleTopLevelUpdate (react-dom.development.js?054f:13395)
    at Object.updateContainer (react-dom.development.js?054f:13425)
    at eval (react-dom.development.js?054f:17105)
    at Object.unbatchedUpdates (react-dom.development.js?054f:13256)
    at renderSubtreeIntoContainer (react-dom.development.js?054f:17104)

How to use JSON Linting

Hi,

could you maybe point me to a solution how to use json linting in react-codemirror2?
When i use mode javascript i get error highlighting in code but no gutters. This works with the react-codemirror 1 version. But as r_cm1 is outdated i would like to use this version.

is use the following option set
options={{
mode: 'application/json',
theme: 'material',
lineNumbers: true,
lineWrapping: true,
lineHeight: 10,
lint: true,
gutters: ["CodeMirror-lint-markers"],
}}
thanks in advance
Greetings Sascha