@syncfusion/ej2-richtexteditor
Version:
Essential JS 2 RichTextEditor component
1,004 lines • 126 kB
JavaScript
import { addClass, Browser, closest, createElement, detach, EventHandler, formatUnit, isNullOrUndefined as isNOU, removeClass, select } from '@syncfusion/ej2-base';
import { Button, CheckBox } from '@syncfusion/ej2-buttons';
import { TextBox, Uploader } from '@syncfusion/ej2-inputs';
import { Popup } from '@syncfusion/ej2-popups';
import { imageResizeFactor } from '../../common/config';
import { isIDevice, convertToBlob } from '../../common/util';
import { ImageInputSource } from '../../common/enum';
import * as classes from '../base/classes';
import * as events from '../base/constant';
import { CLS_IMG_FOCUS, CLS_RESIZE, CLS_RTE_DRAG_IMAGE } from '../../common/constant';
import { RenderType } from '../base/enum';
import { dispatchEvent, hasClass, parseHtml } from '../base/util';
import { ImageCommand } from '../../editor-manager/plugin/image';
/**
* `Image` module is used to handle image actions.
*/
var Image = /** @class */ (function () {
function Image(parent, serviceLocator) {
this.isImgUploaded = false;
this.isAllowedTypes = true;
this.pageX = null;
this.pageY = null;
this.deletedImg = [];
this.parent = parent;
this.rteID = parent.element.id;
this.i10n = serviceLocator.getService('rteLocale');
this.rendererFactory = serviceLocator.getService('rendererFactory');
this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
this.addEventListener();
this.drop = this.dragDrop.bind(this);
this.drag = this.dragOver.bind(this);
this.enter = this.dragEnter.bind(this);
this.start = this.dragStart.bind(this);
this.docClick = this.onDocumentClick.bind(this);
this.isDestroyed = false;
}
Image.prototype.addEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.on(events.keyDown, this.onKeyDown, this);
this.parent.on(events.keyUp, this.onKeyUp, this);
this.parent.on(events.insertImage, this.insertImage, this);
this.parent.on(events.showImageDialog, this.showDialog, this);
this.parent.on(events.closeImageDialog, this.closeDialog, this);
this.parent.on(events.windowResize, this.onWindowResize, this);
this.parent.on(events.insertCompleted, this.showImageQuickToolbar, this);
this.parent.on(events.clearDialogObj, this.clearDialogObj, this);
this.parent.on(events.imageToolbarAction, this.onToolbarAction, this);
this.parent.on(events.imageCaption, this.caption, this);
this.parent.on(events.imageDelete, this.deleteImg, this);
this.parent.on(events.imageLink, this.insertImgLink, this);
this.parent.on(events.imageAlt, this.insertAltText, this);
this.parent.on(events.editAreaClick, this.editAreaClickHandler, this);
this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
this.parent.on(events.imageSize, this.imageSize, this);
this.parent.on(events.dropDownSelect, this.alignmentSelect, this);
this.parent.on(events.initialEnd, this.afterRender, this);
this.parent.on(events.dynamicModule, this.afterRender, this);
this.parent.on(events.paste, this.imagePaste, this);
this.parent.on(events.bindCssClass, this.setCssClass, this);
this.parent.on(events.destroy, this.destroy, this);
this.parent.on(events.bindOnEnd, this.bindOnEnd, this);
};
Image.prototype.removeEventListener = function () {
if (this.parent.isDestroyed) {
return;
}
this.parent.off(events.keyDown, this.onKeyDown);
this.parent.off(events.keyUp, this.onKeyUp);
this.parent.off(events.windowResize, this.onWindowResize);
this.parent.off(events.insertImage, this.insertImage);
this.parent.off(events.showImageDialog, this.showDialog);
this.parent.off(events.closeImageDialog, this.closeDialog);
this.parent.off(events.insertCompleted, this.showImageQuickToolbar);
this.parent.off(events.clearDialogObj, this.clearDialogObj);
this.parent.off(events.imageCaption, this.caption);
this.parent.off(events.imageToolbarAction, this.onToolbarAction);
this.parent.off(events.imageDelete, this.deleteImg);
this.parent.off(events.imageLink, this.insertImgLink);
this.parent.off(events.imageAlt, this.insertAltText);
this.parent.off(events.editAreaClick, this.editAreaClickHandler);
this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
this.parent.off(events.imageSize, this.imageSize);
this.parent.off(events.dropDownSelect, this.alignmentSelect);
this.parent.off(events.initialEnd, this.afterRender);
this.parent.off(events.dynamicModule, this.afterRender);
this.parent.off(events.paste, this.imagePaste);
this.parent.off(events.bindCssClass, this.setCssClass);
this.parent.off(events.destroy, this.destroy);
this.parent.off(events.bindOnEnd, this.bindOnEnd);
var dropElement = this.parent.iframeSettings.enable ? this.parent.inputElement.ownerDocument
: this.parent.inputElement;
dropElement.removeEventListener('drop', this.drop, true);
dropElement.removeEventListener('dragstart', this.drag, true);
dropElement.removeEventListener('dragenter', this.enter, true);
dropElement.removeEventListener('dragover', this.start, true);
this.drop = null;
this.drag = null;
this.enter = null;
this.start = null;
if (!isNOU(this.contentModule)) {
EventHandler.remove(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.imageClick);
this.parent.formatter.editorManager.observer.off(events.checkUndo, this.undoStack);
if (this.parent.insertImageSettings.resize) {
EventHandler.remove(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart);
this.parent.element.ownerDocument.removeEventListener('mousedown', this.docClick);
this.docClick = null;
EventHandler.remove(this.contentModule.getEditPanel(), 'cut', this.onCutHandler);
EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
}
}
};
Image.prototype.bindOnEnd = function () {
if (this.parent.formatter.editorManager && !this.parent.formatter.editorManager.imgObj) {
this.parent.formatter.editorManager.imgObj = new ImageCommand(this.parent.formatter.editorManager);
}
};
Image.prototype.updateCss = function (currentObj, e) {
if (currentObj && e.cssClass) {
if (isNOU(e.oldCssClass)) {
currentObj.setProperties({ cssClass: (currentObj.cssClass + ' ' + e.cssClass).trim() });
}
else {
currentObj.setProperties({ cssClass: (currentObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
}
}
};
// eslint-disable-next-line @typescript-eslint/tslint/config
Image.prototype.setCssClass = function (e) {
if (this.popupObj && e.cssClass) {
if (isNOU(e.oldCssClass)) {
addClass([this.popupObj.element], e.cssClass);
}
else {
removeClass([this.popupObj.element], e.oldCssClass);
addClass([this.popupObj.element], e.cssClass);
}
}
this.updateCss(this.checkBoxObj, e);
this.updateCss(this.widthNum, e);
this.updateCss(this.heightNum, e);
this.updateCss(this.uploadObj, e);
this.updateCss(this.dialogObj, e);
};
Image.prototype.onIframeMouseDown = function (e) {
var target = e.target;
if (this.dialogObj) {
this.dialogObj.hide({ returnValue: true });
}
if (!(!isNOU(this.parent.currentTarget) && this.parent.currentTarget.nodeName === 'IMG') && (this.imgEle && this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv))) {
this.cancelResizeAction();
}
if (this.contentModule.getEditPanel().querySelector('.e-img-resize') && (this.parent.currentTarget.nodeName === 'IMG')) {
if (!isNOU(this.prevSelectedImgEle) && this.prevSelectedImgEle !== target) {
this.prevSelectedImgEle.style.outline = '';
}
}
};
Image.prototype.afterRender = function () {
this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
EventHandler.add(this.contentModule.getEditPanel(), Browser.touchEndEvent, this.imageClick, this);
if (this.parent.insertImageSettings.resize) {
EventHandler.add(this.parent.contentModule.getEditPanel(), Browser.touchStartEvent, this.resizeStart, this);
this.parent.element.ownerDocument.addEventListener('mousedown', this.docClick);
EventHandler.add(this.contentModule.getEditPanel(), 'cut', this.onCutHandler, this);
}
var dropElement = this.parent.iframeSettings.enable ? this.parent.inputElement.ownerDocument :
this.parent.inputElement;
dropElement.addEventListener('drop', this.drop, true);
dropElement.addEventListener('dragstart', this.drag, true);
dropElement.addEventListener('dragenter', this.enter, true);
dropElement.addEventListener('dragover', this.start, true);
};
Image.prototype.undoStack = function (args) {
if ((args.subCommand.toLowerCase() === 'undo' || args.subCommand.toLowerCase() === 'redo') && this.parent.editorMode === 'HTML') {
for (var i = 0; i < this.parent.formatter.getUndoRedoStack().length; i++) {
var temp = this.parent.createElement('div');
var contentElem = this.parent.formatter.getUndoRedoStack()[i].text;
temp.appendChild(contentElem.cloneNode(true));
var img = temp.querySelectorAll('img');
if (temp.querySelector('.e-img-resize') && img.length > 0) {
for (var j = 0; j < img.length; j++) {
img[j].style.outline = '';
}
detach(temp.querySelector('.e-img-resize'));
var clonedElement = temp.cloneNode(true);
var fragment = document.createDocumentFragment();
while (clonedElement.firstChild) {
fragment.appendChild(clonedElement.firstChild);
}
this.parent.formatter.getUndoRedoStack()[i].text = fragment;
}
}
}
};
Image.prototype.resizeEnd = function (e) {
this.resizeBtnInit();
if (this.imgEle.parentElement) {
this.imgEle.parentElement.style.cursor = 'auto';
}
if (Browser.isDevice) {
removeClass([e.target.parentElement], 'e-mob-span');
}
var args = { event: e, requestType: 'images' };
this.parent.trigger(events.resizeStop, args);
this.parent.formatter.editorManager.observer.on(events.checkUndo, this.undoStack, this);
this.parent.formatter.saveData();
EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);
};
Image.prototype.resizeStart = function (e, ele) {
var _this = this;
if (this.parent.readonly) {
return;
}
var target = ele ? ele : e.target;
this.prevSelectedImgEle = this.imgEle;
if (target.tagName === 'IMG') {
this.parent.preventDefaultResize(e);
var img = target;
if (this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {
detach(this.imgResizeDiv);
}
this.imageResize(img);
}
if (target.classList.contains('e-rte-imageboxmark')) {
if (this.parent.formatter.getUndoRedoStack().length === 0) {
this.parent.formatter.saveData();
}
this.pageX = this.getPointX(e);
this.pageY = this.getPointY(e);
e.preventDefault();
e.stopImmediatePropagation();
this.resizeBtnInit();
if (this.quickToolObj) {
this.quickToolObj.imageQTBar.hidePopup();
}
var handlers = ['topLeft', 'topRight', 'botLeft', 'botRight'];
for (var i = 0; i < handlers.length; i++) {
var handler = handlers[i];
if (target.classList.contains('e-rte-' + handler)) {
this.resizeBtnStat[handler] = true;
this.currentResizeHandler = handler;
this.aspectRatio = this.findAspectRatio(this.imgEle);
break; // Exit the loop once a match is found
}
}
if (Browser.isDevice && this.contentModule.getEditPanel().contains(this.imgResizeDiv) &&
!this.imgResizeDiv.classList.contains('e-mob-span')) {
addClass([this.imgResizeDiv], 'e-mob-span');
}
else {
var args = { event: e, requestType: 'images' };
this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {
if (resizeStartArgs.cancel) {
_this.cancelResizeAction();
}
});
}
EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);
}
};
Image.prototype.imageClick = function (e) {
if (Browser.isDevice) {
if ((e.target.tagName === 'IMG' &&
e.target.parentElement.tagName === 'A') ||
(e.target.tagName === 'IMG')) {
this.contentModule.getEditPanel().setAttribute('contenteditable', 'false');
e.target.focus();
}
else {
if (!this.parent.readonly) {
this.contentModule.getEditPanel().setAttribute('contenteditable', 'true');
}
}
}
if (e.target.tagName === 'IMG' &&
e.target.parentElement.tagName === 'A') {
e.preventDefault();
}
};
Image.prototype.onCutHandler = function () {
if (this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {
this.cancelResizeAction();
}
};
Image.prototype.imageResize = function (e) {
this.resizeBtnInit();
this.imgEle = e;
addClass([this.imgEle], 'e-resize');
this.imgResizeDiv = this.parent.createElement('span', { className: 'e-img-resize' + this.parent.getCssClass(true), id: this.rteID + '_imgResize' });
this.imgResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-imageboxmark e-rte-topLeft' + this.parent.getCssClass(true), styles: 'cursor: nwse-resize'
}));
this.imgResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-imageboxmark e-rte-topRight' + this.parent.getCssClass(true), styles: 'cursor: nesw-resize'
}));
this.imgResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-imageboxmark e-rte-botLeft' + this.parent.getCssClass(true), styles: 'cursor: nesw-resize'
}));
this.imgResizeDiv.appendChild(this.parent.createElement('span', {
className: 'e-rte-imageboxmark e-rte-botRight' + this.parent.getCssClass(true), styles: 'cursor: nwse-resize'
}));
if (Browser.isDevice) {
addClass([this.imgResizeDiv], 'e-mob-rte');
}
e.style.outline = '2px solid #4a90e2';
this.imgResizePos(e, this.imgResizeDiv);
this.resizeImgDupPos(e);
this.contentModule.getEditPanel().appendChild(this.imgResizeDiv);
if (this.parent.element.style.height === 'auto') {
this.imgResizePos(e, this.imgResizeDiv);
}
};
Image.prototype.getPointX = function (e) {
if (this.parent.iframeSettings.enable) {
if (e.touches && e.touches.length) {
return e.touches[0].screenX;
}
else {
return e.screenX;
}
}
else {
if (e.touches && e.touches.length) {
return e.touches[0].pageX;
}
else {
return e.pageX;
}
}
};
Image.prototype.getPointY = function (e) {
if (this.parent.iframeSettings.enable) {
if (e.touches && e.touches.length) {
return e.touches[0].screenY;
}
else {
return e.screenY;
}
}
else {
if (e.touches && e.touches.length) {
return e.touches[0].pageY;
}
else {
return e.pageY;
}
}
};
Image.prototype.imgResizePos = function (e, imgResizeDiv) {
var pos = this.calcPos(e);
var top = pos.top;
var left = pos.left;
var imgWid = e.getBoundingClientRect().width;
var imgHgt = e.getBoundingClientRect().height;
var borWid = (Browser.isDevice) ? (4 * parseInt((e.style.outline.slice(-3)), 10)) + 2 :
(2 * parseInt((e.style.outline.slice(-3)), 10)) + 2; //span border width + image outline width
var devWid = ((Browser.isDevice) ? 0 : 2); // span border width
imgResizeDiv.querySelector('.e-rte-botLeft').style.left = (left - borWid) + 'px';
imgResizeDiv.querySelector('.e-rte-botLeft').style.top = ((imgHgt - borWid) + top) + 'px';
imgResizeDiv.querySelector('.e-rte-botRight').style.left = ((imgWid - (borWid - devWid)) + left) + 'px';
imgResizeDiv.querySelector('.e-rte-botRight').style.top = ((imgHgt - borWid) + top) + 'px';
imgResizeDiv.querySelector('.e-rte-topRight').style.left = ((imgWid - (borWid - devWid)) + left) + 'px';
imgResizeDiv.querySelector('.e-rte-topRight').style.top = (top - (borWid)) + 'px';
imgResizeDiv.querySelector('.e-rte-topLeft').style.left = (left - borWid) + 'px';
imgResizeDiv.querySelector('.e-rte-topLeft').style.top = (top - borWid) + 'px';
};
Image.prototype.calcPos = function (elem) {
var ignoreOffset = ['TD', 'TH', 'TABLE', 'A'];
var parentOffset = { top: 0, left: 0 };
var elementOffset;
var doc = elem.ownerDocument;
var offsetParent = ((elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption') ||
ignoreOffset.indexOf(elem.offsetParent.tagName) > -1)) ?
closest(elem, '#' + this.parent.getID() + '_rte-edit-view') : elem.offsetParent) || doc.documentElement;
while (offsetParent &&
(offsetParent === doc.body || offsetParent === doc.documentElement) &&
offsetParent.style.position === 'static') {
offsetParent = offsetParent.parentNode;
}
if (offsetParent && offsetParent !== elem && offsetParent.nodeType === 1) {
parentOffset = offsetParent.getBoundingClientRect();
}
if (elem.offsetParent && (elem.offsetParent.classList.contains('e-img-caption'))) {
elementOffset = elem.getBoundingClientRect();
return {
top: elementOffset.top - parentOffset.top,
left: elementOffset.left - parentOffset.left
};
}
else {
return {
top: elem.offsetTop,
left: elem.offsetLeft
};
}
};
Image.prototype.setAspectRatio = function (img, expectedX, expectedY) {
if (isNOU(img.width)) {
return;
}
var width = img.width;
var height = img.height;
var sameHeightWidth = (width === height);
var factor = this.parent.insertImageSettings.resizeByPercent ? '%' : 'px';
var emptyStyleDimension = (img.style.width === '' && img.style.height === '');
if (!sameHeightWidth && !emptyStyleDimension) {
if (img.style.width !== '' && img.style.height !== '') {
if (this.parent.insertImageSettings.resizeByPercent) {
this.setImageWidth(img, expectedX, factor);
this.removeImageHeight(img);
}
else {
this.setImageWidth(img, expectedX, factor);
this.setImageHeight(img, expectedY, factor);
}
}
else if (img.style.width !== '') {
if (this.parent.insertImageSettings.resizeByPercent) {
this.setImageWidth(img, expectedX, factor);
this.removeImageHeight(img);
}
else {
this.setImageWidth(img, expectedX, factor);
}
}
else if (img.style.height !== '') {
if (this.parent.insertImageSettings.resizeByPercent) {
this.setImageWidth(img, expectedX, factor);
this.removeImageHeight(img);
}
else {
this.setImageHeight(img, expectedY, factor);
}
}
}
else {
this.setImageWidth(img, expectedX, factor);
if (this.parent.insertImageSettings.resizeByPercent) {
this.removeImageHeight(img);
}
else {
this.setImageHeight(img, expectedY, factor);
}
}
};
Image.prototype.setImageWidth = function (img, value, suffix) {
img.style.width = this.getImageDimension(value, img) + suffix;
if (!this.parent.insertImageSettings.resizeByPercent) {
img.setAttribute('width', value.toString());
}
};
Image.prototype.setImageHeight = function (img, value, suffix) {
img.style.height = this.getImageDimension(value, img) + suffix;
if (!this.parent.insertImageSettings.resizeByPercent) {
img.setAttribute('height', value.toString());
}
};
Image.prototype.removeImageHeight = function (img) {
img.style.height = '';
img.removeAttribute('height');
};
Image.prototype.getImageDimension = function (value, img) {
if (this.parent.insertImageSettings.resizeByPercent) {
var rootElem = img.parentElement;
return this.pixToPerc(value, rootElem);
}
else {
return value;
}
};
Image.prototype.adjustDimensionsByAspectRatio = function (width, height, aspectRatio) {
height = Math.round(width / aspectRatio);
width = Math.round(height * aspectRatio);
return { width: width, height: height };
};
Image.prototype.pixToPerc = function (expected, parentEle) {
return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
};
Image.prototype.imgDupMouseMove = function (width, height, e) {
var _this = this;
var args = { event: e, requestType: 'images' };
this.parent.trigger(events.onResize, args, function (resizingArgs) {
if (resizingArgs.cancel) {
_this.cancelResizeAction();
}
else {
if ((parseInt(_this.parent.insertImageSettings.minWidth, 10) >= parseInt(width, 10) ||
(parseInt(_this.parent.getInsertImgMaxWidth(), 10) <= parseInt(width, 10) &&
isNOU(_this.imgEle.style.width)))) {
return;
}
if (!_this.parent.insertImageSettings.resizeByPercent &&
(parseInt(_this.parent.insertImageSettings.minHeight, 10) >= parseInt(height, 10) ||
parseInt(_this.parent.insertImageSettings.maxHeight, 10) <= parseInt(height, 10))) {
return;
}
_this.imgEle.parentElement.style.cursor = 'pointer';
_this.setAspectRatio(_this.imgEle, parseInt(width, 10), parseInt(height, 10));
_this.resizeImgDupPos(_this.imgEle);
_this.imgResizePos(_this.imgEle, _this.imgResizeDiv);
}
});
};
Image.prototype.resizing = function (e) {
if (!this.parent) {
this.cancelResizeAction();
return;
}
if (this.resizeBtnStat.botRight || this.resizeBtnStat.botLeft || this.resizeBtnStat.topRight || this.resizeBtnStat.topLeft) {
if (this.parent.iframeSettings.enable) {
var resizeFactor = this.getResizeFactor(this.currentResizeHandler);
var currentScreenX = this.getPointX(e);
var currentScreenY = this.getPointY(e);
var currentWidth = this.imgEle.clientWidth;
var currentHeight = this.imgEle.clientHeight;
var deltaX = currentScreenX - this.pageX;
var deltaY = currentScreenY - this.pageY;
var width = deltaX * resizeFactor[0] + currentWidth;
var height = deltaY * resizeFactor[1] + currentHeight;
var dimensions = this.adjustDimensions(width, height, deltaX, deltaY, this.aspectRatio);
this.pageX = currentScreenX;
this.pageY = currentScreenY;
this.imgDupMouseMove(dimensions.width + 'px', dimensions.height + 'px', e);
this.parent.autoResize();
}
else {
var pageX = this.getPointX(e);
var pageY = this.getPointY(e);
var resizeFactor = this.getResizeFactor(this.currentResizeHandler);
var diffX = (pageX - this.pageX);
var diffY = (pageY - this.pageY);
var currentWidth = this.imgEle.clientWidth;
var currentHeight = this.imgEle.clientHeight;
var width = diffX * resizeFactor[0] + currentWidth;
var height = diffY * resizeFactor[1] + currentHeight;
var dimensions = this.adjustDimensions(width, height, diffX, diffY, this.aspectRatio);
this.pageX = pageX;
this.pageY = pageY;
this.imgDupMouseMove(dimensions.width + 'px', dimensions.height + 'px', e);
}
}
};
Image.prototype.adjustDimensions = function (width, height, diffX, diffY, aspectRatio) {
width = (width < 16) ? 16 : width;
height = (height < 16) ? 16 : height;
var dimensions = this.adjustDimensionsByAspectRatio(width, height, aspectRatio);
return dimensions;
};
Image.prototype.getResizeFactor = function (value) {
return imageResizeFactor[value];
};
Image.prototype.findAspectRatio = function (image) {
return image.clientWidth / image.clientHeight;
};
Image.prototype.cancelResizeAction = function () {
EventHandler.remove(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing);
EventHandler.remove(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd);
if (this.imgEle && this.imgResizeDiv && this.contentModule.getEditPanel().contains(this.imgResizeDiv)) {
detach(this.imgResizeDiv);
this.imgEle.style.outline = '';
this.imgResizeDiv = null;
this.pageX = null;
this.pageY = null;
this.currentResizeHandler = null;
this.aspectRatio = null;
}
};
Image.prototype.resizeImgDupPos = function (e) {
this.imgDupPos = {
width: (e.style.width !== '' && (this.parent.insertImageSettings &&
!this.parent.insertImageSettings.resizeByPercent)) ? this.imgEle.style.width : e.width + 'px',
height: (e.style.height !== '') ? this.imgEle.style.height : e.height + 'px'
};
};
Image.prototype.resizeBtnInit = function () {
this.aspectRatio = null;
this.currentResizeHandler = null;
return this.resizeBtnStat = { botLeft: false, botRight: false, topRight: false, topLeft: false };
};
Image.prototype.onToolbarAction = function (args) {
if (isIDevice()) {
this.parent.notify(events.selectionRestore, {});
}
var item = args.args.item;
switch (item.subCommand) {
case 'Replace':
if (this.parent.fileManagerSettings.enable) {
this.parent.notify(events.renderFileManager, args);
}
else {
this.parent.notify(events.insertImage, args);
}
break;
case 'Caption':
this.parent.notify(events.imageCaption, args);
break;
case 'InsertLink':
this.parent.notify(events.imageLink, args);
break;
case 'AltText':
this.parent.notify(events.imageAlt, args);
break;
case 'Remove':
this.parent.notify(events.imageDelete, args);
break;
case 'Dimension':
this.parent.notify(events.imageSize, args);
break;
case 'OpenImageLink':
this.openImgLink(args);
break;
case 'EditImageLink':
this.editImgLink(args);
break;
case 'RemoveImageLink':
this.removeImgLink(args);
break;
}
};
Image.prototype.openImgLink = function (e) {
var sanitizedHTML = this.parent.htmlEditorModule.sanitizeHelper(e.selectParent[0].parentNode.outerHTML);
var tempEle = document.createElement('div');
tempEle.innerHTML = sanitizedHTML;
var target = e.selectParent[0].parentNode.target === '' ? '_self' : '_blank';
this.parent.formatter.process(this.parent, e.args, e.args, {
url: tempEle.firstChild.href, target: target, selectNode: e.selectNode,
subCommand: e.args.item.subCommand
});
tempEle.remove();
};
Image.prototype.editImgLink = function (e) {
var selectParentEle = e.selectParent[0].parentNode;
var linkUpdate = this.i10n.getConstant('dialogUpdate');
var inputDetails = {
url: selectParentEle.href, target: selectParentEle.target,
header: 'Edit Link', btnText: linkUpdate
};
this.insertImgLink(e, inputDetails);
};
Image.prototype.removeImgLink = function (e) {
if (Browser.isIE) {
this.contentModule.getEditPanel().focus();
}
e.selection.restore();
var isCapLink = (this.contentModule.getEditPanel().contains(this.captionEle) && select('a', this.captionEle)) ?
true : false;
var selectParent = isCapLink ? [this.captionEle] : [e.selectNode[0].parentElement];
this.parent.formatter.process(this.parent, e.args, e.args, {
insertElement: e.selectNode[0], selectParent: selectParent, selection: e.selection,
subCommand: e.args.item.subCommand
});
if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {
this.quickToolObj.imageQTBar.hidePopup();
if (!isNOU(e.selectParent)) {
removeClass([e.selectParent[0]], 'e-img-focus');
}
}
if (isCapLink) {
select('.e-img-inner', this.captionEle).focus();
}
};
Image.prototype.onKeyDown = function (event) {
var originalEvent = event.args;
var range;
var save;
var selectNodeEle;
var selectParentEle;
this.deletedImg = [];
var isCursor;
var keyCodeValues = [27, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123,
44, 45, 9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93, 144, 145, 182, 183];
if (this.parent.editorMode === 'HTML') {
range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
isCursor = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
}
if (!isCursor && this.parent.editorMode === 'HTML' && keyCodeValues.indexOf(originalEvent.which) < 0) {
var nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
for (var i = 0; i < nodes.length; i++) {
if (nodes[i].nodeName === 'IMG') {
this.deletedImg.push(nodes[i]);
}
}
}
if (this.parent.editorMode === 'HTML' && ((originalEvent.which === 8 && originalEvent.code === 'Backspace') ||
(originalEvent.which === 46 && originalEvent.code === 'Delete'))) {
var isCursor_1 = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
if ((originalEvent.which === 8 && originalEvent.code === 'Backspace' && isCursor_1)) {
this.checkImageBack(range);
}
else if ((originalEvent.which === 46 && originalEvent.code === 'Delete' && isCursor_1)) {
this.checkImageDel(range);
}
}
if (!isNOU(this.parent.formatter.editorManager.nodeSelection) &&
originalEvent.code !== 'KeyK') {
range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
if (!originalEvent.ctrlKey && originalEvent.key && (originalEvent.key.length === 1 || originalEvent.action === 'enter') &&
(!isNOU(selectParentEle[0]) && selectParentEle[0].tagName === 'IMG') && selectParentEle[0].parentElement) {
if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
this.removeResizeEle();
}
removeClass([selectParentEle[0]], 'e-img-focus');
if (this.quickToolObj && this.quickToolObj.imageQTBar) {
this.quickToolObj.imageQTBar.hidePopup();
}
}
}
if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {
if (this.parent.editorMode !== 'Markdown') {
this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
}
}
if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
if (selectNodeEle && selectNodeEle[0] && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
// eslint-disable-next-line max-len
if (!isNOU(this.parent.formatter.editorManager.nodeSelection)) {
save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
}
originalEvent.preventDefault();
var event_1 = {
selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
args: {
item: { command: 'Images', subCommand: 'Remove' },
originalEvent: originalEvent
}
};
this.deleteImg(event_1, originalEvent.keyCode);
}
if (this.parent.contentModule.getEditPanel().querySelector('.e-img-resize')) {
this.removeResizeEle();
}
}
if (originalEvent.code === 'Backspace') {
originalEvent.action = 'backspace';
}
switch (originalEvent.action) {
case 'escape':
if (!isNOU(this.dialogObj)) {
this.dialogObj.close();
}
break;
case 'backspace':
case 'delete':
if (this.parent.editorMode !== 'Markdown') {
if (range.startContainer.nodeType === 3) {
if (originalEvent.code === 'Backspace') {
if (range.startContainer.previousElementSibling && range.startOffset === 0 &&
range.startContainer.previousElementSibling.classList.contains(classes.CLS_CAPTION) &&
range.startContainer.previousElementSibling.classList.contains(classes.CLS_CAPINLINE)) {
detach(range.startContainer.previousElementSibling);
}
}
else {
if (range.startContainer.nextElementSibling &&
range.endContainer.textContent.length === range.endOffset &&
range.startContainer.nextElementSibling.classList.contains(classes.CLS_CAPTION) &&
range.startContainer.nextElementSibling.classList.contains(classes.CLS_CAPINLINE)) {
detach(range.startContainer.nextElementSibling);
}
}
}
else if (range.startContainer.nodeType === 1) {
if (range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE)) {
detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_CAPINLINE));
}
else if (range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK)) {
detach(range.startContainer.querySelector('.' + classes.CLS_CAPTION + '.' + classes.CLS_IMGBREAK));
}
else if (range.startContainer.classList.contains('e-img-wrap') && closest(range.startContainer, '.' + classes.CLS_CAPTION)) {
var parentElem = range.startContainer.parentElement.parentElement;
detach(closest(range.startContainer, '.' + classes.CLS_CAPTION));
if (parentElem && parentElem.textContent.trim() === '') {
var brElem = this.parent.createElement('br');
brElem.classList.add('e-rte-image-remove-focus');
parentElem.appendChild(brElem);
}
}
}
}
break;
case 'insert-image':
// eslint-disable-next-line max-len
if (!isNOU(this.parent.formatter.editorManager.nodeSelection)) {
save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
}
this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
originalEvent.preventDefault();
break;
}
if (originalEvent.ctrlKey && originalEvent.key === 'a') {
this.handleSelectAll();
}
};
Image.prototype.handleSelectAll = function () {
this.cancelResizeAction();
var imgFocusNodes = this.parent.inputElement.querySelectorAll('.' + CLS_IMG_FOCUS);
removeClass(imgFocusNodes, CLS_IMG_FOCUS);
};
Image.prototype.openDialog = function (isInternal, event, selection, ele, parentEle) {
var range;
var save;
var selectNodeEle;
var selectParentEle;
if (!isInternal && !isNOU(this.parent.formatter.editorManager.nodeSelection)) {
range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
selectParentEle = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
}
else {
save = selection;
selectNodeEle = ele;
selectParentEle = parentEle;
}
if (this.parent.editorMode === 'HTML') {
this.insertImage({
args: {
item: { command: 'Images', subCommand: 'Image' },
originalEvent: event,
name: !isInternal ? 'showDialog' : null
},
selectNode: selectNodeEle,
selection: save,
selectParent: selectParentEle
});
}
else {
this.insertImage({
args: {
item: { command: 'Images', subCommand: 'Image' },
originalEvent: event,
name: !isInternal ? 'showDialog' : null
},
member: 'image',
text: this.parent.formatter.editorManager.markdownSelection.getSelectedText(this.parent.contentModule.getEditPanel()),
module: 'Markdown',
name: 'insertImage'
});
}
};
Image.prototype.showDialog = function (args) {
if (!isNOU(args.originalEvent)) {
this.openDialog(false, args.originalEvent);
}
else {
this.openDialog(false);
}
this.setCssClass({ cssClass: this.parent.getCssClass() });
};
Image.prototype.closeDialog = function () {
if (this.dialogObj) {
this.dialogObj.hide({ returnValue: true });
}
};
Image.prototype.onKeyUp = function () {
if (!isNOU(this.deletedImg) && this.deletedImg.length > 0) {
var deleteImages = Array.from(this.deletedImg);
for (var i = deleteImages.length - 1; i >= 0; i--) {
var args = {
element: this.deletedImg[i],
src: this.deletedImg[i].getAttribute('src')
};
this.parent.trigger(events.afterImageDelete, args);
this.deletedImg.splice(i, 1);
}
}
};
Image.prototype.checkImageBack = function (range) {
if (range.startContainer.nodeName === '#text' && range.startOffset === 0 &&
!isNOU(range.startContainer.previousSibling) && range.startContainer.previousSibling.nodeName === 'IMG') {
this.deletedImg.push(range.startContainer.previousSibling);
}
else if (range.startContainer.nodeName !== '#text' && !isNOU(range.startContainer.childNodes[range.startOffset - 1]) &&
range.startContainer.childNodes[range.startOffset - 1].nodeName === 'IMG') {
this.deletedImg.push(range.startContainer.childNodes[range.startOffset - 1]);
}
};
Image.prototype.checkImageDel = function (range) {
if (range.startContainer.nodeName === '#text' && range.startOffset === range.startContainer.textContent.length &&
!isNOU(range.startContainer.nextSibling) && range.startContainer.nextSibling.nodeName === 'IMG') {
this.deletedImg.push(range.startContainer.nextSibling);
}
else if (range.startContainer.nodeName !== '#text' && !isNOU(range.startContainer.childNodes[range.startOffset]) &&
range.startContainer.childNodes[range.startOffset].nodeName === 'IMG') {
this.deletedImg.push(range.startContainer.childNodes[range.startOffset]);
}
};
Image.prototype.alignmentSelect = function (e) {
var item = e.item;
if (!document.body.contains(document.body.querySelector('.e-rte-quick-toolbar')) || item.command !== 'Images') {
return;
}
var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
var selectNodeEle = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
selectNodeEle = (selectNodeEle[0].nodeName === 'IMG') ? selectNodeEle : [this.imgEle];
var args = { args: e, selectNode: selectNodeEle };
if (this.parent.formatter.getUndoRedoStack().length === 0) {
this.parent.formatter.saveData();
}
switch (item.subCommand) {
case 'JustifyLeft':
this.alignImage(args);
break;
case 'JustifyCenter':
this.alignImage(args);
break;
case 'JustifyRight':
this.alignImage(args);
break;
case 'Inline':
this.inline(args);
break;
case 'Break':
this.break(args);
break;
}
if (this.quickToolObj && document.body.contains(this.quickToolObj.imageQTBar.element)) {
this.quickToolObj.imageQTBar.hidePopup();
removeClass([selectNodeEle[0]], 'e-img-focus');
}
this.cancelResizeAction();
};
Image.prototype.showImageQuickToolbar = function (e) {
var _this = this;
if ((e.type !== 'Images' && e.type !== 'Replace') || isNOU(this.parent.quickToolbarModule)
|| isNOU(this.parent.quickToolbarModule.imageQTBar) || isNOU(e.args)) {
return;
}
this.quickToolObj = this.parent.quickToolbarModule;
var target = e.elements;
[].forEach.call(e.elements, function (element, index) {
if (index === 0) {
target = element;
}
});
var imageQuickToolbarElem = this.quickToolObj.imageQTBar.quickTBarObj.toolbarObj.element;
if (!isNOU(imageQuickToolbarElem.querySelector('.e-insert-link'))) {
if (target.closest('a')) {
imageQuickToolbarElem.classList.add('e-link-enabled');
}
else if (imageQuickToolbarElem.classList.contains('e-link-enabled')) {
imageQuickToolbarElem.classList.remove('e-link-enabled');
}
}
if (target.nodeName === 'IMG') {
addClass([target], ['e-img-focus']);
}
if (this.parent.quickToolbarModule.imageQTBar) {
if (e.isNotify) {
this.imageQTPopupTime = setTimeout(function () {
_this.parent.formatter.editorManager.nodeSelection.Clear(_this.contentModule.getDocument());
_this.parent.formatter.editorManager.nodeSelection.setSelectionContents(_this.contentModule.getDocument(), target);
_this.quickToolObj.imageQTBar.showPopup(target, e.args);
if (_this.parent.insertImageSettings.resize === true) {
_this.resizeStart(e.args, target);
}
}, this.parent.element.dataset.rteUnitTesting === 'true' ? 0 : 400);
}
else {
this.quickToolObj.imageQTBar.showPopup(target, e.args);
}
}
};
Image.prototype.hideImageQuickToolbar = function () {
if (!isNOU(this.contentModule.getEditPanel().querySelector('.e-img-focus'))) {
removeClass([this.contentModule.getEditPanel().querySelector('.e-img-focus')], 'e-img-focus');
if (this.quickToolObj && this.quickToolObj.imageQTBar && document.body.contains(this.quickToolObj.imageQTBar.element)) {
this.quickToolObj.imageQTBar.hidePopup();
}
}
};
Image.prototype.editAreaClickHandler = function (e) {
if (this.parent.readonly) {
this.hideImageQuickToolbar();
return;
}
var args = e.args;
var showOnRightClick = this.parent.quickToolbarSettings.showOnRightClick;
if (args.which === 2 || (showOnRightClick && args.which === 1) || (!showOnRightClick && args.which === 3)) {
if ((showOnRightClick && args.which === 1) && !isNOU(args.target) &&
args.target.tagName === 'IMG') {
this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), args.target);
}
return;
}
if (this.parent.editorMode === 'HTML' && this.parent.quickToolbarModule && this.parent.quickToolbarModule.imageQTBar) {
this.quickToolObj = this.parent.quickToolbarModule;
var target = args.target;
this.contentModule = this.rendererFactory.getRenderer(RenderType.Content);
if (target.nodeName === 'IMG' && this.parent.quickToolbarModule) {
this.parent.formatter.editorManager.nodeSelection.Clear(this.contentModule.getDocument());
this.parent.formatter.editorManager.nodeSelection.setSelectionContents(this.contentModule.getDocument(), target);
if (isIDevice()) {
this.parent.notify(events.selectionSave, e);
}
addClass([target], 'e-img-focus');
this.showImageQuickToo