Using initEditor method in ref causes additional SetValue call after receiving props with new value.

initEditor should be called only once in componentDidMount callback.

I enable all options. auto completion working but snippets not working. How can i enable snippets in react ace
setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets : true, tabSize: 4, fontSize: 14, showGutter: true }}

I use webpack, and after minification using UglifyJs, the bundle size comes to around ~=1.6MB (just react + react-ace). Do you have any suggestions to optimize the bundle size ?

React 15 was released a couple weeks ago. Basic use of react-ace seems to work OK, however, it is throwing a peerDep error:

› npm ls react
PROJECT @0.0.1 /My/system/path
`-- UNMET PEER DEPENDENCY [email protected]

npm ERR! peer dep missing: react@^0.13.0 || ^0.14.0, required by [email protected]
npm ERR! code 1

Having some trouble getting setup with react-ace. Installed react-ace and brace with npm and included the following:

var React = require('react');
var brace  = require('brace');
var AceEditor  = require('react-ace');

require('brace/mode/java')
require('brace/theme/github')

I'm building the project with browserify (through gulp). When running I get the following error in Chrome.

Uncaught TypeError: Cannot read property 'ace/ace' of undefined

Which is crashing in ace.jsx on the line

var ace = require('brace');

It's most likely something I'm doing wrong, but any help would be greatly appreciated!

thlorenz/brace#40 (comment)

node_modules/react-ace/src/ace.jsx: Line 1: The @jsx React.DOM pragma has been deprecated as of React 0.12

1 | /** @jsx React.DOM */
| ^
2 |
3 | var ace = require('brace');
4 | var React = require('react');
at File.errorWithNode (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/transformation/file/index.js:488:13)
at NodePath.visitor.Program (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/transformation/transformers/other/react.js:56:20)
at NodePath.call (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/traversal/path/context.js:61:28)
at NodePath.visit (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/traversal/path/context.js:94:8)
at TraversalContext.visitSingle (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/traversal/context.js:112:12)
at TraversalContext.visit (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/traversal/context.js:124:19)
at Function.traverse.node (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/traversal/index.js:72:17)
at Object.traverse as default
at PluginPass.transform (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/transformation/plugin-pass.js:44:27)
at File.transform (/home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/transformation/file/index.js:596:12)
at /home/klassm/IdeaProjects/react-test/node_modules/babel-loader/node_modules/babel-core/lib/babel/transformation/pipeline.js:131:19
@ ./~/react-ace/index.js 5:17-41

Getting some warnings in console:

misspelled option "enableBasicAutocompletion"
misspelled option "enableLiveAutocompletion"

Am getting this--

15:19:21 test.1 | ERROR in .//react-ace/src/ace.jsx
15:19:21 test.1 | Module parse failed: /Users/jeff.winkler/repos/content_creator/node_modules/react-ace/src/ace.jsx Line 99: Unexpected token <
15:19:21 test.1 | You may need an appropriate loader to handle this file type.
15:19:21 test.1 | | height: this.props.height
15:19:21 test.1 | | };
15:19:21 test.1 | | return (

When i press ctrl + f to show search box, i get following error:

Uncaught TypeError: Cannot read property 'Search' of undefined

Have anyone manage to get search box to work?

just like editorProps, add a new editorOptions to support editor options.

Options such as maxLines, readOnly, tabSize can be implement in this way.

Advantages:

• automatically support all options that ace editor support.
• cut down on code

Disadvantages:

• cannot limit data type cleanly.

I do not think the data type (now limited by propTypes) is a big problem.

If you think it is a good idea. I will implement it (reserve the old supported options by props now).

When using dispatch function in onChange function, will not get the expect value.

this.editor.value is null, so get nothing here.

Version: 3.0.0

Here is the demo:

import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import brace from 'brace';
import AceEditor from 'react-ace';

import 'brace/mode/sql';
import 'brace/mode/python';
import 'brace/theme/github';

// ActionCreators
export function onChangeAction(value) {
  // use `console.log(value)`  will not get the right expect value, an input print a letter.
  return {
    type: 'ON_CHANGE',
   text: value,
  }
};

// Editor Component
class Editor extends React.Component {
  constructor(props) {
    super(props);
  };

  render() {
    const { onChange } = this.props;
    return (
      <AceEditor
        mode="sql"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        width='100%'
        ref='editor'
        fontSize={15}
        editorProps={{$blockScrolling: true}}
      />
    );
  }
}


function mapDispatchToProps(dispatch) {
  return {onChange: bindActionCreators(onChangeAction, dispatch)};
};


connect(
  mapDispatchToProps
)(Editor)

// App
import { Provider } from 'react-redux';


class App extends React.Component {
  render() {
    const { store } = this.props;
    return (
      <Provider store={store}>
         <Editor />
      </Provider>
    );
  }
}

After upgrading to version 2.0.2, my application failed to render AceEditor. React throws an exception when rendering AceEditor. I am using react 0.13.3.

Here is my source:
var React = require('react');
var AceEditor = require('react-ace');
...
render: function () {
return (

Here is the stacktrace:

TypeError: 'undefined' is not a function (evaluating 'type.toUpperCase()')
at autoGenerateWrapperClass (...node_modules/react/lib/ReactDefaultInjection.js:54:0)
at getComponentClassForElement (.../node_modules/react/lib/ReactNativeComponent.js:60:0)
at validatePropTypes (.../node_modules/react/lib/ReactElementValidator.js:363:0)
at .../node_modules/react/lib/ReactElementValidator.js:409:0
at .../node_modules/react/lib/ReactCompositeComponent.js:790:0
at .../node_modules/react/lib/ReactCompositeComponent.js:817:0
at ReactCompositeComponent__renderValidatedComponent (.../node_modules/react/lib/ReactPerf.js:71:0)
at .../node_modules/react/lib/ReactCompositeComponent.js:238:0
at ReactCompositeComponent_mountComponent (.../node_modules/react/lib/ReactPerf.js:71:0)
at .../node_modules/react/lib/ReactServerRendering.js:69:0
at .../node_modules/react/lib/Transaction.js:135:0
at renderToStaticMarkup (.../node_modules/react/lib/ReactServerRendering.js:70:0)

Otherwise the parent component needs its own copy of reactify: browserify transforms should generally be dependencies.

When I use

handleChange(newValue) {
  this.setState({content: newValue});
}

it fails. Two change events are fired, one with the character typed, and the consecutive one with an empty string. But, interestingly, if I do this, it works.

handleChange(newValue) {
  console.log(newValue);
}

So, how do I get the value stored in the Ace editor ?

Hey,

I've found the wonderful Ace-Diff-Editor yesterday (https://github.com/benkeen/ace-diff).
And I wonder if it is possible to merge this function into this react-component.

Regards,
Waize

Hi. First, thanks for this awesome lib!
Is there any example of how to support custom code completion? I mean... I wanted to implement support for a small syntax I've been working on. It's not exactly a programming language like JavaScript.
Any idea?
Thank you very much.

Could there be a way to get the event triggered or the keyCode of key pressed? And not just the new entered value?

sorry to bother you;

I just spent several hours but could not found how to handle scroll event;
in my pre code

it's

<textarea onScroll={this.onScroll.bind(this)}>

and handleScroll:

handleScroll(event) {
        // I just want to sync two editor which content is similar
        let target = event.nativeEvent.target;
        let scrollRatio = target.scrollTop / (target.scrollHeight - target.clientHeight);
        this.props.handleScroll(scrollRatio);
}

but now:

<AceEditor onScroll={this.onScroll.bind(this)}>

it's not work;

I also try

<AceEditor refs="ace">

but I don't know how to get the attribute such as scrollTop

so, does it support onScroll as the same as onChange?

by the side , I just a newer about react, does there anything I ignore?

thanks a lot;

Latest version number (2.0) was bumped and committed without the corresponding tag. Being able to clone from github directly, based on version is nice

Is there a ref within the component that we can get our hands on, such that we can fire dom events? Specifically, is there a way to put focus on the editor (other than clicking it by hand). Thanks.

From reading through the source of react-ace and testing this prop it appears that it is unused. I think it may need to be passed along to ace.

Is it the time going forward to ES6/ES2015 in this project?

I'm facing this issue:

efused to load the image 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==' because it violates the following Content Security Policy directive: "default-src *". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
DragdropHandler @ D:\Projects\GitHub\xpath-tool\node_modules\brace\index.js:2948MouseHandler @ D:\Projects\GitHub\xpath-tool\node_modules\brace\index.js:3782Editor @ D:\Projects\GitHub\xpath-tool\node_modules\brace\index.js:11316exports.edit @ D:\Projects\GitHub\xpath-tool\node_modules\brace\index.js:18626componentDidMount @ D:\Projects\GitHub\xpath-tool\node_modules\react-ace\lib\ace.js:61assign.notifyAll @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\CallbackQueue.js:68ON_DOM_READY_QUEUEING.close @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactReconcileTransaction.js:81Mixin.closeAll @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\Transaction.js:207Mixin.perform @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\Transaction.js:148batchedMountComponentIntoNode @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactMount.js:269Mixin.perform @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\Transaction.js:134ReactDefaultBatchingStrategy.batchedUpdates @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactDefaultBatchingStrategy.js:66batchedUpdates @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactUpdates.js:110ReactMount._renderNewRootComponent @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactMount.js:404wrapper @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactPerf.js:70ReactMount.render @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactMount.js:493wrapper @ D:\Projects\GitHub\xpath-tool\build\node_modules\react\lib\ReactPerf.js:70(anonymous function) @ app.js:37dispatchHandler @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\createRouter.js:379(anonymous function) @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\createRouter.js:347(anonymous function) @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\Transition.js:69(anonymous function) @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\Transition.js:69(anonymous function) @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\Transition.js:69Transition.to @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\Transition.js:72(anonymous function) @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\createRouter.js:346Transition.from @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\Transition.js:51dispatch @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\createRouter.js:343refresh @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\createRouter.js:394run @ D:\Projects\GitHub\xpath-tool\build\node_modules\react-router\lib\createRouter.js:390(anonymous function) @ app.js:37Module._compile @ module.js:425Module._extensions..js @ module.js:432Module.load @ module.js:356Module._load @ module.js:313Module.require @ module.js:366require @ module.js:385(anonymous function) @ main.js:3

The editor works fine but I'd like to remove that error.

Thank you!

I get this error using the ace editor:

index.js:1169 Uncaught TypeError: Cannot read property 'textContent' of null

Am I missing a property or something?

I’m getting these warnings:

Automatically scrolling cursor into view after selection change this will be disabled in the next version set editor.$blockScrolling = Infinity to disable this message

Where should I set editor.$blockScrolling = Infinity to prevent these warnings?

If objects don't release reference when they unmount, it will cause memory leak.

A class which show and hide element according to state can easily demonstrate this, like below:

export default class myClass extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      isHidden: false
    };
  }
  componentDidMount() {
    setInterval(() => {
      this.setState({
        isHidden: !this.state.isHidden
      });
    }, 10);
  }
  render() {
    return (
      this.state.isHidden ? null : <CodeEditor />
    );
  }
}

Some minutes later, will like this:

Hi,
I'm getting this error when I use react 0.13.1 with webpack. I do not get this bug when I use react 0.12.0. My project is basically empty, it's only a tentative to mount a AceEditor.

var React = require('react');
var Ace = require('react-ace');
React.render(
    <Ace
        mode="java"
        theme="github"
        name="uniq-ace"
    />,
    document.getElementById('ace-container')
);

First, thank you for react-ace, this is awsome but I still can't use it. React-ace 2.0.2 still exports JSX. I mean, the NPM entry point is a JSX file.

Most of the developers using Webpack configures .jsx like this:

{test: /\.jsx/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ },

The node_modules is being excluded because that would take too long to babel everything from the node_modules folder. So, NPM packages targeting Webpack developers can be developed using ES2015 and JSX but they normally build the source code and publish it as ES5, so it's regular JavaScript when you import it in Webpack.

So, for now, I'll continue to use https://github.com/eccenca/react-ace-wrapper/ which is a wrapper that does what I need.

A fix would be welcome.

Thank you for your effort again, I really like it.

My react component has imported
import AceEditor from 'react-ace';

import 'brace/theme/chrome';

import 'brace/mode/css';

import 'brace/ext/language_tools';

and renders
<AceEditor value={this.getStylesheetValue()} mode="css" theme="chrome" height="400px" width="100%" editorProps={{$blockScrolling: true}} onBlur={this.onBlur} onChange={this.onChange} />

On typing/pasting, the browser gets stuck and after a while shows this errors -
index.js:10431 Uncaught RangeError: Maximum call stack size exceeded

Hey, thanks to provide such a wrapper of ace-editor. Good job.
I have a problem now. Actually I'm new to reactjs. Now I am working on a project with react, redux, material-ui and ace-editor. I really need your help.
When I create two ace-editor in one component, only first one can work. The other one does exist in the source code, but cannot show in the browser. It's very weird to me...

The code looks like:

<div>
<AceEditor />  /**This one works**/

<AceEditor >  /**doesn't work**/
</div>

Which part I did it wrong? Or what should I do?
Thanks.:)

This builds fine with Babel-loader in webpack when we hit the browser I'm geting cannot read property 'ace' of undefined.

Somehow componentWillReceiveProps is called before componentDidMount resulting in an error because this.editor is not yet defined when trying to call getValue on it. I am pretty sure that React lifecycle should call componentDidMount before it calls componentWillReceiveProps, do you have any suggestion of what could be causing this issue? Currently using React 0.14.7

I want to use react-ace with react v0.14.0 but it looks like latest react-ace (2.5.0) does not support react v0.14.0 yet..

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.11.2 <1.0.0 || ^0.14.0-rc

When setting the value pronto include new lines and tabs, I had to use html symbols instead of \n, \r, \t etc. Is this intended behavior?

The module is part of the core lib.

i have some issues with that component because it's redrawn on every setState even if the editor actually does not need an update.
This is because shouldComponentUpdate is not implemented as explained here

Here is an example of implementation
https://github.com/Lapple/react-json-inspector/blob/master/json-inspector.js

I'd like to disable syntax checker as my editor is a partial html editor.
I found two ways to achieve this but I need an access to the editor instance or mode prototype
http://stackoverflow.com/a/13016089/729454
https://groups.google.com/forum/?fromgroups=#!topic/ace-discuss/bOovWtXhtdE

Any suggestion for achieving this?

If you don't import brace/ext/language_tools, the package will show you warnings:

misspelled option "enableBasicAutocompletion"
misspelled option "enableLiveAutocompletion"

this is a workaround I guess, but you should put React into peerDependencies instead of dependencies.

Because React have issues when you use multiple versions of it, I can't make your module working with latest React.

See a lot of references here: https://www.google.com/?#q=react+peerdependencies

You could just do:

"peerDependencies": { "react": "*" }

Thanks

I have an editor, and some additional navigation components inside a common parent. The idea is, when you click certain buttons, the editor jumps to certain parts of the text. I am doing this in another app by simply calling

editor.find(searchRegex,{
   backwards: false,
   wrap: true,
   caseSensitive: false,
   wholeWord: false,
   regExp: true,
});

With this react component, I have no way to access this functionality. It looks like if the ReactAce class implemented a find method as a passthrough to editor.find, I could call that from the parent using react's ref functionality. It feels a bit odd, but it should work.

Would you be against adding such a thing? It would probably be preferable to proxy methods than to just allow access to the editor directly, no?

causing memory leaks

I'm listening on window's resize event to change ace's dimensions (https://github.com/voronianski/esnextbin/blob/master/src/components/Editors.jsx#L115) however after changing dimensions of wrapper with id codeEditor dimensions of class .ace_content are not changed.

Hi! First of all, thanks for making this component. It's been a big help in my development process thus far.

I want to programmatically manipulate the editor, specifically to clear the selection and scroll up. How do I go about getting the editor object?
Normally it would be pretty straightforward, but it's not clear to me how to do so through/around the React framework.

from the ace docs: https://github.com/ajaxorg/ace/wiki/Configuring-Ace

As per https://github.com/ajaxorg/ace/wiki/Embedding-API#adding-new-commands-and-keybindings, the ace editor supports custom key bindings. It would be cool if react-ace took a prop containing a list of custom key bindings to add.

Like React Input components,
it would be great to have a defaultValue that only set the value at initial state.

Would you consider publishing the resulting code as plain ES5 module?
Pre-compilation of node_modules in big projects usually does not works too well so it's better to publish ES5 code as main entry point.

I'd forked the repo and re-written the code to compile to ES5 as prepublish step (we use it in our current project now), so you can have a look at example implementation there. I'd also used some of my helper libs, so it's a bit too many changes to make PR, but maybe you can consider just switching to publishing ES5.
Thanks!