@syncfusion/ej2-richtexteditor 27.1.51 → 27.1.55

package/src/rich-text-editor/actions/resize.js

@@ -9,6 +9,8 @@ var Resize = /** @class */ (function () {
         this.parent = parent;
         this.addEventListener();
         this.isDestroyed = false;
+        this.isResizing = false;
+        this.iframeMouseUpBoundFn = this.iframeMouseUp.bind(this);
     }
     Resize.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {
@@ -28,6 +30,7 @@ var Resize = /** @class */ (function () {
         this.parent.rootContainer.classList.add('e-resize-enabled');
         if (this.parent.iframeSettings.enable) {
             this.parent.inputElement.classList.add('e-resize-enabled');
+            this.parent.contentModule.getDocument().addEventListener('mouseup', this.iframeMouseUpBoundFn);
         }
         this.touchStartEvent = (Browser.info.name === 'msie') ? 'pointerdown' : 'touchstart';
         EventHandler.add(this.resizer, 'mousedown', this.resizeStart, this);
@@ -35,6 +38,7 @@ var Resize = /** @class */ (function () {
     };
     Resize.prototype.resizeStart = function (e) {
         var _this = this;
+        this.isResizing = false;
         if (e.cancelable) {
             e.preventDefault();
         }
@@ -49,6 +53,7 @@ var Resize = /** @class */ (function () {
     };
     Resize.prototype.performResize = function (e) {
         var _this = this;
+        this.isResizing = true;
         var args = { event: e, requestType: 'editor' };
         this.parent.trigger(events.onResize, args, function (resizingArgs) {
             if (resizingArgs.cancel) {
@@ -78,6 +83,7 @@ var Resize = /** @class */ (function () {
         this.parent.refreshUI();
     };
     Resize.prototype.stopResize = function (e) {
+        this.isResizing = false;
         this.parent.refreshUI();
         this.unwireResizeEvents();
         var args = { event: e, requestType: 'editor' };
@@ -127,6 +133,7 @@ var Resize = /** @class */ (function () {
         }
         if (this.parent.iframeSettings.enable && !isNullOrUndefined(this.parent.inputElement)) {
             this.parent.inputElement.classList.remove('e-resize-enabled');
+            this.parent.contentModule.getDocument().removeEventListener('mouseup', this.iframeMouseUpBoundFn);
         }
         if (this.resizer) {
             EventHandler.remove(this.resizer, 'mousedown', this.resizeStart);
@@ -134,6 +141,12 @@ var Resize = /** @class */ (function () {
             detach(this.resizer);
         }
         this.parent.off(events.destroy, this.destroy);
+        this.iframeMouseUpBoundFn = null;
+    };
+    Resize.prototype.iframeMouseUp = function (e) {
+        if (this.isResizing) {
+            this.stopResize(e);
+        }
     };
     /**
      * For internal use only - Get the module name.

package/src/rich-text-editor/base/interface.d.ts

@@ -246,7 +246,19 @@ export interface IRenderer {
     inlineQTBar?: BaseQuickToolbar;
     renderPanel?(): void;
     setPanel?(panel: Element): void;
+    /**
+     * Retrieves the parent element of the content editable div.
+     * If the editor is in iframe mode, it returns the `iframe` element.
+     * Otherwise, it returns the parent element with the class `e-rte-content`.
+     *
+     * @returns {Element} - The parent element of the content editable div or the `iframe` element.
+     */
     getPanel?(): Element;
+    /**
+     * Retrieves the content editable `div` element of the RichTextEditor.
+     * If the editor is in iframe mode, it returns the `body` element of the iframe.
+     *
+     */
     getEditPanel?(): Element;
     getText?(): string;
     getDocument?(): Document;
@@ -1411,7 +1423,7 @@ export declare const executeGroup: {
 /**
  * Defines types to be used as CommandName.
  */
-export declare type CommandName = 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'superscript' | 'subscript' | 'uppercase' | 'lowercase' | 'fontColor' | 'fontName' | 'fontSize' | 'backColor' | 'justifyCenter' | 'justifyFull' | 'justifyLeft' | 'justifyRight' | 'undo' | 'createLink' | 'formatBlock' | 'heading' | 'indent' | 'insertHTML' | 'insertOrderedList' | 'insertUnorderedList' | 'insertParagraph' | 'outdent' | 'redo' | 'removeFormat' | 'insertText' | 'insertImage' | 'insertAudio' | 'insertVideo' | 'insertHorizontalRule' | 'insertBrOnReturn' | 'insertCode' | 'insertTable' | 'editImage' | 'editLink' | 'applyFormatPainter' | 'copyFormatPainter' | 'escapeFormatPainter' | 'emojiPicker' | 'InlineCode';
+export declare type CommandName = 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'superscript' | 'subscript' | 'uppercase' | 'lowercase' | 'fontColor' | 'fontName' | 'fontSize' | 'backColor' | 'justifyCenter' | 'justifyFull' | 'justifyLeft' | 'justifyRight' | 'undo' | 'createLink' | 'formatBlock' | 'heading' | 'indent' | 'insertHTML' | 'insertOrderedList' | 'insertUnorderedList' | 'insertParagraph' | 'outdent' | 'redo' | 'removeFormat' | 'insertText' | 'insertImage' | 'insertAudio' | 'insertVideo' | 'insertHorizontalRule' | 'insertBrOnReturn' | 'insertCode' | 'insertTable' | 'editImage' | 'editLink' | 'applyFormatPainter' | 'copyFormatPainter' | 'escapeFormatPainter' | 'emojiPicker' | 'InlineCode' | 'importWord';
 /**
  * @hidden
 

package/src/rich-text-editor/base/rich-text-editor.js

@@ -357,6 +357,17 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @public
      */
     RichTextEditor.prototype.executeCommand = function (commandName, value, option) {
+        if (commandName === 'importWord') {
+            var importContainer = this.createElement('div');
+            importContainer.innerHTML = value;
+            var tableElement = importContainer.querySelectorAll('table:not(.e-rte-table):not(.e-rte-paste-table)');
+            for (var i = 0; i < tableElement.length; i++) {
+                tableElement[i].classList.add('e-rte-paste-table');
+            }
+            value = importContainer.innerHTML;
+            importContainer.remove();
+            commandName = 'insertHTML';
+        }
         value = this.htmlPurifier(commandName, value);
         var internalValue;
         if (this.editorMode === 'HTML') {
@@ -2428,7 +2439,6 @@ var RichTextEditor = /** @class */ (function (_super) {
                 var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
                 if (iframeElement) {
                     this.setAutoHeight(iframeElement);
-                    this.inputElement.style.overflow = 'hidden';
                 }
             }
         }
@@ -2453,9 +2463,14 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.setAutoHeight = function (element) {
         if (!isNOU(element)) {
-            element.style.height = 'auto';
-            element.style.height = (this.inputElement.scrollHeight + 16) + 'px';
-            element.style.overflow = 'hidden';
+            if (element.nodeName === 'TEXTAREA') {
+                element.style.height = 'auto';
+                element.style.height = (this.inputElement.scrollHeight + 16) + 'px';
+                element.style.overflow = 'hidden';
+            }
+            else if (element.nodeName === 'IFRAME') {
+                element.style.height = this.inputElement.parentElement.offsetHeight + 'px';
+            }
         }
     };
     RichTextEditor.prototype.wireEvents = function () {

package/src/rich-text-editor/renderer/content-renderer.d.ts

@@ -8,7 +8,7 @@ import { IRenderer, IRichTextEditor } from '../base/interface';
 export declare class ContentRender implements IRenderer {
     protected contentPanel: Element;
     protected parent: IRichTextEditor;
-    protected editableElement: Element;
+    protected editableElement: HTMLElement;
     /**
      * Constructor for content renderer module
      *

package/src/rich-text-editor/renderer/content-renderer.js

@@ -1,4 +1,5 @@
 import { getEditValue } from '../base/util';
+import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 /**
  * Content module is used to render Rich Text Editor content
  *
@@ -30,9 +31,15 @@ var ContentRender = /** @class */ (function () {
             id: this.parent.getID() + '_rte-edit-view',
             attrs: {
                 'contenteditable': 'true'
-            },
-            innerHTML: rteContent
+            }
         });
+        if (!isNOU(this.parent.fontFamily.default)) {
+            this.editableElement.style.fontFamily = this.parent.fontFamily.default;
+        }
+        if (!isNOU(this.parent.fontSize.default)) {
+            this.editableElement.style.fontSize = this.parent.fontSize.default;
+        }
+        this.editableElement.innerHTML = rteContent;
         div.appendChild(this.editableElement);
         this.setPanel(div);
         rteObj.rootContainer.appendChild(div);

package/src/rich-text-editor/renderer/iframe-content-renderer.js

@@ -12,9 +12,11 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import { ContentRender } from '../renderer/content-renderer';
-import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { getEditValue } from '../base/util';
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image, .e-rte-video {border: 0;cursor: pointer;display:\n                    block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-audio {border: 0;cursor: pointer;display:\n                        block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;\n                    margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));padding: 1px;vertical-align: bottom;}\n                .e-rte-image.e-imgcenter, .e-rte-video.e-video-center {cursor: pointer;display: block;float: none;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-imgright, .e-rte-video.e-video-right { float: right; margin: 0 auto;margin-left: 5px;text-align: right;}\n                .e-rte-image.e-imgleft, .e-rte-video.e-video-left {float: left;margin: 0 auto;margin-right: 5px;text-align: left;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;\n                    margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));\n                    position: relativetext-align: center;vertical-align: bottom;}\n                .e-rte-img-caption.e-imgcenter {display: contents; margin-left: auto; margin-right: auto;}\n                .e-rte-img-caption.e-imgright {display: contents; margin-left: auto; margin-right: 0;}\n                .e-rte-img-caption.e-imgleft {display: contents;margin-left: 0;margin-right: auto;}\n                .e-img-caption.e-rte-img-caption.e-imgbreak {display: contents;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;\n                    margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft, .e-video-left {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright, .e-video-right {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter, .e-video-center {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline , .e-audio-inline, .e-video-inline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;\n                    max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak, .e-audio-break, .e-video-break {border: 0;cursor: pointer;\n                    display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize), .e-audio-focus:not(.e-resize), .e-video-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img.e-img-focus::selection, audio.e-audio-focus::selection, .e-video-focus::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark, span.e-rte-videoboxmark {  width: 10px; height: 10px; position: absolute; display: block;\n                    background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark, .e-mob-rte span.e-rte-videoboxmark { background: #fff; border: 1px solid #4a90e2;\n                    border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark, .e-mob-rte.e-mob-span span.e-rte-videoboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize, .e-rte-content .e-content video.e-resize { z-index: 1000; }\n                .e-rte-content { font-size: 14px; }\n                .e-content { font-weight: normal; line-height: 1.5; font-size: 1em; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-rte-img-caption.e-imgleft .e-img-inner { float: left; text-align: left; }\n                .e-rte-img-caption.e-imgright .e-img-inner { float: right; text-align: right; }\n                .e-rte-img-caption.e-imgleft .e-img-wrap, .e-rte-img-caption.e-imgright .e-img-wrap { display: contents; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-rte-img-caption .e-rte-image.e-imgright { margin-left: auto; margin-right: 0; }\n                .e-rte-img-caption .e-rte-image.e-imgleft { margin: 0; }\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;\n                    overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                code{ background: #9d9d9d26; color: #ed484c;}\n                li{margin-bottom: 10px;}\n                table{margin-bottom: 10px;}\n                h1{ font-size: 2.857em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n                h2{ font-size: 2.285em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n                h3{ font-size: 2em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n                h4{ font-size: 1.714em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n                h5{ font-size: 1.428em; font-weight: 600; line-height: 1.2; margin: 10px 0; }\n                h6{ font-size: 1.142em; line-height: 600; line-height: 1.5; margin: 10px 0; }\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;\n                    font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;\n                    white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; padding: 2px 5px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                table.e-cell-select {position: relative;}\n                table.e-cell-select::after { content: \"\"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #4a90e2; pointer-events: none;}\n                table td.e-cell-select.e-multi-cells-select, table th.e-cell-select.e-multi-cells-select {border: 1px solid #dee2e6; position: relative; }\n                table td.e-cell-select.e-multi-cells-select::after, table th.e-cell-select.e-multi-cells-select::after {background-color: rgba(13, 110, 253, 0.08); content: \"\";\n                    position: absolute; top: 0; left: 0; width: 100%; height: 100%; bottom: 0; pointer-events: none; right: 0;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat;\n                    bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block; height: 0;\n                    position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid;\n                    border-top: 6px solid transparent; content: ''; display: block;\n                    height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n                .e-rtl { direction: rtl; }\n                .e-rte-placeholder::before { content: attr(placeholder); opacity: 0.54; overflow: hidden; padding-top: 16px; position: absolute; text-align: start; top: 0; z-index: 1; }\n                li ol, li ul { margin-block-start: 10px;}\n                .e-resize-enabled, .e-count-enabled { padding-bottom: 0px; }\n                td.e-multi-cells-select ::selection, th.e-multi-cells-select ::selection { background-color: transparent; }\n                td.e-multi-cells-select, th.e-multi-cells-select { user-select: none !important; }\n            </style>\n        </head>";
+import { IFRAME_EDITOR_STYLES } from '../../common/editor-styles';
+var IFRAMEHEADER = "\n    <!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>" +
+    IFRAME_EDITOR_STYLES.replace(/[\n\t]/g, '') + "\n            </style>\n        </head>\n";
 /**
  * Content module is used to render Rich Text Editor content
  *
@@ -35,7 +37,7 @@ var IframeContentRender = /** @class */ (function (_super) {
     IframeContentRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
         var rteContent = getEditValue(rteObj.value, rteObj);
-        var iFrameBodyContent = '<body spellcheck="false" autocorrect="off" contenteditable="true">' +
+        var iFrameBodyContent = '<body contenteditable="true">' +
             rteContent + '</body></html>';
         var iFrameContent = IFRAMEHEADER + iFrameBodyContent;
         var iframe = this.parent.createElement('iframe', {
@@ -45,7 +47,7 @@ var IframeContentRender = /** @class */ (function (_super) {
         });
         iframe.setAttribute('role', 'none');
         this.setPanel(iframe);
-        if (!isNullOrUndefined(this.parent.iframeSettings.sandbox)) {
+        if (!isNOU(this.parent.iframeSettings.sandbox)) {
             var sandboxValues = this.parent.iframeSettings.sandbox
                 .map(function (element) { return element.toLocaleLowerCase().trim(); })
                 .join(' ');
@@ -55,22 +57,33 @@ var IframeContentRender = /** @class */ (function (_super) {
             iframe.setAttribute('sandbox', sandboxValues.trim());
         }
         rteObj.rootContainer.appendChild(iframe);
-        iframe.contentDocument.body.id = this.parent.getID() + '_rte-edit-view';
         iframe.contentDocument.body.setAttribute('aria-owns', this.parent.getID());
         iframe.contentDocument.open();
         iFrameContent = this.setThemeColor(iFrameContent, { color: '#333' });
         iframe.contentDocument.write(iFrameContent);
         iframe.contentDocument.close();
+        var body = iframe.contentDocument.body;
+        body.className = 'e-content';
+        if (this.parent.height === 'auto') {
+            body.style.overflowY = 'hidden';
+        }
+        if (!isNOU(this.parent.fontFamily.default)) {
+            body.style.fontFamily = this.parent.fontFamily.default;
+        }
+        if (!isNOU(this.parent.fontSize.default)) {
+            body.style.fontSize = this.parent.fontSize.default;
+        }
+        body.id = this.parent.getID() + '_rte-edit-view';
         if (rteObj.enableRtl) {
             this.contentPanel.contentDocument.body.setAttribute('class', 'e-rtl');
         }
-        if (!isNullOrUndefined(iframe.contentDocument.head) && this.parent.iframeSettings.metaTags.length > 0) {
+        if (!isNOU(iframe.contentDocument.head) && this.parent.iframeSettings.metaTags.length > 0) {
             var head_1 = iframe.contentDocument.head;
             var metaData = this.parent.iframeSettings.metaTags;
             metaData.forEach(function (tag) {
                 var meta = document.createElement('meta');
                 for (var key in tag) {
-                    if (!isNullOrUndefined(tag[key])) {
+                    if (!isNOU(tag[key])) {
                         meta.setAttribute((key === 'httpEquiv') ? 'http-equiv' : key, tag[key]);
                     }
                 }
@@ -91,7 +104,7 @@ var IframeContentRender = /** @class */ (function (_super) {
      */
     IframeContentRender.prototype.getEditPanel = function () {
         var editNode;
-        if (!isNullOrUndefined(this.contentPanel.contentDocument)) {
+        if (!isNOU(this.contentPanel.contentDocument)) {
             editNode = this.contentPanel.contentDocument.body;
         }
         else {

package/src/rich-text-editor/renderer/image-module.d.ts

@@ -73,9 +73,11 @@ export declare class Image {
     private setImageHeight;
     private removeImageHeight;
     private getImageDimension;
+    private adjustDimensionsByAspectRatio;
     private pixToPerc;
     private imgDupMouseMove;
     private resizing;
+    private adjustDimensions;
     private getResizeFactor;
     private findAspectRatio;
     private cancelResizeAction;

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

@@ -429,6 +429,17 @@ var Image = /** @class */ (function () {
             return value;
         }
     };
+    Image.prototype.adjustDimensionsByAspectRatio = function (width, height, aspectRatio, isWidthPrimary) {
+        if (isWidthPrimary) {
+            height = Math.round(width / aspectRatio);
+            width = Math.round(height * aspectRatio);
+        }
+        else {
+            width = Math.round(height * aspectRatio);
+            height = Math.round(width / aspectRatio);
+        }
+        return { width: width, height: height };
+    };
     Image.prototype.pixToPerc = function (expected, parentEle) {
         return expected / parseFloat(getComputedStyle(parentEle).width) * 100;
     };
@@ -472,21 +483,19 @@ var Image = /** @class */ (function () {
             var currentHeight = this.imgEle.clientHeight;
             var width = diffX * resizeFactor[0] + currentWidth;
             var height = diffY * resizeFactor[1] + currentHeight;
-            width = (width < 16) ? 16 : width;
-            height = (height < 16) ? 16 : height;
-            if (Math.abs(diffX) > Math.abs(diffY)) {
-                height = Math.round(width / this.aspectRatio);
-                width = Math.round(height * this.aspectRatio);
-            }
-            else {
-                width = Math.round(height * this.aspectRatio);
-                height = Math.round(width / this.aspectRatio);
-            }
+            var dimensions = this.adjustDimensions(width, height, diffX, diffY, this.aspectRatio);
             this.pageX = pageX;
             this.pageY = pageY;
-            this.imgDupMouseMove(width + 'px', height + 'px', e);
+            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 dimensions = this.adjustDimensionsByAspectRatio(width, height, aspectRatio, isWidthPrimary);
+        return dimensions;
+    };
     Image.prototype.getResizeFactor = function (value) {
         return imageResizeFactor[value];
     };
@@ -559,11 +568,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;
@@ -650,7 +663,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());
                 }

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

@@ -375,7 +375,7 @@ var Link = /** @class */ (function () {
     // eslint-disable-next-line
     Link.prototype.insertlink = function (e) {
         var linkEle = this.selfLink.dialogObj.element;
-        var linkUrl = linkEle.querySelector('.e-rte-linkurl').value;
+        var linkUrl = linkEle.querySelector('.e-rte-linkurl').value.trim();
         var linkText = linkEle.querySelector('.e-rte-linkText').value;
         var linkTitle;
         if (this.selfLink.parent.editorMode === 'HTML') {
@@ -491,11 +491,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/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());
                 }

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 };