react-simple-wysiwyg/lib/es/Editor.js

Simple and lightweight React WYSIWYG editor

import * as tslib_1 from "tslib";
import { createContext, PureComponent, } from 'react';
import * as React from 'react';
import ContentEditable from './ContentEditable';
import defaultStyles from './styles';
import { deepMerge, getSelectedNode } from './utils';
export var EditorContext = createContext({
    styles: defaultStyles,
});
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: 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 = deepMerge({}, defaultStyles, styles);
        var context = {
            el: contentEditable,
            selection: selection,
            styles: allStyles,
        };
        return (React.createElement("div", { style: context.styles.editor },
            React.createElement(EditorContext.Provider, { value: context },
                children,
                React.createElement(ContentEditable, tslib_1.__assign({}, props, { contentEditableRef: this.setContentEditableRef, onSelect: this.onTextSelect, style: allStyles.contentEditable })))));
    };
    return Editor;
}(PureComponent));
export default Editor;
export function withEditorContext(Component) {
    WithEditorContext.displayName =
        "withEditorContext(" + (Component.displayName || Component.name) + ")";
    return WithEditorContext;
    function WithEditorContext(props) {
        return (React.createElement(EditorContext.Consumer, null, function (context) { return (React.createElement(Component, tslib_1.__assign({}, props, { el: context.el, selection: context.selection, styles: context.styles }))); }));
    }
}
//# sourceMappingURL=Editor.js.map