@syncfusion/ej2-richtexteditor 20.2.49 → 20.3.47

package/src/rich-text-editor/actions/enter-key.js

@@ -35,6 +35,7 @@ var EnterKeyAction = /** @class */ (function () {
         var _this = this;
         this.getRangeNode();
         var isTableEnter = true;
+        this.formatTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote'];
         if (!isNOU(this.startNode.closest('TABLE')) && !isNOU(this.endNode.closest('TABLE'))) {
             isTableEnter = false;
             var curElement = this.startNode;
@@ -76,16 +77,27 @@ var EnterKeyAction = /** @class */ (function () {
                             else if (_this.parent.inputElement === _this.range.startContainer) {
                                 var focusElem = _this.range.startContainer.childNodes[_this.range.startOffset];
                                 if (focusElem.nodeName === '#text' && focusElem.textContent.length === 0) {
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.previousSibling.textContent.length);
+                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.textContent.length === 0 ? 0 : focusElem.previousSibling.textContent.length);
                                 }
                                 else {
                                     _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusElem, focusElem.textContent.length >= 0 ? 0 : 1);
                                     if (focusElem.previousSibling.textContent.length === 0) {
                                         detach(focusElem.previousSibling);
+                                        if (!shiftKey_1) {
+                                            var currentFocusElem = !isNOU(focusElem.lastChild) ? focusElem.lastChild : focusElem;
+                                            while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text' && currentFocusElem.nodeName !== 'BR') {
+                                                currentFocusElem = currentFocusElem.lastChild;
+                                            }
+                                            if (currentFocusElem.nodeName != 'BR' && currentFocusElem.parentElement.textContent.length === 0 && currentFocusElem.parentElement.innerHTML.length === 0 &&
+                                                currentFocusElem.parentElement.nodeName != 'BR') {
+                                                currentFocusElem.parentElement.appendChild(_this.parent.createElement('BR'));
+                                            }
+                                            _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem.nodeName === 'BR' ? currentFocusElem : currentFocusElem.parentElement, currentFocusElem.parentElement.textContent.length >= 0 || currentFocusElem.nodeName === 'BR' ? 0 : 1);
+                                        }
                                     }
                                     else if (focusElem.textContent.length === 0) {
-                                        var currentFocusElem = focusElem.previousSibling.lastChild;
-                                        while (currentFocusElem.nodeName !== '#text') {
+                                        var currentFocusElem = focusElem.previousSibling.nodeName === '#text' ? focusElem.previousSibling : focusElem.previousSibling.lastChild;
+                                        while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {
                                             currentFocusElem = currentFocusElem.lastChild;
                                         }
                                         _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), currentFocusElem, currentFocusElem.textContent.length);
@@ -102,121 +114,154 @@ var EnterKeyAction = /** @class */ (function () {
                         }
                         if (_this.range.startContainer === _this.range.endContainer &&
                             _this.range.startOffset === _this.range.endOffset && _this.range.startContainer === _this.parent.inputElement) {
-                            _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.range.startContainer.childNodes[_this.range.startOffset], 0);
+                            if (!isNOU(_this.range.startContainer.childNodes[_this.range.startOffset]) &&
+                                !isNOU(_this.range.startContainer.childNodes[_this.range.startOffset].previousElementSibling) &&
+                                _this.range.startContainer.childNodes[_this.range.startOffset].previousElementSibling.nodeName === 'TABLE') {
+                                _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);
+                            }
                             _this.getRangeNode();
                         }
                         if ((_this.parent.enterKey === 'P' && !shiftKey_1) || (_this.parent.enterKey === 'DIV' && !shiftKey_1) ||
                             (_this.parent.shiftEnterKey === 'P' && shiftKey_1) ||
                             (_this.parent.shiftEnterKey === 'DIV' && shiftKey_1)) {
-                            var nearBlockNode = void 0;
-                            if (isTableEnter && _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {
-                                nearBlockNode = _this.startNode;
+                            if (_this.range.startOffset === 1 && _this.parent.inputElement.childNodes.length === 1 && _this.parent.inputElement.childNodes[0].nodeName === 'TABLE') {
+                                var newElem = _this.createInsertElement(shiftKey_1);
+                                newElem.appendChild(_this.parent.createElement('BR'));
+                                _this.parent.inputElement.appendChild(newElem);
+                                _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, 0);
                             }
                             else {
-                                nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);
-                            }
-                            var isImageNode = false;
-                            var isFocusedFirst = false;
-                            if (_this.range.startOffset != 0 && _this.range.endOffset != 0 && _this.range.startContainer === _this.range.endContainer &&
-                                !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
-                                var startNodeText = _this.range.startContainer.textContent;
-                                var splitFirstText = startNodeText.substring(0, _this.range.startOffset);
-                                if (splitFirstText.charCodeAt(_this.range.startOffset - 1) != 160 && splitFirstText.trim().length === 0) {
-                                    isFocusedFirst = true;
-                                }
-                            }
-                            else if (_this.range.startOffset === 0 && _this.range.endOffset === 0) {
-                                isFocusedFirst = true;
-                            }
-                            _this.removeBRElement(nearBlockNode);
-                            var fireFoxEnterAtMiddle = Browser.userAgent.indexOf('Firefox') != -1 && _this.range.startOffset === 0 && _this.range.startContainer === _this.range.endContainer &&
-                                _this.range.startContainer.nodeName === '#text' && !_this.parent.formatter.editorManager.domNode.isBlockNode(_this.range.startContainer.previousSibling) &&
-                                _this.range.startContainer.parentElement === _this.range.startContainer.previousSibling.parentElement;
-                            if (!fireFoxEnterAtMiddle && ((_this.range.startOffset === 0 && _this.range.endOffset === 0) || isFocusedFirst) &&
-                                !(!isNOU(_this.range.startContainer.previousSibling) &&
-                                    (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {
-                                var isNearBlockLengthZero = void 0;
-                                var newElem = void 0;
-                                if (_this.range.startContainer.nodeName === 'IMG') {
-                                    newElem = _this.createInsertElement(shiftKey_1);
-                                    isImageNode = true;
-                                    isNearBlockLengthZero = false;
+                                var nearBlockNode = void 0;
+                                if (isTableEnter && _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode)) {
+                                    nearBlockNode = _this.startNode;
                                 }
                                 else {
-                                    if (nearBlockNode.textContent.trim().length !== 0 ||
-                                        nearBlockNode.childNodes[0].nodeName === 'IMG') {
-                                        newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
+                                    nearBlockNode = _this.parent.formatter.editorManager.domNode.blockParentNode(_this.startNode);
+                                }
+                                var isImageNode = false;
+                                var isFocusedFirst = false;
+                                if (_this.range.startOffset !== 0 && _this.range.endOffset !== 0 &&
+                                    _this.range.startContainer === _this.range.endContainer && !(!isNOU(nearBlockNode.childNodes[0])
+                                    && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
+                                    var startNodeText = _this.range.startContainer.textContent;
+                                    var splitFirstText = startNodeText.substring(0, _this.range.startOffset);
+                                    if (splitFirstText.charCodeAt(_this.range.startOffset - 1) !== 160 && splitFirstText.trim().length === 0) {
+                                        isFocusedFirst = true;
+                                    }
+                                }
+                                else if (_this.range.startOffset === 0 && _this.range.endOffset === 0) {
+                                    isFocusedFirst = true;
+                                }
+                                _this.removeBRElement(nearBlockNode);
+                                var fireFoxEnterAtMiddle = Browser.userAgent.indexOf('Firefox') !== -1 && _this.range.startOffset === 0 && _this.range.startContainer === _this.range.endContainer &&
+                                    _this.range.startContainer.nodeName === '#text' && !_this.parent.formatter.editorManager.domNode.isBlockNode(_this.range.startContainer.previousSibling) &&
+                                    _this.range.startContainer.parentElement === _this.range.startContainer.previousSibling.parentElement;
+                                if (!fireFoxEnterAtMiddle && ((_this.range.startOffset === 0 && _this.range.endOffset === 0) || isFocusedFirst) &&
+                                    !(!isNOU(_this.range.startContainer.previousSibling) &&
+                                        (_this.range.startContainer.previousSibling.nodeName === 'IMG' || _this.range.startContainer.previousSibling.nodeName === 'BR'))) {
+                                    var isNearBlockLengthZero = void 0;
+                                    var newElem = void 0;
+                                    if (_this.range.startContainer.nodeName === 'IMG' || _this.range.startContainer.nodeName === 'TABLE') {
+                                        newElem = _this.createInsertElement(shiftKey_1);
+                                        isImageNode = true;
                                         isNearBlockLengthZero = false;
                                     }
                                     else {
-                                        newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true).cloneNode(true);
-                                        isNearBlockLengthZero = true;
+                                        if ((nearBlockNode.textContent.trim().length !== 0 ||
+                                            nearBlockNode.childNodes[0].nodeName === 'IMG')) {
+                                            if ((_this.range.startOffset === _this.range.endOffset && _this.range.startOffset != 0)) {
+                                                newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
+                                            }
+                                            else {
+                                                newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true).cloneNode(true);
+                                                isImageNode = true;
+                                            }
+                                            isNearBlockLengthZero = false;
+                                        }
+                                        else {
+                                            newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true).cloneNode(true);
+                                            isNearBlockLengthZero = true;
+                                        }
                                     }
-                                }
-                                var insertElem = _this.createInsertElement(shiftKey_1);
-                                while (newElem.firstChild) {
-                                    insertElem.appendChild(newElem.firstChild);
-                                }
-                                nearBlockNode.parentElement.insertBefore(insertElem, nearBlockNode);
-                                if (!isNearBlockLengthZero) {
-                                    var currentFocusElem = insertElem;
-                                    var finalFocusElem = void 0;
-                                    while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {
-                                        finalFocusElem = currentFocusElem;
-                                        currentFocusElem = currentFocusElem.lastChild;
+                                    var insertElem = void 0;
+                                    if (_this.formatTags.indexOf(newElem.nodeName.toLocaleLowerCase()) < 0) {
+                                        insertElem = _this.createInsertElement(shiftKey_1);
                                     }
-                                    finalFocusElem.innerHTML = '<br>';
-                                    if (!isImageNode) {
-                                        detach(nearBlockNode);
+                                    else {
+                                        insertElem = _this.parent.createElement(newElem.nodeName);
                                     }
+                                    while (newElem.firstChild) {
+                                        insertElem.appendChild(newElem.firstChild);
+                                    }
+                                    nearBlockNode.parentElement.insertBefore(insertElem, nearBlockNode);
+                                    if (!isNearBlockLengthZero) {
+                                        var currentFocusElem = insertElem;
+                                        var finalFocusElem = void 0;
+                                        while (!isNOU(currentFocusElem) && currentFocusElem.nodeName !== '#text') {
+                                            finalFocusElem = currentFocusElem;
+                                            currentFocusElem = currentFocusElem.lastChild;
+                                        }
+                                        finalFocusElem.innerHTML = '<br>';
+                                        if (!isImageNode) {
+                                            detach(nearBlockNode);
+                                        }
+                                    }
+                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
                                 }
-                                _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem.nextElementSibling, 0);
-                            }
-                            else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
-                                if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
-                                    var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(newElem, nearBlockNode);
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, newElem.textContent.length >= 0 ? 0 : 1);
-                                }
-                                else {
-                                    var insertElem = _this.createInsertElement(shiftKey_1);
-                                    insertElem.innerHTML = '<br>';
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(insertElem, nearBlockNode);
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem, 0);
-                                }
-                            }
-                            else {
-                                var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);
-                                if (!isNOU(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&
-                                    newElem.childNodes[0].textContent.length === 0) {
-                                    detach(newElem.childNodes[0]);
-                                }
-                                if (newElem.textContent.trim().length === 0) {
-                                    var brElm = _this.parent.createElement('br');
-                                    if (_this.startNode.nodeName === 'A') {
-                                        var startParentElem = _this.startNode.parentElement;
-                                        _this.startNode.parentElement.insertBefore(brElm, _this.startNode);
-                                        detach(_this.startNode);
-                                        _this.startNode = startParentElem;
+                                else if (nearBlockNode.textContent.length === 0 && !(!isNOU(nearBlockNode.childNodes[0]) && nearBlockNode.childNodes[0].nodeName === 'IMG')) {
+                                    if (!isNOU(nearBlockNode.children[0]) && nearBlockNode.children[0].tagName !== 'BR') {
+                                        var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, false).cloneNode(true);
+                                        _this.parent.formatter.editorManager.domNode.insertAfter(newElem, nearBlockNode);
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), newElem, newElem.textContent.length >= 0 ? 0 : 1);
                                     }
                                     else {
-                                        _this.startNode.appendChild(brElm);
+                                        var insertElem = _this.createInsertElement(shiftKey_1);
+                                        insertElem.innerHTML = '<br>';
+                                        _this.parent.formatter.editorManager.domNode.insertAfter(insertElem, nearBlockNode);
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), insertElem, 0);
                                     }
-                                    if (newElem.childNodes[0].textContent === '\n') {
+                                }
+                                else {
+                                    var newElem = _this.parent.formatter.editorManager.nodeCutter.SplitNode(_this.range, nearBlockNode, true);
+                                    if (!isNOU(newElem.childNodes[0]) && newElem.childNodes[0].nodeName === '#text' &&
+                                        newElem.childNodes[0].textContent.length === 0) {
                                         detach(newElem.childNodes[0]);
                                     }
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.startNode, 0);
-                                }
-                                if (((_this.parent.enterKey === 'P' || _this.parent.enterKey === 'DIV') && !shiftKey_1) || ((_this.parent.shiftEnterKey === 'DIV' ||
-                                    _this.parent.shiftEnterKey === 'P') && shiftKey_1)) {
-                                    var insertElm = _this.createInsertElement(shiftKey_1);
-                                    while (newElem.firstChild) {
-                                        insertElm.appendChild(newElem.firstChild);
+                                    if (newElem.textContent.trim().length === 0) {
+                                        var brElm = _this.parent.createElement('br');
+                                        if (_this.startNode.nodeName === 'A') {
+                                            var startParentElem = _this.startNode.parentElement;
+                                            _this.startNode.parentElement.insertBefore(brElm, _this.startNode);
+                                            detach(_this.startNode);
+                                            _this.startNode = startParentElem;
+                                        }
+                                        else {
+                                            if (_this.startNode.nodeName != 'BR') {
+                                                _this.startNode.appendChild(brElm);
+                                            }
+                                        }
+                                        if (newElem.childNodes[0].textContent === '\n') {
+                                            detach(newElem.childNodes[0]);
+                                        }
+                                        _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.startNode, 0);
+                                    }
+                                    if (((_this.parent.enterKey === 'P' || _this.parent.enterKey === 'DIV') && !shiftKey_1) || ((_this.parent.shiftEnterKey === 'DIV' ||
+                                        _this.parent.shiftEnterKey === 'P') && shiftKey_1)) {
+                                        var isHeadingTag = _this.formatTags.indexOf(newElem.nodeName.toLocaleLowerCase());
+                                        if ((isHeadingTag < 0) || (isHeadingTag >= 0 && newElem.textContent.trim().length === 0)) {
+                                            var insertElm = _this.createInsertElement(shiftKey_1);
+                                            while (newElem.firstChild) {
+                                                insertElm.appendChild(newElem.firstChild);
+                                            }
+                                            _this.parent.formatter.editorManager.domNode.insertAfter(insertElm, newElem);
+                                            detach(newElem);
+                                            _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode) ?
+                                                insertElm : _this.startNode, 0);
+                                        }
                                     }
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(insertElm, newElem);
-                                    detach(newElem);
-                                    _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), _this.parent.formatter.editorManager.domNode.isBlockNode(_this.startNode) ?
-                                        insertElm : _this.startNode, 0);
                                 }
                             }
                             e.args.preventDefault();
@@ -249,13 +294,18 @@ var EnterKeyAction = /** @class */ (function () {
                                 _this.range.startOffset === _this.range.endOffset &&
                                 _this.range.startOffset === isLastNodeLength) {
                                 var focusBRElem = _this.parent.createElement('br');
-                                if (currentParentLastChild.nodeName === 'BR' && currentParent.textContent.length === 0) {
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, currentParentLastChild);
+                                if (_this.range.startOffset === 0 && _this.range.startContainer.nodeName === 'TABLE') {
+                                    _this.range.startContainer.parentElement.insertBefore(focusBRElem, _this.range.startContainer);
                                 }
                                 else {
-                                    var lineBreakBRElem = _this.parent.createElement('br');
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, _this.range.startContainer);
-                                    _this.parent.formatter.editorManager.domNode.insertAfter(lineBreakBRElem, _this.range.startContainer);
+                                    if (currentParentLastChild.nodeName === 'BR' && currentParent.textContent.length === 0) {
+                                        _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, currentParentLastChild);
+                                    }
+                                    else {
+                                        var lineBreakBRElem = _this.parent.createElement('br');
+                                        _this.parent.formatter.editorManager.domNode.insertAfter(focusBRElem, _this.range.startContainer);
+                                        _this.parent.formatter.editorManager.domNode.insertAfter(lineBreakBRElem, _this.range.startContainer);
+                                    }
                                 }
                                 _this.parent.formatter.editorManager.nodeSelection.setCursorPoint(_this.parent.contentModule.getDocument(), focusBRElem, 0);
                             }
@@ -300,7 +350,7 @@ var EnterKeyAction = /** @class */ (function () {
         }
     };
     EnterKeyAction.prototype.removeBRElement = function (currentElement) {
-        if (Browser.userAgent.indexOf('Firefox') != -1 &&
+        if (Browser.userAgent.indexOf('Firefox') !== -1 &&
             this.range.endOffset === currentElement.textContent.length && (currentElement.textContent.length !== 0 ||
             currentElement.querySelectorAll('BR').length > 1) &&
             !isNOU(currentElement.lastChild) && currentElement.lastChild.nodeName === 'BR') {
@@ -309,6 +359,10 @@ var EnterKeyAction = /** @class */ (function () {
     };
     EnterKeyAction.prototype.insertBRElement = function () {
         var isEmptyBrInserted = false;
+        var isFocusTextNode = true;
+        if (this.range.endContainer.textContent.length == 0 && this.range.startContainer.nodeName === "BR") {
+            isFocusTextNode = false;
+        }
         var brElm = this.parent.createElement('br');
         if (this.startNode.nodeName === 'BR' && this.endNode.nodeName === 'BR' && this.range.startOffset === 0 && this.range.startOffset === this.range.endOffset) {
             this.parent.formatter.editorManager.domNode.insertAfter(brElm, this.startNode);
@@ -322,7 +376,7 @@ var EnterKeyAction = /** @class */ (function () {
             this.range.insertNode(brElm);
         }
         if (isEmptyBrInserted || (!isNOU(brElm.nextElementSibling) && brElm.nextElementSibling.tagName === 'BR') || (!isNOU(brElm.nextSibling) && brElm.nextSibling.textContent.length > 0)) {
-            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNOU(brElm.nextSibling) ? brElm.nextSibling : brElm, 0);
+            this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), !isNOU(brElm.nextSibling) && isFocusTextNode ? brElm.nextSibling : brElm, 0);
             isEmptyBrInserted = false;
         }
         else {

package/src/rich-text-editor/actions/html-editor.d.ts

@@ -42,6 +42,7 @@ export declare class HtmlEditor {
     private updateReadOnly;
     private onSelectionSave;
     private onSelectionRestore;
+    private isTableClassAdded;
     private onKeyUp;
     private onKeyDown;
     private isOrderedList;

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

@@ -69,6 +69,7 @@ var HtmlEditor = /** @class */ (function () {
         this.parent.on(events.selectionRestore, this.onSelectionRestore, this);
         this.parent.on(events.readOnlyMode, this.updateReadOnly, this);
         this.parent.on(events.paste, this.onPaste, this);
+        this.parent.on(events.tableclass, this.isTableClassAdded, this);
     };
     HtmlEditor.prototype.updateReadOnly = function () {
         if (this.parent.readonly) {
@@ -92,6 +93,14 @@ var HtmlEditor = /** @class */ (function () {
             this.saveSelection.restore();
         }
     };
+    HtmlEditor.prototype.isTableClassAdded = function () {
+        var tableElement = this.parent.inputElement.querySelectorAll('table');
+        for (var i = 0; i < tableElement.length; i++) {
+            if (!tableElement[i].classList.contains('e-rte-table')) {
+                tableElement[i].classList.add('e-rte-table');
+            }
+        }
+    };
     HtmlEditor.prototype.onKeyUp = function (e) {
         var args = e.args;
         var restrictKeys = [8, 9, 13, 16, 17, 18, 20, 27, 37, 38, 39, 40, 44, 45, 46, 91,
@@ -100,11 +109,39 @@ var HtmlEditor = /** @class */ (function () {
         var regEx = new RegExp(String.fromCharCode(8203), 'g');
         var pointer;
         if (restrictKeys.indexOf(args.keyCode) < 0 && !args.shiftKey && !args.ctrlKey && !args.altKey) {
+            pointer = range.startOffset;
+            range.startContainer.nodeName === '#text' ? range.startContainer.parentElement.classList.add('currentStartMark') : range.startContainer.classList.add('currentStartMark');
             if (range.startContainer.textContent.charCodeAt(0) === 8203) {
-                pointer = range.startOffset - 1;
+                pointer = range.startOffset === 0 ? range.startOffset : range.startOffset - 1;
                 range.startContainer.textContent = range.startContainer.textContent.replace(regEx, '');
                 this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), range.startContainer, pointer);
             }
+            var previousLength = this.parent.inputElement.innerHTML.length;
+            var currentLength = this.parent.inputElement.innerHTML.replace(regEx, '').length;
+            if (previousLength > currentLength) {
+                var currentChild = this.parent.inputElement.firstChild;
+                while (!isNOU(currentChild) && currentChild.textContent.replace(regEx, '').trim().length > 0) {
+                    currentChild.innerHTML = currentChild.innerHTML.replace(regEx, '');
+                    currentChild = currentChild.nextElementSibling;
+                }
+                if (this.parent.inputElement.querySelector('.currentStartMark').childNodes.length > 1) {
+                    var currentChild_1 = this.parent.inputElement.querySelector('.currentStartMark').childNodes;
+                    for (var i = 0; i < currentChild_1.length; i++) {
+                        if (currentChild_1[i].nodeName === '#text' && currentChild_1[i].textContent.length === 0) {
+                            detach(currentChild_1[i]);
+                            i--;
+                        }
+                    }
+                }
+                this.parent.formatter.editorManager.nodeSelection.setCursorPoint(this.parent.contentModule.getDocument(), this.parent.inputElement.querySelector('.currentStartMark').childNodes[0], pointer);
+            }
+            var currentElem = this.parent.inputElement.querySelector('.currentStartMark');
+            if (!isNOU(currentElem)) {
+                currentElem.classList.remove('currentStartMark');
+                if (currentElem.getAttribute('class').trim() === '') {
+                    currentElem.removeAttribute('class');
+                }
+            }
             if (!isNOU(range.startContainer.previousSibling) && !isNOU(range.startContainer.previousSibling.parentElement) &&
                 range.startContainer.parentElement === range.startContainer.previousSibling.parentElement &&
                 range.startContainer.previousSibling.textContent.charCodeAt(0) === 8203 &&
@@ -526,6 +563,16 @@ var HtmlEditor = /** @class */ (function () {
                     member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                 });
             }
+            if (item.command === 'Audios') {
+                this.parent.notify(events.audioToolbarAction, {
+                    member: 'audio', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                });
+            }
+            if (item.command === 'Videos') {
+                this.parent.notify(events.videoToolbarAction, {
+                    member: 'video', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                });
+            }
             if (item.command === 'Links') {
                 this.parent.notify(events.linkToolbarAction, {
                     member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
@@ -574,6 +621,16 @@ var HtmlEditor = /** @class */ (function () {
                         member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                     });
                     break;
+                case 'Audio':
+                    this.parent.notify(events.insertAudio, {
+                        member: 'audio', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                    });
+                    break;
+                case 'Video':
+                    this.parent.notify(events.insertVideo, {
+                        member: 'video', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                    });
+                    break;
                 case 'CreateTable':
                     this.parent.notify(events.createTable, {
                         member: 'table', args: args, selection: save
@@ -628,6 +685,7 @@ var HtmlEditor = /** @class */ (function () {
         this.parent.off(events.selectionRestore, this.onSelectionRestore);
         this.parent.off(events.readOnlyMode, this.updateReadOnly);
         this.parent.off(events.paste, this.onPaste);
+        this.parent.off(events.tableclass, this.isTableClassAdded);
     };
     HtmlEditor.prototype.render = function () {
         this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);

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

@@ -80,7 +80,8 @@ var PasteCleanup = /** @class */ (function () {
                 var file = e && e.args.clipboardData &&
                     e.args.clipboardData.items.length > 0 ?
                     (e.args.clipboardData.items[0].getAsFile() === null ?
-                        (!isNOU(e.args.clipboardData.items[1]) ? e.args.clipboardData.items[1].getAsFile() : null) :
+                        (!isNOU(e.args.clipboardData.items[1]) ?
+                            e.args.clipboardData.items[1].getAsFile() : null) :
                         e.args.clipboardData.items[0].getAsFile()) : null;
                 this.parent.notify(events.paste, {
                     file: file,

package/src/rich-text-editor/actions/quick-toolbar.d.ts

@@ -18,6 +18,8 @@ export declare class QuickToolbar {
     linkQTBar: BaseQuickToolbar;
     textQTBar: BaseQuickToolbar;
     imageQTBar: BaseQuickToolbar;
+    audioQTBar: BaseQuickToolbar;
+    videoQTBar: BaseQuickToolbar;
     tableQTBar: BaseQuickToolbar;
     inlineQTBar: BaseQuickToolbar;
     private renderFactory;