rc-editor-plugin-basic-style/lib/utils.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});
exports.noop = noop;
exports.getApplyFontStyleFunc = getApplyFontStyleFunc;
exports.getToggleFontStyleFunc = getToggleFontStyleFunc;
exports.findEntities = findEntities;
exports.getSelectionText = getSelectionText;
exports.getApplyEntityFunc = getApplyEntityFunc;
exports.getToggleEntityFunc = getToggleEntityFunc;
exports.getCurrentEntity = getCurrentEntity;
exports.inlineStyleComponentFactory = inlineStyleComponentFactory;
exports.blockStyleComponentFactory = blockStyleComponentFactory;

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _draftJs = require('draft-js');

var _classnames3 = require('classnames');

var _classnames4 = _interopRequireDefault(_classnames3);

var _rcEditorUtils = require('rc-editor-utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj["default"] = obj; return newObj; } }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var __assign = undefined && undefined.__assign || Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
        s = arguments[i];
        for (var p in s) {
            if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
        }
    }
    return t;
};
function noop(args) {}
function getApplyFontStyleFunc(prefix, callbacks) {
    return function applyStyle(styleName) {
        var needFocus = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
        var getEditorState = callbacks.getEditorState,
            setEditorState = callbacks.setEditorState;

        var editorState = getEditorState();
        var contentState = editorState.getCurrentContent();
        var selection = editorState.getSelection();
        var currentStyle = (0, _rcEditorUtils.getCurrentInlineStyle)(editorState);
        if (selection.isCollapsed()) {
            currentStyle.forEach(function (style) {
                if (style.indexOf('' + prefix) !== -1 && style !== styleName) {
                    editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, style);
                }
            });
            editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, styleName);
            return setEditorState(editorState, true);
        }
        currentStyle.forEach(function (style) {
            if (style.indexOf('' + prefix) !== -1) {
                contentState = _draftJs.Modifier.removeInlineStyle(contentState, selection, style);
            }
        });
        contentState = _draftJs.Modifier.applyInlineStyle(contentState, selection, styleName);
        setEditorState(_draftJs.EditorState.push(editorState, contentState, 'apply-style'), needFocus);
    };
}
function getToggleFontStyleFunc(prefix, callbacks) {
    return function toggleStyle(styleName) {
        var getEditorState = callbacks.getEditorState,
            setEditorState = callbacks.setEditorState;

        var editorState = getEditorState(true);
        var selection = editorState.getSelection();
        var currentStyle = (0, _rcEditorUtils.getCurrentInlineStyle)(editorState);
        currentStyle.forEach(function (style) {
            if (style.indexOf('' + prefix) !== -1 && style !== styleName) {
                editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, style);
            }
        });
        editorState = _draftJs.RichUtils.toggleInlineStyle(editorState, styleName);
        if (selection.isCollapsed()) {
            return setEditorState(editorState, true);
        }
        setEditorState(editorState);
    };
}
function findEntities(entityType) {
    return function findEntitiesFunc(contentBlock, callback, contentState) {
        contentBlock.findEntityRanges(function (character) {
            var entityKey = character.getEntity();
            return entityKey !== null && contentState.getEntity(entityKey).getType() === entityType;
        }, callback);
    };
}
function getSelectionText(editorState, selection) {
    var anchorKey = selection.getAnchorKey();
    var currentContent = editorState.getCurrentContent();
    var currentBlock = currentContent.getBlockForKey(anchorKey);
    return currentBlock.getText();
}
function getApplyEntityFunc(callbacks) {
    return function applyEntity(entityType) {
        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        var entityMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'MUTABLE';
        var getEditorState = callbacks.getEditorState,
            setEditorState = callbacks.setEditorState;

        var editorState = getEditorState();
        var contentState = editorState.getCurrentContent();
        var selection = editorState.getSelection();
        var currentEntity = getCurrentEntity(editorState);
        var entityKey = contentState.createEntity(entityType, entityMode, data);
        var replacedContent = _draftJs.Modifier.applyEntity(contentState, selection, entityKey);
        return setEditorState(_draftJs.EditorState.push(editorState, replacedContent, 'toggle-block'));
    };
}
function getToggleEntityFunc(callbacks) {
    return function toggleEntity(entityType) {
        var data = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
        var entityMode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'MUTABLE';
        var getEditorState = callbacks.getEditorState,
            setEditorState = callbacks.setEditorState;

        var editorState = getEditorState();
        var contentState = editorState.getCurrentContent();
        var selection = editorState.getSelection();
        var entityKey = null;
        var currentEntity = getCurrentEntity(editorState);
        if (!currentEntity || contentState.getEntity(currentEntity).getType() !== entityType) {
            contentState.createEntity(entityType, entityMode, data);
            entityKey = contentState.getLastCreatedEntityKey();
        }
        var replacedContent = _draftJs.Modifier.applyEntity(editorState.getCurrentContent(), selection, entityKey);
        return setEditorState(_draftJs.EditorState.push(editorState, replacedContent, 'toggle-block'));
    };
}
function getCurrentEntity(editorState) {
    var entity = void 0;
    var selection = editorState.getSelection();
    var start = selection.getStartOffset();
    var end = selection.getEndOffset();
    if (start === end && start === 0) {
        end = -1;
    } else if (start === end) {
        start = start - 1;
    }
    var block = (0, _rcEditorUtils.getSelectedBlock)(editorState);
    for (var i = start; i < end; i++) {
        var currentEntity = block.getEntityAt(i);
        if (!currentEntity) {
            entity = undefined;
            break;
        }
        if (i === start) {
            entity = currentEntity;
        } else {
            if (entity !== currentEntity) {
                entity = undefined;
                break;
            }
        }
    }
    return entity;
}
function inlineStyleComponentFactory(name) {
    var style = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    return {
        constructor: function constructor() {
            var callbacks = {
                getEditorState: noop,
                setEditorState: noop
            };
            var upperName = name.toUpperCase();
            var toggleStyle = (0, _rcEditorUtils.getToggleStyleFunc)(callbacks);
            return {
                name: name,
                callbacks: callbacks,
                component: function component(props) {
                    var _classnames;

                    var currentStyle = (0, _rcEditorUtils.getCurrentInlineStyle)(callbacks.getEditorState());
                    var classNames = (0, _classnames4["default"])((_classnames = {}, _defineProperty(_classnames, 'editor-icon', true), _defineProperty(_classnames, 'editor-icon-' + name, true), _defineProperty(_classnames, 'active', currentStyle.has(upperName)), _classnames));
                    return React.createElement("span", { onMouseDown: function onMouseDown(e) {
                            toggleStyle(upperName);e.preventDefault();
                        }, className: classNames });
                }
            };
        },

        config: {}
    };
}
function blockStyleComponentFactory(name, style) {
    return {
        constructor: function constructor() {
            var callbacks = {
                getEditorState: noop,
                setEditorState: noop
            };
            var blockRenderMap = _defineProperty({}, '' + name, {
                element: function element(props) {
                    return React.createElement("div", __assign({}, props, { style: style }));
                },
                style: style
            });
            var toggleBlockStyle = (0, _rcEditorUtils.getToggleBlockStyleFunc)(callbacks);
            return {
                name: name,
                callbacks: callbacks,
                blockRenderMap: blockRenderMap,
                component: function component(prop) {
                    var _classnames2;

                    var selectedBlock = (0, _rcEditorUtils.getSelectedBlock)(callbacks.getEditorState());
                    var classNames = (0, _classnames4["default"])((_classnames2 = {}, _defineProperty(_classnames2, 'editor-icon', true), _defineProperty(_classnames2, 'editor-icon-' + name, true), _defineProperty(_classnames2, 'active', selectedBlock.getType() === name), _classnames2));
                    return React.createElement("span", { onMouseDown: function onMouseDown() {
                            return toggleBlockStyle(name);
                        }, className: classNames });
                }
            };
        },

        config: {}
    };
}