@syncfusion/ej2-richtexteditor 25.1.35 → 25.1.38

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

@@ -3945,9 +3945,11 @@ class ToolbarRenderer {
                             for (let index = 0; index < args.element.childNodes.length; index++) {
                                 if (currentListStyle === args.element.childNodes[index].innerHTML.split(' ').join('').toLocaleLowerCase()) {
                                     addClass([args.element.childNodes[index]], 'e-active');
+                                    break;
                                 }
-                                else if (currentListStyle === '') {
+                                else if (currentListStyle === '' && args.element.childNodes[index].innerHTML !== 'None') {
                                     addClass([args.element.childNodes[index]], 'e-active');
+                                    break;
                                 }
                             }
                         }
@@ -4035,8 +4037,6 @@ class ToolbarRenderer {
             target: colorPicker.element.parentElement, cssClass: css,
             enablePersistence: this.parent.enablePersistence, enableRtl: this.parent.enableRtl,
             beforeOpen: (dropDownArgs) => {
-                colorPicker.inline = true;
-                colorPicker.dataBind();
                 if (proxy.parent.readonly || !proxy.parent.enabled) {
                     dropDownArgs.cancel = true;
                     return;
@@ -4174,14 +4174,18 @@ class ToolbarRenderer {
         const colorPicker = new ColorPicker({
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            inline: false,
-            value: '#fff',
+            inline: true,
+            value: null,
+            cssClass: ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass + ' ' + 'e-rte-picker-init',
             created: () => {
                 const value = (item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
-                colorPicker.setProperties({ value: value });
+                colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
+                colorPicker.value = value;
             },
             mode: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.mode : proxy.parent.fontColor.mode),
             modeSwitcher: ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.modeSwitcher : proxy.parent.fontColor.modeSwitcher),
+            presetColors: (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode,
+            columns: (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns,
             beforeTileRender: (args) => {
                 args.element.classList.add(CLS_COLOR_PALETTE);
                 args.element.classList.add(CLS_CUSTOM_TILE);
@@ -4226,10 +4230,6 @@ class ToolbarRenderer {
             }
         });
         colorPicker.isStringTemplate = true;
-        colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
-        colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
-            this.parent.fontColor.colorCode;
-        colorPicker.cssClass = ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER) + ' ' + args.cssClass;
         colorPicker.createElement = this.parent.createElement;
         colorPicker.appendTo(document.getElementById(args.target));
         return colorPicker;
@@ -7067,6 +7067,10 @@ class QuickToolbar {
     }
     keyDownHandler(e) {
         const preventHide = e.args.altKey;
+        if (this.parent.inlineMode.enable && e.args.metaKey && e.args.keyCode === 65) {
+            this.showInlineQTBar(this.offsetX, this.offsetY, e.args.target);
+            return;
+        }
         if (!preventHide) {
             if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
                 && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
@@ -11857,7 +11861,8 @@ class DOMNode {
             }
         }
         else {
-            if (start.tagName === 'IMG') {
+            let tagName = !isNullOrUndefined(start.parentElement) ? start.parentElement.tagName.toLocaleLowerCase() : '';
+            if (start.tagName === 'IMG' && tagName !== 'p' && tagName !== 'div') {
                 const parNode = document.createElement('p');
                 start.parentElement.insertBefore(parNode, start);
                 parNode.appendChild(start);
@@ -12408,6 +12413,7 @@ class Lists {
         endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
         startNode = startNode.nodeName !== 'LI' && !isNullOrUndefined(startNode.closest('LI')) ? startNode.closest('LI') : startNode;
         endNode = endNode.nodeName !== 'LI' && endNode.nodeName !== '#text' && !isNullOrUndefined(endNode.closest('LI')) ? endNode.closest('LI') : endNode;
+        const parentList = (range.startContainer.nodeName === '#text') ? range.startContainer.parentElement.closest('li') : range.startContainer.closest('li');
         if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
             isNullOrUndefined(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
             isNullOrUndefined(startNode.previousElementSibling) && range.startOffset === 0) ||
@@ -12424,6 +12430,12 @@ class Lists {
             }
             e.event.preventDefault();
         }
+        else if (!isNullOrUndefined(parentList) && parentList.textContent === range.startContainer.textContent && parentList.closest('li').previousElementSibling === null) {
+            range.deleteContents();
+            this.parent.editableElement.querySelectorAll('li:empty').forEach((e) => e.remove());
+            this.parent.editableElement.querySelectorAll('ol:empty').forEach((e) => e.remove());
+            e.event.preventDefault();
+        }
     }
     onKeyUp() {
         if (!isNullOrUndefined(this.commonLIParent) && !isNullOrUndefined(this.commonLIParent.querySelector('.removeList'))) {
@@ -12463,7 +12475,7 @@ class Lists {
         if (e.event.which === 8) {
             this.backspaceList(e);
         }
-        if (e.event.which === 46 && e.event.action === 'delete') {
+        if ((e.event.which === 46 && e.event.action === 'delete') || (e.event.which === 88 && e.event.action === 'cut')) {
             const range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
             const commonAncestor = range.commonAncestorContainer;
             const startEle = range.startContainer;
@@ -12935,8 +12947,17 @@ class Lists {
     }
     cleanNode() {
         const liParents = this.parent.editableElement.querySelectorAll('ol + ol, ul + ul');
+        let listStyleType;
+        let firstNodeOL;
         for (let c = 0; c < liParents.length; c++) {
             const node = liParents[c];
+            let toFindtopOlUl = true;
+            if (toFindtopOlUl && (liParents[c].parentElement.parentElement.nodeName === 'OL' || liParents[c].parentElement.parentElement.nodeName === 'UL')) {
+                toFindtopOlUl = false;
+                const preElement = liParents[c].parentElement.parentElement;
+                listStyleType = preElement.style.listStyleType;
+                firstNodeOL = node.previousElementSibling;
+            }
             if (this.domNode.isList(node.previousElementSibling) &&
                 this.domNode.openTagString(node) === this.domNode.openTagString(node.previousElementSibling)) {
                 const contentNodes = this.domNode.contents(node);
@@ -12951,6 +12972,9 @@ class Lists {
                 }
             }
         }
+        if (firstNodeOL) {
+            firstNodeOL.style.listStyleType = listStyleType;
+        }
     }
     findUnSelected(temp, elements) {
         temp = temp.slice().reverse();
@@ -13040,18 +13064,19 @@ class Lists {
                     if (DEFAULT_TAG && 0 === element.querySelectorAll(BLOCK_TAGS.join(', ')).length) {
                         const wrapperclass = isNullOrUndefined(className) ? ' class="e-rte-wrap-inner"' :
                             ' class="' + className + ' e-rte-wrap-inner"';
-                        let parentElement = parentNode;
-                        if (!isNullOrUndefined(parentElement.style.listStyleType)) {
-                            parentNode.style.removeProperty("list-style-type");
-                        }
-                        if (!isNullOrUndefined(parentElement.style.listStyleImage)) {
-                            parentNode.style.removeProperty("list-style-image");
-                        }
-                        if (parentElement.style.length === 0) {
-                            parentNode.removeAttribute("style");
+                        const parentElement = parentNode;
+                        if (elements.length === parentElement.querySelectorAll('li').length) {
+                            if (!isNullOrUndefined(parentElement.style.listStyleType)) {
+                                parentNode.style.removeProperty('list-style-type');
+                            }
+                            if (!isNullOrUndefined(parentElement.style.listStyleImage)) {
+                                parentNode.style.removeProperty('list-style-image');
+                            }
+                            if (parentElement.style.length === 0) {
+                                parentNode.removeAttribute('style');
+                            }
                         }
-                        const wrapper = '<' + DEFAULT_TAG + wrapperclass +
-                            this.domNode.attributes(parentElement) + '></' + DEFAULT_TAG + '>';
+                        const wrapper = '<' + DEFAULT_TAG + wrapperclass + '></' + DEFAULT_TAG + '>';
                         if (e.enterAction !== 'BR') {
                             this.domNode.wrapInner(element, this.domNode.parseHTMLFragment(wrapper));
                         }
@@ -14004,25 +14029,22 @@ class InsertHtml {
             TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) !== -1))
             || (node.nodeName.toLowerCase() === 'table' && closestParentNode &&
                 TABLE_BLOCK_TAGS.indexOf(closestParentNode.tagName.toLocaleLowerCase()) === -1))) {
-            if (isCollapsed) {
-                preNode = nodeCutter.SplitNode(range, closestParentNode, true);
-            }
-            else {
-                preNode = nodeCutter.SplitNode(range, closestParentNode, false);
-            }
-            sibNode = isNullOrUndefined(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;
-            if (nodes.length === 1) {
-                nodeSelection.setSelectionContents(docElement, preNode);
-                range = nodeSelection.getRange(docElement);
-                isSingleNode = true;
-            }
-            else {
-                lasNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length - 1].parentElement);
-                lasNode = isNullOrUndefined(lasNode) ? preNode : lasNode;
-                nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?
-                    lasNode.textContent.length : lasNode.childNodes.length);
-                range = nodeSelection.getRange(docElement);
-                isSingleNode = false;
+            preNode = nodeCutter.GetSpliceNode(range, closestParentNode);
+            if (!isNullOrUndefined(preNode)) {
+                sibNode = isNullOrUndefined(preNode.previousSibling) ? preNode.parentNode.previousSibling : preNode.previousSibling;
+                if (nodes.length === 1) {
+                    nodeSelection.setSelectionContents(docElement, preNode);
+                    range = nodeSelection.getRange(docElement);
+                    isSingleNode = true;
+                }
+                else {
+                    lasNode = nodeCutter.GetSpliceNode(range, nodes[nodes.length - 1].parentElement);
+                    lasNode = isNullOrUndefined(lasNode) ? preNode : lasNode;
+                    nodeSelection.setSelectionText(docElement, preNode, lasNode, 0, (lasNode.nodeType === 3) ?
+                        lasNode.textContent.length : lasNode.childNodes.length);
+                    range = nodeSelection.getRange(docElement);
+                    isSingleNode = false;
+                }
             }
         }
         let containsBlockNode = false;
@@ -17147,11 +17169,15 @@ class SelectionCommands {
             && range.endOffset === range.startContainer.length)) {
             const nodeIndex = [];
             let cloneNode = nodes[index];
+            const clonedElement = cloneNode;
             do {
                 nodeIndex.push(domSelection.getIndex(cloneNode));
                 cloneNode = cloneNode.parentNode;
             } while (cloneNode && (cloneNode !== formatNode));
             if (nodes[index].nodeName !== 'BR') {
+                if (clonedElement.nodeName === '#text' && clonedElement.textContent.includes('\u200B')) {
+                    clonedElement.remove();
+                }
                 cloneNode = splitNode = (isCursor && (formatNode.textContent.length - 1) === range.startOffset) ?
                     nodeCutter.SplitNode(range, formatNode, true)
                     : nodeCutter.GetSpliceNode(range, formatNode);
@@ -18470,7 +18496,7 @@ class MsWordPaste {
             'x', 'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx'];
         this.lowerGreekNumber = ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ',
             'μ', 'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω'];
-        this.removableElements = ['o:p', 'style'];
+        this.removableElements = ['o:p', 'style', 'w:sdt'];
         this.listContents = [];
         this.cropImageDimensions = [];
         this.parent = parent;
@@ -18835,7 +18861,7 @@ class MsWordPaste {
         let innerElement = elm.innerHTML;
         for (let i = 0; i < this.removableElements.length; i++) {
             // eslint-disable-next-line security/detect-non-literal-regexp
-            const regExpStartElem = new RegExp('<' + this.removableElements[i] + '>', 'g');
+            const regExpStartElem = new RegExp('<' + this.removableElements[i] + '\\s*[^>]*>', 'g');
             // eslint-disable-next-line security/detect-non-literal-regexp
             const regExpEndElem = new RegExp('</' + this.removableElements[i] + '>', 'g');
             innerElement = innerElement.replace(regExpStartElem, '');
@@ -21450,9 +21476,6 @@ class HtmlEditor {
     }
     onSelectionRestore(e) {
         this.parent.isBlur = false;
-        if (isNullOrUndefined(this.saveSelection) || isNullOrUndefined(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption")) ? true : !(closest(this.saveSelection.range.startContainer.parentElement, ".e-img-caption").getAttribute("contenteditable") == "false")) {
-            this.contentRenderer.getEditPanel().focus();
-        }
         if (isNullOrUndefined(e.items) || e.items) {
             this.saveSelection.restore();
         }
@@ -35883,9 +35906,7 @@ let RichTextEditor = class RichTextEditor extends Component {
             }
             else if (this.iframeSettings.enable) {
                 const iframeElement = this.element.querySelector('#' + this.getID() + '_rte-view');
-                setTimeout(() => {
-                    this.setAutoHeight(iframeElement);
-                }, 100);
+                this.setAutoHeight(iframeElement);
                 this.inputElement.style.overflow = 'hidden';
             }
         }