@syncfusion/ej2-richtexteditor - npm Package Compare versions

Comparing version 17.1.49 to 17.2.28-beta

CHANGELOG.md

@@ -7,4 +7,21 @@ # Changelog
 
+#### New Features
+
+- **Paste from Microsoft Word**
+    - This feature allows users to paste clean-formatted HTML markup by removing all unnecessary elements, styles, and attributes from text while copying and pasting it from Microsoft Word.
+
+#### Breaking Changes
+
+- Changed the default value of the API property `allowedStyleProps` from `null` to `['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style','height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width',  'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width']`.
+
 #### Bug Fixes
 
+- #238872 - Issue with cursor position when enabled list with empty editor that issue has been resolved.
+
+## 17.1.49 (2019-05-29)
+
+### RichTextEditor
+
+#### Bug Fixes
+
 - #235461 - Thrown the console error while rendering the RichTextEditor within a table element and pressing the tab key from edit area that issue has been resolved.
@@ -48,2 +65,6 @@
 
+- #237729 - Pickers mode throws script error when selecting the color in table's quick toolbar, that issue has been fixed.
+
+- #237729 - Color picker value doesn't set as RGBA(alpha) value in content editor, that issue has been fixed.
+
 ## 17.1.32-beta (2019-03-13)
@@ -59,2 +80,4 @@
 
+-`Undo` and `Redo` icon visible in preview mode issue has been fixed
+
 #### New Features
@@ -61,0 +84,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.1.49
+*  version : 17.2.28-beta
 *  Copyright Syncfusion Inc. 2001 - 2019. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@17.1.48",
+  "_id": "@syncfusion/ej2-richtexteditor@17.1.38",
   "_inBundle": false,
-  "_integrity": "sha512-irZnzHA0Pgl9gdRg5r1oa4oRpd7vjzq73wdIS6Hydd+TaC7sWXMdKvF/OpBTKYD7cJYPZ1XCmQ2NPjkPjkZcIg==",
+  "_integrity": "sha512-2Xe6Q2xOnj8uQBrZqvWrsHGB2hZ4wgxLTYQQ/7uc6KJmdGWSQcyDE5ZJeM+br0ag4MezfvTuYp4PDcgaEw0dnw==",
   "_location": "/@syncfusion/ej2-richtexteditor",
@@ -25,7 +25,8 @@ "_phantomChildren": {},
     "/@syncfusion/ej2-inplace-editor",
+    "/@syncfusion/ej2-pdfviewer",
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-17.1.48.tgz",
-  "_shasum": "8a9ccb71e0865b85f20a32b579923a670f9a246c",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-release/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-17.1.38.tgz",
+  "_shasum": "7bf7af34affd420b3c33d206edeea681a4dba70a",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
@@ -41,6 +42,6 @@ "_where": "/jenkins/workspace/ation_hotfix_16.4.0.42_Vol4-CJVRBFC7Z7RSISPRJNEMNQSRMCB6XTG67IJD6R2DVNXFIKQEITTQ/packages/included",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.49",
-    "@syncfusion/ej2-navigations": "~17.1.49",
-    "@syncfusion/ej2-popups": "~17.1.47",
-    "@syncfusion/ej2-splitbuttons": "~17.1.47"
+    "@syncfusion/ej2-base": "~17.2.28-beta",
+    "@syncfusion/ej2-navigations": "~17.2.28-beta",
+    "@syncfusion/ej2-popups": "~17.2.28-beta",
+    "@syncfusion/ej2-splitbuttons": "~17.2.28-beta"
   },
@@ -70,4 +71,4 @@ "deprecated": false,
   },
-  "version": "17.1.49",
+  "version": "17.2.28-beta",
   "sideEffects": false
 }

src/editor-manager/base/editor-manager.js

@@ -77,3 +77,7 @@ import { Observer } from '@syncfusion/ej2-base';
             case 'alignments':
-                this.observer.notify(CONSTANT.ALIGNMENT_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
+                this.observer.notify(CONSTANT.ALIGNMENT_TYPE, {
+                    subCommand: value, event: event, callBack: callBack,
+                    selector: selector,
+                    value: exeValue
+                });
                 break;
@@ -87,3 +91,5 @@ case 'indents':
             case 'images':
-                this.observer.notify(CONSTANT.IMAGE, { command: command, value: value, item: exeValue, event: event, callBack: callBack });
+                this.observer.notify(CONSTANT.IMAGE, {
+                    command: command, value: value, item: exeValue, event: event, callBack: callBack, selector: selector
+                });
                 break;
@@ -90,0 +96,0 @@ case 'table':

src/editor-manager/base/interface.d.ts

@@ -67,2 +67,3 @@ import { NodeSelection } from './../../selection/index';
     value: string;
+    selector: string;
     callBack(args: IHtmlFormatterCallBack): () => void;
@@ -69,0 +70,0 @@ }

src/editor-manager/plugin/alignments.d.ts

@@ -16,3 +16,4 @@ import { EditorManager } from './../base/editor-manager';
     private onKeyDown;
+    private getTableNode;
     private applyAlignment;
 }

src/editor-manager/plugin/alignments.js

 import * as CONSTANT from './../base/constant';
-import { setStyleAttribute } from '@syncfusion/ej2-base';
+import { setStyleAttribute, closest } from '@syncfusion/ej2-base';
 import * as EVENTS from './../../common/constant';
@@ -48,17 +48,42 @@ import { isIDevice, setEditFrameFocus } from '../../common/util';
     };
+    Alignments.prototype.getTableNode = function (range) {
+        var startNode = range.startContainer.nodeType === Node.ELEMENT_NODE ? range.startContainer : range.startContainer.parentNode;
+        var tdNode = closest(startNode, 'td');
+        return [tdNode];
+    };
     Alignments.prototype.applyAlignment = function (e) {
+        var isTableAlign = e.value === 'Table' ? true : false;
         var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
         var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
-        this.parent.domNode.setMarker(save);
-        var alignmentNodes = this.parent.domNode.blockNodes();
-        for (var i = 0; i < alignmentNodes.length; i++) {
-            var parentNode = alignmentNodes[i];
-            setStyleAttribute(parentNode, { 'text-align': this.alignments[e.subCommand] });
+        if (!isTableAlign) {
+            this.parent.domNode.setMarker(save);
+            var alignmentNodes = this.parent.domNode.blockNodes();
+            for (var i = 0; i < alignmentNodes.length; i++) {
+                var parentNode = alignmentNodes[i];
+                setStyleAttribute(parentNode, { 'text-align': this.alignments[e.subCommand] });
+            }
+            var imageTags = this.parent.domNode.getImageTagInSelection();
+            for (var i = 0; i < imageTags.length; i++) {
+                var elementNode = [];
+                elementNode.push(imageTags[i]);
+                this.parent.imgObj.imageCommand({
+                    item: {
+                        selectNode: elementNode
+                    },
+                    subCommand: e.subCommand,
+                    value: e.subCommand,
+                    callBack: e.callBack,
+                    selector: e.selector
+                });
+            }
+            this.parent.editableElement.focus();
+            save = this.parent.domNode.saveMarker(save);
+            if (isIDevice()) {
+                setEditFrameFocus(this.parent.editableElement, e.selector);
+            }
+            save.restore();
         }
-        this.parent.editableElement.focus();
-        save = this.parent.domNode.saveMarker(save);
-        if (isIDevice()) {
-            setEditFrameFocus(this.parent.editableElement, e.selector);
+        else {
+            setStyleAttribute(this.getTableNode(range)[0], { 'text-align': this.alignments[e.subCommand] });
         }
-        save.restore();
         if (e.callBack) {
@@ -70,3 +95,3 @@ e.callBack({
                 range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
-                elements: this.parent.domNode.blockNodes()
+                elements: (isTableAlign ? this.getTableNode(range) : this.parent.domNode.blockNodes())
             });
@@ -73,0 +98,0 @@ }

src/editor-manager/plugin/clearformat.d.ts

 export declare class ClearFormat {
     private static BLOCK_TAGS;
     private static NONVALID_PARENT_TAGS;
+    private static IGNORE_PARENT_TAGS;
     private static NONVALID_TAGS;
@@ -5,0 +6,0 @@ static clear(docElement: Document, endNode: Node, selector?: string): void;

src/editor-manager/plugin/clearformat.js

@@ -140,2 +140,5 @@ /**
                     && parentNodes[index1].parentNode.nodeName.toLocaleLowerCase() !== 'p'
+                    && !((parentNodes[index1].nodeName.toLocaleLowerCase() === 'blockquote'
+                        || parentNodes[index1].nodeName.toLocaleLowerCase() === 'li')
+                        && this.IGNORE_PARENT_TAGS.indexOf(parentNodes[index1].childNodes[0].nodeName.toLocaleLowerCase()) > -1)
                     && !(parentNodes[index1].childNodes.length === 1
@@ -160,2 +163,11 @@ && parentNodes[index1].childNodes[0].nodeName.toLocaleLowerCase() === 'p')) {
                     }
+                    else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&
+                        childNodes[index2].parentNode.nodeName.toLocaleLowerCase() === childNodes[index2].nodeName.toLocaleLowerCase()) {
+                        InsertMethods.unwrap(childNodes[index2]);
+                    }
+                    else if (this.BLOCK_TAGS.indexOf(childNodes[index2].nodeName.toLocaleLowerCase()) > -1 &&
+                        childNodes[index2].nodeName.toLocaleLowerCase() === 'p') {
+                        InsertMethods.Wrap(childNodes[index2], docElement.createElement('p'));
+                        InsertMethods.unwrap(childNodes[index2]);
+                    }
                 }
@@ -196,2 +208,3 @@ }
     ClearFormat.NONVALID_PARENT_TAGS = ['thead', 'tbody', 'ul', 'ol', 'table', 'tfoot', 'tr'];
+    ClearFormat.IGNORE_PARENT_TAGS = ['ul', 'ol', 'table'];
     ClearFormat.NONVALID_TAGS = ['thead', 'tbody', 'figcaption', 'td', 'tr',
@@ -198,0 +211,0 @@ 'th', 'tfoot', 'figcaption', 'li'];

src/editor-manager/plugin/dom-node.d.ts

@@ -50,5 +50,7 @@ import { NodeSelection } from './../../selection/index';
     setMarker(save: NodeSelection): void;
+    ensureSelfClosingTag(start: Element, className: string, range: Range): void;
     createTempNode(element: Element): Element;
+    getImageTagInSelection(): NodeListOf<HTMLImageElement>;
     blockNodes(): Node[];
     private ignoreTableTag;
 }

src/editor-manager/plugin/dom-node.js

@@ -221,4 +221,11 @@ import * as CONSTANT from './../base/constant';
         var endTextNode;
-        if (start.textContent === '' && isNullOrUndefined(end) && action !== 'tab') {
-            start.innerHTML = '';
+        if (start.textContent === '' && isNullOrUndefined(end) && action !== 'tab' &&
+            (!isNullOrUndefined(start.parentElement) && start.parentElement.tagName !== 'LI' &&
+                this.parent.textContent !== '')) {
+            if (start.childNodes.length === 1 && start.childNodes[0].nodeName === 'BR') {
+                start.innerHTML = '&#65279;&#65279;<br>';
+            }
+            else {
+                start.innerHTML = '&#65279;&#65279;';
+            }
         }
@@ -305,16 +312,24 @@ if (this.hasClass(start, markerClassName.startSelection) && start.classList.length > 1) {
             else {
-                this.replaceWith(end, this.marker(markerClassName.endSelection, this.encode(end.textContent)));
+                this.ensureSelfClosingTag(end, markerClassName.endSelection, range);
             }
         }
         else {
-            if (start.nodeType === 3) {
-                this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+            this.ensureSelfClosingTag(start, markerClassName.startSelection, range);
+        }
+    };
+    DOMNode.prototype.ensureSelfClosingTag = function (start, className, range) {
+        if (start.nodeType === 3) {
+            this.replaceWith(start, this.marker(className, this.encode(start.textContent)));
+        }
+        else if (start.tagName === 'BR') {
+            this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+            var markerStart = range.startContainer.querySelector('.' + markerClassName.startSelection);
+            markerStart.appendChild(start);
+        }
+        else {
+            for (var i = 0; i < selfClosingTags.length; i++) {
+                start = start.tagName === selfClosingTags[i] ? start.parentNode : start;
             }
-            else {
-                for (var i = 0; i < selfClosingTags.length; i++) {
-                    start = start.tagName === selfClosingTags[i] ? start.parentNode : start;
-                }
-                var marker = this.marker(markerClassName.startSelection, '');
-                append([this.parseHTMLFragment(marker)], start);
-            }
+            var marker = this.marker(className, '');
+            append([this.parseHTMLFragment(marker)], start);
         }
@@ -348,2 +363,9 @@ };
     };
+    DOMNode.prototype.getImageTagInSelection = function () {
+        var selection = this.getSelection();
+        if (this.isEditorArea() && selection.rangeCount) {
+            return selection.focusNode.querySelectorAll('img');
+        }
+        return null;
+    };
     DOMNode.prototype.blockNodes = function () {
@@ -371,3 +393,8 @@ var collectionNodes = [];
                             startNode.previousSibling : startNode;
-                        collectionNodes.push(this.createTempNode(tempNode));
+                        if (!startNode.nextSibling && !startNode.previousSibling && startNode.tagName === 'BR') {
+                            collectionNodes.push(tempNode);
+                        }
+                        else {
+                            collectionNodes.push(this.createTempNode(tempNode));
+                        }
                     }
@@ -374,0 +401,0 @@ else {

src/editor-manager/plugin/image.d.ts

 import { EditorManager } from './../base/editor-manager';
+import { IHtmlItem } from './../base/interface';
 /**
@@ -14,3 +15,3 @@ * Link internal component
     private addEventListener;
-    private imageCommand;
+    imageCommand(e: IHtmlItem): void;
     private createImage;
@@ -17,0 +18,0 @@ private insertImageLink;

src/editor-manager/plugin/image.js

@@ -1,2 +0,2 @@
-import { createElement, isNullOrUndefined, detach, closest, addClass, removeClass } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, detach, closest, addClass, removeClass, select, Browser } from '@syncfusion/ej2-base';
 import * as CONSTANT from './../base/constant';
@@ -96,5 +96,15 @@ import * as classes from './../base/classes';
             }
-            InsertHtml.Insert(this.parent.currentDocument, imgElement, this.parent.editableElement);
+            if (!isNullOrUndefined(e.selector) && e.selector === 'pasteCleanupModule') {
+                e.callBack({ requestType: 'Image',
+                    editorMode: 'HTML',
+                    event: e.event,
+                    range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
+                    elements: imgElement
+                });
+            }
+            else {
+                InsertHtml.Insert(this.parent.currentDocument, imgElement, this.parent.editableElement);
+            }
         }
-        if (e.callBack) {
+        if (e.callBack && (isNullOrUndefined(e.selector) || !isNullOrUndefined(e.selector) && e.selector !== 'pasteCleanupModule')) {
             e.callBack({
@@ -115,2 +125,6 @@ requestType: 'Image',
         });
+        if (e.item.selectNode[0].parentElement.classList.contains('e-img-wrap')) {
+            e.item.selection.restore();
+            anchor.setAttribute('contenteditable', 'true');
+        }
         anchor.appendChild(e.item.selectNode[0]);
@@ -128,4 +142,19 @@ if (!isNullOrUndefined(e.item.target)) {
     ImageCommand.prototype.removeImageLink = function (e) {
-        detach(closest(e.item.selectParent[0], 'a'));
-        InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);
+        var selectParent = e.item.selectParent[0];
+        if (selectParent.classList.contains('e-img-caption')) {
+            var capImgWrap = select('.e-img-wrap', selectParent);
+            var textEle = select('.e-img-inner', selectParent);
+            var newTextEle = textEle.cloneNode(true);
+            detach(select('a', selectParent));
+            detach(textEle);
+            capImgWrap.appendChild(e.item.insertElement);
+            capImgWrap.appendChild(newTextEle);
+        }
+        else {
+            detach(selectParent);
+            if (Browser.isIE) {
+                e.item.selection.restore();
+            }
+            InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);
+        }
         this.callBack(e);
@@ -132,0 +161,0 @@ };

src/editor-manager/plugin/inserthtml.js

 import { NodeSelection } from './../../selection/index';
 import { NodeCutter } from './nodecutter';
 import * as CONSTANT from './../base/constant';
-import { detach } from '@syncfusion/ej2-base';
+import { detach, Browser } from '@syncfusion/ej2-base';
 import { InsertMethods } from './insert-methods';
@@ -88,3 +88,10 @@ /**
             range.deleteContents();
-            range.insertNode(node);
+            if (Browser.isIE) {
+                var frag = docElement.createDocumentFragment();
+                frag.appendChild(node);
+                range.insertNode(frag);
+            }
+            else {
+                range.insertNode(node);
+            }
             if (node.nodeType !== 3 && node.childNodes.length > 0) {
@@ -91,0 +98,0 @@ nodeSelection.setSelectionText(docElement, node, node, 1, 1);

src/editor-manager/plugin/link.js

@@ -43,3 +43,3 @@ import { createElement, isNullOrUndefined, closest } from '@syncfusion/ej2-base';
             anchorEle.setAttribute('title', e.item.title);
-            anchorEle.innerHTML = e.item.text;
+            anchorEle.innerText = e.item.text;
             if (!isNullOrUndefined(e.item.target)) {
@@ -93,3 +93,3 @@ anchorEle.setAttribute('target', e.item.target);
         }
-        return arr.join(' ');
+        return arr.join(' ') + ' ';
     };
@@ -96,0 +96,0 @@ LinkCommand.prototype.openLink = function (e) {

src/editor-manager/plugin/lists.d.ts

@@ -19,2 +19,5 @@ import { EditorManager } from './../base/editor-manager';
     private addEventListener;
+    private testList;
+    private testCurrentList;
+    private spaceList;
     private keyDownHandler;
@@ -21,0 +24,0 @@ private getAction;

src/editor-manager/plugin/lists.js

@@ -7,2 +7,3 @@ import * as CONSTANT from './../base/constant';
 import { isIDevice, setEditFrameFocus } from '../../common/util';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -26,3 +27,58 @@ * Lists internal component
     };
+    Lists.prototype.testList = function (elem) {
+        var olListRegex = [/^[\d]+[.]+$/,
+            /^(?=[MDCLXVI])M*(C[MD]|D?C{0,3})(X[CL]|L?X{0,3})(I[XV]|V?I{0,3})[.]$/gi,
+            /^[a-zA-Z][.]+$/];
+        var elementStart = !isNullOrUndefined(elem) ? elem.innerText.trim().split('.')[0] + '.' : null;
+        if (!isNullOrUndefined(elementStart)) {
+            for (var i = 0; i < olListRegex.length; i++) {
+                if (olListRegex[i].test(elementStart)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    Lists.prototype.testCurrentList = function (range) {
+        var olListStartRegex = [/^[1]+[.]+$/, /^[i]+[.]+$/, /^[a]+[.]+$/];
+        if (!isNullOrUndefined(range.startContainer.textContent.slice(0, range.startOffset))) {
+            for (var i = 0; i < olListStartRegex.length; i++) {
+                if (olListStartRegex[i].test(range.startContainer.textContent.slice(0, range.startOffset))) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    Lists.prototype.spaceList = function (e) {
+        var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        this.saveSelection = this.parent.nodeSelection.save(range, this.parent.currentDocument);
+        var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
+        var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
+        var preElement = startNode.previousElementSibling;
+        var nextElement = startNode.nextElementSibling;
+        var preElemULStart = !isNullOrUndefined(preElement) ?
+            preElement.innerText.trim().substring(0, 1) : null;
+        var nextElemULStart = !isNullOrUndefined(nextElement) ?
+            nextElement.innerText.trim().substring(0, 1) : null;
+        var startElementOLTest = this.testCurrentList(range);
+        var preElementOLTest = this.testList(preElement);
+        var nextElementOLTest = this.testList(nextElement);
+        if (!preElementOLTest && !nextElementOLTest && preElemULStart !== '*' && nextElemULStart !== '*') {
+            if (startElementOLTest) {
+                range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                this.applyListsHandler({ subCommand: 'OL', callBack: e.callBack });
+                e.event.preventDefault();
+            }
+            else if (range.startContainer.textContent.slice(0, range.startOffset) === '*') {
+                range.startContainer.textContent = range.startContainer.textContent.slice(range.startOffset, range.startContainer.textContent.length);
+                this.applyListsHandler({ subCommand: 'UL', callBack: e.callBack });
+                e.event.preventDefault();
+            }
+        }
+    };
     Lists.prototype.keyDownHandler = function (e) {
+        if (e.event.which === 32) {
+            this.spaceList(e);
+        }
         if (e.event.which === 9) {
@@ -29,0 +85,0 @@ var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);

src/editor-manager/plugin/ms-word-clean-up.d.ts

@@ -14,5 +14,19 @@ import { EditorManager } from '../base/editor-manager';
     blockNode: string[];
+    removableElements: string[];
     listContents: string[];
     addEventListener(): void;
     wordCleanup(e: NotifyArgs): void;
+    removeClassName(elm: HTMLElement): void;
+    breakLineAddition(elm: HTMLElement): void;
+    findDetachElem(element: Element): HTMLElement;
+    removeUnwantedElements(elm: HTMLElement): void;
+    findDetachEmptyElem(element: Element): HTMLElement;
+    removeEmptyElements(element: HTMLElement): void;
+    styleCorrection(elm: HTMLElement, wordPasteStyleConfig: string[]): void;
+    filterStyles(elm: HTMLElement, wordPasteStyleConfig: string[]): void;
+    removeUnwantedStyle(values: string[], wordPasteStyleConfig: string[]): string[];
+    findStyleObject(styles: string[]): {
+        [key: string]: string;
+    };
+    removingComments(elm: HTMLElement): void;
     cleanUp(node: HTMLElement, listNodes: Element[]): Element[];
@@ -19,0 +33,0 @@ listConverter(listNodes: Element[]): void;

src/editor-manager/plugin/ms-word-clean-up.js

 import * as EVENTS from '../../common/constant';
-import { createElement } from '@syncfusion/ej2-base';
+import { createElement, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
 /**
@@ -37,2 +37,3 @@ * PasteCleanup for MsWord content
             'header', 'article', 'nav', 'footer', 'section', 'aside', 'main', 'figure', 'figcaption'];
+        this.removableElements = ['o:p', 'style'];
         this.listContents = [];
@@ -46,2 +47,3 @@ this.parent = parent;
     MsWordPaste.prototype.wordCleanup = function (e) {
+        var wordPasteStyleConfig = e.allowedStylePropertiesArray;
         var listNodes = [];
@@ -52,6 +54,13 @@ var tempHTMLContent = e.args.clipboardData.getData('text/HTML');
         var patern = /class='?Mso|style='[^ ]*\bmso-/i;
-        if (patern.test(tempHTMLContent)) {
+        var patern2 = /class="?Mso|style="[^ ]*\bmso-/i;
+        if (patern.test(tempHTMLContent) || patern2.test(tempHTMLContent)) {
             tempHTMLContent = tempHTMLContent.replace(/<img[^>]+>/i, '');
             listNodes = this.cleanUp(elm, listNodes);
             this.listConverter(listNodes);
+            this.styleCorrection(elm, wordPasteStyleConfig);
+            this.removingComments(elm);
+            this.removeUnwantedElements(elm);
+            this.removeEmptyElements(elm);
+            this.breakLineAddition(elm);
+            this.removeClassName(elm);
             e.callBack(elm.innerHTML);
@@ -63,2 +72,154 @@ }
     };
+    MsWordPaste.prototype.removeClassName = function (elm) {
+        var elmWithClass = elm.querySelectorAll('*[class]');
+        for (var i = 0; i < elmWithClass.length; i++) {
+            elmWithClass[i].removeAttribute('class');
+        }
+    };
+    MsWordPaste.prototype.breakLineAddition = function (elm) {
+        var allElements = elm.querySelectorAll('*');
+        for (var i = 0; i < allElements.length; i++) {
+            if (allElements[i].children.length === 0 && allElements[i].innerHTML === '&nbsp;') {
+                var detachableElement = this.findDetachElem(allElements[i]);
+                var brElement = createElement('br');
+                detachableElement.parentElement.insertBefore(brElement, detachableElement);
+                detach(detachableElement);
+            }
+        }
+    };
+    MsWordPaste.prototype.findDetachElem = function (element) {
+        var removableElement;
+        if (element.parentElement.textContent.trim() === '' && element.parentElement.tagName !== 'TD') {
+            removableElement = this.findDetachElem(element.parentElement);
+        }
+        else {
+            removableElement = element;
+        }
+        return removableElement;
+    };
+    MsWordPaste.prototype.removeUnwantedElements = function (elm) {
+        var innerElement = elm.innerHTML;
+        for (var i = 0; i < this.removableElements.length; i++) {
+            var regExpStartElem = new RegExp('<' + this.removableElements[i] + '>', 'g');
+            var regExpEndElem = new RegExp('</' + this.removableElements[i] + '>', 'g');
+            innerElement = innerElement.replace(regExpStartElem, '');
+            innerElement = innerElement.replace(regExpEndElem, '');
+        }
+        elm.innerHTML = innerElement;
+        elm.querySelectorAll(':empty');
+    };
+    MsWordPaste.prototype.findDetachEmptyElem = function (element) {
+        var removableElement;
+        if (!isNullOrUndefined(element.parentElement)) {
+            if (element.parentElement.textContent.trim() === '') {
+                removableElement = this.findDetachEmptyElem(element.parentElement);
+            }
+            else {
+                removableElement = element;
+            }
+        }
+        else {
+            removableElement = null;
+        }
+        return removableElement;
+    };
+    MsWordPaste.prototype.removeEmptyElements = function (element) {
+        var emptyElements = element.querySelectorAll(':empty');
+        for (var i = 0; i < emptyElements.length; i++) {
+            if (emptyElements[i].tagName !== 'IMG' && emptyElements[i].tagName !== 'BR') {
+                var detachableElement = this.findDetachEmptyElem(emptyElements[i]);
+                detach(detachableElement);
+            }
+        }
+    };
+    MsWordPaste.prototype.styleCorrection = function (elm, wordPasteStyleConfig) {
+        var styleElement = elm.querySelectorAll('style');
+        if (styleElement.length > 0) {
+            var styles = styleElement[0].innerHTML.match(/[\S ]+\s+{[\s\S]+?}/gi);
+            var styleClassObject_1 = !isNullOrUndefined(styles) ? this.findStyleObject(styles) : null;
+            var keys = Object.keys(styleClassObject_1);
+            var values = keys.map(function (key) { return styleClassObject_1[key]; });
+            values = this.removeUnwantedStyle(values, wordPasteStyleConfig);
+            this.filterStyles(elm, wordPasteStyleConfig);
+            var resultElem = void 0;
+            for (var i = 0; i < keys.length; i++) {
+                if (keys[i].split('.')[0] === '') {
+                    resultElem = elm.getElementsByClassName(keys[i].split('.')[1]);
+                }
+                else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') >= 0) {
+                    continue;
+                }
+                else if (keys[i].split('.').length === 1 && keys[i].split('.')[0].indexOf('@') < 0) {
+                    resultElem = elm.getElementsByTagName(keys[i]);
+                }
+                else {
+                    resultElem = elm.querySelectorAll(keys[i]);
+                }
+                for (var j = 0; j < resultElem.length; j++) {
+                    var styleProperty = resultElem[j].getAttribute('style');
+                    if (!isNullOrUndefined(styleProperty) && styleProperty.trim() !== '') {
+                        var valueSplit = values[i].split(';');
+                        for (var k = 0; k < valueSplit.length; k++) {
+                            if (styleProperty.indexOf(valueSplit[k].split(':')[0]) >= 0) {
+                                valueSplit.splice(k, 1);
+                                k--;
+                            }
+                        }
+                        values[i] = valueSplit.join(';') + ';';
+                        values[i] += styleProperty;
+                        resultElem[j].setAttribute('style', values[i]);
+                    }
+                    else {
+                        resultElem[j].setAttribute('style', values[i]);
+                    }
+                }
+            }
+        }
+    };
+    MsWordPaste.prototype.filterStyles = function (elm, wordPasteStyleConfig) {
+        var elmWithStyles = elm.querySelectorAll('*[style]');
+        for (var i = 0; i < elmWithStyles.length; i++) {
+            var elemStyleProperty = elmWithStyles[i].getAttribute('style').split(';');
+            var styleValue = '';
+            for (var j = 0; j < elemStyleProperty.length; j++) {
+                if (wordPasteStyleConfig.indexOf(elemStyleProperty[j].split(':')[0].trim()) >= 0) {
+                    styleValue += elemStyleProperty[j] + ';';
+                }
+            }
+            elmWithStyles[i].setAttribute('style', styleValue);
+        }
+    };
+    MsWordPaste.prototype.removeUnwantedStyle = function (values, wordPasteStyleConfig) {
+        for (var i = 0; i < values.length; i++) {
+            var styleValues = values[i].split(';');
+            values[i] = '';
+            for (var j = 0; j < styleValues.length; j++) {
+                if (wordPasteStyleConfig.indexOf(styleValues[j].split(':')[0]) >= 0) {
+                    values[i] += styleValues[j] + ';';
+                }
+            }
+        }
+        return values;
+    };
+    MsWordPaste.prototype.findStyleObject = function (styles) {
+        var styleClassObject = {};
+        for (var i = 0; i < styles.length; i++) {
+            var tempStyle = styles[i];
+            var classNameCollection = tempStyle.replace(/([\S ]+\s+){[\s\S]+?}/gi, '$1');
+            var stylesCollection = tempStyle.replace(/[\S ]+\s+{([\s\S]+?)}/gi, '$1');
+            classNameCollection = classNameCollection.replace(/^[\s]|[\s]$/gm, '');
+            stylesCollection = stylesCollection.replace(/^[\s]|[\s]$/gm, '');
+            classNameCollection = classNameCollection.replace(/\n|\r|\n\r/g, '');
+            stylesCollection = stylesCollection.replace(/\n|\r|\n\r/g, '');
+            for (var classNames = classNameCollection.split(', '), j = 0; j < classNames.length; j++) {
+                styleClassObject[classNames[j]] = stylesCollection;
+            }
+        }
+        return styleClassObject;
+    };
+    MsWordPaste.prototype.removingComments = function (elm) {
+        var innerElement = elm.innerHTML;
+        innerElement = innerElement.replace(/<!--[\s\S]*?-->/g, '');
+        elm.innerHTML = innerElement;
+    };
     MsWordPaste.prototype.cleanUp = function (node, listNodes) {
@@ -68,20 +229,21 @@ var temp = '';
         var prevflagState;
-        for (var index = 0; index < node.childNodes.length; index++) {
-            if (this.ignorableNodes.indexOf(node.childNodes[index].nodeName) === -1 ||
-                (node.childNodes[index].nodeType === 3 && node.childNodes[index].textContent.trim() === '')) {
-                tempCleaner.push(node.childNodes[index]);
+        var allNodes = node.querySelectorAll('*');
+        for (var index = 0; index < allNodes.length; index++) {
+            if (this.ignorableNodes.indexOf(allNodes[index].nodeName) === -1 ||
+                (allNodes[index].nodeType === 3 && allNodes[index].textContent.trim() === '')) {
+                tempCleaner.push(allNodes[index]);
                 continue;
             }
-            else if (node.childNodes[index].className &&
-                node.childNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1) {
-                listNodes.push(node.childNodes[index]);
+            else if (allNodes[index].className &&
+                allNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1) {
+                listNodes.push(allNodes[index]);
             }
-            if (prevflagState && (this.blockNode.indexOf(node.childNodes[index].nodeName.toLowerCase()) !== -1) &&
-                !(node.childNodes[index].className &&
-                    node.childNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1)) {
+            if (prevflagState && (this.blockNode.indexOf(allNodes[index].nodeName.toLowerCase()) !== -1) &&
+                !(allNodes[index].className &&
+                    allNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1)) {
                 listNodes.push(null);
             }
-            if (this.blockNode.indexOf(node.childNodes[index].nodeName.toLowerCase()) !== -1) {
-                if (node.childNodes[index].className &&
-                    node.childNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1) {
+            if (this.blockNode.indexOf(allNodes[index].nodeName.toLowerCase()) !== -1) {
+                if (allNodes[index].className &&
+                    allNodes[index].className.toLowerCase().indexOf('msolistparagraph') !== -1) {
                     prevflagState = true;
@@ -121,8 +283,10 @@ }
             var type = void 0;
-            type = this.listContents[0].trim().length > 1 ? 'ol' : 'ul';
-            var tempNode = [];
-            for (var j = 1; j < this.listContents.length; j++) {
-                tempNode.push(this.listContents[j]);
+            if (!isNullOrUndefined(this.listContents[0])) {
+                type = this.listContents[0].trim().length > 1 ? 'ol' : 'ul';
+                var tempNode = [];
+                for (var j = 1; j < this.listContents.length; j++) {
+                    tempNode.push(this.listContents[j]);
+                }
+                collection.push({ listType: type, content: tempNode, nestedLevel: level });
             }
-            collection.push({ listType: type, content: tempNode, nestedLevel: level });
         }
@@ -159,13 +323,3 @@ stNode = listNodes.shift();
             var pElement = createElement('p');
-            for (var i = 0; i < collection[index].content.length; i++) {
-                var imgPattern = /<img\s[^>]*?src\s*=\s*['\"]([^'\"]*?)['\"][^>]*?>/i;
-                if (imgPattern.test(collection[index].content[i])) {
-                    var imgSpanElement = createElement('span');
-                    imgSpanElement.innerHTML = collection[index].content[i];
-                    pElement.appendChild(imgSpanElement);
-                }
-                else {
-                    pElement.appendChild(document.createTextNode(collection[index].content[i].trim()));
-                }
-            }
+            pElement.innerHTML = collection[index].content.join(' ');
             if ((collection[index].nestedLevel === 1) && listCount === 0 && collection[index].content) {
@@ -258,9 +412,10 @@ root.appendChild(temp = createElement(collection[index].listType));
         if (elem.nodeType === 3 && elem.textContent.trim().length > 0) {
-            this.listContents.push(elem.textContent.trim());
+            if (this.blockNode.indexOf(elem.parentElement.tagName.toLowerCase()) === -1 &&
+                elem.parentElement.tagName !== 'SPAN') {
+                this.listContents.push(elem.parentElement.outerHTML);
+            }
+            else {
+                this.listContents.push(elem.textContent.trim());
+            }
         }
-        else if (elem.tagName === 'IMG') {
-            var tempElem = createElement('div');
-            tempElem.appendChild(elem);
-            this.listContents.push(tempElem.innerHTML);
-        }
         if (elem.firstChild) {
@@ -267,0 +422,0 @@ elem = elem.firstChild;

src/editor-manager/plugin/nodecutter.js

@@ -66,3 +66,10 @@ import { NodeSelection } from './../../selection/index';
     NodeCutter.prototype.spliceEmptyNode = function (fragment, isStart) {
-        var len = fragment.childNodes.length - 1;
+        var len;
+        if (fragment.childNodes.length === 1 && fragment.childNodes[0].nodeName === '#text' &&
+            fragment.childNodes[0].textContent === '' || fragment.textContent === '') {
+            len = -1;
+        }
+        else {
+            len = fragment.childNodes.length - 1;
+        }
         if (len > -1 && !isStart) {
@@ -69,0 +76,0 @@ this.spliceEmptyNode(fragment.childNodes[len], isStart);

src/editor-manager/plugin/selection-commands.d.ts

@@ -6,2 +6,3 @@ export declare class SelectionCommands {
     private static insertFormat;
+    private static applyStyles;
     private static getInsertNode;
@@ -8,0 +9,0 @@ private static getChildNode;

src/editor-manager/plugin/selection-commands.js

@@ -9,2 +9,3 @@ /**
 import { isIDevice, setEditFrameFocus } from '../../common/util';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 var SelectionCommands = /** @class */ (function () {
@@ -133,5 +134,20 @@ function SelectionCommands() {
                     var element = this.GetFormatNode(format, value);
-                    nodes[index] = (index === (nodes.length - 1)) ? InsertMethods.Wrap(nodes[index], element)
-                        : InsertMethods.WrapBefore(nodes[index], element, true);
-                    nodes[index] = this.getChildNode(nodes[index], element);
+                    if (format === 'fontsize') {
+                        var liElement = nodes[index].parentElement;
+                        var parentElement = nodes[index].parentElement;
+                        while (!isNullOrUndefined(parentElement) && parentElement.tagName.toLowerCase() !== 'li') {
+                            parentElement = parentElement.parentElement;
+                            liElement = parentElement;
+                        }
+                        if (!isNullOrUndefined(liElement) && liElement.tagName.toLowerCase() === 'li' &&
+                            liElement.textContent === nodes[index].textContent) {
+                            liElement.style.fontSize = value;
+                        }
+                        else {
+                            nodes[index] = this.applyStyles(nodes, index, element);
+                        }
+                    }
+                    else {
+                        nodes[index] = this.applyStyles(nodes, index, element);
+                    }
                 }
@@ -155,2 +171,8 @@ }
     };
+    SelectionCommands.applyStyles = function (nodes, index, element) {
+        nodes[index] = (index === (nodes.length - 1)) ? InsertMethods.Wrap(nodes[index], element)
+            : InsertMethods.WrapBefore(nodes[index], element, true);
+        nodes[index] = this.getChildNode(nodes[index], element);
+        return nodes[index];
+    };
     SelectionCommands.getInsertNode = function (range, format, value) {
@@ -157,0 +179,0 @@ var element = this.GetFormatNode(format, value);

src/editor-manager/plugin/table.js

@@ -1,2 +0,2 @@
-import { createElement, closest, detach } from '@syncfusion/ej2-base';
+import { createElement, closest, detach, Browser } from '@syncfusion/ej2-base';
 import * as CONSTANT from './../base/constant';
@@ -154,2 +154,4 @@ import { InsertHtml } from './inserthtml';
         selectedCell = (selectedCell.nodeType === 3) ? selectedCell.parentNode : selectedCell;
+        var selectedCellIndex = selectedCell.cellIndex;
+        var parentTable = closest(selectedCell, 'table');
         var curRow = closest(selectedCell, 'tr');
@@ -163,3 +165,7 @@ var allRows = closest(curRow, 'table').rows;
             for (var i = 0; i < allRows.length; i++) {
-                allRows[i].deleteCell(selectedCell.cellIndex);
+                allRows[i].deleteCell(selectedCellIndex);
+                if (Browser.isIE) {
+                    e.item.selection.setSelectionText(this.parent.currentDocument, parentTable.querySelector('td'), parentTable.querySelector('td'), 0, 0);
+                    parentTable.querySelector('td, th').classList.add('e-cell-select');
+                }
             }
@@ -180,2 +186,3 @@ }
         selectedCell = (selectedCell.nodeType === 3) ? selectedCell.parentNode : selectedCell;
+        var selectedRowIndex = selectedCell.parentNode.rowIndex;
         var parentTable = closest(selectedCell, 'table');
@@ -187,3 +194,3 @@ if (parentTable.rows.length === 1) {
         else {
-            parentTable.deleteRow(selectedCell.parentNode.rowIndex);
+            parentTable.deleteRow(selectedRowIndex);
             e.item.selection.setSelectionText(this.parent.currentDocument, parentTable.querySelector('td'), parentTable.querySelector('td'), 0, 0);
@@ -190,0 +197,0 @@ parentTable.querySelector('td, th').classList.add('e-cell-select');

src/markdown-parser/plugin/lists.d.ts

@@ -22,6 +22,10 @@ import { IMDFormats } from './../base/interface';
     private tabKey;
+    private changeTextAreaValue;
     private getTabSpace;
     private isNotFirstLine;
     private getAction;
+    private nextOrderedListValue;
+    private previousOrderedListValue;
     private enterKey;
+    private olListType;
     private applyListsHandler;
@@ -28,0 +32,0 @@ private appliedLine;

src/markdown-parser/plugin/lists.js

 import * as CONSTANT from './../base/constant';
 import { extend } from '@syncfusion/ej2-base';
 import * as EVENTS from './../../common/constant';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -59,24 +60,55 @@ * Lists internal component
         }
+        var listFormat = this.olListType();
         var regex = this.getListRegex();
         this.currentAction = this.getAction(parents[0].text);
         for (var i = 0; i < parents.length; i++) {
-            var prevIndex = event.event.shiftKey ? parents[i].line : parents[i].line - 1;
+            var prevIndex = event.event.shiftKey ? parents[i].line - 1 : parents[i].line - 1;
             var prevLine = this.selection.getLine(textArea, prevIndex);
-            if (prevLine && (!event.event.shiftKey && isNotFirst || (event.event.shiftKey && /^(\t)/.test(prevLine)))) {
-                prevLine = prevLine.trim();
-                if (regex.test(prevLine)) {
+            if (prevLine && (!event.event.shiftKey && isNotFirst || (event.event.shiftKey))) {
+                var prevLineSplit = prevLine.split('. ');
+                var tabSpace = '\t';
+                var tabSpaceLength = event.event.shiftKey ? -tabSpace.length : tabSpace.length;
+                var splitTab = parents[i].text.split('\t');
+                if (event.event.shiftKey && splitTab.length === 1) {
+                    break;
+                }
+                if (this.currentAction === 'OL' && /^\d+$/.test(prevLineSplit[0].trim()) && listFormat) {
                     event.event.preventDefault();
-                    var tabSpace = '\t';
-                    var tabSpaceLength = event.event.shiftKey ? -tabSpace.length : tabSpace.length;
-                    var splitTab = parents[i].text.split('\t');
                     parents[i].text = event.event.shiftKey ? splitTab.splice(1, splitTab.length).join('\t') : tabSpace + parents[i].text;
+                    var curTabSpace = this.getTabSpace(parents[i].text);
+                    var prevTabSpace = this.getTabSpace(prevLine);
+                    var splitText = parents[i].text.split('. ');
+                    if (curTabSpace === prevTabSpace) {
+                        this.changeTextAreaValue(splitText, this.nextOrderedListValue(prevLineSplit[0].trim()), event, textArea, parents, i, end);
+                    }
+                    else if (prevTabSpace < curTabSpace) {
+                        this.changeTextAreaValue(splitText, '1. ', event, textArea, parents, i, end);
+                    }
+                    else {
+                        for (; prevTabSpace.length > curTabSpace.length; null) {
+                            prevIndex = prevIndex - 1;
+                            prevLine = this.selection.getLine(textArea, prevIndex);
+                            var prevLineSplit_1 = prevLine.trim().split('. ');
+                            if (/^\d+$/.test(prevLineSplit_1[0])) {
+                                prevTabSpace = this.getTabSpace(prevLine);
+                                if (prevTabSpace.length <= curTabSpace.length) {
+                                    this.changeTextAreaValue(splitText, this.nextOrderedListValue(prevLineSplit_1[0]), event, textArea, parents, i, end);
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+                else if (this.currentAction === 'UL' && regex.test(prevLine.trim()) || !listFormat) {
+                    event.event.preventDefault();
+                    parents[i].text = event.event.shiftKey ? splitTab.splice(1, splitTab.length).join('\t') : tabSpace + parents[i].text;
                     textArea.value = textArea.value.substr(0, parents[i].start) + parents[i].text + '\n' +
                         textArea.value.substr(parents[i].end, textArea.value.length);
-                    start = i === 0 ? start + tabSpaceLength : start;
-                    addedLength += tabSpaceLength;
-                    if (parents.length !== 1) {
-                        for (var j = i; j < parents.length; j++) {
-                            parents[j].start = j !== 0 ? parents[j].start + tabSpaceLength : parents[j].start;
-                            parents[j].end = parents[j].end + tabSpaceLength;
-                        }
+                }
+                start = i === 0 ? start + tabSpaceLength : start;
+                addedLength += tabSpaceLength;
+                if (parents.length !== 1) {
+                    for (var j = i; j < parents.length; j++) {
+                        parents[j].start = j !== 0 ? parents[j].start + tabSpaceLength : parents[j].start;
+                        parents[j].end = parents[j].end + tabSpaceLength;
                     }
@@ -88,2 +120,71 @@ }
     };
+    MDLists.prototype.changeTextAreaValue = function (splitText, prefixValue, event, textArea, parents, k, end) {
+        var prefix = prefixValue;
+        splitText.splice(0, 1);
+        var textAreaLength = this.selection.getAllParents(textArea.value).length;
+        var changedList = '';
+        var curTabSpace = this.getTabSpace(parents[k].text);
+        var prefixNumber = parseInt(prefix.split('.')[0], null);
+        var nestedTabSpace = this.getTabSpace(parents[k].text);
+        var nestedlistorder = true;
+        var nestedListStart = true;
+        var curTabSpaceLength;
+        var nextPrefixValue = -1;
+        var traversIncreased = true;
+        var nextLineLength = 0;
+        var lineBreak = '';
+        changedList = (this.selection.getLine(textArea, parents[0].line + 1) !== '') ?
+            '' : changedList + textArea.value.substr(parents[0].end, textArea.value.length);
+        for (var i = 1; i < textAreaLength &&
+            !isNullOrUndefined(this.selection.getLine(textArea, parents[0].line + i))
+            && this.selection.getLine(textArea, parents[0].line + i) !== ''; i++) {
+            var nextLine = this.selection.getLine(textArea, parents[0].line + i);
+            var nextTabSpace = this.getTabSpace(nextLine);
+            var nextLineSplit = nextLine.split('. ');
+            if (nextLineSplit.length === 1) {
+                changedList += textArea.value.substr(parents[0].end + nextLineLength, textArea.value.length);
+                break;
+            }
+            else {
+                nextLineLength += nextLine.length;
+                var shiftTabTargetList = false;
+                curTabSpaceLength = event.event.shiftKey ? curTabSpace.length + 1 : curTabSpace.length - 1;
+                if (nextTabSpace.length > nestedTabSpace.length) {
+                    traversIncreased = false;
+                }
+                if (curTabSpace.length !== nextTabSpace.length && nextTabSpace.length < nestedTabSpace.length) {
+                    nestedListStart = true;
+                    nestedlistorder = false;
+                    shiftTabTargetList = event.event.shiftKey &&
+                        curTabSpace.length === nextTabSpace.length ? (nestedListStart = false, true) : false;
+                }
+                else if (traversIncreased && event.event.shiftKey &&
+                    curTabSpace.length === nextTabSpace.length && nextTabSpace.length === nestedTabSpace.length) {
+                    nestedListStart = false;
+                    shiftTabTargetList = true;
+                }
+                lineBreak = changedList === '' ? '' : '\n';
+                if (curTabSpaceLength === nextTabSpace.length && nestedListStart) {
+                    var nextPrefix = event.event.shiftKey ?
+                        (nextPrefixValue++, this.nextOrderedListValue(nextPrefixValue.toString()))
+                        : this.previousOrderedListValue(nextLineSplit[0]);
+                    nextLineSplit.splice(0, 1);
+                    changedList = changedList + lineBreak + nextTabSpace + nextPrefix + nextLineSplit.join('. ');
+                }
+                else if (curTabSpace.length === nextTabSpace.length && nestedlistorder || shiftTabTargetList) {
+                    var nextPrefix = this.nextOrderedListValue(prefixNumber.toString());
+                    prefixNumber++;
+                    nextLineSplit.splice(0, 1);
+                    changedList = changedList + lineBreak + nextTabSpace + nextPrefix + nextLineSplit.join('. ');
+                }
+                else {
+                    changedList = changedList + lineBreak + nextLine;
+                    nestedListStart = false;
+                }
+                nestedTabSpace = this.getTabSpace(nextLine);
+            }
+        }
+        parents[k].text = this.getTabSpace(parents[k].text) + prefix + splitText.join('. ') + '\n';
+        textArea.value = textArea.value.substr(0, parents[k].start) + parents[k].text + changedList;
+    };
     MDLists.prototype.getTabSpace = function (line) {
@@ -108,3 +209,9 @@ var split = line.split('\t');
         var isNotFirst = false;
-        if (prevLine && regex.test(prevLine.trim())) {
+        var regexFirstCondition;
+        if (prevLine) {
+            this.currentAction = this.getAction(prevLine);
+            var prevLineSplit = prevLine.split('. ');
+            regexFirstCondition = this.currentAction === 'OL' ? /^\d+$/.test(prevLineSplit[0].trim()) : regex.test(prevLine.trim());
+        }
+        if (prevLine && regexFirstCondition) {
             var curTabSpace = this.getTabSpace(currentLine);
@@ -116,3 +223,6 @@ var prevTabSpace = this.getTabSpace(prevLine);
                 prevLine = this.selection.getLine(textArea, prevIndex);
-                if (regex.test(prevLine.trim())) {
+                var prevLineSplit = prevLine.trim().split('. ');
+                var regexSecondCondition = this.currentAction === 'OL' ?
+                    /^\d+$/.test(prevLineSplit[0]) : regex.test(prevLine.trim());
+                if (regexSecondCondition) {
                     prevTabSpace = this.getTabSpace(prevLine);
@@ -129,6 +239,17 @@ if (prevTabSpace.length <= curTabSpace.length) {
     MDLists.prototype.getAction = function (line) {
-        var ol = line.trim().split(new RegExp('^(' + this.selection.replaceSpecialChar(this.syntax.OL) + ')'))[1];
-        var ul = line.trim().split(new RegExp('^(' + this.selection.replaceSpecialChar(this.syntax.UL) + ')'))[1];
-        return (ol ? 'OL' : 'UL');
+        var ol = line.split('. ')[0];
+        var currentState = /^\d+$/.test(ol.trim());
+        var ul = line.trim().split(new RegExp('^(' + this.selection.replaceSpecialChar(this.syntax.UL).trim() + ')'))[1];
+        return (currentState ? 'OL' : ul ? 'UL' : 'NOTLIST');
     };
+    MDLists.prototype.nextOrderedListValue = function (previousLine) {
+        var currentValue = parseInt(previousLine, null);
+        var nextValue = currentValue + 1;
+        return nextValue.toString() + '. ';
+    };
+    MDLists.prototype.previousOrderedListValue = function (previousLine) {
+        var currentValue = parseInt(previousLine, null);
+        var nextValue = currentValue - 1;
+        return nextValue.toString() + '. ';
+    };
     MDLists.prototype.enterKey = function (event) {
@@ -141,7 +262,49 @@ var textArea = this.parent.element;
         var prevLine = this.selection.getLine(textArea, parents[0].line - 1);
+        var listFormat = this.olListType();
         var regex = this.getListRegex();
-        if (regex.test(prevLine.trim()) && prevLine.trim().replace(regex, '') !== '') {
-            var addedLength = 0;
+        var prevLineSplit = prevLine.split('. ');
+        this.currentAction = this.getAction(prevLine);
+        var addedLength = 0;
+        if (this.currentAction === 'OL' && prevLineSplit.length > 1 && /^\d+$/.test(prevLineSplit[0].trim()) && listFormat
+            && prevLineSplit[1] !== '') {
             var tabSpace = this.getTabSpace(prevLine);
             this.currentAction = this.getAction(prevLine);
+            var prefix = this.nextOrderedListValue(prevLineSplit[0]);
+            parents[0].text = tabSpace + prefix + parents[0].text;
+            var textAreaLength = this.selection.getAllParents(textArea.value).length;
+            var changedList = '\n';
+            var curTabSpace = this.getTabSpace(prevLine);
+            var nestedTabSpace = this.getTabSpace(parents[0].text);
+            var nestedListOrder = true;
+            for (var i = 1; i < textAreaLength &&
+                textArea.value.substr(parents[0].end, textArea.value.length) !== ''; i++) {
+                var nextLine = this.selection.getLine(textArea, parents[0].line + i);
+                if (isNullOrUndefined(nextLine)) {
+                    changedList = changedList + '';
+                }
+                else {
+                    var nextLineSplit = nextLine.split('. ');
+                    var nextTabSpace = this.getTabSpace(nextLine);
+                    if (nextTabSpace.length < nestedTabSpace.length) {
+                        nestedListOrder = false;
+                    }
+                    if (nextLineSplit.length > 1 && /^\d+$/.test(nextLineSplit[0].trim()) &&
+                        curTabSpace.length === nextTabSpace.length && nestedListOrder) {
+                        var nextPrefix = this.nextOrderedListValue(nextLineSplit[0]);
+                        nextLineSplit.splice(0, 1);
+                        changedList = changedList + nextTabSpace + nextPrefix + nextLineSplit.join('. ') + '\n';
+                    }
+                    else {
+                        changedList = changedList + nextLine + '\n';
+                        nestedTabSpace = this.getTabSpace(nextLine);
+                    }
+                }
+            }
+            textArea.value = textArea.value.substr(0, parents[0].start) + curTabSpace + prefix + changedList;
+            start = start + prefix.length + tabSpace.length;
+            addedLength += prefix.length + tabSpace.length;
+        }
+        else if (this.currentAction === 'UL' && regex.test(prevLine.trim()) &&
+            prevLine.trim().replace(regex, '') !== '' || this.currentAction === 'OL' && !listFormat) {
+            var tabSpace = this.getTabSpace(prevLine);
             var prefix = this.syntax[this.currentAction];
@@ -153,5 +316,16 @@ parents[0].text = tabSpace + prefix + parents[0].text;
             addedLength += prefix.length + tabSpace.length;
-            this.restore(textArea, start, end + addedLength, event);
         }
+        this.restore(textArea, start, end + addedLength, event);
     };
+    MDLists.prototype.olListType = function () {
+        var olSyntaxList = this.syntax.OL.split('.,');
+        var listType = olSyntaxList.length === 1 ? null :
+            parseInt(olSyntaxList[2].trim(), null) - parseInt(olSyntaxList[0].trim(), null);
+        if (listType) {
+            return 1;
+        }
+        else {
+            return 0;
+        }
+    };
     MDLists.prototype.applyListsHandler = function (e) {
@@ -168,4 +342,13 @@ var textArea = this.parent.element;
         var prefix = '';
-        var regex = this.syntax[this.currentAction];
+        var listFormat;
+        var regex;
+        listFormat = this.olListType();
+        var perfixObj = {};
         for (var i = 0; i < parents.length; i++) {
+            if (listFormat) {
+                regex = this.currentAction === 'OL' ? i + listFormat + '. ' : this.syntax[this.currentAction];
+            }
+            else {
+                regex = this.currentAction === 'OL' ? this.syntax.OL : this.syntax[this.currentAction];
+            }
             if (!this.selection.isStartWith(parents[i].text, regex)) {
@@ -181,4 +364,6 @@ if (parents[i].text === '' && i === 0) {
                 }
-                var replace = this.appliedLine(parents[i].text);
-                prefix = replace.line ? prefix : this.syntax[this.currentAction];
+                var preLineTabSpaceLength = !isNullOrUndefined(parents[i - 1]) ?
+                    this.getTabSpace(parents[i - 1].text).length : 0;
+                var replace = this.appliedLine(parents[i].text, regex, perfixObj, preLineTabSpaceLength);
+                prefix = replace.line ? prefix : regex;
                 parents[i].text = replace.line ? replace.line : prefix + parents[i].text;
@@ -198,3 +383,3 @@ replace.space = replace.space ? replace.space : 0;
                 }
-                this.restore(textArea, start, end + addedLength, e);
+                this.restore(textArea, start, end + addedLength, null);
             }
@@ -205,13 +390,26 @@ else {
                     textArea.value.substr(parents[i].end + endLength, textArea.value.length);
-                endLength -= this.syntax[this.currentAction].length;
-                startLength = this.syntax[this.currentAction].length;
-                this.restore(textArea, start - startLength, end + endLength, e);
+                endLength -= regex.length;
+                startLength = regex.length;
+                this.restore(textArea, start - startLength, end + endLength, null);
             }
         }
+        this.restore(textArea, null, null, e);
     };
-    MDLists.prototype.appliedLine = function (line) {
+    MDLists.prototype.appliedLine = function (line, prefixPattern, perfixObj, preTabSpaceLength) {
         var points = {};
-        var regex = this.getListRegex();
+        var regex = new RegExp('^[' + this.syntax.UL.trim() + ']');
+        var lineSplit = line.split('. ');
+        var currentPrefix = lineSplit[0] + '. ';
         var isExist = regex.test(line.trim()) || line.trim() === this.syntax.OL.trim()
-            || line.trim() === this.syntax.UL.trim();
+            || line.trim() === this.syntax.UL.trim() || /^\d+$/.test(lineSplit[0].trim());
+        var listFormat = this.olListType();
+        var curTabSpaceLength = this.getTabSpace(line).length;
+        if (this.currentAction === 'OL' && listFormat) {
+            perfixObj[curTabSpaceLength.toString()] = !isNullOrUndefined(perfixObj[curTabSpaceLength.toString()]) ?
+                perfixObj[curTabSpaceLength.toString()].valueOf() + 1 : 1;
+            prefixPattern = perfixObj[curTabSpaceLength.toString()].valueOf().toString() + '. ';
+            if (!isNullOrUndefined(preTabSpaceLength) && preTabSpaceLength > curTabSpaceLength) {
+                perfixObj[preTabSpaceLength.toString()] = 0;
+            }
+        }
         if (isExist) {
@@ -221,13 +419,18 @@ var replace = void 0;
             var space = 0;
-            if (this.selection.getRegex(this.syntax.OL).test(line.trim())) {
-                pattern = this.selection.getRegex(this.syntax.OL);
+            if (regex.test(line.trim())) {
+                pattern = this.syntax.UL;
+                replace = prefixPattern;
+                points.space = prefixPattern.trim().length - this.syntax.UL.trim().length;
+            }
+            else if (/^\d+$/.test(lineSplit[0].trim()) && listFormat) {
+                pattern = lineSplit[0].trim() + '. ';
+                replace = prefixPattern;
+                points.space = this.syntax.UL.trim().length - currentPrefix.trim().length;
+            }
+            else if (/^\d+$/.test(lineSplit[0].trim())) {
+                pattern = lineSplit[0].trim() + '. ';
                 replace = this.syntax.UL;
-                points.space = this.syntax.UL.length - this.syntax.OL.length;
+                points.space = this.syntax.UL.trim().length - currentPrefix.trim().length;
             }
-            else {
-                pattern = this.selection.getRegex(this.syntax.UL);
-                replace = this.syntax.OL;
-                points.space = this.syntax.OL.length - this.syntax.UL.length;
-            }
-            points.line = this.getTabSpace(line) + line.trim().replace(pattern, replace);
+            points.line = line.replace(pattern, replace);
         }
@@ -237,4 +440,8 @@ return points;
     MDLists.prototype.restore = function (textArea, start, end, event) {
-        this.selection.save(start, end);
-        this.selection.restore(textArea);
+        if (!isNullOrUndefined(start) && !isNullOrUndefined(start)) {
+            this.selection.save(start, end);
+        }
+        if (!isNullOrUndefined(event)) {
+            this.selection.restore(textArea);
+        }
         if (event && event.callBack) {
@@ -241,0 +448,0 @@ event.callBack({

src/markdown-parser/plugin/markdown-selection.d.ts

@@ -24,3 +24,2 @@ /**
     }[], regex: string): boolean;
-    getRegex(syntax: string): RegExp;
     getSelectedInlinePoints(textarea: HTMLTextAreaElement): {
@@ -27,0 +26,0 @@ [key: string]: string | number;

src/markdown-parser/plugin/markdown-selection.js

@@ -94,7 +94,2 @@ /**
     };
-    MarkdownSelection.prototype.getRegex = function (syntax) {
-        syntax = this.replaceSpecialChar(syntax);
-        var regex = '^(' + syntax + ')|^(' + syntax.trim() + ')';
-        return new RegExp(regex);
-    };
     MarkdownSelection.prototype.getSelectedInlinePoints = function (textarea) {
@@ -101,0 +96,0 @@ var start = textarea.selectionStart;

src/markdown-parser/plugin/table.js

@@ -125,5 +125,5 @@ import * as CONSTANT from './../base/constant';
         var formatTags = this.getFormatTag();
-        var formatSplitZero = line.split(' ', 2)[0] + ' ';
+        var formatSplitZero = line.trim().split(' ', 2)[0] + ' ';
         for (var i = 0; i < formatTags.length; i++) {
-            if (formatSplitZero === formatTags[i]) {
+            if (formatSplitZero === formatTags[i] || /^[\d.]+[ ]+$/.test(formatSplitZero)) {
                 return true;
@@ -130,0 +130,0 @@ }

src/rich-text-editor/actions/base-quick-toolbar.js

@@ -162,77 +162,83 @@ import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
     BaseQuickToolbar.prototype.showPopup = function (x, y, target) {
-        var editPanelTop;
-        var editPanelHeight;
-        var bodyStyle = window.getComputedStyle(document.body);
-        var bodyRight = parseFloat(bodyStyle.marginRight.split('px')[0]) + parseFloat(bodyStyle.paddingRight.split('px')[0]);
-        var windowHeight = window.innerHeight;
-        var windowWidth = window.innerWidth;
-        var parent = this.parent.element;
-        var toolbarAvail = !isNullOrUndefined(this.parent.getToolbar());
-        var tbHeight = toolbarAvail && this.parent.toolbarModule.getToolbarHeight();
-        var expTBHeight = toolbarAvail && this.parent.toolbarModule.getExpandTBarPopHeight();
-        var tBarHeight = (toolbarAvail) ? (tbHeight + expTBHeight) : 0;
-        addClass([this.element], [classes.CLS_HIDE]);
-        if (Browser.isDevice && !isIDevice()) {
-            addClass([this.parent.getToolbar()], [classes.CLS_HIDE]);
-        }
-        if (this.parent.iframeSettings.enable) {
-            var cntEle = this.contentRenderer.getPanel().contentWindow;
-            editPanelTop = cntEle.pageYOffset;
-            editPanelHeight = cntEle.innerHeight;
-        }
-        else {
-            var cntEle = closest(target, '.' + classes.CLS_RTE_CONTENT);
-            editPanelTop = (cntEle) ? cntEle.scrollTop : 0;
-            editPanelHeight = (cntEle) ? cntEle.offsetHeight : 0;
-        }
-        if (!this.parent.inlineMode.enable && !closest(target, 'table')) {
-            this.parent.disableToolbarItem(this.parent.toolbarSettings.items);
-            this.parent.enableToolbarItem(['Undo', 'Redo']);
-        }
-        append([this.element], document.body);
-        this.popupObj.position.X = x + 20;
-        this.popupObj.position.Y = y + ((this.parent.iframeSettings.enable) ? 35 : 20);
-        this.popupObj.dataBind();
-        this.popupObj.show();
-        this.dropDownButtons.renderDropDowns({
-            container: this.toolbarElement,
-            containerType: 'quick',
-            items: this.stringItems
+        var _this = this;
+        var eventArgs = { popup: this.popupObj, cancel: false, targetElement: target };
+        this.parent.trigger(events.beforeQuickToolbarOpen, eventArgs, function (beforeQuickToolbarArgs) {
+            if (!beforeQuickToolbarArgs.cancel) {
+                var editPanelTop = void 0;
+                var editPanelHeight = void 0;
+                var bodyStyle = window.getComputedStyle(document.body);
+                var bodyRight = parseFloat(bodyStyle.marginRight.split('px')[0]) + parseFloat(bodyStyle.paddingRight.split('px')[0]);
+                var windowHeight = window.innerHeight;
+                var windowWidth = window.innerWidth;
+                var parent_1 = _this.parent.element;
+                var toolbarAvail = !isNullOrUndefined(_this.parent.getToolbar());
+                var tbHeight = toolbarAvail && _this.parent.toolbarModule.getToolbarHeight();
+                var expTBHeight = toolbarAvail && _this.parent.toolbarModule.getExpandTBarPopHeight();
+                var tBarHeight = (toolbarAvail) ? (tbHeight + expTBHeight) : 0;
+                addClass([_this.element], [classes.CLS_HIDE]);
+                if (Browser.isDevice && !isIDevice()) {
+                    addClass([_this.parent.getToolbar()], [classes.CLS_HIDE]);
+                }
+                if (_this.parent.iframeSettings.enable) {
+                    var cntEle = _this.contentRenderer.getPanel().contentWindow;
+                    editPanelTop = cntEle.pageYOffset;
+                    editPanelHeight = cntEle.innerHeight;
+                }
+                else {
+                    var cntEle = closest(target, '.' + classes.CLS_RTE_CONTENT);
+                    editPanelTop = (cntEle) ? cntEle.scrollTop : 0;
+                    editPanelHeight = (cntEle) ? cntEle.offsetHeight : 0;
+                }
+                if (!_this.parent.inlineMode.enable && !closest(target, 'table')) {
+                    _this.parent.disableToolbarItem(_this.parent.toolbarSettings.items);
+                    _this.parent.enableToolbarItem(['Undo', 'Redo']);
+                }
+                append([_this.element], document.body);
+                _this.popupObj.position.X = x + 20;
+                _this.popupObj.position.Y = y + ((_this.parent.iframeSettings.enable) ? 35 : 20);
+                _this.popupObj.dataBind();
+                _this.popupObj.element.classList.add('e-popup-open');
+                _this.dropDownButtons.renderDropDowns({
+                    container: _this.toolbarElement,
+                    containerType: 'quick',
+                    items: _this.stringItems
+                });
+                _this.colorPickerObj.renderColorPickerInput({
+                    container: _this.toolbarElement,
+                    containerType: 'quick',
+                    items: _this.stringItems
+                });
+                var showPopupData = {
+                    x: x, y: y,
+                    target: target,
+                    editTop: editPanelTop,
+                    editHeight: editPanelHeight,
+                    popup: _this.popupObj.element,
+                    popHeight: _this.popupObj.element.offsetHeight,
+                    popWidth: _this.popupObj.element.offsetWidth,
+                    parentElement: parent_1,
+                    bodyRightSpace: bodyRight,
+                    windowY: window.pageYOffset,
+                    windowHeight: windowHeight,
+                    windowWidth: windowWidth,
+                    parentData: parent_1.getBoundingClientRect(),
+                    tBarElementHeight: tBarHeight
+                };
+                if (target.tagName === 'IMG') {
+                    _this.setPosition(showPopupData);
+                }
+                if (!_this.parent.inlineMode.enable) {
+                    _this.checkCollision(showPopupData, 'parent', '');
+                }
+                _this.checkCollision(showPopupData, 'document', ((_this.parent.inlineMode.enable) ? 'inline' : ''));
+                _this.popupObj.element.classList.remove('e-popup-open');
+                removeClass([_this.element], [classes.CLS_HIDE]);
+                _this.popupObj.show({ name: 'ZoomIn', duration: (Browser.isIE ? 250 : 400) });
+                setStyleAttribute(_this.element, {
+                    maxWidth: _this.parent.element.offsetWidth + 'px'
+                });
+                addClass([_this.element], [classes.CLS_POP]);
+                _this.isDOMElement = true;
+            }
         });
-        this.colorPickerObj.renderColorPickerInput({
-            container: this.toolbarElement,
-            containerType: 'quick',
-            items: this.stringItems
-        });
-        var showPopupData = {
-            x: x, y: y,
-            target: target,
-            editTop: editPanelTop,
-            editHeight: editPanelHeight,
-            popup: this.popupObj.element,
-            popHeight: this.popupObj.element.offsetHeight,
-            popWidth: this.popupObj.element.offsetWidth,
-            parentElement: parent,
-            bodyRightSpace: bodyRight,
-            windowY: window.pageYOffset,
-            windowHeight: windowHeight,
-            windowWidth: windowWidth,
-            parentData: parent.getBoundingClientRect(),
-            tBarElementHeight: tBarHeight
-        };
-        if (target.tagName === 'IMG') {
-            this.setPosition(showPopupData);
-        }
-        if (!this.parent.inlineMode.enable) {
-            this.checkCollision(showPopupData, 'parent', '');
-        }
-        this.checkCollision(showPopupData, 'document', ((this.parent.inlineMode.enable) ? 'inline' : ''));
-        this.popupObj.hide();
-        removeClass([this.element], [classes.CLS_HIDE]);
-        this.popupObj.show({ name: 'ZoomIn', duration: 400 });
-        setStyleAttribute(this.element, {
-            maxWidth: this.parent.element.offsetWidth + 'px'
-        });
-        addClass([this.element], [classes.CLS_POP]);
-        this.isDOMElement = true;
     };
@@ -271,2 +277,3 @@ BaseQuickToolbar.prototype.hidePopup = function () {
             detach(element);
+            this.parent.trigger(events.quickToolbarClose, this.popupObj);
         }
@@ -273,0 +280,0 @@ };

src/rich-text-editor/actions/full-screen.js

@@ -15,2 +15,5 @@ import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
     FullScreen.prototype.showFullScreen = function (event) {
+        if (this.parent.toolbarSettings.enable === true) {
+            this.parent.quickToolbarModule.hideQuickToolbars();
+        }
         this.scrollableParent = getScrollableParent(this.parent.element);
@@ -44,2 +47,5 @@ if (!this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {
     FullScreen.prototype.hideFullScreen = function (event) {
+        if (this.parent.toolbarSettings.enable === true) {
+            this.parent.quickToolbarModule.hideQuickToolbars();
+        }
         if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {
@@ -46,0 +52,0 @@ this.parent.element.classList.remove(classes.CLS_FULL_SCREEN);

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

@@ -1,3 +0,4 @@
-import { IRichTextEditor, NotifyArgs } from '../base/interface';
+import { IRichTextEditor } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
+import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
@@ -16,2 +17,3 @@ * `HtmlEditor` module is used to HTML editor
     private saveSelection;
+    private sanitize;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
@@ -24,2 +26,6 @@ /**
     destroy(): void;
+    /**
+     * @hidden
+     */
+    sanitizeHelper(value: string): string;
     private addEventListener;
@@ -41,3 +47,5 @@ private updateReadOnly;
      */
-    protected onPropertyChanged(e: NotifyArgs): void;
+    protected onPropertyChanged(e: {
+        [key: string]: RichTextEditorModel;
+    }): void;
     /**
@@ -44,0 +52,0 @@ * For internal use only - Get the module name.

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

@@ -14,2 +14,3 @@ import * as events from '../base/constant';
 import { isIDevice } from '../../common/util';
+import { SanitizeHtmlHelper } from './sanitize-helper';
 /**
@@ -24,2 +25,3 @@ * `HtmlEditor` module is used to HTML editor
         this.renderFactory = this.locator.getService('rendererFactory');
+        this.sanitize = new SanitizeHtmlHelper();
         this.addEventListener();
@@ -35,2 +37,9 @@ }
     };
+    /**
+     * @hidden
+     */
+    HtmlEditor.prototype.sanitizeHelper = function (value) {
+        value = this.sanitize.initialize(value, this.parent);
+        return value;
+    };
     HtmlEditor.prototype.addEventListener = function () {
@@ -146,3 +155,8 @@ if (this.parent.isDestroyed) {
             }
-            this.parent.executeCommand('insertHTML', resultElement);
+            if (!isNullOrUndefined(this.parent.pasteCleanupModule)) {
+                e.callBack(resultElement.innerHTML);
+            }
+            else {
+                this.parent.executeCommand('insertHTML', resultElement);
+            }
         }
@@ -156,2 +170,4 @@ };
         var urlText = splitText[splitText.length - 1];
+        var urlTextRange = range.startOffset - (text.length - splitText[splitText.length - 1].length);
+        urlText = urlText.slice(0, urlTextRange);
         var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
@@ -296,3 +312,3 @@ if (selectNodeEle[0].nodeName !== 'A' && urlText.match(regex)) {
         if (isNullOrUndefined(this.parent.formatter)) {
-            this.parent.formatter = new HTMLFormatter({
+            var formatterClass = new HTMLFormatter({
                 currentDocument: this.contentRenderer.getDocument(),
@@ -302,2 +318,3 @@ element: editElement,
             });
+            this.parent.setProperties({ formatter: formatterClass }, true);
         }
@@ -318,2 +335,7 @@ else {
         // On property code change here
+        if (!isNullOrUndefined(e.newProp.formatter)) {
+            var editElement = this.contentRenderer.getEditPanel();
+            var option = { undoRedoSteps: this.parent.undoRedoSteps, undoRedoTimer: this.parent.undoRedoTimer };
+            this.parent.formatter.updateFormatter(editElement, this.contentRenderer.getDocument(), option);
+        }
     };
@@ -320,0 +342,0 @@ /**

src/rich-text-editor/actions/markdown-editor.d.ts

@@ -1,3 +0,4 @@
-import { IRichTextEditor, NotifyArgs } from '../base/interface';
+import { IRichTextEditor } from '../base/interface';
 import { ServiceLocator } from '../services/service-locator';
+import { RichTextEditorModel } from '../base/rich-text-editor-model';
 /**
@@ -33,3 +34,5 @@ * `MarkdownEditor` module is used to markdown editor
      */
-    protected onPropertyChanged(e: NotifyArgs): void;
+    protected onPropertyChanged(e: {
+        [key: string]: RichTextEditorModel;
+    }): void;
     /**
@@ -36,0 +39,0 @@ * For internal use only - Get the module name.

src/rich-text-editor/actions/markdown-editor.js

@@ -141,2 +141,7 @@ import * as events from '../base/constant';
         // On property code change here
+        if (!isNullOrUndefined(e.newProp.formatter)) {
+            var editElement = this.contentRenderer.getEditPanel();
+            var option = { undoRedoSteps: this.parent.undoRedoSteps, undoRedoTimer: this.parent.undoRedoTimer };
+            this.parent.formatter.updateFormatter(editElement, this.contentRenderer.getDocument(), option);
+        }
     };
@@ -143,0 +148,0 @@ /**

src/rich-text-editor/actions/markdown-toolbar-status.js

@@ -58,8 +58,19 @@ import { MarkdownSelection } from '../../markdown-parser/plugin/markdown-selection';
         var isApply = true;
-        for (var i = 0; i < lines.length; i++) {
-            if (!this.selection.isStartWith(lines[i].text, this.parent.formatter.listTags[type])) {
-                isApply = false;
-                break;
+        if (type === 'OL') {
+            for (var i = 0; i < lines.length; i++) {
+                var lineSplit = lines[i].text.trim().split(' ', 2)[0] + ' ';
+                if (!/^[\d.]+[ ]+$/.test(lineSplit)) {
+                    isApply = false;
+                    break;
+                }
             }
         }
+        else {
+            for (var i = 0; i < lines.length; i++) {
+                if (!this.selection.isStartWith(lines[i].text, this.parent.formatter.listTags[type])) {
+                    isApply = false;
+                    break;
+                }
+            }
+        }
         return isApply;
@@ -66,0 +77,0 @@ };

src/rich-text-editor/actions/paste-clean-up.d.ts

@@ -14,2 +14,3 @@ import { IRichTextEditor } from '../base/interface';
     private nodeSelectionObj;
+    private dialogRenderObj;
     private inlineNode;
@@ -21,2 +22,9 @@ constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     private pasteClean;
+    /**
+     * Method for image formatting when pasting
+     * @hidden
+     */
+    imageFormatting(imgElement: {
+        [key: string]: Element;
+    }): void;
     private radioRender;
@@ -23,0 +31,0 @@ private selectFormatting;

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

 import * as events from '../base/constant';
-import { Dialog } from '@syncfusion/ej2-popups';
 import { RadioButton } from '@syncfusion/ej2-buttons';
@@ -25,2 +24,3 @@ import { isNullOrUndefined as isNOU, isNullOrUndefined, detach } from '@syncfusion/ej2-base';
         this.i10n = serviceLocator.getService('rteLocale');
+        this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
         this.addEventListener();
@@ -54,2 +54,3 @@ }
         var value = null;
+        var imageproperties;
         if (e.args && !isNOU(e.args.clipboardData)) {
@@ -65,3 +66,16 @@ value = e.args.clipboardData.getData('text/html');
                     e.args.clipboardData.items[0].getAsFile() : null;
-                this.parent.notify(events.paste, { file: file, args: e.args, text: value });
+                this.parent.notify(events.paste, {
+                    file: file,
+                    args: e.args,
+                    text: value,
+                    callBack: function (b) {
+                        imageproperties = b;
+                        if (typeof (imageproperties) === 'object') {
+                            _this.parent.formatter.editorManager.execCommand('Images', 'Image', e.args, _this.imageFormatting.bind(_this), 'pasteCleanup', imageproperties, 'pasteCleanupModule');
+                        }
+                        else {
+                            value = imageproperties;
+                        }
+                    }
+                });
             }
@@ -72,2 +86,3 @@ else if (value.length > 0) {
                     text: e.text,
+                    allowedStylePropertiesArray: this.parent.pasteCleanupSettings.allowedStyleProps,
                     callBack: function (a) {
@@ -77,26 +92,51 @@ value = a;
                 });
-                this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);
-                var currentDocument = this.contentRenderer.getDocument();
-                var range = this.nodeSelectionObj.getRange(currentDocument);
-                this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
-                if (this.parent.pasteCleanupSettings.prompt) {
-                    e.args.preventDefault();
-                    this.pasteDialog(value);
-                }
-                else if (this.parent.pasteCleanupSettings.plainText) {
-                    e.args.preventDefault();
-                    this.plainFormatting(value);
-                }
-                else if (this.parent.pasteCleanupSettings.keepFormat) {
-                    e.args.preventDefault();
-                    this.formatting(value, false);
-                }
-                else {
-                    e.args.preventDefault();
-                    this.formatting(value, true);
-                }
             }
+            this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);
+            var currentDocument = this.contentRenderer.getDocument();
+            var range = this.nodeSelectionObj.getRange(currentDocument);
+            this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
+            if (this.parent.pasteCleanupSettings.prompt) {
+                e.args.preventDefault();
+                this.pasteDialog(value);
+            }
+            else if (this.parent.pasteCleanupSettings.plainText) {
+                e.args.preventDefault();
+                this.plainFormatting(value);
+            }
+            else if (this.parent.pasteCleanupSettings.keepFormat) {
+                e.args.preventDefault();
+                this.formatting(value, false);
+            }
+            else {
+                e.args.preventDefault();
+                this.formatting(value, true);
+            }
         }
         setTimeout(function () { _this.parent.formatter.onSuccess(_this.parent, args); }, 0);
     };
+    /**
+     * Method for image formatting when pasting
+     * @hidden
+     */
+    PasteCleanup.prototype.imageFormatting = function (imgElement) {
+        var imageElement = this.parent.createElement('span');
+        imageElement.appendChild(imgElement.elements);
+        var imageValue = imageElement.innerHTML;
+        this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);
+        var currentDocument = this.contentRenderer.getDocument();
+        var range = this.nodeSelectionObj.getRange(currentDocument);
+        this.saveSelection = this.nodeSelectionObj.save(range, currentDocument);
+        if (this.parent.pasteCleanupSettings.prompt) {
+            this.pasteDialog(imageValue);
+        }
+        else if (this.parent.pasteCleanupSettings.plainText) {
+            this.plainFormatting(imageValue);
+        }
+        else if (this.parent.pasteCleanupSettings.keepFormat) {
+            this.formatting(imageValue, false);
+        }
+        else {
+            this.formatting(imageValue, true);
+        }
+    };
     PasteCleanup.prototype.radioRender = function () {
@@ -128,3 +168,3 @@ var keepRadioButton = new RadioButton({ label: 'Keep', name: 'pasteOption', checked: true });
         var _this = this;
-        var dialog = new Dialog({
+        var dialogModel = {
             buttons: [
@@ -136,2 +176,3 @@ {
                             dialog.hide();
+                            _this.dialogRenderObj.close(dialog);
                             dialog.destroy();
@@ -150,2 +191,3 @@ }
                             dialog.hide();
+                            _this.dialogRenderObj.close(dialog);
                             dialog.destroy();
@@ -170,3 +212,4 @@ }
             isModal: true
-        });
+        };
+        var dialog = this.dialogRenderObj.render(dialogModel);
         var rteDialogWrapper = this.parent.element.querySelector('#' + this.parent.getID()
@@ -196,3 +239,3 @@ + '_pasteCleanupDialog');
     PasteCleanup.prototype.formatting = function (value, clean) {
-        var clipBoardElem = this.parent.createElement('span');
+        var clipBoardElem = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
         clipBoardElem.innerHTML = value;
@@ -221,3 +264,3 @@ if (this.parent.pasteCleanupSettings.deniedTags !== null) {
         var text = this.getTextContent(clipBoardElem);
-        var resultElement = this.parent.createElement('span');
+        var resultElement = this.parent.createElement('div', { className: 'pasteContent', styles: 'display:inline;' });
         resultElement.innerHTML = text;
@@ -410,3 +453,4 @@ this.saveSelection.restore();
             styleElement[i].removeAttribute('style');
-            allowedStyleValue = allowedStyleValueArray.join(';');
+            allowedStyleValue = allowedStyleValueArray.join(';').trim() === '' ?
+                allowedStyleValueArray.join(';') : allowedStyleValueArray.join(';') + ';';
             if (allowedStyleValue) {
@@ -413,0 +457,0 @@ styleElement[i].setAttribute('style', allowedStyleValue);

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

@@ -34,3 +34,7 @@ import { RenderType } from '../base/enum';
     private hideInlineQTBar;
-    private hideQuickToolbars;
+    /**
+     * Method for hidding the quick toolbar
+     * @hidden
+     */
+    hideQuickToolbars(): void;
     private deBounce;
@@ -41,5 +45,5 @@ private mouseUpHandler;
     private keyUpHandler;
-    getInlineBaseToolbar(): BaseToolbar;
     private selectionChangeHandler;
     private onSelectionChange;
+    getInlineBaseToolbar(): BaseToolbar;
     /**
@@ -46,0 +50,0 @@ * Destroys the ToolBar.

src/rich-text-editor/actions/quick-toolbar.js

@@ -112,2 +112,6 @@ import { select, isNullOrUndefined, Browser, addClass, removeClass, EventHandler, closest } from '@syncfusion/ej2-base';
     };
+    /**
+     * Method for hidding the quick toolbar
+     * @hidden
+     */
     QuickToolbar.prototype.hideQuickToolbars = function () {
@@ -187,5 +191,2 @@ if (this.linkQTBar && !hasClass(this.linkQTBar.element, 'e-popup-close')) {
     };
-    QuickToolbar.prototype.getInlineBaseToolbar = function () {
-        return this.inlineQTBar && this.inlineQTBar.quickTBarObj;
-    };
     QuickToolbar.prototype.selectionChangeHandler = function (e) {
@@ -205,2 +206,5 @@ var _this = this;
     };
+    QuickToolbar.prototype.getInlineBaseToolbar = function () {
+        return this.inlineQTBar && this.inlineQTBar.quickTBarObj;
+    };
     /**
@@ -207,0 +211,0 @@ * Destroys the ToolBar.

src/rich-text-editor/actions/toolbar-action.js

@@ -39,3 +39,5 @@ import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
             && e.item && (e.item.command === 'Images' || e.item.command === 'Display' || e.item.command === 'Table'))) {
-            this.parent.formatter.process(this.parent, e, e.originalEvent, null);
+            var value = e.item.controlParent && this.parent.quickToolbarModule && this.parent.quickToolbarModule.tableQTBar
+                && this.parent.quickToolbarModule.tableQTBar.element.contains(e.item.controlParent.element) ? 'Table' : null;
+            this.parent.formatter.process(this.parent, e, e.originalEvent, value);
         }
@@ -42,0 +44,0 @@ this.parent.notify(events.selectionSave, {});

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

@@ -50,3 +50,3 @@ import { Toolbar as tool } from '@syncfusion/ej2-navigations';
     addTBarItem(args: IUpdateItemsModel, index: number): void;
-    enableTBarItems(baseToolbar: BaseToolbar, items: string | string[], isEnable: boolean): void;
+    enableTBarItems(baseToolbar: BaseToolbar, items: string | string[], isEnable: boolean, muteToolbarUpdate?: boolean): void;
     removeTBarItems(items: string | string[]): void;
@@ -53,0 +53,0 @@ getExpandTBarPopHeight(): number;

src/rich-text-editor/actions/toolbar.js

@@ -290,3 +290,3 @@ import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';
     };
-    Toolbar.prototype.enableTBarItems = function (baseToolbar, items, isEnable) {
+    Toolbar.prototype.enableTBarItems = function (baseToolbar, items, isEnable, muteToolbarUpdate) {
         var trgItems = getTBarItemsIndex(getCollection(items), baseToolbar.toolbarObj.items);
@@ -300,3 +300,3 @@ this.tbItems = selectAll('.' + classes.CLS_TB_ITEM, baseToolbar.toolbarObj.element);
         }
-        if (!select('.e-rte-srctextarea', this.parent.element)) {
+        if (!select('.e-rte-srctextarea', this.parent.element) && !muteToolbarUpdate) {
             updateUndoRedoStatus(baseToolbar, this.parent.formatter.editorManager.undoRedoManager.getUndoStatus());
@@ -303,0 +303,0 @@ }

src/rich-text-editor/base/constant.d.ts

@@ -85,6 +85,6 @@ /** @hidden */
 /** @hidden */
+export declare const toolbarStatusUpdate: string;
+/** @hidden */
 export declare const actionSuccess: string;
 /** @hidden */
-export declare const popupOpen: string;
-/** @hidden */
 export declare const updateToolbarItem: string;
@@ -175,1 +175,15 @@ /** @hidden */
 export declare const pasteClean: string;
+/** @hidden */
+export declare const beforeDialogOpen: string;
+/** @hidden */
+export declare const dialogOpen: string;
+/** @hidden */
+export declare const dialogClose: string;
+/** @hidden */
+export declare const beforeQuickToolbarOpen: string;
+/** @hidden */
+export declare const quickToolbarOpen: string;
+/** @hidden */
+export declare const quickToolbarClose: string;
+/** @hidden */
+export declare const popupHide: string;

src/rich-text-editor/base/constant.js

@@ -85,6 +85,6 @@ /** @hidden */
 /** @hidden */
+export var toolbarStatusUpdate = 'toolbarStatusUpdate';
+/** @hidden */
 export var actionSuccess = 'actionSuccess';
 /** @hidden */
-export var popupOpen = 'popupOpen';
-/** @hidden */
 export var updateToolbarItem = 'updateToolbarItem';
@@ -175,1 +175,15 @@ /** @hidden */
 export var pasteClean = 'pasteClean';
+/** @hidden */
+export var beforeDialogOpen = 'beforeDialogOpen';
+/** @hidden */
+export var dialogOpen = 'dialogOpen';
+/** @hidden */
+export var dialogClose = 'dialogClose';
+/** @hidden */
+export var beforeQuickToolbarOpen = 'beforeQuickToolbarOpen';
+/** @hidden */
+export var quickToolbarOpen = 'quickToolbarOpen';
+/** @hidden */
+export var quickToolbarClose = 'quickToolbarClose';
+/** @hidden */
+export var popupHide = 'popupHide';

src/rich-text-editor/base/interface.d.ts

@@ -32,2 +32,3 @@ import { Component, Observer, L10n, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { PasteCleanup } from '../actions/paste-clean-up';
+import { Popup } from '@syncfusion/ej2-popups';
 /**
@@ -77,2 +78,3 @@ * Specifies RichTextEditor interfaces.
     toolbarModule?: Toolbar;
+    tableModule?: Table;
     sourceCodeModule?: ViewSource;
@@ -125,2 +127,4 @@ getToolbarElement?(): Element;
     executeCommand?(commandName: CommandName, value?: string | HTMLElement): void;
+    serializeValue?(value: string): string;
+    sanitizeHtml?(value: string): string;
 }
@@ -164,9 +168,13 @@ export interface IRenderer {
     member?: string;
+    /** Defines the notifier name. */
     name?: string;
+    /** Defines the selection range. */
     range?: Range;
+    /** Defines the action. */
     action?: string;
-    callBack?(args?: string): void;
+    callBack?(args?: string | IImageCommandsArgs): void;
     file?: Blob;
     insertElement?: Element;
     touchData?: ITouchData;
+    allowedStylePropertiesArray?: string[];
 }
@@ -195,2 +203,3 @@ export interface ITouchData {
     subCommand?: string;
+    controlParent?: DropDownButton;
 }
@@ -242,2 +251,10 @@ export interface IDropDownClickArgs extends ClickEventArgs {
 }
+export interface ILinkCommandsArgs {
+    url?: string;
+    selection?: NodeSelection;
+    title?: string;
+    text?: string;
+    target?: Element;
+    selectParent?: Node[];
+}
 export interface ITableArgs {
@@ -405,2 +422,7 @@ row?: number;
 }
+export interface BeforeQuickToolbarOpenArgs {
+    popup: Popup;
+    cancel: boolean;
+    targetElement: Element;
+}
 export interface IAdapterProcess {
@@ -412,8 +434,11 @@ text: string;
 export interface IFormatter {
+    /** Configure the format tags. */
     formatTags?: {
         [key: string]: string;
     };
+    /** Configure the list tags. */
     listTags?: {
         [key: string]: string;
     };
+    /** Configure the key settings. */
     keyConfig?: {
@@ -483,6 +508,33 @@ [key: string]: string;
 export interface ResizeArgs {
+    /** Defines the resize event args. */
     event?: MouseEvent | TouchEvent;
+    /** Defines the request type. */
     requestType?: string;
+    /** Defines the prevent action. */
     cancel?: boolean;
 }
+export interface BeforeSanitizeHtmlArgs {
+    /** Illustrates whether the current action needs to be prevented or not. */
+    cancel?: boolean;
+    /** It is a callback function and executed it before our inbuilt action. It should return HTML as a string.
+     * @function
+     * @param {string} value - Returns the value.
+     * @returns {string}
+     */
+    helper?: Function;
+    /** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack.
+     *  Also possible to modify the block list in this event.
+     */
+    selectors?: SanitizeSelectors;
+}
+export interface SanitizeSelectors {
+    /** Returns the tags. */
+    tags?: string[];
+    /** Returns the attributes. */
+    attributes?: SanitizeRemoveAttrs[];
+}
+export interface SanitizeRemoveAttrs {
+    attribute?: string;
+    selector?: string;
+}
 export interface ISetToolbarStatusArgs {
@@ -489,0 +541,0 @@ args: IToolbarStatus;

src/rich-text-editor/base/interface.js

 /** @hidden  */
 export var executeGroup = {
     'bold': {
-        command: 'style',
-        subCommand: 'bold',
+        command: 'Style',
+        subCommand: 'Bold',
         value: 'strong'
     },
     'italic': {
-        command: 'style',
-        subCommand: 'italic',
+        command: 'Style',
+        subCommand: 'Italic',
         value: 'em'
     },
     'underline': {
-        command: 'style',
-        subCommand: 'underline',
+        command: 'Style',
+        subCommand: 'Underline',
         value: 'span'
     },
     'strikeThrough': {
-        command: 'style',
-        subCommand: 'strikeThrough',
+        command: 'Style',
+        subCommand: 'StrikeThrough',
         value: 'span'
     },
     'superscript': {
-        command: 'effects',
-        subCommand: 'superscript',
+        command: 'Effects',
+        subCommand: 'SuperScript',
         value: 'sup'
     },
     'subscript': {
-        command: 'effects',
-        subCommand: 'subscript',
+        command: 'Effects',
+        subCommand: 'SubScript',
         value: 'sub'
     },
     'uppercase': {
-        command: 'casing',
-        subCommand: 'uppercase'
+        command: 'Casing',
+        subCommand: 'UpperCase'
     },
     'lowercase': {
-        command: 'casing',
-        subCommand: 'lowercase'
+        command: 'Casing',
+        subCommand: 'LowerCase'
     },
@@ -87,3 +87,3 @@ 'fontColor': {
         command: 'Links',
-        subCommand: 'Links'
+        subCommand: 'createLink'
     },
@@ -126,5 +126,4 @@ 'createImage': {
     'insertImage': {
-        command: 'InsertHTML',
-        subCommand: 'InsertHTML',
-        value: '<img/>'
+        command: 'Images',
+        subCommand: 'Image',
     },
@@ -131,0 +130,0 @@ 'insertBrOnReturn': {

src/rich-text-editor/base/rich-text-editor-model.d.ts

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';import { IFontProperties, IFormatProperties, IColorProperties, IExecutionGroup, executeGroup, CommandName, ResizeArgs } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType } from './enum';import { EditorMode } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode } from '../base/util';
+import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, BeforeSanitizeHtmlArgs } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType } from './enum';import { EditorMode } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';
 import {ChangeEventArgs} from "./rich-text-editor";
@@ -69,3 +69,10 @@ import {ComponentModel} from '@syncfusion/ej2-base';
      *  deniedAttrs: null,
-     *  allowedStyleProps: null,
+     *  allowedStyleProps: ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius',
+     *  'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor',
+     *  'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style',
+     *  'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left',
+     *  'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width',
+     *  'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right',
+     *  'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent',
+     *  'top', 'vertical-align', 'visibility', 'white-space', 'width'],
      *  deniedTags: null,
@@ -288,3 +295,3 @@ *  keepFormat: true,
      */
-    format?: IFormatProperties;
+    format?: FormatModel;
 
@@ -311,3 +318,3 @@ /**
      */
-    fontFamily?: IFontProperties;
+    fontFamily?: FontFamilyModel;
 
@@ -331,3 +338,3 @@ /**
      */
-    fontSize?: IFontProperties;
+    fontSize?: FontSizeModel;
 
@@ -350,3 +357,3 @@ /**
      */
-    fontColor?: IColorProperties;
+    fontColor?: FontColorModel;
 
@@ -365,3 +372,3 @@ /**
      */
-    backgroundColor?: IColorProperties;
+    backgroundColor?: BackgroundColorModel;
 
@@ -388,2 +395,3 @@ /**
      * @event
+     * @blazorProperty 'OnActionBegin'
      */
@@ -395,2 +403,3 @@ actionBegin?: EmitType<ActionBeginEventArgs>;
      * @event
+     * @blazorProperty 'OnActionComplete'
      */
@@ -400,4 +409,57 @@ actionComplete?: EmitType<ActionCompleteEventArgs>;
     /**
+     * Event triggers when the dialog is being opened.
+     * If you cancel this event, the dialog remains closed. 
+     * Set the cancel argument to true to cancel the open of a dialog.
+     * @event
+     * @blazorProperty 'OnDialogOpen'
+     */
+
+    beforeDialogOpen?: EmitType<BeforeOpenEventArgs>;
+
+    /**
+     * Event triggers when a dialog is opened.
+     * @event
+     * @blazorProperty 'DialogOpened'
+     */
+    dialogOpen?: EmitType<Object>;
+
+    /**
+     * Event triggers after the dialog has been closed.
+     * @event
+     * @blazorProperty 'DialogClosed'
+     */
+    dialogClose?: EmitType<Object>;
+
+    /**
+     * Event triggers when the quick toolbar is being opened.
+     * @event
+     * @blazorProperty 'OnQuickToolbarOpen'
+     */
+
+    beforeQuickToolbarOpen?: EmitType<BeforeQuickToolbarOpenArgs>;
+
+    /**
+     * Event triggers when a quick toolbar is opened.
+     * @event
+     * @blazorProperty 'QuickToolbarOpened'
+     */
+    quickToolbarOpen?: EmitType<Object>;
+
+    /**
+     * Event triggers after the quick toolbar has been closed.
+     * @event
+     * @blazorProperty 'QuickToolbarClosed'
+     */
+    quickToolbarClose?: EmitType<Object>;
+
+    /**
+     * Triggers when the undo and redo status is updated.
+     * @event 
+     */
+    toolbarStatusUpdate?: EmitType<Object>;
+
+    /**
      * Triggers when the RichTextEditor is rendered.
      * @event 
+     * @blazorProperty 'Created'
      */
@@ -409,2 +471,3 @@ created?: EmitType<Object>;
      * @event 
+     * @blazorProperty 'Destroyed'
      */
@@ -414,4 +477,12 @@ destroyed?: EmitType<Object>;
     /**
+     * Event triggers before sanitize the value. It's only applicable to editorMode as `HTML`.
+     * @event 
+     * @blazorProperty 'OnSanitizeHtml'
+     */
+    beforeSanitizeHtml?: EmitType<BeforeSanitizeHtmlArgs>;
+
+    /**
      * Triggers when RichTextEditor is focused out.
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -423,2 +494,3 @@ blur?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnToolbarClick'
      */
@@ -430,2 +502,3 @@ toolbarClick?: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -437,2 +510,3 @@ focus?: EmitType<Object>;
      * @event 
+     * @blazorProperty 'ValueChange'
      */
@@ -444,2 +518,3 @@ change?: EmitType<ChangeEventArgs>;
      * @event 
+     * @blazorProperty 'Resizing'
      */
@@ -451,2 +526,3 @@ resizing?: EmitType<ResizeArgs>;
      * @event 
+     * @blazorProperty 'OnResizeStart'
      */
@@ -458,2 +534,3 @@ resizeStart?: EmitType<ResizeArgs>;
      * @event 
+     * @blazorProperty 'OnResizeStop'
      */
@@ -460,0 +537,0 @@ resizeStop?: EmitType<ResizeArgs>;

src/rich-text-editor/base/rich-text-editor.d.ts

 import { Component, ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
 import { INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';
+import { BeforeOpenEventArgs } from '@syncfusion/ej2-popups';
 import { RichTextEditorModel } from './rich-text-editor-model';
@@ -7,3 +8,5 @@ import { Render } from '../renderer/render';
 import { IRenderer, IFormatter, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';
-import { IFontProperties, IFormatProperties, IColorProperties, CommandName, ResizeArgs } from './interface';
+import { BeforeQuickToolbarOpenArgs } from './interface';
+import { CommandName, ResizeArgs } from './interface';
+import { ILinkCommandsArgs, IImageCommandsArgs, BeforeSanitizeHtmlArgs } from './interface';
 import { ServiceLocator } from '../services/service-locator';
@@ -13,2 +16,3 @@ import { EditorMode } from './../../common/types';
 import { KeyboardEvents } from '../actions/keyboard';
+import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel } from '../models/models';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';
@@ -184,3 +188,10 @@ import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';
      *  deniedAttrs: null,
-     *  allowedStyleProps: null,
+     *  allowedStyleProps: ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius',
+     *  'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor',
+     *  'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style',
+     *  'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left',
+     *  'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width',
+     *  'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right',
+     *  'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent',
+     *  'top', 'vertical-align', 'visibility', 'white-space', 'width'],
      *  deniedTags: null,
@@ -384,3 +395,3 @@ *  keepFormat: true,
      */
-    format: IFormatProperties;
+    format: FormatModel;
     /**
@@ -406,3 +417,3 @@ * Predefine the font families that populate in font family dropdown list from the toolbar.
      */
-    fontFamily: IFontProperties;
+    fontFamily: FontFamilyModel;
     /**
@@ -425,3 +436,3 @@ * Predefine the font sizes that populate in font size dropdown list from the toolbar.
      */
-    fontSize: IFontProperties;
+    fontSize: FontSizeModel;
     /**
@@ -443,3 +454,3 @@ * Predefine the color palette that can be rendered for font color toolbar command .
      */
-    fontColor: IColorProperties;
+    fontColor: FontColorModel;
     /**
@@ -457,3 +468,3 @@ * Predefine the color palette that can be rendered for background color (text highlighted color) toolbar command.
      */
-    backgroundColor: IColorProperties;
+    backgroundColor: BackgroundColorModel;
     /**
@@ -477,2 +488,3 @@ * Accepts the template design and assigns it as RichTextEditor’s content.
      * @event
+     * @blazorProperty 'OnActionBegin'
      */
@@ -483,7 +495,52 @@ actionBegin: EmitType<ActionBeginEventArgs>;
      * @event
+     * @blazorProperty 'OnActionComplete'
      */
     actionComplete: EmitType<ActionCompleteEventArgs>;
     /**
+     * Event triggers when the dialog is being opened.
+     * If you cancel this event, the dialog remains closed.
+     * Set the cancel argument to true to cancel the open of a dialog.
+     * @event
+     * @blazorProperty 'OnDialogOpen'
+     */
+    beforeDialogOpen: EmitType<BeforeOpenEventArgs>;
+    /**
+     * Event triggers when a dialog is opened.
+     * @event
+     * @blazorProperty 'DialogOpened'
+     */
+    dialogOpen: EmitType<Object>;
+    /**
+     * Event triggers after the dialog has been closed.
+     * @event
+     * @blazorProperty 'DialogClosed'
+     */
+    dialogClose: EmitType<Object>;
+    /**
+     * Event triggers when the quick toolbar is being opened.
+     * @event
+     * @blazorProperty 'OnQuickToolbarOpen'
+     */
+    beforeQuickToolbarOpen: EmitType<BeforeQuickToolbarOpenArgs>;
+    /**
+     * Event triggers when a quick toolbar is opened.
+     * @event
+     * @blazorProperty 'QuickToolbarOpened'
+     */
+    quickToolbarOpen: EmitType<Object>;
+    /**
+     * Event triggers after the quick toolbar has been closed.
+     * @event
+     * @blazorProperty 'QuickToolbarClosed'
+     */
+    quickToolbarClose: EmitType<Object>;
+    /**
+     * Triggers when the undo and redo status is updated.
+     * @event
+     */
+    private toolbarStatusUpdate;
+    /**
      * Triggers when the RichTextEditor is rendered.
      * @event
+     * @blazorProperty 'Created'
      */
@@ -494,7 +551,15 @@ created: EmitType<Object>;
      * @event
+     * @blazorProperty 'Destroyed'
      */
     destroyed: EmitType<Object>;
     /**
+     * Event triggers before sanitize the value. It's only applicable to editorMode as `HTML`.
+     * @event
+     * @blazorProperty 'OnSanitizeHtml'
+     */
+    beforeSanitizeHtml: EmitType<BeforeSanitizeHtmlArgs>;
+    /**
      * Triggers when RichTextEditor is focused out.
      * @event
+     * @blazorProperty 'OnBlur'
      */
@@ -505,2 +570,3 @@ blur: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnToolbarClick'
      */
@@ -511,2 +577,3 @@ toolbarClick: EmitType<Object>;
      * @event
+     * @blazorProperty 'OnFocus'
      */
@@ -517,2 +584,3 @@ focus: EmitType<Object>;
      * @event
+     * @blazorProperty 'ValueChange'
      */
@@ -523,2 +591,3 @@ change: EmitType<ChangeEventArgs>;
      * @event
+     * @blazorProperty 'Resizing'
      */
@@ -529,2 +598,3 @@ resizing: EmitType<ResizeArgs>;
      * @event
+     * @blazorProperty 'OnResizeStart'
      */
@@ -535,2 +605,3 @@ resizeStart: EmitType<ResizeArgs>;
      * @event
+     * @blazorProperty 'OnResizeStop'
      */
@@ -595,6 +666,7 @@ resizeStop: EmitType<ResizeArgs>;
      * @param {CommandName} CommandName - Specifies the name of the command to be executed.
-     * @param {string | HTMLElement} value - Specifies the value that you want to execute.
+     * @param {string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs} value - Specifies the value that you want to execute.
      * @public
      */
-    executeCommand(commandName: CommandName, value?: string | HTMLElement): void;
+    executeCommand(commandName: CommandName, value?: string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs): void;
+    private htmlPurifier;
     private encode;
@@ -617,2 +689,13 @@ /**
     private keyUp;
+    /**
+     * @hidden
+     */
+    serializeValue(value: string): string;
+    /**
+     * This method will clean up the HTML against cross-site scripting attack and return the HTML as string.
+     * It's only applicable to editorMode as `HTML`.
+     * @param {string} value - Specifies the value that you want to sanitize.
+     * @return {string}
+     */
+    sanitizeHtml(value: string): string;
     updateValue(value?: string): void;
@@ -691,2 +774,3 @@ private triggerEditArea;
      * Enables the give toolbar items in the RichTextEditor component.
+     * @param {boolean} muteToolbarUpdate enable/disables the toolbar item status in RichTextEditor.
      * @param {string | string[]} items - Specifies the single or collection of items
@@ -696,5 +780,6 @@ * that you want to be enable in Rich Text Editor’s Toolbar.
      */
-    enableToolbarItem(items: string | string[]): void;
+    enableToolbarItem(items: string | string[], muteToolbarUpdate?: boolean): void;
     /**
      * Disables the given toolbar items in the RichTextEditor component.
+     * @param {boolean} muteToolbarUpdate enable/disables the toolbar item status in RichTextEditor.
      * @param {string | string[]} items - Specifies the single or collection of items
@@ -704,3 +789,3 @@ * that you want to be disable in Rich Text Editor’s Toolbar.
      */
-    disableToolbarItem(items: string | string[]): void;
+    disableToolbarItem(items: string | string[], muteToolbarUpdate?: boolean): void;
     /**
@@ -707,0 +792,0 @@ * Removes the give toolbar items from the RichTextEditor component.

src/rich-text-editor/base/util.d.ts

@@ -31,2 +31,3 @@ import { IToolsItemConfigs, IRichTextEditor } from '../base/interface';
 export declare function updateTextNode(value: string): string;
+export declare function isEditableValueEmpty(value: string): boolean;
 export declare function decode(value: string): string;

src/rich-text-editor/base/util.js

@@ -273,3 +273,3 @@ /**
     var tempNode = document.createElement('div');
-    tempNode.innerHTML = value;
+    tempNode.innerHTML = value.replace(/>\s+</g, '><');
     var childNodes = tempNode.childNodes;
@@ -288,2 +288,5 @@ if (childNodes.length > 0) {
 }
+export function isEditableValueEmpty(value) {
+    return (value === '<p><br></p>' || value === '&lt;p&gt;&lt;br&gt;&lt;/p&gt;' || value === '') ? true : false;
+}
 export function decode(value) {
@@ -290,0 +293,0 @@ return value.replace(/&amp;/g, '&').replace(/&amp;lt;/g, '<')

src/rich-text-editor/formatter/formatter.js

@@ -20,2 +20,3 @@ import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
     Formatter.prototype.process = function (self, args, event, value) {
+        var _this = this;
         var selection = self.contentModule.getDocument().getSelection();
@@ -36,6 +37,6 @@ var range = (selection.rangeCount > 0) ? selection.getRangeAt(selection.rangeCount - 1) : null;
         if (isNullOrUndefined(args)) {
-            var action = event.action;
-            if (action !== 'tab' && action !== 'enter' && action !== 'space' && action !== 'escape') {
+            var action_1 = event.action;
+            if (action_1 !== 'tab' && action_1 !== 'enter' && action_1 !== 'space' && action_1 !== 'escape') {
                 args = {};
-                if (self.editorMode === 'Markdown' && action === 'insert-table') {
+                if (self.editorMode === 'Markdown' && action_1 === 'insert-table') {
                     value = {
@@ -48,19 +49,21 @@ 'headingText': self.localeObj.getConstant('TableHeadingText'),
                     originalEvent: event, cancel: false,
-                    requestType: action || (event.key + 'Key'),
+                    requestType: action_1 || (event.key + 'Key'),
                     itemCollection: value
                 };
                 extend(args, args, items, true);
-                self.trigger(CONSTANT.actionBegin, args);
-                if (args.cancel) {
-                    if (action === 'paste' || action === 'cut' || action === 'copy') {
-                        event.preventDefault();
+                self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {
+                    if (actionBeginArgs.cancel) {
+                        if (action_1 === 'paste' || action_1 === 'cut' || action_1 === 'copy') {
+                            event.preventDefault();
+                        }
                     }
-                    return;
-                }
+                });
             }
-            this.editorManager.observer.notify((event.type === 'keydown' ? KEY_DOWN : KEY_UP), {
-                event: event,
-                callBack: this.onSuccess.bind(this, self),
-                value: value
-            });
+            if ((event.which === 9 && self.tableModule ? self.tableModule.ensureInsideTableList : false) || event.which !== 9) {
+                this.editorManager.observer.notify((event.type === 'keydown' ? KEY_DOWN : KEY_UP), {
+                    event: event,
+                    callBack: this.onSuccess.bind(this, self),
+                    value: value
+                });
+            }
         }
@@ -73,19 +76,20 @@ else if (!isNullOrUndefined(args) && args.item.command && args.item.subCommand && ((args.item.command !== args.item.subCommand
             extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value }, true);
-            self.trigger(CONSTANT.actionBegin, args);
-            if (args.cancel) {
-                return;
-            }
-            if (this.getUndoRedoStack().length === 0 && args.item.command !== 'Links' && args.item.command !== 'Images') {
-                this.saveData();
-            }
-            self.isBlur = false;
-            self.contentModule.getEditPanel().focus();
-            var command = args.item.subCommand.toLocaleLowerCase();
-            if (command === 'paste' || command === 'cut' || command === 'copy') {
-                self.clipboardAction(command, event);
-            }
-            else {
-                this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: args.item.subCommand });
-                this.editorManager.execCommand(args.item.command, args.item.subCommand, event, this.onSuccess.bind(this, self), args.item.value, value, ('#' + self.getID() + ' iframe'));
-            }
+            self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {
+                if (!actionBeginArgs.cancel) {
+                    if (_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'
+                        && actionBeginArgs.item.command !== 'Images') {
+                        _this.saveData();
+                    }
+                    self.isBlur = false;
+                    self.contentModule.getEditPanel().focus();
+                    var command = actionBeginArgs.item.subCommand.toLocaleLowerCase();
+                    if (command === 'paste' || command === 'cut' || command === 'copy') {
+                        self.clipboardAction(command, event);
+                    }
+                    else {
+                        _this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: actionBeginArgs.item.subCommand });
+                        _this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, _this.onSuccess.bind(_this, self), actionBeginArgs.item.value, value, ('#' + self.getID() + ' iframe'));
+                    }
+                }
+            });
         }
@@ -113,16 +117,17 @@ if (isNullOrUndefined(event) || event && event.action !== 'copy') {
         }
-        self.trigger(CONSTANT.actionComplete, events);
-        if (events.requestType === 'Images' || events.requestType === 'Links' && self.editorMode === 'HTML') {
-            var args = events;
-            if (events.requestType === 'Links' && events.event &&
-                events.event.type === 'keydown' &&
-                events.event.keyCode === 32) {
-                return;
+        self.trigger(CONSTANT.actionComplete, events, function (callbackArgs) {
+            if (callbackArgs.requestType === 'Images' || callbackArgs.requestType === 'Links' && self.editorMode === 'HTML') {
+                var args = callbackArgs;
+                if (callbackArgs.requestType === 'Links' && callbackArgs.event &&
+                    callbackArgs.event.type === 'keydown' &&
+                    callbackArgs.event.keyCode === 32) {
+                    return;
+                }
+                self.notify(CONSTANT.insertCompleted, {
+                    args: args.event, type: callbackArgs.requestType, isNotify: true,
+                    elements: args.elements
+                });
             }
-            self.notify(CONSTANT.insertCompleted, {
-                args: args.event, type: events.requestType, isNotify: true,
-                elements: args.elements
-            });
-        }
-        self.autoResize();
+            self.autoResize();
+        });
     };
@@ -145,2 +150,3 @@ /**
             updateUndoRedoStatus(self.quickToolbarModule.inlineQTBar.quickTBarObj, status);
+            self.trigger(CONSTANT.toolbarStatusUpdate, status);
         }
@@ -150,2 +156,3 @@ else {
                 updateUndoRedoStatus(self.toolbarModule.baseToolbar, status);
+                self.trigger(CONSTANT.toolbarStatusUpdate, status);
             }
@@ -152,0 +159,0 @@ }

src/rich-text-editor/models/toolbar-settings-model.d.ts

@@ -230,3 +230,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs } from '../base/interface';import { TableStyleItems } from '../models/items';
      * Specifies the allowed style properties when pasting in RichTextEditor.
-     * @default null
+     * @default ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width']
      */
@@ -233,0 +233,0 @@ allowedStyleProps?: string[];

src/rich-text-editor/models/toolbar-settings.d.ts

@@ -199,3 +199,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
      * Specifies the allowed style properties when pasting in RichTextEditor.
-     * @default null
+     * @default ['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width']
      */
@@ -202,0 +202,0 @@ allowedStyleProps: string[];

src/rich-text-editor/models/toolbar-settings.js

@@ -215,3 +215,3 @@ var __extends = (this && this.__extends) || (function () {
     __decorate([
-        Property(null)
+        Property(['background', 'background-color', 'border', 'border-bottom', 'border-left', 'border-radius', 'border-right', 'border-style', 'border-top', 'border-width', 'clear', 'color', 'cursor', 'direction', 'display', 'float', 'font', 'font-family', 'font-size', 'font-weight', 'font-style', 'height', 'left', 'line-height', 'margin', 'margin-top', 'margin-left', 'margin-right', 'margin-bottom', 'max-height', 'max-width', 'min-height', 'min-width', 'overflow', 'overflow-x', 'overflow-y', 'padding', 'padding-bottom', 'padding-left', 'padding-right', 'padding-top', 'position', 'right', 'table-layout', 'text-align', 'text-decoration', 'text-indent', 'top', 'vertical-align', 'visibility', 'white-space', 'width'])
     ], PasteCleanupSettings.prototype, "allowedStyleProps", void 0);
@@ -218,0 +218,0 @@ __decorate([

src/rich-text-editor/renderer/iframe-content-renderer.js

@@ -18,3 +18,3 @@ var __extends = (this && this.__extends) || (function () {
 /* tslint:disable */
-var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image {border: 0;cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {border: 0;cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block; background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2; border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize { z-index: 1000; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 1em;font-weight: 400;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table.e-rte-table { border-collapse: collapse; empty-cells: show;}\n                table.e-rte-table td,table.e-rte-table th {border: 1px solid #BDBDBD; height: 20px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table.e-rte-table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table.e-rte-table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat; bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid; border-top: 6px solid transparent; content: ''; display: block; height: 0; position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid; border-top: 6px solid transparent; content: ''; display: block; height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n            </style>\n        </head>";
+var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n            <meta charset='utf-8' /> \n            <style>\n                @charset \"UTF-8\";\n                body {\n                    font-family: \"Roboto\", sans-serif;\n                    font-size: 14px;\n                }\n                html, body{height: 100%;margin: 0;}\n                body.e-cursor{cursor:default}\n                span.e-selected-node\t{background-color: #939393;color: white;}\n                span.e-selected-node.e-highlight {background-color: #1d9dd8;}\n                body{color:#333;word-wrap:break-word;padding: 8px;box-sizing: border-box;}\n                .e-rte-image {border: 0;cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-img-caption { display: inline-block; float: none; margin: 5px auto; max-width: 100%;position: relative;}\n                .e-img-caption.e-caption-inline {display: inline-block;float: none;margin: 5px auto;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));position: relativetext-align: center;vertical-align: bottom;}\n                .e-img-inner {box-sizing: border-box;display: block;font-size: 16px;font-weight: initial;margin: auto;opacity: .9;text-align: center;width: 100%;}\n                .e-img-wrap {display: inline-block;margin: auto;padding: 0;text-align: center;width: 100%;}\n                .e-imgleft {float: left;margin: 0 5px 0 0;text-align: left;}\n                .e-imgright {float: right;margin: 0 0 0 5px;text-align: right;}\n                .e-imgcenter {cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-control img:not(.e-resize) {border: 2px solid transparent; z-index: 1000}\n                .e-imginline {display: inline-block;float: none;margin-left: 5px;margin-right: 5px;max-width: calc(100% - (2 * 5px));vertical-align: bottom;}\n                .e-imgbreak {border: 0;cursor: pointer;display: block;float: none;height: auto;margin: 5px auto;max-width: 100%;position: relative;}\n                .e-rte-image.e-img-focus:not(.e-resize) {border: solid 2px #4a90e2;}\n                img::selection { background: transparent;color: transparent;}\n                span.e-rte-imageboxmark {  width: 10px; height: 10px; position: absolute; display: block; background: #4a90e2; border: 1px solid #fff; z-index: 1000;}\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-mob-rte span.e-rte-imageboxmark { background: #fff; border: 1px solid #4a90e2; border-radius: 15px; height: 20px; width: 20px; }\n                .e-mob-rte.e-mob-span span.e-rte-imageboxmark { background: #4a90e2; border: 1px solid #fff; }\n                .e-rte-content .e-content img.e-resize { z-index: 1000; }\n                .e-img-caption .e-img-inner { outline: 0; }\n                .e-img-caption .e-rte-image.e-imgright, .e-img-caption .e-rte-image.e-imgleft { float: none; margin: 0;}\n                body{box-sizing: border-box;min-height: 100px;outline: 0 solid transparent;overflow-x: auto;padding: 16px;position: relative;text-align: inherit;z-index: 2;}\n                p{margin: 0 0 10px;margin-bottom: 10px;}\n                li{margin-bottom: 10px;}\n                h1{font-size: 2.17em;font-weight: 400;line-height: 1;margin: 10px 0;}\n                h2{font-size: 1.74em;font-weight: 400;margin: 10px 0;}\n                h3{font-size: 1.31em;font-weight: 400;margin: 10px 0;}\n                h4{font-size: 1em;font-weight: 400;margin: 0;}\n                h5{font-size: 00.8em;font-weight: 400;margin: 0;}\n                h6{font-size: 00.65em;font-weight: 400;margin: 0;}\n                blockquote{margin: 10px 0;margin-left: 0;padding-left: 5px;border-left: solid 2px #5c5c5c;}\n                pre{background-color: inherit;border: 0;border-radius: 0;color: #333;font-size: inherit;line-height: inherit;margin: 0 0 10px;overflow: visible;padding: 0;white-space: pre-wrap;word-break: inherit;word-wrap: break-word;}\n                strong, b{font-weight: 700;}\n                a{text-decoration: none;user-select: auto;}\n                a:hover{text-decoration: underline;};\n                p:last-child, pre:last-child, blockquote:last-child{margin-bottom: 0;}\n                h3+h4, h4+h5, h5+h6{margin-top: 00.6em;}\n                ul:last-child{margin-bottom: 0;}\n                table { border-collapse: collapse; empty-cells: show;}\n                table td,table th {border: 1px solid #BDBDBD; height: 20px; vertical-align: middle;}\n                table.e-alternate-border tbody tr:nth-child(2n) {background-color: #F5F5F5;}\n                table th {background-color: #E0E0E0;}\n                table.e-dashed-border td,table.e-dashed-border th { border: 1px dashed #BDBDBD} \n                table .e-cell-select {border: 1px double #4a90e2;}\n                span.e-table-box { cursor: nwse-resize; display: block; height: 10px; position: absolute; width: 10px; }\n                span.e-table-box.e-rmob {height: 14px;width: 14px;}\n                .e-row-resize, .e-column-resize { background-color: transparent; background-repeat: repeat; bottom: 0;cursor: col-resize;height: 1px;overflow: visible;position: absolute;width: 1px; }\n                .e-row-resize { cursor: row-resize; height: 1px;}\n                .e-table-rhelper { cursor: col-resize; opacity: .87;position: absolute;}\n                .e-table-rhelper.e-column-helper { width: 1px; }\n                .e-table-rhelper.e-row-helper {height: 1px;}\n                .e-reicon::before { border-bottom: 6px solid transparent; border-right: 6px solid; border-top: 6px solid transparent; content: ''; display: block; height: 0; position: absolute; right: 4px; top: 4px; width: 20px; }\n                .e-reicon::after { border-bottom: 6px solid transparent; border-left: 6px solid; border-top: 6px solid transparent; content: ''; display: block; height: 0; left: 4px; position: absolute; top: 4px; width: 20px; z-index: 3; }\n                .e-row-helper.e-reicon::after { top: 10px; transform: rotate(90deg); }\n                .e-row-helper.e-reicon::before { left: 4px; top: -20px; transform: rotate(90deg); }\n                span.e-table-box { background-color: #ffffff; border: 1px solid #BDBDBD; }\n                span.e-table-box.e-rbox-select { background-color: #BDBDBD; border: 1px solid #BDBDBD; }\n                .e-table-rhelper { background-color: #4a90e2;}\n            </style>\n        </head>";
 /* tslint:enable */
@@ -21,0 +21,0 @@ /**

src/rich-text-editor/renderer/image-module.d.ts

@@ -28,2 +28,3 @@ import { IRichTextEditor } from '../base/interface';
     private pageY;
+    private dialogRenderObj;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
@@ -30,0 +31,0 @@ protected addEventListener(): void;

src/rich-text-editor/renderer/link-module.d.ts

@@ -16,2 +16,3 @@ import { IRichTextEditor, IRenderer } from './../base/interface';
     private quickToolObj;
+    private dialogRenderObj;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
@@ -18,0 +19,0 @@ protected addEventListener(): void;

src/rich-text-editor/renderer/link-module.js

@@ -5,3 +5,2 @@ import { EventHandler, detach, isNullOrUndefined, select } from '@syncfusion/ej2-base';
 import { CLS_RTE_ELEMENTS } from '../base/classes';
-import { Dialog } from '@syncfusion/ej2-popups';
 import { CheckBox } from '@syncfusion/ej2-buttons';
@@ -22,2 +21,3 @@ import { RenderType } from '../base/enum';
         this.rendererFactory = serviceLocator.getService('rendererFactory');
+        this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
     }
@@ -225,3 +225,3 @@ Link.prototype.addEventListener = function () {
         var selectObj = { selfLink: this, selection: e.selection, selectParent: e.selectParent, args: e.args };
-        this.dialogObj = new Dialog({
+        var dialogModel = {
             header: this.i10n.getConstant('linkHeader'),
@@ -253,5 +253,7 @@ content: linkContent,
                 detach(_this.dialogObj.element);
+                _this.dialogRenderObj.close(_this.dialogObj);
                 _this.dialogObj = null;
             },
-        });
+        };
+        this.dialogObj = this.dialogRenderObj.render(dialogModel);
         this.dialogObj.createElement = this.parent.createElement;
@@ -305,2 +307,5 @@ this.dialogObj.appendTo(linkDialogEle);
             proxy.parent.contentModule.getEditPanel().focus();
+            if (Browser.isIE && proxy.parent.iframeSettings.enable) {
+                this.selection.restore();
+            }
             var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
@@ -307,0 +312,0 @@ this.selection = proxy.parent.formatter.editorManager.nodeSelection.save(range, proxy.parent.contentModule.getDocument());

src/rich-text-editor/renderer/popup-renderer.d.ts

@@ -15,3 +15,3 @@ import { IRenderer, IRichTextEditor } from '../base/interface';
     constructor(parent?: IRichTextEditor);
-    private popupOpen;
+    private quickToolbarOpen;
     renderPopup(args: BaseQuickToolbar): void;
@@ -18,0 +18,0 @@ /**

src/rich-text-editor/renderer/popup-renderer.js

 import { Popup } from '@syncfusion/ej2-popups';
 import { CLS_QUICK_POP } from '../base/classes';
-import { popupOpen } from '../base/constant';
+import * as events from '../base/constant';
 /**
@@ -15,4 +15,4 @@ * `Popup renderer` module is used to render popup in RichTextEditor.
     }
-    PopupRenderer.prototype.popupOpen = function () {
-        this.parent.notify(popupOpen, this);
+    PopupRenderer.prototype.quickToolbarOpen = function () {
+        this.parent.trigger(events.quickToolbarOpen, this.popupObj);
     };
@@ -25,3 +25,3 @@ PopupRenderer.prototype.renderPopup = function (args) {
             relateTo: this.parent.element,
-            open: this.popupOpen.bind(this)
+            open: this.quickToolbarOpen.bind(this)
         });
@@ -28,0 +28,0 @@ this.popupObj = args.popupObj;

src/rich-text-editor/renderer/table-module.d.ts

@@ -8,2 +8,3 @@ import { IRichTextEditor } from '../base/interface';
 export declare class Table {
+    ensureInsideTableList: boolean;
     element: HTMLElement;
@@ -31,2 +32,3 @@ private rteID;
     private helper;
+    private dialogRenderObj;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
@@ -33,0 +35,0 @@ protected addEventListener(): void;

src/rich-text-editor/renderer/table-module.js

 import { detach, closest, Browser } from '@syncfusion/ej2-base';
 import { isNullOrUndefined, EventHandler, addClass, removeClass } from '@syncfusion/ej2-base';
-import { Dialog, Popup } from '@syncfusion/ej2-popups';
+import { Popup } from '@syncfusion/ej2-popups';
 import { Button } from '@syncfusion/ej2-buttons';
@@ -15,2 +15,3 @@ import * as events from '../base/constant';
     function Table(parent, serviceLocator) {
+        this.ensureInsideTableList = true;
         this.pageX = null;
@@ -23,2 +24,3 @@ this.pageY = null;
         this.rendererFactory = serviceLocator.getService('rendererFactory');
+        this.dialogRenderObj = serviceLocator.getService('dialogRenderObject');
         this.addEventListener();
@@ -211,5 +213,7 @@ }
         if (nodes.length > 1 || nodes.length && ((range.startOffset === 0 && range.endOffset === 0))) {
+            this.ensureInsideTableList = true;
             return true;
         }
         else {
+            this.ensureInsideTableList = false;
             return false;
@@ -526,2 +530,3 @@ }
     Table.prototype.resizeStart = function (e) {
+        var _this = this;
         if (Browser.isDevice) {
@@ -564,7 +569,7 @@ this.resizeHelper(e);
                 var args = { event: e, requestType: 'Table' };
-                this.parent.trigger(events.resizeStart, args);
-                if (args.cancel) {
-                    this.cancelResizeAction();
-                    return;
-                }
+                this.parent.trigger(events.resizeStart, args, function (resizeStartArgs) {
+                    if (resizeStartArgs.cancel) {
+                        _this.cancelResizeAction();
+                    }
+                });
             }
@@ -623,2 +628,3 @@ EventHandler.add(this.contentModule.getDocument(), Browser.touchMoveEvent, this.resizing, this);
     Table.prototype.resizing = function (e) {
+        var _this = this;
         var pageX = this.getPointX(e);
@@ -631,45 +637,49 @@ var pageY = this.getPointY(e);
         var args = { event: e, requestType: 'table' };
-        this.parent.trigger(events.onResize, args);
-        if (args.cancel) {
-            this.cancelResizeAction();
-            return;
-        }
-        var tableReBox = this.contentModule.getEditPanel().querySelector('.e-table-box');
-        var tableWidth = parseInt(getComputedStyle(this.curTable).width, 10);
-        var tableHeight = parseInt(getComputedStyle(this.curTable).height, 10);
-        if (this.resizeBtnStat.column) {
-            var cellColl = this.curTable.rows[0].cells;
-            var width = parseFloat(getComputedStyle(this.columnEle).width);
-            var actualwid = width - mouseX;
-            var totalwid = parseFloat(getComputedStyle(this.columnEle).width) +
-                parseFloat(getComputedStyle(cellColl[this.colIndex - 1]).width);
-            for (var i = 0; i < this.curTable.rows.length; i++) {
-                if ((totalwid - actualwid) > 20 && actualwid > 20) {
-                    this.curTable.rows[i].cells[this.colIndex - 1].style.width = totalwid - actualwid + 'px';
-                    this.curTable.rows[i].cells[this.colIndex].style.width = actualwid + 'px';
+        this.parent.trigger(events.onResize, args, function (resizingArgs) {
+            if (resizingArgs.cancel) {
+                _this.cancelResizeAction();
+            }
+            else {
+                var tableReBox = _this.contentModule.getEditPanel().querySelector('.e-table-box');
+                var tableWidth = parseInt(getComputedStyle(_this.curTable).width, 10);
+                var tableHeight = parseInt(getComputedStyle(_this.curTable).height, 10);
+                if (_this.resizeBtnStat.column) {
+                    var cellColl = _this.curTable.rows[0].cells;
+                    var width = parseFloat(getComputedStyle(_this.columnEle).width);
+                    var actualwid = width - mouseX;
+                    var totalwid = parseFloat(getComputedStyle(_this.columnEle).width) +
+                        parseFloat(getComputedStyle(cellColl[_this.colIndex - 1]).width);
+                    for (var i = 0; i < _this.curTable.rows.length; i++) {
+                        if ((totalwid - actualwid) > 20 && actualwid > 20) {
+                            _this.curTable.rows[i].cells[_this.colIndex - 1].style.width =
+                                totalwid - actualwid + 'px';
+                            _this.curTable.rows[i].cells[_this.colIndex].style.width =
+                                actualwid + 'px';
+                        }
+                    }
+                    _this.updateHelper();
                 }
+                else if (_this.resizeBtnStat.row) {
+                    _this.parent.preventDefaultResize(e);
+                    var height = parseFloat(_this.rowEle.clientHeight.toString()) + mouseY;
+                    if (height > 20) {
+                        _this.rowEle.style.height = height + 'px';
+                    }
+                    _this.curTable.style.height = '';
+                    tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
+                        'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
+                    _this.updateHelper();
+                }
+                else if (_this.resizeBtnStat.tableBox) {
+                    if (!Browser.isDevice) {
+                        EventHandler.remove(_this.contentModule.getEditPanel(), 'mouseover', _this.resizeHelper);
+                    }
+                    _this.curTable.style.width = tableWidth + mouseX + 'px';
+                    _this.curTable.style.height = tableHeight + mouseY + 'px';
+                    tableReBox.classList.add('e-rbox-select');
+                    tableReBox.style.cssText = 'top: ' + (_this.calcPos(_this.curTable).top + tableHeight - 4) +
+                        'px; left:' + (_this.calcPos(_this.curTable).left + tableWidth - 4) + 'px;';
+                }
             }
-            this.updateHelper();
-        }
-        else if (this.resizeBtnStat.row) {
-            this.parent.preventDefaultResize(e);
-            var height = parseFloat(getComputedStyle(this.rowEle).height) + mouseY;
-            if (height > 20) {
-                this.rowEle.style.height = height + 'px';
-            }
-            this.curTable.style.height = '';
-            tableReBox.style.cssText = 'top: ' + (this.calcPos(this.curTable).top + tableHeight - 4) +
-                'px; left:' + (this.calcPos(this.curTable).left + tableWidth - 4) + 'px;';
-            this.updateHelper();
-        }
-        else if (this.resizeBtnStat.tableBox) {
-            if (!Browser.isDevice) {
-                EventHandler.remove(this.contentModule.getEditPanel(), 'mouseover', this.resizeHelper);
-            }
-            this.curTable.style.width = tableWidth + mouseX + 'px';
-            this.curTable.style.height = tableHeight + mouseY + 'px';
-            tableReBox.classList.add('e-rbox-select');
-            tableReBox.style.cssText = 'top: ' + (this.calcPos(this.curTable).top + tableHeight - 4) +
-                'px; left:' + (this.calcPos(this.curTable).left + tableWidth - 4) + 'px;';
-        }
+        });
     };
@@ -813,5 +823,5 @@ Table.prototype.cancelResizeAction = function () {
             !target.offsetParent.classList.contains('e-quick-dropdown') &&
-            !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown') && !closest(target, '.e-rte-dropdown-popup')) {
+            !target.offsetParent.classList.contains('e-rte-backgroundcolor-dropdown') && !closest(target, '.e-rte-dropdown-popup')
+            && !closest(target, '.e-rte-elements')) {
             removeClass(this.parent.element.querySelectorAll('table td'), classes.CLS_TABLE_SEL);
-            this.hideTableQuickToolbar();
         }
@@ -929,3 +939,3 @@ if (target && target.classList && !target.classList.contains(classes.CLS_TB_COL_RES) &&
         var header = this.l10n.getConstant('tabledialogHeader');
-        this.editdlgObj = new Dialog({
+        var dialogModel = {
             header: header,
@@ -951,5 +961,7 @@ cssClass: classes.CLS_RTE_ELEMENTS,
                 detach(_this.editdlgObj.element);
+                _this.dialogRenderObj.close(_this.editdlgObj);
                 _this.editdlgObj = null;
-            },
-        });
+            }
+        };
+        this.editdlgObj = this.dialogRenderObj.render(dialogModel);
         this.editdlgObj.appendTo(tableDialog);
@@ -956,0 +968,0 @@ if (this.quickToolObj && this.quickToolObj.inlineQTBar && document.body.contains(this.quickToolObj.inlineQTBar.element)) {

src/rich-text-editor/renderer/toolbar-renderer.js

@@ -9,3 +9,2 @@ import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { CLS_TOOLBAR, CLS_DROPDOWN_BTN, CLS_RTE_ELEMENTS, CLS_TB_BTN, CLS_INLINE_DROPDOWN, CLS_COLOR_CONTENT, CLS_FONT_COLOR_DROPDOWN, CLS_BACKGROUND_COLOR_DROPDOWN, CLS_COLOR_PALETTE, CLS_FONT_COLOR_PICKER, CLS_BACKGROUND_COLOR_PICKER } from '../base/classes';
-import { isIDevice } from '../base/util';
 import { ColorPicker } from '@syncfusion/ej2-inputs';
@@ -325,8 +324,3 @@ /**
             change: function (colorPickerArgs) {
-                if (isIDevice()) {
-                    proxy.parent.notify(events.selectionRestore, {});
-                }
-                /* tslint:disable */
-                var colorpickerValue = Browser.info.name === 'msie' || Browser.info.name === 'edge' || isIDevice() ? colorPickerArgs.currentValue.rgba : colorPickerArgs.currentValue.hex;
-                /* tslint:enable */
+                var colorpickerValue = colorPickerArgs.currentValue.rgba;
                 colorPickerArgs.item = {
@@ -337,2 +331,3 @@ command: args.command,
                 };
+                proxy.parent.notify(events.selectionRestore, {});
                 proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
@@ -339,0 +334,0 @@ var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());

src/rich-text-editor/renderer/view-source.d.ts

@@ -33,2 +33,3 @@ import { KeyboardEventArgs } from '@syncfusion/ej2-base';
     updateSourceCode(args?: ClickEventArgs | KeyboardEventArgs): void;
+    private getTextAreaValue;
     getPanel(): HTMLTextAreaElement | Element;
@@ -35,0 +36,0 @@ getViewPanel(): HTMLTextAreaElement | Element;

src/rich-text-editor/renderer/view-source.js

@@ -112,3 +112,3 @@ import { removeClass, selectAll, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';
             rteContent.style.marginTop = this.contentModule.getPanel().style.marginTop;
-            this.getPanel().value = this.parent.value;
+            this.getPanel().value = this.getTextAreaValue();
             this.contentModule.getPanel().style.display = 'none';
@@ -119,7 +119,3 @@ rteContent.style.display = 'block';
             this.contentModule.getPanel().appendChild(this.previewElement);
-            this.getPanel().value = (this.contentModule.getEditPanel().innerHTML === '<p><br></p>' ||
-                this.contentModule.getEditPanel().innerHTML.length === 12) ||
-                (this.contentModule.getEditPanel().childNodes.length === 1 &&
-                    this.contentModule.getEditPanel().childNodes[0].tagName === 'P' &&
-                    this.contentModule.getEditPanel().innerHTML.length === 7) ? null : this.parent.value;
+            this.getPanel().value = this.getTextAreaValue();
             this.contentModule.getEditPanel().style.display = 'none';
@@ -155,6 +151,8 @@ this.previewElement.style.display = 'block';
         });
+        var serializeValue = this.parent.serializeValue(editHTML.value);
+        var value = (serializeValue === null || serializeValue === '') ? '<p><br/></p>' : serializeValue;
         if (this.parent.iframeSettings.enable) {
             editHTML.parentElement.style.display = 'none';
             this.contentModule.getPanel().style.display = 'block';
-            this.contentModule.getEditPanel().innerHTML = editHTML.value;
+            this.contentModule.getEditPanel().innerHTML = value;
         }
@@ -164,3 +162,3 @@ else {
             this.contentModule.getEditPanel().style.display = 'block';
-            this.contentModule.getEditPanel().innerHTML = editHTML.value;
+            this.contentModule.getEditPanel().innerHTML = value;
         }
@@ -185,2 +183,9 @@ this.parent.isBlur = false;
     };
+    ViewSource.prototype.getTextAreaValue = function () {
+        return (this.contentModule.getEditPanel().innerHTML === '<p><br></p>' ||
+            this.contentModule.getEditPanel().innerHTML.length === 12) ||
+            (this.contentModule.getEditPanel().childNodes.length === 1 &&
+                this.contentModule.getEditPanel().childNodes[0].tagName === 'P' &&
+                this.contentModule.getEditPanel().innerHTML.length === 7) ? '' : this.parent.value;
+    };
     ViewSource.prototype.getPanel = function () {
@@ -187,0 +192,0 @@ return this.parent.element.querySelector('.e-rte-srctextarea');

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11147592

increased by5.31%

Number of package files

324

increased by2.53%

Lines of code

98220

increased by4.19%

Worsened metrics

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@syncfusion/ej2-base@17.2.49(transitive)

• + Added@syncfusion/ej2-buttons@17.2.47(transitive)

• + Added@syncfusion/ej2-data@17.2.47(transitive)

• + Added@syncfusion/ej2-icons@17.2.47(transitive)

• + Added@syncfusion/ej2-inputs@17.2.52(transitive)

• + Added@syncfusion/ej2-lists@17.2.47(transitive)

• + Added@syncfusion/ej2-navigations@17.2.49(transitive)

• + Added@syncfusion/ej2-popups@17.2.47(transitive)

• + Added@syncfusion/ej2-splitbuttons@17.2.47(transitive)

• - Removed@syncfusion/ej2-base@17.1.49(transitive)

• - Removed@syncfusion/ej2-buttons@17.1.50(transitive)

• - Removed@syncfusion/ej2-data@17.1.51(transitive)

• - Removed@syncfusion/ej2-icons@17.1.47(transitive)

• - Removed@syncfusion/ej2-inputs@17.1.50(transitive)

• - Removed@syncfusion/ej2-lists@17.1.47(transitive)

• - Removed@syncfusion/ej2-navigations@17.1.49(transitive)

• - Removed@syncfusion/ej2-popups@17.1.50(transitive)

• - Removed@syncfusion/ej2-splitbuttons@17.1.51(transitive)

• Updated@syncfusion/ej2-base@~17.2.28-beta

• Updated@syncfusion/ej2-navigations@~17.2.28-beta

• Updated@syncfusion/ej2-popups@~17.2.28-beta

• Updated@syncfusion/ej2-splitbuttons@~17.2.28-beta