Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-ace

Package Overview
Dependencies
Maintainers
1
Versions
102
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-ace - npm Package Compare versions

Comparing version 6.2.0 to 6.2.2

.nyc_output/41ba3ebcae8fd7428b4bf8360622ecce.json
.nyc_output/c0bec67043da3ea963dd06910b29474d.json
.nyc_output/ef613cd87eb438a128e8383d4326c734.json
.vscode/settings.json
coverage/ace.jsx.html
coverage/ace.tsx.html
coverage/base.css
coverage/editorOptions.js.html
coverage/editorOptions.ts.html
coverage/index.html
coverage/lcov-report/ace.jsx.html
coverage/lcov-report/ace.tsx.html
coverage/lcov-report/base.css
coverage/lcov-report/editorOptions.js.html
coverage/lcov-report/editorOptions.ts.html
coverage/lcov-report/index.html
coverage/lcov-report/prettify.css
coverage/lcov-report/prettify.js
coverage/lcov-report/setup.js.html
coverage/lcov-report/sort-arrow-sprite.png
coverage/lcov-report/sorter.js
coverage/lcov-report/split.jsx.html
coverage/lcov-report/split.tsx.html
coverage/lcov-report/src/ace.jsx.html
coverage/lcov-report/src/index.html
coverage/lcov-report/tests/index.html
coverage/lcov-report/tests/setup.js.html
coverage/lcov.info
coverage/prettify.css
coverage/prettify.js
coverage/setup.js.html
coverage/sort-arrow-sprite.png
coverage/sorter.js
coverage/split.jsx.html
coverage/split.tsx.html
coverage/src/ace.jsx.html
coverage/src/index.html
coverage/tests/index.html
coverage/tests/setup.js.html

117

CHANGELOG.md

@@ -5,141 +5,152 @@ # Changelog

* Fully move to TypeScript interally
* Publish typings for the split and diff editor
- Fully move to TypeScript interally
- Publish typings for the split and diff editor
## 6.2.2
- Upgrade dev dependencies (webpack,jsdom,react)
- In type definitions, move debounceChangePeriod from AceOptions
## 6.2.1
- Add editor to onFocus event as per issue #389
- Upgraded webpack
- Add exec argument in ts #535
- Prettier as part of the build
## 6.2.0
* Support for React 17
* Upgraded dependencies
* AceOptions interface adds debounceChangePeriod
* update types
- Support for React 17
- Upgraded dependencies
- AceOptions interface adds debounceChangePeriod
- update types
## 6.1.4
* Fixes #479 Diff component does not refresh when value prop changes
- Fixes #479 Diff component does not refresh when value prop changes
## 6.1.3
* Fixes #300 where users were not able to set annotations for multiline text that is changed
- Fixes #300 where users were not able to set annotations for multiline text that is changed
## 6.1.2
* Additional Diff documentation
* Add className to diff
* Add Logo to docs
* upgrade dev dependencies
- Additional Diff documentation
- Add className to diff
- Add Logo to docs
- upgrade dev dependencies
## 6.1.1
* Fixes typo in `console.warn`
* Adds style property to typings
- Fixes typo in `console.warn`
- Adds style property to typings
## 6.1.0
* Onchange support in diff editor
* Debounce Prop support in split editor
- Onchange support in diff editor
- Debounce Prop support in split editor
## 6.0.0
* Adds Diff editor
- Adds Diff editor
## 5.10.0
* Upgraded many build dependencies
* Split editor adds UndoManager
- Upgraded many build dependencies
- Split editor adds UndoManager
## 5.9.0
* First value resets undo manager. Closes #339 and #223
* Updated split editor documentation
- First value resets undo manager. Closes #339 and #223
- Updated split editor documentation
## 5.8.0
* Upgrade brace to 0.11
* More loose comparison for componentDidMount for default value. Closes #317. Thanks @VijayKrish93
- Upgrade brace to 0.11
- More loose comparison for componentDidMount for default value. Closes #317. Thanks @VijayKrish93
## 5.7.0
* Adds debounce option for onChange event
* Add support onCursorChange event
* Adds editor as second argument to the onBlur
- Adds debounce option for onChange event
- Add support onCursorChange event
- Adds editor as second argument to the onBlur
## 5.5.0
* Adds the onInput event
- Adds the onInput event
## 5.4.0
* #285: Added the possibility to change key bindings of existing commands. thanks to @FurcyPin
- #285: Added the possibility to change key bindings of existing commands. thanks to @FurcyPin
## 5.3.0
* Adds support for React 16 thanks to @layershifter
* Removes react and react-dom from build. thanks to @M-ZubairAhmed
- Adds support for React 16 thanks to @layershifter
- Removes react and react-dom from build. thanks to @M-ZubairAhmed
## 5.2.1 and 5.2.2
* Remove Open Collective from build
- Remove Open Collective from build
## 5.2.0
* Add support for events in onBlur and onFocus callbacks
* Adds onValidate callback
- Add support for events in onBlur and onFocus callbacks
- Adds onValidate callback
## 5.1.2
* Resize on component did mount and component did update. Fixes #207 and #212.
- Resize on component did mount and component did update. Fixes #207 and #212.
## 5.1.1
* Fix TypeScript definitions for EditorProps
- Fix TypeScript definitions for EditorProps
## 5.1.0
* Editor options do not get reverted due to default props #226
* Markers can be unset to an empty value #229
* Typescript update to set state to empty object instead of undefined
- Editor options do not get reverted due to default props #226
- Markers can be unset to an empty value #229
- Typescript update to set state to empty object instead of undefined
## 5.0.1
* Fixes file extension issue related to `5.0.0`.
- Fixes file extension issue related to `5.0.0`.
## 5.0.0
* Support for a Split View Editor - see more about the Split View editor [here](https://github.com/securingsincity/react-ace/blob/master/docs/Split.md)
* Ace Editor will now warn on mispelled editor options
* All new documentation
- Support for a Split View Editor - see more about the Split View editor [here](https://github.com/securingsincity/react-ace/blob/master/docs/Split.md)
- Ace Editor will now warn on mispelled editor options
- All new documentation
## 4.4.0
* Ace's resize method will be called when the prop `width` changes
- Ace's resize method will be called when the prop `width` changes
## 4.3.0
* Adds support for `onSelectionChange` event
* Add the `Event` as an optional argument to the `onChange` prop
* All new examples
- Adds support for `onSelectionChange` event
- Add the `Event` as an optional argument to the `onChange` prop
- All new examples
## 4.2.2
* [bugfix] should not handle markers without any markers
- [bugfix] should not handle markers without any markers
## 4.2.1
* Use `prop-type` package instead of React.PropType
- Use `prop-type` package instead of React.PropType
## 4.2.0
* Fix `ref` related error
- Fix `ref` related error
## 4.1.6
* Reverse `PureComponent` use in AceEditor back to `Component`
- Reverse `PureComponent` use in AceEditor back to `Component`
## 4.1.5
* Add ability to set `scrollMargins`
- Add ability to set `scrollMargins`
## 4.1.4
* TypeScript Definitions
- TypeScript Definitions

162

docs/FAQ.md

@@ -7,7 +7,6 @@ # Frequently Asked Questions

* [create-react-app](https://github.com/securingsincity/react-ace-create-react-app-example)
* [preact](https://github.com/securingsincity/react-ace-preact-example)
* [webpack](https://github.com/securingsincity/react-ace-webpack-example)
- [create-react-app](https://github.com/securingsincity/react-ace-create-react-app-example)
- [preact](https://github.com/securingsincity/react-ace-preact-example)
- [webpack](https://github.com/securingsincity/react-ace-webpack-example)
## How do call methods on the editor? How do I call Undo or Redo?

@@ -19,9 +18,9 @@

const reactAceComponent = this.refs.reactAceComponent;
const editor = reactAceComponent.editor
const editor = reactAceComponent.editor;
editor.find(searchRegex, {
backwards: false,
wrap: true,
caseSensitive: false,
wholeWord: false,
regExp: true,
backwards: false,
wrap: true,
caseSensitive: false,
wholeWord: false,
regExp: true
});

@@ -51,16 +50,15 @@ ```

```javascript
import React from 'react';
import { render } from 'react-dom';
import brace from 'brace';
import AceEditor from 'react-ace';
import React from "react";
import { render } from "react-dom";
import brace from "brace";
import AceEditor from "react-ace";
import 'brace/mode/python';
import 'brace/snippets/python';
import 'brace/ext/language_tools';
import 'brace/theme/github';
import "brace/mode/python";
import "brace/snippets/python";
import "brace/ext/language_tools";
import "brace/theme/github";
function onChange(newValue) {
console.log('change',newValue);
console.log("change", newValue);
}

@@ -75,8 +73,8 @@

name="UNIQUE_ID_OF_DIV"
editorProps={{$blockScrolling: true}}
editorProps={{ $blockScrolling: true }}
enableBasicAutocompletion={true}
enableLiveAutocompletion={true}
enableSnippets={true}
/>,
document.getElementById('example')
/>,
document.getElementById("example")
);

@@ -99,2 +97,3 @@ ```

## How do I get selected text ?
```javascript

@@ -107,28 +106,31 @@ const selectedText = this.refs.aceEditor.editor.getSelectedText();

## How do I add markers?
```javascript
const markers = [{
startRow: 3,
type: 'text',
className: 'test-marker'
}];
const wrapper = (<AceEditor markers={markers}/>);
const markers = [
{
startRow: 3,
type: "text",
className: "test-marker"
}
];
const wrapper = <AceEditor markers={markers} />;
```
## How do I add annotations?
```javascript
const annotations = [{
const annotations = [
{
row: 3, // must be 0 based
column: 4, // must be 0 based
text: 'error.message', // text to show in tooltip
type: 'error'
}]
const editor = (
<AceEditor
annotations={annotations}
/>
)
column: 4, // must be 0 based
text: "error.message", // text to show in tooltip
type: "error"
}
];
const editor = <AceEditor annotations={annotations} />;
```
## How do I add key-bindings?
```javascript
render() {

@@ -149,6 +151,8 @@ return <div>

```
## How do I change key-bindings for an existing command?
Same syntax as above, where `exec` is given the name of the command to rebind.
```javascript
render() {

@@ -171,2 +175,3 @@ return <div>

## How do I add the search box?
Add the following line

@@ -185,28 +190,67 @@

My custom mode is:
```javascript
export default class CustomSqlMode extends ace.acequire('ace/mode/text').Mode {
constructor(){
super();
// Your code goes here
}
import "brace/mode/java";
export class CustomHighlightRules extends window.ace.acequire(
"ace/mode/text_highlight_rules"
).TextHighlightRules {
constructor() {
super();
this.$rules = {
start: [
{
token: "comment",
regex: "#.*$"
},
{
token: "string",
regex: '".*?"'
}
]
};
}
}
export default class CustomSqlMode extends window.ace.acequire("ace/mode/java")
.Mode {
constructor() {
super();
this.HighlightRules = CustomHighlightRules;
}
}
```
And my react-ace code looks like:
```javascript
render() {
return <div>
<AceEditor
ref="aceEditor"
mode="sql" // Default value since this props must be set.
theme="chrome" // Default value since this props must be set.
/>
</div>;
import React, { Component } from "react";
import brace from "brace";
import AceEditor from "react-ace";
import CustomSqlMode from "./CustomSqlMode.js";
import "brace/theme/github";
class App extends Component {
componentDidMount() {
const customMode = new CustomSqlMode();
this.refs.aceEditor.editor.getSession().setMode(customMode);
}
render() {
return (
<div className="App">
<AceEditor
ref="aceEditor"
mode="text"
theme="github"
name="UNIQUE_ID_OF_DIV"
editorProps={{ $blockScrolling: true }}
/>
</div>
);
}
}
componentDidMount() {
const customMode = new CustomSqlMode();
this.refs.aceEditor.editor.getSession().setMode(customMode);
}
export default App;
```

15

lib/ace.js

@@ -155,6 +155,2 @@ 'use strict';

if (focus) {
this.editor.focus();
}
if (onLoad) {

@@ -165,2 +161,6 @@ onLoad(this.editor);

this.editor.resize();
if (focus) {
this.editor.focus();
}
}

@@ -296,3 +296,3 @@ }, {

if (this.props.onFocus) {
this.props.onFocus(event);
this.props.onFocus(event, this.editor);
}

@@ -385,6 +385,3 @@ }

var divStyle = _extends({ width: width, height: height }, style);
return _react2.default.createElement('div', { ref: this.updateRef,
id: name,
style: divStyle
});
return _react2.default.createElement('div', { ref: this.updateRef, id: name, style: divStyle });
}

@@ -391,0 +388,0 @@ }]);

2

lib/diff.js

@@ -127,3 +127,2 @@ 'use strict';

case C.DIFF_DELETE:
// If the deletion starts with a newline, push the cursor down to that line

@@ -158,3 +157,2 @@ if (firstChar === '\n') {

case C.DIFF_INSERT:
// If the insertion starts with a newline, push the cursor down to that line

@@ -161,0 +159,0 @@ if (firstChar === '\n') {

6

lib/split.js

@@ -203,3 +203,2 @@ 'use strict';

split.forEach(function (editor, index) {
if (nextProps.mode !== oldProps.mode) {

@@ -417,6 +416,3 @@ editor.getSession().setMode('ace/mode/' + nextProps.mode);

var divStyle = _extends({ width: width, height: height }, style);
return _react2.default.createElement('div', { ref: this.updateRef,
id: name,
style: divStyle
});
return _react2.default.createElement('div', { ref: this.updateRef, id: name, style: divStyle });
}

@@ -423,0 +419,0 @@ }]);

23

package.json
{
"name": "react-ace",
"version": "6.2.0",
"version": "6.2.2",
"description": "A react component for Ace Editor",

@@ -8,2 +8,3 @@ "main": "lib/index.js",

"scripts": {
"prettier": "prettier --print-width 120 --single-quote --trailing-comma all --write \"src/**\" \"example/*.js\"",
"clean": "rimraf lib dist",

@@ -30,3 +31,3 @@ "lint": "node_modules/.bin/eslint src/*",

"babel-core": "^6.26.3",
"babel-eslint": "^9.0.0",
"babel-eslint": "^10.0.0",
"babel-loader": "^7.0.0",

@@ -45,11 +46,12 @@ "babel-plugin-transform-object-rest-spread": "^6.26.0",

"eslint-plugin-react": "7.11.1",
"jsdom": "^12.0.0",
"jsdom": "^13.0.0",
"mocha": "5.2.0",
"nyc": "13.0.1",
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-test-renderer": "^16.5.1",
"prettier": "^1.14.3",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"react-test-renderer": "^16.6.3",
"rimraf": "2.6.2",
"sinon": "6.0.1",
"webpack": "4.19.1",
"webpack": "4.28.0",
"webpack-cli": "^3.1.0",

@@ -68,6 +70,13 @@ "webpack-dev-server": "^3.1.8"

"diff-match-patch": "^1.0.4",
"husky": "^1.1.1",
"lodash.get": "^4.4.2",
"lodash.isequal": "^4.5.0",
"pretty-quick": "^1.7.0",
"prop-types": "^15.6.2"
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged"
}
},
"peerDependencies": {

@@ -74,0 +83,0 @@ "react": "^0.13.0 || ^0.14.0 || ^15.0.1 || ^16.0.0",

84

src/ace.js

@@ -1,8 +0,8 @@

import ace from 'brace'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import isEqual from 'lodash.isequal'
import ace from 'brace';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import isEqual from 'lodash.isequal';
const { Range } = ace.acequire('ace/range');
import { editorOptions, editorEvents,debounce } from './editorOptions.js'
import { editorOptions, editorEvents, debounce } from './editorOptions.js';

@@ -15,3 +15,3 @@ export default class ReactAce extends Component {

});
this.debounce=debounce;
this.debounce = debounce;
}

@@ -34,3 +34,3 @@

showPrintMargin,
scrollMargin = [ 0, 0, 0, 0],
scrollMargin = [0, 0, 0, 0],
keyboardHandler,

@@ -56,3 +56,3 @@ onLoad,

}
this.editor.renderer.setScrollMargin(scrollMargin[0], scrollMargin[1], scrollMargin[2], scrollMargin[3])
this.editor.renderer.setScrollMargin(scrollMargin[0], scrollMargin[1], scrollMargin[2], scrollMargin[3]);
this.editor.getSession().setMode(`ace/mode/${mode}`);

@@ -62,3 +62,3 @@ this.editor.setTheme(`ace/theme/${theme}`);

this.editor.getSession().setValue(!defaultValue ? value : defaultValue, cursorStart);
this.editor.navigateFileEnd()
this.editor.navigateFileEnd();
this.editor.renderer.setShowGutter(showGutter);

@@ -83,3 +83,3 @@ this.editor.getSession().setUseWrapMode(wrapEnabled);

this.editor.getSession().setAnnotations(annotations || []);
if(markers && markers.length > 0){
if (markers && markers.length > 0) {
this.handleMarkers(markers);

@@ -95,3 +95,5 @@ }

} else if (this.props[option]) {
console.warn(`ReactAce: editor option ${option} was activated but not found. Did you need to import a related tool or did you possibly mispell the option?`)
console.warn(
`ReactAce: editor option ${option} was activated but not found. Did you need to import a related tool or did you possibly mispell the option?`,
);
}

@@ -102,7 +104,6 @@ }

if (Array.isArray(commands)) {
commands.forEach((command) => {
if(typeof command.exec == 'string') {
commands.forEach(command => {
if (typeof command.exec == 'string') {
this.editor.commands.bindKey(command.bindKey, command.exec);
}
else {
} else {
this.editor.commands.addCommand(command);

@@ -121,6 +122,2 @@ }

if (focus) {
this.editor.focus();
}
if (onLoad) {

@@ -131,2 +128,6 @@ onLoad(this.editor);

this.editor.resize();
if (focus) {
this.editor.focus();
}
}

@@ -149,3 +150,3 @@

let oldClassesArray = oldProps.className.trim().split(' ');
oldClassesArray.forEach((oldClass) => {
oldClassesArray.forEach(oldClass => {
let index = appliedClassesArray.indexOf(oldClass);

@@ -198,3 +199,3 @@ appliedClassesArray.splice(index, 1);

}
if (!isEqual(nextProps.markers, oldProps.markers) && (Array.isArray(nextProps.markers))) {
if (!isEqual(nextProps.markers, oldProps.markers) && Array.isArray(nextProps.markers)) {
this.handleMarkers(nextProps.markers);

@@ -205,6 +206,6 @@ }

if (!isEqual(nextProps.scrollMargin, oldProps.scrollMargin)) {
this.handleScrollMargins(nextProps.scrollMargin)
this.handleScrollMargins(nextProps.scrollMargin);
}
if(prevProps.height !== this.props.height || prevProps.width !== this.props.width){
if (prevProps.height !== this.props.height || prevProps.width !== this.props.width) {
this.editor.resize();

@@ -218,3 +219,3 @@ }

handleScrollMargins(margins = [0, 0, 0, 0]) {
this.editor.renderer.setScrollMargins(margins[0], margins[1], margins[2], margins[3])
this.editor.renderer.setScrollMargins(margins[0], margins[1], margins[2], margins[3]);
}

@@ -241,5 +242,5 @@

onCursorChange(event) {
if(this.props.onCursorChange) {
if (this.props.onCursorChange) {
const value = this.editor.getSelection();
this.props.onCursorChange(value, event)
this.props.onCursorChange(value, event);
}

@@ -249,3 +250,3 @@ }

if (this.props.onInput) {
this.props.onInput(event)
this.props.onInput(event);
}

@@ -255,3 +256,3 @@ }

if (this.props.onFocus) {
this.props.onFocus(event);
this.props.onFocus(event, this.editor);
}

@@ -262,3 +263,3 @@ }

if (this.props.onBlur) {
this.props.onBlur(event,this.editor);
this.props.onBlur(event, this.editor);
}

@@ -321,9 +322,3 @@ }

const divStyle = { width, height, ...style };
return (
<div ref={this.updateRef}
id={name}
style={divStyle}
>
</div>
);
return <div ref={this.updateRef} id={name} style={divStyle} />;
}

@@ -340,6 +335,3 @@ }

width: PropTypes.string,
fontSize: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
showGutter: PropTypes.bool,

@@ -376,10 +368,4 @@ onChange: PropTypes.func,

wrapEnabled: PropTypes.bool,
enableBasicAutocompletion: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array,
]),
enableLiveAutocompletion: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array,
]),
enableBasicAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
enableLiveAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
commands: PropTypes.array,

@@ -411,3 +397,3 @@ };

style: {},
scrollMargin: [ 0, 0, 0, 0],
scrollMargin: [0, 0, 0, 0],
setOptions: {},

@@ -414,0 +400,0 @@ wrapEnabled: false,

134

src/diff.js
import SplitEditor from './split.js';
import React, { Component } from 'react'
import React, { Component } from 'react';
import PropTypes from 'prop-types';

@@ -9,3 +9,3 @@ import DiffMatchPatch from 'diff-match-patch';

super(props);
this.state={
this.state = {
value: this.props.value,

@@ -18,6 +18,6 @@ };

componentDidUpdate() {
const {value} = this.props;
const { value } = this.props;
if (value !== this.state.value) {
this.setState({value});
this.setState({ value });
}

@@ -28,5 +28,5 @@ }

this.setState({
value: value
value: value,
});
if(this.props.onChange){
if (this.props.onChange) {
this.props.onChange(value);

@@ -70,3 +70,3 @@ }

diff.forEach((chunk) => {
diff.forEach(chunk => {
const chunkType = chunk[0];

@@ -86,69 +86,67 @@ const text = chunk[1];

switch (chunkType) {
case C.DIFF_EQUAL:
cursor.left += lines;
cursor.right += lines;
case C.DIFF_EQUAL:
cursor.left += lines;
cursor.right += lines;
break;
case C.DIFF_DELETE:
break;
case C.DIFF_DELETE:
// If the deletion starts with a newline, push the cursor down to that line
if (firstChar === '\n') {
cursor.left++;
lines--;
}
// If the deletion starts with a newline, push the cursor down to that line
if (firstChar === '\n') {
cursor.left++;
lines--;
}
linesToHighlight = lines;
linesToHighlight = lines;
// If the deletion does not include a newline, highlight the same line on the right
if (linesToHighlight === 0) {
diffedLines.right.push({
startLine: cursor.right,
endLine: cursor.right,
});
}
// If the deletion does not include a newline, highlight the same line on the right
if (linesToHighlight === 0) {
diffedLines.right.push({
startLine: cursor.right,
endLine: cursor.right,
// If the last character is a newline, we don't want to highlight that line
if (lastChar === '\n') {
linesToHighlight -= 1;
}
diffedLines.left.push({
startLine: cursor.left,
endLine: cursor.left + linesToHighlight,
});
}
// If the last character is a newline, we don't want to highlight that line
if (lastChar === '\n') {
linesToHighlight -= 1;
}
cursor.left += lines;
break;
case C.DIFF_INSERT:
// If the insertion starts with a newline, push the cursor down to that line
if (firstChar === '\n') {
cursor.right++;
lines--;
}
diffedLines.left.push({
startLine: cursor.left,
endLine: cursor.left + linesToHighlight,
});
linesToHighlight = lines;
cursor.left += lines;
break;
case C.DIFF_INSERT:
// If the insertion does not include a newline, highlight the same line on the left
if (linesToHighlight === 0) {
diffedLines.left.push({
startLine: cursor.left,
endLine: cursor.left,
});
}
// If the insertion starts with a newline, push the cursor down to that line
if (firstChar === '\n') {
cursor.right++;
lines--;
}
// If the last character is a newline, we don't want to highlight that line
if (lastChar === '\n') {
linesToHighlight -= 1;
}
linesToHighlight = lines;
// If the insertion does not include a newline, highlight the same line on the left
if (linesToHighlight === 0) {
diffedLines.left.push({
startLine: cursor.left,
endLine: cursor.left,
diffedLines.right.push({
startLine: cursor.right,
endLine: cursor.right + linesToHighlight,
});
}
// If the last character is a newline, we don't want to highlight that line
if (lastChar === '\n') {
linesToHighlight -= 1;
}
diffedLines.right.push({
startLine: cursor.right,
endLine: cursor.right + linesToHighlight,
});
cursor.right += lines;
break;
default:
throw new Error('Diff type was not defined.');
cursor.right += lines;
break;
default:
throw new Error('Diff type was not defined.');
}

@@ -252,3 +250,3 @@ });

onScroll: PropTypes.func,
onChange:PropTypes.func,
onChange: PropTypes.func,
orientation: PropTypes.string,

@@ -267,3 +265,3 @@ readOnly: PropTypes.bool,

wrapEnabled: PropTypes.bool,
}
};

@@ -286,6 +284,6 @@ DiffComponent.defaultProps = {

onPaste: null,
onChange:null,
onChange: null,
orientation: 'beside',
readOnly: false,
scrollMargin: [ 0, 0, 0, 0],
scrollMargin: [0, 0, 0, 0],
setOptions: {},

@@ -298,5 +296,5 @@ showGutter: true,

theme: 'github',
value: ['',''],
value: ['', ''],
width: '500px',
wrapEnabled: true,
}
};

21

src/editorOptions.js

@@ -10,3 +10,3 @@ const editorOptions = [

'enableSnippets',
]
];

@@ -25,17 +25,14 @@ const editorEvents = [

'updateRef',
]
const debounce=(fn, delay)=>{
];
const debounce = (fn, delay) => {
var timer = null;
return function () {
var context = this, args = arguments;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
timer = setTimeout(function() {
fn.apply(context, args);
}, delay);
};
}
export {
editorOptions,
editorEvents,
debounce,
}
};
export { editorOptions, editorEvents, debounce };

9

src/index.js

@@ -1,8 +0,5 @@

import ace from './ace.js'
import ace from './ace.js';
import split from './split.js';
import diff from './diff.js';
export {
split,
diff
}
export default ace
export { split, diff };
export default ace;

136

src/split.js

@@ -1,12 +0,12 @@

import ace from 'brace'
import {UndoManager} from 'brace';
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import isEqual from 'lodash.isequal'
import get from 'lodash.get'
import ace from 'brace';
import { UndoManager } from 'brace';
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import isEqual from 'lodash.isequal';
import get from 'lodash.get';
import { editorOptions, editorEvents,debounce } from './editorOptions.js'
import { editorOptions, editorEvents, debounce } from './editorOptions.js';
const { Range } = ace.acequire('ace/range');
import 'brace/ext/split'
import 'brace/ext/split';
const { Split } = ace.acequire('ace/split');

@@ -20,3 +20,3 @@

});
this.debounce=debounce;
this.debounce = debounce;
}

@@ -38,3 +38,3 @@

showPrintMargin,
scrollMargin = [ 0, 0, 0, 0],
scrollMargin = [0, 0, 0, 0],
keyboardHandler,

@@ -56,7 +56,7 @@ onLoad,

var split = new Split(this.editor.container,`ace/theme/${theme}`,splits)
var split = new Split(this.editor.container, `ace/theme/${theme}`, splits);
this.editor.env.split = split;
this.splitEditor = split.getEditor(0);
this.split = split
this.split = split;
// in a split scenario we don't want a print margin for the entire application

@@ -74,7 +74,7 @@ this.editor.setShowPrintMargin(false);

}
const defaultValueForEditor = get(defaultValue, index)
const valueForEditor = get(value, index, '')
const defaultValueForEditor = get(defaultValue, index);
const valueForEditor = get(value, index, '');
editor.session.setUndoManager(new UndoManager());
editor.setTheme(`ace/theme/${theme}`);
editor.renderer.setScrollMargin(scrollMargin[0], scrollMargin[1], scrollMargin[2], scrollMargin[3])
editor.renderer.setScrollMargin(scrollMargin[0], scrollMargin[1], scrollMargin[2], scrollMargin[3]);
editor.getSession().setMode(`ace/mode/${mode}`);

@@ -95,7 +95,7 @@ editor.setFontSize(fontSize);

editor.setValue(defaultValueForEditor === undefined ? valueForEditor : defaultValueForEditor, cursorStart);
const newAnnotations = get(annotations, index, [])
const newMarkers = get(markers, index, [])
const newAnnotations = get(annotations, index, []);
const newMarkers = get(markers, index, []);
editor.getSession().setAnnotations(newAnnotations);
if(newMarkers && newMarkers.length > 0){
this.handleMarkers(newMarkers,editor);
if (newMarkers && newMarkers.length > 0) {
this.handleMarkers(newMarkers, editor);
}

@@ -108,3 +108,5 @@

} else if (this.props[option]) {
console.warn(`ReaceAce: editor option ${option} was activated but not found. Did you need to import a related tool or did you possibly mispell the option?`)
console.warn(
`ReaceAce: editor option ${option} was activated but not found. Did you need to import a related tool or did you possibly mispell the option?`,
);
}

@@ -115,7 +117,6 @@ }

if (Array.isArray(commands)) {
commands.forEach((command) => {
if(typeof command.exec == 'string') {
commands.forEach(command => {
if (typeof command.exec == 'string') {
editor.commands.bindKey(command.bindKey, command.exec);
}
else {
} else {
editor.commands.addCommand(command);

@@ -129,3 +130,3 @@ }

}
})
});

@@ -141,4 +142,4 @@ if (className) {

const sp = this.editor.env.split;
sp.setOrientation( this.props.orientation === 'below' ? sp.BELOW : sp.BESIDE);
sp.resize(true)
sp.setOrientation(this.props.orientation === 'below' ? sp.BELOW : sp.BESIDE);
sp.resize(true);
if (onLoad) {

@@ -153,14 +154,13 @@ onLoad(sp);

const split = this.editor.env.split
const split = this.editor.env.split;
if (nextProps.splits !== oldProps.splits) {
split.setSplits(nextProps.splits)
split.setSplits(nextProps.splits);
}
if (nextProps.orientation !== oldProps.orientation) {
split.setOrientation( nextProps.orientation === 'below' ? split.BELOW : split.BESIDE);
split.setOrientation(nextProps.orientation === 'below' ? split.BELOW : split.BESIDE);
}
split.forEach((editor, index) => {
if (nextProps.mode !== oldProps.mode) {

@@ -198,3 +198,3 @@ editor.getSession().setMode('ace/mode/' + nextProps.mode);

}
const nextValue = get(nextProps.value, index, '')
const nextValue = get(nextProps.value, index, '');
if (editor.getValue() !== nextValue) {

@@ -208,4 +208,4 @@ // editor.setValue is a synchronous function call, change event is emitted before setValue return.

}
const newAnnotations = get(nextProps.annotations, index, [])
const oldAnnotations = get(oldProps.annotations, index, [])
const newAnnotations = get(nextProps.annotations, index, []);
const oldAnnotations = get(oldProps.annotations, index, []);
if (!isEqual(newAnnotations, oldAnnotations)) {

@@ -215,10 +215,9 @@ editor.getSession().setAnnotations(newAnnotations);

const newMarkers = get(nextProps.markers, index, [])
const oldMarkers = get(oldProps.markers, index, [])
const newMarkers = get(nextProps.markers, index, []);
const oldMarkers = get(oldProps.markers, index, []);
if (!isEqual(newMarkers, oldMarkers) && Array.isArray(newMarkers)) {
this.handleMarkers(newMarkers, editor);
}
});
})
if (nextProps.className !== oldProps.className) {

@@ -228,3 +227,3 @@ let appliedClasses = this.refEditor.className;

let oldClassesArray = oldProps.className.trim().split(' ');
oldClassesArray.forEach((oldClass) => {
oldClassesArray.forEach(oldClass => {
let index = appliedClassesArray.indexOf(oldClass);

@@ -243,3 +242,3 @@ appliedClassesArray.splice(index, 1);

}
if(nextProps.height !== this.props.height || nextProps.width !== this.props.width){
if (nextProps.height !== this.props.height || nextProps.width !== this.props.width) {
this.editor.resize();

@@ -256,6 +255,6 @@ }

if (this.props.onChange && !this.silent) {
let value = []
this.editor.env.split.forEach((editor) => {
value.push(editor.getValue())
})
let value = [];
this.editor.env.split.forEach(editor => {
value.push(editor.getValue());
});
this.props.onChange(value, event);

@@ -267,6 +266,6 @@ }

if (this.props.onSelectionChange) {
let value = []
this.editor.env.split.forEach((editor) => {
value.push(editor.getSelection())
})
let value = [];
this.editor.env.split.forEach(editor => {
value.push(editor.getSelection());
});
this.props.onSelectionChange(value, event);

@@ -276,8 +275,8 @@ }

onCursorChange(event) {
if(this.props.onCursorChange) {
let value = []
this.editor.env.split.forEach((editor) => {
value.push(editor.getSelection())
})
this.props.onCursorChange(value, event)
if (this.props.onCursorChange) {
let value = [];
this.editor.env.split.forEach(editor => {
value.push(editor.getSelection());
});
this.props.onCursorChange(value, event);
}

@@ -357,9 +356,3 @@ }

const divStyle = { width, height, ...style };
return (
<div ref={this.updateRef}
id={name}
style={divStyle}
>
</div>
);
return <div ref={this.updateRef} id={name} style={divStyle} />;
}

@@ -378,6 +371,3 @@ }

width: PropTypes.string,
fontSize: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
showGutter: PropTypes.bool,

@@ -393,3 +383,3 @@ onChange: PropTypes.func,

defaultValue: PropTypes.arrayOf(PropTypes.string),
debounceChangePeriod:PropTypes.number,
debounceChangePeriod: PropTypes.number,
onLoad: PropTypes.func,

@@ -414,10 +404,4 @@ onSelectionChange: PropTypes.func,

wrapEnabled: PropTypes.bool,
enableBasicAutocompletion: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array,
]),
enableLiveAutocompletion: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array,
]),
enableBasicAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
enableLiveAutocompletion: PropTypes.oneOfType([PropTypes.bool, PropTypes.array]),
commands: PropTypes.array,

@@ -451,3 +435,3 @@ };

style: {},
scrollMargin: [ 0, 0, 0, 0],
scrollMargin: [0, 0, 0, 0],
setOptions: {},

@@ -457,2 +441,2 @@ wrapEnabled: false,

enableLiveAutocompletion: false,
};
};

4

types.d.ts

@@ -31,3 +31,3 @@ // Type definitions for react-ace 4.1.3

bindKey: CommandBindKey
exec(): any
exec(editor: any): void
}

@@ -95,3 +95,2 @@

useElasticTabstops?: boolean
debounceChangePeriod?: number
}

@@ -171,4 +170,5 @@

style?: CSSProperties
debounceChangePeriod?: number
}
export default class AceEditor extends Component<AceEditorProps, {}> {}
.npmignore
.eslintrc

Sorry, the diff of this file is not supported yet

dist/react-ace.js

Sorry, the diff of this file is too big to display

dist/react-ace.min.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc