react-simple-wysiwyg
Version:
Simple and lightweight React WYSIWYG editor
60 lines • 2.69 kB
JavaScript
import * as tslib_1 from "tslib";
import { Component, createElement } from 'react';
import { compare, normalizeHtml, replaceCaret } from './utils';
/**
* Based on https://github.com/lovasoa/react-contenteditable
* A simple component for an html element with editable contents.
*/
var ContentEditable = /** @class */ (function (_super) {
tslib_1.__extends(ContentEditable, _super);
function ContentEditable(props) {
var _this = _super.call(this, props) || this;
_this.previousValue = props.value;
_this.onChange = _this.onChange.bind(_this);
_this.setElementRef = _this.setElementRef.bind(_this);
return _this;
}
ContentEditable.prototype.shouldComponentUpdate = function (nextProps) {
var props = this.props;
if (!this.el) {
return true;
}
if (normalizeHtml(nextProps.value) !== normalizeHtml(this.el.innerHTML)) {
return true;
}
return !compare(props, nextProps, ['disabled', 'tagName', 'className']);
};
ContentEditable.prototype.componentDidUpdate = function () {
if (!this.el) {
return;
}
if (this.props.value !== this.el.innerHTML) {
this.previousValue = this.props.value;
this.el.innerHTML = this.props.value;
}
replaceCaret(this.el);
};
ContentEditable.prototype.setElementRef = function (el) {
var contentEditableRef = this.props.contentEditableRef;
this.el = el;
contentEditableRef && contentEditableRef(el);
};
ContentEditable.prototype.onChange = function (event) {
if (!this.el) {
return;
}
var value = this.el.innerHTML;
var previous = this.previousValue;
this.previousValue = value;
if (this.props.onChange && value !== previous) {
this.props.onChange(tslib_1.__assign({}, event, { target: { value: value } }));
}
};
ContentEditable.prototype.render = function () {
var _a = this.props, contentEditableRef = _a.contentEditableRef, tagName = _a.tagName, value = _a.value, props = tslib_1.__rest(_a, ["contentEditableRef", "tagName", "value"]);
return createElement(tagName || 'div', tslib_1.__assign({}, props, { contentEditable: !this.props.disabled, dangerouslySetInnerHTML: { __html: value }, onBlur: this.props.onBlur || this.onChange, onInput: this.onChange, onKeyDown: this.props.onKeyDown || this.onChange, onKeyUp: this.props.onKeyUp || this.onChange, ref: this.setElementRef }));
};
return ContentEditable;
}(Component));
export default ContentEditable;
//# sourceMappingURL=ContentEditable.js.map