| 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240 | 1×
1×
1×
1×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1390×
1390×
1×
1390×
1390×
1380×
1380×
1380×
1380×
1390×
1×
75×
75×
6×
6×
6×
1×
1×
5×
5×
4×
1×
1×
75×
75×
74×
1×
144×
80×
1×
50×
50×
50×
1×
6×
6×
1×
1×
1×
1×
1×
46×
334×
46×
1×
46×
1×
75×
75×
75×
75×
75×
75×
75×
10×
75×
1×
10×
10×
10×
10×
1×
75×
70×
1×
69×
69×
1×
70×
1×
1399×
1399×
1399×
1399×
3×
1×
5×
5×
1×
6×
6×
6×
1×
5×
5×
1×
3×
3×
1×
1×
2×
2×
2×
1×
17×
1×
1390×
1390×
1390×
1390×
1390×
64×
64×
1×
17×
15×
2×
2×
2×
3×
3×
1×
1×
1×
1×
1×
1×
1×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base", "../../common/utils/data", "../../models/enums", "../../common/constant", "../../common/utils/transform", "../../common/constant", "../../common/utils/dom"], function (require, exports, ej2_base_1, data_1, enums_1, constant_1, transform_1, constants, dom_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var SlashCommandModule = (function () {
function SlashCommandModule(editor) {
this.editor = editor;
this.init();
this.addEventListeners();
}
SlashCommandModule.prototype.addEventListeners = function () {
this.editor.blockManager.observer.on('showSlashMenuPopup', this.showPopup, this);
this.editor.blockManager.observer.on('hideSlashMenuPopup', this.hidePopup, this);
this.editor.blockManager.observer.on('filterSlashCommands', this.filterCommands, this);
this.editor.on(constant_1.events.moduleChanged, this.onPropertyChanged, this);
this.editor.on(constant_1.events.rtlChanged, this.applyRtlSettings, this);
this.editor.on(constant_1.events.destroy, this.destroy, this);
};
SlashCommandModule.prototype.removeEventListeners = function () {
this.editor.blockManager.observer.off('showSlashMenuPopup', this.showPopup);
this.editor.blockManager.observer.off('hideSlashMenuPopup', this.hidePopup);
this.editor.blockManager.observer.off('filterSlashCommands', this.filterCommands);
this.editor.off(constant_1.events.moduleChanged, this.onPropertyChanged);
this.editor.off(constant_1.events.rtlChanged, this.applyRtlSettings);
this.editor.off(constant_1.events.destroy, this.destroy);
};
SlashCommandModule.prototype.init = function () {
var mentionArgs = {
element: this.editor.blockContainer,
mentionChar: '/',
dataSource: this.getCommandItems(),
cssClass: 'e-blockeditor-command-menu e-blockeditor-mention-menu',
highlight: true,
fields: { text: 'label', value: 'label', iconCss: 'iconCss', groupBy: 'groupBy', disabled: 'disabled' },
itemTemplate: '<div class="e-command-mention-item-template" title="${tooltip}"><div class="e-command-icon-info"><span class="e-command-icon ${iconCss}"></span></div><div class="e-command-item-info"><div class="e-command-title">${label}</div>${if(shortcut)}<div class="e-command-shortcut">${shortcut}</div>${/if}</div></div>',
displayTemplate: '',
popupWidth: this.editor.commandMenuSettings.popupWidth,
popupHeight: this.editor.commandMenuSettings.popupHeight,
change: this.handleSlashCommandChange.bind(this),
beforeOpen: this.handleSlashCommandBeforeOpen.bind(this),
opened: this.handleSlashCommandOpened.bind(this),
beforeClose: this.handleSlashCommandBeforeClose.bind(this),
select: this.handleSlashCommandSelect.bind(this),
filtering: this.handleSlashCommandFiltering.bind(this)
};
this.mentionObj = this.editor.mentionRenderer.renderMention(mentionArgs);
this.applyRtlSettings();
this.editor.blockManager.observer.notify('slashMenuCreated');
};
SlashCommandModule.prototype.getCommandItems = function () {
var slashMenuOptions = this.editor.commandMenuSettings.commands.length > 0
? transform_1.sanitizeCommandMenuItems(this.editor.commandMenuSettings.commands)
: data_1.getCommandMenuItems();
if (this.editor.commandMenuSettings.commands.length <= 0) {
var prevOnChange = this.editor.isProtectedOnChange;
this.editor.isProtectedOnChange = true;
this.editor.commandMenuSettings.commands = slashMenuOptions;
this.editor.isProtectedOnChange = prevOnChange;
}
return slashMenuOptions;
};
SlashCommandModule.prototype.bindTooltipForSlashPopup = function (popupEle) {
var _this = this;
this.slashMenuTooltip = this.editor.tooltipRenderer.renderTooltip({
cssClass: 'e-blockeditor-command-menu-tooltip',
position: 'RightCenter',
target: '.e-list-item',
windowCollision: true,
element: popupEle,
beforeRender: function (args) {
var target = args.target;
var templateRoot = target.querySelector('.e-command-mention-item-template');
if (target.classList.contains(constants.DISABLED_CLS) || !templateRoot) {
args.cancel = true;
return;
}
var tooltipVal = templateRoot.getAttribute('title');
if (tooltipVal) {
_this.slashMenuTooltip.content = tooltipVal;
}
else {
args.cancel = true;
}
}
});
};
SlashCommandModule.prototype.setActiveItem = function (popupEle) {
var firstItem = popupEle.querySelector('.e-list-item');
if (firstItem) {
firstItem.classList.add('e-active');
}
};
SlashCommandModule.prototype.clearTooltipState = function () {
if (this.slashMenuTooltip) {
this.slashMenuTooltip.destroy();
}
};
SlashCommandModule.prototype.handleSlashCommandChange = function (args) {
args.e.preventDefault();
args.e.stopPropagation();
this.editor.blockManager.observer.notify('slashCommandChange', args);
};
SlashCommandModule.prototype.handleSlashCommandFiltering = function (args) {
var filterArgs = {
commands: this.editor.commandMenuSettings.commands,
text: args.text,
event: args.baseEventArgs,
cancel: false
};
if (this.editor.commandMenuSettings.filtering) {
this.editor.commandMenuSettings.filtering.call(this, filterArgs);
args.cancel = filterArgs.cancel;
Eif (!args.cancel) {
args.updateData(filterArgs.commands);
}
}
};
SlashCommandModule.prototype.handleSlashCommandSelect = function (args) {
var itemClickArgs = {
command: this.editor.commandMenuSettings.commands.find(function (c) { return c.id === args.itemData.id; }),
element: args.item,
event: args.e,
isInteracted: true,
cancel: false
};
if (this.editor.commandMenuSettings.itemSelect) {
this.editor.commandMenuSettings.itemSelect.call(this, itemClickArgs);
}
args.cancel = itemClickArgs.cancel;
};
SlashCommandModule.prototype.handleSlashCommandOpened = function (args) {
var mentionPopupId = this.editor.blockContainer.id + "_popup";
var popupEle = document.querySelector("#" + mentionPopupId + ".e-blockeditor-command-menu");
this.clearTooltipState();
this.bindTooltipForSlashPopup(popupEle);
this.setActiveItem(popupEle);
var tableBlock = this.editor.blockManager.currentFocusedBlock
? dom_1.findClosestParent(this.editor.blockManager.currentFocusedBlock, "." + constants.TABLE_BLOCK_CLS)
: null;
if (tableBlock) {
this.restrictItemsOnSpecificBlock([enums_1.BlockType.Table], popupEle);
}
this.editor.blockManager.observer.notify('updateSlashMenuPopupState', { isOpen: true });
};
SlashCommandModule.prototype.restrictItemsOnSpecificBlock = function (blockTypes, popupEle) {
blockTypes.forEach(function (blockType) {
var listItem = popupEle.querySelector("[data-value=" + blockType + "]");
Eif (listItem) {
listItem.classList.add(constants.HIDDEN_CLS);
}
});
};
SlashCommandModule.prototype.handleSlashCommandBeforeOpen = function (args) {
if (this.editor.blockManager.currentFocusedBlock) {
args.cancel = this.restrictPopupForBlockTypes(this.editor.blockManager.currentFocusedBlock.getAttribute('data-block-type'));
}
};
SlashCommandModule.prototype.handleSlashCommandBeforeClose = function (args) {
this.editor.blockManager.observer.notify('updateSlashMenuPopupState', { isOpen: false });
this.clearTooltipState();
};
SlashCommandModule.prototype.restrictPopupForBlockTypes = function (blockType) {
return blockType === enums_1.BlockType.Code || blockType === enums_1.BlockType.Image;
};
SlashCommandModule.prototype.applyRtlSettings = function () {
this.mentionObj.enableRtl = this.editor.enableRtl;
this.mentionObj.enablePersistence = this.editor.enablePersistence;
this.mentionObj.locale = this.editor.locale;
if (this.slashMenuTooltip) {
this.slashMenuTooltip.position = this.editor.enableRtl ? 'LeftCenter' : 'RightCenter';
}
};
SlashCommandModule.prototype.hidePopup = function () {
Eif (this.mentionObj) {
this.mentionObj.hidePopup();
}
};
SlashCommandModule.prototype.showPopup = function () {
var mentionPopupId = this.editor.blockContainer.id + "_popup";
var popupElement = document.querySelector("#" + mentionPopupId + ".e-blockeditor-command-menu");
if (popupElement && popupElement.classList.contains('e-popup-open')) {
return;
}
Eif (this.mentionObj) {
this.mentionObj.showPopup();
}
};
SlashCommandModule.prototype.filterCommands = function (options) {
Eif (this.mentionObj) {
if (options.text.length > SlashCommandModule.MAX_FILTER_TEXT_LENGTH) {
this.hidePopup();
return;
}
var rect = this.editor.floatingIconRenderer.floatingIconContainer.getBoundingClientRect();
options.offsetX += rect.width;
this.mentionObj.search(options.text, options.offsetX, options.offsetY);
}
};
SlashCommandModule.prototype.getModuleName = function () {
return 'slashCommand';
};
SlashCommandModule.prototype.destroy = function () {
this.removeEventListeners();
Eif (this.mentionObj) {
this.mentionObj.destroy();
this.mentionObj = null;
}
if (this.slashMenuTooltip) {
this.slashMenuTooltip.destroy();
this.slashMenuTooltip = null;
}
};
SlashCommandModule.prototype.onPropertyChanged = function (e) {
if (e.module !== this.getModuleName()) {
return;
}
var newProp = e.newProp.commandMenuSettings;
Eif (!ej2_base_1.isNullOrUndefined(newProp)) {
for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
var prop = _a[_i];
switch (prop) {
case 'popupWidth':
this.mentionObj.popupWidth = this.editor.blockManager.commandMenuSettings.popupWidth;
break;
case 'popupHeight':
this.mentionObj.popupHeight = this.editor.blockManager.commandMenuSettings.popupHeight;
break;
case 'commands':
this.mentionObj.dataSource = this.editor.blockManager.commandMenuSettings.commands =
transform_1.sanitizeCommandMenuItems(newProp.commands);
break;
}
}
}
};
SlashCommandModule.MAX_FILTER_TEXT_LENGTH = 6;
return SlashCommandModule;
}());
exports.SlashCommandModule = SlashCommandModule;
});
|