@syncfusion/ej2-richtexteditor 28.1.38 → 28.1.39

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

@@ -1,4 +1,4 @@
-import { isNullOrUndefined, Browser, addClass, removeClass, selectAll as selectAll$1, createElement, detach, SanitizeHtmlHelper, extend, EventHandler, closest, getInstance, formatUnit, select, Ajax, Base, Property, Event as Event$1, NotifyPropertyChanges, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, getComponent, getEnumValue, Complex, Component, print, L10n, compile, Touch } from '@syncfusion/ej2-base';
+import { isNullOrUndefined, Browser, addClass, removeClass, selectAll as selectAll$1, createElement, detach, SanitizeHtmlHelper, extend, EventHandler, closest, getInstance, formatUnit, select, Ajax, Base, Property, Event as Event$1, NotifyPropertyChanges, getComponent, ChildProperty, KeyboardEvents as KeyboardEvents$1, setStyleAttribute, getUniqueID, append, debounce, Observer, prepend, attributes, getEnumValue, Complex, Component, print, L10n, compile, Touch } from '@syncfusion/ej2-base';
 import { Toolbar as Toolbar$1 } from '@syncfusion/ej2-navigations';
 import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { Tooltip, Popup, Dialog, isCollide, getScrollableParent } from '@syncfusion/ej2-popups';
@@ -4793,11 +4793,6 @@ class NodeSelection {
 /**
  * Defines common util methods used by Rich Text Editor.
  */
-const inlineNode$1 = ['a', 'abbr', 'acronym', 'audio', 'b', 'bdi', 'bdo', 'big', 'br', 'button',
-    'canvas', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'font', 'i', 'iframe', 'img', 'input',
-    'ins', 'kbd', 'label', 'map', 'mark', 'meter', 'noscript', 'object', 'output', 'picture', 'progress',
-    'q', 'ruby', 's', 'samp', 'script', 'select', 'slot', 'small', 'span', 'strong', 'strike', 'sub', 'sup', 'svg',
-    'template', 'textarea', 'time', 'u', 'tt', 'var', 'video', 'wbr'];
 /**
  * @returns {void}
  * @hidden
@@ -4825,109 +4820,68 @@ function setEditFrameFocus(editableElement, selector) {
 }
 /**
  * @param {string} value - specifies the string value
- * @param {string} enterAction - specifies the enter key action API
  * @returns {void}
  * @hidden
  */
-function updateTextNode$1(value, enterAction) {
-    const tempNode = document.createElement('div');
-    tempNode.innerHTML = value;
-    tempNode.setAttribute('class', 'tempDiv');
+function updateTextNode$1(value) {
     const resultElm = document.createElement('div');
-    const childNodes = tempNode.childNodes;
-    if (childNodes.length > 0) {
-        let isPreviousInlineElem;
-        let previousParent;
-        let paraElm;
-        while (tempNode.firstChild) {
-            if ((tempNode.firstChild.nodeName === '#text' &&
-                (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
-                inlineNode$1.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {
-                if (!isPreviousInlineElem) {
-                    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;
-                }
-            }
-            else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\n' ||
-                (tempNode.firstChild.textContent.indexOf('\n') >= 0 && tempNode.firstChild.textContent.trim() === ''))) {
-                detach(tempNode.firstChild);
+    resultElm.innerHTML = value;
+    const tableElm = resultElm.querySelectorAll('table');
+    for (let i = 0; i < tableElm.length; i++) {
+        if (tableElm[i].classList.length > 0 &&
+            !tableElm[i].classList.contains('e-rte-table') && !tableElm[i].classList.contains('e-rte-custom-table')) {
+            tableElm[i].classList.add('e-rte-paste-table');
+            if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
+                tableElm[i].classList.remove('e-rte-paste-word-table');
+                continue; // Skiping the removal of the border if the source is from word.
             }
-            else {
-                resultElm.appendChild(tempNode.firstChild);
-                isPreviousInlineElem = false;
-            }
-        }
-        const tableElm = resultElm.querySelectorAll('table');
-        for (let i = 0; i < tableElm.length; i++) {
-            if (tableElm[i].classList.length > 0 &&
-                !tableElm[i].classList.contains('e-rte-table') && !tableElm[i].classList.contains('e-rte-custom-table')) {
-                tableElm[i].classList.add('e-rte-paste-table');
-                if (tableElm[i].classList.contains('e-rte-paste-word-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-word-table');
-                    continue; // Skiping the removal of the border if the source is from word.
+            else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
+                tableElm[i].classList.remove('e-rte-paste-excel-table');
+                if (tableElm[i].getAttribute('border') === '0') {
+                    tableElm[i].removeAttribute('border');
                 }
-                else if (tableElm[i].classList.contains('e-rte-paste-excel-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-excel-table');
-                    if (tableElm[i].getAttribute('border') === '0') {
-                        tableElm[i].removeAttribute('border');
+                const tdElm = tableElm[i].querySelectorAll('td');
+                for (let j = 0; j < tdElm.length; j++) {
+                    if (tdElm[j].style.borderLeft === 'none') {
+                        tdElm[j].style.removeProperty('border-left');
                     }
-                    const tdElm = tableElm[i].querySelectorAll('td');
-                    for (let j = 0; j < tdElm.length; j++) {
-                        if (tdElm[j].style.borderLeft === 'none') {
-                            tdElm[j].style.removeProperty('border-left');
-                        }
-                        if (tdElm[j].style.borderRight === 'none') {
-                            tdElm[j].style.removeProperty('border-right');
-                        }
-                        if (tdElm[j].style.borderBottom === 'none') {
-                            tdElm[j].style.removeProperty('border-bottom');
-                        }
-                        if (tdElm[j].style.borderTop === 'none') {
-                            tdElm[j].style.removeProperty('border-top');
-                        }
-                        if (tdElm[j].style.border === 'none') {
-                            tdElm[j].style.removeProperty('border');
-                        }
+                    if (tdElm[j].style.borderRight === 'none') {
+                        tdElm[j].style.removeProperty('border-right');
+                    }
+                    if (tdElm[j].style.borderBottom === 'none') {
+                        tdElm[j].style.removeProperty('border-bottom');
+                    }
+                    if (tdElm[j].style.borderTop === 'none') {
+                        tdElm[j].style.removeProperty('border-top');
+                    }
+                    if (tdElm[j].style.border === 'none') {
+                        tdElm[j].style.removeProperty('border');
                     }
                 }
-                else if (tableElm[i].classList.contains('e-rte-paste-onenote-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-onenote-table');
-                    continue;
-                }
-                else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
-                    tableElm[i].classList.remove('e-rte-paste-html-table');
-                    continue;
-                }
-            }
-        }
-        const imageElm = resultElm.querySelectorAll('img');
-        for (let 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('e-rte-image')) {
-                imageElm[i].classList.add('e-rte-image');
+            else if (tableElm[i].classList.contains('e-rte-paste-onenote-table')) {
+                tableElm[i].classList.remove('e-rte-paste-onenote-table');
+                continue;
             }
-            if (!(imageElm[i].classList.contains('e-imginline') ||
-                imageElm[i].classList.contains('e-imgbreak'))) {
-                imageElm[i].classList.add('e-imginline');
+            else if (tableElm[i].classList.contains('e-rte-paste-html-table')) {
+                tableElm[i].classList.remove('e-rte-paste-html-table');
+                continue;
             }
         }
     }
+    const imageElm = resultElm.querySelectorAll('img');
+    for (let 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('e-rte-image')) {
+            imageElm[i].classList.add('e-rte-image');
+        }
+        if (!(imageElm[i].classList.contains('e-imginline') ||
+            imageElm[i].classList.contains('e-imgbreak'))) {
+            imageElm[i].classList.add('e-imginline');
+        }
+    }
     return resultElm.innerHTML;
 }
 /**
@@ -6143,7 +6097,6 @@ class ToolbarRenderer {
         let proxy = this;
         let value;
         const colorPicker = new ColorPicker({
-            enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
             inline: true,
             value: null,
@@ -6654,10 +6607,10 @@ class Link {
         }
         if (!this.selfLink.isUrl(linkUrl)) {
             if (this.selfLink.parent.editorMode === 'Markdown') {
-                linkText = (linkText !== '') ? linkText : '';
+                linkText = (linkText.trim() !== '') ? linkText : '';
             }
             else {
-                linkText = (linkText === '') ? linkUrl : linkText;
+                linkText = (linkText.trim() === '') ? linkUrl : linkText;
             }
             if (!this.selfLink.parent.enableAutoUrl) {
                 linkUrl = linkUrl.indexOf('http') > -1 ? linkUrl : 'http://' + linkUrl;
@@ -12488,7 +12441,6 @@ class Table {
         this.parent.on(tableToolbarAction, this.onToolbarAction, this);
         this.parent.on(dropDownSelect, this.dropdownSelect, this);
         this.parent.on(keyDown, this.keyDown, this);
-        this.parent.on(keyUp, this.keyUp, this);
         this.parent.on(tableModulekeyUp, this.tableModulekeyUp, this);
         this.parent.on(bindCssClass, this.setCssClass, this);
         this.parent.on(destroy, this.destroy, this);
@@ -12509,7 +12461,6 @@ class Table {
         this.parent.off(mouseDown, this.cellSelect);
         this.parent.off(tableColorPickerChanged, this.setBGColor);
         this.parent.off(keyDown, this.keyDown);
-        this.parent.off(keyUp, this.keyUp);
         this.parent.off(tableModulekeyUp, this.tableModulekeyUp);
         this.parent.off(bindCssClass, this.setCssClass);
         this.parent.off(destroy, this.destroy);
@@ -12606,20 +12557,6 @@ class Table {
         this.parent.formatter.process(this.parent, e, e, { selection: selectCell, subCommand: e.item.subCommand });
         this.hideTableQuickToolbar();
     }
-    keyUp(e) {
-        const target = e.args.target;
-        if (e.args.key.toLocaleLowerCase() === 'escape' && target && target.classList && (this.popupObj && !closest(target, '[id=' + '\'' + this.popupObj.element.id + '\'' + ']')) && this.popupObj) {
-            let createTableToolbarBtn = this.popupObj.relateTo;
-            if (createTableToolbarBtn.nodeName !== 'BUTTON') {
-                createTableToolbarBtn = createTableToolbarBtn.querySelector('span.e-create-table');
-                createTableToolbarBtn = createTableToolbarBtn.parentElement;
-            }
-            this.popupObj.hide();
-            if (createTableToolbarBtn) {
-                createTableToolbarBtn.focus();
-            }
-        }
-    }
     keyDown(e) {
         const event = e.args;
         // eslint-disable-next-line
@@ -14191,6 +14128,8 @@ class Table {
         const header = '1X1';
         const insertbtn = this.l10n.getConstant('inserttablebtn');
         this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup' + this.parent.getCssClass(true), id: this.rteID + '_table' });
+        this.createTablePopupBoundFn = this.createTablePopupKeyDown.bind(this);
+        this.dlgDiv.addEventListener('keydown', this.createTablePopupBoundFn);
         this.tblHeader = this.parent.createElement('div', { className: 'e-rte-popup-header' + this.parent.getCssClass(true) });
         this.tblHeader.innerHTML = header;
         this.dlgDiv.appendChild(this.tblHeader);
@@ -14228,6 +14167,7 @@ class Table {
             // eslint-disable-next-line
             close: (event) => {
                 EventHandler.remove(btnEle, 'click', this.insertTableDialog);
+                this.dlgDiv.removeEventListener('keydown', this.createTablePopupBoundFn);
                 detach(btnEle);
                 if (this.createTableButton && !this.createTableButton.isDestroyed) {
                     this.createTableButton.destroy();
@@ -14609,6 +14549,7 @@ class Table {
             this.createTableButton.destroy();
             this.createTableButton = null;
         }
+        this.createTablePopupBoundFn = null;
         this.isDestroyed = true;
     }
     /**
@@ -14634,6 +14575,15 @@ class Table {
                 'px; left:' + (tablePosition.left + parseInt(getComputedStyle(this.curTable).width, 10) - 4) + 'px;';
         }
     }
+    createTablePopupKeyDown(e) {
+        if (e.key === 'Escape') {
+            const popupRootElem = e.target.closest('.e-rte-table-popup');
+            const popup = getComponent(popupRootElem, 'popup');
+            const tableToolbarButton = popup.relateTo;
+            popup.hide();
+            tableToolbarButton.focus({ preventScroll: true });
+        }
+    }
 }
 
 /**
@@ -22303,7 +22253,7 @@ class InsertHtml {
             nodeSelection.setSelectionText(docElement, lastSelectionNode, lastSelectionNode, 0, 0);
         }
         else {
-            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction);
+            this.cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode);
         }
         this.alignCheck(editNode);
         this.listCleanUp(nodeSelection, docElement);
@@ -22563,9 +22513,9 @@ class InsertHtml {
             }
         }
     }
-    static cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode, enterAction) {
+    static cursorPos(lastSelectionNode, node, nodeSelection, docElement, editNode) {
         lastSelectionNode.classList.add('lastNode');
-        editNode.innerHTML = updateTextNode$1(editNode.innerHTML, enterAction);
+        editNode.innerHTML = updateTextNode$1(editNode.innerHTML);
         lastSelectionNode = editNode.querySelector('.lastNode');
         if (!isNullOrUndefined(lastSelectionNode)) {
             this.placeCursorEnd(lastSelectionNode, node, nodeSelection, docElement, editNode);
@@ -24044,6 +23994,17 @@ class Lists {
         }
         return false;
     }
+    createAutoList(enterKey, shiftEnterKey) {
+        const autoListRules = {
+            BR: { BR: true, P: true, DIV: true },
+            P: { BR: false, P: true, DIV: true },
+            DIV: { BR: false, P: true, DIV: true }
+        };
+        if (autoListRules[enterKey] && autoListRules[enterKey][shiftEnterKey] !== undefined) {
+            return autoListRules[enterKey][shiftEnterKey];
+        }
+        return false;
+    }
     spaceList(e) {
         const range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
         this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);
@@ -24059,7 +24020,8 @@ class Lists {
         const startElementOLTest = this.testCurrentList(range);
         const preElementOLTest = this.testList(preElement);
         const nextElementOLTest = this.testList(nextElement);
-        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+        const nextElementBRTest = range.startContainer.previousElementSibling && range.startContainer.previousElementSibling.tagName === 'BR';
+        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*' && (this.createAutoList(e.enterKey, e.shiftEnterKey) || !nextElementBRTest)) {
             const brElement = createElement('br');
             if (startElementOLTest) {
                 range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
@@ -33007,7 +32969,9 @@ class HtmlEditor {
                 const eventArgs = {
                     callBack: null,
                     event: e.args,
-                    name: 'keydown-handler'
+                    name: 'keydown-handler',
+                    enterKey: this.parent.enterKey,
+                    shiftEnterKey: this.parent.shiftEnterKey
                 };
                 const actionBeginArgs = {
                     cancel: false,
@@ -37726,7 +37690,7 @@ class EnterKeyAction {
                         if ((this.parent.enterKey === 'P' && !shiftKey) || (this.parent.enterKey === 'DIV' && !shiftKey) ||
                             (this.parent.shiftEnterKey === 'P' && shiftKey) ||
                             (this.parent.shiftEnterKey === 'DIV' && shiftKey)) {
-                            if ((this.range.startOffset === 1 && this.parent.inputElement.childNodes.length === 1 && this.parent.inputElement.childNodes[0].nodeName === 'TABLE') || (this.parent.enterKey === 'BR' && shiftKey)) {
+                            if ((this.range.startOffset === 1 && this.parent.inputElement.childNodes.length === 1 && this.parent.inputElement.childNodes[0].nodeName === 'TABLE')) {
                                 const newElem = this.createInsertElement(shiftKey);
                                 newElem.appendChild(this.parent.createElement('BR'));
                                 this.parent.inputElement.appendChild(newElem);
@@ -37785,8 +37749,9 @@ class EnterKeyAction {
                                     (this.range.startContainer.nodeName === '#text' && !isNullOrUndefined(this.range.startContainer.textContent[this.range.startOffset]) &&
                                         this.range.startContainer.textContent[this.range.startOffset].includes('\u200B') && this.range.startContainer.textContent[this.range.startOffset] === '\u200B' &&
                                         this.parent.inputElement.textContent[0] !== '\u200B'));
+                                const preventEnterkeyShiftKey = (this.range.startContainer.nodeName === '#text' || this.range.startContainer.nodeName === 'BR') && (this.range.startOffset === 0 && this.range.endOffset === 0) && this.range.startContainer.parentElement === this.parent.inputElement && this.parent.enterKey === 'BR' && shiftKey;
                                 // eslint-disable-next-line max-len
-                                if (!preventZeroWithSpace && !fireFoxEnterAtMiddle && ((this.range.startOffset === 0 && this.range.endOffset === 0) || isFocusedFirst) &&
+                                if (!preventEnterkeyShiftKey && !preventZeroWithSpace && !fireFoxEnterAtMiddle && ((this.range.startOffset === 0 && this.range.endOffset === 0) || isFocusedFirst) &&
                                     !(!isNullOrUndefined(this.range.startContainer.previousSibling) &&
                                         (this.range.startContainer.previousSibling.nodeName === 'IMG' || this.range.startContainer.previousSibling.nodeName === 'BR'))) {
                                     let isNearBlockLengthZero;
@@ -37851,7 +37816,7 @@ class EnterKeyAction {
                                     }
                                     this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
                                 }
-                                else if (nearBlockNode.textContent.length === 0 && !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
+                                else if (nearBlockNode !== this.parent.inputElement && nearBlockNode.textContent.length === 0 && !(!isNullOrUndefined(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG' ||
                                     (nearBlockNode.querySelectorAll('video').length > 0) || (nearBlockNode.querySelectorAll('audio').length > 0) || (nearBlockNode.querySelectorAll('img').length > 0))) {
                                     if (!isNullOrUndefined(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
                                         const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, false).cloneNode(true);
@@ -37907,6 +37872,36 @@ class EnterKeyAction {
                                         this.parent.videoModule.hideVideoQuickToolbar();
                                     }
                                 }
+                                else if (this.parent.enterKey === 'BR' && shiftKey && this.range.startContainer.nodeType === Node.TEXT_NODE && this.range.startContainer.parentElement && this.range.startContainer.parentElement === this.parent.inputElement) {
+                                    const range = this.range;
+                                    const startContainer = range.startContainer;
+                                    const startOffset = range.startOffset;
+                                    const newElement = this.parent.createElement(this.parent.shiftEnterKey);
+                                    if (startContainer.nodeType === Node.TEXT_NODE && range.endOffset !== 0 && range.startOffset !== 0) {
+                                        const textNode = startContainer;
+                                        if (startOffset < textNode.length) {
+                                            const newTextNode = textNode.splitText(startOffset);
+                                            newElement.appendChild(newTextNode);
+                                        }
+                                        else {
+                                            newElement.innerHTML = '<br>';
+                                        }
+                                        textNode.parentNode.insertBefore(newElement, textNode.nextSibling);
+                                        this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), newElement, 0);
+                                    }
+                                    else if (startOffset === 0 && range.endOffset === 0) {
+                                        newElement.innerHTML = '<br>';
+                                        if (range.endOffset === startContainer.textContent.length) {
+                                            const brElement = this.parent.createElement('br');
+                                            startContainer.parentNode.insertBefore(brElement, startContainer);
+                                        }
+                                        startContainer.parentNode.insertBefore(newElement, startContainer);
+                                        const cursorTarget = (range.endOffset === startContainer.textContent.length)
+                                            ? newElement : newElement.nextSibling;
+                                        startContainer.parentNode.insertBefore(newElement, startContainer);
+                                        this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), cursorTarget, 0);
+                                    }
+                                }
                                 else {
                                     const newElem = this.parent.formatter.editorManager.nodeCutter.SplitNode(this.range, nearBlockNode, true);
                                     if (!isNullOrUndefined(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&
@@ -39769,7 +39764,7 @@ let RichTextEditor = class RichTextEditor extends Component {
                 this.placeHolderWrapper.innerHTML = this.placeholder;
                 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'))) {
+                        this.inputElement.firstChild.childNodes.length < 2 && this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
                     this.placeHolderWrapper.classList.add('enabled');
                 }
                 else {
@@ -40503,7 +40498,6 @@ let RichTextEditor = class RichTextEditor extends Component {
             const value = this.getUpdatedValue();
             this.setProperties({ value: value });
             this.valueContainer.value = this.value;
-            this.notify(toolbarRefresh, { args: e, documentNode: document });
             this.isValueChangeBlurhandler = true;
             this.invokeChangeEvent();
             this.isFocusOut = true;