@syncfusion/ej2-richtexteditor 27.1.52 → 27.1.57

package/src/rich-text-editor/renderer/image-module.js

@@ -8,7 +8,7 @@ import { Button, CheckBox } from '@syncfusion/ej2-buttons';
 import { RenderType, ImageInputSource } from '../base/enum';
 import { dispatchEvent, parseHtml, hasClass, convertToBlob } from '../base/util';
 import { isIDevice } from '../../common/util';
-import { imageResizeFactor } from '../../common/config';
+import { iframeResizeFactor, imageResizeFactor } from '../../common/config';
 /**
  * `Image` module is used to handle image actions.
  */
@@ -208,8 +208,14 @@ var Image = /** @class */ (function () {
             if (this.parent.formatter.getUndoRedoStack().length === 0) {
                 this.parent.formatter.saveData();
             }
-            this.pageX = this.getPointX(e);
-            this.pageY = this.getPointY(e);
+            if (this.parent.iframeSettings.enable) {
+                this.pageX = e.screenX;
+                this.pageY = e.screenY;
+            }
+            else {
+                this.pageX = this.getPointX(e);
+                this.pageY = this.getPointY(e);
+            }
             e.preventDefault();
             e.stopImmediatePropagation();
             this.resizeBtnInit();
@@ -474,29 +480,50 @@ var Image = /** @class */ (function () {
             return;
         }
         if (this.resizeBtnStat.botRight || this.resizeBtnStat.botLeft || this.resizeBtnStat.topRight || this.resizeBtnStat.topLeft) {
-            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);
+            if (this.parent.iframeSettings.enable) {
+                var resizeFactor = this.getResizeFactor(this.currentResizeHandler);
+                var currentScreenX = e.screenX;
+                var currentScreenY = e.screenY;
+                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 isWidthPrimary = Math.abs(diffX) > Math.abs(diffY);
+        var isWidthPrimary = width > height;
         var dimensions = this.adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary);
         return dimensions;
     };
     Image.prototype.getResizeFactor = function (value) {
+        if (this.parent.iframeSettings.enable) {
+            return iframeResizeFactor[value];
+        }
         return imageResizeFactor[value];
     };
     Image.prototype.findAspectRatio = function (image) {
@@ -568,11 +595,15 @@ var Image = /** @class */ (function () {
         }
     };
     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: e.selectParent[0].parentNode.href, target: target, selectNode: e.selectNode,
+            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;
@@ -659,7 +690,7 @@ var Image = /** @class */ (function () {
             }
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
-            if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
+            if (selectNodeEle && selectNodeEle[0] && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
                 if (!isNOU(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 }
@@ -1586,6 +1617,9 @@ var Image = /** @class */ (function () {
             proxy.uploadUrl.cssClass = (proxy.parent.insertImageSettings.display === 'inline' ?
                 classes.CLS_IMGINLINE : classes.CLS_IMGBREAK);
             proxy.dialogObj.hide({ returnValue: false });
+            if (proxy.dialogObj !== null) {
+                return;
+            }
             proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, proxy.uploadUrl);
             proxy.uploadUrl.url = '';
             if (proxy.contentModule.getEditPanel().querySelector('.e-img-resize')) {
@@ -1616,8 +1650,11 @@ var Image = /** @class */ (function () {
                     maxHeight: proxy.parent.insertImageSettings.maxHeight
                 }
             };
-            proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);
             proxy.dialogObj.hide({ returnValue: false });
+            if (proxy.dialogObj !== null) {
+                return;
+            }
+            proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);
         }
     };
     Image.prototype.imgsizeInput = function (e) {

package/src/rich-text-editor/renderer/link-module.js

@@ -427,6 +427,9 @@ var Link = /** @class */ (function () {
         if (document.body.contains(proxy.dialogObj.element)) {
             this.selfLink.dialogObj.hide({ returnValue: false });
         }
+        if (this.selfLink.dialogObj !== null) {
+            return;
+        }
         if (isIDevice() && proxy.parent.iframeSettings.enable) {
             select('iframe', proxy.parent.element).contentWindow.focus();
         }
@@ -491,11 +494,15 @@ var Link = /** @class */ (function () {
     Link.prototype.openLink = function (e) {
         var selectParentEle = this.getAnchorNode(e.selectParent[0]);
         if (selectParentEle.classList.contains('e-rte-anchor') || selectParentEle.tagName === 'A') {
+            var sanitizedHTML = this.parent.htmlEditorModule.sanitizeHelper(selectParentEle.outerHTML);
+            var tempEle = document.createElement('div');
+            tempEle.innerHTML = sanitizedHTML;
             this.parent.formatter.process(this.parent, e.args, e.args, {
-                url: selectParentEle.href, text: selectParentEle.innerText,
+                url: tempEle.firstChild.href, text: selectParentEle.innerText,
                 target: selectParentEle.target === '' ? '_self' : '_blank', selectNode: e.selectNode,
                 subCommand: e.args.item.subCommand
             });
+            tempEle.remove();
         }
     };
     Link.prototype.getAnchorNode = function (element) {

package/src/rich-text-editor/renderer/slash-menu.js

@@ -9,7 +9,7 @@ var SlashMenu = /** @class */ (function () {
         this.parent = options;
         this.currentDocument = this.parent.element.ownerDocument;
         this.L10n = serviceLocator.getService('rteLocale');
-        this.savedSelection = new NodeSelection();
+        this.savedSelection = new NodeSelection(this.parent.inputElement);
         this.defaultItems = defaultSlashMenuDataModel;
         this.injectibleItems = injectibleSlashMenuDataModel;
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);

package/src/rich-text-editor/renderer/table-module.js

@@ -1419,7 +1419,8 @@ var Table = /** @class */ (function () {
             else {
                 var tableReBox = _this.contentModule.getEditPanel().querySelector('.e-table-box');
                 var tableWidth = parseInt(getComputedStyle(_this.curTable).width, 10);
-                var tableHeight = parseInt(getComputedStyle(_this.curTable).height, 10);
+                var tableHeight = !isNaN(parseInt(_this.curTable.style.height, 10)) ?
+                    parseInt(_this.curTable.style.height, 10) : parseInt(getComputedStyle(_this.curTable).height, 10);
                 var paddingSize = +getComputedStyle(_this.contentModule.getEditPanel()).paddingRight.match(/\d/g).join('');
                 var rteWidth = _this.contentModule.getEditPanel().offsetWidth -
                     (_this.contentModule.getEditPanel().offsetWidth -
@@ -1564,7 +1565,7 @@ var Table = /** @class */ (function () {
                     _this.curTable.style.height = tableHeight + mouseY + 'px';
                     if (!isNOU(tableReBox)) {
                         tableReBox.classList.add('e-rbox-select');
-                        tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
+                        tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + parseInt(getComputedStyle(_this.curTable).height, 10) - 4) +
                             'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
                     }
                     if (_this.curTable.closest('li')) {

package/src/rich-text-editor/renderer/video-module.js

@@ -670,7 +670,7 @@ var Video = /** @class */ (function () {
             this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
-            if (selectNodeEle && (selectNodeEle[0].nodeName === 'VIDEO' || this.isEmbedVidElem(selectNodeEle[0])) && selectNodeEle.length < 1) {
+            if (selectNodeEle && selectNodeEle[0] && (selectNodeEle[0].nodeName === 'VIDEO' || this.isEmbedVidElem(selectNodeEle[0])) && selectNodeEle.length < 1) {
                 if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
                 }
@@ -1446,6 +1446,9 @@ var Video = /** @class */ (function () {
                 maxHeight: proxy.parent.insertVideoSettings.maxHeight
             };
             proxy.dialogObj.hide({ returnValue: false });
+            if (proxy.dialogObj !== null) {
+                return;
+            }
             proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, proxy.uploadUrl);
             proxy.uploadUrl.url = '';
         }
@@ -1472,8 +1475,11 @@ var Video = /** @class */ (function () {
                     maxHeight: proxy.parent.insertVideoSettings.maxHeight
                 }
             };
-            proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);
             proxy.dialogObj.hide({ returnValue: false });
+            if (proxy.dialogObj !== null) {
+                return;
+            }
+            proxy.parent.formatter.process(proxy.parent, this.args, this.args.originalEvent, value);
         }
     };
     /* eslint-disable */

package/src/selection/selection.d.ts

@@ -12,6 +12,8 @@ export declare class NodeSelection {
     endOffset: number;
     startNodeName: string[];
     endNodeName: string[];
+    editableElement: HTMLElement | HTMLBodyElement;
+    constructor(editElement?: HTMLElement | HTMLBodyElement);
     private saveInstance;
     private documentFromRange;
     getRange(docElement: Document): Range;
@@ -231,4 +233,7 @@ export declare class NodeSelection {
 
      */
     setCursorPoint(docElement: Document, element: Element, point: number): void;
+    private isTableOrImageStart;
+    private isTableOrImageEnd;
+    private processedTableImageCursor;
 }

package/src/selection/selection.js

@@ -3,9 +3,10 @@ import { isNullOrUndefined } from '@syncfusion/ej2-base';
  * `Selection` module is used to handle RTE Selections.
  */
 var NodeSelection = /** @class */ (function () {
-    function NodeSelection() {
+    function NodeSelection(editElement) {
         this.startNodeName = [];
         this.endNodeName = [];
+        this.editableElement = editElement;
     }
     NodeSelection.prototype.saveInstance = function (range, body) {
         this.range = range.cloneRange();
@@ -85,6 +86,9 @@ var NodeSelection = /** @class */ (function () {
         return false;
     };
     NodeSelection.prototype.getNode = function (startNode, endNode, nodeCollection) {
+        if (this.editableElement && (!this.editableElement.contains(startNode) || this.editableElement === startNode)) {
+            return null;
+        }
         if (endNode === startNode &&
             (startNode.nodeType === 3 || !startNode.firstChild || nodeCollection.indexOf(startNode.firstChild) !== -1
                 || this.isChildNode(nodeCollection, startNode))) {
@@ -119,6 +123,12 @@ var NodeSelection = /** @class */ (function () {
             || range.startContainer;
         var endNode = range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset]
             || range.endContainer;
+        var tableCursor = this.processedTableImageCursor(range);
+        if (tableCursor.start || tableCursor.end) {
+            if (tableCursor.startName === 'TABLE' || tableCursor.endName === 'TABLE') {
+                return [];
+            }
+        }
         if ((startNode === endNode || (startNode.nodeName === 'BR' && startNode === range.endContainer.childNodes[range.endOffset])) &&
             startNode.childNodes.length === 0) {
             return [startNode];
@@ -438,6 +448,39 @@ var NodeSelection = /** @class */ (function () {
         selection.removeAllRanges();
         selection.addRange(range);
     };
+    NodeSelection.prototype.isTableOrImageStart = function (range) {
+        var customHandlerElements = ['TABLE'];
+        var startContainer = range.startContainer;
+        var startOffset = range.startOffset;
+        var isCursorAtStart = range.collapsed && (startContainer.nodeType === 1) &&
+            startContainer.isContentEditable && startContainer.childNodes[startOffset] &&
+            (customHandlerElements.indexOf(startContainer.childNodes[startOffset].nodeName) > -1);
+        if (isCursorAtStart) {
+            return { start: isCursorAtStart, startNodeName: startContainer.childNodes[startOffset].nodeName };
+        }
+        else {
+            return { start: false, startNodeName: '' };
+        }
+    };
+    NodeSelection.prototype.isTableOrImageEnd = function (range) {
+        var customHandlerElements = ['TABLE'];
+        var startContainer = range.startContainer;
+        var startOffset = range.startOffset;
+        var isCursorAtEnd = range.collapsed && (startContainer.nodeType === 1) &&
+            startContainer.isContentEditable && startContainer.childNodes[startOffset - 1] &&
+            (customHandlerElements.indexOf(startContainer.childNodes[startOffset - 1].nodeName) > -1);
+        if (isCursorAtEnd) {
+            return { end: isCursorAtEnd, endNodeName: startContainer.childNodes[startOffset - 1].nodeName };
+        }
+        else {
+            return { end: false, endNodeName: '' };
+        }
+    };
+    NodeSelection.prototype.processedTableImageCursor = function (range) {
+        var _a = this.isTableOrImageStart(range), start = _a.start, startNodeName = _a.startNodeName;
+        var _b = this.isTableOrImageEnd(range), end = _b.end, endNodeName = _b.endNodeName;
+        return { start: start, startName: startNodeName, end: end, endName: endNodeName };
+    };
     return NodeSelection;
 }());
 export { NodeSelection };