@syncfusion/ej2-richtexteditor
Version:
Essential JS 2 RichTextEditor component
941 lines • 119 kB
JavaScript
import { createElement, detach, closest, Browser, isNullOrUndefined as isNOU, getComponent } from '@syncfusion/ej2-base';
import { isNullOrUndefined, EventHandler, addClass } from '@syncfusion/ej2-base';
import { Popup } from '@syncfusion/ej2-popups';
import { Button } from '@syncfusion/ej2-buttons';
import * as events from '../base/constant';
import { RenderType } from '../base/enum';
import { NumericTextBox } from '@syncfusion/ej2-inputs';
import * as classes from '../base/classes';
import { dispatchEvent, parseHtml, hasClass } from '../base/util';
import { removeClassWithAttr } from '../../common/util';
/**
* `Table` module is used to handle table actions.
*/
var Table = /** @class */ (function () {
function Table(parent, serviceLocator) {
this.ensureInsideTableList = true;
this.pageX = null;
this.pageY = null;
this.moveEle = null;
this.currentColumnResize = '';
this.resizeEndTime = 0;
this.isTableMoveActive = false;
this.isResizeBind = true;
this.parent = parent;
this.rteID = parent.element.id;
this.l10n = serviceLocator.getService('rteLocale');
this.rendererFactory = serviceLocator.getService('rendererFactory');
this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
this.addEventListener();
this.isDestroyed = false;
}
Table.prototype.addEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.on(events.createTable, this.renderDlgContent, this);
this.parent.on(events.initialEnd, this.afterRender, this);
this.parent.on(events.dynamicModule, this.afterRender, this);
this.parent.on(events.showTableDialog, this.showDialog, this);
this.parent.on(events.closeTableDialog, this.closeDialog, this);
this.parent.on(events.docClick, this.docClick, this);
this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
this.parent.on(events.clearDialogObj, this.clearDialogObj, this);
this.parent.on(events.tableToolbarAction, this.onToolbarAction, this);
this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
this.parent.on(events.keyDown, this.keyDown, this);
this.parent.on(events.tableModulekeyUp, this.tableModulekeyUp, this);
this.parent.on(events.bindCssClass, this.setCssClass, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.afterKeyDown, this.afterKeyDown, this);
this.parent.on(events.hideTableQuickToolbar, this.hideTableQuickToolbar, this);
};
Table.prototype.removeEventListener = function () {
this.parent.off(events.createTable, this.renderDlgContent);
this.parent.off(events.initialEnd, this.afterRender);
this.parent.off(events.dynamicModule, this.afterRender);
this.parent.off(events.docClick, this.docClick);
this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
this.parent.off(events.showTableDialog, this.showDialog);
this.parent.off(events.closeTableDialog, this.closeDialog);
this.parent.off(events.editAreaClick, this.editAreaClickHandler);
this.parent.off(events.clearDialogObj, this.clearDialogObj);
this.parent.off(events.tableToolbarAction, this.onToolbarAction);
this.parent.off(events.dropDownSelect, this.dropdownSelect);
this.parent.off(events.mouseDown, this.cellSelect);
this.parent.off(events.hideTableQuickToolbar, this.hideTableQuickToolbar);
this.parent.off(events.keyDown, this.keyDown);
this.parent.off(events.tableModulekeyUp, this.tableModulekeyUp);
this.parent.off(events.bindCssClass, this.setCssClass);
this.parent.off(events.destroy, this.destroy);
this.parent.off(events.afterKeyDown, this.afterKeyDown);
if (!Browser.isDevice && this.parent.tableSettings.resize) {
EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);
}
};
Table.prototype.updateCss = function (currentObj, e) {
if (currentObj && e.cssClass) {
if (isNullOrUndefined(e.oldCssClass)) {
currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
}
}
};
Table.prototype.setCssClass = function (e) {
if (this.popupObj && e.cssClass) {
if (isNullOrUndefined(e.oldCssClass)) {
addClass([this.popupObj.element], e.cssClass);
}
else {
removeClassWithAttr([this.popupObj.element], e.oldCssClass);
addClass([this.popupObj.element], e.cssClass);
}
}
this.updateCss(this.createTableButton, e);
this.updateCss(this.editdlgObj, e);
var numericTextBoxObj = [
this.columnTextBox, this.rowTextBox, this.tableWidthNum, this.tableCellPadding, this.tableCellSpacing
];
for (var i = 0; i < numericTextBoxObj.length; i++) {
this.updateCss(numericTextBoxObj[i], e);
}
};
Table.prototype.afterRender = function () {
if (isNullOrUndefined(this.contentModule)) {
this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
this.parent.on(events.mouseDown, this.cellSelect, this);
if (this.parent.tableSettings.resize) {
EventHandler.add(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart, this);
}
if (!Browser.isDevice && this.parent.tableSettings.resize) {
EventHandler.add(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper, this);
}
}
};
Table.prototype.dropdownSelect = function (e) {
var item = e.item;
if (!document.body.contains(document.body.querySelector('.e-rte-quick-toolbar')) || item.command !== 'Table') {
return;
}
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
var args = {
args: e,
selection: this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument()),
selectParent: this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)
};
switch (item.subCommand) {
case 'InsertRowBefore':
case 'InsertRowAfter':
this.addRow(args.selection, e);
break;
case 'InsertColumnLeft':
case 'InsertColumnRight':
this.addColumn(args.selection, e);
break;
case 'DeleteColumn':
case 'DeleteRow':
this.removeRowColumn(args.selection, e);
break;
case 'AlignTop':
case 'AlignMiddle':
case 'AlignBottom':
this.verticalAlign(args, e);
break;
case 'Dashed':
case 'Alternate':
case 'Custom':
this.tableStyles(args, e);
break;
case 'Merge':
case 'VerticalSplit':
case 'HorizontalSplit':
this.UpdateCells(args.selection, e);
break;
}
};
Table.prototype.UpdateCells = function (selectCell, e) {
this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
this.hideTableQuickToolbar();
};
Table.prototype.keyDown = function (e) {
var event = e.args;
// eslint-disable-next-line
var proxy = this;
switch (event.action) {
case 'escape':
break;
case 'insert-table':
if (this.parent.editorMode === 'HTML') {
this.openDialog(true, e);
}
else if (this.parent.editorMode === 'Markdown') {
this.parent.formatter.process(this.parent, null, event);
}
event.preventDefault();
break;
}
if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule
&& event.code !== 'KeyK') {
var selection = void 0;
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
var ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
if ((event.keyCode === 8 || event.keyCode === 46) ||
(event.ctrlKey && event.keyCode === 88)) {
if (ele && ele.tagName === 'TBODY') {
if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
}
event.preventDefault();
proxy.removeTable(selection, event, true);
}
else if (ele && ele.querySelectorAll('table').length > 0) {
this.removeResizeElement();
this.hideTableQuickToolbar();
}
}
if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
var closestTd = closest(ele, 'td');
ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
}
if (ele && (ele.tagName === 'TD' || ele.tagName === 'TH')) {
var selectedEndCell = this.contentModule.getEditPanel().querySelectorAll('.e-cell-select-end');
if ((isNOU(this.activeCell) || this.activeCell !== ele) && !isNOU(selectedEndCell) && selectedEndCell.length === 0) {
this.activeCell = ele;
}
if (!isNOU(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
selection = this.parent.formatter.editorManager.nodeSelection.save(range, this.contentModule.getDocument());
}
if (!event.shiftKey ||
(event.shiftKey && event.keyCode === 9)) {
switch (event.keyCode) {
case 9:
case 37:
case 39:
proxy.tabSelection(event, selection, ele);
break;
case 40:
case 38:
proxy.tableArrowNavigation(event, selection, ele);
break;
}
}
}
}
if (event.shiftKey && (event.keyCode === 39 ||
event.keyCode === 37
|| event.keyCode === 38 || event.keyCode === 40)) {
this.keyDownEventInstance = event;
EventHandler.add(this.parent.contentModule.getDocument(), 'selectionchange', this.tableCellsKeyboardSelection, this);
}
if (event.ctrlKey && event.key === 'a') {
this.handleSelectAll();
}
if (((event.code === 'Delete' && event.which === 46) || (event.code === 'Backspace' && event.which === 8)) && this.parent.editorMode === 'HTML') {
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
if (range.startContainer.nodeType === Node.ELEMENT_NODE && range.startContainer.nodeName === 'DIV' && range.startContainer.classList.contains('e-table-fake-selection')) {
this.deleteTable();
event.preventDefault();
}
else {
var table = (event.code === 'Delete' && event.which === 46) ? this.getAdjacentTableElement(range, true) : this.getAdjacentTableElement(range, false);
if (table) {
this.updateTableSelection(table);
event.preventDefault();
}
}
}
else {
var isShiftEnter = event.shiftKey && event.key === 'Enter';
var isActionKey = classes.ALLOWED_ACTIONKEYS.indexOf(event.key) !== -1;
if (isShiftEnter || isActionKey || (event.key && event.key.length === 1)) {
var table = this.parent.contentModule.getEditPanel().querySelector('table.e-cell-select');
if (table) {
if (event.keyCode === 39 || event.keyCode === 37) {
this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), table, 0);
}
else {
var firstTd = table.querySelector('tr').cells[0];
this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), firstTd, firstTd, 0, 0);
}
}
this.removeTableSelection();
}
}
};
Table.prototype.tableCellsKeyboardSelection = function (e) {
EventHandler.remove(this.parent.contentModule.getDocument(), 'selectionchange', this.tableCellsKeyboardSelection);
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
var event = this.keyDownEventInstance;
var isMultiSelect = !isNullOrUndefined(range) && !isNullOrUndefined(range.commonAncestorContainer) &&
range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE
&& (range.commonAncestorContainer.tagName === 'TR'
|| range.commonAncestorContainer.tagName === 'TBODY') && !isNullOrUndefined(this.activeCell);
var selectedEndCell = this.contentModule.getEditPanel().querySelectorAll('.e-cell-select-end');
if (!isNullOrUndefined(selectedEndCell) && selectedEndCell.length > 0) {
this.parent.formatter.editorManager.nodeSelection.Clear(this.parent.contentModule.getDocument());
this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.parent.contentModule.getDocument(), selectedEndCell[0], selectedEndCell[0], 0, 0);
this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), selectedEndCell[0], 0);
}
if (isMultiSelect || (!isNullOrUndefined(selectedEndCell) && selectedEndCell.length > 0)) {
var cells = this.getCorrespondingColumns();
var cell = !isNullOrUndefined(selectedEndCell)
&& selectedEndCell.length > 0 ? selectedEndCell[0] : this.activeCell;
var activeIndexes = this.getCorrespondingIndex(cell, cells);
var activeCellRowIndex = activeIndexes[0];
var activeCellColIndex = activeIndexes[1];
var target = void 0;
if (event.keyCode === 39) {
if (activeCellColIndex < cells[0].length - 1) {
target = cells[activeCellRowIndex][(activeCellColIndex + 1)];
}
else if (activeCellRowIndex < cells.length - 1) {
target = cells[(activeCellRowIndex + 1)][activeCellColIndex];
if (selectedEndCell.length === 0 && activeCellRowIndex < cells.length - 1) {
this.activeCell = cells[activeCellRowIndex][0];
}
}
else {
this.resetTableSelection();
}
}
else if (event.keyCode === 37) {
if (0 < activeCellColIndex) {
target = cells[activeCellRowIndex][(activeCellColIndex - 1)];
}
else if (0 < activeCellRowIndex) {
target = cells[(activeCellRowIndex - 1)][activeCellColIndex];
if (selectedEndCell.length === 0 && 0 < activeCellRowIndex) {
this.activeCell = cells[activeCellRowIndex][(cells[activeCellRowIndex].length - 1)];
}
}
else {
this.resetTableSelection();
}
}
else if (event.keyCode === 38) {
if (0 < activeCellRowIndex) {
target = cells[(activeCellRowIndex - 1)][activeCellColIndex];
}
else {
this.resetTableSelection();
}
}
else if (event.keyCode === 40) {
if (activeCellRowIndex < cells.length - 1) {
target = cells[(activeCellRowIndex + 1)][activeCellColIndex];
}
else {
this.resetTableSelection();
}
}
if (target) {
this.parent.formatter.editorManager.observer.notify('TABLE_MOVE', {
event: { target: target },
selectNode: [this.activeCell]
});
}
}
if (selectedEndCell.length > 0) {
event.preventDefault();
e.preventDefault();
}
};
Table.prototype.resetTableSelection = function () {
var selectedEndCell = this.contentModule.getEditPanel().querySelectorAll('.e-cell-select-end');
if (!isNullOrUndefined(selectedEndCell) && selectedEndCell.length > 0) {
this.parent.formatter.editorManager.nodeSelection.setSelectionNode(this.parent.contentModule.getDocument(), this.curTable);
}
this.activeCell = null;
this.removeCellSelectClasses();
this.removeTableSelection();
};
Table.prototype.getCorrespondingColumns = function () {
var elementArray = [];
var colspan = 0;
var allRows = this.curTable.rows;
for (var i = 0; i <= allRows.length - 1; i++) {
var ele = allRows[i];
var index = 0;
for (var j = 0; j <= ele.children.length - 1; j++) {
var colEle = ele.children[j];
for (var ele_1 = colEle, colspan_1 = parseInt(ele_1.getAttribute('colspan'), 10) || 1, rowSpan = parseInt(ele_1.getAttribute('rowspan'), 10) || 1, rowIndex = i; rowIndex < i + rowSpan; rowIndex++) {
for (var colIndex = index; colIndex < index + colspan_1; colIndex++) {
if (!elementArray[rowIndex]) {
elementArray[rowIndex] = [];
}
if (elementArray[rowIndex][colIndex]) {
index++;
}
else {
elementArray[rowIndex][colIndex] = colEle;
}
}
}
index += colspan;
}
}
return elementArray;
};
Table.prototype.getCorrespondingIndex = function (cell, allCells) {
for (var i = 0; i < allCells.length; i++) {
for (var j = 0; j < allCells[i].length; j++) {
if (allCells[i][j] === cell) {
return [i, j];
}
}
}
return [];
};
Table.prototype.getAdjacentTableElement = function (range, isdelKey) {
if (!range.collapsed || (!isdelKey && this.quickToolObj && this.quickToolObj.tableQTBar
&& document.body.contains(this.quickToolObj.tableQTBar.element))) {
return null;
}
var nodeCollection = this.getNodeCollection(range);
var startContainer = (range.collapsed && this.parent.contentModule.getEditPanel() === range.startContainer
&& nodeCollection && nodeCollection.length > 0 && nodeCollection[0] ?
nodeCollection[0] : range.startContainer);
var adjacentElement = this.getSelectedTableEle(nodeCollection);
var isBrEle = this.getBrElement(range, nodeCollection);
if (startContainer && startContainer.nodeType === Node.ELEMENT_NODE) {
if (startContainer.tagName === 'IMG' || startContainer.querySelector('img') || startContainer.tagName === 'AUDIO'
|| startContainer.querySelector('audio') || startContainer.tagName === 'VIDEO' || startContainer.querySelector('video')
|| startContainer.querySelector('.e-video-clickelem')) {
var compareRange = this.contentModule.getDocument().createRange();
compareRange.collapse(true);
compareRange.selectNodeContents(startContainer);
var nodeIndex = this.parent.formatter.editorManager.nodeSelection.getIndex(startContainer);
if ((isdelKey && compareRange.startOffset >= range.startOffset) ||
(!isdelKey && (startContainer.tagName !== 'IMG' && compareRange.startOffset !== range.startOffset
|| startContainer.tagName === 'IMG' && nodeIndex !== range.startOffset))) {
return null;
}
}
}
if (startContainer && startContainer.nodeType === Node.TEXT_NODE) {
if (isdelKey) {
if (range.endOffset !== range.endContainer.textContent.length) {
if (range.endOffset !== range.endContainer.textContent.trim().length) {
return null;
}
}
}
else if (range.startOffset !== 0) {
return null;
}
}
if (startContainer && startContainer.nodeType === Node.ELEMENT_NODE && startContainer.tagName === 'TABLE') {
adjacentElement = startContainer;
}
if (adjacentElement) {
var currentEleIndex = this.parent.formatter.editorManager.nodeSelection.getIndex(adjacentElement);
if (!((range.startOffset === currentEleIndex && isdelKey) || (range.startOffset !== currentEleIndex && !isdelKey))) {
adjacentElement = null;
}
}
if (!adjacentElement && startContainer) {
adjacentElement = this.getAdjacentElementFromDom(startContainer, isBrEle, isdelKey);
}
if (adjacentElement && adjacentElement.nodeType === Node.ELEMENT_NODE && adjacentElement.tagName === 'TABLE') {
this.setSelection(adjacentElement, isBrEle);
return adjacentElement;
}
return null;
};
Table.prototype.getAdjacentElementFromDom = function (startContainer, isBrEle, isdelKey) {
var adjacentElement;
var parentElement = (isBrEle ? isBrEle : startContainer.parentNode);
var currentElement = startContainer;
while (parentElement && !adjacentElement && parentElement.parentNode) {
var childNodes = Array.from(parentElement.childNodes);
var startContainerIndex = childNodes.indexOf(currentElement);
if (startContainerIndex !== -1 && ((isdelKey && startContainerIndex < childNodes.length - 1)
|| (!isdelKey && startContainerIndex > 0))) {
adjacentElement = (childNodes[isdelKey ? startContainerIndex + 1 : startContainerIndex - 1]);
}
else {
adjacentElement = (isdelKey ? parentElement.nextSibling : parentElement.previousSibling);
currentElement = parentElement;
}
if (!isBrEle && startContainer.nodeType === Node.TEXT_NODE && adjacentElement && adjacentElement.tagName && adjacentElement.tagName.toUpperCase() === 'BR') {
isBrEle = currentElement = parentElement = adjacentElement;
adjacentElement = null;
}
if (!isBrEle && adjacentElement && !(adjacentElement.nodeType === Node.ELEMENT_NODE && adjacentElement.tagName === 'TABLE') && !isNullOrUndefined(adjacentElement.textContent) && !adjacentElement.textContent.trim()) {
currentElement = parentElement = adjacentElement.parentNode;
adjacentElement = null;
}
if (adjacentElement && adjacentElement.tagName && ['UL', 'OL', 'LI'].indexOf(adjacentElement.tagName.toUpperCase()) !== -1) {
adjacentElement = this.getAdjacentElementFromList(adjacentElement, isdelKey);
if (!adjacentElement) {
return null;
}
}
if (parentElement && parentElement.tagName && parentElement.tagName.toUpperCase() === 'LI' && !isdelKey) {
adjacentElement = parentElement;
}
parentElement = parentElement.parentNode;
}
return adjacentElement;
};
Table.prototype.getAdjacentElementFromList = function (adjacentElement, isdelKey) {
while (adjacentElement) {
if (adjacentElement.tagName && ['UL', 'OL', 'LI'].indexOf(adjacentElement.tagName.toUpperCase()) === -1) {
if (!(adjacentElement.nodeType === Node.ELEMENT_NODE && adjacentElement.tagName === 'TABLE')) {
adjacentElement = (isdelKey ? adjacentElement.firstChild : adjacentElement.lastChild);
}
break;
}
adjacentElement = (isdelKey ? adjacentElement.firstChild : adjacentElement.lastChild);
}
return adjacentElement;
};
Table.prototype.getNodeCollection = function (range) {
var nodes = [];
if (range.collapsed && this.parent.contentModule.getEditPanel() === range.startContainer
&& range.startContainer.childNodes.length > 0) {
var index = Math.max(0, Math.min(range.startContainer.childNodes.length - 1, range.endOffset - 1));
nodes.push(range.startContainer.childNodes[index]);
}
else {
nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
}
return nodes;
};
Table.prototype.getSelectedTableEle = function (nodeCollection) {
if (nodeCollection && nodeCollection.length > 0) {
for (var _i = 0, _a = Array.from(nodeCollection); _i < _a.length; _i++) {
var element = _a[_i];
if (element && element.tagName === 'TABLE') {
return element;
}
}
}
return null;
};
Table.prototype.getBrElement = function (range, nodeCollection) {
if (range.endContainer.tagName === 'BR') {
return range.endContainer;
}
if (nodeCollection.length === 1 && nodeCollection[0]
&& nodeCollection[0].tagName === 'BR') {
return nodeCollection[0];
}
return null;
};
Table.prototype.setSelection = function (nextElement, isBrEle) {
if (!nextElement.classList.contains('e-cell-select')) {
this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
if (isBrEle) {
if (isBrEle.parentNode && isBrEle.parentNode.childNodes.length === 1 && isBrEle.parentNode.firstChild.nodeName === 'BR') {
detach(isBrEle.parentNode);
}
else {
detach(isBrEle);
}
}
var fakeSelectionEle = this.parent.createElement('div', { className: 'e-table-fake-selection' });
fakeSelectionEle.setAttribute('contenteditable', 'false');
this.contentModule.getEditPanel().appendChild(fakeSelectionEle);
this.parent.formatter.editorManager.nodeSelection.setSelectionNode(this.contentModule.getDocument(), fakeSelectionEle);
}
};
Table.prototype.removeAllFakeSelectionEles = function () {
var fakeSelectionEles = this.parent.contentModule.getEditPanel().querySelectorAll('.e-table-fake-selection');
if (fakeSelectionEles && fakeSelectionEles.length > 0) {
fakeSelectionEles.forEach(function (element) {
detach(element);
});
}
};
Table.prototype.deleteTable = function () {
var table = this.parent.contentModule.getEditPanel().querySelector('table.e-cell-select');
this.removeResizeElement();
if (table) {
var brElement = document.createElement('br');
var containerEle = brElement;
if (this.parent.enterKey === 'DIV') {
containerEle = document.createElement('div');
containerEle.appendChild(brElement);
}
else if (this.parent.enterKey === 'P') {
containerEle = document.createElement('p');
containerEle.appendChild(brElement);
}
table.parentNode.replaceChild(containerEle, table);
this.parent.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), containerEle, containerEle, 0, 0);
this.removeTableSelection();
}
};
Table.prototype.removeTableSelection = function () {
var table = this.parent.contentModule.getEditPanel().querySelector('table.e-cell-select');
if (table) {
removeClassWithAttr([table], classes.CLS_TABLE_SEL);
}
this.removeAllFakeSelectionEles();
};
Table.prototype.updateTableSelection = function (table) {
addClass([table], 'e-cell-select');
};
Table.prototype.handleSelectAll = function () {
this.cancelResizeAction();
var selectedCells = this.parent.inputElement.querySelectorAll('.' + classes.CLS_TABLE_SEL);
removeClassWithAttr(selectedCells, classes.CLS_TABLE_SEL);
this.removeTableSelection();
};
Table.prototype.tableModulekeyUp = function (e) {
if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
var ele = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range)[0];
ele = (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') ? ele.parentElement : ele;
if (ele && ele.tagName !== 'TD' && ele.tagName !== 'TH') {
var closestTd = closest(ele, 'td');
ele = !isNullOrUndefined(closestTd) && this.parent.inputElement.contains(closestTd) ? closestTd : ele;
}
if ((ele && ele.tagName === 'TD' || ele.tagName === 'TH') && !ele.classList.contains(classes.CLS_TABLE_SEL)) {
ele.classList.add(classes.CLS_TABLE_SEL);
}
var eventArgs = e.args;
if (this.previousTableElement !== ele && !isNullOrUndefined(this.previousTableElement)
&& !eventArgs.shiftKey && (eventArgs.keyCode === 39 || eventArgs.keyCode === 37 ||
eventArgs.keyCode === 38 || eventArgs.keyCode === 40)) {
removeClassWithAttr([this.previousTableElement], classes.CLS_TABLE_SEL);
this.removeTableSelection();
}
}
};
Table.prototype.openDialog = function (isInternal, e) {
if (!isInternal) {
this.parent.contentModule.getEditPanel().focus();
}
if (this.parent.editorMode === 'HTML') {
var docElement = this.parent.contentModule.getDocument();
var range = this.parent.formatter.editorManager.nodeSelection.getRange(docElement);
var selection = this.parent.formatter.editorManager.nodeSelection.save(range, docElement);
var args = {
originalEvent: e ? e.args : { action: 'insert-table' },
item: {
command: 'Table',
subCommand: 'CreateTable'
},
name: !isInternal ? 'showDialog' : null
};
this.insertTableDialog({ self: this, args: args, selection: selection });
}
};
Table.prototype.showDialog = function () {
this.openDialog(false);
this.setCssClass({ cssClass: this.parent.getCssClass() });
};
Table.prototype.closeDialog = function () {
if (this.editdlgObj) {
this.editdlgObj.hide({ returnValue: true });
}
};
Table.prototype.onToolbarAction = function (args) {
var item = args.args.item;
switch (item.subCommand) {
case 'TableHeader':
this.tableHeader(args.selection, args.args);
break;
case 'TableRemove':
this.removeTable(args.selection, args.args);
break;
case 'TableEditProperties':
this.editTable(args);
break;
}
};
Table.prototype.verticalAlign = function (args, e) {
var tdEle = closest(args.selectParent[0], 'th') || closest(args.selectParent[0], 'td');
if (tdEle) {
this.parent.formatter.process(this.parent, e, e, { tableCell: tdEle, subCommand: e.item.subCommand });
}
};
Table.prototype.tableStyles = function (args, e) {
var command = e.item.subCommand;
var table = closest(args.selectParent[0], 'table');
if (command === 'Dashed') {
/* eslint-disable */
(this.parent.element.classList.contains(classes.CLS_TB_DASH_BOR)) ?
removeClassWithAttr([this.parent.element], classes.CLS_TB_DASH_BOR) : this.parent.element.classList.add(classes.CLS_TB_DASH_BOR);
(table.classList.contains(classes.CLS_TB_DASH_BOR)) ? removeClassWithAttr([table], classes.CLS_TB_DASH_BOR) :
table.classList.add(classes.CLS_TB_DASH_BOR);
}
if (command === 'Alternate') {
(this.parent.element.classList.contains(classes.CLS_TB_ALT_BOR)) ?
removeClassWithAttr([this.parent.element], classes.CLS_TB_ALT_BOR) : this.parent.element.classList.add(classes.CLS_TB_ALT_BOR);
(table.classList.contains(classes.CLS_TB_ALT_BOR)) ? removeClassWithAttr([table], classes.CLS_TB_ALT_BOR) :
table.classList.add(classes.CLS_TB_ALT_BOR);
/* eslint-enable */
}
if (args.args && args.args.item.cssClass) {
var classList = args.args.item.cssClass.split(' ');
for (var i = 0; i < classList.length; i++) {
if (table.classList.contains(classList[i])) {
removeClassWithAttr([table], (classList[i]));
}
else {
table.classList.add(classList[i]);
}
}
}
this.parent.formatter.process(this.parent, e, e, { subCommand: e.item.subCommand });
this.parent.formatter.saveData();
this.hideTableQuickToolbar();
this.parent.formatter.editorManager.nodeSelection.restore();
};
Table.prototype.insideList = function (range) {
var blockNodes = this.getBlockNodesInSelection(range);
var nodes = [];
for (var i = 0; i < blockNodes.length; i++) {
if (blockNodes[i].parentNode.tagName === 'LI') {
nodes.push(blockNodes[i].parentNode);
}
else if (blockNodes[i].tagName === 'LI' && blockNodes[i].childNodes[0].tagName !== 'P' &&
(blockNodes[i].childNodes[0].tagName !== 'OL' &&
blockNodes[i].childNodes[0].tagName !== 'UL')) {
nodes.push(blockNodes[i]);
}
}
if (nodes.length > 1 || nodes.length && ((range.startOffset === 0 && range.endOffset === 0))) {
this.ensureInsideTableList = true;
return true;
}
else {
this.ensureInsideTableList = false;
return false;
}
};
Table.prototype.getBlockNodesInSelection = function (range) {
var blockTags = [
'DIV', 'SECTION', 'HEADER', 'FOOTER', 'ARTICLE', 'NAV',
'P', 'H1', 'H2', 'H3', 'BLOCKQUOTE', 'LI', 'PRE',
'TD', 'TH', 'FORM', 'FIELDSET', 'LEGEND', 'LABEL', 'TEXTAREA'
];
var blockNodes = new Set();
var treeWalker = this.contentModule.getDocument().createTreeWalker(range.commonAncestorContainer, NodeFilter.SHOW_TEXT, {
acceptNode: function (node) { return (range.intersectsNode(node) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT); }
});
// If selection is collapsed, handle the case explicitly
if (range.collapsed) {
var blockNode = this.getImmediateBlockNode(range.startContainer, blockTags);
if (blockNode) {
blockNodes.add(blockNode);
}
}
else {
while (treeWalker.nextNode()) {
var blockNode = this.getImmediateBlockNode(treeWalker.currentNode, blockTags);
if (blockNode) {
blockNodes.add(blockNode);
}
}
}
return Array.from(blockNodes);
};
Table.prototype.getImmediateBlockNode = function (node, blockTags) {
var parentNode = node.nodeType === Node.TEXT_NODE ? node.parentNode : node;
while (parentNode && parentNode.nodeType === Node.ELEMENT_NODE) {
var element = parentNode;
if (blockTags.indexOf(element.tagName) > -1) {
return element;
}
parentNode = parentNode.parentNode;
}
return null;
};
Table.prototype.removeEmptyTextNodes = function (element) {
var children = element.childNodes;
for (var i = children.length - 1; i >= 0; i--) {
var node = children[i];
if (node.nodeType === Node.TEXT_NODE && node.nodeValue.trim() === '') {
element.removeChild(node);
}
}
};
Table.prototype.tabSelection = function (event, selection, ele) {
var allHeadBodyTRElements = ele.closest('table').querySelectorAll('thead, tbody, tr');
for (var i = 0; i < allHeadBodyTRElements.length; i++) {
this.removeEmptyTextNodes(allHeadBodyTRElements[i]);
}
this.previousTableElement = ele;
var insideList = this.insideList(selection.range);
if ((event.keyCode === 37 || event.keyCode === 39) ||
insideList) {
return;
}
event.preventDefault();
removeClassWithAttr([ele], classes.CLS_TABLE_SEL);
this.removeTableSelection();
if (!event.shiftKey && event.keyCode !== 37) {
var nextElement = (!isNullOrUndefined(ele.nextSibling)) ? ele.nextSibling :
(!isNullOrUndefined(closest(ele, 'tr').nextSibling) ? closest(ele, 'tr').nextSibling.childNodes[0] :
(!isNullOrUndefined(closest(ele, 'table').nextSibling)) ?
(closest(ele, 'table').nextSibling.nodeName.toLowerCase() === 'td') ?
closest(ele, 'table').nextSibling : ele : ele);
if (ele === nextElement && ele.nodeName === 'TH') {
nextElement = closest(ele, 'table').rows[1].cells[0];
}
if (event.keyCode === 39 && ele === nextElement) {
nextElement = closest(ele, 'table').nextSibling;
}
if (nextElement) {
// eslint-disable-next-line
(nextElement.textContent.trim() !== '' && closest(nextElement, 'td')) ?
selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
selection.setSelectionText(this.contentModule.getDocument(), nextElement, nextElement, 0, 0);
}
if (ele === nextElement && event.keyCode !== 39 && nextElement) {
ele.classList.add(classes.CLS_TABLE_SEL);
this.addRow(selection, event, true);
removeClassWithAttr([ele], classes.CLS_TABLE_SEL);
this.removeTableSelection();
nextElement = nextElement.parentElement.nextSibling ? nextElement.parentElement.nextSibling.firstChild :
nextElement.parentElement.firstChild;
// eslint-disable-next-line
(nextElement.textContent.trim() !== '' && closest(nextElement, 'td')) ?
selection.setSelectionNode(this.contentModule.getDocument(), nextElement) :
selection.setSelectionText(this.contentModule.getDocument(), nextElement, nextElement, 0, 0);
}
}
else {
var prevElement = (!isNullOrUndefined(ele.previousSibling)) ? ele.previousSibling :
(!isNullOrUndefined(closest(ele, 'tr').previousSibling) ?
closest(ele, 'tr').previousSibling.childNodes[closest(ele, 'tr').previousSibling.childNodes.length - 1] :
(!isNullOrUndefined(closest(ele, 'table').previousSibling)) ?
(closest(ele, 'table').previousSibling.nodeName.toLowerCase() === 'td') ? closest(ele, 'table').previousSibling :
ele : ele);
if (ele === prevElement && ele.cellIndex === 0 &&
closest(ele, 'table').tHead && ele.nodeName !== 'TH') {
var clsTble = closest(ele, 'table');
prevElement = clsTble.rows[0].cells[clsTble.rows[0].cells.length - 1];
}
if (event.keyCode === 37 && ele === prevElement) {
prevElement = closest(ele, 'table').previousSibling;
}
if (!isNOU(prevElement) && prevElement.firstChild.nodeName === 'TABLE') {
var tableChild = prevElement;
while (!isNOU(tableChild.firstChild) && tableChild.firstChild.nodeName === 'TABLE' && tableChild.firstChild.rows.length > 0 && tableChild.firstChild.rows[0].cells.length > 0) {
tableChild = tableChild.firstChild.rows[0].cells[0];
}
prevElement = tableChild;
}
if (prevElement) {
// eslint-disable-next-line
(prevElement.textContent.trim() !== '' && closest(prevElement, 'td')) ?
selection.setSelectionNode(this.contentModule.getDocument(), prevElement) :
selection.setSelectionText(this.contentModule.getDocument(), prevElement, prevElement, 0, 0);
}
}
};
Table.prototype.tableArrowNavigation = function (event, selection, ele) {
var selText = selection.range.startContainer;
this.previousTableElement = ele;
if ((event.keyCode === 40 && selText.nodeType === 3 && (selText.nextSibling && selText.nextSibling.nodeName === 'BR' ||
selText.parentNode && selText.parentNode.nodeName !== 'TD')) ||
(event.keyCode === 38 && selText.nodeType === 3 && (selText.previousSibling && selText.previousSibling.nodeName === 'BR' ||
selText.parentNode && selText.parentNode.nodeName !== 'TD'))) {
return;
}
event.preventDefault();
removeClassWithAttr([ele], classes.CLS_TABLE_SEL);
this.removeTableSelection();
if (event.keyCode === 40) {
ele = (!isNullOrUndefined(closest(ele, 'tr').nextElementSibling)) ?
closest(ele, 'tr').nextElementSibling.children[ele.cellIndex] :
(closest(ele, 'table').tHead && ele.nodeName === 'TH') ?
closest(ele, 'table').rows[1].cells[ele.cellIndex] :
(!isNullOrUndefined(closest(ele, 'table').nextSibling)) ? closest(ele, 'table').nextSibling :
ele;
}
else {
ele = (!isNullOrUndefined(closest(ele, 'tr').previousElementSibling)) ?
closest(ele, 'tr').previousElementSibling.children[ele.cellIndex] :
(closest(ele, 'table').tHead && ele.nodeName !== 'TH') ?
closest(ele, 'table').tHead.rows[0].cells[ele.cellIndex] :
(!isNullOrUndefined(closest(ele, 'table').previousSibling)) ? closest(ele, 'table').previousSibling :
ele;
}
if (ele) {
selection.setSelectionText(this.contentModule.getDocument(), ele, ele, 0, 0);
}
};
Table.prototype.hideTableQuickToolbar = function () {
if (this.quickToolObj && this.quickToolObj.tableQTBar && document.body.contains(this.quickToolObj.tableQTBar.element)) {
this.quickToolObj.tableQTBar.hidePopup();
}
};
Table.prototype.tableHeader = function (selection, e) {
this.parent.formatter.process(this.parent, e, e.originalEvent, { selection: selection, subCommand: e.item.subCommand });
};
Table.prototype.getAnchorNode = function (element) {
var selectParent = closest(element, 'a');
return (selectParent ? selectParent : element);
};
Table.prototype.editAreaClickHandler = function (e) {
if (this.parent.readonly || !isNOU(closest(e.args.target, '.e-img-caption'))) {
return;
}
var args = e.args;
var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
return;
}
if (this.parent.editorMode === 'HTML' && this.parent.quickToolbarModule && this.parent.quickToolbarModule.tableQTBar) {
this.quickToolObj = this.parent.quickToolbarModule;
var target = args.target;
this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
var isPopupOpen = this.quickToolObj.tableQTBar.element.classList.contains('e-rte-pop');
if (isPopupOpen) {
return;
}
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
var closestTable = closest(target, 'table');
var startNode = this.parent.getRange().startContainer.parentElement;
var endNode = this.parent.getRange().endContainer.parentElement;
var isAnchorEle = this.getAnchorNode(target);
var currentTime = new Date().getTime();
var ismacRightClick = this.parent.userAgentData.getPlatform() === 'macOS' && args.which === 3;
if (target && target.nodeName !== 'A' && isAnchorEle.nodeName !== 'A' && target.nodeName !== 'IMG' && target.nodeName !== 'VIDEO' && !target.classList.contains(classes.CLS_CLICKELEM) &&
target.nodeName !== 'AUDIO' && (startNode === endNode || ismacRightClick) && (target.nodeName === 'TD' || target.nodeName === 'TH' ||
target.nodeName === 'TABLE' || (closestTable && this.parent.contentModule.getEditPanel().contains(closestTable)))
&& !(range.startContainer.nodeType === 3 && !(range.collapsed || ismacRightClick)) &&
currentTime - this.resizeEndTime > 100 && !(ismacRightClick && (range.collapsed && range.startOffset !== 0)) && !(ismacRightClick && range.endContainer.nodeName === '#text')) {
var range_1 = this.parent.formatter.editorManager.nodeSelection.getRange(this.contentModule.getDocument());
this.parent.formatter.editorManager.nodeSelection.save(range_1, this.contentModule.getDocument());
this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
var pageX = void 0;
var pageY = void 0;
if (Browser.isDevice && e.args.touches) {
pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset + this.parent.element.getBoundingClientRect().left +
e.args.changedTouches[0].clientX : e.args.changedTouches[0].pageX;
pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
(!this.parent.inlineMode.enable ? this.parent.toolbarModule.getToolbarHeight() : 0)
+ e.args.changedTouches[0].clientY : e.args.changedTouches[0].pageY;
}
else {
pageX = (this.parent.iframeSettings.enable) ? window.pageXOffset
+ this.parent.element.getBoundingClientRect().left + args.clientX : args.pageX;
pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + this.parent.element.getBoundingClientRect().top +
this.parent.toolbarModule.getToolbarHeight() + args.clientY : args.pageY;
}
this.quickToolObj.tableQTBar.showPopup(pageX, pageY, target);
this.parent.formatter.editorManager.nodeSelection.restore();
}
else {
this.hideTableQuickToolbar();
}
}
};
Table.prototype.tableCellSelect = function (e) {
var target = e.target;
var row = Array.prototype.slice.call(target.parentElement.parentElement.children).indexOf(target.parentElement);
var col = Array.prototype.slice.call(target.parentElement.children).indexOf(target);
var list = this.dlgDiv.querySelectorAll('.e-rte-tablecell');
Arr