@syncfusion/ej2-richtexteditor - npm Package Compare versions

Comparing version 17.1.1-beta to 17.1.32-beta

CHANGELOG.md

@@ -9,2 +9,55 @@ # Changelog
 
+- Image and Table quick toolbar open while scrolling the content in the iPhone device, that issue has been fixed.
+
+- Getting console error while rendering inline mode with `FontColor` and `BackgroundColor` in mobile view, that issue has been fixed.
+
+#### New Features
+
+- **Paste cleanup**
+    - This feature allows users to clean up HTML content when copying and pasting any other content from external sources.
+
+## 16.4.55 (2019-02-27)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- Insert image dialog is not rendering properly while setting the `imageUploadMessage` text as long in localization, that issue has been fixed.
+
+- Localization is not applied to static `DropDownButton` items, that issue has been fixed.
+
+## 16.4.54 (2019-02-19)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- HTML 5 form reset behaviour has been corrected.
+
+- Editor content rendered twice in DOM when using `RichTextEditorFor`, that issue has been fixed.
+
+- EJ2 compatibility styles are not worked while component rendering with `textarea` element, that issue has been fixed.
+
+## 16.4.53 (2019-02-13)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- Console error is thrown in IE11 browser while using the SVG element style with transform and then render the RichTextEditor in an application, that issue has been fixed.
+
+- HTML 5 standard issues has been fixed.
+
+- Cursor position changed after typed some contents issue has been fixed.
+
+#### Breaking Changes
+
+- Changed the  `fontSize`, `fontFamily`, `format` properties  default value as null.
+
+## 16.4.48 (2019-01-22)
+
+### RichTextEditor
+
+#### Bug Fixes
+
 - Table QuickToolbar open wherever click within a component issue has been fixed.
@@ -50,2 +103,4 @@
 
+- The value property and getHtml method will be updated within an interval to `saveInterval` property.
+
 ## 16.4.40-beta (2018-12-10)
@@ -52,0 +107,0 @@

dist/global/index.d.ts

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

package.json

 {
   "name": "@syncfusion/ej2-richtexteditor",
-  "version": "17.1.1-beta",
+  "version": "17.1.32-beta",
   "description": "Essential JS 2 RichTextEditor component",
@@ -11,13 +11,8 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.1-beta",
-    "@syncfusion/ej2-navigations": "~17.1.1-beta",
-    "@syncfusion/ej2-popups": "~17.1.1-beta",
-    "@syncfusion/ej2-splitbuttons": "~17.1.1-beta"
+    "@syncfusion/ej2-base": "~17.1.32-beta",
+    "@syncfusion/ej2-navigations": "~17.1.32-beta",
+    "@syncfusion/ej2-popups": "~17.1.32-beta",
+    "@syncfusion/ej2-splitbuttons": "~17.1.32-beta"
   },
-  "devDependencies": {
-    "@types/chai": "^3.4.28",
-    "@types/jasmine": "2.8.9",
-    "@types/jasmine-ajax": "^3.1.27",
-    "@types/requirejs": "^2.1.26"
-  },
+  "devDependencies": {},
   "keywords": [
@@ -24,0 +19,0 @@ "ej2",

src/common/config.d.ts

@@ -31,1 +31,13 @@ /**
 };
+/**
+ * PasteCleanup Grouping of similar functionality tags
+ */
+export declare const pasteCleanupGroupingTags: {
+    [key: string]: string[];
+};
+/**
+ * PasteCleanup Grouping of similar functionality tags
+ */
+export declare const listConversionFilters: {
+    [key: string]: string;
+};

src/common/config.js

@@ -43,2 +43,3 @@ /**
     'insert-image': 'ctrl+shift+i',
+    'insert-table': 'ctrl+shift+e',
     'undo': 'ctrl+z',
@@ -82,2 +83,3 @@ 'redo': 'ctrl+y',
     'insert-image': 'ctrl+shift+i',
+    'insert-table': 'ctrl+shift+e',
     'undo': 'ctrl+z',
@@ -99,1 +101,19 @@ 'redo': 'ctrl+y',
 };
+/**
+ * PasteCleanup Grouping of similar functionality tags
+ */
+export var pasteCleanupGroupingTags = {
+    'b': ['strong'],
+    'strong': ['b'],
+    'i': ['emp', 'cite'],
+    'emp': ['i', 'cite'],
+    'cite': ['i', 'emp']
+};
+/**
+ * PasteCleanup Grouping of similar functionality tags
+ */
+export var listConversionFilters = {
+    'first': 'MsoListParagraphCxSpFirst',
+    'middle': 'MsoListParagraphCxSpMiddle',
+    'last': 'MsoListParagraphCxSpLast'
+};

src/common/constant.d.ts

@@ -13,1 +13,3 @@ /**
 export declare const MODEL_CHANGED: string;
+export declare const MS_WORD_CLEANUP_PLUGIN: string;
+export declare const MS_WORD_CLEANUP: string;

src/common/constant.js

@@ -40,1 +40,9 @@ /**
 export var MODEL_CHANGED = 'model_changed';
+/* PasteCleanup plugin for MSWord content
+ * @hidden
+ */
+export var MS_WORD_CLEANUP_PLUGIN = 'ms_word_cleanup_plugin';
+/* PasteCleanup for MSWord content
+ * @hidden
+ */
+export var MS_WORD_CLEANUP = 'ms_word_cleanup';

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

@@ -26,2 +26,3 @@ /**
 export declare const INSERTHTML_TYPE: string;
+export declare const INSERT_TEXT_TYPE: string;
 export declare const CLEAR_TYPE: string;

src/editor-manager/base/constant.js

@@ -48,2 +48,6 @@ /**
 export var INSERTHTML_TYPE = 'inserthtml-type';
+/* Insert Text plugin events
+ * @hidden
+ */
+export var INSERT_TEXT_TYPE = 'insert-text-type';
 /* Clear Format HTML plugin events
@@ -50,0 +54,0 @@ * @hidden

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

@@ -17,2 +17,4 @@ import { Observer } from '@syncfusion/ej2-base';
 import { UndoRedoManager } from './../plugin/undo';
+import { MsWordPaste } from '../plugin/ms-word-clean-up';
+import { InsertTextExec } from '../plugin/insert-text';
 /**
@@ -36,4 +38,6 @@ * EditorManager internal component
     inserthtmlObj: InsertHtmlExec;
+    insertTextObj: InsertTextExec;
     clearObj: ClearFormatExec;
     undoRedoManager: UndoRedoManager;
+    msWordPaste: MsWordPaste;
     editableElement: Element;
@@ -46,2 +50,3 @@ /**
     private wireEvents;
+    private onWordPaste;
     private onPropertyChanged;
@@ -48,0 +53,0 @@ private editorKeyDown;

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

@@ -16,3 +16,5 @@ import { Observer } from '@syncfusion/ej2-base';
 import { UndoRedoManager } from './../plugin/undo';
+import { MsWordPaste } from '../plugin/ms-word-clean-up';
 import * as EVENTS from './../../common/constant';
+import { InsertTextExec } from '../plugin/insert-text';
 /**
@@ -41,5 +43,7 @@ * EditorManager internal component
         this.inserthtmlObj = new InsertHtmlExec(this);
+        this.insertTextObj = new InsertTextExec(this);
         this.clearObj = new ClearFormatExec(this);
         this.tableObj = new TableCommand(this);
         this.undoRedoManager = new UndoRedoManager(this, options.options);
+        this.msWordPaste = new MsWordPaste(this);
         this.wireEvents();
@@ -52,3 +56,7 @@ }
         this.observer.on(EVENTS.MODEL_CHANGED, this.onPropertyChanged, this);
+        this.observer.on(EVENTS.MS_WORD_CLEANUP, this.onWordPaste, this);
     };
+    EditorManager.prototype.onWordPaste = function (e) {
+        this.observer.notify(EVENTS.MS_WORD_CLEANUP_PLUGIN, e);
+    };
     EditorManager.prototype.onPropertyChanged = function (props) {
@@ -122,4 +130,7 @@ this.observer.notify(EVENTS.MODEL_CHANGED_PLUGIN, props);
             case 'inserthtml':
-                this.observer.notify(CONSTANT.INSERTHTML_TYPE, { callBack: callBack, value: text });
+                this.observer.notify(CONSTANT.INSERTHTML_TYPE, { subCommand: value, callBack: callBack, value: text });
                 break;
+            case 'inserttext':
+                this.observer.notify(CONSTANT.INSERT_TEXT_TYPE, { subCommand: value, callBack: callBack, value: text });
+                break;
             case 'clear':
@@ -126,0 +137,0 @@ this.observer.notify(CONSTANT.CLEAR_TYPE, { subCommand: value, event: event, callBack: callBack });

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

 /**
  * Types type for EditorManager
  */
-export declare type EditorExecCommand = 'Indents' | 'Lists' | 'Formats' | 'Alignments' | 'Links' | 'Images' | 'Font' | 'Style' | 'Clear' | 'Effects' | 'Casing' | 'InsertHtml' | 'Actions';
+export declare type EditorExecCommand = 'Indents' | 'Lists' | 'Formats' | 'Alignments' | 'Links' | 'Images' | 'Font' | 'Style' | 'Clear' | 'Effects' | 'Casing' | 'InsertHtml' | 'InsertText' | 'Actions';

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

@@ -47,3 +47,3 @@ import { NodeSelection } from './../../selection/index';
     encode(value: string): string;
-    saveMarker(save: NodeSelection): NodeSelection;
+    saveMarker(save: NodeSelection, action?: string): NodeSelection;
     private marker;
@@ -50,0 +50,0 @@ setMarker(save: NodeSelection): void;

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

 import * as CONSTANT from './../base/constant';
-import { append, detach, createElement } from '@syncfusion/ej2-base';
+import { append, detach, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { NodeSelection } from './../../selection/index';
@@ -215,5 +215,10 @@ export var markerClassName = {
     };
-    DOMNode.prototype.saveMarker = function (save) {
+    DOMNode.prototype.saveMarker = function (save, action) {
         var start = this.parent.querySelector('.' + markerClassName.startSelection);
+        var end = this.parent.querySelector('.' + markerClassName.endSelection);
         var startTextNode;
+        var endTextNode;
+        if (start.textContent === '' && isNullOrUndefined(end) && action !== 'tab') {
+            start.innerHTML = '';
+        }
         if (this.hasClass(start, markerClassName.startSelection) && start.classList.length > 1) {
@@ -229,4 +234,2 @@ var replace = this.createTagString(CONSTANT.DEFAULT_TAG, start, this.encode(start.textContent));
         }
-        var endTextNode;
-        var end = this.parent.querySelector('.' + markerClassName.endSelection);
         if (this.hasClass(end, markerClassName.endSelection) && end.classList.length > 1) {
@@ -233,0 +236,0 @@ var replace = this.createTagString(CONSTANT.DEFAULT_TAG, end, this.encode(end.textContent));

src/editor-manager/plugin/image.js

@@ -96,3 +96,3 @@ import { createElement, isNullOrUndefined, detach, closest, addClass, removeClass } from '@syncfusion/ej2-base';
             }
-            InsertHtml.Insert(this.parent.currentDocument, imgElement);
+            InsertHtml.Insert(this.parent.currentDocument, imgElement, this.parent.editableElement);
         }
@@ -112,8 +112,10 @@ if (e.callBack) {
             attrs: {
-                href: e.item.url,
-                target: e.item.target
+                href: e.item.url
             }
         });
         anchor.appendChild(e.item.selectNode[0]);
-        InsertHtml.Insert(this.parent.currentDocument, anchor);
+        if (!isNullOrUndefined(e.item.target)) {
+            anchor.setAttribute('target', e.item.target);
+        }
+        InsertHtml.Insert(this.parent.currentDocument, anchor, this.parent.editableElement);
         this.callBack(e);
@@ -127,3 +129,3 @@ };
         detach(closest(e.item.selectParent[0], 'a'));
-        InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement);
+        InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);
         this.callBack(e);
@@ -133,3 +135,8 @@ };
         e.item.selectNode[0].parentElement.href = e.item.url;
-        e.item.selectNode[0].parentElement.target = e.item.target;
+        if (isNullOrUndefined(e.item.target)) {
+            e.item.selectNode[0].parentElement.removeAttribute('target');
+        }
+        else {
+            e.item.selectNode[0].parentElement.target = e.item.target;
+        }
         this.callBack(e);
@@ -162,3 +169,3 @@ };
     ImageCommand.prototype.imageCaption = function (e) {
-        InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement);
+        InsertHtml.Insert(this.parent.currentDocument, e.item.insertElement, this.parent.editableElement);
         this.callBack(e);
@@ -165,0 +172,0 @@ };

src/editor-manager/plugin/inserthtml-exec.js

@@ -20,3 +20,3 @@ import * as CONSTANT from './../base/constant';
     InsertHtmlExec.prototype.applyHtml = function (e) {
-        InsertHtml.Insert(this.parent.currentDocument, e.value);
+        InsertHtml.Insert(this.parent.currentDocument, e.value, this.parent.editableElement);
         if (e.callBack) {
@@ -23,0 +23,0 @@ e.callBack({

src/editor-manager/plugin/inserthtml.js

 import { NodeSelection } from './../../selection/index';
 import { NodeCutter } from './nodecutter';
 import * as CONSTANT from './../base/constant';
+import { detach } from '@syncfusion/ej2-base';
 import { InsertMethods } from './insert-methods';
@@ -55,4 +56,20 @@ /**
             else {
+                var previousNode = null;
+                while (parentNode !== editNode && parentNode.firstChild &&
+                    (parentNode.textContent.trim() === '')) {
+                    var parentNode1 = parentNode.parentNode;
+                    previousNode = parentNode;
+                    parentNode = parentNode1;
+                }
+                if (previousNode !== null) {
+                    parentNode = previousNode;
+                }
                 if (parentNode.firstChild) {
-                    InsertMethods.AppendBefore(node, parentNode.firstChild, false);
+                    if (parentNode.textContent.trim() === '') {
+                        InsertMethods.AppendBefore(node, parentNode, false);
+                        detach(parentNode);
+                    }
+                    else {
+                        InsertMethods.AppendBefore(node, parentNode.firstChild, false);
+                    }
                 }
@@ -59,0 +76,0 @@ else {

src/editor-manager/plugin/link.js

@@ -44,3 +44,8 @@ import { createElement, isNullOrUndefined, closest } from '@syncfusion/ej2-base';
             anchorEle.innerHTML = e.item.text;
-            anchorEle.setAttribute('target', e.item.target);
+            if (!isNullOrUndefined(e.item.target)) {
+                anchorEle.setAttribute('target', e.item.target);
+            }
+            else {
+                anchorEle.removeAttribute('target');
+            }
             e.item.selection.setSelectionText(this.parent.currentDocument, anchorEle, anchorEle, 1, 1);
@@ -60,3 +65,3 @@ }
             e.item.selection.restore();
-            InsertHtml.Insert(this.parent.currentDocument, anchor);
+            InsertHtml.Insert(this.parent.currentDocument, anchor, this.parent.editableElement);
             if (e.event && e.event.type === 'keydown' && e.event.keyCode === 32) {
@@ -63,0 +68,0 @@ var startContainer = e.item.selection.range.startContainer;

src/editor-manager/plugin/lists.js

@@ -84,2 +84,8 @@ import * as CONSTANT from './../base/constant';
             }
+            else {
+                if (!(e.event.action && e.event.action === 'indent')) {
+                    this.saveSelection = this.domNode.saveMarker(this.saveSelection, e.event.action);
+                    this.saveSelection.restore();
+                }
+            }
         }
@@ -86,0 +92,0 @@ else {

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

@@ -15,2 +15,3 @@ import { EditorManager } from './../base/editor-manager';
     private createTable;
+    private removeEmptyNode;
     private insertAfter;
@@ -17,0 +18,0 @@ private insertRow;

src/editor-manager/plugin/table.js

@@ -45,2 +45,3 @@ import { createElement, closest, detach } from '@syncfusion/ej2-base';
         InsertHtml.Insert(this.parent.currentDocument, table, this.parent.editableElement);
+        this.removeEmptyNode();
         e.item.selection.setSelectionText(this.parent.currentDocument, table.querySelector('td'), table.querySelector('td'), 0, 0);
@@ -59,2 +60,20 @@ table.querySelector('td').classList.add('e-cell-select');
     };
+    TableCommand.prototype.removeEmptyNode = function () {
+        var emptyUl = this.parent.editableElement.querySelectorAll('ul:empty, ol:empty');
+        for (var i = 0; i < emptyUl.length; i++) {
+            detach(emptyUl[i]);
+        }
+        var emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty');
+        for (var i = 0; i < emptyLiChild.length; i++) {
+            detach(emptyLiChild[i]);
+            if (emptyLiChild.length === i + 1) {
+                emptyLiChild = this.parent.editableElement.querySelectorAll('li *:empty');
+                i = -1;
+            }
+        }
+        var emptyLi = this.parent.editableElement.querySelectorAll('li:empty');
+        for (var i = 0; i < emptyLi.length; i++) {
+            detach(emptyLi[i]);
+        }
+    };
     TableCommand.prototype.insertAfter = function (newNode, referenceNode) {
@@ -61,0 +80,0 @@ referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

src/markdown-parser/base/interface.d.ts

@@ -117,2 +117,3 @@ import { MarkdownParser } from './../base/markdown-parser';
     item: IMarkdownItemArgs;
+    value?: IMarkdownItemArgs;
     subCommand: string;
@@ -119,0 +120,0 @@ callBack(args: IMarkdownFormatterCallBack): () => void;

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

@@ -18,4 +18,5 @@ import { MarkdownParser } from './../base/markdown-parser';
     private clearFormatTags;
+    private clearFormatLines;
     private clear;
     private restore;
 }

src/markdown-parser/plugin/clearformat.js

@@ -58,2 +58,5 @@ import * as CONSTANT from './../base/constant';
         var lines = text.split('\n');
+        return this.clearFormatLines(lines);
+    };
+    ClearFormat.prototype.clearFormatLines = function (lines) {
         var tags = [this.parent.formatTags, this.parent.listTags];
@@ -70,2 +73,3 @@ var str = '';
                             lines[len] = lines[len].replace(data[key], '');
+                            lines[len] = this.clearFormatLines([lines[len]]);
                         }
@@ -72,0 +76,0 @@ }

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

@@ -20,2 +20,3 @@ import { IMDTable } from './../base/interface';
     destroy(): void;
+    private onKeyDown;
     private createTable;
@@ -22,0 +23,0 @@ private getTable;

src/markdown-parser/plugin/table.js

 import * as CONSTANT from './../base/constant';
 import { extend } from '@syncfusion/ej2-base';
+import * as EVENTS from './../../common/constant';
 /**
@@ -19,5 +20,7 @@ * Link internal component
         this.parent.observer.on(CONSTANT.MD_TABLE, this.createTable, this);
+        this.parent.observer.on(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown, this);
     };
     MDTable.prototype.removeEventListener = function () {
         this.parent.observer.off(CONSTANT.MD_TABLE, this.createTable);
+        this.parent.observer.off(EVENTS.KEY_DOWN_HANDLER, this.onKeyDown);
     };
@@ -27,2 +30,8 @@ MDTable.prototype.destroy = function () {
     };
+    MDTable.prototype.onKeyDown = function (e) {
+        if (e.event.action === 'insert-table') {
+            e.item = e.value;
+            this.createTable(e);
+        }
+    };
     MDTable.prototype.createTable = function (e) {
@@ -36,3 +45,3 @@ this.element = this.parent.element;
         this.selection.save(start, end);
-        this.restore(this.element.selectionStart, this.element.selectionEnd, e);
+        this.restore(this.element.selectionStart, this.element.selectionEnd, null);
         this.insertTable(start, end, textAreaInitial, e);
@@ -39,0 +48,0 @@ };

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

@@ -16,1 +16,2 @@ /**
 export * from './actions/html-editor';
+export * from './actions/paste-clean-up';

src/rich-text-editor/actions.js

@@ -16,1 +16,2 @@ /**
 export * from './actions/html-editor';
+export * from './actions/paste-clean-up';

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

@@ -29,2 +29,3 @@ import { DropDownButton } from '@syncfusion/ej2-splitbuttons';
     private onPropertyChanged;
+    private getEditNode;
     private rowDropDown;
@@ -31,0 +32,0 @@ private columnDropDown;

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

@@ -56,9 +56,9 @@ import { addClass, isNullOrUndefined, removeClass, select, closest } from '@syncfusion/ej2-base';
                         });
+                        var formatContent = isNullOrUndefined(_this.parent.format.default) ? formatItem[0].text :
+                            _this.parent.format.default;
                         _this.formatDropDown = _this.toolbarRenderer.renderDropDownButton({
                             iconCss: ((type === 'quick') ? 'e-formats e-icons' : ''),
-                            content: _this.dropdownContent(_this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItem, _this.parent.format.default, 'text', 'text'))),
+                            content: _this.dropdownContent(_this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItem, formatContent, 'text', 'text'))),
                             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FORMATS_TB_BTN,
-                            itemName: 'Formats',
-                            items: formatItem,
-                            element: targetElement
+                            itemName: 'Formats', items: formatItem, element: targetElement
                         });
@@ -77,10 +77,13 @@ break;
                         });
+                        var fontNameContent = isNullOrUndefined(_this.parent.fontFamily.default) ? fontItem[0].text :
+                            _this.parent.fontFamily.default;
                         _this.fontNameDropDown = _this.toolbarRenderer.renderDropDownButton({
                             iconCss: ((type === 'quick') ? 'e-font-name e-icons' : ''),
-                            content: _this.dropdownContent(_this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItem, _this.parent.fontFamily.default, 'text', 'text'))),
+                            content: _this.dropdownContent(_this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItem, fontNameContent, 'text', 'text'))),
                             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_NAME_TB_BTN,
-                            itemName: 'FontName',
-                            items: fontItem,
-                            element: targetElement
+                            itemName: 'FontName', items: fontItem, element: targetElement
                         });
+                        if (!isNullOrUndefined(_this.parent.fontFamily.default)) {
+                            _this.getEditNode().style.fontFamily = _this.parent.fontFamily.default;
+                        }
                         break;
@@ -98,9 +101,12 @@ case 'fontsize':
                         });
+                        var fontSizeContent = isNullOrUndefined(_this.parent.fontSize.default) ? fontsize[1].text :
+                            _this.parent.fontSize.default;
                         _this.fontSizeDropDown = _this.toolbarRenderer.renderDropDownButton({
-                            content: _this.dropdownContent(_this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, _this.parent.fontSize.default.replace(/\s/g, ''), 'value', 'text'))),
+                            content: _this.dropdownContent(_this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'value', 'text'))),
                             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS + ' ' + classes.CLS_FONT_SIZE_TB_BTN,
-                            itemName: 'FontSize',
-                            items: fontsize,
-                            element: targetElement
+                            itemName: 'FontSize', items: fontsize, element: targetElement
                         });
+                        if (!isNullOrUndefined(_this.parent.fontSize.default)) {
+                            _this.getEditNode().style.fontSize = _this.parent.fontSize.default;
+                        }
                         break;
@@ -115,5 +121,3 @@ case 'alignments':
                             cssClass: classes.CLS_DROPDOWN_POPUP + ' ' + classes.CLS_DROPDOWN_ITEMS,
-                            itemName: 'Alignments',
-                            items: model.alignmentItems,
-                            element: targetElement
+                            itemName: 'Alignments', items: model.alignmentItems, element: targetElement
                         });
@@ -168,5 +172,13 @@ break;
                                         'quick' : 'toolbar';
+                                    var fontNameContent = isNullOrUndefined(this.parent.fontFamily.default) ? fontItems[0].text :
+                                        this.parent.fontFamily.default;
                                     var content = this.dropdownContent(this.parent.fontFamily.width, type, ((type === 'quick') ? '' :
-                                        getDropDownValue(fontItems, this.parent.fontFamily.default, 'text', 'text')));
+                                        getDropDownValue(fontItems, fontNameContent, 'text', 'text')));
                                     this.fontNameDropDown.setProperties({ content: content });
+                                    if (!isNullOrUndefined(this.parent.fontFamily.default)) {
+                                        this.getEditNode().style.fontFamily = this.parent.fontFamily.default;
+                                    }
+                                    else {
+                                        this.getEditNode().style.removeProperty('font-family');
+                                    }
                                     break;
@@ -191,4 +203,12 @@ case 'items':
                                     var type = !isNullOrUndefined(closest(this.fontSizeDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
-                                    var content = this.dropdownContent(this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, this.parent.fontSize.default.replace(/\s/g, ''), 'value', 'text')));
+                                    var fontSizeContent = isNullOrUndefined(this.parent.fontSize.default) ? fontsize[1].text :
+                                        this.parent.fontSize.default;
+                                    var content = this.dropdownContent(this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'value', 'text')));
                                     this.fontSizeDropDown.setProperties({ content: content });
+                                    if (!isNullOrUndefined(this.parent.fontSize.default)) {
+                                        this.getEditNode().style.fontSize = this.parent.fontSize.default;
+                                    }
+                                    else {
+                                        this.getEditNode().style.removeProperty('font-size');
+                                    }
                                     break;
@@ -213,4 +233,6 @@ case 'items':
                                     var type = !isNullOrUndefined(closest(this.formatDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
+                                    var formatContent = isNullOrUndefined(this.parent.format.default) ? formatItems[0].text :
+                                        this.parent.format.default;
                                     var content = this.dropdownContent(this.parent.format.width, type, ((type === 'quick') ? '' :
-                                        getDropDownValue(formatItems, this.parent.format.default, 'text', 'text')));
+                                        getDropDownValue(formatItems, formatContent, 'text', 'text')));
                                     this.formatDropDown.setProperties({ content: content });
@@ -230,2 +252,5 @@ break;
     };
+    DropDownButtons.prototype.getEditNode = function () {
+        return this.parent.contentModule.getEditPanel();
+    };
     DropDownButtons.prototype.rowDropDown = function (type, tbElement, targetElement) {
@@ -232,0 +257,0 @@ targetElement = select('#' + this.parent.getID() + '_' + type + '_TableRows', tbElement);

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

@@ -18,3 +18,4 @@ import { Browser, isNullOrUndefined } from '@syncfusion/ej2-base';
             this.parent.trigger(events.actionBegin, { requestType: 'Maximize', targetItem: 'Maximize', args: event });
-            if (this.parent.toolbarSettings.enableFloating && this.parent.toolbarSettings.enable) {
+            if (this.parent.toolbarSettings.enableFloating &&
+                !this.parent.inlineMode.enable && this.parent.toolbarSettings.enable) {
                 this.parent.getToolbarElement().style.width = '100%';
@@ -21,0 +22,0 @@ this.parent.getToolbarElement().style.top = '0px';

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

@@ -94,6 +94,8 @@ import { select, isNullOrUndefined, Browser, addClass, removeClass, EventHandler, closest } from '@syncfusion/ej2-base';
     QuickToolbar.prototype.renderInlineQuickToolbar = function () {
-        addClass([this.parent.element], [CLS_INLINE]);
-        this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);
-        this.renderFactory.addRenderer(RenderType.InlineToolbar, this.inlineQTBar);
-        EventHandler.add(this.inlineQTBar.element, 'mousedown', this.onMouseDown, this);
+        if (this.parent.inlineMode.enable && !Browser.isDevice) {
+            addClass([this.parent.element], [CLS_INLINE]);
+            this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);
+            this.renderFactory.addRenderer(RenderType.InlineToolbar, this.inlineQTBar);
+            EventHandler.add(this.inlineQTBar.element, 'mousedown', this.onMouseDown, this);
+        }
     };
@@ -131,22 +133,24 @@ QuickToolbar.prototype.showInlineQTBar = function (x, y, target) {
     QuickToolbar.prototype.mouseUpHandler = function (e) {
-        var args = e.args;
-        var range = this.parent.getRange();
-        var target = args.target;
-        if (isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {
-            this.hideInlineQTBar();
-            this.offsetX = args.pageX;
-            this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
-            if (target.nodeName === 'TEXTAREA') {
-                this.showInlineQTBar(this.offsetX, this.offsetY, target);
-            }
-            else {
-                var closestAnchor = closest(target, 'a');
-                target = closestAnchor ? closestAnchor : target;
-                if (target.tagName !== 'IMG' && target.tagName !== 'A' && (!closest(target, 'td,th') || !range.collapsed)) {
-                    if (this.parent.inlineMode.onSelection && range.collapsed) {
-                        return;
-                    }
-                    this.target = target;
+        if (this.parent.inlineMode.enable && !Browser.isDevice) {
+            var args = e.args;
+            var range = this.parent.getRange();
+            var target = args.target;
+            if (isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {
+                this.hideInlineQTBar();
+                this.offsetX = args.pageX;
+                this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
+                if (target.nodeName === 'TEXTAREA') {
                     this.showInlineQTBar(this.offsetX, this.offsetY, target);
                 }
+                else {
+                    var closestAnchor = closest(target, 'a');
+                    target = closestAnchor ? closestAnchor : target;
+                    if (target.tagName !== 'IMG' && target.tagName !== 'A' && (!closest(target, 'td,th') || !range.collapsed)) {
+                        if (this.parent.inlineMode.onSelection && range.collapsed) {
+                            return;
+                        }
+                        this.target = target;
+                        this.showInlineQTBar(this.offsetX, this.offsetY, target);
+                    }
+                }
             }
@@ -156,3 +160,3 @@ }
     QuickToolbar.prototype.keyDownHandler = function () {
-        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+        if ((this.parent.inlineMode.enable && !Browser.isDevice) && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
@@ -162,3 +166,3 @@ }
     QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
-        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+        if ((this.parent.inlineMode.enable && !Browser.isDevice) && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
@@ -168,7 +172,9 @@ }
     QuickToolbar.prototype.keyUpHandler = function (e) {
-        if (this.parent.inlineMode.onSelection) {
-            return;
+        if (this.parent.inlineMode.enable && !Browser.isDevice) {
+            if (this.parent.inlineMode.onSelection) {
+                return;
+            }
+            var args = e.args;
+            this.deBounce(this.offsetX, this.offsetY, args.target);
         }
-        var args = e.args;
-        this.deBounce(this.offsetX, this.offsetY, args.target);
     };
@@ -240,5 +246,3 @@ QuickToolbar.prototype.getInlineBaseToolbar = function () {
         this.parent.on(events.toolbarUpdated, this.toolbarUpdated, this);
-        if (this.parent.inlineMode.enable && !Browser.isDevice) {
-            this.wireInlineQTBarEvents();
-        }
+        this.wireInlineQTBarEvents();
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
@@ -284,5 +288,3 @@ if (this.parent.quickToolbarSettings.actionOnScroll === 'hide') {
         this.parent.off(events.toolbarUpdated, this.toolbarUpdated);
-        if (this.parent.inlineMode.enable && !Browser.isDevice) {
-            this.unWireInlineQTBarEvents();
-        }
+        this.unWireInlineQTBarEvents();
         this.parent.off(events.modelChanged, this.onPropertyChanged);
@@ -289,0 +291,0 @@ if (this.parent.quickToolbarSettings.actionOnScroll === 'hide') {

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

@@ -81,2 +81,3 @@ import { Toolbar as tool } from '@syncfusion/ej2-navigations';
     }): void;
+    private refreshToolbar;
     /**
@@ -83,0 +84,0 @@ * For internal use only - Get the module name.

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

@@ -23,2 +23,3 @@ import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';
         this.renderFactory = this.locator.getService('rendererFactory');
+        model.updateDropDownLocale(this.parent);
         this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent));
@@ -41,5 +42,7 @@ this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);
     Toolbar.prototype.toolbarBindEvent = function () {
-        this.keyBoardModule = new KeyboardEvents(this.getToolbarElement(), {
-            keyAction: this.toolBarKeyDown.bind(this), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'
-        });
+        if (!this.parent.inlineMode.enable) {
+            this.keyBoardModule = new KeyboardEvents(this.getToolbarElement(), {
+                keyAction: this.toolBarKeyDown.bind(this), keyConfigs: this.parent.formatter.keyConfig, eventName: 'keydown'
+            });
+        }
     };
@@ -109,3 +112,3 @@ Toolbar.prototype.toolBarKeyDown = function (e) {
             container: this.tbElement,
-            containerType: 'toolbar',
+            containerType: ((this.parent.inlineMode.enable) ? 'quick' : 'toolbar'),
             items: this.parent.toolbarSettings.items
@@ -119,3 +122,3 @@ });
         for (var i = 0; i < transformElements.length; i++) {
-            if (transformElements[i].contains(this.parent.element)) {
+            if (!isNullOrUndefined(transformElements[i].contains) && transformElements[i].contains(this.parent.element)) {
                 this.isTransformChild = true;
@@ -267,15 +270,17 @@ break;
     Toolbar.prototype.updateToolbarStatus = function (args) {
-        var options = {
-            args: args,
-            dropDownModule: this.dropDownModule,
-            parent: this.parent,
-            tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.tbElement),
-            tbItems: this.baseToolbar.toolbarObj.items
-        };
-        if (this.parent.inlineMode.enable) {
-            setToolbarStatus(options, true);
+        if (!this.parent.inlineMode.enable) {
+            var options = {
+                args: args,
+                dropDownModule: this.dropDownModule,
+                parent: this.parent,
+                tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.tbElement),
+                tbItems: this.baseToolbar.toolbarObj.items
+            };
+            if (this.parent.inlineMode.enable) {
+                setToolbarStatus(options, true);
+            }
+            else {
+                setToolbarStatus(options, false);
+            }
         }
-        else {
-            setToolbarStatus(options, false);
-        }
     };
@@ -379,4 +384,6 @@ Toolbar.prototype.fullScreen = function (e) {
     Toolbar.prototype.scrollHandler = function (e) {
-        if (this.parent.toolbarSettings.enableFloating) {
-            this.toggleFloatClass(e.args);
+        if (!this.parent.inlineMode.enable) {
+            if (this.parent.toolbarSettings.enableFloating) {
+                this.toggleFloatClass(e.args);
+            }
         }
@@ -430,7 +437,5 @@ };
         this.parent.on(events.initialEnd, this.renderToolbar, this);
-        if (!this.parent.inlineMode.enable) {
-            this.parent.on(events.scroll, this.scrollHandler, this);
-            this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);
-            this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);
-        }
+        this.parent.on(events.scroll, this.scrollHandler, this);
+        this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);
+        this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
@@ -453,7 +458,5 @@ this.parent.on(events.refreshBegin, this.onRefresh, this);
         this.parent.off(events.initialEnd, this.renderToolbar);
-        if (!this.parent.inlineMode.enable) {
-            this.parent.off(events.scroll, this.scrollHandler);
-            this.parent.off(events.bindOnEnd, this.toolbarBindEvent);
-            this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);
-        }
+        this.parent.off(events.scroll, this.scrollHandler);
+        this.parent.off(events.bindOnEnd, this.toolbarBindEvent);
+        this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
@@ -484,12 +487,3 @@ this.parent.off(events.destroy, this.destroy);
                     case 'enable':
-                        if (e.newProp.inlineMode.enable) {
-                            this.parent.off(events.scroll, this.scrollHandler);
-                            this.parent.off(events.bindOnEnd, this.toolbarBindEvent);
-                            this.parent.off(events.toolbarUpdated, this.updateToolbarStatus);
-                        }
-                        else {
-                            this.parent.on(events.scroll, this.scrollHandler, this);
-                            this.parent.on(events.bindOnEnd, this.toolbarBindEvent, this);
-                            this.parent.on(events.toolbarUpdated, this.updateToolbarStatus, this);
-                        }
+                        this.refreshToolbar();
                         break;
@@ -502,2 +496,5 @@ }
         }
+        this.refreshToolbar();
+    };
+    Toolbar.prototype.refreshToolbar = function () {
         if (isNullOrUndefined(this.baseToolbar.toolbarObj)) {
@@ -504,0 +501,0 @@ this.baseToolbar = this.parent.getBaseToolbarObject();

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

@@ -156,1 +156,13 @@ /**
 export declare const CLS_RTE_HIDDEN: string;
+/** @hidden */
+export declare const CLS_RTE_PASTE_KEEP_FORMAT: string;
+/** @hidden */
+export declare const CLS_RTE_PASTE_REMOVE_FORMAT: string;
+/** @hidden */
+export declare const CLS_RTE_PASTE_PLAIN_FORMAT: string;
+/** @hidden */
+export declare const CLS_RTE_PASTE_OK: string;
+/** @hidden */
+export declare const CLS_RTE_PASTE_CANCEL: string;
+/** @hidden */
+export declare const CLS_RTE_DIALOG_MIN_HEIGHT: string;

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

@@ -156,1 +156,13 @@ /**
 export var CLS_RTE_HIDDEN = 'e-rte-hidden';
+/** @hidden */
+export var CLS_RTE_PASTE_KEEP_FORMAT = 'e-rte-keepformat';
+/** @hidden */
+export var CLS_RTE_PASTE_REMOVE_FORMAT = 'e-rte-removeformat';
+/** @hidden */
+export var CLS_RTE_PASTE_PLAIN_FORMAT = 'e-rte-plainformat';
+/** @hidden */
+export var CLS_RTE_PASTE_OK = 'e-rte-pasteok';
+/** @hidden */
+export var CLS_RTE_PASTE_CANCEL = 'e-rte-pastecancel';
+/** @hidden */
+export var CLS_RTE_DIALOG_MIN_HEIGHT = 'e-rte-dialog-minheight';

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

@@ -172,1 +172,3 @@ /** @hidden */
 export declare const readOnlyMode: string;
+/** @hidden */
+export declare const pasteClean: string;

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

@@ -172,1 +172,3 @@ /** @hidden */
 export var readOnlyMode = 'readOnlyMode';
+/** @hidden */
+export var pasteClean = 'pasteClean';

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

@@ -1,2 +0,2 @@
-import { Component, Observer, L10n } from '@syncfusion/ej2-base';
+import { Component, Observer, L10n, KeyboardEventArgs } from '@syncfusion/ej2-base';
 import { ItemModel, OverflowMode } from '@syncfusion/ej2-navigations';
@@ -14,3 +14,3 @@ import { ItemModel as DropDownItemModel, DropDownButton } from '@syncfusion/ej2-splitbuttons';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';
-import { QuickToolbarSettingsModel, InlineModeModel } from '../models/models';
+import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';
 import { Count } from '../actions/count';
@@ -32,2 +32,3 @@ import { ColorPicker, ColorPickerEventArgs, ColorPickerModel } from '@syncfusion/ej2-inputs';
 import { ViewSource } from '../renderer/view-source';
+import { PasteCleanup } from '../actions/paste-clean-up';
 /**
@@ -52,2 +53,3 @@ * Specifies RichTextEditor interfaces.
     tableSettings: TableSettingsModel;
+    pasteCleanupSettings: PasteCleanupSettingsModel;
     floatingToolbarOffset?: number;
@@ -74,2 +76,3 @@ showCharCount?: boolean;
     formatter?: IFormatter;
+    inputElement?: HTMLElement;
     toolbarModule?: Toolbar;
@@ -79,2 +82,3 @@ sourceCodeModule?: ViewSource;
     fullScreenModule?: FullScreen;
+    pasteCleanupModule?: PasteCleanup;
     undoRedoModule?: UndoRedoManager;
@@ -122,2 +126,3 @@ quickToolbarModule?: QuickToolbar;
     autoResize?(): void;
+    executeCommand?(commandName: CommandName, value?: string | HTMLElement): void;
 }
@@ -146,3 +151,3 @@ export interface IRenderer {
     module?: string;
-    args?: KeyboardEvent | MouseEvent | ClickEventArgs;
+    args?: KeyboardEvent | MouseEvent | ClickEventArgs | ClipboardEvent;
     cancel?: boolean;
@@ -196,3 +201,3 @@ requestType?: Action;
     module?: string;
-    args?: KeyboardEvent | MouseEvent | ClickEventArgs | IToolbarItemModel;
+    args?: KeyboardEvent | MouseEvent | ClickEventArgs | IToolbarItemModel | ClipboardEvent;
     cancel?: boolean;
@@ -247,3 +252,3 @@ requestType?: Action;
     module?: string;
-    args?: ClickEventArgs | MouseEvent;
+    args?: ClickEventArgs | MouseEvent | KeyboardEventArgs;
     selection?: NodeSelection;
@@ -250,0 +255,0 @@ selectNode?: Node[];

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

@@ -115,4 +115,4 @@ /** @hidden  */
     'insertText': {
-        command: 'InsertHTML',
-        subCommand: 'InsertHTML',
+        command: 'InsertText',
+        subCommand: 'InsertText',
         value: ''
@@ -136,7 +136,7 @@ },
     'insertOrderedList': {
-        command: 'Formats',
+        command: 'Lists',
         value: 'OL'
     },
     'insertUnorderedList': {
-        command: 'Formats',
+        command: 'Lists',
         value: 'UL'
@@ -143,0 +143,0 @@ },

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

@@ -1,2 +0,2 @@
-import { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { 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 { Component, ModuleDeclaration, EventHandler, Complex, Browser, EmitType, addClass, select, detach } from '@syncfusion/ej2-base';import { Property, NotifyPropertyChanges, INotifyPropertyChanged, formatUnit, L10n, closest } from '@syncfusion/ej2-base';import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';import { getScrollableParent } from '@syncfusion/ej2-popups';import * as events from '../base/constant';import * as classes from '../base/classes';import { Render } from '../renderer/render';import { ViewSource } from '../renderer/view-source';import { IRenderer, IFormatter, PrintEventArgs, ActionCompleteEventArgs, ActionBeginEventArgs } from './interface';import { IFontProperties, IFormatProperties, IColorProperties, IExecutionGroup, executeGroup, CommandName, ResizeArgs } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType } from './enum';import { EditorMode } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format } from '../models/toolbar-settings';import { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';import { FontColor, BackgroundColor } from '../models/toolbar-settings';import { IFrameSettings } from '../models/iframe-settings';import { InlineMode } from '../models/inline-mode';import { Link } from '../renderer/link-module';import { Image } from '../renderer/image-module';import { Table } from '../renderer/table-module';import { Count } from '../actions/count';import { HtmlEditor } from '../actions/html-editor';import { MarkdownEditor } from '../actions/markdown-editor';import { defaultLocale } from '../models/default-locale';import { setAttributes } from '../actions/html-attributes';import { BaseToolbar } from '../actions/base-toolbar';import { QuickToolbar } from '../actions/quick-toolbar';import { FullScreen } from '../actions/full-screen';import { PasteCleanup } from '../actions/paste-clean-up';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent } from '../base/util';
 import {ChangeEventArgs} from "./rich-text-editor";
@@ -58,2 +58,22 @@ import {ComponentModel} from '@syncfusion/ej2-base';
     /**
+     * Specifies the pasting options in RichTextEditor component and control with the following properties.
+     * * prompt - Set boolean value to enable or disable the prompt when pasting.
+     * * deniedAttrs  -  Specifies the attributes to restrict when pasting in RTE.
+     * * allowedStyleProps  -  Specifies the allowed style properties when pasting in RTE.
+     * * deniedTags	 -  Specifies the tags to restrict when pasting in RTE.
+     * * keepFormat	 -   Set boolean value to keep or remove the from when pasting.
+     * * plainText	 -   Set boolean value to paste as plain text or not.
+     * @default
+     * {
+     *  prompt: false,
+     *  deniedAttrs: null,
+     *  allowedStyleProps: null,
+     *  deniedTags: null,
+     *  keepFormat: true,
+     *  plainText:  false
+     * }
+     */
+    pasteCleanupSettings?: PasteCleanupSettingsModel;
+
+    /**
      * Specifies the items to be rendered in an iframe mode, and it has the following properties.
@@ -60,0 +80,0 @@ * * enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.

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

@@ -13,3 +13,3 @@ import { Component, ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';
-import { QuickToolbarSettingsModel, InlineModeModel } from '../models/models';
+import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel } from '../models/models';
 import { Link } from '../renderer/link-module';
@@ -24,2 +24,3 @@ import { Image } from '../renderer/image-module';
 import { FullScreen } from '../actions/full-screen';
+import { PasteCleanup } from '../actions/paste-clean-up';
 export interface ChangeEventArgs {
@@ -44,3 +45,2 @@ /**
 export declare class RichTextEditor extends Component<HTMLElement> implements INotifyPropertyChanged {
-    private inputElement;
     private placeHolderWrapper;
@@ -60,2 +60,6 @@ private scrollParentElements;
      */
+    inputElement: HTMLElement;
+    /**
+     * @hidden
+     */
     isRTE: boolean;
@@ -98,2 +102,6 @@ /**
      */
+    pasteCleanupModule: PasteCleanup;
+    /**
+     * @hidden
+     */
     sourceCodeModule: ViewSource;
@@ -167,2 +175,21 @@ /**
     /**
+     * Specifies the pasting options in RichTextEditor component and control with the following properties.
+     * * prompt - Set boolean value to enable or disable the prompt when pasting.
+     * * deniedAttrs  -  Specifies the attributes to restrict when pasting in RTE.
+     * * allowedStyleProps  -  Specifies the allowed style properties when pasting in RTE.
+     * * deniedTags	 -  Specifies the tags to restrict when pasting in RTE.
+     * * keepFormat	 -   Set boolean value to keep or remove the from when pasting.
+     * * plainText	 -   Set boolean value to paste as plain text or not.
+     * @default
+     * {
+     *  prompt: false,
+     *  deniedAttrs: null,
+     *  allowedStyleProps: null,
+     *  deniedTags: null,
+     *  keepFormat: true,
+     *  plainText:  false
+     * }
+     */
+    pasteCleanupSettings: PasteCleanupSettingsModel;
+    /**
      * Specifies the items to be rendered in an iframe mode, and it has the following properties.
@@ -514,2 +541,3 @@ * * enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.
     private originalElement;
+    private clickPoints;
     constructor(options?: RichTextEditorModel, element?: string | HTMLElement);
@@ -708,3 +736,3 @@ /**
     private focusHandler;
-    private setPanelValue;
+    private getUpdatedValue;
     private updateIntervalValue;
@@ -711,0 +739,0 @@ private onDocumentClick;

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

@@ -36,3 +36,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 { TableSettings, PasteCleanupSettings } from '../models/toolbar-settings';
 import { FontColor, BackgroundColor } from '../models/toolbar-settings';
@@ -111,2 +111,3 @@ import { IFrameSettings } from '../models/iframe-settings';
             modules.push({ member: 'htmlEditor', args: [this, this.serviceLocator] });
+            modules.push({ member: 'pasteCleanup', args: [this, this.serviceLocator] });
         }
@@ -141,2 +142,3 @@ return modules;
     RichTextEditor.prototype.preRender = function () {
+        this.clickPoints = { clientX: 0, clientY: 0 };
         this.serviceLocator = new ServiceLocator;
@@ -169,8 +171,8 @@ this.initializeServices();
             var rteOuterWrapper = this.createElement('div', {
-                className: 'e-control e-richtexteditor'
+                className: this.element.getAttribute('class')
             });
-            rteOuterWrapper.innerHTML = this.element.value;
+            this.element.innerHTML = '';
             this.element.parentElement.insertBefore(rteOuterWrapper, this.element);
             this.valueContainer = this.element;
-            this.valueContainer.classList.remove('e-control', 'e-richtexteditor');
+            removeClass([this.valueContainer], this.element.getAttribute('class').split(' '));
             this.element = rteOuterWrapper;
@@ -185,5 +187,2 @@ }
         addClass([this.valueContainer], classes.CLS_RTE_HIDDEN);
-        if (this.value !== null) {
-            this.valueContainer.value = this.value;
-        }
         this.element.appendChild(this.valueContainer);
@@ -279,2 +278,5 @@ };
         this.setContentHeight();
+        if (this.value !== null) {
+            this.valueContainer.defaultValue = this.value;
+        }
         (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
@@ -298,3 +300,3 @@ };
         }
-        if (e.action || e.which === 9) {
+        if (e.action && e.action !== 'paste' || e.which === 9) {
             this.formatter.process(this, null, e);
@@ -341,2 +343,3 @@ switch (e.action) {
     RichTextEditor.prototype.mouseUp = function (e) {
+        var touch = (e.touches ? e.changedTouches[0] : e);
         this.notify(events.mouseUp, { member: 'mouseUp', args: e });
@@ -347,3 +350,5 @@ if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
         }
-        this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });
+        if (this.clickPoints.clientX === touch.clientX && this.clickPoints.clientY === touch.clientY) {
+            this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });
+        }
     };
@@ -364,17 +369,30 @@ /**
         var _this = this;
-        var args = { requestType: 'Paste', editorMode: this.editorMode, event: e };
-        var value = null;
-        if (e && !isNOU(e.clipboardData)) {
-            value = e.clipboardData.getData('text/plain');
+        var evenArgs = {
+            originalEvent: e,
+            cancel: false,
+            requestType: 'Paste'
+        };
+        this.trigger(events.actionBegin, evenArgs);
+        if (!evenArgs.cancel) {
+            if (!isNOU(this.pasteCleanupModule)) {
+                this.notify(events.pasteClean, { args: e });
+            }
+            else {
+                var args_1 = { requestType: 'Paste', editorMode: this.editorMode, event: e };
+                var value = null;
+                if (e && !isNOU(e.clipboardData)) {
+                    value = e.clipboardData.getData('text/plain');
+                }
+                var file = e && e.clipboardData && e.clipboardData.items.length > 0 ?
+                    e.clipboardData.items[0].getAsFile() : null;
+                if (value !== null) {
+                    this.notify(events.paste, {
+                        file: file,
+                        args: e,
+                        text: value
+                    });
+                }
+                setTimeout(function () { _this.formatter.onSuccess(_this, args_1); }, 0);
+            }
         }
-        var file = e && e.clipboardData && e.clipboardData.items.length > 0 ?
-            e.clipboardData.items[0].getAsFile() : null;
-        if (value !== null) {
-            this.notify(events.paste, {
-                file: file,
-                args: e,
-                text: value
-            });
-        }
-        setTimeout(function () { _this.formatter.onSuccess(_this, args); }, 0);
     };
@@ -442,3 +460,2 @@ /**
         if (this.placeholder && this.placeHolderWrapper) {
-            detach(this.placeHolderWrapper);
             this.placeHolderWrapper = null;
@@ -994,5 +1011,7 @@ }
     RichTextEditor.prototype.mouseDownHandler = function (e) {
+        var touch = (e.touches ? e.changedTouches[0] : e);
         addClass([this.element], [classes.CLS_FOCUS]);
         this.preventDefaultResize(e);
         this.notify(events.mouseDown, { args: e });
+        this.clickPoints = { clientX: touch.clientX, clientY: touch.clientY };
     };
@@ -1057,15 +1076,17 @@ RichTextEditor.prototype.preventImgResize = function (e) {
     };
-    RichTextEditor.prototype.setPanelValue = function () {
+    RichTextEditor.prototype.getUpdatedValue = function () {
+        var value;
         if (this.editorMode === 'HTML') {
-            this.value = (this.inputElement.innerHTML === '<p><br></p>') ? null : this.enableHtmlEncode ?
+            value = (this.inputElement.innerHTML === '<p><br></p>') ? null : this.enableHtmlEncode ?
                 this.encode(this.decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
         }
         else {
-            this.value = this.inputElement.value === '' ? null :
+            value = this.inputElement.value === '' ? null :
                 this.inputElement.value;
         }
-        this.valueContainer.value = this.value;
+        return value;
     };
     RichTextEditor.prototype.updateIntervalValue = function () {
-        this.setPanelValue();
+        this.setProperties({ value: this.getUpdatedValue() }, true);
+        this.valueContainer.value = this.value;
         this.invokeChangeEvent();
@@ -1101,3 +1122,4 @@ };
             this.notify(events.focusChange, {});
-            this.setPanelValue();
+            var value = this.getUpdatedValue();
+            this.setProperties({ value: value });
             this.notify(events.toolbarRefresh, { args: e, documentNode: document });
@@ -1150,4 +1172,3 @@ this.invokeChangeEvent();
     RichTextEditor.prototype.resetHandler = function () {
-        this.setProperties({ value: null });
-        this.invokeChangeEvent();
+        this.setProperties({ value: this.valueContainer.defaultValue === '' ? null : this.valueContainer.defaultValue });
     };
@@ -1265,2 +1286,5 @@ /**
     __decorate([
+        Complex({}, PasteCleanupSettings)
+    ], RichTextEditor.prototype, "pasteCleanupSettings", void 0);
+    __decorate([
         Complex({}, IFrameSettings)
@@ -1267,0 +1291,0 @@ ], RichTextEditor.prototype, "iframeSettings", void 0);

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

 /**
  * Exports util methods used by RichTextEditor.
  */
-import { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
 import * as classes from '../base/classes';
@@ -122,6 +122,8 @@ import * as model from '../models/items';
                             result = getDropDownValue(formatItems, value, 'subCommand', 'text');
+                            var formatContent = isNullOrUndefined(e.parent.format.default) ? formatItems[0].text :
+                                e.parent.format.default;
                             dropDown.formatDropDown.content = ('<span style="display: inline-flex;' +
                                 'width:' + e.parent.format.width + '" >' +
                                 '<span class="e-rte-dropdown-btn-text">'
-                                + (isNOU(result) ? 'Paragraph' : result) +
+                                + (isNOU(result) ? formatContent : result) +
                                 '</span></span>');
@@ -147,3 +149,5 @@ dropDown.formatDropDown.dataBind();
                             result = getDropDownValue(fontNameItems, value, 'value', 'text');
-                            var name_1 = (isNOU(result) ? 'Segoe UI' : result);
+                            var fontNameContent = isNullOrUndefined(e.parent.fontFamily.default) ? fontNameItems[0].text :
+                                e.parent.fontFamily.default;
+                            var name_1 = (isNOU(result) ? fontNameContent : result);
                             e.tbElements[j].title = name_1;
@@ -162,3 +166,5 @@ dropDown.fontNameDropDown.content = ('<span style="display: inline-flex;' +
                             var fontSizeItems = e.parent.fontSize.items;
-                            result = getDropDownValue(fontSizeItems, (value === '' ? e.parent.fontSize.default.replace(/\s/g, '') : value), 'value', 'text');
+                            var fontSizeContent = isNullOrUndefined(e.parent.fontSize.default) ? fontSizeItems[1].text :
+                                e.parent.fontSize.default;
+                            result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), 'value', 'text');
                             dropDown.fontSizeDropDown.content = ('<span style="display: inline-flex;' +
@@ -165,0 +171,0 @@ 'width:' + e.parent.fontSize.width + '" >' +

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

@@ -38,2 +38,8 @@ import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
                 args = {};
+                if (self.editorMode === 'Markdown' && action === 'insert-table') {
+                    value = {
+                        'headingText': self.localeObj.getConstant('TableHeadingText'),
+                        'colText': self.localeObj.getConstant('TableColText')
+                    };
+                }
                 var items = {
@@ -40,0 +46,0 @@ originalEvent: event, cancel: false,

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

@@ -80,3 +80,2 @@ // tslint:disable
     'textPlaceholder': 'Enter Text',
-    'tblhead': '1X1',
     'inserttablebtn': 'Insert Table',
@@ -108,3 +107,27 @@ 'tabledialogHeader': 'Insert Table',
     'TableHeadingText': 'Heading',
-    'TableColText': 'Col'
+    'TableColText': 'Col',
+    'imageInsertLinkHeader': 'Insert Link',
+    'editImageHeader': 'Edit Image',
+    "alignmentsDropDownLeft": 'Align Left',
+    "alignmentsDropDownCenter": 'Align Center',
+    "alignmentsDropDownRight": 'Align Right',
+    "alignmentsDropDownJustify": 'Align Justify',
+    "imageDisplayDropDownInline": 'Inline',
+    "imageDisplayDropDownBreak": 'Break',
+    "tableInsertRowDropDownBefore": 'Insert row before',
+    "tableInsertRowDropDownAfter": 'Insert row after',
+    "tableInsertRowDropDownDelete": 'Delete row',
+    "tableInsertColumnDropDownLeft": 'Insert column left',
+    "tableInsertColumnDropDownRight": 'Insert column right',
+    "tableInsertColumnDropDownDelete": 'Delete column',
+    "tableVerticalAlignDropDownTop": 'Align Top',
+    "tableVerticalAlignDropDownMiddle": 'Align Middle',
+    "tableVerticalAlignDropDownBottom": 'Align Bottom',
+    "tableStylesDropDownDashedBorder": 'Dashed Borders',
+    "tableStylesDropDownAlternateRows": 'Alternate Rows',
+    'pasteFormat': 'Paste Format',
+    'pasteFormatContent': 'Choose the formatting action',
+    'plainText': 'Plain Text',
+    'cleanFormat': 'Clean',
+    'keepFormat': 'Keep'
 };
@@ -111,0 +134,0 @@ export var toolsLocale = {

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

 /**
  * Export items model
  */
-import { IToolsItems, IDropDownItemModel } from '../base/interface';
+import { IToolsItems, IDropDownItemModel, IRichTextEditor } from '../base/interface';
 export declare let templateItems: string[];
@@ -16,1 +16,2 @@ export declare let tools: {
 export declare let TableStyleItems: IDropDownItemModel[];
+export declare function updateDropDownLocale(self: IRichTextEditor): void;

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

@@ -276,3 +276,3 @@ // tslint:disable
     'editimagelink': {
-        'id': 'EditIamgeLink',
+        'id': 'EditImageLink',
         'icon': 'e-edit-link',
@@ -459,2 +459,8 @@ 'tooltip': 'Edit Link',
 };
+var alignmentLocale = [
+    { locale: 'alignmentsDropDownLeft', value: 'JustifyLeft' },
+    { locale: 'alignmentsDropDownCenter', value: 'JustifyCenter' },
+    { locale: 'alignmentsDropDownRight', value: 'JustifyRight' },
+    { locale: 'alignmentsDropDownJustify', value: 'JustifyFull' }
+];
 export var alignmentItems = [
@@ -471,2 +477,6 @@ { iconCss: 'e-icons e-justify-left', text: 'Align Left', command: 'Alignments', subCommand: 'JustifyLeft' },
 ];
+var displayLocale = [
+    { locale: 'imageDisplayDropDownInline', value: 'Inline' },
+    { locale: 'imageDisplayDropDownBreak', value: 'Break' }
+];
 export var imageDisplayItems = [
@@ -476,2 +486,7 @@ { text: 'Inline', cssClass: 'e-inline', command: 'Images', subCommand: 'Inline' },
 ];
+var tableRowLocale = [
+    { locale: 'tableInsertRowDropDownBefore', value: 'InsertRowBefore' },
+    { locale: 'tableInsertRowDropDownAfter', value: 'InsertRowAfter' },
+    { locale: 'tableInsertRowDropDownDelete', value: 'DeleteRow' }
+];
 export var tableRowsItems = [
@@ -482,2 +497,7 @@ { iconCss: 'e-icons e-insert-row-before', text: 'Insert row before', command: 'Table', subCommand: 'InsertRowBefore' },
 ];
+var tableColumnLocale = [
+    { locale: 'tableInsertColumnDropDownLeft', value: 'InsertColumnLeft' },
+    { locale: 'tableInsertColumnDropDownRight', value: 'InsertColumnRight' },
+    { locale: 'tableInsertColumnDropDownDelete', value: 'DeleteColumn' }
+];
 export var tableColumnsItems = [
@@ -488,2 +508,7 @@ { iconCss: 'e-icons e-insert-column-left', text: 'Insert column left', command: 'Table', subCommand: 'InsertColumnLeft' },
 ];
+var tableVerticalLocale = [
+    { locale: 'tableVerticalAlignDropDownTop', value: 'AlignTop' },
+    { locale: 'tableVerticalAlignDropDownMiddle', value: 'AlignMiddle' },
+    { locale: 'tableVerticalAlignDropDownBottom', value: 'AlignBottom' }
+];
 export var TableCellVerticalAlignItems = [
@@ -494,2 +519,6 @@ { iconCss: 'e-icons e-align-top', text: 'Align Top', command: 'Table', subCommand: 'AlignTop' },
 ];
+var tableStyleLocale = [
+    { locale: 'tableStylesDropDownDashedBorder', value: 'Dashed' },
+    { locale: 'tableStylesDropDownAlternateRows', value: 'Alternate' }
+];
 export var TableStyleItems = [
@@ -499,1 +528,29 @@ { text: 'Dashed Borders', cssClass: 'e-dashed-borders', command: 'Table', subCommand: 'Dashed' },
 ];
+function getLocale(self, localeItems, item) {
+    for (var i = 0; localeItems.length > i; i++) {
+        if (localeItems[i].value === item.subCommand) {
+            return self.localeObj.getConstant(localeItems[i].locale);
+        }
+    }
+    return item.text;
+}
+export function updateDropDownLocale(self) {
+    alignmentItems.forEach(function (item, i) {
+        alignmentItems[i].text = getLocale(self, alignmentLocale, alignmentItems[i]);
+    });
+    imageDisplayItems.forEach(function (item, i) {
+        imageDisplayItems[i].text = getLocale(self, displayLocale, imageDisplayItems[i]);
+    });
+    tableRowsItems.forEach(function (item, i) {
+        tableRowsItems[i].text = getLocale(self, tableRowLocale, tableRowsItems[i]);
+    });
+    tableColumnsItems.forEach(function (item, i) {
+        tableColumnsItems[i].text = getLocale(self, tableColumnLocale, tableColumnsItems[i]);
+    });
+    TableCellVerticalAlignItems.forEach(function (item, i) {
+        TableCellVerticalAlignItems[i].text = getLocale(self, tableVerticalLocale, TableCellVerticalAlignItems[i]);
+    });
+    TableStyleItems.forEach(function (item, i) {
+        TableStyleItems[i].text = getLocale(self, tableStyleLocale, TableStyleItems[i]);
+    });
+}

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

@@ -9,3 +9,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs } from '../base/interface';import { TableStyleItems } from '../models/items';
     /**
-     * Specifies whether to render toolbar in RTE.
+     * Specifies whether to render toolbar in RichTextEditor.
      * @default true
@@ -25,3 +25,3 @@ */
      * - Expand: Toolbar items placed within the available space and rest of the items are placed to the extended menu section.
-     * - MultiRow: Toolbar which placed at top of RTE editing area.
+     * - MultiRow: Toolbar which placed at top of RichTextEditor editing area.
      * @default Expand
@@ -168,3 +168,3 @@ */
     /**
-     * Specifies whether to enable quick toolbar in RTE.
+     * Specifies whether to enable quick toolbar in RichTextEditor.
      * @default true
@@ -208,2 +208,45 @@ */
 /**
+ * Interface for a class PasteCleanupSettings
+ */
+export interface PasteCleanupSettingsModel {
+
+    /**
+     * Specifies whether to enable the prompt for paste in RichTextEditor.
+     * @default false
+     */
+    prompt?: boolean;
+
+    /**
+     * Specifies the attributes to restrict when pasting in RichTextEditor.
+     * @default null
+     */
+    deniedAttrs?: string[];
+
+    /**
+     * Specifies the allowed style properties when pasting in RichTextEditor.
+     * @default null
+     */
+    allowedStyleProps?: string[];
+
+    /**
+     * Specifies the tags to restrict when pasting in RichTextEditor.
+     * @default null
+     */
+    deniedTags?: string[];
+
+    /**
+     * Specifies whether to keep or remove the format when pasting in RichTextEditor.
+     * @default true
+     */
+    keepFormat?: boolean;
+
+    /**
+     * Specifies whether to paste as plain text or not in RichTextEditor.
+     * @default false
+     */
+    plainText?: boolean;
+
+}
+
+/**
  * Interface for a class FontFamily
@@ -215,3 +258,3 @@ */
      * Specifies default font family selection
-     * @default 0
+     * @default 'null'
      */
@@ -241,3 +284,3 @@ default?: string;
      * Specifies default font size selection
-     * @default 0
+     * @default 'null'
      */
@@ -267,3 +310,3 @@ default?: string;
      * Specifies default format
-     * @default 'Paragraph'
+     * @default 'null'
      */
@@ -270,0 +313,0 @@ default?: string;

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

@@ -15,7 +15,7 @@ import { ChildProperty } from '@syncfusion/ej2-base';
 /**
- * Configures the toolbar settings of the RTE.
+ * Configures the toolbar settings of the RichTextEditor.
  */
 export declare class ToolbarSettings extends ChildProperty<ToolbarSettings> {
     /**
-     * Specifies whether to render toolbar in RTE.
+     * Specifies whether to render toolbar in RichTextEditor.
      * @default true
@@ -33,3 +33,3 @@ */
      * - Expand: Toolbar items placed within the available space and rest of the items are placed to the extended menu section.
-     * - MultiRow: Toolbar which placed at top of RTE editing area.
+     * - MultiRow: Toolbar which placed at top of RichTextEditor editing area.
      * @default Expand
@@ -52,3 +52,3 @@ */
 /**
- * Configures the image settings of the RTE.
+ * Configures the image settings of the RichTextEditor.
  */
@@ -146,7 +146,7 @@ export declare class ImageSettings extends ChildProperty<ImageSettings> {
 /**
- * Configures the quick toolbar settings of the RTE.
+ * Configures the quick toolbar settings of the RichTextEditor.
  */
 export declare class QuickToolbarSettings extends ChildProperty<QuickToolbarSettings> {
     /**
-     * Specifies whether to enable quick toolbar in RTE.
+     * Specifies whether to enable quick toolbar in RichTextEditor.
      * @default true
@@ -182,8 +182,43 @@ */
 /**
- * Configures the font family settings of the RTE.
+ * Configures the Paste Cleanup settings of the RichTextEditor.
  */
+export declare class PasteCleanupSettings extends ChildProperty<PasteCleanupSettings> {
+    /**
+     * Specifies whether to enable the prompt for paste in RichTextEditor.
+     * @default false
+     */
+    prompt: boolean;
+    /**
+     * Specifies the attributes to restrict when pasting in RichTextEditor.
+     * @default null
+     */
+    deniedAttrs: string[];
+    /**
+     * Specifies the allowed style properties when pasting in RichTextEditor.
+     * @default null
+     */
+    allowedStyleProps: string[];
+    /**
+     * Specifies the tags to restrict when pasting in RichTextEditor.
+     * @default null
+     */
+    deniedTags: string[];
+    /**
+     * Specifies whether to keep or remove the format when pasting in RichTextEditor.
+     * @default true
+     */
+    keepFormat: boolean;
+    /**
+     * Specifies whether to paste as plain text or not in RichTextEditor.
+     * @default false
+     */
+    plainText: boolean;
+}
+/**
+ * Configures the font family settings of the RichTextEditor.
+ */
 export declare class FontFamily extends ChildProperty<FontFamily> {
     /**
      * Specifies default font family selection
-     * @default 0
+     * @default 'null'
      */
@@ -203,3 +238,3 @@ default: string;
 /**
- * Configures the font size settings of the RTE.
+ * Configures the font size settings of the RichTextEditor.
  */
@@ -209,3 +244,3 @@ export declare class FontSize extends ChildProperty<FontSize> {
      * Specifies default font size selection
-     * @default 0
+     * @default 'null'
      */
@@ -225,3 +260,3 @@ default: string;
 /**
- * Configures the format settings of the RTE.
+ * Configures the format settings of the RichTextEditor.
  */
@@ -231,3 +266,3 @@ export declare class Format extends ChildProperty<Format> {
      * Specifies default format
-     * @default 'Paragraph'
+     * @default 'null'
      */
@@ -247,3 +282,3 @@ default: string;
 /**
- * Configures the font Color settings of the RTE.
+ * Configures the font Color settings of the RichTextEditor.
  */
@@ -280,3 +315,3 @@ export declare class FontColor extends ChildProperty<FontColor> {
 /**
- * Configures the background Color settings of the RTE.
+ * Configures the background Color settings of the RichTextEditor.
  */
@@ -283,0 +318,0 @@ export declare class BackgroundColor extends ChildProperty<BackgroundColor> {

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

@@ -73,3 +73,3 @@ var __extends = (this && this.__extends) || (function () {
 /**
- * Configures the toolbar settings of the RTE.
+ * Configures the toolbar settings of the RichTextEditor.
  */
@@ -100,3 +100,3 @@ var ToolbarSettings = /** @class */ (function (_super) {
 /**
- * Configures the image settings of the RTE.
+ * Configures the image settings of the RichTextEditor.
  */
@@ -171,3 +171,3 @@ var ImageSettings = /** @class */ (function (_super) {
 /**
- * Configures the quick toolbar settings of the RTE.
+ * Configures the quick toolbar settings of the RichTextEditor.
  */
@@ -201,4 +201,33 @@ var QuickToolbarSettings = /** @class */ (function (_super) {
 /**
- * Configures the font family settings of the RTE.
+ * Configures the Paste Cleanup settings of the RichTextEditor.
  */
+var PasteCleanupSettings = /** @class */ (function (_super) {
+    __extends(PasteCleanupSettings, _super);
+    function PasteCleanupSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(false)
+    ], PasteCleanupSettings.prototype, "prompt", void 0);
+    __decorate([
+        Property(null)
+    ], PasteCleanupSettings.prototype, "deniedAttrs", void 0);
+    __decorate([
+        Property(null)
+    ], PasteCleanupSettings.prototype, "allowedStyleProps", void 0);
+    __decorate([
+        Property(null)
+    ], PasteCleanupSettings.prototype, "deniedTags", void 0);
+    __decorate([
+        Property(true)
+    ], PasteCleanupSettings.prototype, "keepFormat", void 0);
+    __decorate([
+        Property(false)
+    ], PasteCleanupSettings.prototype, "plainText", void 0);
+    return PasteCleanupSettings;
+}(ChildProperty));
+export { PasteCleanupSettings };
+/**
+ * Configures the font family settings of the RichTextEditor.
+ */
 var FontFamily = /** @class */ (function (_super) {
@@ -210,3 +239,3 @@ __extends(FontFamily, _super);
     __decorate([
-        Property('Segoe UI')
+        Property(null)
     ], FontFamily.prototype, "default", void 0);
@@ -223,3 +252,3 @@ __decorate([
 /**
- * Configures the font size settings of the RTE.
+ * Configures the font size settings of the RichTextEditor.
  */
@@ -232,3 +261,3 @@ var FontSize = /** @class */ (function (_super) {
     __decorate([
-        Property('10 pt')
+        Property(null)
     ], FontSize.prototype, "default", void 0);
@@ -245,3 +274,3 @@ __decorate([
 /**
- * Configures the format settings of the RTE.
+ * Configures the format settings of the RichTextEditor.
  */
@@ -254,3 +283,3 @@ var Format = /** @class */ (function (_super) {
     __decorate([
-        Property('Paragraph')
+        Property(null)
     ], Format.prototype, "default", void 0);
@@ -267,3 +296,3 @@ __decorate([
 /**
- * Configures the font Color settings of the RTE.
+ * Configures the font Color settings of the RichTextEditor.
  */
@@ -294,3 +323,3 @@ var FontColor = /** @class */ (function (_super) {
 /**
- * Configures the background Color settings of the RTE.
+ * Configures the background Color settings of the RichTextEditor.
  */
@@ -297,0 +326,0 @@ var BackgroundColor = /** @class */ (function (_super) {

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

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

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

@@ -226,3 +226,3 @@ import { EventHandler, detach, isNullOrUndefined } from '@syncfusion/ej2-base';
             locale: this.parent.locale,
-            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px', height: 'initial',
+            showCloseIcon: true, closeOnEscape: true, width: (Browser.isDevice) ? '290px' : '310px', height: 'inherit',
             isModal: Browser.isDevice,
@@ -253,3 +253,3 @@ buttons: [{
         this.dialogObj.appendTo(linkDialogEle);
-        linkDialogEle.style.maxHeight = 'initial';
+        linkDialogEle.style.maxHeight = 'inherit';
         if (!isNullOrUndefined(inputDetails)) {
@@ -340,3 +340,4 @@ linkUrl.value = inputDetails.url;
         }
-        this.parent.formatter.process(this.parent, e.args, e.args, { selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,
+        this.parent.formatter.process(this.parent, e.args, e.args, {
+            selectNode: e.selectNode, selectParent: e.selectParent, selection: e.selection,
             subCommand: e.args.item.subCommand
@@ -368,3 +369,3 @@ });
                 title: selectParentEle.title, target: selectParentEle.target,
-                header: 'Edit Link', btnText: linkUpdate
+                header: this.i10n.getConstant('editLink'), btnText: linkUpdate
             };
@@ -371,0 +372,0 @@ this.linkDialog(e, inputDetails);

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

@@ -28,3 +28,3 @@ import { detach, closest, Browser } from '@syncfusion/ej2-base';
         }
-        this.parent.on(events.createTable, (Browser.isDevice || this.parent.inlineMode.enable) ? this.insertTableDialog : this.renderDlgContent, this);
+        this.parent.on(events.createTable, this.renderDlgContent, this);
         this.parent.on(events.initialEnd, this.afterRender, this);
@@ -41,4 +41,3 @@ this.parent.on(events.docClick, this.docClick, this);
         }
-        this.parent.off(events.createTable, (Browser.isDevice || this.parent.inlineMode.enable) ?
-            this.insertTableDialog : this.renderDlgContent);
+        this.parent.off(events.createTable, this.renderDlgContent);
         this.parent.off(events.initialEnd, this.afterRender);
@@ -102,2 +101,25 @@ this.parent.off(events.docClick, this.docClick);
         var proxy = this;
+        switch (event.action) {
+            case 'escape':
+                break;
+            case 'insert-table':
+                if (this.parent.editorMode === 'HTML') {
+                    var docElement = this.parent.contentModule.getDocument();
+                    var range = this.parent.formatter.editorManager.nodeSelection.getRange(docElement);
+                    var selection = this.parent.formatter.editorManager.nodeSelection.save(range, docElement);
+                    var args = {
+                        originalEvent: e.args,
+                        item: {
+                            command: 'Table',
+                            subCommand: 'CreateTable'
+                        }
+                    };
+                    this.insertTableDialog({
+                        self: this,
+                        args: args, selection: selection
+                    });
+                }
+                event.preventDefault();
+                break;
+        }
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) && this.contentModule) {
@@ -711,2 +733,6 @@ var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
         var _this = this;
+        if (Browser.isDevice || this.parent.inlineMode.enable) {
+            this.insertTableDialog(args);
+            return;
+        }
         if (this.popupObj) {
@@ -717,3 +743,3 @@ this.popupObj.hide();
         this.hideTableQuickToolbar();
-        var header = this.l10n.getConstant('tblhead');
+        var header = '1X1';
         var insertbtn = this.l10n.getConstant('inserttablebtn');
@@ -927,3 +953,6 @@ this.dlgDiv = this.parent.createElement('div', { className: 'e-rte-table-popup', id: this.rteID + '_table' });
         if (proxy.rowTextBox.value && proxy.columnTextBox.value) {
-            var argument = ((Browser.isDevice || proxy.parent.inlineMode.enable) ? args : this);
+            var argument = ((Browser.isDevice || (!isNullOrUndefined(args.args)
+                && !isNullOrUndefined(args.args.originalEvent) &&
+                args.args.originalEvent.action === 'insert-table')
+                || proxy.parent.inlineMode.enable) ? args : this);
             proxy.tableInsert(proxy.rowTextBox.value, proxy.columnTextBox.value, e, argument);
@@ -930,0 +959,0 @@ }

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

@@ -284,2 +284,3 @@ import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';
         args.element.tabIndex = -1;
+        dropDown.element.removeAttribute('type');
         dropDown.element.onmousedown = function () { proxy.parent.notify(events.selectionSave, {}); };
@@ -286,0 +287,0 @@ return dropDown;

src/selection/selection.js

@@ -104,3 +104,4 @@ /**
                 || (nodeCollection[index].nodeType === 3 &&
-                    range.startContainer !== range.endContainer)) {
+                    range.startContainer !== range.endContainer &&
+                    range.startContainer.parentNode !== range.endContainer.parentNode)) {
                 nodeCollection.splice(index, 1);
@@ -107,0 +108,0 @@ index--;

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

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

Improved metrics

Total package byte prevSize

10126102

increased by5.38%

Dev dependency count

0

decreased by-100%

Number of package files

302

increased by2.37%

Lines of code

88851

increased by4.13%

Dependency changes

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

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

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

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