@syncfusion/ej2-richtexteditor 21.1.37 → 21.1.41

package/dist/es6/ej2-richtexteditor.es2015.js

@@ -3008,8 +3008,9 @@ function decode(value) {
 function sanitizeHelper(value, parent) {
     if (parent.enableHtmlSanitizer) {
         const item = SanitizeHtmlHelper.beforeSanitize();
-        if (item.selectors.tags[2] && item.selectors.tags[2].indexOf('iframe') > -1)
+        if (item.selectors.tags[2] && item.selectors.tags[2].indexOf('iframe') > -1) {
             item.selectors.tags[2] = 'iframe:not(.e-rte-embed-url)';
+        }
         const beforeEvent = {
             cancel: false,
             helper: null
@@ -5075,7 +5076,7 @@ class Toolbar$2 {
     toolbarClickHandler(e) {
         const trg = closest(e.originalEvent.target, '.e-hor-nav');
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNullOrUndefined(trg)) {
-            let extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');
+            const extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');
             if (!isNullOrUndefined(extendedTbar)) {
                 setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });
                 setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });
@@ -5956,8 +5957,8 @@ class BaseQuickToolbar {
         }
         if (!isNullOrUndefined(document.querySelector('.e-tooltip-wrap'))) {
             if (!isNullOrUndefined(document.querySelector('#' + this.element.id + ' [data-tooltip-id]'))) {
-                let tooltipTargetEle = document.querySelector('#' + this.element.id + ' [data-tooltip-id]');
-                let dataContent = tooltipTargetEle.getAttribute('data-content');
+                const tooltipTargetEle = document.querySelector('#' + this.element.id + ' [data-tooltip-id]');
+                const dataContent = tooltipTargetEle.getAttribute('data-content');
                 tooltipTargetEle.removeAttribute('data-content');
                 tooltipTargetEle.setAttribute('title', dataContent);
                 tooltipTargetEle.removeAttribute('data-tooltip-id');
@@ -14440,8 +14441,9 @@ class VideoCommand {
                 : (Browser.isIE ? selectedNode : !e.item.isEmbedUrl ? selectedNode.lastElementChild : selectedNode.querySelector('iframe'));
             videoElm.addEventListener(videoElm.tagName !== 'IFRAME' ? 'loadeddata' : 'load', () => {
                 if (e.value !== 'VideoReplace' || !isReplaced) {
-                    if (e.item.isEmbedUrl && videoElm)
+                    if (e.item.isEmbedUrl && videoElm) {
                         videoElm.classList.add('e-rte-embed-url');
+                    }
                     e.callBack({
                         requestType: 'Videos',
                         editorMode: 'HTML',
@@ -14856,7 +14858,7 @@ class TableCommand {
         const colIndex = Array.prototype.indexOf.call(selectedCell.parentNode.childNodes, selectedCell);
         this.curTable = closest(selectedCell, 'table');
         let currentRow;
-        const allCells = this.getCorrespondingColumns();
+        let allCells = this.getCorrespondingColumns();
         const minMaxIndex = this.getSelectedCellMinMaxIndex(allCells);
         let maxI;
         let j;
@@ -14871,8 +14873,19 @@ class TableCommand {
                     if (j === 0 || allCells[maxI][j] !== allCells[maxI][j - 1]) {
                         if (1 < parseInt(allCells[maxI][j].getAttribute('rowspan'), 10)) {
                             const rowSpanVal = parseInt(allCells[maxI][j].getAttribute('rowspan'), 10) - 1;
-                            //eslint-disable-next-line
-                            1 === rowSpanVal ? allCells[maxI][j].removeAttribute('rowspan') : allCells[maxI][j].setAttribute('rowspan', rowSpanVal.toString());
+                            /* eslint-disable */
+                            if (1 === rowSpanVal) {
+                                allCells[maxI][j].removeAttribute('rowspan');
+                                const cell = allCells[maxI][j].cloneNode(true);
+                                allCells = this.getCorrespondingColumns();
+                                if (allCells[rowSpanVal][j] && allCells[rowSpanVal][j].parentElement) {
+                                    allCells[rowSpanVal][j].parentElement.insertBefore(cell, allCells[rowSpanVal][j]);
+                                }
+                            }
+                            else {
+                                allCells[maxI][j].setAttribute('rowspan', rowSpanVal.toString());
+                            }
+                            /* eslint-enable */
                         }
                     }
                     // eslint-disable-next-line max-len
@@ -15780,18 +15793,13 @@ class SelectionCommands {
                         isSubSup = formatNode === null ? false : true;
                     }
                 }
-                else if ((format === 'fontsize' || format === 'fontname' || format === 'fontcolor' || format === 'backgroundcolor') && range.startContainer.parentElement === endNode) {
-                    formatNode = null;
-                }
                 if (index === 0 && formatNode === null) {
                     isFormat = true;
                 }
                 if (formatNode !== null && (!isFormat || isFontStyle)) {
                     nodes[index] = this.removeFormat(nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, domSelection, endNode, domNode);
                 }
-                else if (range.startContainer.parentElement !== endNode ||
-                    (range.commonAncestorContainer !== endNode && range.startContainer.parentElement === endNode)
-                    || (range.commonAncestorContainer === endNode || nodes.length === 1)) {
+                else {
                     nodes[index] = this.insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, painterValues, domNode, endNode);
                 }
                 domSelection = this.applySelection(nodes, domSelection, nodeCutter, index, isCollapsed);
@@ -15943,6 +15951,27 @@ class SelectionCommands {
                 nodes[index] = lastNode.firstChild;
             }
         }
+        else if (isFontStyle && !nodes[index].contains(formatNode) && nodes[index].nodeType === 3 &&
+            nodes[index].textContent !== formatNode.textContent) {
+            // If the selection is within the format node .
+            const isFullNodeSelected = nodes[index].textContent === nodes[index].wholeText;
+            let nodeTraverse = nodes[index];
+            const styleElement = this.GetFormatNode(format, value);
+            // while loop and traverse back until text content does not match with parent text content
+            while (nodeTraverse && nodeTraverse.textContent === nodeTraverse.parentElement.textContent) {
+                nodeTraverse = nodeTraverse.parentElement;
+            }
+            if (isFullNodeSelected && formatNode.textContent !== nodeTraverse.textContent) {
+                const nodeArray = [];
+                const priorityNode = this.getPriorityFormatNode(nodeTraverse, endNode);
+                if (priorityNode && priorityNode.textContent === nodeTraverse.textContent) {
+                    nodeTraverse = priorityNode;
+                }
+                nodeArray.push(nodeTraverse);
+                this.applyStyles(nodeArray, 0, styleElement);
+                return nodes[index];
+            }
+        }
         let fontStyle;
         if (format === 'backgroundcolor') {
             fontStyle = formatNode.style.fontSize;
@@ -16089,23 +16118,9 @@ class SelectionCommands {
         return nodes[index];
     }
     static insertFormat(docElement, nodes, index, formatNode, isCursor, isFormat, isFontStyle, range, nodeCutter, format, value, painterValues, domNode, endNode) {
-        let rootElementNode;
         if (!isCursor) {
             if ((formatNode === null && isFormat) || isFontStyle) {
                 if (nodes[index].nodeName !== 'BR') {
-                    if (format === 'fontsize' || format === 'fontname' || format === 'fontcolor' || format === 'backgroundcolor') {
-                        let rangeNode = nodes[index];
-                        while (rangeNode && !domNode.isBlockNode(rangeNode) && rangeNode !== endNode) {
-                            if (domNode.isBlockNode(rangeNode.parentElement)) {
-                                rootElementNode = rangeNode;
-                            }
-                            rangeNode = rangeNode.parentElement;
-                        }
-                        if (rootElementNode && rootElementNode.nodeType !== 3) {
-                            nodeCutter.SplitNode(range, rootElementNode, true).cloneNode(true);
-                            nodeCutter.SplitNode(range, rootElementNode, false).cloneNode(false);
-                        }
-                    }
                     nodes[index] = nodeCutter.GetSpliceNode(range, nodes[index]);
                     nodes[index].textContent = nodeCutter.TrimLineBreak(nodes[index].textContent);
                 }
@@ -16115,57 +16130,63 @@ class SelectionCommands {
                 }
                 else if (!(isFontStyle === true && value === '')) {
                     const element = this.GetFormatNode(format, value);
-                    if (value === 'formatPainter' || format === 'fontsize' || format === 'fontcolor' || format === 'fontname' || format === 'backgroundcolor') {
-                        if (format !== 'fontname' && format !== 'backgroundcolor') {
-                            let liElement = nodes[index].parentElement;
-                            let parentElement = nodes[index].parentElement;
-                            while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
-                                parentElement = parentElement.parentElement;
-                                liElement = parentElement;
+                    if (value === 'formatPainter' || isFontStyle) {
+                        let liElement = nodes[index].parentElement;
+                        let parentElement = nodes[index].parentElement;
+                        while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
+                            parentElement = parentElement.parentElement;
+                            liElement = parentElement;
+                        }
+                        if (!isNullOrUndefined(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                            liElement.textContent.trim() === nodes[index].textContent.trim()) {
+                            if (format === 'fontsize') {
+                                liElement.style.fontSize = value;
                             }
-                            if (!isNullOrUndefined(liElement) && liElement.tagName.toLowerCase() === 'li' &&
-                                liElement.textContent.trim() === nodes[index].textContent.trim()) {
-                                if (format === 'fontsize') {
-                                    liElement.style.fontSize = value;
-                                }
-                                else {
-                                    liElement.style.color = value;
-                                    liElement.style.textDecoration = 'inherit';
-                                }
+                            else if (format === 'fontcolor') {
+                                liElement.style.color = value;
+                                liElement.style.textDecoration = 'inherit';
                             }
                         }
-                        if (rootElementNode && rootElementNode.nodeType !== 3 && rootElementNode.nodeName !== 'A') {
-                            const save = new NodeSelection();
-                            save.save(range, docElement);
-                            domNode.setMarker(save);
-                            const cloneNode = rootElementNode.cloneNode(true);
-                            element.appendChild(cloneNode);
-                            domNode.replaceWith(rootElementNode, element.outerHTML);
-                            const currentStartNode = endNode.querySelector('.e-editor-select-start');
-                            const currrentEndNode = endNode.querySelector('.e-editor-select-end');
-                            if (index === 0) {
-                                nodes[index] = currentStartNode ? currentStartNode.lastChild : nodes[index];
-                            }
-                            if (range.startContainer.parentElement === endNode) {
-                                if (nodes.length > 1) {
-                                    nodes[nodes.length - 1] = currrentEndNode ? currrentEndNode.lastChild : nodes[index];
+                        if (value === 'formatPainter') {
+                            return this.insertFormatPainterElem(nodes, index, range, nodeCutter, painterValues, domNode);
+                        }
+                        const currentNode = nodes[index];
+                        const priorityNode = this.getPriorityFormatNode(currentNode, endNode);
+                        // 1. Checking is there any priority node present in the selection range. (Use case for nested styles);
+                        // 2  Or font style is applied. (Use case not a nested style)
+                        if (!isNullOrUndefined(priorityNode) || isFontStyle) {
+                            let currentFormatNode = isNullOrUndefined(priorityNode) ? currentNode : priorityNode;
+                            currentFormatNode = !isNullOrUndefined(priorityNode) && priorityNode.style.fontSize !== '' ?
+                                currentFormatNode.firstChild : currentFormatNode;
+                            if (isNullOrUndefined(priorityNode) || format === 'fontsize') {
+                                while (currentFormatNode) {
+                                    const isSameTextContent = currentFormatNode.parentElement.textContent.trim()
+                                        === nodes[index].textContent.trim();
+                                    if (!domNode.isBlockNode(currentFormatNode.parentElement) && isSameTextContent) {
+                                        currentFormatNode = currentFormatNode.parentElement;
+                                    }
+                                    else {
+                                        break;
+                                    }
                                 }
                             }
-                            domNode.saveMarker(save, null);
-                        }
-                        else {
-                            if (value === 'formatPainter') {
-                                return this.insertFormatPainterElem(nodes, index, range, nodeCutter, painterValues, domNode);
+                            const nodeList = [];
+                            // Since color is different for different themnes, we need to wrap the fontColor over the text node.
+                            if (format === 'fontcolor') {
+                                const closestAnchor = closest(nodes[index].parentElement, 'A');
+                                if (!isNullOrUndefined(closestAnchor) && closestAnchor.firstChild.textContent.trim()
+                                    === nodes[index].textContent.trim()) {
+                                    currentFormatNode = nodes[index];
+                                }
                             }
-                            else {
-                                nodes[index] = this.applyStyles(nodes, index, element);
+                            if (nodes[index].textContent.trim() !== currentFormatNode.textContent.trim()) {
+                                currentFormatNode = nodes[index];
                             }
+                            nodeList[0] = currentFormatNode;
+                            this.applyStyles(nodeList, 0, element);
                         }
-                        if (format === 'fontsize') {
-                            const bg = closest(nodes[index].parentElement, 'span[style*=' + 'background-color' + ']');
-                            if (!isNullOrUndefined(bg)) {
-                                nodes[index].parentElement.style.backgroundColor = bg.style.backgroundColor;
-                            }
+                        else {
+                            nodes[index] = this.applyStyles(nodes, index, element);
                         }
                     }
                     else {
@@ -16198,6 +16219,37 @@ class SelectionCommands {
         }
         return nodes[index];
     }
+    static getPriorityFormatNode(node, endNode) {
+        const isFormatted = new IsFormatted();
+        const fontSizeNode = isFormatted.getFormattedNode(node, 'fontsize', endNode);
+        let fontColorNode;
+        let backgroundColorNode;
+        let fontNameNode;
+        if (isNullOrUndefined(fontSizeNode)) {
+            backgroundColorNode = isFormatted.getFormattedNode(node, 'backgroundcolor', endNode);
+            if (isNullOrUndefined(backgroundColorNode)) {
+                fontNameNode = isFormatted.getFormattedNode(node, 'fontname', endNode);
+                if (isNullOrUndefined(fontNameNode)) {
+                    fontColorNode = isFormatted.getFormattedNode(node, 'fontcolor', endNode);
+                    if (isNullOrUndefined(fontColorNode)) {
+                        return null;
+                    }
+                    else {
+                        return fontColorNode;
+                    }
+                }
+                else {
+                    return fontNameNode;
+                }
+            }
+            else {
+                return backgroundColorNode;
+            }
+        }
+        else {
+            return fontSizeNode;
+        }
+    }
     static getInsertNode(docElement, range, format, value) {
         const element = this.GetFormatNode(format, value);
         element.innerHTML = '&#8203;';
@@ -16458,7 +16510,7 @@ class ClearFormat$1 {
      * @hidden
      * @deprecated
      */
-    static clear(docElement, endNode, enterAction, selector) {
+    static clear(docElement, endNode, enterAction, selector, command) {
         this.domNode = new DOMNode(endNode, docElement);
         this.defaultTag = enterAction === 'P' ? this.defaultTag : 'div';
         const nodeSelection = new NodeSelection();
@@ -16468,7 +16520,7 @@ class ClearFormat$1 {
             nodeSelection.getSelectionNodeCollectionBr(range);
         const save = nodeSelection.save(range, docElement);
         let cursorRange = false;
-        if (range.collapsed) {
+        if (range.collapsed && command !== 'ClearFormat') {
             cursorRange = true;
             range = nodeCutter.GetCursorRange(docElement, range, nodes[0]);
         }
@@ -16722,7 +16774,7 @@ class ClearFormatExec {
     }
     applyClear(e) {
         if (e.subCommand === 'ClearFormat') {
-            ClearFormat$1.clear(this.parent.currentDocument, this.parent.editableElement, e.enterAction, e.selector);
+            ClearFormat$1.clear(this.parent.currentDocument, this.parent.editableElement, e.enterAction, e.selector, e.subCommand);
             if (e.callBack) {
                 e.callBack({
                     requestType: e.subCommand,
@@ -17065,6 +17117,7 @@ class MsWordPaste {
             if (!isNullOrUndefined(imgElem[i].getAttribute('v:shapes')) &&
                 imgElem[i].getAttribute('v:shapes').indexOf('Picture') < 0 &&
                 imgElem[i].getAttribute('v:shapes').indexOf('圖片') < 0 &&
+                imgElem[i].getAttribute('v:shapes').indexOf('Grafik') < 0 &&
                 imgElem[i].getAttribute('v:shapes').indexOf('Image') < 0) {
                 detach(imgElem[i]);
             }
@@ -17159,7 +17212,7 @@ class MsWordPaste {
     hexConversion(rtfData) {
         // eslint-disable-next-line
         const picHead = /\{\\pict[\s\S]+?\\bliptag\-?\d+(\\blipupi\-?\d+)?(\{\\\*\\blipuid\s?[\da-fA-F]+)?[\s\}]*?/;
-        // eslint-disable-next-line security/detect-non-literal-regexp
+        // eslint-disable-next-line
         const pic = new RegExp('(?:(' + picHead.source + '))([\\da-fA-F\\s]+)\\}', 'g');
         const fullImg = rtfData.match(pic);
         let imgType;
@@ -17223,9 +17276,9 @@ class MsWordPaste {
     removeUnwantedElements(elm) {
         let innerElement = elm.innerHTML;
         for (let i = 0; i < this.removableElements.length; i++) {
-            // eslint-disable-next-line security/detect-non-literal-regexp
+            // eslint-disable-next-line
             const regExpStartElem = new RegExp('<' + this.removableElements[i] + '>', 'g');
-            // eslint-disable-next-line security/detect-non-literal-regexp
+            // eslint-disable-next-line
             const regExpEndElem = new RegExp('</' + this.removableElements[i] + '>', 'g');
             innerElement = innerElement.replace(regExpStartElem, '');
             innerElement = innerElement.replace(regExpEndElem, '');
@@ -17316,10 +17369,10 @@ class MsWordPaste {
                 }
                 fromClass = false;
             }
-            let listClass = ['MsoListParagraphCxSpFirst', 'MsoListParagraphCxSpMiddle', 'MsoListParagraphCxSpLast'];
+            const listClass = ['MsoListParagraphCxSpFirst', 'MsoListParagraphCxSpMiddle', 'MsoListParagraphCxSpLast'];
             for (let i = 0; i < listClass.length; i++) {
                 if (keys.indexOf('li.' + listClass[i]) > -1) {
-                    let olULElems = elm.querySelectorAll('ol.' + listClass[i] + ', ul.' + listClass[i]);
+                    const olULElems = elm.querySelectorAll('ol.' + listClass[i] + ', ul.' + listClass[i]);
                     for (let j = 0; j < olULElems.length; j++) {
                         const styleProperty = olULElems[j].getAttribute('style');
                         if (!isNullOrUndefined(styleProperty) && styleProperty.trim() !== '' && olULElems[j].style.marginLeft !== '') {
@@ -17329,8 +17382,8 @@ class MsWordPaste {
                                     if (!isNullOrUndefined(valueSplit[k].split(':')[1]) &&
                                         valueSplit[k].split(':')[1].indexOf('in') >= 0 &&
                                         olULElems[j].style.marginLeft.indexOf('in') >= 0) {
-                                        let classStyle = parseFloat(valueSplit[k].split(':')[1].split('in')[0]);
-                                        let inlineStyle = parseFloat(olULElems[j].style.marginLeft.split('in')[0]);
+                                        const classStyle = parseFloat(valueSplit[k].split(':')[1].split('in')[0]);
+                                        const inlineStyle = parseFloat(olULElems[j].style.marginLeft.split('in')[0]);
                                         olULElems[j].style.marginLeft = (inlineStyle - classStyle) + 'in';
                                     }
                                 }
@@ -17526,14 +17579,14 @@ class MsWordPaste {
     }
     getlistStyleType(listContent, type) {
         let currentListClass;
-        let upperRomanNumber = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX',
+        const upperRomanNumber = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX',
             'X', 'XI', 'XII', 'XIII', 'XIV', 'XV', 'XVI', 'XVII', 'XVIII', 'XIX', 'XX'];
-        let lowerRomanNumber = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix',
+        const lowerRomanNumber = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii', 'viii', 'ix',
             'x', 'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx'];
-        let lowerGreekNumber = ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ',
+        const lowerGreekNumber = ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ',
             'μ', 'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω'];
         if (type === 'ol') {
-            let charCode = listContent.split('.')[0].charCodeAt(0);
+            const charCode = listContent.split('.')[0].charCodeAt(0);
             switch (true) {
                 case upperRomanNumber.indexOf(listContent.split('.')[0]) > -1:
                     currentListClass = 'upper-roman';
@@ -19025,6 +19078,8 @@ const IFRAMEHEADER = `
                 span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }
                 .e-table-rhelper { background-color: #4a90e2;}
                 .e-rtl { direction: rtl; }
+                .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; }
             </style>
         </head>`;
 /**
@@ -19242,7 +19297,8 @@ class XhtmlValidation {
                                 const childEle = ele.childNodes[j];
                                 if (childEle.nodeType !== 3 && childEle.nodeName !== 'TABLE' && childEle.nodeName !== 'TBODY' &&
                                     childEle.nodeName !== 'THEAD' && childEle.nodeName !== 'TH' && childEle.nodeName !== 'TR' &&
-                                    childEle.nodeName !== 'TD' && childEle.hasAttribute(attrName)) {
+                                    childEle.nodeName !== 'TD' && childEle.hasAttribute(attrName) &&
+                                    !childEle.classList.contains('e-mention-chip')) {
                                     childEle.removeAttribute(attrName);
                                 }
                                 if (childEle.hasChildNodes()) {
@@ -20175,14 +20231,22 @@ class PasteCleanup {
             this.parent.trigger(afterPasteCleanup, { value: value }, (updatedArgs) => {
                 value = updatedArgs.value;
             });
+            const tempDivElem = this.parent.createElement('div');
+            tempDivElem.innerHTML = value;
+            const isValueNotEmpty = tempDivElem.textContent !== '' || !isNullOrUndefined(tempDivElem.querySelector('img')) ||
+                !isNullOrUndefined(tempDivElem.querySelector('table'));
             if (this.parent.pasteCleanupSettings.prompt) {
-                e.args.preventDefault();
-                const tempDivElem = this.parent.createElement('div');
-                tempDivElem.innerHTML = value;
-                if (tempDivElem.textContent !== '' || !isNullOrUndefined(tempDivElem.querySelector('img')) ||
-                    !isNullOrUndefined(tempDivElem.querySelector('table'))) {
+                if (isValueNotEmpty) {
+                    e.args.preventDefault();
                     this.pasteDialog(value, args);
                 }
+                else if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                    this.fireFoxImageUpload();
+                }
+            }
+            else if (!isValueNotEmpty && !this.parent.pasteCleanupSettings.plainText &&
+                Browser.userAgent.indexOf('Firefox') !== -1) {
+                this.fireFoxImageUpload();
             }
             else if (this.parent.pasteCleanupSettings.plainText) {
                 e.args.preventDefault();
@@ -20198,6 +20262,30 @@ class PasteCleanup {
             }
         }
     }
+    fireFoxImageUpload() {
+        // Timeout 500 is added to capture after default paste image from file manager is completed.
+        setTimeout(() => {
+            if (Browser.userAgent.indexOf('Firefox') !== -1) {
+                let currentFocusNode = this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()).startContainer;
+                if (currentFocusNode.nodeName !== '#text') {
+                    currentFocusNode = currentFocusNode.childNodes[this.nodeSelectionObj.getRange(this.contentRenderer.getDocument()).startOffset];
+                }
+                if (currentFocusNode.previousSibling.nodeName === 'IMG') {
+                    currentFocusNode.previousSibling.classList.add('pasteContent_Img');
+                    currentFocusNode.previousSibling.classList.add(CLS_RTE_IMAGE);
+                    if (this.parent.insertImageSettings.display === 'inline') {
+                        currentFocusNode.previousSibling.classList.add(CLS_IMGINLINE);
+                    }
+                    else {
+                        currentFocusNode.previousSibling.classList.add(CLS_IMGBREAK);
+                    }
+                    currentFocusNode.previousSibling.classList.add();
+                    this.setImageProperties(currentFocusNode.previousSibling);
+                }
+            }
+            this.imgUploading(this.parent.inputElement);
+        }, 500);
+    }
     splitBreakLine(value) {
         const enterSplitText = value.split('\n');
         let contentInnerElem = '';
@@ -20677,24 +20765,7 @@ class PasteCleanup {
         const allImg = clipBoardElem.querySelectorAll('img');
         for (let i = 0; i < allImg.length; i++) {
             allImg[i].classList.add('pasteContent_Img');
-            if (this.parent.insertImageSettings.width !== 'auto') {
-                allImg[i].setAttribute('width', this.parent.insertImageSettings.width);
-            }
-            if (this.parent.insertImageSettings.minWidth !== '0' && this.parent.insertImageSettings.minWidth !== 0) {
-                allImg[i].style.minWidth = this.parent.insertImageSettings.minWidth.toString();
-            }
-            if (this.parent.insertImageSettings.maxWidth !== null) {
-                allImg[i].style.maxWidth = this.parent.getInsertImgMaxWidth().toString();
-            }
-            if (this.parent.insertImageSettings.height !== 'auto') {
-                allImg[i].setAttribute('height', this.parent.insertImageSettings.height);
-            }
-            if (this.parent.insertImageSettings.minHeight !== '0' && this.parent.insertImageSettings.minHeight !== 0) {
-                allImg[i].style.minHeight = this.parent.insertImageSettings.minHeight.toString();
-            }
-            if (this.parent.insertImageSettings.maxHeight !== null) {
-                allImg[i].style.maxHeight = this.parent.insertImageSettings.maxHeight.toString();
-            }
+            this.setImageProperties(allImg[i]);
         }
         this.addTempClass(clipBoardElem);
         if (clipBoardElem.textContent !== '' || !isNullOrUndefined(clipBoardElem.querySelector('img')) ||
@@ -20711,6 +20782,26 @@ class PasteCleanup {
             }
         }
     }
+    setImageProperties(allImg) {
+        if (this.parent.insertImageSettings.width !== 'auto') {
+            allImg.setAttribute('width', this.parent.insertImageSettings.width);
+        }
+        if (this.parent.insertImageSettings.minWidth !== '0' && this.parent.insertImageSettings.minWidth !== 0) {
+            allImg.style.minWidth = this.parent.insertImageSettings.minWidth.toString();
+        }
+        if (this.parent.insertImageSettings.maxWidth !== null) {
+            allImg.style.maxWidth = this.parent.getInsertImgMaxWidth().toString();
+        }
+        if (this.parent.insertImageSettings.height !== 'auto') {
+            allImg.setAttribute('height', this.parent.insertImageSettings.height);
+        }
+        if (this.parent.insertImageSettings.minHeight !== '0' && this.parent.insertImageSettings.minHeight !== 0) {
+            allImg.style.minHeight = this.parent.insertImageSettings.minHeight.toString();
+        }
+        if (this.parent.insertImageSettings.maxHeight !== null) {
+            allImg.style.maxHeight = this.parent.insertImageSettings.maxHeight.toString();
+        }
+    }
     addTempClass(clipBoardElem) {
         const allChild = clipBoardElem.children;
         for (let i = 0; i < allChild.length; i++) {
@@ -22698,7 +22789,7 @@ class Image {
         if (isNullOrUndefined(img.width)) {
             return;
         }
-        // eslint-disable-next-line security/detect-unsafe-regex
+        // eslint-disable-next-line
         const width = img.style.width !== '' ? img.style.width.match(/^\d+(\.\d*)?%$/g) ? parseFloat(img.style.width) :
             parseInt(img.style.width, 10) : img.width;
         const height = img.style.height !== '' ? parseInt(img.style.height, 10) : img.height;
@@ -22736,7 +22827,7 @@ class Image {
                     img.setAttribute('width', (img.width + this.mouseX).toString());
                 }
                 else {
-                    const currentWidth = img.offsetWidth === 0 ? img.width + this.mouseX + parseInt(img.style.outlineWidth.split('p')[0]) : img.offsetWidth + this.mouseX;
+                    const currentWidth = img.offsetWidth === 0 ? img.width + this.mouseX + parseInt(img.style.outlineWidth.split('p')[0], 10) : img.offsetWidth + this.mouseX;
                     img.setAttribute('width', (currentWidth).toString());
                 }
             }
@@ -26646,7 +26737,7 @@ class Video {
         videoUrl.appendChild(urlContent);
         this.embedInputUrl = this.parent.createElement('textarea', {
             className: 'e-input e-embed-video-url',
-            attrs: { placeholder: 'Paste Embed URL here', type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
+            attrs: { placeholder: 'Paste Embedded Code here', type: 'text', tabindex: '-1', 'aria-label': this.i10n.getConstant('embedVideoLinkHeader') }
         });
         this.embedInputUrl.addEventListener('keyup', () => {
             if (!isNullOrUndefined(this.embedInputUrl)) {
@@ -26673,7 +26764,7 @@ class Video {
             }
         });
         const embedUrlBtn = new RadioButton({
-            label: 'Embed URL',
+            label: 'Embedded Code',
             checked: true,
             name: 'URL',
             created: () => {
@@ -30442,7 +30533,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                 currentLastElem = currentLastElem.lastChild;
             }
             if (isDetached) {
-                let currentLast = currentLastElem.nodeName === 'BR' && !isNullOrUndefined(currentLastElem.previousSibling) ?
+                const currentLast = currentLastElem.nodeName === 'BR' && !isNullOrUndefined(currentLastElem.previousSibling) ?
                     currentLastElem.previousSibling : currentLastElem;
                 this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLast : currentStartContainer, currentLast, currentStartOffset, (currentLast.nodeName === 'BR' ? 0 : currentLast.textContent.length));
             }
@@ -30536,6 +30627,9 @@ let RichTextEditor = class RichTextEditor extends Component {
             if ((!isNullOrUndefined(this.placeHolderWrapper)) && (this.inputElement.textContent.length !== 1)) {
                 this.placeHolderWrapper.style.display = 'none';
             }
+            else if (this.iframeSettings.enable && this.inputElement.classList.contains("e-rte-placeholder")) {
+                removeClass([this.inputElement], "e-rte-placeholder");
+            }
             else {
                 this.setPlaceHolder();
             }
@@ -31237,6 +31331,17 @@ let RichTextEditor = class RichTextEditor extends Component {
                 this.inputElement.setAttribute('placeholder', this.placeholder);
             }
         }
+        if (this.placeholder && this.iframeSettings.enable) {
+            if (this.inputElement.textContent.length === 0 && this.inputElement.childNodes.length < 2 && !isNullOrUndefined(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
+                ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNullOrUndefined(this.inputElement.firstChild.firstChild) &&
+                    this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
+                addClass([this.inputElement], "e-rte-placeholder");
+                this.inputElement.setAttribute('placeholder', this.placeholder);
+            }
+            else {
+                removeClass([this.inputElement], "e-rte-placeholder");
+            }
+        }
     }
     setWidth(width) {
         if (width !== 'auto') {
@@ -31960,6 +32065,9 @@ let RichTextEditor = class RichTextEditor extends Component {
                 clearInterval(this.timeInterval);
                 this.timeInterval = null;
             }
+            if (!isNullOrUndefined(this.placeHolderWrapper) && this.element.querySelector('[title = Preview]')) {
+                this.placeHolderWrapper.style.display = "none";
+            }
             EventHandler.remove(document, 'mousedown', this.onDocumentClick);
         }
         else {