@syncfusion/ej2-richtexteditor
Version:
Essential JS 2 RichTextEditor component
101 lines (100 loc) • 5.43 kB
JavaScript
import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
import * as events from '../base/constant';
/**
* `ToolbarAction` module is used to toolbar click action
*/
var ToolbarAction = /** @class */ (function () {
function ToolbarAction(parent) {
this.parent = parent;
this.addEventListener();
}
ToolbarAction.prototype.addEventListener = function () {
this.parent.on(events.toolbarClick, this.toolbarClick, this);
this.parent.on(events.dropDownSelect, this.dropDownSelect, this);
this.parent.on(events.colorPickerChanged, this.renderSelection, this);
this.parent.on(events.destroy, this.removeEventListener, this);
};
ToolbarAction.prototype.toolbarClick = function (args) {
if (this.parent.userAgentData.isSafari() && this.parent.formatter.editorManager.nodeSelection &&
!this.parent.inputElement.contains(this.parent.getRange().startContainer)) {
this.parent.notify(events.selectionRestore, {});
}
if (isNOU(args.item)) {
return;
}
if (!isNOU(args.item.controlParent)) {
// eslint-disable-next-line
var activeEle = args.item.controlParent
.activeEle;
if (activeEle) {
activeEle.tabIndex = -1;
}
}
if (args.item.command === 'NumberFormatList' || args.item.command === 'BulletFormatList') {
var targetEle = args.originalEvent.target.nodeName === 'SPAN' ?
args.originalEvent.target.closest('.e-rte-dropdown.e-split-btn') : args.originalEvent.target;
if (targetEle) {
var hasNumberList = targetEle.classList.contains('e-rte-numberformatlist-dropdown') &&
targetEle.classList.contains('e-split-btn');
if (hasNumberList || (targetEle.classList.contains('e-rte-bulletformatlist-dropdown') &&
targetEle.classList.contains('e-split-btn'))) {
args.item.command = 'Lists';
args.item.subCommand = args.item.subCommand === 'NumberFormatList' ? 'OL' : 'UL';
}
}
}
if (args.item.command === 'Lists') {
if (((args.originalEvent.target.classList.contains('e-rte-numberformatlist-dropdown') ||
args.originalEvent.target.classList.contains('e-rte-bulletformatlist-dropdown')) &&
(args.originalEvent.target.classList.contains('e-dropdown-btn'))) ||
args.originalEvent.target.classList.contains('e-caret')) {
return;
}
}
if (args.item.subCommand === 'HorizontalLine') {
args.item.value = '<hr/>';
}
this.parent.notify(events.htmlToolbarClick, args);
this.parent.notify(events.markdownToolbarClick, args);
};
ToolbarAction.prototype.dropDownSelect = function (e) {
this.parent.notify(events.selectionRestore, {});
if (!(document.body.contains(document.body.querySelector('.e-rte-quick-toolbar'))
&& e.item && (e.item.command === 'Images' || e.item.command === 'Audios' || e.item.command === 'Videos' ||
e.item.command === 'VideoLayoutOption' || e.item.command === 'Display' || e.item.command === 'Table'))) {
var value = e.item.controlParent && this.parent.quickToolbarModule && this.parent.quickToolbarModule.tableQTBar
&& this.parent.quickToolbarModule.tableQTBar.element.contains(e.item.controlParent.element) ? 'Table' : null;
if (e.item.command === 'Lists' || e.item.command === 'Checklist') {
var listItem = { listStyle: e.item.value, listImage: e.item.listImage, type: e.item.subCommand };
this.parent.formatter.process(this.parent, e, e.originalEvent, listItem);
}
else if (e.item.command === 'CodeBlock') {
var codeBlockItems = { language: e.item.text, label: e.item.label, action: 'createCodeBlock' };
this.parent.formatter.process(this.parent, e, e.originalEvent, codeBlockItems);
}
else if (e.item.command === 'LineHeight') {
var lineheightItems = { default: this.parent.lineHeight.default,
items: this.parent.lineHeight.items, supportAllValues: this.parent.lineHeight.supportAllValues,
selectedValue: e.item.value };
this.parent.formatter.process(this.parent, e, e.originalEvent, lineheightItems);
}
else {
this.parent.formatter.process(this.parent, e, e.originalEvent, value);
}
}
this.parent.notify(events.selectionSave, {});
};
ToolbarAction.prototype.renderSelection = function (args) {
this.parent.notify(events.selectionRestore, {});
this.parent.formatter.process(this.parent, args, args.originalEvent, null);
this.parent.notify(events.selectionSave, {});
};
ToolbarAction.prototype.removeEventListener = function () {
this.parent.off(events.toolbarClick, this.toolbarClick);
this.parent.off(events.dropDownSelect, this.dropDownSelect);
this.parent.off(events.colorPickerChanged, this.renderSelection);
this.parent.off(events.destroy, this.removeEventListener);
};
return ToolbarAction;
}());
export { ToolbarAction };