react-simple-wysiwyg/lib/ContentEditable.js

Simple and lightweight React WYSIWYG editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = require("react");
var utils_1 = require("./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 (utils_1.normalizeHtml(nextProps.value) !== utils_1.normalizeHtml(this.el.innerHTML)) {
            return true;
        }
        return !utils_1.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;
        }
        utils_1.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 react_1.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;
}(react_1.Component));
exports.default = ContentEditable;
//# sourceMappingURL=ContentEditable.js.map