@atlaskit/editor-core/dist/es5/plugins/panel/index.js

A package contains Atlassian editor core functionality

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var analytics_1 = require("../../analytics");
var prosemirror_1 = require("../../prosemirror");
var nodeviews_1 = require("../../nodeviews");
var input_rules_1 = require("./input-rules");
exports.availablePanelType = [
    { panelType: 'info' },
    { panelType: 'note' },
    { panelType: 'tip' },
    { panelType: 'warning' }
];
var PanelState = (function () {
    function PanelState(state) {
        this.changeHandlers = [];
        this.editorFocused = false;
        this.changeHandlers = [];
        this.state = state;
        this.toolbarVisible = false;
    }
    PanelState.prototype.updateEditorFocused = function (editorFocused) {
        this.editorFocused = editorFocused;
    };
    PanelState.prototype.changePanelType = function (view, panelType) {
        analytics_1.analyticsService.trackEvent("atlassian.editor.format." + panelType.panelType + ".button");
        var state = view.state, dispatch = view.dispatch;
        var tr = state.tr;
        var panel = state.schema.nodes.panel;
        var _a = state.selection, $from = _a.$from, $to = _a.$to;
        var newFrom = tr.doc.resolve($from.start($from.depth - 1));
        var newTo = tr.doc.resolve($to.end($to.depth - 1));
        var range = newFrom.blockRange(newTo);
        tr.lift(range, $from.depth - 2);
        newFrom = tr.doc.resolve(tr.mapping.map(newFrom.pos));
        newTo = tr.doc.resolve(tr.mapping.map(newTo.pos));
        range = newFrom.blockRange(newTo);
        tr = tr.wrap(range, [{ type: panel, attrs: panelType }]);
        dispatch(tr);
    };
    PanelState.prototype.removePanel = function (view) {
        var dispatch = view.dispatch, state = view.state;
        var tr = state.tr;
        var _a = state.selection, $from = _a.$from, $to = _a.$to;
        var newFrom = tr.doc.resolve($from.start($from.depth - 1));
        var newTo = tr.doc.resolve($to.end($to.depth - 1));
        var range = newFrom.blockRange(newTo);
        tr = tr.delete(range.start - 1, range.end + 1);
        dispatch(tr);
    };
    PanelState.prototype.subscribe = function (cb) {
        this.changeHandlers.push(cb);
        cb(this);
    };
    PanelState.prototype.unsubscribe = function (cb) {
        this.changeHandlers = this.changeHandlers.filter(function (ch) { return ch !== cb; });
    };
    PanelState.prototype.update = function (state, docView, domEvent) {
        var _this = this;
        if (domEvent === void 0) { domEvent = false; }
        this.state = state;
        var newPanel = this.getActivePanel(docView);
        if ((domEvent && newPanel) || this.activeNode !== newPanel) {
            var newElement = newPanel && this.getDomElement(docView);
            this.activeNode = newPanel;
            this.toolbarVisible = this.editorFocused && !!newPanel && (domEvent || this.element !== newElement);
            this.element = newElement;
            this.activePanelType = newPanel && newPanel.attrs['panelType'];
            this.changeHandlers.forEach(function (cb) { return cb(_this); });
        }
    };
    PanelState.prototype.getActivePanel = function (docView) {
        var state = this.state;
        if (state.selection instanceof prosemirror_1.TextSelection) {
            var $from = state.selection.$from;
            var node = $from.node($from.depth - 1);
            if (node && node.type === state.schema.nodes.panel) {
                return node;
            }
        }
    };
    PanelState.prototype.getDomElement = function (docView) {
        var selection = this.state.selection;
        if (selection instanceof prosemirror_1.TextSelection) {
            var node = docView.domFromPos(selection.$from.pos).node;
            var currentNode = node;
            while (currentNode) {
                if (currentNode.attributes && currentNode.attributes['data-panel-type']) {
                    return currentNode;
                }
                currentNode = currentNode.parentNode;
            }
        }
    };
    return PanelState;
}());
exports.PanelState = PanelState;
exports.stateKey = new prosemirror_1.PluginKey('panelPlugin');
var plugin = new prosemirror_1.Plugin({
    state: {
        init: function (config, state) {
            return new PanelState(state);
        },
        apply: function (tr, pluginState, oldState, newState) {
            var stored = tr.getMeta(exports.stateKey);
            if (stored) {
                pluginState.update(newState, stored.docView, stored.domEvent);
            }
            return pluginState;
        }
    },
    key: exports.stateKey,
    view: function (view) {
        return {
            update: function (view, prevState) {
                exports.stateKey.getState(view.state).update(view.state, view.docView);
            }
        };
    },
    props: {
        nodeViews: {
            panel: nodeviews_1.panelNodeView,
        },
        handleClick: function (view, event) {
            exports.stateKey.getState(view.state).update(view.state, view.docView, true);
            return false;
        },
        onFocus: function (view, event) {
            exports.stateKey.getState(view.state).updateEditorFocused(true);
        },
        onBlur: function (view, event) {
            var pluginState = exports.stateKey.getState(view.state);
            pluginState.updateEditorFocused(false);
            pluginState.update(view.state, view.docView, true);
        },
    },
});
var plugins = function (schema) {
    return [plugin, input_rules_1.default(schema)].filter(function (plugin) { return !!plugin; });
};
exports.default = plugins;
//# sourceMappingURL=index.js.map