react-ace
Version:
A react component for Ace Editor
468 lines • 19.8 kB
JavaScript
"use strict";
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
var ace_builds_1 = require("ace-builds");
var PropTypes = require("prop-types");
var React = require("react");
var isEqual = require("lodash.isequal");
var editorOptions_1 = require("./editorOptions");
var ace = (0, editorOptions_1.getAceInstance)();
var ReactAce = /** @class */ (function (_super) {
__extends(ReactAce, _super);
function ReactAce(props) {
var _this = _super.call(this, props) || this;
editorOptions_1.editorEvents.forEach(function (method) {
_this[method] = _this[method].bind(_this);
});
_this.debounce = editorOptions_1.debounce;
return _this;
}
ReactAce.prototype.isInShadow = function (node) {
var parent = node && node.parentNode;
while (parent) {
if (parent.toString() === "[object ShadowRoot]") {
return true;
}
parent = parent.parentNode;
}
return false;
};
ReactAce.prototype.componentDidMount = function () {
var _this = this;
var _a = this.props, className = _a.className, onBeforeLoad = _a.onBeforeLoad, onValidate = _a.onValidate, mode = _a.mode, focus = _a.focus, theme = _a.theme, fontSize = _a.fontSize, lineHeight = _a.lineHeight, value = _a.value, defaultValue = _a.defaultValue, showGutter = _a.showGutter, wrapEnabled = _a.wrapEnabled, showPrintMargin = _a.showPrintMargin, _b = _a.scrollMargin, scrollMargin = _b === void 0 ? [0, 0, 0, 0] : _b, keyboardHandler = _a.keyboardHandler, onLoad = _a.onLoad, commands = _a.commands, annotations = _a.annotations, markers = _a.markers, placeholder = _a.placeholder;
this.editor = ace.edit(this.refEditor);
if (onBeforeLoad) {
onBeforeLoad(ace);
}
var editorProps = Object.keys(this.props.editorProps);
for (var i = 0; i < editorProps.length; i++) {
this.editor[editorProps[i]] = this.props.editorProps[editorProps[i]];
}
if (this.props.debounceChangePeriod) {
this.onChange = this.debounce(this.onChange, this.props.debounceChangePeriod);
}
this.editor.renderer.setScrollMargin(scrollMargin[0], scrollMargin[1], scrollMargin[2], scrollMargin[3]);
if (this.isInShadow(this.refEditor)) {
this.editor.renderer.attachToShadowRoot();
}
this.editor
.getSession()
.setMode(typeof mode === "string" ? "ace/mode/".concat(mode) : mode);
if (theme && theme !== "")
this.editor.setTheme("ace/theme/".concat(theme));
this.editor.setFontSize(typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize);
if (lineHeight) {
this.editor.container.style.lineHeight =
typeof lineHeight === "number" ? "".concat(lineHeight, "px") : "".concat(lineHeight);
this.editor.renderer.updateFontSize();
}
this.editor
.getSession()
.setValue(!defaultValue ? value || "" : defaultValue);
if (this.props.navigateToFileEnd) {
this.editor.navigateFileEnd();
}
this.editor.renderer.setShowGutter(showGutter);
this.editor.getSession().setUseWrapMode(wrapEnabled);
this.editor.setShowPrintMargin(showPrintMargin);
this.editor.on("focus", this.onFocus);
this.editor.on("blur", this.onBlur);
this.editor.on("copy", this.onCopy);
this.editor.on("paste", this.onPaste);
this.editor.on("change", this.onChange);
this.editor.on("input", this.onInput);
if (placeholder) {
this.updatePlaceholder();
}
this.editor
.getSession()
.selection.on("changeSelection", this.onSelectionChange);
this.editor.getSession().selection.on("changeCursor", this.onCursorChange);
if (onValidate) {
// @ts-ignore types don't include
this.editor.getSession().on("changeAnnotation", function () {
// tslint:disable-next-line:no-shadowed-variable
var annotations = _this.editor.getSession().getAnnotations();
_this.props.onValidate(annotations);
});
}
this.editor.session.on("changeScrollTop", this.onScroll);
this.editor.getSession().setAnnotations(annotations || []);
if (markers && markers.length > 0) {
this.handleMarkers(markers);
}
// get a list of possible options to avoid 'misspelled option errors'
var availableOptions = this.editor.$options;
editorOptions_1.editorOptions.forEach(function (option) {
if (availableOptions.hasOwnProperty(option)) {
// @ts-ignore
_this.editor.setOption(option, _this.props[option]);
}
else if (_this.props[option]) {
console.warn("ReactAce: editor option ".concat(option, " was activated but not found. Did you need to import a related tool or did you possibly mispell the option?"));
}
});
this.handleOptions(this.props);
if (Array.isArray(commands)) {
commands.forEach(function (command) {
if (typeof command.exec === "string") {
_this.editor.commands.bindKey(command.bindKey, command.exec);
}
else {
_this.editor.commands.addCommand(command);
}
});
}
if (keyboardHandler) {
this.editor.setKeyboardHandler("ace/keyboard/" + keyboardHandler);
}
if (className) {
this.refEditor.className += " " + className;
}
if (onLoad) {
onLoad(this.editor);
}
this.editor.resize();
if (focus) {
this.editor.focus();
}
};
ReactAce.prototype.componentDidUpdate = function (prevProps) {
var oldProps = prevProps;
var nextProps = this.props;
for (var i = 0; i < editorOptions_1.editorOptions.length; i++) {
var option = editorOptions_1.editorOptions[i];
if (nextProps[option] !== oldProps[option]) {
// @ts-ignore
this.editor.setOption(option, nextProps[option]);
}
}
if (nextProps.className !== oldProps.className) {
var appliedClasses = this.refEditor.className;
var appliedClassesArray_1 = appliedClasses.trim().split(" ");
var oldClassesArray = oldProps.className.trim().split(" ");
oldClassesArray.forEach(function (oldClass) {
var index = appliedClassesArray_1.indexOf(oldClass);
appliedClassesArray_1.splice(index, 1);
});
this.refEditor.className =
" " + nextProps.className + " " + appliedClassesArray_1.join(" ");
}
// First process editor value, as it may create a new session (see issue #300)
var valueChanged = this.editor &&
nextProps.value != null &&
this.editor.getValue() !== nextProps.value;
if (valueChanged) {
// editor.setValue is a synchronous function call, change event is emitted before setValue return.
this.silent = true;
var pos = this.editor.session.selection.toJSON();
this.editor.setValue(nextProps.value, nextProps.cursorStart);
this.editor.session.selection.fromJSON(pos);
this.silent = false;
}
if (nextProps.placeholder !== oldProps.placeholder) {
this.updatePlaceholder();
}
if (nextProps.mode !== oldProps.mode) {
this.editor
.getSession()
.setMode(typeof nextProps.mode === "string"
? "ace/mode/".concat(nextProps.mode)
: nextProps.mode);
}
if (nextProps.theme !== oldProps.theme) {
this.editor.setTheme("ace/theme/" + nextProps.theme);
}
if (nextProps.keyboardHandler !== oldProps.keyboardHandler) {
if (nextProps.keyboardHandler) {
this.editor.setKeyboardHandler("ace/keyboard/" + nextProps.keyboardHandler);
}
else {
this.editor.setKeyboardHandler(null);
}
}
if (nextProps.fontSize !== oldProps.fontSize) {
this.editor.setFontSize(typeof nextProps.fontSize === "number"
? "".concat(nextProps.fontSize, "px")
: nextProps.fontSize);
}
if (nextProps.lineHeight !== oldProps.lineHeight) {
this.editor.container.style.lineHeight =
typeof nextProps.lineHeight === "number"
? "".concat(nextProps.lineHeight, "px")
: nextProps.lineHeight;
this.editor.renderer.updateFontSize();
}
if (nextProps.wrapEnabled !== oldProps.wrapEnabled) {
this.editor.getSession().setUseWrapMode(nextProps.wrapEnabled);
}
if (nextProps.showPrintMargin !== oldProps.showPrintMargin) {
this.editor.setShowPrintMargin(nextProps.showPrintMargin);
}
if (nextProps.showGutter !== oldProps.showGutter) {
this.editor.renderer.setShowGutter(nextProps.showGutter);
}
if (!isEqual(nextProps.setOptions, oldProps.setOptions)) {
this.handleOptions(nextProps);
}
// if the value or annotations changed, set the annotations
// changing the value may create create a new session which will require annotations to be re-set
if (valueChanged || !isEqual(nextProps.annotations, oldProps.annotations)) {
this.editor.getSession().setAnnotations(nextProps.annotations || []);
}
if (!isEqual(nextProps.markers, oldProps.markers) &&
Array.isArray(nextProps.markers)) {
this.handleMarkers(nextProps.markers);
}
// this doesn't look like it works at all....
if (!isEqual(nextProps.scrollMargin, oldProps.scrollMargin)) {
this.handleScrollMargins(nextProps.scrollMargin);
}
if (prevProps.height !== this.props.height ||
prevProps.width !== this.props.width) {
this.editor.resize();
}
if (this.props.focus && !prevProps.focus) {
this.editor.focus();
}
};
ReactAce.prototype.handleScrollMargins = function (margins) {
if (margins === void 0) { margins = [0, 0, 0, 0]; }
this.editor.renderer.setScrollMargin(margins[0], margins[1], margins[2], margins[3]);
};
ReactAce.prototype.componentWillUnmount = function () {
if (this.editor) {
this.editor.destroy();
this.editor = null;
}
};
ReactAce.prototype.onChange = function (event) {
if (this.editor && this.props.onChange && !this.silent) {
var value = this.editor.getValue();
this.props.onChange(value, event);
}
};
ReactAce.prototype.onSelectionChange = function (event) {
if (this.props.onSelectionChange) {
var value = this.editor.getSelection();
this.props.onSelectionChange(value, event);
}
};
ReactAce.prototype.onCursorChange = function (event) {
if (this.props.onCursorChange) {
var value = this.editor.getSelection();
this.props.onCursorChange(value, event);
}
};
ReactAce.prototype.onInput = function (event) {
if (this.props.onInput) {
this.props.onInput(event);
}
if (this.props.placeholder) {
this.updatePlaceholder();
}
};
ReactAce.prototype.onFocus = function (event) {
if (this.props.onFocus) {
this.props.onFocus(event, this.editor);
}
};
ReactAce.prototype.onBlur = function (event) {
if (this.props.onBlur) {
this.props.onBlur(event, this.editor);
}
};
ReactAce.prototype.onCopy = function (_a) {
var text = _a.text;
if (this.props.onCopy) {
this.props.onCopy(text);
}
};
ReactAce.prototype.onPaste = function (_a) {
var text = _a.text;
if (this.props.onPaste) {
this.props.onPaste(text);
}
};
ReactAce.prototype.onScroll = function () {
if (this.props.onScroll) {
this.props.onScroll(this.editor);
}
};
ReactAce.prototype.handleOptions = function (props) {
var setOptions = Object.keys(props.setOptions);
for (var y = 0; y < setOptions.length; y++) {
// @ts-ignore
this.editor.setOption(setOptions[y], props.setOptions[setOptions[y]]);
}
};
ReactAce.prototype.handleMarkers = function (markers) {
var _this = this;
// remove foreground markers
var currentMarkers = this.editor.getSession().getMarkers(true);
for (var i in currentMarkers) {
if (currentMarkers.hasOwnProperty(i)) {
this.editor.getSession().removeMarker(currentMarkers[i].id);
}
}
// remove background markers except active line marker and selected word marker
currentMarkers = this.editor.getSession().getMarkers(false);
for (var i in currentMarkers) {
if (currentMarkers.hasOwnProperty(i) &&
currentMarkers[i].clazz !== "ace_active-line" &&
currentMarkers[i].clazz !== "ace_selected-word") {
this.editor.getSession().removeMarker(currentMarkers[i].id);
}
}
// add new markers
markers.forEach(function (_a) {
var startRow = _a.startRow, startCol = _a.startCol, endRow = _a.endRow, endCol = _a.endCol, className = _a.className, type = _a.type, _b = _a.inFront, inFront = _b === void 0 ? false : _b;
var range = new ace_builds_1.Range(startRow, startCol, endRow, endCol);
_this.editor.getSession().addMarker(range, className, type, inFront);
});
};
ReactAce.prototype.updatePlaceholder = function () {
// Adapted from https://stackoverflow.com/questions/26695708/how-can-i-add-placeholder-text-when-the-editor-is-empty
var editor = this.editor;
var placeholder = this.props.placeholder;
var showPlaceholder = !editor.session.getValue().length;
var node = editor.renderer.placeholderNode;
if (!showPlaceholder && node) {
editor.renderer.scroller.removeChild(editor.renderer.placeholderNode);
editor.renderer.placeholderNode = null;
}
else if (showPlaceholder && !node) {
node = editor.renderer.placeholderNode = document.createElement("div");
node.textContent = placeholder || "";
node.className = "ace_comment ace_placeholder";
node.style.padding = "0 9px";
node.style.position = "absolute";
node.style.zIndex = "3";
editor.renderer.scroller.appendChild(node);
}
else if (showPlaceholder && node) {
node.textContent = placeholder;
}
};
ReactAce.prototype.updateRef = function (item) {
this.refEditor = item;
};
ReactAce.prototype.render = function () {
var _a = this.props, name = _a.name, width = _a.width, height = _a.height, style = _a.style;
var divStyle = __assign({ width: width, height: height }, style);
return React.createElement("div", { ref: this.updateRef, id: name, style: divStyle });
};
ReactAce.propTypes = {
mode: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
focus: PropTypes.bool,
theme: PropTypes.string,
name: PropTypes.string,
className: PropTypes.string,
height: PropTypes.string,
width: PropTypes.string,
fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
lineHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
showGutter: PropTypes.bool,
onChange: PropTypes.func,
onCopy: PropTypes.func,
onPaste: PropTypes.func,
onFocus: PropTypes.func,
onInput: PropTypes.func,
onBlur: PropTypes.func,
onScroll: PropTypes.func,
value: PropTypes.string,
defaultValue: PropTypes.string,
onLoad: PropTypes.func,
onSelectionChange: PropTypes.func,
onCursorChange: PropTypes.func,
onBeforeLoad: PropTypes.func,
onValidate: PropTypes.func,
minLines: PropTypes.number,
maxLines: PropTypes.number,
readOnly: PropTypes.bool,
highlightActiveLine: PropTypes.bool,
tabSize: PropTypes.number,
showPrintMargin: PropTypes.bool,
cursorStart: PropTypes.number,
debounceChangePeriod: PropTypes.number,
editorProps: PropTypes.object,
setOptions: PropTypes.object,
style: PropTypes.object,
scrollMargin: PropTypes.array,
annotations: PropTypes.array,
markers: PropTypes.array,
keyboardHandler: PropTypes.string,
wrapEnabled: PropTypes.bool,
enableSnippets: PropTypes.bool,
enableBasicAutocompletion: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array
]),
enableLiveAutocompletion: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.array
]),
navigateToFileEnd: PropTypes.bool,
commands: PropTypes.array,
placeholder: PropTypes.string
};
ReactAce.defaultProps = {
name: "ace-editor",
focus: false,
mode: "",
theme: "",
height: "500px",
width: "500px",
fontSize: 12,
enableSnippets: false,
showGutter: true,
onChange: null,
onPaste: null,
onLoad: null,
onScroll: null,
minLines: null,
maxLines: null,
readOnly: false,
highlightActiveLine: true,
showPrintMargin: true,
tabSize: 4,
cursorStart: 1,
editorProps: {},
style: {},
scrollMargin: [0, 0, 0, 0],
setOptions: {},
wrapEnabled: false,
enableBasicAutocompletion: false,
enableLiveAutocompletion: false,
placeholder: null,
navigateToFileEnd: true
};
return ReactAce;
}(React.Component));
exports.default = ReactAce;
//# sourceMappingURL=ace.js.map