react-simple-wysiwyg/lib/es/toolbar/buttons.js

Simple and lightweight React WYSIWYG editor

import * as tslib_1 from "tslib";
import { useState } from 'react';
import * as React from 'react';
import { withEditorContext } from '../Editor';
import OrderedListIcon from './icons/OrderedListIcon';
import UnorderedListIcon from './icons/UnorderedListIcon';
// tslint:disable:max-line-length
export var BtnBold = createButton('Bold', '𝐁', 'bold');
export var BtnClearFormatting = createButton('Clear formatting', 'T̲ₓ', 'removeFormat');
export var BtnItalic = createButton('Italic', '𝑰', 'italic');
export var BtnLink = createButton('Link', '🔗', function (selected) {
    if (selected && selected.nodeName === 'A') {
        document.execCommand('unlink');
    }
    else {
        document.execCommand('createLink', false, prompt('URL'));
    }
});
export var BtnNumberedList = createButton('Numbered list', React.createElement(OrderedListIcon, null), 'insertOrderedList');
export var BtnRedo = createButton('Redo', '↷', 'redo');
export var BtnUnderline = createButton('Underline', React.createElement("span", { style: { textDecoration: 'underline' } }, "\uD835\uDC14"), 'underline');
export var BtnUndo = createButton('Undo', '↶', 'undo');
export var BtnBulletList = createButton('Bullet list', React.createElement(UnorderedListIcon, null), 'insertUnorderedList');
export function Button(props) {
    var _a = 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 })));
}
function createButton(title, content, command) {
    ButtonFactory.displayName = title.replace(/\s/g, '');
    return 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