devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
102 lines (101 loc) • 3.85 kB
JavaScript
/**
* DevExtreme (esm/__internal/ui/html_editor/modules/m_variables.js)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import $ from "../../../../core/renderer";
import {
extend
} from "../../../../core/utils/extend";
import {
getBoundingRect
} from "../../../../core/utils/position";
import Quill from "devextreme-quill";
import Variable from "../formats/m_variable";
import BaseModule from "./m_base";
import PopupModule from "./m_popup";
let VariableModule = BaseModule;
if (Quill) {
const VARIABLE_FORMAT_CLASS = "dx-variable-format";
const ACTIVE_FORMAT_CLASS = "dx-format-active";
const SELECTED_STATE_CLASS = "dx-state-selected";
Quill.register({
"formats/variable": Variable
}, true);
VariableModule = class extends PopupModule {
constructor(quill, options) {
super(quill, options);
const toolbar = quill.getModule("toolbar");
if (toolbar) {
toolbar.addClickHandler("variable", this.showPopup.bind(this))
}
quill.keyboard.addBinding({
key: "P",
altKey: true
}, this.showPopup.bind(this));
this._popup.on("shown", (e => {
const $ofElement = $(e.component.option("position").of);
if ($ofElement.hasClass(VARIABLE_FORMAT_CLASS)) {
$ofElement.addClass(ACTIVE_FORMAT_CLASS);
$ofElement.addClass(SELECTED_STATE_CLASS)
}
}))
}
_getDefaultOptions() {
const baseConfig = super._getDefaultOptions();
return extend(baseConfig, {
escapeChar: ""
})
}
showPopup(event) {
const selection = this.quill.getSelection(true);
const position = selection ? selection.index : this.quill.getLength();
this.savePosition(position);
this._resetPopupPosition(event, position);
super.showPopup()
}
_resetPopupPosition(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 = 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"
})
}
}
insertEmbedContent(selectionChangedEvent) {
const caretPosition = this.getPosition();
const selectedItem = selectionChangedEvent.component.option("selectedItem");
const variableData = extend({}, {
value: selectedItem,
escapeChar: this.options.escapeChar
});
setTimeout((() => {
this.quill.insertEmbed(caretPosition, "variable", variableData);
this.quill.setSelection(caretPosition + 1)
}))
}
}
}
export default VariableModule;