react-simple-wysiwyg/lib/toolbar/buttons.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 Editor_1 = require("../Editor");
var OrderedListIcon_1 = require("./icons/OrderedListIcon");
var UnorderedListIcon_1 = require("./icons/UnorderedListIcon");
// tslint:disable:max-line-length
exports.BtnBold = createButton('Bold', '𝐁', 'bold');
exports.BtnClearFormatting = createButton('Clear formatting', 'T̲ₓ', 'removeFormat');
exports.BtnItalic = createButton('Italic', '𝑰', 'italic');
exports.BtnLink = createButton('Link', '🔗', function (selected) {
    if (selected && selected.nodeName === 'A') {
        document.execCommand('unlink');
    }
    else {
        document.execCommand('createLink', false, prompt('URL'));
    }
});
exports.BtnNumberedList = createButton('Numbered list', React.createElement(OrderedListIcon_1.default, null), 'insertOrderedList');
exports.BtnRedo = createButton('Redo', '↷', 'redo');
exports.BtnUnderline = createButton('Underline', React.createElement("span", { style: { textDecoration: 'underline' } }, "\uD835\uDC14"), 'underline');
exports.BtnUndo = createButton('Undo', '↶', 'undo');
exports.BtnBulletList = createButton('Bullet list', React.createElement(UnorderedListIcon_1.default, null), 'insertUnorderedList');
function Button(props) {
    var _a = react_1.useState(false), hovered = _a[0], setHovered = _a[1];
    var active = props.active, styles = props.styles, el = props.el, selection = props.selection, inputProps = tslib_1.__rest(props, ["active", "styles", "el", "selection"]);
    var style = tslib_1.__assign({}, styles.button.normal, props.style, (hovered ? styles.button.hovered : {}), (hovered ? props.hoverStyle : {}), (active ? styles.button.active : {}));
    var onHover = function (e) {
        setHovered(true);
        props.onMouseEnter && props.onMouseEnter(e);
    };
    var onUnHover = function (e) {
        setHovered(false);
        props.onMouseLeave && props.onMouseLeave(e);
    };
    return (React.createElement("button", tslib_1.__assign({}, inputProps, { style: style, onMouseEnter: onHover, onMouseLeave: onUnHover })));
}
exports.Button = Button;
function createButton(title, content, command) {
    ButtonFactory.displayName = title.replace(/\s/g, '');
    return Editor_1.withEditorContext(ButtonFactory);
    function ButtonFactory(props) {
        var selection = props.selection, buttonProps = tslib_1.__rest(props, ["selection"]);
        var active = false;
        if (typeof command === 'string') {
            active = !!selection && document.queryCommandState(command);
        }
        return (React.createElement(Button, tslib_1.__assign({ title: title }, buttonProps, { onMouseDown: action, active: active }), content));
        function action() {
            if (typeof command === 'function') {
                command(selection);
            }
            else {
                document.execCommand(command);
            }
        }
    }
}
//# sourceMappingURL=buttons.js.map