devextreme/cjs/ui/html_editor/modules/variables.js

HTML5 JavaScript Component Suite for Responsive Web Development

/**
 * DevExtreme (cjs/ui/html_editor/modules/variables.js)
 * Version: 23.2.6
 * Build date: Wed May 01 2024
 *
 * Copyright (c) 2012 - 2024 Developer Express Inc. ALL RIGHTS RESERVED
 * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
 */

"use strict";
exports.default = void 0;
var _devextremeQuill = _interopRequireDefault(require("devextreme-quill"));
var _renderer = _interopRequireDefault(require("../../../core/renderer"));
var _position = require("../../../core/utils/position");
var _popup = _interopRequireDefault(require("./popup"));
var _base = _interopRequireDefault(require("./base"));
var _variable = _interopRequireDefault(require("../formats/variable"));
var _extend = require("../../../core/utils/extend");

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

function _assertThisInitialized(self) {
    if (void 0 === self) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
    }
    return self
}

function _inheritsLoose(subClass, superClass) {
    subClass.prototype = Object.create(superClass.prototype);
    subClass.prototype.constructor = subClass;
    _setPrototypeOf(subClass, superClass)
}

function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function(o, p) {
        o.__proto__ = p;
        return o
    };
    return _setPrototypeOf(o, p)
}
let VariableModule = _base.default;
if (_devextremeQuill.default) {
    const VARIABLE_FORMAT_CLASS = "dx-variable-format";
    const ACTIVE_FORMAT_CLASS = "dx-format-active";
    const SELECTED_STATE_CLASS = "dx-state-selected";
    _devextremeQuill.default.register({
        "formats/variable": _variable.default
    }, true);
    VariableModule = function(_PopupModule) {
        _inheritsLoose(VariableModule, _PopupModule);
        var _proto = VariableModule.prototype;
        _proto._getDefaultOptions = function() {
            const baseConfig = _PopupModule.prototype._getDefaultOptions.call(this);
            return (0, _extend.extend)(baseConfig, {
                escapeChar: ""
            })
        };

        function VariableModule(quill, options) {
            var _this;
            _this = _PopupModule.call(this, quill, options) || this;
            const toolbar = quill.getModule("toolbar");
            if (toolbar) {
                toolbar.addClickHandler("variable", _this.showPopup.bind(_assertThisInitialized(_this)))
            }
            quill.keyboard.addBinding({
                key: "P",
                altKey: true
            }, _this.showPopup.bind(_assertThisInitialized(_this)));
            _this._popup.on("shown", e => {
                const $ofElement = (0, _renderer.default)(e.component.option("position").of);
                if ($ofElement.hasClass(VARIABLE_FORMAT_CLASS)) {
                    $ofElement.addClass(ACTIVE_FORMAT_CLASS);
                    $ofElement.addClass(SELECTED_STATE_CLASS)
                }
            });
            return _this
        }
        _proto.showPopup = function(event) {
            const selection = this.quill.getSelection(true);
            const position = selection ? selection.index : this.quill.getLength();
            this.savePosition(position);
            this._resetPopupPosition(event, position);
            _PopupModule.prototype.showPopup.call(this)
        };
        _proto._resetPopupPosition = function(event, position) {
            if (event && event.element) {
                this._popup.option("position", {
                    of: event.element,
                    offset: {
                        h: 0,
                        v: 0
                    },
                    my: "top center",
                    at: "bottom center",
                    collision: "fit"
                })
            } else {
                const mentionBounds = this.quill.getBounds(position);
                const rootRect = (0, _position.getBoundingRect)(this.quill.root);
                this._popup.option("position", {
                    of: this.quill.root,
                    offset: {
                        h: mentionBounds.left,
                        v: mentionBounds.bottom - rootRect.height
                    },
                    my: "top center",
                    at: "bottom left",
                    collision: "fit flip"
                })
            }
        };
        _proto.insertEmbedContent = function(selectionChangedEvent) {
            const caretPosition = this.getPosition();
            const selectedItem = selectionChangedEvent.component.option("selectedItem");
            const variableData = (0, _extend.extend)({}, {
                value: selectedItem,
                escapeChar: this.options.escapeChar
            });
            setTimeout(function() {
                this.quill.insertEmbed(caretPosition, "variable", variableData);
                this.quill.setSelection(caretPosition + 1)
            }.bind(this))
        };
        return VariableModule
    }(_popup.default)
}
var _default = VariableModule;
exports.default = _default;
module.exports = exports.default;
module.exports.default = exports.default;