@syncfusion/ej2-richtexteditor 24.2.4 → 24.2.8

package/src/rich-text-editor/actions/paste-clean-up.js

@@ -2,7 +2,7 @@ import * as events from '../base/constant';
 import { Popup } from '@syncfusion/ej2-popups';
 import { RadioButton } from '@syncfusion/ej2-buttons';
 import { isNullOrUndefined as isNOU, isNullOrUndefined, detach, extend, addClass, removeClass } from '@syncfusion/ej2-base';
-import { getUniqueID, Browser } from '@syncfusion/ej2-base';
+import { getUniqueID, Browser, closest } from '@syncfusion/ej2-base';
 import { CLS_RTE_PASTE_KEEP_FORMAT, CLS_RTE_PASTE_REMOVE_FORMAT, CLS_RTE_PASTE_PLAIN_FORMAT } from '../base/classes';
 import { CLS_RTE_PASTE_OK, CLS_RTE_PASTE_CANCEL, CLS_RTE_DIALOG_MIN_HEIGHT } from '../base/classes';
 import { CLS_RTE_IMAGE, CLS_IMGINLINE, CLS_IMGBREAK } from '../base/classes';
@@ -46,6 +46,7 @@ var PasteCleanup = /** @class */ (function () {
         this.parent.on(events.pasteClean, this.pasteClean, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
+        this.parent.on(events.docClick, this.docClick, this);
     };
     PasteCleanup.prototype.destroy = function () {
         this.removeEventListener();
@@ -57,6 +58,7 @@ var PasteCleanup = /** @class */ (function () {
         this.parent.off(events.pasteClean, this.pasteClean);
         this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
+        this.parent.off(events.docClick, this.docClick);
     };
     PasteCleanup.prototype.pasteClean = function (e) {
         var _this = this;
@@ -126,6 +128,12 @@ var PasteCleanup = /** @class */ (function () {
             this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
             var tempDivElem = this.parent.createElement('div');
             tempDivElem.innerHTML = value;
+            var unsupportedImg = tempDivElem.querySelectorAll('.e-rte-image-unsupported');
+            for (var index = 0; index < unsupportedImg.length; index++) {
+                unsupportedImg[index].setAttribute('alt', this.i10n.getConstant('unsupportedImage'));
+                unsupportedImg[index].classList.remove('e-rte-image-unsupported');
+            }
+            value = tempDivElem.innerHTML;
             var isValueNotEmpty = tempDivElem.textContent !== '' || !isNOU(tempDivElem.querySelector('img')) ||
                 !isNOU(tempDivElem.querySelector('table'));
             this.parent.notify(events.cleanupResizeElements, {
@@ -411,7 +419,9 @@ var PasteCleanup = /** @class */ (function () {
         });
         popupObj.close();
         imgElem.style.opacity = '1';
-        uploadObj.destroy();
+        if (!uploadObj.isDestroyed) {
+            uploadObj.destroy();
+        }
         this.toolbarEnableDisable(false);
     };
     PasteCleanup.prototype.refreshPopup = function (imageElement, popupObj) {
@@ -562,7 +572,7 @@ var PasteCleanup = /** @class */ (function () {
             width: '300px',
             height: '265px',
             cssClass: CLS_RTE_DIALOG_MIN_HEIGHT,
-            isModal: true,
+            isModal: Browser.isDevice,
             visible: false
         };
         this.dialogObj = this.dialogRenderObj.render(dialogModel);
@@ -616,13 +626,22 @@ var PasteCleanup = /** @class */ (function () {
         this.updateCss(this.keepRadioButton, e);
     };
     PasteCleanup.prototype.destroyDialog = function (rteDialogWrapper) {
-        var rteDialogContainer = this.parent.element.querySelector('.e-dlg-container');
+        var rteDialogContainer = this.parent.element.querySelector('.e-rte-dialog-minheight');
         detach(rteDialogContainer);
         var rteDialogWrapperChildLength = rteDialogWrapper.children.length;
         for (var i = 0; i < rteDialogWrapperChildLength; i++) {
             detach(rteDialogWrapper.children[0]);
         }
     };
+    PasteCleanup.prototype.docClick = function (e) {
+        var target = e.args.target;
+        if (target && target.classList && ((this.dialogObj && !closest(target, '[id=' + "'" + this.dialogObj.element.id + "'" + ']')))
+            && (!target.classList.contains('e-toolbar-item'))) {
+            if (this.dialogObj) {
+                this.dialogObj.hide();
+            }
+        }
+    };
     PasteCleanup.prototype.cleanAppleClass = function (elem) {
         var appleClassElem = elem.querySelectorAll('br.Apple-interchange-newline');
         for (var i = 0; i < appleClassElem.length; i++) {
@@ -696,7 +715,8 @@ var PasteCleanup = /** @class */ (function () {
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 _this.parent.formatter.onSuccess(_this.parent, args);
-                if (!isNOU(returnArgs.elements) && !isNOU(returnArgs.imgElem)) {
+                if (!isNOU(returnArgs.elements) && !isNOU(returnArgs.imgElem) &&
+                    returnArgs.imgElem.length > 0) {
                     var pasteContent = returnArgs.elements;
                     var imageContent = returnArgs.imgElem;
                     var lastElementChild = _this.findLastElement(pasteContent[pasteContent.length - 1]);
@@ -765,6 +785,7 @@ var PasteCleanup = /** @class */ (function () {
         }
     };
     PasteCleanup.prototype.addTableClass = function (element, source) {
+        source = isNOU(source) ? '' : source;
         var tableElement = element.querySelectorAll('table');
         for (var i = 0; i < tableElement.length; i++) {
             if (!tableElement[i].classList.contains('e-rte-table') && (source === 'html' || source === '')) {

package/src/rich-text-editor/actions/toolbar-action.js

@@ -39,7 +39,7 @@ var ToolbarAction = /** @class */ (function () {
         if (args.item.command === 'Lists') {
             if (args.originalEvent.target.classList.contains('e-caret') &&
                 (args.originalEvent.target.parentElement.classList.contains('e-rte-bulletformatlist-dropdown') || args.originalEvent.target.parentElement.classList.contains('e-rte-numberformatlist-dropdown'))) {
-                args.item.command = args.item.subCommand = null;
+                return;
             }
         }
         this.parent.notify(events.htmlToolbarClick, args);

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

@@ -56,6 +56,9 @@ var Toolbar = /** @class */ (function () {
                 if (e.target.classList.contains('e-hor-nav')) {
                     this.adjustContentHeight(e.target, true);
                 }
+                if (!isNullOrUndefined(e.target) && (e.target.classList.contains("e-rte-fontcolor-dropdown") || e.target.classList.contains("e-rte-backgroundcolor-dropdown"))) {
+                    this.parent.notify(events.showColorPicker, { toolbarClick: e.target.classList.contains("e-rte-fontcolor-dropdown") ? "fontcolor" : "backgroundcolor" });
+                }
         }
     };
     Toolbar.prototype.createToolbarElement = function () {
@@ -585,7 +588,7 @@ var Toolbar = /** @class */ (function () {
         else if (Browser.isDevice || this.parent.inlineMode.enable) {
             this.isToolbar = true;
         }
-        if (isNOU(trg) && this.parent.toolbarSettings.type === ToolbarType.Expand) {
+        if (isNOU(trg) && this.parent.toolbarSettings.type === ToolbarType.Expand && this.parent.toolbarModule.getExpandTBarPopHeight() === 0) {
             removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
         }
     };

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

@@ -759,6 +759,11 @@ export declare const documentClickClosedBy: string;
 /**
  * @hidden
 
+ */
+export declare const showColorPicker: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

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

@@ -759,6 +759,11 @@ export var documentClickClosedBy = 'documentClickClosedBy';
 /**
  * @hidden
 
+ */
+export var showColorPicker = 'showColorPicker';
+/**
+ * @hidden
+
  */
 export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
 /**

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

@@ -667,10 +667,6 @@ export interface IToolsItemConfigs {
     subCommand?: string;
     value?: string;
 }
-/**
- * @hidden
-
- */
 export interface IListDropDownModel extends DropDownItemModel {
     cssClass?: string;
     command?: string;
@@ -680,10 +676,6 @@ export interface IListDropDownModel extends DropDownItemModel {
     listStyle?: string;
     listImage?: string;
 }
-/**
- * @hidden
-
- */
 export interface IDropDownItemModel extends DropDownItemModel {
     cssClass?: string;
     command?: string;

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

@@ -604,7 +604,7 @@ export interface RichTextEditorModel extends ComponentModel{
      *
      * @default
      * {
-     * default: '10',
+     * default: '10pt',
      * width: '35px',
      * items: [
      * { text: '8', value: '8pt' },

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

@@ -751,7 +751,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      *
      * @default
      * {
-     * default: '10',
+     * default: '10pt',
      * width: '35px',
      * items: [
      * { text: '8', value: '8pt' },

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

@@ -802,6 +802,16 @@ var RichTextEditor = /** @class */ (function (_super) {
     RichTextEditor.prototype.keyUp = function (e) {
         if (this.editorMode === 'HTML') {
             var range = this.getRange();
+            if (!isNOU(e) && !isNOU(e.code) && (e.code === 'Backspace' || e.code === 'Delete')) {
+                // To prevent the reformatting the content removed browser behavior.
+                var currentRange = this.getRange();
+                var selection = this.iframeSettings.enable ? this.contentModule.getPanel().ownerDocument.getSelection() :
+                    this.contentModule.getDocument().getSelection();
+                if (selection.rangeCount > 0) {
+                    selection.removeAllRanges();
+                    selection.addRange(currentRange);
+                }
+            }
             if (Browser.userAgent.indexOf('Firefox') !== -1 && range.startContainer.nodeName === '#text' &&
                 range.startContainer.parentElement === this.inputElement && this.enterKey !== 'BR') {
                 var range_1 = this.getRange();
@@ -901,11 +911,14 @@ var RichTextEditor = /** @class */ (function (_super) {
                 clientX: touch.clientX, clientY: touch.clientY }
         });
         if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
-            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) || (e.target && (e.target.nodeName === 'VIDEO'
-            || e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) || (e.target && e.target.nodeName !== 'BR' &&
-            (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
-                e.target.classList.contains(classes.CLS_CLICKELEM) ||
-                e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
+            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0)) ||
+            (e.target && !isNOU(closest(e.target, 'table'))) ||
+            (e.target && (e.target.nodeName === 'VIDEO' ||
+                e.target.querySelectorAll('.' + classes.CLS_VIDEOWRAP).length > 0) ||
+                (e.target && e.target.nodeName !== 'BR' &&
+                    (e.target.classList.contains(classes.CLS_AUDIOWRAP) ||
+                        e.target.classList.contains(classes.CLS_CLICKELEM) ||
+                        e.target.classList.contains(classes.CLS_VID_CLICK_ELEM))))) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         this.triggerEditArea(e);
@@ -1672,10 +1685,10 @@ var RichTextEditor = /** @class */ (function (_super) {
         if (this.iframeSettings.resources) {
             var styleSrc = this.iframeSettings.resources.styles;
             var scriptSrc = this.iframeSettings.resources.scripts;
-            if (this.iframeSettings.resources.scripts.length > 0) {
+            if (!isNOU(this.iframeSettings.resources.scripts) && this.iframeSettings.resources.scripts.length > 0) {
                 this.InjectSheet(true, scriptSrc);
             }
-            if (this.iframeSettings.resources.styles.length > 0) {
+            if (!isNOU(this.iframeSettings.resources.styles) && this.iframeSettings.resources.styles.length > 0) {
                 this.InjectSheet(false, styleSrc);
             }
         }
@@ -1789,6 +1802,13 @@ var RichTextEditor = /** @class */ (function (_super) {
         var imgPadding = 12;
         var imgResizeBorder = 2;
         var editEle = this.contentModule.getEditPanel();
+        if (this.editorMode === "HTML" && !isNOU(this.formatter.editorManager.nodeSelection) && !isNOU(this.formatter.editorManager.nodeSelection.range)) {
+            var currentRange = this.formatter.editorManager.nodeSelection.range;
+            if (currentRange.startContainer.nodeType !== 3 && currentRange.startContainer.closest &&
+                !isNOU(currentRange.startContainer.closest('TD'))) {
+                editEle = currentRange.startContainer;
+            }
+        }
         var eleStyle = window.getComputedStyle(editEle);
         var editEleMaxWidth = editEle.offsetWidth - (imgPadding + imgResizeBorder +
             parseFloat(eleStyle.paddingLeft.split('px')[0]) + parseFloat(eleStyle.paddingRight.split('px')[0]) +
@@ -2232,6 +2252,12 @@ var RichTextEditor = /** @class */ (function (_super) {
         var trg = e.relatedTarget;
         if (trg) {
             var rteElement = closest(trg, '.' + classes.CLS_RTE);
+            if (!rteElement && this.iframeSettings.enable) {
+                var iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
+                if (iframeElement && iframeElement.contentWindow.document.body.contains(trg)) {
+                    rteElement = closest(iframeElement, '.' + classes.CLS_RTE);
+                }
+            }
             if (rteElement && rteElement === this.element) {
                 this.isBlur = false;
                 if (trg === this.getToolbarElement()) {

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

@@ -499,6 +499,9 @@ export function updateTextNode(value, rteObj) {
         }
         var imageElm = resultElm.querySelectorAll('img');
         for (var i = 0; i < imageElm.length; i++) {
+            if (imageElm[i].classList.contains('e-rte-image-unsupported')) {
+                continue; // Should not add the class if the image is Broken.
+            }
             if (!imageElm[i].classList.contains(classes.CLS_RTE_IMAGE)) {
                 imageElm[i].classList.add(classes.CLS_RTE_IMAGE);
             }

package/src/rich-text-editor/models/default-locale.js

@@ -94,7 +94,7 @@ export var defaultLocale = {
     'browse': 'Browse',
     'imageUrl': 'http://example.com/image.png',
     'audioUrl': 'http://example.com/audio.mp3',
-    'videoUrl': 'http://example.com/video.mp3',
+    'videoUrl': 'http://example.com/video.mp4',
     'webUrl': 'Web URL',
     'embedUrl': 'Embed Code',
     'imageCaption': 'Caption',
@@ -199,6 +199,7 @@ export var defaultLocale = {
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
     'linkAriaLabel': 'Open in new window',
+    'unsupportedImage': 'Unsupported file format'
 };
 export var toolsLocale = {
     'alignments': 'alignments',
@@ -294,7 +295,7 @@ export var toolsLocale = {
     'emojiPickerTypeToFind': 'Type to find',
     'emojiPickerNoResultFound': 'No results found',
     'emojiPickerTrySomethingElse': 'Try something else',
-    'ImageLinkAriaLabel': 'Open in new window',
+    'imageLinkAriaLabel': 'Open in new window',
 };
 export var fontNameLocale = [
     { locale: 'fontNameSegoeUI', value: 'Segoe UI' },

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

@@ -37,7 +37,11 @@ var DialogRenderer = /** @class */ (function () {
         var dlgObj;
         e.beforeOpen = this.beforeOpen.bind(this);
         e.open = this.open.bind(this);
-        e.position = { X: 'center', Y: this.getDialogPosition() };
+        e.position = {
+            X: 'center',
+            Y: (e.target !== 'string' && e.target.nodeName === 'BODY' &&
+                !isNOU(e.position)) ? e.position.Y : this.getDialogPosition()
+        };
         if (isNOU(e.close)) {
             e.close = this.close.bind(this);
         }

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

@@ -14,7 +14,7 @@ var __extends = (this && this.__extends) || (function () {
 import { ContentRender } from '../renderer/content-renderer';
 import { isNullOrUndefined } 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-audio, .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-image.e-imginline, .e-rte-audio.e-audio-inline, .e-rte-video.e-video-inline {display: inline-block;float: none;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-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-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; 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                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 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                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            </style>\n        </head>";
+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-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption a:focus-visible { outline: none; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; 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                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 16px;font-weight: 400;line-height: 1.5;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 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                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            </style>\n        </head>";
 /**
  * Content module is used to render Rich Text Editor content
  *

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

@@ -234,6 +234,7 @@ var Image = /** @class */ (function () {
                     }
                 });
             }
+            EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
             EventHandler.add(this.contentModule.getDocument(), Browser.touchEndEvent, this.resizeEnd, this);
         }
     };
@@ -285,7 +286,6 @@ var Image = /** @class */ (function () {
         this.imgResizePos(e, this.imgResizeDiv);
         this.resizeImgDupPos(e);
         this.contentModule.getEditPanel().appendChild(this.imgResizeDiv);
-        EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
     };
     Image.prototype.getPointX = function (e) {
         if (e.touches && e.touches.length) {
@@ -644,7 +644,9 @@ var Image = /** @class */ (function () {
             }
         }
         if (originalEvent.ctrlKey && (originalEvent.keyCode === 89 || originalEvent.keyCode === 90)) {
-            this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
+            if (this.parent.editorMode !== 'Markdown') {
+                this.undoStack({ subCommand: (originalEvent.keyCode === 90 ? 'undo' : 'redo') });
+            }
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
@@ -1014,7 +1016,7 @@ var Image = /** @class */ (function () {
             this.checkBoxObj.createElement = this.parent.createElement;
             this.checkBoxObj.appendTo(linkTarget);
             var target_1 = this.checkBoxObj.checked ? '_blank' : null;
-            var imageLabel = this.checkBoxObj.checked ? this.i10n.getConstant('ImageLinkAriaLabel') : null;
+            var imageLabel = this.checkBoxObj.checked ? this.i10n.getConstant('imageLinkAriaLabel') : null;
             var linkUpdate = this.i10n.getConstant('dialogUpdate');
             var linkargs_1 = {
                 args: e.args,
@@ -1134,14 +1136,14 @@ var Image = /** @class */ (function () {
         }
         if (e.selectNode[0].parentElement.nodeName === 'A') {
             proxy.parent.formatter.process(proxy.parent, e.args, e.args, {
-                url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, ariaLabel: proxy.checkBoxObj.checked ? this.i10n.getConstant('ImageLinkAriaLabel') : null, selectNode: e.selectNode,
+                url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, ariaLabel: proxy.checkBoxObj.checked ? this.i10n.getConstant('imageLinkAriaLabel') : null, selectNode: e.selectNode,
                 subCommand: e.args.item.subCommand
             });
             proxy.dialogObj.hide({ returnValue: true });
             return;
         }
         proxy.parent.formatter.process(proxy.parent, e.args, e.args, {
-            url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, ariaLabel: proxy.checkBoxObj.checked ? this.i10n.getConstant('ImageLinkAriaLabel') : null, selectNode: e.selectNode,
+            url: url, target: proxy.checkBoxObj.checked ? '_blank' : null, ariaLabel: proxy.checkBoxObj.checked ? this.i10n.getConstant('imageLinkAriaLabel') : null, selectNode: e.selectNode,
             subCommand: e.args.item.subCommand, selection: e.selection
         });
         var captionEle = closest(e.selectNode[0], '.e-img-caption');
@@ -1169,7 +1171,29 @@ var Image = /** @class */ (function () {
         if (this.parent.formatter.getUndoRedoStack().length === 0) {
             this.parent.formatter.saveData();
         }
-        e.selection.restore();
+        var restoreStartElement = e.selection.range.startContainer;
+        if (e.selection.range.startContainer.nodeName === 'SPAN' &&
+            restoreStartElement.classList.contains('e-img-wrap') &&
+            restoreStartElement.parentElement.classList.contains('e-img-caption')) {
+            restoreStartElement = restoreStartElement.parentElement;
+            if (!isNOU(restoreStartElement.previousSibling)) {
+                var lastNode = restoreStartElement.previousSibling;
+                while (lastNode.nodeName !== '#text' && lastNode.nodeName !== 'BR') {
+                    lastNode = lastNode.lastChild;
+                }
+                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), lastNode, lastNode.nodeName !== 'BR' ? lastNode.textContent.length : 0);
+            }
+            else if (!isNOU(restoreStartElement.nextSibling)) {
+                var firstNode = restoreStartElement.nextSibling;
+                while (firstNode.nodeName !== '#text' && firstNode.nodeName !== 'BR') {
+                    firstNode = firstNode.firstChild;
+                }
+                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), firstNode, 0);
+            }
+        }
+        else {
+            e.selection.restore();
+        }
         if (this.contentModule.getEditPanel().querySelector('.e-img-resize')) {
             this.removeResizeEle();
         }
@@ -1383,7 +1407,7 @@ var Image = /** @class */ (function () {
             animationSettings: { effect: 'None' },
             close: function (event) {
                 if (_this.isImgUploaded) {
-                    _this.uploadObj.removing();
+                    _this.uploadObj.remove();
                 }
                 _this.parent.isBlur = false;
                 if (event && event.event.returnValue) {
@@ -1451,9 +1475,6 @@ var Image = /** @class */ (function () {
     Image.prototype.cancelDialog = function (e) {
         this.parent.isBlur = false;
         this.dialogObj.hide({ returnValue: true });
-        if (this.isImgUploaded) {
-            this.uploadObj.removing();
-        }
     };
     Image.prototype.onDocumentClick = function (e) {
         var target = e.target;

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

@@ -33,7 +33,6 @@ export declare class Table {
     private helper;
     private dialogRenderObj;
     private currentColumnResize;
-    private currentMarginLeft;
     private previousTableElement;
     private constructor();
     protected addEventListener(): void;
@@ -76,17 +75,20 @@ export declare class Table {
     private getPointX;
     private getPointY;
     private resizeStart;
+    private getCellIndex;
     private removeHelper;
     private appendHelper;
     private setHelperHeight;
     private updateHelper;
     private calMaxCol;
     private resizing;
+    private getCurrentColWidth;
     private getCurrentTableWidth;
     private findFirstLastColCells;
     private convertPixelToPercentage;
     private cancelResizeAction;
     private resizeEnd;
+    private resetResizeHelper;
     private resizeBtnInit;
     private addRow;
     private addColumn;
@@ -122,4 +124,5 @@ export declare class Table {
      */
     private getModuleName;
     private afterKeyDown;
+    private updateResizeIconPosition;
 }