@atlaskit/editor-core/dist/es2015/plugins/image-upload/index.js

A package contains Atlassian editor core functionality

import * as tslib_1 from "tslib";
import { analyticsService } from '../../analytics';
import { Plugin, PluginKey, NodeSelection, } from '../../prosemirror';
import inputRulePlugin from './input-rule';
var DEFAULT_OPTIONS = {
    maxFileSizeInBytes: 10000000,
    supportedImageTypes: [
        'jpg',
        'jpeg',
        'png',
        'gif',
        'svg',
    ],
};
function isDroppedFile(e) {
    return Array.prototype.slice.call(e.dataTransfer.types).indexOf('Files') !== -1;
}
function isPastedFile(e) {
    var types = e.clipboardData && e.clipboardData.types;
    return types && Array.prototype.slice.call(types).indexOf('Files') !== -1;
}
var ImageUploadState = (function () {
    function ImageUploadState(state, options) {
        this.active = false;
        this.enabled = false;
        this.hidden = false;
        this.src = undefined;
        this.element = undefined;
        this.changeHandlers = [];
        this.changeHandlers = [];
        this.state = state;
        this.config = tslib_1.__assign({}, DEFAULT_OPTIONS, options);
        this.hidden = !state.schema.nodes.image;
        this.enabled = this.canInsertImage();
    }
    ImageUploadState.prototype.subscribe = function (cb) {
        this.changeHandlers.push(cb);
        cb(this);
    };
    ImageUploadState.prototype.unsubscribe = function (cb) {
        this.changeHandlers = this.changeHandlers.filter(function (ch) { return ch !== cb; });
    };
    ImageUploadState.prototype.update = function (state, docView, dirty) {
        var _this = this;
        if (dirty === void 0) { dirty = false; }
        this.state = state;
        var newActive = this.isImageSelected();
        if (newActive !== this.active) {
            this.active = newActive;
            dirty = true;
        }
        var newEnabled = this.canInsertImage();
        if (newEnabled !== this.enabled) {
            this.enabled = newEnabled;
            dirty = true;
        }
        var newElement = newActive
            ? this.getActiveImageElement(docView)
            : undefined;
        if (newElement !== this.element) {
            this.element = newElement;
            dirty = true;
        }
        if (dirty) {
            this.changeHandlers.forEach(function (cb) { return cb(_this); });
        }
    };
    ImageUploadState.prototype.setUploadHandler = function (uploadHandler) {
        this.uploadHandler = uploadHandler;
    };
    ImageUploadState.prototype.handleImageUpload = function (view, event) {
        var uploadHandler = this.uploadHandler;
        if (!uploadHandler) {
            return false;
        }
        uploadHandler(event, this.addImage(view));
        return true;
    };
    ImageUploadState.prototype.addImage = function (view) {
        var _this = this;
        return function (options) {
            var state = _this.state;
            var image = state.schema.nodes.image;
            if (_this.enabled && image) {
                view.dispatch(state.tr.insert(state.selection.$to.pos, image.create(options)));
            }
        };
    };
    ImageUploadState.prototype.updateImage = function (view) {
        var _this = this;
        return function (options) {
            if (_this.isImageSelected()) {
                _this.removeImage(view);
                _this.addImage(view)(options);
            }
        };
    };
    ImageUploadState.prototype.removeImage = function (view) {
        var state = this.state;
        var _a = state.selection, $from = _a.$from, $to = _a.$to;
        if (this.isImageSelected()) {
            view.dispatch(state.tr.delete($from.pos, $to.pos));
        }
    };
    ImageUploadState.prototype.getActiveImageElement = function (docView) {
        var $from = this.state.selection.$from;
        var _a = docView.domFromPos($from.pos), node = _a.node, offset = _a.offset;
        if (node.childNodes.length === 0) {
            return node.parentElement;
        }
        return node.childNodes[offset];
    };
    ImageUploadState.prototype.canInsertImage = function () {
        var state = this.state;
        var image = state.schema.nodes.image;
        var $to = state.selection.$to;
        return !!image
            && $to.parent.canReplaceWith($to.parentOffset, $to.parentOffset, image);
    };
    ImageUploadState.prototype.isImageSelected = function () {
        var selection = this.state.selection;
        return selection instanceof NodeSelection
            && selection.node.type === this.state.schema.nodes.image;
    };
    return ImageUploadState;
}());
export { ImageUploadState };
export var stateKey = new PluginKey('imageUploadPlugin');
var plugin = new Plugin({
    state: {
        init: function (config, state) {
            return new ImageUploadState(state);
        },
        apply: function (tr, pluginState, oldState, newState) {
            return pluginState;
        }
    },
    key: stateKey,
    view: function (view) {
        stateKey.getState(view.state).update(view.state, view.docView, true);
        return {
            update: function (view, prevState) {
                stateKey.getState(view.state).update(view.state, view.docView);
            }
        };
    },
    props: {
        handleDOMEvents: {
            drop: function (view, event) {
                var pluginState = stateKey.getState(view.state);
                if (!isDroppedFile(event) || !pluginState.changeHandlers.length) {
                    return false;
                }
                analyticsService.trackEvent('atlassian.editor.image.drop');
                event.preventDefault();
                event.stopPropagation();
                pluginState.handleImageUpload(view, event);
                return true;
            },
            paste: function (view, event) {
                var pluginState = stateKey.getState(view.state);
                if (!isPastedFile(event) || !pluginState.changeHandlers.length) {
                    return false;
                }
                analyticsService.trackEvent('atlassian.editor.image.paste');
                event.preventDefault();
                event.stopPropagation();
                pluginState.handleImageUpload(view, event);
                return true;
            },
        }
    }
});
var plugins = function (schema) {
    return [plugin, inputRulePlugin(schema)].filter(function (plugin) { return !!plugin; });
};
export default plugins;
//# sourceMappingURL=index.js.map