react-simple-wysiwyg/lib/Editor.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 React = require("react");
var ContentEditable_1 = require("./ContentEditable");
var styles_1 = require("./styles");
var utils_1 = require("./utils");
exports.EditorContext = react_1.createContext({
    styles: styles_1.default,
});
var Editor = /** @class */ (function (_super) {
    tslib_1.__extends(Editor, _super);
    function Editor(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {};
        _this.onClickOutside = _this.onClickOutside.bind(_this);
        _this.onTextSelect = _this.onTextSelect.bind(_this);
        _this.setContentEditableRef = _this.setContentEditableRef.bind(_this);
        return _this;
    }
    Editor.prototype.componentDidMount = function () {
        document.addEventListener('click', this.onClickOutside);
    };
    Editor.prototype.componentWillUnmount = function () {
        document.removeEventListener('click', this.onClickOutside);
    };
    Editor.prototype.setContentEditableRef = function (el) {
        this.setState({ contentEditable: el });
        this.props.contentEditableRef && this.props.contentEditableRef(el);
    };
    Editor.prototype.onClickOutside = function (event) {
        var contentEditable = this.state.contentEditable;
        if (event.target === contentEditable) {
            return;
        }
        if (contentEditable && contentEditable.contains(event.target)) {
            return;
        }
        this.setState({ selection: null });
    };
    Editor.prototype.onTextSelect = function (e) {
        this.props.onSelect && this.props.onSelect(e);
        this.setState({ selection: utils_1.getSelectedNode() });
    };
    Editor.prototype.render = function () {
        var _a = this.props, children = _a.children, styles = _a.styles, props = tslib_1.__rest(_a, ["children", "styles"]);
        var _b = this.state, contentEditable = _b.contentEditable, selection = _b.selection;
        var allStyles = utils_1.deepMerge({}, styles_1.default, styles);
        var context = {
            el: contentEditable,
            selection: selection,
            styles: allStyles,
        };
        return (React.createElement("div", { style: context.styles.editor },
            React.createElement(exports.EditorContext.Provider, { value: context },
                children,
                React.createElement(ContentEditable_1.default, tslib_1.__assign({}, props, { contentEditableRef: this.setContentEditableRef, onSelect: this.onTextSelect, style: allStyles.contentEditable })))));
    };
    return Editor;
}(react_1.PureComponent));
exports.default = Editor;
function withEditorContext(Component) {
    WithEditorContext.displayName =
        "withEditorContext(" + (Component.displayName || Component.name) + ")";
    return WithEditorContext;
    function WithEditorContext(props) {
        return (React.createElement(exports.EditorContext.Consumer, null, function (context) { return (React.createElement(Component, tslib_1.__assign({}, props, { el: context.el, selection: context.selection, styles: context.styles }))); }));
    }
}
exports.withEditorContext = withEditorContext;
//# sourceMappingURL=Editor.js.map