securingsincity / react-ace Goto Github PK
View Code? Open in Web Editor NEWReact Ace Component
Home Page: http://securingsincity.github.io/react-ace/
License: MIT License
React Ace Component
Home Page: http://securingsincity.github.io/react-ace/
License: MIT License
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.
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
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
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.
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
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 ?
The module is part of the core lib.
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;
Getting some warnings in console:
misspelled option "enableBasicAutocompletion"
misspelled option "enableLiveAutocompletion"
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?
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>
);
}
}
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.:)
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.
This builds fine with Babel-loader in webpack when we hit the browser I'm geting cannot read property 'ace' of undefined.
Could there be a way to get the event triggered or the keyCode of key pressed? And not just the new entered value?
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?
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')
);
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:
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 ?
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
If you don't import brace/ext/language_tools
, the package will show you warnings:
misspelled option "enableBasicAutocompletion"
misspelled option "enableLiveAutocompletion"
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
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.
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?
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)
just like editorProps, add a new editorOptions to support editor options.
Options such as maxLines, readOnly, tabSize can be implement in this way.
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).
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 (
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.
causing memory leaks
from the ace docs: https://github.com/ajaxorg/ace/wiki/Configuring-Ace
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
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!
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?
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!
Like React Input components,
it would be great to have a defaultValue
that only set the value at initial state.
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
Is it the time going forward to ES6/ES2015 in this project?
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'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?
Otherwise the parent component needs its own copy of reactify: browserify transforms should generally be dependencies.
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!
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.
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
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
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 }}
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.