@syncfusion/ej2-richtexteditor 20.4.52 → 20.4.53

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

@@ -4992,6 +4992,11 @@ 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');
+            if (!isNullOrUndefined(extendedTbar)) {
+                setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });
+                setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });
+            }
             if (!trg.classList.contains('e-nav-active')) {
                 removeClass([this.tbElement], [CLS_EXPAND_OPEN]);
                 this.parent.setContentHeight('toolbar', false);
@@ -6297,10 +6302,17 @@ class QuickToolbar {
     }
     keyUpHandler(e) {
         if (this.parent.inlineMode.enable && !Browser.isDevice) {
+            const args = e.args;
             if (this.parent.inlineMode.onSelection) {
+                if (this.parent.getSelection().length > 0) {
+                    if ((args.ctrlKey && args.keyCode === 65) || (args.shiftKey && (args.keyCode === 33 || args.keyCode === 34 ||
+                        args.keyCode === 35 || args.keyCode === 36 || args.keyCode === 37 || args.keyCode === 38 ||
+                        args.keyCode === 39 || args.keyCode === 40))) {
+                        this.showInlineQTBar(this.offsetX, this.offsetY, args.target);
+                    }
+                }
                 return;
             }
-            const args = e.args;
             this.deBounce(this.offsetX, this.offsetY, args.target);
         }
     }
@@ -6953,7 +6965,7 @@ function setEditFrameFocus(editableElement, selector) {
  * @returns {void}
  * @hidden
  */
-function updateTextNode$1(value) {
+function updateTextNode$1(value, enterAction) {
     const tempNode = document.createElement('div');
     tempNode.innerHTML = value;
     tempNode.setAttribute('class', 'tempDiv');
@@ -6968,15 +6980,23 @@ function updateTextNode$1(value) {
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
                 inlineNode$1.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {
                 if (!isPreviousInlineElem) {
-                    paraElm = createElement('p');
-                    resultElm.appendChild(paraElm);
-                    paraElm.appendChild(tempNode.firstChild);
+                    if (enterAction === 'BR') {
+                        resultElm.appendChild(tempNode.firstChild);
+                        previousParent = resultElm;
+                    }
+                    else {
+                        paraElm = createElement('p');
+                        resultElm.appendChild(paraElm);
+                        paraElm.appendChild(tempNode.firstChild);
+                        previousParent = paraElm;
+                        isPreviousInlineElem = true;
+                    }
                 }
                 else {
                     previousParent.appendChild(tempNode.firstChild);
+                    previousParent = paraElm;
+                    isPreviousInlineElem = true;
                 }
-                previousParent = paraElm;
-                isPreviousInlineElem = true;
             }
             else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\n' ||
                 (tempNode.firstChild.textContent.indexOf('\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {
@@ -12621,7 +12641,7 @@ class Formats {
  * @deprecated
  */
 class InsertHtml {
-    static Insert(docElement, insertNode, editNode, isExternal) {
+    static Insert(docElement, insertNode, editNode, isExternal, enterAction) {
         let node;
         if (typeof insertNode === 'string') {
             const divNode = document.createElement('div');
@@ -12643,7 +12663,8 @@ class InsertHtml {
         const nodeCutter = new NodeCutter();
         let range = nodeSelection.getRange(docElement);
         if (range.startContainer === editNode && range.startContainer === range.endContainer && range.startOffset === 0 &&
-            range.startOffset === range.endOffset && editNode.textContent.length === 0 && editNode.children[0].tagName === 'P') {
+            range.startOffset === range.endOffset && editNode.textContent.length === 0 &&
+            (editNode.children[0].tagName === 'P' || (editNode.children[0].tagName === 'BR'))) {
             nodeSelection.setSelectionText(docElement, range.startContainer.children[0], range.startContainer.children[0], 0, 0);
             range = nodeSelection.getRange(docElement);
         }
@@ -12660,7 +12681,7 @@ class InsertHtml {
         const closestParentNode = (node.nodeName.toLowerCase() === 'table') ? this.closestEle(nodes[0].parentNode, editNode) : nodes[0];
         if (isExternal || (!isNullOrUndefined(node) && !isNullOrUndefined(node.classList) &&
             node.classList.contains('pasteContent'))) {
-            this.pasteInsertHTML(nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode);
+            this.pasteInsertHTML(nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode, enterAction);
             return;
         }
         if (editNode !== range.startContainer && ((!isCollapsed && !(closestParentNode.nodeType === Node.ELEMENT_NODE &&
@@ -12774,7 +12795,7 @@ class InsertHtml {
             }
         }
     }
-    static pasteInsertHTML(nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode) {
+    static pasteInsertHTML(nodes, node, range, nodeSelection, nodeCutter, docElement, isCollapsed, closestParentNode, editNode, enterAction) {
         const isCursor = range.startOffset === range.endOffset &&
             range.startContainer === range.endContainer;
         if (isCursor && range.startContainer === editNode && editNode.textContent === '') {
@@ -12884,7 +12905,12 @@ class InsertHtml {
                             const firstParaElm = createElement('p');
                             node.parentElement.insertBefore(firstParaElm, node);
                         }
-                        node.previousElementSibling.appendChild(node.firstChild);
+                        if (node.previousElementSibling.nodeName === 'BR') {
+                            node.parentElement.insertBefore(node.firstChild, node);
+                        }
+                        else {
+                            node.previousElementSibling.appendChild(node.firstChild);
+                        }
                     }
                     else {
                         lastSelectionNode = node.firstChild;
@@ -12916,7 +12942,7 @@ class InsertHtml {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
         }
         else {
-            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode);
+            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
         }
     }
     static placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode) {
@@ -13031,9 +13057,9 @@ class InsertHtml {
             }
         }
     }
-    static cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode) {
+    static cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction) {
         lastSelectionNode.classList.add('lastNode');
-        editNode.innerHTML = updateTextNode$1(editNode.innerHTML);
+        editNode.innerHTML = updateTextNode$1(editNode.innerHTML, enterAction);
         lastSelectionNode = editNode.querySelector('.lastNode');
         if (!isNullOrUndefined(lastSelectionNode)) {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
@@ -16205,7 +16231,7 @@ class InsertHtmlExec {
         this.parent.observer.on(INSERTHTML_TYPE, this.applyHtml, this);
     }
     applyHtml(e) {
-        InsertHtml.Insert(this.parent.currentDocument, e.value, this.parent.editableElement, true);
+        InsertHtml.Insert(this.parent.currentDocument, e.value, this.parent.editableElement, true, e.enterAction);
         if (e.subCommand === 'pasteCleanup') {
             const pastedElements = this.parent.editableElement.querySelectorAll('.pasteContent_RTE');
             const allPastedElements = [].slice.call(pastedElements);
@@ -17096,6 +17122,29 @@ class MsWordPaste {
                 }
                 fromClass = false;
             }
+            let 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]);
+                    for (let j = 0; j < olULElems.length; j++) {
+                        const styleProperty = olULElems[j].getAttribute('style');
+                        if (!isNullOrUndefined(styleProperty) && styleProperty.trim() !== '' && olULElems[j].style.marginLeft !== '') {
+                            const valueSplit = values[keys.indexOf('li.' + listClass[i])].split(';');
+                            for (let k = 0; k < valueSplit.length; k++) {
+                                if ('margin-left'.indexOf(valueSplit[k].split(':')[0]) >= 0) {
+                                    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]);
+                                        olULElems[j].style.marginLeft = (inlineStyle - classStyle) + 'in';
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
     filterStyles(elm, wordPasteStyleConfig) {
@@ -17216,12 +17265,13 @@ class MsWordPaste {
             let type;
             let listStyleType;
             let startAttr;
+            let styleMarginLeft;
             if (!isNullOrUndefined(this.listContents[0])) {
                 type = this.listContents[0].trim().length > 1 ? 'ol' : 'ul';
                 listStyleType = this.getlistStyleType(this.listContents[0], type);
-                if (type === 'ol' && listNodes[i - 1] === null) {
+                if (type === 'ol' && (i === 0 || listNodes[i - 1] === null)) {
                     const startString = this.listContents[0].split('.')[0];
-                    const listTypes = ['A', 'a', 'I', 'i', 'α', '1'];
+                    const listTypes = ['A', 'a', 'I', 'i', 'α', '1', '1-']; // Add '1-' for rare list type. 
                     if (listTypes.indexOf(startString) === -1) {
                         if (listStyleType === 'decimal') {
                             // Bug in getlistStyleType() list style stype is returned as decimal for nested list with start attribute
@@ -17229,10 +17279,16 @@ class MsWordPaste {
                                 startAttr = parseInt(startString);
                             }
                         }
-                        else if (listStyleType === 'upper-alpha' || listStyleType === 'lower-alpha') {
-                            startAttr = parseInt(startString.toLowerCase()) - 96;
+                        else if (listStyleType === 'upper-alpha') {
+                            startAttr = (startString.split('.')[0].charCodeAt(0) - 64);
+                        }
+                        else if (listStyleType === 'lower-alpha') {
+                            startAttr = (startString.split('.')[0].charCodeAt(0) - 96);
                         }
                     }
+                    if (listNodes[i].style.marginLeft !== '') {
+                        styleMarginLeft = listNodes[i].style.marginLeft;
+                    }
                 }
                 const tempNode = [];
                 for (let j = 1; j < this.listContents.length; j++) {
@@ -17250,7 +17306,7 @@ class MsWordPaste {
                     }
                 }
                 collection.push({ listType: type, content: tempNode, nestedLevel: level, class: currentClassName,
-                    listStyle: currentListStyle, listStyleTypeName: listStyleType, start: startAttr });
+                    listStyle: currentListStyle, listStyleTypeName: listStyleType, start: startAttr, styleMarginLeft: styleMarginLeft });
             }
         }
         stNode = listNodes.shift();
@@ -17276,23 +17332,30 @@ class MsWordPaste {
     }
     getlistStyleType(listContent, type) {
         let currentListClass;
+        let 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',
+            'x', 'xi', 'xii', 'xiii', 'xiv', 'xv', 'xvi', 'xvii', 'xviii', 'xix', 'xx'];
+        let lowerGreekNumber = ['α', 'β', 'γ', 'δ', 'ε', 'ζ', 'η', 'θ', 'ι', 'κ', 'λ',
+            'μ', 'ν', 'ξ', 'ο', 'π', 'ρ', 'σ', 'τ', 'υ', 'φ', 'χ', 'ψ', 'ω'];
         if (type === 'ol') {
-            switch (listContent.split('.')[0]) {
-                case 'A':
-                    currentListClass = 'upper-alpha';
-                    break;
-                case 'a':
-                    currentListClass = 'lower-alpha';
-                    break;
-                case 'I':
+            let charCode = listContent.split('.')[0].charCodeAt(0);
+            switch (true) {
+                case upperRomanNumber.indexOf(listContent.split('.')[0]) > -1:
                     currentListClass = 'upper-roman';
                     break;
-                case 'i':
+                case lowerRomanNumber.indexOf(listContent.split('.')[0]) > -1:
                     currentListClass = 'lower-roman';
                     break;
-                case 'α':
+                case lowerGreekNumber.indexOf(listContent.split('.')[0]) > -1:
                     currentListClass = 'lower-greek';
                     break;
+                case (charCode > 64 && charCode < 91):
+                    currentListClass = 'upper-alpha';
+                    break;
+                case (charCode > 96 && charCode < 123):
+                    currentListClass = 'lower-alpha';
+                    break;
                 default:
                     currentListClass = 'decimal';
                     break;
@@ -17324,11 +17387,12 @@ class MsWordPaste {
             const pElement = createElement('p');
             pElement.innerHTML = collection[index].content.join(' ');
             if ((collection[index].nestedLevel === 1) && listCount === 0 && collection[index].content) {
-                root.appendChild(temp = createElement(collection[index].listType));
+                root.appendChild(temp = createElement(collection[index].listType, { className: collection[index].class }));
                 prevList = createElement('li');
                 prevList.appendChild(pElement);
                 temp.appendChild(prevList);
                 temp.setAttribute('level', collection[index].nestedLevel.toString());
+                temp.style.marginLeft = collection[index].styleMarginLeft;
                 temp.style.listStyleType = collection[index].listStyleTypeName;
             }
             else if (collection[index].nestedLevel === pLevel) {
@@ -17659,7 +17723,7 @@ class EditorManager {
                 this.observer.notify(SELECTION_TYPE, { subCommand: value, event: event, callBack: callBack, value: text, selector: selector, enterAction: enterAction });
                 break;
             case 'inserthtml':
-                this.observer.notify(INSERTHTML_TYPE, { subCommand: value, callBack: callBack, value: text });
+                this.observer.notify(INSERTHTML_TYPE, { subCommand: value, callBack: callBack, value: text, enterAction: enterAction });
                 break;
             case 'inserttext':
                 this.observer.notify(INSERT_TEXT_TYPE, { subCommand: value, callBack: callBack, value: text });
@@ -19945,7 +20009,7 @@ class PasteCleanup {
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, (returnArgs) => {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 this.parent.formatter.onSuccess(this.parent, args);
-            }, clipBoardElem);
+            }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
             this.parent.notify(toolbarRefresh, {});
             this.imgUploading(this.parent.inputElement);
@@ -20014,7 +20078,7 @@ class PasteCleanup {
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, (returnArgs) => {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 this.parent.formatter.onSuccess(this.parent, args);
-            }, clipBoardElem);
+            }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
         }
         else {
@@ -28535,7 +28599,16 @@ class EnterKeyAction {
                                 this.parent.tableModule.removeResizeElement();
                             }
                             if (!(this.parent.inputElement.childNodes.length === 1 && this.parent.inputElement.childNodes[0].nodeName === 'TABLE')) {
-                                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.range.startContainer.childNodes[this.range.startOffset], 0);
+                                if (isNullOrUndefined(this.range.startContainer.childNodes[this.range.startOffset])) {
+                                    let currentLastElem = this.range.startContainer.childNodes[this.range.startOffset - 1];
+                                    while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {
+                                        currentLastElem = currentLastElem.lastChild;
+                                    }
+                                    this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), currentLastElem, (currentLastElem.nodeName === 'BR' ? 0 : currentLastElem.textContent.length));
+                                }
+                                else {
+                                    this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.range.startContainer.childNodes[this.range.startOffset], 0);
+                                }
                             }
                             this.getRangeNode();
                         }
@@ -28757,11 +28830,13 @@ class EnterKeyAction {
                             }
                             const isLastNodeLength = this.range.startContainer === currentParentLastChild ?
                                 this.range.startContainer.textContent.length : currentParent.textContent.length;
+                            const isImageElement = (this.range.startContainer.nodeName === 'IMG' || (this.range.startContainer.childNodes.length > 0
+                                && this.range.startContainer.childNodes[this.range.startOffset].nodeName === 'IMG'));
                             if (currentParent !== this.parent.inputElement &&
                                 this.parent.formatter.editorManager.domNode.isBlockNode(currentParent) &&
                                 this.range.startOffset === this.range.endOffset &&
                                 (this.range.startOffset === isLastNodeLength ||
-                                    (currentParent.textContent.trim().length === 0 && currentParent.lastChild.nodeName === 'IMG'))) {
+                                    (currentParent.textContent.trim().length === 0 && isImageElement))) {
                                 let focusBRElem = this.parent.createElement('br');
                                 if (this.range.startOffset === 0 && this.range.startContainer.nodeName === 'TABLE') {
                                     this.range.startContainer.parentElement.insertBefore(focusBRElem, this.range.startContainer);
@@ -28770,10 +28845,11 @@ class EnterKeyAction {
                                     if (currentParentLastChild.nodeName === 'BR' && currentParent.textContent.length === 0) {
                                         this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, currentParentLastChild);
                                     }
-                                    else if (this.range.startOffset === 0 && this.range.endOffset === 0 &&
-                                        currentParent.lastChild && currentParent.lastChild.nodeName === 'IMG') {
-                                        currentParentLastChild.parentElement.insertBefore(focusBRElem, currentParentLastChild);
-                                        focusBRElem = currentParentLastChild;
+                                    else if (this.range.startOffset === 0 && this.range.endOffset === 0 && isImageElement) {
+                                        const imageElement = this.range.startContainer.nodeName === 'IMG' ? this.range.startContainer :
+                                            this.range.startContainer.childNodes[this.range.startOffset];
+                                        currentParent.insertBefore(focusBRElem, imageElement);
+                                        focusBRElem = imageElement;
                                     }
                                     else {
                                         const lineBreakBRElem = this.parent.createElement('br');
@@ -29457,15 +29533,16 @@ let RichTextEditor = class RichTextEditor extends Component {
         const currentEndContainer = range.endContainer;
         const currentStartOffset = range.startOffset;
         const isSameContainer = currentStartContainer === currentEndContainer ? true : false;
-        const currentEndOffset = currentEndContainer.textContent.length;
         const endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
         const closestLI = closest(endNode, 'LI');
+        let isDetached = false;
         if (!isNullOrUndefined(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNullOrUndefined(endNode.nextElementSibling)) {
             for (let i = 0; i < closestLI.childNodes.length; i++) {
                 if (closestLI.childNodes[i].nodeName === '#text' && closestLI.childNodes[i].textContent.trim().length === 0) {
                     detach(closestLI.childNodes[i]);
+                    isDetached = true;
                     i--;
                 }
             }
@@ -29473,7 +29550,11 @@ let RichTextEditor = class RichTextEditor extends Component {
             while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {
                 currentLastElem = currentLastElem.lastChild;
             }
-            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentStartContainer : (currentLastElem.nodeName === 'BR' && !isNullOrUndefined(currentLastElem.previousSibling) ? currentLastElem.previousSibling : currentStartContainer), currentEndContainer, currentStartOffset, (currentLastElem.nodeName === 'BR' ? 0 : currentEndOffset));
+            if (isDetached) {
+                let 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));
+            }
         }
     }
     /**