@syncfusion/ej2-richtexteditor - npm Package Compare versions

Comparing version 16.2.52 to 16.3.17

CHANGELOG.md

@@ -7,2 +7,19 @@ # Changelog
 
+#### New Features
+
+1. Image resize support has been provided.
+2. Insert table support has provided for HTML Editor which includes below sub features,
+    1. Create and modify the table, table rows and columns.
+    2. Row and column resize.
+    3. Quick toolbar interaction.
+    4. Table header and custom styles.
+
+#### Breaking Changes
+
+- `setContent` method has removed, use `value` property to set the content instead.
+
+## 16.2.51 (2018-09-04)
+
+### RichTextEditor
+
 #### Bug Fixes
@@ -9,0 +26,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 16.2.52
+*  version : 16.3.17
 *  Copyright Syncfusion Inc. 2001 - 2018. All rights reserved.
@@ -11,13 +11,5 @@ *  Use of this code is subject to the terms of our license.
 import * as _richtexteditor from '@syncfusion/ej2-richtexteditor';
-import * as _base from '@syncfusion/ej2-base';
-import * as _navigations from '@syncfusion/ej2-navigations';
-import * as _popups from '@syncfusion/ej2-popups';
-import * as _splitbuttons from '@syncfusion/ej2-splitbuttons';
 
 export declare namespace ej {
     const richtexteditor: typeof _richtexteditor;
-    const base: typeof _base;
-    const navigations: typeof _navigations;
-    const popups: typeof _popups;
-    const splitbuttons: typeof _splitbuttons;
 }

package.json

 {
   "name": "@syncfusion/ej2-richtexteditor",
-  "version": "16.2.52",
+  "version": "16.3.17",
   "description": "Essential JS 2 RichTextEditor component",
@@ -11,6 +11,6 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~16.2.50",
-    "@syncfusion/ej2-navigations": "~16.2.50",
-    "@syncfusion/ej2-popups": "~16.2.52",
-    "@syncfusion/ej2-splitbuttons": "~16.2.50"
+    "@syncfusion/ej2-base": "~16.3.17",
+    "@syncfusion/ej2-navigations": "~16.3.17",
+    "@syncfusion/ej2-popups": "~16.3.17",
+    "@syncfusion/ej2-splitbuttons": "~16.3.17"
   },
@@ -17,0 +17,0 @@ "devDependencies": {

README.md

@@ -5,3 +5,3 @@ # ej2-richtexteditor
 
-![](Read-me-Images/rte.GIF)
+![](ReadMe_Images/RTE.GIF)
 
@@ -23,5 +23,5 @@
 
-* [GettingStarted](https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started.html)
-* [View Online Demos](https://ej2.syncfusion.com/javascript/demos/#/material/rte/)
-* [Product Page](https://www.syncfusion.com/products/javascript/rich-text-editor)
+    * [GettingStarted](https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started.html)
+    * [View Online Demos](https://ej2.syncfusion.com/javascript/demos/#/material/rte/)
+    * [Product Page](https://www.syncfusion.com/products/javascript/rich-text-editor)
 
@@ -40,18 +40,18 @@ ## 3. Supported frameworks
 
-* HTML editor ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/rich-text-editor-tools.html))
-* Blog posting ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/rich-text-editor-blog-posting.html))
+* HTML editor ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/tools.html))
+* Blog posting ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/blog-posting.html))
 * Markdown editor ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/markdown-editor.html))
-* Inline edit ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/rich-text-editor-inline.html))
+* Inline edit ([Live Demo](https://ej2.syncfusion.com/demos/#/material/rte/inline.html))
 
 ## 5. Key features
 
-* [**Mode**](https://ej2.syncfusion.com/demos/#/material/rte/rich-text-editor-iframe.html): Provides `<IFRAME>` and `<DIV>` mode.
-* [**Markdown**](https://ej2.syncfusion.com/demos/#/material/rte/markdown-editor-preview.html): Handles markdown editing.
-* [**Module**](https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started.html?lang=typescript#module-injection): Contains a modular library to load the necessary functionality on demand.
-* [**Toolbar**](https://ej2.syncfusion.com/demos/#/material/rte/rich-text-editor-types.html): Provides a fully customizable toolbar.
-* [**Editing**](https://ej2.syncfusion.com/documentation/rich-text-editor/miscellaneous.html?lang=typescript#code-view): HTML view to edit the source directly for developers.
-* [**Third-party Integration**](https://ej2.syncfusion.com/documentation/rich-text-editor/third-party-integration.html?lang=typescript): Integrates third-party library.
-* [**Preview**](https://ej2.syncfusion.com/demos/#/material/rte/markdown-editor-preview.html): Preview the modified content before saving it.
-* [**Tools**](https://ej2.syncfusion.com/documentation/rich-text-editor/toolbar.html#toolbar-items): Handles images, hyperlinks, uploads, and more.
-* [**Undo and Redo**](https://ej2.syncfusion.com/documentation/rich-text-editor/miscellaneous.html?lang=typescript#undoredo-manager): Contains undo/redo manager.
+* [Mode](https://ej2.syncfusion.com/demos/#/material/rte/iframe.html): Provides <IFRAME> and <DIV> mode.
+* [Markdown](https://ej2.syncfusion.com/demos/#/material/rte/markdown-editor-preview.html): Handles markdown editing.
+* [Module](https://ej2.syncfusion.com/documentation/rich-text-editor/getting-started.html?lang=typescript#module-injection): Contains a modular library to load the necessary functionality on demand.
+* [Toolbar](https://ej2.syncfusion.com/demos/#/material/rte/types.html): Provides a fully customizable toolbar.
+* [Editing](https://ej2.syncfusion.com/documentation/rich-text-editor/miscellaneous.html?lang=typescript#code-view): HTML view to edit the source directly for developers.
+* [Third-party Integration](https://ej2.syncfusion.com/documentation/rich-text-editor/third-party-integration.html?lang=typescript): Integrates third-party library.
+* [Preview](https://ej2.syncfusion.com/demos/#/material/rte/markdown-editor-preview.html): Preview the modified content before saving it.
+* [Tools](https://ej2.syncfusion.com/documentation/rich-text-editor/toolbar.html#toolbar-items): Handles images, hyperlinks, uploads, and more.
+* [Undo and Redo](https://ej2.syncfusion.com/documentation/rich-text-editor/miscellaneous.html?lang=typescript#undoredo-manager): Contains undo/redo manager.
 
@@ -61,5 +61,5 @@ ## 6. Support
 Product support can be obtained through the following mediums:
-* Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=richtexteditor) support system or [Community forum.](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=richtexteditor)
-* New [GitHub issue](https://github.com/syncfusion/ej2-richtexteditor/issues/new).
-* Ask your query in Stack Overflow with tag `syncfusion`, `ej2`.
+•	Creating incident in Syncfusion [Direct-trac](https://www.syncfusion.com/support/directtrac/incidents?utm_source=npm&utm_campaign=richtexteditor) support system or [Community forum.](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_campaign=richtexteditor)
+•	New [GitHub issue](https://github.com/syncfusion/ej2-richtexteditor/issues/new).
+•	Ask your query in Stack Overflow with tag ‘syncfusion’, ‘ej2’.
  
@@ -66,0 +66,0 @@ ## 7. License

src/common/config.js

@@ -70,3 +70,4 @@ /**
     'space': '32',
-    'enter': '13'
+    'enter': '13',
+    'tab': '9'
 };
@@ -73,0 +74,0 @@ /**

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

@@ -5,3 +5,11 @@ /**
 export declare const IMAGE: string;
+export declare const TABLE: string;
 export declare const LINK: string;
+export declare const INSERT_ROW: string;
+export declare const INSERT_COLUMN: string;
+export declare const DELETEROW: string;
+export declare const DELETECOLUMN: string;
+export declare const REMOVETABLE: string;
+export declare const TABLEHEADER: string;
+export declare const TABLE_VERTICAL_ALIGN: string;
 export declare const ALIGNMENT_TYPE: string;
@@ -13,4 +21,8 @@ export declare const INDENT_TYPE: string;
 export declare const BLOCK_TAGS: string[];
+/** @hidden */
+export declare const IGNORE_BLOCK_TAGS: string[];
+/** @hidden */
+export declare const TABLE_BLOCK_TAGS: string[];
 export declare const SELECTION_TYPE: string;
 export declare const INSERTHTML_TYPE: string;
 export declare const CLEAR_TYPE: string;

src/editor-manager/base/constant.js

@@ -8,3 +8,11 @@ /**
 export var IMAGE = 'INSERT-IMAGE';
+export var TABLE = 'INSERT-TABLE';
 export var LINK = 'INSERT-LINK';
+export var INSERT_ROW = 'INSERT-ROW';
+export var INSERT_COLUMN = 'INSERT-COLUMN';
+export var DELETEROW = 'DELETE-ROW';
+export var DELETECOLUMN = 'DELETE-COLUMN';
+export var REMOVETABLE = 'REMOVE-TABLE';
+export var TABLEHEADER = 'TABLE-HEADER';
+export var TABLE_VERTICAL_ALIGN = 'TABLE_VERTICAL_ALIGN';
 /* Alignments plugin events
@@ -28,2 +36,7 @@ * @hidden
     'thead', 'tr', 'ul', 'video'];
+/** @hidden */
+export var IGNORE_BLOCK_TAGS = ['td', 'th'];
+/** @hidden */
+export var TABLE_BLOCK_TAGS = ['table', 'tbody', 'td', 'tfoot', 'th',
+    'thead', 'tr'];
 /* Selection plugin events
@@ -30,0 +43,0 @@ * @hidden

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

@@ -12,2 +12,3 @@ import { Observer } from '@syncfusion/ej2-base';
 import { ImageCommand } from './../plugin/image';
+import { TableCommand } from './../plugin/table';
 import { SelectionBasedExec } from './../plugin/selection-exec';
@@ -32,2 +33,3 @@ import { InsertHtmlExec } from './../plugin/inserthtml-exec';
     imgObj: ImageCommand;
+    tableObj: TableCommand;
     selectionObj: SelectionBasedExec;
@@ -34,0 +36,0 @@ inserthtmlObj: InsertHtmlExec;

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

@@ -11,2 +11,3 @@ import { Observer } from '@syncfusion/ej2-base';
 import { ImageCommand } from './../plugin/image';
+import { TableCommand } from './../plugin/table';
 import { SelectionBasedExec } from './../plugin/selection-exec';
@@ -41,2 +42,3 @@ import { InsertHtmlExec } from './../plugin/inserthtml-exec';
         this.clearObj = new ClearFormatExec(this);
+        this.tableObj = new TableCommand(this);
         this.undoRedoManager = new UndoRedoManager(this, options.options);
@@ -75,2 +77,34 @@ this.wireEvents();
                 break;
+            case 'table':
+                switch (value.toString().toLocaleLowerCase()) {
+                    case 'createtable':
+                        this.observer.notify(CONSTANT.TABLE, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'insertrowbefore':
+                    case 'insertrowafter':
+                        this.observer.notify(CONSTANT.INSERT_ROW, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'insertcolumnleft':
+                    case 'insertcolumnright':
+                        this.observer.notify(CONSTANT.INSERT_COLUMN, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'deleterow':
+                        this.observer.notify(CONSTANT.DELETEROW, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'deletecolumn':
+                        this.observer.notify(CONSTANT.DELETECOLUMN, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'tableremove':
+                        this.observer.notify(CONSTANT.REMOVETABLE, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'tableheader':
+                        this.observer.notify(CONSTANT.TABLEHEADER, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                    case 'aligntop':
+                    case 'alignmiddle':
+                    case 'alignbottom':
+                        this.observer.notify(CONSTANT.TABLE_VERTICAL_ALIGN, { item: exeValue, event: event, callBack: callBack });
+                        break;
+                }
+                break;
             case 'font':
@@ -77,0 +111,0 @@ case 'style':

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

@@ -72,5 +72,18 @@ import { NodeSelection } from './../../selection/index';
     target?: string;
-    width?: number | string;
-    height?: number | string;
+    width?: {
+        minWidth?: string | number;
+        maxWidth?: string | number;
+        width?: string | number;
+    };
+    height?: {
+        minHeight?: string | number;
+        maxHeight?: string | number;
+        height?: string | number;
+    };
     altText?: string;
+    row?: number;
+    columns?: number;
+    subCommand?: string;
+    tableCell?: HTMLElement;
+    cssClass?: string;
 }
@@ -77,0 +90,0 @@ export interface IHtmlUndoRedoData {

src/editor-manager/plugin.d.ts

@@ -20,1 +20,2 @@ /**
 export * from './plugin/undo';
+export * from './plugin/table';

src/editor-manager/plugin.js

@@ -20,1 +20,2 @@ /**
 export * from './plugin/undo';
+export * from './plugin/table';

src/editor-manager/plugin/alignments.js

@@ -50,2 +50,3 @@ import * as CONSTANT from './../base/constant';
         var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
+        this.parent.domNode.setMarker(save);
         var alignmentNodes = this.parent.domNode.blockNodes();
@@ -57,2 +58,3 @@ for (var i = 0; i < alignmentNodes.length; i++) {
         this.parent.editableElement.focus();
+        this.parent.domNode.saveMarker(save);
         save.restore();
@@ -59,0 +61,0 @@ if (e.callBack) {

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

@@ -36,3 +36,3 @@ import { NodeSelection } from './../../selection/index';
     parseHTMLFragment(value: string): Element;
-    wrap(element: Element, wrapper: DocumentFragment): Element;
+    wrap(element: Element, wrapper: Element): Element;
     insertAfter(newNode: Element, referenceNode: Element): void;
@@ -51,3 +51,5 @@ wrapInner(parent: Element, wrapper: Element): Element;
     setMarker(save: NodeSelection): void;
+    createTempNode(element: Element): Element;
     blockNodes(): Node[];
+    private ignoreTableTag(element);
 }

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

@@ -117,3 +117,5 @@ import * as CONSTANT from './../base/constant';
         element.parentNode.insertBefore(wrapper, element);
-        return wrapper.appendChild(element);
+        wrapper = element.previousSibling;
+        wrapper.appendChild(element);
+        return wrapper;
     };
@@ -147,3 +149,9 @@ DOMNode.prototype.insertAfter = function (newNode, referenceNode) {
     DOMNode.prototype.getSelectedNode = function (element, index) {
-        if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0 && element.childNodes[index]) {
+        if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0 &&
+            element.childNodes[index - 1] && element.childNodes[index - 1].nodeType === Node.ELEMENT_NODE &&
+            (element.childNodes[index - 1].classList.contains(markerClassName.startSelection) ||
+                element.childNodes[index - 1].classList.contains(markerClassName.endSelection))) {
+            element = element.childNodes[index - 1];
+        }
+        else if (element.nodeType === Node.ELEMENT_NODE && element.childNodes.length > 0 && element.childNodes[index]) {
             element = element.childNodes[index];
@@ -240,5 +248,51 @@ }
             || range.endContainer);
+        if (start.contains(end) || end.contains(start)) {
+            var existNode = start.contains(end) ? start : end;
+            var isElement = existNode.nodeType !== Node.TEXT_NODE;
+            if (isElement) {
+                var nodes = [];
+                var textNodes = [];
+                for (var node = existNode; existNode.contains(node); null) {
+                    if (nodes.indexOf(node) < 0 && node.childNodes && node.childNodes.length) {
+                        nodes.push(node);
+                        node = node.childNodes[0];
+                    }
+                    else if (node.nextSibling) {
+                        node = node.nextSibling;
+                    }
+                    else if (node.parentNode) {
+                        node = node.parentNode;
+                        nodes.push(node);
+                    }
+                    if (textNodes.indexOf(node) < 0 && (node.nodeType === Node.TEXT_NODE ||
+                        (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.parentNode.tagName.toLocaleLowerCase()) >= 0
+                            && node.tagName === 'BR'))) {
+                        textNodes.push(node);
+                    }
+                }
+                if (textNodes.length) {
+                    start = start.contains(end) ? textNodes[0] : start;
+                    end = textNodes[textNodes.length - 1];
+                }
+            }
+        }
         if (start !== end) {
-            this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
-            this.replaceWith(end, this.marker(markerClassName.endSelection, this.encode(end.textContent)));
+            if (start.nodeType !== Node.TEXT_NODE && start.tagName === 'BR' &&
+                CONSTANT.IGNORE_BLOCK_TAGS.indexOf(start.parentNode.tagName.toLocaleLowerCase()) >= 0) {
+                this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+                var markerStart = range.startContainer.querySelector('.' + markerClassName.startSelection);
+                markerStart.appendChild(start);
+            }
+            else {
+                this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+            }
+            if (end.nodeType !== Node.TEXT_NODE && end.tagName === 'BR' &&
+                CONSTANT.IGNORE_BLOCK_TAGS.indexOf(end.parentNode.tagName.toLocaleLowerCase()) >= 0) {
+                this.replaceWith(end, this.marker(markerClassName.endSelection, this.encode(end.textContent)));
+                var markerEnd = range.endContainer.querySelector('.' + markerClassName.endSelection);
+                markerEnd.appendChild(end);
+            }
+            else {
+                this.replaceWith(end, this.marker(markerClassName.endSelection, this.encode(end.textContent)));
+            }
         }
@@ -256,2 +310,28 @@ else {
     };
+    DOMNode.prototype.createTempNode = function (element) {
+        var textContent = element.textContent;
+        if (element.tagName === 'BR') {
+            var wrapper = '<' + CONSTANT.DEFAULT_TAG + '></' + CONSTANT.DEFAULT_TAG + '>';
+            var node = element.parentNode;
+            if (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.tagName.toLocaleLowerCase()) >= 0) {
+                element = this.wrap(element, this.parseHTMLFragment(wrapper));
+            }
+        }
+        else if (((element.nodeType !== Node.TEXT_NODE &&
+            (element.classList.contains(markerClassName.startSelection) ||
+                element.classList.contains(markerClassName.endSelection))) ||
+            textContent.replace(/\n/g, '').replace(/(^ *)|( *$)/g, '').length > 0 ||
+            textContent.length && textContent.indexOf('\n') < 0)) {
+            var wrapper = '<' + CONSTANT.DEFAULT_TAG + '></' + CONSTANT.DEFAULT_TAG + '>';
+            var target = element;
+            element = this.wrap(element, this.parseHTMLFragment(wrapper));
+            var ignoreBr = target.nodeType === Node.ELEMENT_NODE && target.firstChild && target.firstChild.nodeName === 'BR'
+                && (target.classList.contains(markerClassName.startSelection) ||
+                    target.classList.contains(markerClassName.endSelection));
+            if (!ignoreBr && element.nextElementSibling && element.nextElementSibling.tagName === 'BR') {
+                element.appendChild(element.nextElementSibling);
+            }
+        }
+        return element;
+    };
     DOMNode.prototype.blockNodes = function () {
@@ -272,10 +352,34 @@ var collectionNodes = [];
                 if (parentNode && collectionNodes.indexOf(parentNode) < 0) {
-                    collectionNodes.push(parentNode);
+                    if (CONSTANT.IGNORE_BLOCK_TAGS.indexOf(parentNode.tagName.toLocaleLowerCase()) >= 0 && (startNode.tagName === 'BR' ||
+                        startNode.nodeType === Node.TEXT_NODE ||
+                        startNode.classList.contains(markerClassName.startSelection) ||
+                        startNode.classList.contains(markerClassName.endSelection))) {
+                        var tempNode = startNode.previousSibling &&
+                            startNode.previousSibling.nodeType === Node.TEXT_NODE ?
+                            startNode.previousSibling : startNode;
+                        collectionNodes.push(this.createTempNode(tempNode));
+                    }
+                    else {
+                        collectionNodes.push(parentNode);
+                    }
                 }
                 var nodes = [];
                 for (var node = startNode; node !== endNode && node !== this.parent; null) {
-                    if (nodes.indexOf(node) < 0 && node.children && node.children.length) {
+                    if (nodes.indexOf(node) < 0 && node.childNodes && node.childNodes.length) {
                         nodes.push(node);
-                        node = node.children[0];
+                        node = node.childNodes[0];
                     }
+                    else if (node && (node.tagName === 'BR' || node.nodeType === Node.TEXT_NODE ||
+                        node.classList.contains(markerClassName.startSelection) ||
+                        node.classList.contains(markerClassName.endSelection)) &&
+                        CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.parentNode.tagName.toLocaleLowerCase()) >= 0) {
+                        node = this.createTempNode(node);
+                    }
+                    else if (node.nextSibling && (node.nextSibling.tagName === 'BR' ||
+                        node.nextSibling.nodeType === Node.TEXT_NODE ||
+                        node.nextSibling.classList.contains(markerClassName.startSelection) ||
+                        node.nextSibling.classList.contains(markerClassName.endSelection)) &&
+                        CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.nextSibling.parentNode.tagName.toLocaleLowerCase()) >= 0) {
+                        node = this.createTempNode(node.nextSibling);
+                    }
                     else if (node.nextSibling) {
@@ -288,3 +392,9 @@ node = node.nextSibling;
                     }
-                    if (this.isBlockNode(node) && nodes.indexOf(node) < 0 &&
+                    if (collectionNodes.indexOf(node) < 0 && node.nodeType === Node.ELEMENT_NODE &&
+                        CONSTANT.IGNORE_BLOCK_TAGS.indexOf(node.parentNode.tagName.toLocaleLowerCase()) >= 0 &&
+                        (node.classList.contains(markerClassName.startSelection) ||
+                            node.classList.contains(markerClassName.endSelection))) {
+                        collectionNodes.push(this.createTempNode(node));
+                    }
+                    if (this.isBlockNode(node) && this.ignoreTableTag(node) && nodes.indexOf(node) < 0 &&
                         collectionNodes.indexOf(node) < 0 && (node !== endNode || range.endOffset > 0)) {
@@ -295,3 +405,3 @@ collectionNodes.push(node);
                 parentNode = this.blockParentNode(endNode);
-                if (parentNode && collectionNodes.indexOf(parentNode) < 0) {
+                if (parentNode && this.ignoreTableTag(parentNode) && collectionNodes.indexOf(parentNode) < 0) {
                     collectionNodes.push(parentNode);
@@ -315,4 +425,7 @@ }
     };
+    DOMNode.prototype.ignoreTableTag = function (element) {
+        return !(CONSTANT.TABLE_BLOCK_TAGS.indexOf(element.tagName.toLocaleLowerCase()) >= 0);
+    };
     return DOMNode;
 }());
 export { DOMNode };

src/editor-manager/plugin/formats.js

 import * as EVENTS from './../../common/constant';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -27,6 +28,4 @@ * Formats internal component
         var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
+        this.parent.domNode.setMarker(save);
         var formatsNodes = this.parent.domNode.blockNodes();
-        if (e.subCommand.toLowerCase() === 'blockquote') {
-            this.parent.domNode.setMarker(save);
-        }
         for (var i = 0; i < formatsNodes.length; i++) {
@@ -43,13 +42,12 @@ var parentNode = void 0;
             }
-            if (e.subCommand.toLowerCase() === parentNode.tagName.toLowerCase() || parentNode.tagName === 'LI') {
+            if (e.subCommand.toLowerCase() === parentNode.tagName.toLowerCase() ||
+                isNullOrUndefined(parentNode.parentNode) || parentNode.tagName === 'LI') {
                 continue;
             }
             this.cleanFormats(parentNode, e.subCommand);
-            var replaceTag = this.parent.domNode.createTagString(e.subCommand, parentNode, replaceHTML.replace(/(?:\r\n|\r|\n)/g, ''));
+            var replaceTag = this.parent.domNode.createTagString(e.subCommand, parentNode, replaceHTML.replace(/>\s+</g, '><'));
             this.parent.domNode.replaceWith(parentNode, replaceTag);
         }
         this.parent.editableElement.focus();
-        if (e.subCommand.toLowerCase() === 'blockquote') {
-            save = this.parent.domNode.saveMarker(save);
-        }
+        save = this.parent.domNode.saveMarker(save);
         save.restore();
@@ -56,0 +54,0 @@ if (e.callBack) {

src/editor-manager/plugin/image.js

@@ -28,5 +28,7 @@ import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
             var imgElement = createElement('img', {
-                className: 'e-rte-image e-imginline', attrs: {
-                    width: isNullOrUndefined(e.item.width) ? 'auto' : e.item.width,
-                    height: isNullOrUndefined(e.item.height) ? 'auto' : e.item.height,
+                className: 'e-rte-image ' + e.item.cssClass, attrs: {
+                    width: (isNullOrUndefined(e.item.width) || isNullOrUndefined(e.item.width.width)) ? 'auto' :
+                        e.item.width.width,
+                    height: (isNullOrUndefined(e.item.height) || isNullOrUndefined(e.item.height.height)) ? 'auto' :
+                        e.item.height.height,
                     alt: (e.item.altText !== '') ? e.item.altText : ''
@@ -36,2 +38,10 @@ }
             imgElement.setAttribute('src', isNullOrUndefined(e.item.url) ? '' : e.item.url);
+            imgElement.style.minWidth = (isNullOrUndefined(e.item.width) || isNullOrUndefined(e.item.width.minWidth)) ? 0 + 'px' :
+                e.item.width.minWidth + 'px';
+            imgElement.style.maxWidth = (isNullOrUndefined(e.item.width) || isNullOrUndefined(e.item.width.maxWidth)) ? null :
+                e.item.width.maxWidth + 'px';
+            imgElement.style.minHeight = (isNullOrUndefined(e.item.height) || isNullOrUndefined(e.item.height.minHeight)) ? 0 + 'px' :
+                e.item.height.minHeight + 'px';
+            imgElement.style.maxHeight = (isNullOrUndefined(e.item.height) || isNullOrUndefined(e.item.height.maxHeight)) ? null :
+                e.item.height.maxHeight + 'px';
             if (!isNullOrUndefined(e.item.selection)) {
@@ -38,0 +48,0 @@ e.item.selection.restore();

src/editor-manager/plugin/indents.js

@@ -36,2 +36,3 @@ import * as CONSTANT from './../base/constant';
         var save = this.parent.nodeSelection.save(range, this.parent.currentDocument);
+        this.parent.domNode.setMarker(save);
         var indentsNodes = this.parent.domNode.blockNodes();
@@ -56,3 +57,4 @@ var parentNodes = indentsNodes.slice();
                     shiftKey: (e.subCommand === 'Indent' ? false : true),
-                    which: 9
+                    which: 9,
+                    action: 'indent'
                 },
@@ -76,2 +78,3 @@ ignoreDefault: true
         this.parent.editableElement.focus();
+        save = this.parent.domNode.saveMarker(save);
         save.restore();
@@ -78,0 +81,0 @@ if (e.callBack) {

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

@@ -7,2 +7,4 @@ /**
     static Insert(docElement: Document, insertNode: Node | string): void;
+    private static closestEle(element, selector);
+    private static searchEle(element, selector);
 }

src/editor-manager/plugin/inserthtml.js

@@ -25,5 +25,6 @@ import { NodeSelection } from './../../selection/index';
         var isCollapsed = range.collapsed;
-        if (!isCollapsed) {
-            var nodes = nodeSelection.getInsertNodeCollection(range);
-            var preNode = nodeCutter.GetSpliceNode(range, nodes[0]);
+        var nodes = nodeSelection.getInsertNodeCollection(range);
+        var closestPrantNode = (node.nodeName.toLowerCase() === 'table') ? this.closestEle(nodes[0].parentNode, 'p') : nodes[0];
+        if (!isCollapsed || (node.nodeName.toLowerCase() === 'table' && closestPrantNode)) {
+            var preNode = nodeCutter.GetSpliceNode(range, closestPrantNode);
             var sibNode = preNode.previousSibling;
@@ -78,4 +79,23 @@ var parentNode = preNode.parentNode;
     };
+    InsertHtml.closestEle = function (element, selector) {
+        var el = element;
+        while (el && el.nodeType === 1) {
+            if (this.searchEle(el, selector)) {
+                return el;
+            }
+            el = el.parentNode;
+        }
+        return null;
+    };
+    InsertHtml.searchEle = function (element, selector) {
+        var matches = element.matches || element.msMatchesSelector || element.webkitMatchesSelector;
+        if (matches) {
+            return matches.call(element, selector);
+        }
+        else {
+            return [].indexOf.call(document.querySelectorAll(selector), element) !== -1;
+        }
+    };
     return InsertHtml;
 }());
 export { InsertHtml };

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

@@ -15,2 +15,3 @@ import { EditorManager } from './../base/editor-manager';
     private createLink(e);
+    private removeText(text, val);
 }

src/editor-manager/plugin/link.js

@@ -40,3 +40,9 @@ import { createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
             InsertHtml.Insert(this.parent.currentDocument, anchor);
-            e.item.selection.setSelectionText(this.parent.currentDocument, anchor.childNodes[0], anchor.childNodes[0], 0, anchor.childNodes[0].textContent.length);
+            if (e.event && e.event.type === 'keydown' && e.event.keyCode === 32) {
+                var startContainer = e.item.selection.range.startContainer;
+                startContainer.textContent = this.removeText(startContainer.textContent, e.item.url);
+            }
+            else {
+                e.item.selection.setSelectionText(this.parent.currentDocument, anchor.childNodes[0], anchor.childNodes[0], 0, anchor.childNodes[0].textContent.length);
+            }
         }
@@ -53,4 +59,14 @@ if (e.callBack) {
     };
+    LinkCommand.prototype.removeText = function (text, val) {
+        var arr = text.split(' ');
+        for (var i = 0; i < arr.length; i++) {
+            if (arr[i] === val) {
+                arr.splice(i, 1);
+                i--;
+            }
+        }
+        return arr.join(' ');
+    };
     return LinkCommand;
 }());
 export { LinkCommand };

src/editor-manager/plugin/lists.js

@@ -43,3 +43,5 @@ import * as CONSTANT from './../base/constant';
                 e.event.stopPropagation();
-                this.domNode.setMarker(this.saveSelection);
+                if (!(e.event.action && e.event.action === 'indent')) {
+                    this.domNode.setMarker(this.saveSelection);
+                }
                 this.currentAction = this.getAction(nodes[0]);
@@ -57,12 +59,14 @@ if (e.event.shiftKey) {
                 }
-                this.saveSelection = this.domNode.saveMarker(this.saveSelection);
-                this.saveSelection.restore();
-                if (e.callBack) {
-                    e.callBack({
-                        requestType: this.currentAction,
-                        editorMode: 'HTML',
-                        range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
-                        elements: this.parent.domNode.blockNodes(),
-                        event: e.event
-                    });
+                if (!(e.event.action && e.event.action === 'indent')) {
+                    this.saveSelection = this.domNode.saveMarker(this.saveSelection);
+                    this.saveSelection.restore();
+                    if (e.callBack) {
+                        e.callBack({
+                            requestType: this.currentAction,
+                            editorMode: 'HTML',
+                            range: this.parent.nodeSelection.getRange(this.parent.currentDocument),
+                            elements: this.parent.domNode.blockNodes(),
+                            event: e.event
+                        });
+                    }
                 }
@@ -141,2 +145,3 @@ }
         this.currentAction = e.subCommand;
+        this.domNode.setMarker(this.saveSelection);
         var listsNodes = this.domNode.blockNodes();
@@ -161,3 +166,2 @@ for (var i = 0; i < listsNodes.length; i++) {
         var isReverse = true;
-        this.domNode.setMarker(this.saveSelection);
         if (this.isRevert(elements, type)) {
@@ -164,0 +168,0 @@ this.revertList(elements);

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

@@ -30,3 +30,3 @@ /**
                 }
-                else {
+                else if (range.startContainer.nodeName.toLowerCase() !== 'td') {
                     var cursorNode = this.insertCursorNode(domSelection, range, isFormatted, nodeCutter, format, value, endNode);
@@ -33,0 +33,0 @@ domSelection.endContainer = domSelection.startContainer = domSelection.getNodeArray(cursorNode, true);

src/editor-manager/plugin/undo.js

@@ -76,3 +76,4 @@ import { debounce, isNullOrUndefined } from '@syncfusion/ej2-base';
             (this.undoRedoStack[this.undoRedoStack.length - 1].range.startOffset === save.range.startOffset) &&
-            (this.undoRedoStack[this.undoRedoStack.length - 1].range.endOffset === save.range.endOffset)) {
+            (this.undoRedoStack[this.undoRedoStack.length - 1].range.endOffset === save.range.endOffset) &&
+            (this.undoRedoStack[this.undoRedoStack.length - 1].range.range.startContainer === save.range.startContainer)) {
             return;
@@ -79,0 +80,0 @@ }

src/global.js

@@ -1,6 +0,1 @@
-import * as richtexteditor from './index';
-import * as base from '@syncfusion/ej2-base';
-import * as navigations from '@syncfusion/ej2-navigations';
-import * as popups from '@syncfusion/ej2-popups';
-import * as splitbuttons from '@syncfusion/ej2-splitbuttons';
-export { richtexteditor, base, navigations, popups, splitbuttons };
+export * from './index';

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

@@ -16,2 +16,3 @@ import { Popup } from '@syncfusion/ej2-popups';
     private dropDownButtons;
+    private colorPickerObj;
     private locator;
@@ -18,0 +19,0 @@ private parent;

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

@@ -10,2 +10,3 @@ import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { DropDownButtons } from './dropdown-buttons';
+import { ColorPickerInput } from './color-picker';
 /**
@@ -23,2 +24,3 @@ * `Quick toolbar` module is used to handle Quick toolbar actions.
         this.dropDownButtons = new DropDownButtons(this.parent, this.locator);
+        this.colorPickerObj = new ColorPickerInput(this.parent, this.locator);
     }
@@ -163,3 +165,3 @@ BaseQuickToolbar.prototype.appendPopupContent = function () {
         var editPanelHeight;
-        var bodyStyle = window.getComputedStyle(window.top.document.body);
+        var bodyStyle = window.getComputedStyle(document.body);
         var bodyRight = parseFloat(bodyStyle.marginRight.split('px')[0]) + parseFloat(bodyStyle.paddingRight.split('px')[0]);
@@ -187,3 +189,3 @@ var windowHeight = window.innerHeight;
         }
-        if (!this.parent.inlineMode.enable) {
+        if (!this.parent.inlineMode.enable && !closest(target, 'table')) {
             this.parent.disableToolbarItem(this.parent.toolbarSettings.items);
@@ -202,3 +204,3 @@ this.parent.enableToolbarItem(['Undo', 'Redo']);
         });
-        this.parent.notify(events.renderColorPicker, {
+        this.colorPickerObj.renderColorPickerInput({
             container: this.toolbarElement,
@@ -241,2 +243,3 @@ containerType: 'quick',
     BaseQuickToolbar.prototype.hidePopup = function () {
+        var viewSourcePanel = this.parent.sourceCodeModule.getViewPanel();
         if (Browser.isDevice) {
@@ -246,3 +249,5 @@ removeClass([this.parent.getToolbar()], [classes.CLS_HIDE]);
         if (!isNullOrUndefined(this.parent.getToolbar()) && !this.parent.inlineMode.enable) {
-            this.parent.enableToolbarItem(this.parent.toolbarSettings.items);
+            if (isNullOrUndefined(viewSourcePanel) || viewSourcePanel.style.display === 'none') {
+                this.parent.enableToolbarItem(this.parent.toolbarSettings.items);
+            }
         }
@@ -268,3 +273,3 @@ this.removeEleFromDOM();
             this.dropDownButtons.destroyDropDowns();
-            this.parent.notify(events.destroyColorPicker, {});
+            this.colorPickerObj.destroyColorPicker();
             removeClass([this.element], [classes.CLS_POP]);
@@ -271,0 +276,0 @@ detach(element);

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

@@ -16,2 +16,5 @@ import { ItemModel, Toolbar as tool } from '@syncfusion/ej2-navigations';
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
+    private addEventListener();
+    private removeEventListener();
+    private setRtl(args);
     private getTemplateObject(itemStr, container);
@@ -18,0 +21,0 @@ getObject(item: string, container: string): IToolbarItemModel;

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

 import { RenderType } from '../base/enum';
 import { CLS_HR_SEPARATOR } from '../base/classes';
+import * as events from '../base/constant';
 import { getTooltipText } from '../base/util';
 import { tools, templateItems } from '../models/items';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
 /**
@@ -13,3 +15,17 @@ * `Toolbar` module is used to handle Toolbar actions.
         this.renderFactory = this.locator.getService('rendererFactory');
+        this.addEventListener();
     }
+    BaseToolbar.prototype.addEventListener = function () {
+        this.parent.on(events.rtlMode, this.setRtl, this);
+        this.parent.on(events.destroy, this.removeEventListener, this);
+    };
+    BaseToolbar.prototype.removeEventListener = function () {
+        this.parent.off(events.rtlMode, this.setRtl);
+        this.parent.off(events.destroy, this.removeEventListener);
+    };
+    BaseToolbar.prototype.setRtl = function (args) {
+        if (!isNullOrUndefined(this.toolbarObj)) {
+            this.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+        }
+    };
     BaseToolbar.prototype.getTemplateObject = function (itemStr, container) {
@@ -16,0 +32,0 @@ var tagName;

src/rich-text-editor/actions/color-picker.d.ts

@@ -20,5 +20,6 @@ import { IRichTextEditor, IRenderer, IColorPickerRenderArgs } from '../base/interface';
     private destroy();
-    private destroyColorPicker();
+    destroyColorPicker(): void;
+    private setRtl(args);
     protected addEventListener(): void;
     protected removeEventListener(): void;
 }

src/rich-text-editor/actions/color-picker.js

@@ -1,2 +0,2 @@
-import { select } from '@syncfusion/ej2-base';
+import { select, detach } from '@syncfusion/ej2-base';
 import { RenderType } from '../base/enum';
@@ -78,10 +78,29 @@ import * as events from '../base/constant';
         if (this.fontColorDropDown && !this.fontColorDropDown.isDestroyed) {
+            var innerEle = this.fontColorDropDown.element.querySelector('.e-rte-color-content');
+            if (innerEle) {
+                detach(innerEle);
+            }
             this.fontColorDropDown.destroy();
         }
         if (this.backgroundColorDropDown && !this.backgroundColorDropDown.isDestroyed) {
+            var innerEle = this.backgroundColorDropDown.element.querySelector('.e-rte-color-content');
+            if (innerEle) {
+                detach(innerEle);
+            }
             this.backgroundColorDropDown.destroy();
         }
     };
+    ColorPickerInput.prototype.setRtl = function (args) {
+        if (this.fontColorPicker) {
+            this.fontColorPicker.setProperties({ enableRtl: args.enableRtl });
+            this.fontColorDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.backgroundColorPicker) {
+            this.backgroundColorPicker.setProperties({ enableRtl: args.enableRtl });
+            this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+    };
     ColorPickerInput.prototype.addEventListener = function () {
         this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, this);
+        this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.destroy, this.destroy, this);
@@ -93,2 +112,3 @@ this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);
         this.parent.off(events.destroy, this.destroy);
+        this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.destroyColorPicker, this.destroyColorPicker);
@@ -95,0 +115,0 @@ };

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

@@ -23,3 +23,6 @@ import { IRichTextEditor } from '../base/interface';
     private charCountBackground(htmlLength);
-    private refresh();
+    /**
+     * @hidden
+     */
+    refresh(): void;
     private restrict(e);
@@ -26,0 +29,0 @@ /**

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

@@ -1,2 +0,2 @@
-import { detach } from '@syncfusion/ej2-base';
+import { detach, isNullOrUndefined } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
@@ -49,6 +49,11 @@ import { RenderType } from '../base/enum';
     };
+    /**
+     * @hidden
+     */
     Count.prototype.refresh = function () {
-        this.appendCount();
-        if (this.parent.maxLength !== -1) {
-            this.charCountBackground(this.htmlLength);
+        if (!isNullOrUndefined(this.editPanel)) {
+            this.appendCount();
+            if (this.parent.maxLength !== -1) {
+                this.charCountBackground(this.htmlLength);
+            }
         }
@@ -97,2 +102,3 @@ };
             this.parent.on(events.count, this.refresh, this);
+            this.parent.on(events.refreshBegin, this.refresh, this);
             this.parent.on(events.mouseDown, this.refresh, this);
@@ -111,2 +117,3 @@ this.parent.on(events.destroy, this.destroy, this);
         this.parent.off(events.keyUp, this.refresh);
+        this.parent.off(events.refreshBegin, this.refresh);
         this.parent.off(events.keyDown, this.restrict);
@@ -113,0 +120,0 @@ this.parent.off(events.count, this.refresh);

src/rich-text-editor/actions/dropdown-buttons.d.ts

@@ -15,2 +15,5 @@ import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
     displayDropDown: DropDownButton;
+    tableRowsDropDown: DropDownButton;
+    tableColumnsDropDown: DropDownButton;
+    tableCellVerticalAlignDropDown: DropDownButton;
     protected parent: IRichTextEditor;
@@ -25,4 +28,11 @@ protected locator: ServiceLocator;
     renderDropDowns(args: IDropDownRenderArgs): void;
+    private rowDropDown(type, tbElement, targetElement);
+    private columnDropDown(type, tbElement, targetElement);
+    private verticalAlignDropDown(type, tbElement, targetElement);
+    private imageDisplayDropDown(type, tbElement, targetElement);
+    private imageAlignmentDropDown(type, tbElement, targetElement);
+    private tableStylesDropDown(type, tbElement, targetElement);
     private removeDropDownClasses(target);
     destroyDropDowns(): void;
+    private setRtl(args);
     protected addEventListener(): void;
@@ -29,0 +39,0 @@ private onIframeMouseDown();

src/rich-text-editor/actions/dropdown-buttons.js

@@ -118,27 +118,19 @@ import { addClass, removeClass, select } from '@syncfusion/ej2-base';
                     case 'align':
-                        targetElement = select('#' + _this.parent.getID() + '_' + type + '_Align', tbElement);
-                        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
-                            return;
-                        }
-                        _this.imageAlignDropDown = _this.toolbarRenderer.renderDropDownButton({
-                            iconCss: 'e-justify-left e-icons',
-                            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,
-                            itemName: 'Align',
-                            items: model.imageAlignItems,
-                            element: targetElement
-                        });
+                        _this.imageAlignmentDropDown(type, tbElement, targetElement);
                         break;
                     case 'display':
-                        targetElement = select('#' + _this.parent.getID() + '_' + type + '_Display', tbElement);
-                        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
-                            return;
-                        }
-                        _this.displayDropDown = _this.toolbarRenderer.renderDropDownButton({
-                            iconCss: 'e-display e-icons',
-                            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
-                            itemName: 'Display',
-                            items: model.imageDisplayItems,
-                            element: targetElement
-                        });
+                        _this.imageDisplayDropDown(type, tbElement, targetElement);
                         break;
+                    case 'tablerows':
+                        _this.rowDropDown(type, tbElement, targetElement);
+                        break;
+                    case 'tablecolumns':
+                        _this.columnDropDown(type, tbElement, targetElement);
+                        break;
+                    case 'tablecellverticalalign':
+                        _this.verticalAlignDropDown(type, tbElement, targetElement);
+                        break;
+                    case 'styles':
+                        _this.tableStylesDropDown(type, tbElement, targetElement);
+                        break;
                 }
@@ -148,2 +140,80 @@ }
     };
+    DropDownButtons.prototype.rowDropDown = function (type, tbElement, targetElement) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + '_TableRows', tbElement);
+        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
+            return;
+        }
+        this.tableRowsDropDown = this.toolbarRenderer.renderDropDownButton({
+            iconCss: 'e-table-rows e-icons',
+            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
+            itemName: 'TableRows',
+            items: model.tableRowsItems,
+            element: targetElement
+        });
+    };
+    DropDownButtons.prototype.columnDropDown = function (type, tbElement, targetElement) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + '_TableColumns', tbElement);
+        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
+            return;
+        }
+        this.tableColumnsDropDown = this.toolbarRenderer.renderDropDownButton({
+            iconCss: 'e-table-columns e-icons',
+            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
+            itemName: 'TableColumns',
+            items: model.tableColumnsItems,
+            element: targetElement
+        });
+    };
+    DropDownButtons.prototype.verticalAlignDropDown = function (type, tbElement, targetElement) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + '_TableCellVerticalAlign', tbElement);
+        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
+            return;
+        }
+        this.tableCellVerticalAlignDropDown = this.toolbarRenderer.renderDropDownButton({
+            iconCss: 'e-table-cell-ver-align e-icons',
+            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
+            itemName: 'TableCellVerticalAlign',
+            items: model.TableCellVerticalAlignItems,
+            element: targetElement
+        });
+    };
+    DropDownButtons.prototype.imageDisplayDropDown = function (type, tbElement, targetElement) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + '_Display', tbElement);
+        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
+            return;
+        }
+        this.displayDropDown = this.toolbarRenderer.renderDropDownButton({
+            iconCss: 'e-display e-icons',
+            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_QUICK_DROPDOWN,
+            itemName: 'Display',
+            items: model.imageDisplayItems,
+            element: targetElement
+        });
+    };
+    DropDownButtons.prototype.imageAlignmentDropDown = function (type, tbElement, targetElement) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + '_Align', tbElement);
+        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
+            return;
+        }
+        this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({
+            iconCss: 'e-justify-left e-icons',
+            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,
+            itemName: 'Align',
+            items: model.imageAlignItems,
+            element: targetElement
+        });
+    };
+    DropDownButtons.prototype.tableStylesDropDown = function (type, tbElement, targetElement) {
+        targetElement = select('#' + this.parent.getID() + '_' + type + '_Styles', tbElement);
+        if (targetElement.classList.contains(classes.CLS_DROPDOWN_BTN)) {
+            return;
+        }
+        this.imageAlignDropDown = this.toolbarRenderer.renderDropDownButton({
+            iconCss: 'e-style e-icons',
+            cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ICONS + ' ' + classes.CLS_QUICK_DROPDOWN,
+            itemName: 'Styles',
+            items: this.parent.tableSettings.styles,
+            element: targetElement
+        });
+    };
     DropDownButtons.prototype.removeDropDownClasses = function (target) {
@@ -182,3 +252,35 @@ removeClass([target], [
         }
+        if (this.tableRowsDropDown) {
+            this.removeDropDownClasses(this.tableRowsDropDown.element);
+            this.tableRowsDropDown.destroy();
+        }
+        if (this.tableColumnsDropDown) {
+            this.removeDropDownClasses(this.tableColumnsDropDown.element);
+            this.tableColumnsDropDown.destroy();
+        }
+        if (this.tableCellVerticalAlignDropDown) {
+            this.removeDropDownClasses(this.tableCellVerticalAlignDropDown.element);
+            this.tableCellVerticalAlignDropDown.destroy();
+        }
     };
+    DropDownButtons.prototype.setRtl = function (args) {
+        if (this.formatDropDown) {
+            this.formatDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.fontNameDropDown) {
+            this.fontNameDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.fontSizeDropDown) {
+            this.fontSizeDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.alignDropDown) {
+            this.alignDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.imageAlignDropDown) {
+            this.imageAlignDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.displayDropDown) {
+            this.displayDropDown.setProperties({ enableRtl: args.enableRtl });
+        }
+    };
     DropDownButtons.prototype.addEventListener = function () {
@@ -190,2 +292,3 @@ if (this.parent.isDestroyed) {
         this.parent.on(events.iframeMouseDown, this.onIframeMouseDown, this);
+        this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
@@ -201,2 +304,3 @@ };
         this.parent.off(events.iframeMouseDown, this.onIframeMouseDown);
+        this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.beforeDropDownItemRender, this.beforeRender);
@@ -203,0 +307,0 @@ this.parent.off(events.destroy, this.removeEventListener);

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

@@ -28,3 +28,2 @@ import { IRichTextEditor, NotifyArgs } from '../base/interface';
     private spaceLink(e?);
-    private removeText(text, val);
     private onToolbarClick(args);
@@ -31,0 +30,0 @@ private renderColorPicker(args);

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

@@ -57,3 +57,5 @@ import * as events from '../base/constant';
         this.contentRenderer.getEditPanel().focus();
-        this.saveSelection.restore();
+        if (e.items && e.items[0].command !== 'Table') {
+            this.saveSelection.restore();
+        }
     };
@@ -91,20 +93,21 @@ HtmlEditor.prototype.onKeyDown = function (e) {
         var urlText = splitText[splitText.length - 1];
-        var regex = new RegExp(/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi);
+        var regex = new RegExp(/([^\S]|^)(((https?\:\/\/)|(www\.))(\S+))/gi);
         if (selectNodeEle[0].nodeName !== 'A' && urlText.match(regex)) {
-            var url = this.parent.createElement('a', { attrs: { href: urlText } });
-            url.innerHTML = urlText;
-            InsertHtml.Insert(this.contentRenderer.getDocument(), url);
-            range.startContainer.textContent = this.removeText(range.startContainer.textContent, urlText);
+            var selection = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());
+            var selectParent = this.parent.formatter.editorManager.nodeSelection.getParentNodeCollection(range);
+            var value = {
+                url: urlText,
+                selection: selection, selectParent: selectParent,
+                text: '',
+                title: '',
+                target: ''
+            };
+            this.parent.formatter.process(this.parent, {
+                item: {
+                    'command': 'Links',
+                    'subCommand': 'CreateLink'
+                }
+            }, e, value);
         }
     };
-    HtmlEditor.prototype.removeText = function (text, val) {
-        var arr = text.split(' ');
-        for (var i = 0; i < arr.length; i++) {
-            if (arr[i] === val) {
-                arr.splice(i, 1);
-                i--;
-            }
-        }
-        return arr.join(' ');
-    };
     HtmlEditor.prototype.onToolbarClick = function (args) {
@@ -133,2 +136,7 @@ var save;
             }
+            if (item.command === 'Table') {
+                this.parent.notify(events.tableToolbarAction, {
+                    member: 'table', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                });
+            }
         }
@@ -166,2 +174,7 @@ else {
                     break;
+                case 'CreateTable':
+                    this.parent.notify(events.createTable, {
+                        member: 'table', args: args, selection: save
+                    });
+                    break;
                 case 'SourceCode':
@@ -173,11 +186,2 @@ this.parent.notify(events.sourceCode, { member: 'viewSource', args: args });
                     break;
-                case 'Copy':
-                    this.parent.onCopy();
-                    break;
-                case 'Cut':
-                    this.parent.onCut();
-                    break;
-                case 'Paste':
-                    this.parent.onPaste();
-                    break;
                 case 'FontColor':
@@ -184,0 +188,0 @@ case 'BackgroundColor':

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

@@ -20,2 +20,3 @@ import { RenderType } from '../base/enum';
     imageQTBar: BaseQuickToolbar;
+    tableQTBar: BaseQuickToolbar;
     inlineQTBar: BaseQuickToolbar;
@@ -52,2 +53,3 @@ private renderFactory;
     private onIframeMouseDown();
+    private setRtl(args);
     removeEventListener(): void;
@@ -54,0 +56,0 @@ /**

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

@@ -69,3 +69,3 @@ import { select, isNullOrUndefined, Browser, addClass, removeClass, EventHandler } from '@syncfusion/ej2-base';
     QuickToolbar.prototype.renderQuickToolbars = function () {
-        if (this.linkQTBar || this.imageQTBar || this.textQTBar) {
+        if (this.linkQTBar || this.imageQTBar || this.textQTBar || this.tableQTBar) {
             return;
@@ -79,2 +79,4 @@ }
         this.renderFactory.addRenderer(RenderType.ImageToolbar, this.imageQTBar);
+        this.tableQTBar = this.createQTBar('Table', 'MultiRow', this.parent.quickToolbarSettings.table, RenderType.TableToolbar);
+        this.renderFactory.addRenderer(RenderType.TableToolbar, this.tableQTBar);
         if (this.linkQTBar) {
@@ -89,2 +91,5 @@ EventHandler.add(this.linkQTBar.element, 'mousedown', this.onMouseDown, this);
         }
+        if (this.tableQTBar) {
+            EventHandler.add(this.tableQTBar.element, 'mousedown', this.onMouseDown, this);
+        }
     };
@@ -115,2 +120,5 @@ QuickToolbar.prototype.renderInlineQuickToolbar = function () {
         }
+        if (this.tableQTBar && !hasClass(this.tableQTBar.element, 'e-popup-close')) {
+            this.tableQTBar.hidePopup();
+        }
         if (this.parent.inlineMode.enable && !Browser.isDevice) {
@@ -129,3 +137,3 @@ this.hideInlineQTBar();
         var target = args.target;
-        if (isNullOrUndefined(select('.' + CLS_INLINE_POP, window.top.document.body))) {
+        if (isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {
             this.hideInlineQTBar();
@@ -149,3 +157,3 @@ this.offsetX = args.pageX;
     QuickToolbar.prototype.keyDownHandler = function () {
-        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, window.top.document))) {
+        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
@@ -155,3 +163,3 @@ }
     QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
-        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, window.top.document))) {
+        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
@@ -188,2 +196,6 @@ }
         }
+        if (this.tableQTBar) {
+            EventHandler.remove(this.tableQTBar.element, 'mousedown', this.onMouseDown);
+            this.tableQTBar.destroy();
+        }
         if (this.inlineQTBar) {
@@ -218,2 +230,5 @@ EventHandler.remove(this.inlineQTBar.element, 'mousedown', this.onMouseDown);
         }
+        if (this.tableQTBar && !hasClass(this.tableQTBar.element, 'e-popup-close')) {
+            this.tableQTBar.hidePopup();
+        }
     };
@@ -238,2 +253,3 @@ QuickToolbar.prototype.addEventListener = function () {
         this.parent.on(events.keyDown, this.onKeyDown, this);
+        this.parent.on(events.rtlMode, this.setRtl, this);
     };
@@ -252,2 +268,13 @@ QuickToolbar.prototype.onKeyDown = function (e) {
     };
+    QuickToolbar.prototype.setRtl = function (args) {
+        if (this.inlineQTBar) {
+            this.inlineQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.imageQTBar) {
+            this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+        }
+        if (this.linkQTBar) {
+            this.imageQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+        }
+    };
     QuickToolbar.prototype.removeEventListener = function () {
@@ -271,2 +298,3 @@ if (this.parent.isDestroyed) {
         this.parent.off(events.keyDown, this.onKeyDown);
+        this.parent.off(events.rtlMode, this.setRtl);
     };
@@ -273,0 +301,0 @@ /**

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

@@ -38,3 +38,3 @@ import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
         if (!(document.body.contains(document.body.querySelector('.e-rte-quick-toolbar'))
-            && e.item && (e.item.command === 'Images' || e.item.command === 'Display'))) {
+            && e.item && (e.item.command === 'Images' || e.item.command === 'Display' || e.item.command === 'Table'))) {
             this.parent.formatter.process(this.parent, e, e.originalEvent, null);
@@ -41,0 +41,0 @@ }

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

@@ -21,2 +21,3 @@ import { Toolbar as tool } from '@syncfusion/ej2-navigations';
     protected locator: ServiceLocator;
+    private isTransformChild;
     private contentRenderer;
@@ -35,3 +36,3 @@ protected toolbarRenderer: IRenderer;
     private checkToolbarResponsive(ele);
-    private toggleFloatTBarOffset(action, top);
+    private checkIsTransformChild();
     private toggleFloatClass(e?);
@@ -72,2 +73,3 @@ private renderToolbar();
     protected removeEventListener(): void;
+    private onRefresh();
     /**
@@ -74,0 +76,0 @@ * Called internally if any of the property value changed.

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

 import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';
 import { isNullOrUndefined as isNOU, closest } from '@syncfusion/ej2-base';
+import { setStyleAttribute } from '@syncfusion/ej2-base';
 import * as events from '../base/constant';
@@ -20,2 +21,3 @@ import * as classes from '../base/classes';
         this.locator = serviceLocator;
+        this.isTransformChild = false;
         this.renderFactory = this.locator.getService('rendererFactory');
@@ -105,14 +107,18 @@ this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent));
     };
-    Toolbar.prototype.toggleFloatTBarOffset = function (action, top) {
-        this.tbElement.style.top = ((action === 'add') ? (top + this.parent.floatingToolbarOffset) : 0) + 'px';
+    Toolbar.prototype.checkIsTransformChild = function () {
+        this.isTransformChild = false;
+        var transformElements = selectAll('[style*="transform"]', document);
+        for (var i = 0; i < transformElements.length; i++) {
+            if (transformElements[i].contains(this.parent.element)) {
+                this.isTransformChild = true;
+                break;
+            }
+        }
     };
     Toolbar.prototype.toggleFloatClass = function (e) {
-        var topValue = 0;
-        var floatOffset = this.parent.floatingToolbarOffset;
+        var topValue;
         var isBody = false;
+        var isFloat = false;
         var scrollParent;
-        var scrollParentRelativeTop = 0;
-        var trg = this.parent.element;
-        var trgHeight = trg.offsetHeight;
-        var tbHeight = this.getToolbarHeight() + this.getExpandTBarPopHeight();
+        var floatOffset = this.parent.floatingToolbarOffset;
         if (e && e.target !== document) {
@@ -124,27 +130,54 @@ scrollParent = e.target;
             scrollParent = document.body;
-            var bodyStyle = window.getComputedStyle(scrollParent);
-            scrollParentRelativeTop = parseFloat(bodyStyle.marginTop.split('px')[0]) + parseFloat(bodyStyle.paddingTop.split('px')[0]);
         }
-        var targetTop = trg.getBoundingClientRect().top;
-        var scrollParentYOffset = (Browser.isMSPointer && isBody) ? window.pageYOffset : scrollParent.parentElement.scrollTop;
-        var scrollParentRect = scrollParent.getBoundingClientRect();
-        var scrollParentTop = (!isBody) ? scrollParentRect.top : (scrollParentRect.top + scrollParentYOffset);
-        var isOutOfRange = ((targetTop - ((!isBody) ? scrollParentTop : 0)) + trgHeight > tbHeight + floatOffset) ? false : true;
-        if (targetTop > (scrollParentTop + floatOffset) || targetTop < -trgHeight || ((targetTop < 0) ? isOutOfRange : false)) {
-            this.tbElement.classList.remove(classes.CLS_TB_FLOAT);
-            this.tbElement.style.width = '100%';
-            this.toggleFloatTBarOffset('remove', topValue);
+        var tbHeight = this.getToolbarHeight() + this.getExpandTBarPopHeight();
+        if (this.isTransformChild) {
+            topValue = 0;
+            var scrollParentRelativeTop = 0;
+            var trgHeight = this.parent.element.offsetHeight;
+            if (isBody) {
+                var bodyStyle = window.getComputedStyle(scrollParent);
+                scrollParentRelativeTop = parseFloat(bodyStyle.marginTop.split('px')[0]) + parseFloat(bodyStyle.paddingTop.split('px')[0]);
+            }
+            var targetTop = this.parent.element.getBoundingClientRect().top;
+            var scrollParentYOffset = (Browser.isMSPointer && isBody) ? window.pageYOffset : scrollParent.parentElement.scrollTop;
+            var scrollParentRect = scrollParent.getBoundingClientRect();
+            var scrollParentTop = (!isBody) ? scrollParentRect.top : (scrollParentRect.top + scrollParentYOffset);
+            var outOfRange = ((targetTop - ((!isBody) ? scrollParentTop : 0)) + trgHeight > tbHeight + floatOffset) ? false : true;
+            if (targetTop > (scrollParentTop + floatOffset) || targetTop < -trgHeight || ((targetTop < 0) ? outOfRange : false)) {
+                isFloat = false;
+                removeClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);
+            }
+            else if (targetTop < (scrollParentTop + floatOffset)) {
+                if (targetTop < 0) {
+                    topValue = (-targetTop) + scrollParentTop;
+                }
+                else {
+                    topValue = scrollParentTop - targetTop;
+                }
+                topValue = (isBody) ? topValue - scrollParentRelativeTop : topValue;
+                addClass([this.tbElement], [classes.CLS_TB_ABS_FLOAT]);
+                isFloat = true;
+            }
         }
-        else if (targetTop < (scrollParentTop + floatOffset)) {
-            if (targetTop < 0) {
-                topValue = (-targetTop) + scrollParentTop;
+        else {
+            var parent_1 = this.parent.element.getBoundingClientRect();
+            if (window.innerHeight < parent_1.top) {
+                return;
             }
-            else {
-                topValue = scrollParentTop - targetTop;
+            topValue = (e && e.target !== document) ? scrollParent.getBoundingClientRect().top : 0;
+            if ((parent_1.bottom < (floatOffset + tbHeight + topValue)) || parent_1.bottom < 0 || parent_1.top > floatOffset + topValue) {
+                isFloat = false;
             }
-            topValue = (isBody) ? topValue - scrollParentRelativeTop : topValue;
-            this.tbElement.classList.add(classes.CLS_TB_FLOAT);
-            this.tbElement.style.width = this.parent.element.offsetWidth + 'px';
-            this.toggleFloatTBarOffset('add', topValue);
+            else if (parent_1.top < floatOffset) {
+                isFloat = true;
+            }
         }
+        if (!isFloat) {
+            removeClass([this.tbElement], [classes.CLS_TB_FLOAT]);
+            setStyleAttribute(this.tbElement, { top: 0 + 'px', width: '100%' });
+        }
+        else {
+            addClass([this.tbElement], [classes.CLS_TB_FLOAT]);
+            setStyleAttribute(this.tbElement, { width: this.parent.element.offsetWidth + 'px', top: (floatOffset + topValue) + 'px' });
+        }
     };
@@ -169,2 +202,3 @@ Toolbar.prototype.renderToolbar = function () {
                 if (this.parent.toolbarSettings.enableFloating) {
+                    this.checkIsTransformChild();
                     this.toggleFloatClass();
@@ -380,2 +414,3 @@ }
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+        this.parent.on(events.refreshBegin, this.onRefresh, this);
         this.parent.on(events.destroy, this.destroy, this);
@@ -412,2 +447,6 @@ this.parent.on(events.enableFullScreen, this.fullScreen, this);
     };
+    Toolbar.prototype.onRefresh = function () {
+        this.refreshToolbarOverflow();
+        this.parent.setContentHeight();
+    };
     /**
@@ -414,0 +453,0 @@ * Called internally if any of the property value changed.

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

@@ -23,2 +23,4 @@ /**
 /** @hidden */
+export declare const CLS_TB_ABS_FLOAT: string;
+/** @hidden */
 export declare const CLS_INLINE: string;
@@ -141,1 +143,13 @@ /** @hidden */
 export declare const CLS_RTE_READONLY: string;
+/** @hidden */
+export declare const CLS_TABLE_SEL: string;
+/** @hidden */
+export declare const CLS_TB_DASH_BOR: string;
+/** @hidden */
+export declare const CLS_TB_ALT_BOR: string;
+/** @hidden */
+export declare const CLS_TB_COL_RES: string;
+/** @hidden */
+export declare const CLS_TB_ROW_RES: string;
+/** @hidden */
+export declare const CLS_TB_BOX_RES: string;

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

@@ -23,2 +23,4 @@ /**
 /** @hidden */
+export var CLS_TB_ABS_FLOAT = 'e-rte-tb-abs-float';
+/** @hidden */
 export var CLS_INLINE = 'e-rte-inline';
@@ -141,1 +143,13 @@ /** @hidden */
 export var CLS_RTE_READONLY = 'e-rte-readonly';
+/** @hidden */
+export var CLS_TABLE_SEL = 'e-cell-select';
+/** @hidden */
+export var CLS_TB_DASH_BOR = 'e-dashed-border';
+/** @hidden */
+export var CLS_TB_ALT_BOR = 'e-alternate-border';
+/** @hidden */
+export var CLS_TB_COL_RES = 'e-column-resize';
+/** @hidden */
+export var CLS_TB_ROW_RES = 'e-row-resize';
+/** @hidden */
+export var CLS_TB_BOX_RES = 'e-table-box';

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

@@ -23,2 +23,4 @@ /** @hidden */
 /** @hidden */
+export declare const refreshBegin: string;
+/** @hidden */
 export declare const toolbarUpdated: string;
@@ -62,2 +64,8 @@ /** @hidden */
 /** @hidden */
+export declare const resizeStart: string;
+/** @hidden */
+export declare const onResize: string;
+/** @hidden */
+export declare const resizeStop: string;
+/** @hidden */
 export declare const undo: string;
@@ -139,2 +147,4 @@ /** @hidden */
 /** @hidden */
+export declare const tableColorPickerChanged: string;
+/** @hidden */
 export declare const focusChange: string;
@@ -153,1 +163,9 @@ /** @hidden */
 export declare const imgModule: string;
+/** @hidden */
+export declare const rtlMode: string;
+/** @hidden */
+export declare const createTable: string;
+/** @hidden */
+export declare const docClick: string;
+/** @hidden */
+export declare const tableToolbarAction: string;

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

@@ -23,2 +23,4 @@ /** @hidden */
 /** @hidden */
+export var refreshBegin = 'refresh-begin';
+/** @hidden */
 export var toolbarUpdated = 'toolbar-updated';
@@ -62,2 +64,8 @@ /** @hidden */
 /** @hidden */
+export var resizeStart = 'resizeStart';
+/** @hidden */
+export var onResize = 'resizing';
+/** @hidden */
+export var resizeStop = 'resizeStop';
+/** @hidden */
 export var undo = 'undo';
@@ -139,2 +147,4 @@ /** @hidden */
 /** @hidden */
+export var tableColorPickerChanged = 'tableColorPickerChanged';
+/** @hidden */
 export var focusChange = 'focusChange';
@@ -153,1 +163,9 @@ /** @hidden */
 export var imgModule = 'imageModule';
+/** @hidden */
+export var rtlMode = 'rtl-mode';
+/** @hidden */
+export var createTable = 'createTable';
+/** @hidden */
+export var docClick = 'docClick';
+/** @hidden */
+export var tableToolbarAction = 'table-toolbar-action';

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

@@ -20,2 +20,3 @@ /**
     InlineToolbar = 6,
+    TableToolbar = 7,
 }
@@ -22,0 +23,0 @@ export declare type Action = 'refresh' | 'print' | 'Undo' | 'Redo';

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

@@ -21,2 +21,3 @@ /**
     RenderType[RenderType["InlineToolbar"] = 6] = "InlineToolbar";
+    RenderType[RenderType["TableToolbar"] = 7] = "TableToolbar";
 })(RenderType || (RenderType = {}));
@@ -23,0 +24,0 @@ export var ToolbarType;

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

@@ -13,3 +13,3 @@ import { Component, Observer, L10n } from '@syncfusion/ej2-base';
 import { MarkdownSelection } from './../../markdown-parser/plugin/markdown-selection';
-import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel } from '../models/models';
+import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';
 import { QuickToolbarSettingsModel, InlineModeModel } from '../models/models';
@@ -20,2 +20,3 @@ import { Count } from '../actions/count';
 import { Image } from '../renderer/image-module';
+import { Table } from '../renderer/table-module';
 import { ServiceLocator } from '../services/service-locator';
@@ -31,2 +32,3 @@ import { UndoRedoCommands } from '../../markdown-parser/plugin/undo';
 import { KeyboardEvents } from '../actions/keyboard';
+import { ViewSource } from '../renderer/view-source';
 /**
@@ -50,2 +52,3 @@ * Specifies RichTextEditor interfaces.
     insertImageSettings: ImageSettingsModel;
+    tableSettings: TableSettingsModel;
     floatingToolbarOffset?: number;
@@ -73,2 +76,3 @@ showCharCount?: boolean;
     toolbarModule?: Toolbar;
+    sourceCodeModule?: ViewSource;
     getToolbarElement?(): Element;
@@ -113,4 +117,6 @@ fullScreenModule?: FullScreen;
     onPaste?(): void;
+    clipboardAction?: Function;
     localeObj?: L10n;
     invokeChangeEvent?(): void;
+    preventDefaultResize?(e?: FocusEvent | MouseEvent): void;
 }
@@ -120,2 +126,3 @@ export interface IRenderer {
     imageQTBar?: BaseQuickToolbar;
+    tableQTBar?: BaseQuickToolbar;
     textQTBar?: BaseQuickToolbar;
@@ -202,2 +209,3 @@ inlineQTBar?: BaseQuickToolbar;
     name?: string;
+    cssClass?: string;
 }
@@ -207,7 +215,41 @@ export interface IImageCommandsArgs {
     selection?: NodeSelection;
-    width?: number | string;
-    height?: number | string;
+    width?: {
+        minWidth?: string | number;
+        maxWidth?: string | number;
+        width?: string | number;
+    };
+    height?: {
+        minHeight?: string | number;
+        maxHeight?: string | number;
+        height?: string | number;
+    };
     altText?: string;
     selectParent?: Node[];
+    cssClass?: string;
 }
+export interface ITableArgs {
+    row?: number;
+    columns?: number;
+    width?: {
+        minWidth?: string | number;
+        maxWidth?: string | number;
+        width?: string | number;
+    };
+    selection?: NodeSelection;
+    selectNode?: Node[];
+    selectParent?: Node[];
+    subCommand?: string;
+}
+export interface ITableNotifyArgs {
+    module?: string;
+    args?: ClickEventArgs | MouseEvent;
+    selection?: NodeSelection;
+    selectNode?: Node[];
+    selectParent?: Node[];
+    cancel?: boolean;
+    requestType?: Action;
+    enable?: boolean;
+    properties?: Object;
+    self?: Table;
+}
 export interface IEditorModel {
@@ -305,3 +347,3 @@ execCommand?: Function;
 export interface IShowPopupArgs {
-    args?: MouseEvent | TouchEvent;
+    args?: MouseEvent | TouchEvent | KeyboardEvent;
     type?: string;
@@ -413,2 +455,11 @@ isNotify: boolean;
 }
+export interface OffsetPosition {
+    left: number;
+    top: number;
+}
+export interface ResizeArgs {
+    event?: MouseEvent | TouchEvent;
+    requestType?: string;
+    cancel?: boolean;
+}
 export interface ISetToolbarStatusArgs {
@@ -415,0 +466,0 @@ args: IToolbarStatus;

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select } 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, MouseEventArgs } 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 } 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 } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } 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 { 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 * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent } from '../base/util';
+import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select } 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, MouseEventArgs } 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 } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';import { TableSettings } 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 * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent } from '../base/util';
 import {ChangeEventArgs} from "./rich-text-editor";
@@ -94,2 +94,22 @@ import {ComponentModel} from '@syncfusion/ej2-base';
     /**
+     * Specifies the table insert options in RichTextEditor component and control with the following properties.
+     * * styles - Class name should be appended by default in table element.
+     * It helps to design the table in specific CSS styles always when inserting in editor.
+     * * width - Sets the default width of the table when it is inserted in the RichTextEditor.
+     * * minWidth - Sets the default minWidth of the table when it is inserted in the RichTextEditor.
+     * * maxWidth - Sets the default maxWidth of the table when it is inserted in the RichTextEditor.
+     * * resize - To enable resize the table.
+     * @default 
+     * {
+     *  width: '100%',
+     *  styles: [{ text: 'Dashed Borders', class: 'e-dashed-borders', command: 'Table', subCommand: 'Dashed' },
+     * { text: 'Alternate Rows', class: 'e-alternate-rows', command: 'Table', subCommand: 'Alternate' }],
+     * resize: true,
+     *  minWidth: 0, 
+     *  maxWidth: null,
+     * }
+     */
+    tableSettings?: TableSettingsModel;
+
+    /**
      * Preserves the toolbar at the top of the RichTextEditor on scrolling and 
@@ -303,3 +323,3 @@ * specifies the offset of the floating toolbar from documents top position
      *      'Custom': [
-     *          '#ffffff', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',
+     *          '', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',
      *          '#f2f2f2', '#808080', '#cfcdcd', '#d5dce4', '#d9e2f3', '#fbe4d5', '#ededed', '#fff2cc', '#e2efd9', '#ffcccc',
@@ -319,11 +339,7 @@ *          '#d9d9d9', '#595959', '#aeaaaa', '#acb9ca', '#b4c6e7', '#f7caac', '#dbdbdb', '#ffe599', '#c5e0b3', '#ff8080',
      * {
-     *  columns: 10,
+     *  columns: 5,
      *  colorCode: {
-     *          'Custom': [ '#ffffff', '#000000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff0000', '#000080', '#800080', '#996633',
-     *   '#f2f2f2', '#808080', '#ffffcc', '#b3ffb3', '#ccffff', '#ccccff', '#ffcccc', '#ccccff', '#ff80ff', '#f2e6d9',
-     *  '#d9d9d9', '#595959', '#ffff80', '#80ff80', '#b3ffff', '#8080ff', '#ff8080', '#8080ff', '#ff00ff', '#dfbf9f',
-     *   '#bfbfbf', '#404040', '#ffff33', '#33ff33', '#33ffff', '#3333ff', '#ff3333', '#0000b3', '#b300b3', '#c68c53',
-     *   '#a6a6a6', '#262626', '#e6e600', '#00b300', '#009999', '#000099', '#b30000', '#000066', '#660066', '#86592d',
-     *   '#7f7f7f', '#0d0d0d', '#999900', '#006600', '#006666', '#000066', '#660000', '#00004d', '#4d004d', '#734d26'
-     *  ]
+     *          'Custom': ['#ffff00', '#00ff00', '#00ffff', '#ff00ff', '#0000ff', '#ff0000',
+     *              '#000080', '#008080', '#008000', '#800080', '#800000', '#808000',
+     *              '#c0c0c0', '#000000', '']
      *   }
@@ -394,2 +410,20 @@ * }
     /**
+     * Triggers only when resizing the image.
+     * @event 
+     */
+    resizing?: EmitType<ResizeArgs>;
+
+    /**
+     * Triggers only when start resize the image.
+     * @event 
+     */
+    resizeStart?: EmitType<ResizeArgs>;
+
+    /**
+     * Triggers only when stop resize the image.
+     * @event 
+     */
+    resizeStop?: EmitType<ResizeArgs>;
+
+    /**
      * Customize keyCode to change the key value. 
@@ -396,0 +430,0 @@ * @default null

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

@@ -7,3 +7,3 @@ import { Component, ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
 import { IRenderer, IFormatter, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';
-import { IFontProperties, IFormatProperties, IColorProperties, CommandName } from './interface';
+import { IFontProperties, IFormatProperties, IColorProperties, CommandName, ResizeArgs } from './interface';
 import { ServiceLocator } from '../services/service-locator';
@@ -13,6 +13,7 @@ import { EditorMode } from './../../common/types';
 import { KeyboardEvents } from '../actions/keyboard';
-import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel } from '../models/models';
+import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';
 import { QuickToolbarSettingsModel, InlineModeModel } from '../models/models';
 import { Link } from '../renderer/link-module';
 import { Image } from '../renderer/image-module';
+import { Table } from '../renderer/table-module';
 import { Count } from '../actions/count';
@@ -83,2 +84,6 @@ import { HtmlEditor } from '../actions/html-editor';
      */
+    tableModule: Table;
+    /**
+     * @hidden
+     */
     fullScreenModule: FullScreen;
@@ -190,2 +195,21 @@ /**
     /**
+     * Specifies the table insert options in RichTextEditor component and control with the following properties.
+     * * styles - Class name should be appended by default in table element.
+     * It helps to design the table in specific CSS styles always when inserting in editor.
+     * * width - Sets the default width of the table when it is inserted in the RichTextEditor.
+     * * minWidth - Sets the default minWidth of the table when it is inserted in the RichTextEditor.
+     * * maxWidth - Sets the default maxWidth of the table when it is inserted in the RichTextEditor.
+     * * resize - To enable resize the table.
+     * @default
+     * {
+     *  width: '100%',
+     *  styles: [{ text: 'Dashed Borders', class: 'e-dashed-borders', command: 'Table', subCommand: 'Dashed' },
+     * { text: 'Alternate Rows', class: 'e-alternate-rows', command: 'Table', subCommand: 'Alternate' }],
+     * resize: true,
+     *  minWidth: 0,
+     *  maxWidth: null,
+     * }
+     */
+    tableSettings: TableSettingsModel;
+    /**
      * Preserves the toolbar at the top of the RichTextEditor on scrolling and
@@ -380,3 +404,3 @@ * specifies the offset of the floating toolbar from documents top position
      *      'Custom': [
-     *          '#ffffff', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',
+     *          '', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',
      *          '#f2f2f2', '#808080', '#cfcdcd', '#d5dce4', '#d9e2f3', '#fbe4d5', '#ededed', '#fff2cc', '#e2efd9', '#ffcccc',
@@ -395,11 +419,7 @@ *          '#d9d9d9', '#595959', '#aeaaaa', '#acb9ca', '#b4c6e7', '#f7caac', '#dbdbdb', '#ffe599', '#c5e0b3', '#ff8080',
      * {
-     *  columns: 10,
+     *  columns: 5,
      *  colorCode: {
-     *          'Custom': [ '#ffffff', '#000000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff0000', '#000080', '#800080', '#996633',
-     *   '#f2f2f2', '#808080', '#ffffcc', '#b3ffb3', '#ccffff', '#ccccff', '#ffcccc', '#ccccff', '#ff80ff', '#f2e6d9',
-     *  '#d9d9d9', '#595959', '#ffff80', '#80ff80', '#b3ffff', '#8080ff', '#ff8080', '#8080ff', '#ff00ff', '#dfbf9f',
-     *   '#bfbfbf', '#404040', '#ffff33', '#33ff33', '#33ffff', '#3333ff', '#ff3333', '#0000b3', '#b300b3', '#c68c53',
-     *   '#a6a6a6', '#262626', '#e6e600', '#00b300', '#009999', '#000099', '#b30000', '#000066', '#660066', '#86592d',
-     *   '#7f7f7f', '#0d0d0d', '#999900', '#006600', '#006666', '#000066', '#660000', '#00004d', '#4d004d', '#734d26'
-     *  ]
+     *          'Custom': ['#ffff00', '#00ff00', '#00ffff', '#ff00ff', '#0000ff', '#ff0000',
+     *              '#000080', '#008080', '#008000', '#800080', '#800000', '#808000',
+     *              '#c0c0c0', '#000000', '']
      *   }
@@ -460,2 +480,17 @@ * }
     /**
+     * Triggers only when resizing the image.
+     * @event
+     */
+    resizing: EmitType<ResizeArgs>;
+    /**
+     * Triggers only when start resize the image.
+     * @event
+     */
+    resizeStart: EmitType<ResizeArgs>;
+    /**
+     * Triggers only when stop resize the image.
+     * @event
+     */
+    resizeStop: EmitType<ResizeArgs>;
+    /**
      * Customize keyCode to change the key value.
@@ -545,2 +580,6 @@ * @default null
     /**
+     * @hidden
+     */
+    clipboardAction(action: string, event: MouseEvent | KeyboardEvent): void;
+    /**
      * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
@@ -551,2 +590,4 @@ * @method destroy
     destroy(): void;
+    private removeHtmlAttributes();
+    private removeAttributes();
     private destroyDependentModules();
@@ -564,8 +605,2 @@ /**
     /**
-     * Sets the new HTML or text inside the RichTextEditor.
-     * @param  {Element} element - Specifies the RichTextEditor content.
-     * @return {void}
-     */
-    setContent(element: Element): void;
-    /**
      * For internal use only - Get the module name.
@@ -660,3 +695,3 @@ * @private
     private preventImgResize(e);
-    private preventDefaultResize(e);
+    preventDefaultResize(e: FocusEvent | MouseEvent): void;
     private defaultResize(e);
@@ -679,2 +714,3 @@ private resizeHandler();
     private resetHandler();
+    private onDocClick(e);
     private wireEvents();
@@ -681,0 +717,0 @@ private onIframeMouseDown(e);

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

@@ -33,2 +33,3 @@ var __extends = (this && this.__extends) || (function () {
 import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';
+import { TableSettings } from '../models/toolbar-settings';
 import { FontColor, BackgroundColor } from '../models/toolbar-settings';
@@ -85,2 +86,6 @@ import { IFrameSettings } from '../models/iframe-settings';
             modules.push({
+                member: 'table',
+                args: [this, this.serviceLocator]
+            });
+            modules.push({
                 member: 'image',
@@ -173,3 +178,5 @@ args: [this, this.serviceLocator]
     RichTextEditor.prototype.focusIn = function () {
-        this.inputElement.focus();
+        if (this.enabled) {
+            this.inputElement.focus();
+        }
     };
@@ -181,3 +188,5 @@ /**
     RichTextEditor.prototype.focusOut = function () {
-        this.inputElement.blur();
+        if (this.enabled) {
+            this.inputElement.blur();
+        }
     };
@@ -309,3 +318,4 @@ /**
         this.notify(events.mouseUp, { member: 'mouseUp', args: e });
-        if (this.inputElement && this.inputElement.textContent.length !== 0) {
+        if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
+            (this.editorMode === 'Markdown' && this.inputElement.value.length !== 0))) {
             this.notify(events.toolbarRefresh, e);
@@ -343,2 +353,28 @@ }
     /**
+     * @hidden
+     */
+    RichTextEditor.prototype.clipboardAction = function (action, event) {
+        switch (action.toLowerCase()) {
+            case 'cut':
+                this.onCut();
+                this.formatter.onSuccess(this, {
+                    requestType: 'Cut',
+                    editorMode: this.editorMode,
+                    event: event
+                });
+                break;
+            case 'copy':
+                this.onCopy();
+                this.formatter.onSuccess(this, {
+                    requestType: 'Copy',
+                    editorMode: this.editorMode,
+                    event: event
+                });
+                break;
+            case 'paste':
+                this.onPaste(event);
+                break;
+        }
+    };
+    /**
      * Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).
@@ -375,4 +411,37 @@ * @method destroy
         }
+        if (!isNOU(this.cssClass)) {
+            removeClass([this.element], this.cssClass);
+        }
+        this.removeHtmlAttributes();
+        this.removeAttributes();
         _super.prototype.destroy.call(this);
     };
+    RichTextEditor.prototype.removeHtmlAttributes = function () {
+        if (this.htmlAttributes) {
+            var keys = Object.keys(this.htmlAttributes);
+            for (var i = 0; i < keys.length && this.element.hasAttribute(keys[i]); i++) {
+                this.element.removeAttribute(keys[i]);
+            }
+        }
+    };
+    RichTextEditor.prototype.removeAttributes = function () {
+        if (!this.enabled) {
+            removeClass([this.element], classes.CLS_DISABLED);
+        }
+        if (this.enableRtl) {
+            removeClass([this.element], classes.CLS_RTL);
+        }
+        if (this.readonly) {
+            removeClass([this.element], classes.CLS_RTE_READONLY);
+        }
+        if (this.element.style.width !== '' && this.originalElement.style.width === '') {
+            this.element.style.removeProperty('width');
+        }
+        if (this.element.style.height !== '' && this.originalElement.style.height === '') {
+            this.element.style.removeProperty('height');
+        }
+        this.element.removeAttribute('aria-disabled');
+        this.element.removeAttribute('role');
+        this.element.removeAttribute('tabindex');
+    };
     RichTextEditor.prototype.destroyDependentModules = function () {
@@ -399,10 +468,2 @@ /* destroy dependent modules */
     /**
-     * Sets the new HTML or text inside the RichTextEditor.
-     * @param  {Element} element - Specifies the RichTextEditor content.
-     * @return {void}
-     */
-    RichTextEditor.prototype.setContent = function (element) {
-        this.contentModule.setPanel(element);
-    };
-    /**
      * For internal use only - Get the module name.
@@ -426,3 +487,12 @@ * @private
                     this.setPlaceHolder();
+                    if (this.showCharCount) {
+                        this.countModule.refresh();
+                    }
                     break;
+                case 'valueTemplate':
+                    this.setValue();
+                    if (this.showCharCount) {
+                        this.countModule.refresh();
+                    }
+                    break;
                 case 'width':
@@ -433,2 +503,3 @@ this.setWidth(newProp[prop]);
                     this.setHeight(newProp[prop]);
+                    this.setContentHeight();
                     break;
@@ -508,3 +579,6 @@ case 'readonly':
         else {
-            this.setProperties({ value: this.decode(this.inputElement.innerHTML) });
+            this.setProperties({
+                value: /<[a-z][\s\S]*>/i.test(this.inputElement.innerHTML) ? this.inputElement.innerHTML :
+                    this.decode(this.inputElement.innerHTML)
+            });
         }
@@ -531,5 +605,9 @@ };
             }
-            if (this.inputElement && this.inputElement.innerHTML.trim() !== value.trim()) {
+            if (this.editorMode === 'HTML' && this.inputElement && this.inputElement.innerHTML.trim() !== value.trim()) {
                 this.inputElement.innerHTML = value;
             }
+            else if (this.editorMode === 'Markdown' && this.inputElement
+                && this.inputElement.value.trim() !== value.trim()) {
+                this.inputElement.value = value;
+            }
         }
@@ -540,2 +618,5 @@ else {
             }
+            else {
+                this.inputElement.value = '';
+            }
             if (this.valueContainer) {
@@ -588,2 +669,3 @@ this.valueContainer.value = '';
     RichTextEditor.prototype.updateRTL = function () {
+        this.notify(events.rtlMode, { enableRtl: this.enableRtl });
         if (this.enableRtl) {
@@ -861,3 +943,3 @@ this.element.classList.add(classes.CLS_RTL);
         this.preventDefaultResize(e);
-        this.notify(events.mouseDown, {});
+        this.notify(events.mouseDown, { args: e });
     };
@@ -919,2 +1001,3 @@ RichTextEditor.prototype.preventImgResize = function (e) {
         var target = e.target;
+        EventHandler.add(document, 'click', this.onDocClick, this);
         if (!this.element.contains(e.target) && document !== e.target && !closest(target, '.' + classes.CLS_RTE) &&
@@ -925,2 +1008,3 @@ !closest(target, '.' + classes.CLS_RTE_ELEMENTS)) {
         }
+        this.notify(events.docClick, { args: e });
     };
@@ -996,2 +1080,16 @@ RichTextEditor.prototype.blurHandler = function (e) {
     };
+    RichTextEditor.prototype.onDocClick = function (e) {
+        EventHandler.remove(document, 'click', this.onDocClick);
+        var target = e.target;
+        if (target && !this.element.contains(e.target) && document !== e.target && !closest(target, '.' + classes.CLS_RTE) &&
+            !closest(target, '.' + classes.CLS_RTE_ELEMENTS)) {
+            if (this.editorMode === 'Markdown') {
+                this.inputElement.setSelectionRange(0, 0);
+            }
+            else {
+                this.inputElement.blur();
+            }
+            this.notify(events.toolbarRefresh, e);
+        }
+    };
     RichTextEditor.prototype.wireEvents = function () {
@@ -1081,2 +1179,5 @@ this.keyboardModule = new KeyboardEvents(this.inputElement, {
     __decorate([
+        Complex({}, TableSettings)
+    ], RichTextEditor.prototype, "tableSettings", void 0);
+    __decorate([
         Property(0)
@@ -1184,2 +1285,11 @@ ], RichTextEditor.prototype, "floatingToolbarOffset", void 0);
     __decorate([
+        Event()
+    ], RichTextEditor.prototype, "resizing", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "resizeStart", void 0);
+    __decorate([
+        Event()
+    ], RichTextEditor.prototype, "resizeStop", void 0);
+    __decorate([
         Property(null)
@@ -1186,0 +1296,0 @@ ], RichTextEditor.prototype, "formatter", void 0);

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

@@ -24,2 +24,3 @@ import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
             && args.item.command
+            && args.item.command !== 'Table'
             && args.item.command !== 'Actions'
@@ -35,9 +36,9 @@ && args.item.command !== 'Links'
         if (isNullOrUndefined(args)) {
-            if (event.action !== 'tab' &&
-                event.action !== 'enter' &&
-                event.action !== 'space' &&
-                event.action !== 'escape') {
+            var action = event.action;
+            if (action !== 'tab' && action !== 'enter' && action !== 'space' && action !== 'escape') {
                 args = {};
                 var items = {
-                    originalEvent: event, cancel: false, requestType: event.action, itemCollection: value
+                    originalEvent: event, cancel: false,
+                    requestType: action || (event.key + 'Key'),
+                    itemCollection: value
                 };
@@ -47,3 +48,3 @@ extend(args, args, items, true);
                 if (args.cancel) {
-                    if (event.action === 'paste') {
+                    if (action === 'paste' || action === 'cut' || action === 'copy') {
                         event.preventDefault();
@@ -75,3 +76,9 @@ }
             self.contentModule.getEditPanel().focus();
-            this.editorManager.execCommand(args.item.command, args.item.subCommand, event, this.onSuccess.bind(this, self), args.item.value, value);
+            var command = args.item.subCommand.toLocaleLowerCase();
+            if (command === 'paste' || command === 'cut' || command === 'copy') {
+                self.clipboardAction(command, event);
+            }
+            else {
+                this.editorManager.execCommand(args.item.command, args.item.subCommand, event, this.onSuccess.bind(this, self), args.item.value, value);
+            }
         }
@@ -98,2 +105,7 @@ this.enableUndo(self);
             var args = events;
+            if (events.requestType === 'Links' && events.event &&
+                events.event.type === 'keydown' &&
+                events.event.keyCode === 32) {
+                return;
+            }
             self.notify(CONSTANT.insertCompleted, {
@@ -100,0 +112,0 @@ args: args.event, type: events.requestType, isNotify: true,

src/rich-text-editor/models/default-locale.js

@@ -57,4 +57,5 @@ // tslint:disable
     'linkText': 'Display Text',
-    'linkTooltipLabel': 'Tooltip',
+    'linkTooltipLabel': 'Title',
     'linkWebUrl': 'Web Address',
+    'linkTitle': 'Enter a title',
     'linkurl': 'http://example.com',
@@ -79,3 +80,28 @@ 'linkOpenInNewWindow': 'Open Link in New Window',
     'imageWidth': 'Width',
-    'textPlaceholder': 'Enter Text'
+    'textPlaceholder': 'Enter Text',
+    'tblhead': '1X1',
+    'inserttablebtn': 'Insert Table',
+    'tabledialogHeader': 'Insert Table',
+    'tableWidth': 'Width',
+    'cellpadding': 'Cell Padding',
+    'cellspacing': 'Cell Spacing',
+    'columns': 'Number of columns',
+    'rows': 'Number of rows',
+    'tableRows': 'Table Rows',
+    'tableColumns': 'Table Columns',
+    'tableCellHorizontalAlign': 'Table Cell Horizontal Align',
+    'tableCellVerticalAlign': 'Table Cell Vertical Align',
+    'createTable': 'Create Table',
+    'removeTable': 'Remove Table',
+    'tableHeader': 'Table Header',
+    'tableRemove': 'Table Remove',
+    'tableCellBackground': 'Table Cell Background',
+    'tableEditProperties': 'Table Edit Properties',
+    'styles': 'Styles',
+    'insertColumnLeft': 'Insert Column Left',
+    'insertColumnRight': 'Insert Column Right',
+    'deleteColumn': 'Delete Column',
+    'insertRowBefore': 'Insert Row Before',
+    'insertRowAfter': 'Insert Row After',
+    'deleteRow': 'Delete Row'
 };
@@ -135,3 +161,23 @@ export var toolsLocale = {
     'viewside': 'viewside',
-    'insertcode': 'insertCode'
+    'insertcode': 'insertCode',
+    'tablerows': 'tableRows',
+    'tablecolumns': 'tableColumns',
+    'tablecellhorizontalalign': 'tableCellHorizontalAlign',
+    'tablecellverticalalign': 'tableCellVerticalAlign',
+    'createtable': 'createTable',
+    'removetable': 'removeTable',
+    'tableheader': 'tableHeader',
+    'tableremove': 'tableRemove',
+    'tablecellbackground': 'tableCellBackground',
+    'tableeditproperties': 'tableEditProperties',
+    'styles': 'styles',
+    'insertcolumnleft': 'insertColumnLeft',
+    'insertcolumnright': 'insertColumnRight',
+    'deletecolumn': 'deleteColumn',
+    'aligntop': 'AlignTop',
+    'alignmiddle': 'AlignMiddle',
+    'alignbottom': 'AlignBottom',
+    'insertrowbefore': 'insertRowBefore',
+    'insertrowafter': 'insertRowAfter',
+    'deleterow': 'deleteRow'
 };

src/rich-text-editor/models/items.d.ts

@@ -12,1 +12,5 @@ /**
 export declare let imageDisplayItems: IDropDownItemModel[];
+export declare let tableRowsItems: IDropDownItemModel[];
+export declare let tableColumnsItems: IDropDownItemModel[];
+export declare let TableCellVerticalAlignItems: IDropDownItemModel[];
+export declare let TableStyleItems: IDropDownItemModel[];

src/rich-text-editor/models/items.js

@@ -5,3 +5,3 @@ // tslint:disable
  */
-export var templateItems = ['alignments', 'formats', 'fontname', 'fontsize', 'fontcolor', 'backgroundcolor', 'align', 'display'];
+export var templateItems = ['alignments', 'formats', 'fontname', 'fontsize', 'fontcolor', 'backgroundcolor', 'align', 'display', 'tablerows', 'tablecolumns', 'tablecellhorizontalalign', 'tablecellverticalalign', 'styles'];
 export var tools = {
@@ -227,2 +227,16 @@ 'alignments': {
     },
+    'createtable': {
+        'id': 'CreateTable',
+        'icon': 'e-create-table',
+        'tooltip': 'Create Table',
+        'command': 'Table',
+        'subCommand': 'CreateTable'
+    },
+    'removetable': {
+        'id': 'removeTable',
+        'icon': 'e-remove-table',
+        'tooltip': 'Remove Table',
+        'command': 'removeTable',
+        'subCommand': 'removeTable'
+    },
     'replace': {
@@ -382,2 +396,65 @@ 'id': 'Replace',
     },
+    'tableheader': {
+        'id': 'TableHeader',
+        'icon': 'e-table-header',
+        'tooltip': 'Table Header',
+        'command': 'Table',
+        'subCommand': 'TableHeader'
+    },
+    'tableremove': {
+        'id': 'TableRemove',
+        'icon': 'e-table-remove',
+        'tooltip': 'Table Remove',
+        'command': 'Table',
+        'subCommand': 'TableRemove'
+    },
+    'tablerows': {
+        'id': 'TableRows',
+        'icon': 'e-table-rows',
+        'tooltip': 'Table Rows',
+        'command': 'Table',
+        'subCommand': 'TableRows'
+    },
+    'tablecolumns': {
+        'id': 'TableColumns',
+        'icon': 'e-table-columns',
+        'tooltip': 'Table Columns',
+        'command': 'Table',
+        'subCommand': 'TableColumns'
+    },
+    'tablecellbackground': {
+        'id': 'TableCellBackground',
+        'icon': 'e-table-cell-background',
+        'tooltip': 'Table Cell Background',
+        'command': 'Table',
+        'subCommand': 'TableCellBackground'
+    },
+    'tablecellhorizontalalign': {
+        'id': 'TableCellHorizontalAlign',
+        'icon': 'e-table-cell-horizontalAlign',
+        'tooltip': 'Table Cell HorizontalAlign',
+        'command': 'Table',
+        'subCommand': 'TableCellHorizontalAlign'
+    },
+    'tablecellverticalalign': {
+        'id': 'TableCellVerticalAlign',
+        'icon': 'e-table-cell-verticalAlign',
+        'tooltip': 'Table Cell VerticalAlign',
+        'command': 'Table',
+        'subCommand': 'TableCellVerticalAlign'
+    },
+    'tableeditproperties': {
+        'id': 'TableEditProperties',
+        'icon': 'e-table-edit-properties',
+        'tooltip': 'Table Edit Properties',
+        'command': 'Table',
+        'subCommand': 'TableEditProperties'
+    },
+    'styles': {
+        'id': 'Styles',
+        'icon': 'e-table-styles',
+        'tooltip': 'Styles',
+        'command': 'Table',
+        'subCommand': 'Styles'
+    }
 };
@@ -399,1 +476,20 @@ export var alignmentItems = [
 ];
+export var tableRowsItems = [
+    { iconCss: 'e-icons e-insert-row-before', text: 'Insert row before', command: 'Table', subCommand: 'InsertRowBefore' },
+    { iconCss: 'e-icons e-insert-row-after', text: 'Insert row after', command: 'Table', subCommand: 'InsertRowAfter' },
+    { iconCss: 'e-icons e-delete-row', text: 'Delete row', command: 'Table', subCommand: 'DeleteRow' },
+];
+export var tableColumnsItems = [
+    { iconCss: 'e-icons e-insert-column-left', text: 'Insert column left', command: 'Table', subCommand: 'InsertColumnLeft' },
+    { iconCss: 'e-icons e-insert-column-right', text: 'Insert column right', command: 'Table', subCommand: 'InsertColumnRight' },
+    { iconCss: 'e-icons e-delete-column', text: 'Delete column', command: 'Table', subCommand: 'DeleteColumn' },
+];
+export var TableCellVerticalAlignItems = [
+    { iconCss: 'e-icons e-align-top', text: 'Align Top', command: 'Table', subCommand: 'AlignTop' },
+    { iconCss: 'e-icons e-align-middle', text: 'Align Middle', command: 'Table', subCommand: 'AlignMiddle' },
+    { iconCss: 'e-icons e-align-bottom', text: 'Align Bottom', command: 'Table', subCommand: 'AlignBottom' },
+];
+export var TableStyleItems = [
+    { text: 'Dashed Borders', class: 'e-dashed-borders', command: 'Table', subCommand: 'Dashed' },
+    { text: 'Alternate Rows', class: 'e-alternate-rows', command: 'Table', subCommand: 'Alternate' }
+];

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

@@ -1,2 +0,2 @@
-import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ToolbarType, ActionOnScroll } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType } from '../base/interface';
+import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ToolbarType, ActionOnScroll } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType } from '../base/interface';import { TableStyleItems } from '../models/items';
 
@@ -78,5 +78,79 @@ /**
 
+    /**
+     * To enable resizing for image element.
+     * @default 'true'
+     */
+    resize?: boolean;
+
+    /**
+     * Defines the minimum Width of the image.
+     * @default 0
+     */
+    minWidth?: string | number;
+
+    /**
+     * Defines the maximum Width of the image.
+     * @default null
+     */
+    maxWidth?: string | number;
+
+    /**
+     * Defines the minimum Height of the image.
+     * @default 0
+     */
+    minHeight?: string | number;
+
+    /**
+     * Defines the maximum Height of the image.
+     * @default null
+     */
+    maxHeight?: string | number;
+
+    /**
+     * image resizing should be done by percentage calculation.
+     * @default false
+     */
+    resizeByPercent?: boolean;
+
 }
 
 /**
+ * Interface for a class TableSettings
+ */
+export interface TableSettingsModel {
+
+    /**
+     * To specify the width of table
+     * @default '100%'
+     */
+    width?: string | number;
+
+    /**
+     * Class name should be appended by default in table element.
+     * It helps to design the table in specific CSS styles always when inserting in editor.
+     * @default TableStyleItems;
+     */
+    styles?: IDropDownItemModel[];
+
+    /**
+     * To enable resizing for table element.
+     * @default 'true'
+     */
+    resize?: boolean;
+
+    /**
+     * Defines the minimum Width of the table.
+     * @default 0
+     */
+    minWidth?: string | number;
+
+    /**
+     * Defines the maximum Width of the table.
+     * @default null
+     */
+    maxWidth?: string | number;
+
+}
+
+/**
  * Interface for a class QuickToolbarSettings
@@ -117,2 +191,8 @@ */
 
+    /**
+     * Specifies the items to render in quick toolbar, when table selected.
+     * @default ['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles']
+     */
+    table?: (string | IToolbarItems)[];
+
 }
@@ -119,0 +199,0 @@

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

@@ -76,3 +76,61 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     path: string;
+    /**
+     * To enable resizing for image element.
+     * @default 'true'
+     */
+    resize: boolean;
+    /**
+     * Defines the minimum Width of the image.
+     * @default 0
+     */
+    minWidth: string | number;
+    /**
+     * Defines the maximum Width of the image.
+     * @default null
+     */
+    maxWidth: string | number;
+    /**
+     * Defines the minimum Height of the image.
+     * @default 0
+     */
+    minHeight: string | number;
+    /**
+     * Defines the maximum Height of the image.
+     * @default null
+     */
+    maxHeight: string | number;
+    /**
+     * image resizing should be done by percentage calculation.
+     * @default false
+     */
+    resizeByPercent: boolean;
 }
+export declare class TableSettings extends ChildProperty<TableSettings> {
+    /**
+     * To specify the width of table
+     * @default '100%'
+     */
+    width: string | number;
+    /**
+     * Class name should be appended by default in table element.
+     * It helps to design the table in specific CSS styles always when inserting in editor.
+     * @default TableStyleItems;
+     */
+    styles: IDropDownItemModel[];
+    /**
+     * To enable resizing for table element.
+     * @default 'true'
+     */
+    resize: boolean;
+    /**
+     * Defines the minimum Width of the table.
+     * @default 0
+     */
+    minWidth: string | number;
+    /**
+     * Defines the maximum Width of the table.
+     * @default null
+     */
+    maxWidth: string | number;
+}
 /**
@@ -107,2 +165,7 @@ * Configures the quick toolbar settings of the RTE.
     text: (string | IToolbarItems)[];
+    /**
+     * Specifies the items to render in quick toolbar, when table selected.
+     * @default ['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles']
+     */
+    table: (string | IToolbarItems)[];
 }
@@ -109,0 +172,0 @@ /**

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

@@ -19,2 +19,3 @@ var __extends = (this && this.__extends) || (function () {
 import { ToolbarType } from '../base/enum';
+import { TableStyleItems } from '../models/items';
 export var predefinedItems = ['Bold', 'Italic', 'Underline', '|', 'Formats', 'Alignments',
@@ -51,3 +52,3 @@ 'OrderedList', 'UnorderedList', '|', 'CreateLink', 'Image', '|', 'SourceCode', 'Undo', 'Redo'];
     'Custom': [
-        '#ffffff', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',
+        '', '#000000', '#e7e6e6', '#44546a', '#4472c4', '#ed7d31', '#a5a5a5', '#ffc000', '#70ad47', '#ff0000',
         '#f2f2f2', '#808080', '#cfcdcd', '#d5dce4', '#d9e2f3', '#fbe4d5', '#ededed', '#fff2cc', '#e2efd9', '#ffcccc',
@@ -62,3 +63,3 @@ '#d9d9d9', '#595959', '#aeaaaa', '#acb9ca', '#b4c6e7', '#f7caac', '#dbdbdb', '#ffe599', '#c5e0b3', '#ff8080',
     'Custom': [
-        '#ffffff', '#000000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff0000', '#000080', '#800080', '#996633',
+        '', '#000000', '#ffff00', '#00ff00', '#00ffff', '#0000ff', '#ff0000', '#000080', '#800080', '#996633',
         '#f2f2f2', '#808080', '#ffffcc', '#b3ffb3', '#ccffff', '#ccccff', '#ffcccc', '#ccccff', '#ff80ff', '#f2e6d9',
@@ -120,5 +121,46 @@ '#d9d9d9', '#595959', '#ffff80', '#80ff80', '#b3ffff', '#8080ff', '#ff8080', '#8080ff', '#ff00ff', '#dfbf9f',
     ], ImageSettings.prototype, "path", void 0);
+    __decorate([
+        Property(true)
+    ], ImageSettings.prototype, "resize", void 0);
+    __decorate([
+        Property(0)
+    ], ImageSettings.prototype, "minWidth", void 0);
+    __decorate([
+        Property(null)
+    ], ImageSettings.prototype, "maxWidth", void 0);
+    __decorate([
+        Property(0)
+    ], ImageSettings.prototype, "minHeight", void 0);
+    __decorate([
+        Property(null)
+    ], ImageSettings.prototype, "maxHeight", void 0);
+    __decorate([
+        Property(false)
+    ], ImageSettings.prototype, "resizeByPercent", void 0);
     return ImageSettings;
 }(ChildProperty));
 export { ImageSettings };
+var TableSettings = /** @class */ (function (_super) {
+    __extends(TableSettings, _super);
+    function TableSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property('100%')
+    ], TableSettings.prototype, "width", void 0);
+    __decorate([
+        Property(TableStyleItems)
+    ], TableSettings.prototype, "styles", void 0);
+    __decorate([
+        Property(true)
+    ], TableSettings.prototype, "resize", void 0);
+    __decorate([
+        Property(0)
+    ], TableSettings.prototype, "minWidth", void 0);
+    __decorate([
+        Property(null)
+    ], TableSettings.prototype, "maxWidth", void 0);
+    return TableSettings;
+}(ChildProperty));
+export { TableSettings };
 /**
@@ -147,2 +189,5 @@ * Configures the quick toolbar settings of the RTE.
     ], QuickToolbarSettings.prototype, "text", void 0);
+    __decorate([
+        Property(['TableHeader', 'TableRows', 'TableColumns', 'BackgroundColor', '-', 'TableRemove', 'Alignments', 'TableCellVerticalAlign', 'Styles'])
+    ], QuickToolbarSettings.prototype, "table", void 0);
     return QuickToolbarSettings;
@@ -149,0 +194,0 @@ }(ChildProperty));

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

@@ -10,1 +10,2 @@ /**
 export * from './renderer/view-source';
+export * from './renderer/table-module';

src/rich-text-editor/renderer.js

@@ -10,1 +10,2 @@ /**
 export * from './renderer/view-source';
+export * from './renderer/table-module';

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

@@ -13,3 +13,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 {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 {border: solid 2px #4a90e2;}\n                img::selection { background: transparent;color: transparent;}\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            </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                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 {background-color: #ffffff;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>";
 /* tslint:enable */
@@ -37,3 +37,4 @@ /**
             id: this.parent.getID() + '_rte-view',
-            className: 'e-rte-content'
+            className: 'e-rte-content',
+            styles: 'display:block;'
         });
@@ -40,0 +41,0 @@ this.setPanel(iframe);

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

@@ -22,2 +22,8 @@ import { IRichTextEditor } from '../base/interface';
     private quickToolObj;
+    private imgResizeDiv;
+    private imgDupPos;
+    private resizeBtnStat;
+    private imgEle;
+    private pageX;
+    private pageY;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
@@ -28,3 +34,17 @@ protected addEventListener(): void;
     private afterRender();
+    private resizeEnd(e);
+    private resizeStart(e);
     private imageClick(e);
+    private imageResize(e);
+    private getPointX(e);
+    private getPointY(e);
+    private imgResizePos(e, imgResizeDiv);
+    private calcPos(elem);
+    private setAspectRatio(img, expectedX, expectedY);
+    private pixToPerc(expected, parentEle);
+    private imgDupMouseMove(width, height, e);
+    private resizing(e);
+    private cancelResizeAction();
+    private resizeImgDupPos(e);
+    private resizeBtnInit();
     private onToolbarAction(args);
@@ -56,2 +76,3 @@ private openImgLink(e);
     private onDocumentClick(e);
+    private remvoeResizEle();
     private imageUrlPopup(e);
@@ -58,0 +79,0 @@ private insertImageUrl(e);

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

@@ -116,3 +116,3 @@ import { EventHandler, detach, isNullOrUndefined } from '@syncfusion/ej2-base';
             var isPopupOpen = this.quickToolObj.linkQTBar.element.classList.contains('e-rte-pop');
-            if (target.nodeName === 'A' && this.parent.quickToolbarModule) {
+            if (target.nodeName === 'A' && !target.contains(target.querySelector('img'))) {
                 if (isPopupOpen) {
@@ -187,2 +187,3 @@ return;
         var textPlace = this.i10n.getConstant('textPlaceholder');
+        var title = this.i10n.getConstant('linkTitle');
         var linkDialogEle = this.parent.createElement('div', { className: 'e-rte-link-dialog', id: this.rteID + '_rtelink' });
@@ -195,3 +196,3 @@ this.parent.element.appendChild(linkDialogEle);
             '</label></div><div class="e-rte-field">' +
-            '<input type="text" data-role ="none" spellcheck="false" placeholder = "Title" class="e-input e-rte-linkTitle"></div>' +
+            '<input type="text" data-role ="none" spellcheck="false" placeholder = "' + title + '" class="e-input e-rte-linkTitle"></div>' +
             '<div class="e-rte-label"></div>' + '<div class="e-rte-field">' +
@@ -212,2 +213,3 @@ '<input type="checkbox" class="e-rte-linkTarget"  data-role ="none"></div>' : '';
         this.checkBoxObj = new CheckBox({ label: linkOpenLabel, checked: true, enableRtl: this.parent.enableRtl });
+        this.checkBoxObj.createElement = this.parent.createElement;
         this.checkBoxObj.appendTo(linkTarget);
@@ -250,2 +252,3 @@ selectText = (this.parent.editorMode === 'HTML') ? e.selection.getRange(this.parent.contentModule.getDocument()).toString() :
         });
+        this.dialogObj.createElement = this.parent.createElement;
         this.dialogObj.appendTo(linkDialogEle);
@@ -331,3 +334,3 @@ linkDialogEle.style.maxHeight = 'initial';
         }
-        for (; e.selectParent[0].firstChild;) {
+        for (; e.selectParent[0].firstChild; null) {
             child.push(parent.insertBefore(e.selectParent[0].firstChild, e.selectParent[0]));
@@ -334,0 +337,0 @@ }

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

@@ -15,2 +15,3 @@ import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
     private popupOverlay;
+    private colorPicker;
     /**
@@ -17,0 +18,0 @@ * Constructor for toolbar renderer module

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

 import { addClass, Browser, removeClass, EventHandler } from '@syncfusion/ej2-base';
-import { getInstance, closest } from '@syncfusion/ej2-base';
+import { getInstance, closest, selectAll } from '@syncfusion/ej2-base';
 import { Toolbar } from '@syncfusion/ej2-navigations';
@@ -76,2 +76,3 @@ import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
         });
+        args.rteToolbarObj.toolbarObj.createElement = this.parent.createElement;
         args.rteToolbarObj.toolbarObj.appendTo(args.target);
@@ -129,2 +130,3 @@ };
         });
+        dropDown.createElement = proxy.parent.createElement;
         dropDown.appendTo(args.element);
@@ -163,12 +165,12 @@ args.element.tabIndex = -1;
     ToolbarRenderer.prototype.paletteSelection = function (dropDownArgs, currentElement) {
+        var _this = this;
         var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
-        var colorbox = ele.parentElement.querySelectorAll('.e-tile');
+        var colorbox = [].slice.call(selectAll('.e-tile', ele.parentElement));
         removeClass(colorbox, 'e-selected');
         var style = currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;
-        for (var i = 0; i < colorbox.length; i++) {
-            if (colorbox[i].style.backgroundColor === style) {
-                addClass([colorbox[i]], 'e-selected');
-                break;
+        (colorbox.filter(function (colorbox) {
+            if (colorbox.getAttribute('aria-label') === _this.colorPicker.getValue(style, 'hex')) {
+                addClass([colorbox], 'e-selected');
             }
-        }
+        }));
     };
@@ -180,11 +182,11 @@ ToolbarRenderer.prototype.renderColorPickerDropDown = function (args, item, colorPicker) {
         css += (' ' + ((item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_DROPDOWN : CLS_FONT_COLOR_DROPDOWN));
-        var content = ('<span class="' + CLS_COLOR_CONTENT + '"><span ' +
-            'class="' + args.cssClass + '" style="border-bottom-color:' +
-            ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default) +
-            '" ></span>' +
-            '</span>');
+        var content = proxy.parent.createElement('span', { className: CLS_COLOR_CONTENT });
+        var inlineEle = proxy.parent.createElement('span', { className: args.cssClass });
+        var range;
+        inlineEle.style.borderBottomColor = (item === 'backgroundcolor') ?
+            proxy.parent.backgroundColor.default : proxy.parent.fontColor.default;
+        content.appendChild(inlineEle);
         var dropDown = new DropDownButton({
             target: colorPicker.element.parentElement,
             cssClass: css,
-            content: content,
             enablePersistence: this.parent.enablePersistence,
@@ -207,4 +209,13 @@ enableRtl: this.parent.enableRtl,
                         element.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor;
-                    proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
-                            value: colorpickerValue } });
+                    range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
+                    if ((range.startContainer.nodeName === 'TD' || closest(range.startContainer.parentNode, 'td')) && range.collapsed) {
+                        proxy.parent.notify(events.tableColorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
+                                value: colorpickerValue }
+                        });
+                    }
+                    else {
+                        proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
+                                value: colorpickerValue }
+                        });
+                    }
                     return;
@@ -234,3 +245,2 @@ }
                 var ele = dropDownArgs.element.querySelector('.e-control.e-colorpicker');
-                var inst = getInstance(ele, ColorPicker);
                 var focusEle;
@@ -254,9 +264,13 @@ if (dropDownArgs.element.querySelector('.e-color-palette')) {
                     /* tslint:enable */
-                    proxy.parent.notify(events.colorPickerChanged, {
-                        item: {
-                            command: args.command,
-                            subCommand: args.subCommand,
-                            value: colorpickerValue
-                        }
-                    });
+                    range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
+                    if ((range.startContainer.nodeName === 'TD' || closest(range.startContainer.parentNode, 'td')) && range.collapsed) {
+                        proxy.parent.notify(events.tableColorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
+                                value: colorpickerValue }
+                        });
+                    }
+                    else {
+                        proxy.parent.notify(events.colorPickerChanged, { item: { command: args.command, subCommand: args.subCommand,
+                                value: colorpickerValue }
+                        });
+                    }
                     return;
@@ -275,3 +289,5 @@ }
         });
+        dropDown.createElement = proxy.parent.createElement;
         dropDown.appendTo(args.element);
+        dropDown.element.insertBefore(content, dropDown.element.querySelector('.e-caret'));
         args.element.tabIndex = -1;
@@ -284,8 +300,8 @@ dropDown.element.onmousedown = function () {
     ToolbarRenderer.prototype.renderColorPicker = function (args, item) {
+        var _this = this;
         var proxy = this;
-        var colorPicker = new ColorPicker({
+        this.colorPicker = new ColorPicker({
             enablePersistence: this.parent.enablePersistence,
             enableRtl: this.parent.enableRtl,
-            noColor: true,
-            value: (!this.parent.inlineMode.enable) ?
+            value: (!this.parent.inlineMode.enable && !this.parent.quickToolbarSettings.enable) ?
                 ((item === 'backgroundcolor') ? proxy.parent.backgroundColor.default : proxy.parent.fontColor.default) : null,
@@ -308,14 +324,22 @@ inline: true,
                 proxy.currentElement.querySelector('.' + CLS_RTE_ELEMENTS).style.borderBottomColor = colorpickerValue;
-                proxy.parent.notify(events.colorPickerChanged, colorPickerArgs);
+                var range = proxy.parent.formatter.editorManager.nodeSelection.getRange(proxy.parent.contentModule.getDocument());
+                if ((range.startContainer.nodeName === 'TD' || closest(range.startContainer.parentNode, 'td')) && range.collapsed) {
+                    proxy.parent.notify(events.tableColorPickerChanged, colorPickerArgs);
+                }
+                else {
+                    proxy.parent.notify(events.colorPickerChanged, colorPickerArgs);
+                }
                 proxy.currentDropdown.toggle();
             },
             beforeModeSwitch: function (args) {
-                colorPicker.showButtons = args.mode === 'Palette' ? false : true;
+                _this.colorPicker.showButtons = args.mode === 'Palette' ? false : true;
             }
         });
-        colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
-        colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode : this.parent.fontColor.colorCode;
-        colorPicker.cssClass = (item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER;
-        colorPicker.appendTo(document.body.querySelector(args.target));
-        return colorPicker;
+        this.colorPicker.columns = (item === 'backgroundcolor') ? this.parent.backgroundColor.columns : this.parent.fontColor.columns;
+        this.colorPicker.presetColors = (item === 'backgroundcolor') ? this.parent.backgroundColor.colorCode :
+            this.parent.fontColor.colorCode;
+        this.colorPicker.cssClass = (item === 'backgroundcolor') ? CLS_BACKGROUND_COLOR_PICKER : CLS_FONT_COLOR_PICKER;
+        this.colorPicker.createElement = this.parent.createElement;
+        this.colorPicker.appendTo(document.body.querySelector(args.target));
+        return this.colorPicker;
     };
@@ -322,0 +346,0 @@ /**

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

@@ -34,2 +34,3 @@ import { KeyboardEventArgs } from '@syncfusion/ej2-base';
     getPanel(): HTMLTextAreaElement | Element;
+    getViewPanel(): HTMLTextAreaElement | Element;
     /**
@@ -36,0 +37,0 @@ * Destroy the entire RichTextEditor.

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

@@ -184,2 +184,5 @@ import { removeClass, selectAll, isNullOrUndefined, EventHandler } from '@syncfusion/ej2-base';
     };
+    ViewSource.prototype.getViewPanel = function () {
+        return (this.parent.iframeSettings.enable && this.getPanel()) ? this.getPanel().parentElement : this.getPanel();
+    };
     /**
@@ -186,0 +189,0 @@ * Destroy the entire RichTextEditor.

src/selection/selection.js

@@ -41,3 +41,3 @@ /**
         var num = 0;
-        node = node.previousSibling;
+        node = !node.previousSibling && node.tagName === 'BR' ? node : node.previousSibling;
         if (node) {
@@ -44,0 +44,0 @@ for (var type = node.nodeType; node; null) {

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

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

Number of package files

270

increased by1.5%

Worsened metrics

Total package byte prevSize

7974636

decreased by-51.53%

Lines of code

64968

decreased by-65.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@syncfusion/ej2-base@~16.3.17

• Updated@syncfusion/ej2-navigations@~16.3.17

• Updated@syncfusion/ej2-popups@~16.3.17

• Updated@syncfusion/ej2-splitbuttons@~16.3.17