@syncfusion/ej2-richtexteditor 24.2.4 → 24.2.7

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

@@ -192,9 +192,12 @@ var HtmlEditor = /** @class */ (function () {
         var range = this.parent.getRange();
         // eslint-disable-next-line
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
+        var isEmptyNode = range.startContainer === range.endContainer && range.startOffset === range.endOffset &&
+            range.startOffset === 1 && range.startContainer.textContent.length === 1 && range.startContainer.textContent.charCodeAt(0) == 8203 &&
+            range.startContainer.textContent.replace(regEx, '').length === 0;
         var pointer;
         var isRootParent = false;
-        if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {
+        if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey && !isEmptyNode) {
             pointer = range.startOffset;
             // eslint-disable-next-line @typescript-eslint/no-unused-expressions
             range.startContainer.nodeName === '#text' ? range.startContainer.parentElement !== this.parent.inputElement ? range.startContainer.parentElement.classList.add('currentStartMark')
@@ -317,8 +320,13 @@ var HtmlEditor = /** @class */ (function () {
                 else {
                     this.parent.notify(events.enterHandler, { args: e.args });
                     var newRange = this.parent.getRange();
-                    if (!isNOU(newRange.startContainer) && newRange.startContainer === this.parent.inputElement.lastChild && newRange.startContainer.nodeName !== '#text' && this.parent.height !== 'auto') {
-                        newRange.startContainer.scrollIntoView({ block: "end", inline: "nearest" });
+                    if (!isNullOrUndefined(newRange.startContainer) && this.parent.height !== 'auto' && newRange.startContainer.nodeName !== '#text'
+                        && !this.parent.iframeSettings.enable && newRange.startContainer.getBoundingClientRect().bottom > this.parent.element.getBoundingClientRect().bottom) {
+                        this.parent.element.querySelector('.e-rte-content').scrollTop += newRange.startContainer.getBoundingClientRect().bottom - this.parent.element.getBoundingClientRect().bottom;
+                    }
+                    else if (!isNullOrUndefined(newRange.startContainer) && this.parent.height === 'auto' && newRange.startContainer.nodeName !== '#text'
+                        && !this.parent.iframeSettings.enable && window.innerHeight < newRange.startContainer.getBoundingClientRect().top) {
+                        newRange.startContainer.scrollIntoView({ block: 'end', inline: 'nearest' });
                     }
                 }
             }
@@ -400,11 +408,13 @@ var HtmlEditor = /** @class */ (function () {
             currentRange.startContainer.previousSibling.nodeName === 'SPAN') {
             isPreviousNotContentEditable = currentRange.startContainer.previousSibling.contentEditable === 'false' ? false : true;
         }
+        var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+        var isSelectedPositionNotStart = closest(currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer, 'li') ?
+            checkNode.nodeName !== 'li' && isNOU(checkNode.previousSibling) : true;
         if (e.args.code === 'Backspace' && e.args.keyCode === 8 && currentRange.startOffset === 0 &&
             currentRange.endOffset === 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.textContent.length > 0 &&
             currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH' &&
-            isPreviousNotContentEditable) {
-            var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
+            isPreviousNotContentEditable && isSelectedPositionNotStart) {
             if ((!this.parent.formatter.editorManager.domNode.isBlockNode(checkNode) &&
                 !isNOU(checkNode.previousSibling) && checkNode.previousSibling.nodeName === 'BR') ||
                 (!isNOU(currentRange.startContainer.previousSibling) && currentRange.startContainer.previousSibling.nodeName === 'BR')) {
@@ -416,7 +426,8 @@ var HtmlEditor = /** @class */ (function () {
                 if (liElement.previousElementSibling && liElement.previousElementSibling.childElementCount > 0) {
                     this.oldRangeElement = liElement.previousElementSibling.lastElementChild.nodeName === 'BR' ?
                         liElement.previousElementSibling : liElement.previousElementSibling.lastElementChild;
-                    if (!isNullOrUndefined(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR') {
+                    if (!isNOU(liElement.lastElementChild) && liElement.lastElementChild.nodeName !== 'BR' &&
+                        isNOU(liElement.lastElementChild.previousSibling)) {
                         this.rangeElement = liElement.lastElementChild;
                         isLiElement = true;
                     }
@@ -426,13 +437,13 @@ var HtmlEditor = /** @class */ (function () {
                 }
             }
             else if (this.rangeElement === this.parent.inputElement || this.rangeElement.tagName === 'TABLE' ||
-                (!isNullOrUndefined(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
+                (!isNOU(this.rangeElement.previousElementSibling) && this.rangeElement.previousElementSibling.tagName === 'TABLE')) {
                 return;
             }
             else {
                 this.oldRangeElement = this.rangeElement.previousElementSibling;
             }
-            if (isNullOrUndefined(this.oldRangeElement)) {
+            if (isNOU(this.oldRangeElement)) {
                 return;
             }
             else {
@@ -452,7 +463,7 @@ var HtmlEditor = /** @class */ (function () {
                 if (this.oldRangeElement.querySelectorAll('BR').length === 1) {
                     detach(this.oldRangeElement.querySelector('BR'));
                 }
-                if (!isNullOrUndefined(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
+                if (!isNOU(this.rangeElement) && this.oldRangeElement !== this.rangeElement) {
                     while (this.rangeElement.firstChild) {
                         this.oldRangeElement.appendChild(this.rangeElement.childNodes[0]);
                     }
@@ -708,9 +719,11 @@ var HtmlEditor = /** @class */ (function () {
         this.tooltipTargetEle = closest(args.originalEvent.target, '[data-tooltip-id]');
         if (!isNOU(this.tooltipTargetEle) && this.parent.showTooltip && !isNOU(currentDocument.querySelector('.e-tooltip-wrap'))) {
             this.parent.notify(events.destroyTooltip, { args: event });
-            this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
-            this.tooltipTargetEle.removeAttribute('title');
-            EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
+            if (!this.tooltipTargetEle.closest('.e-rte-quick-popup')) {
+                this.tooltipTargetEle.setAttribute('data-title', this.tooltipTargetEle.getAttribute('title'));
+                this.tooltipTargetEle.removeAttribute('title');
+                EventHandler.add(this.tooltipTargetEle, 'mouseout', this.mouseOutHandler, this);
+            }
         }
         if (item.command !== 'FormatPainter') {
             if (closestElement && !closestElement.classList.contains('e-rte-inline-popup') && !closestElement.classList.contains('e-rte-text-popup')) {

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

@@ -55,6 +55,7 @@ export declare class PasteCleanup {
     private updateCss;
     private setCssClass;
     private destroyDialog;
+    private docClick;
     private cleanAppleClass;
     private formatting;
     private cropImageHandler;

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

@@ -585,7 +585,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/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();
@@ -1672,10 +1682,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);
             }
         }

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

@@ -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/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;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

@@ -1014,7 +1014,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 +1134,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');

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

@@ -76,6 +76,7 @@ export declare class Table {
     private getPointX;
     private getPointY;
     private resizeStart;
+    private getCellIndex;
     private removeHelper;
     private appendHelper;
     private setHelperHeight;