@syncfusion/ej2-richtexteditor 20.1.55 → 20.1.58

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 20.1.55
+*  version : 20.1.58
 *  Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-richtexteditor@*",
-  "_id": "@syncfusion/ej2-richtexteditor@20.1.52",
+  "_id": "@syncfusion/ej2-richtexteditor@20.1.57",
   "_inBundle": false,
-  "_integrity": "sha512-nOAMnG7anB1iGGM7QEUNtVJWJZsgXvSJgbgRJSAsy/vcqq1wlR5zJCUTEfffxQLTwKOvU+N0dGrIx7egVFSmWg==",
+  "_integrity": "sha512-LjSfZ0mNXFBjRl/Q2pYJ1j8DWpzc8y64MLCMA6oSTIFRwmngZRRXOHXBLyifrkOX2371CSCsVPSxBuUV3pU60w==",
   "_location": "/@syncfusion/ej2-richtexteditor",
   "_phantomChildren": {},
   "_requested": {
@@ -26,8 +26,8 @@
     "/@syncfusion/ej2-react-richtexteditor",
     "/@syncfusion/ej2-vue-richtexteditor"
   ],
-  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.52.tgz",
-  "_shasum": "7c14ec83053987edf6e41f7968ad52aab5812e9f",
+  "_resolved": "http://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-richtexteditor/-/ej2-richtexteditor-20.1.57.tgz",
+  "_shasum": "cebf8bcc4da40e76f00f258bbcb1e50ab2dc0d03",
   "_spec": "@syncfusion/ej2-richtexteditor@*",
   "_where": "/jenkins/workspace/automation_release_19.1.0.1-ZPMUBNQ6AUYH6YGEFBPVYMEQLRRW2SLD4XCZ6GATNZJFYJ3RIAOA/packages/included",
   "author": {
@@ -38,13 +38,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~20.1.55",
+    "@syncfusion/ej2-base": "~20.1.57",
     "@syncfusion/ej2-buttons": "~20.1.55",
-    "@syncfusion/ej2-filemanager": "~20.1.55",
-    "@syncfusion/ej2-inputs": "~20.1.55",
-    "@syncfusion/ej2-navigations": "~20.1.55",
-    "@syncfusion/ej2-popups": "~20.1.55",
-    "@syncfusion/ej2-splitbuttons": "~20.1.55"
+    "@syncfusion/ej2-filemanager": "~20.1.58",
+    "@syncfusion/ej2-inputs": "~20.1.58",
+    "@syncfusion/ej2-navigations": "~20.1.58",
+    "@syncfusion/ej2-popups": "~20.1.58",
+    "@syncfusion/ej2-splitbuttons": "~20.1.57"
   },
   "deprecated": false,
   "description": "Essential JS 2 RichTextEditor component",
@@ -70,6 +70,6 @@
     "url": "git+https://github.com/syncfusion/ej2-javascript-ui-controls.git"
   },
   "typings": "index.d.ts",
-  "version": "20.1.55",
+  "version": "20.1.58",
   "sideEffects": false
 }

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

@@ -541,7 +541,13 @@ var DOMNode = /** @class */ (function () {
                 markerStart.appendChild(start);
             }
             else {
-                this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+                if (start.nodeType != 3 && start.nodeName != '#text') {
+                    var marker = this.marker(markerClassName.startSelection, '');
+                    append([this.parseHTMLFragment(marker)], start);
+                }
+                else {
+                    this.replaceWith(start, this.marker(markerClassName.startSelection, this.encode(start.textContent)));
+                }
             }
             if (end.nodeType !== Node.TEXT_NODE && end.tagName === 'BR' &&
                 CONSTANT.IGNORE_BLOCK_TAGS.indexOf(end.parentNode.tagName.toLocaleLowerCase()) >= 0) {

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

@@ -26,6 +26,7 @@ export declare class Lists {
     private spaceList;
     private enterList;
     private backspaceList;
+    private removeList;
     private keyDownHandler;
     private spaceKeyAction;
     private getAction;

package/src/editor-manager/plugin/lists.js

@@ -1,5 +1,5 @@
 import * as CONSTANT from './../base/constant';
-import { createElement, detach, prepend, append, attributes } from '@syncfusion/ej2-base';
+import { createElement, detach, prepend, append, attributes, Browser } from '@syncfusion/ej2-base';
 import { markerClassName } from './dom-node';
 import * as EVENTS from './../../common/constant';
 import { setStyleAttribute } from '@syncfusion/ej2-base';
@@ -178,6 +178,29 @@ var Lists = /** @class */ (function () {
                 parentList.parentElement.insertBefore(startNode.children[1], parentList);
             }
         }
+        this.removeList(range, e);
+    };
+    Lists.prototype.removeList = function (range, e) {
+        var startNode = this.parent.domNode.getSelectedNode(range.startContainer, range.startOffset);
+        var endNode = this.parent.domNode.getSelectedNode(range.endContainer, range.endOffset);
+        startNode = startNode.nodeName === 'BR' ? startNode.parentElement : startNode;
+        endNode = endNode.nodeName === 'BR' ? endNode.parentElement : endNode;
+        if (((range.commonAncestorContainer.nodeName === 'OL' || range.commonAncestorContainer.nodeName === 'UL' || range.commonAncestorContainer.nodeName === 'LI') &&
+            isNOU(endNode.nextElementSibling) && endNode.textContent.length === range.endOffset &&
+            isNOU(startNode.previousElementSibling) && range.startOffset === 0) ||
+            (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
+                range.startOffset === 0 && range.endOffset === 1)) {
+            if (Browser.userAgent.indexOf('Firefox') != -1) {
+                detach(range.commonAncestorContainer.childNodes[0]);
+            }
+            else if (range.commonAncestorContainer.nodeName === 'LI') {
+                detach(range.commonAncestorContainer.parentElement);
+            }
+            else {
+                detach(range.commonAncestorContainer);
+            }
+            e.event.preventDefault();
+        }
     };
     Lists.prototype.keyDownHandler = function (e) {
         if (e.event.which === 13) {
@@ -202,6 +225,7 @@ var Lists = /** @class */ (function () {
                 && (commonAncestor.lastElementChild === closest(endNode, 'li')) && !range.collapsed) {
                 detach(commonAncestor);
             }
+            this.removeList(range, e);
         }
         if (e.event.which === 9) {
             var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
@@ -417,6 +441,19 @@ var Lists = /** @class */ (function () {
     };
     Lists.prototype.applyListsHandler = function (e) {
         var range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        if (Browser.userAgent.indexOf('Firefox') != -1 && range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement) {
+            var startChildNodes = range.startContainer.childNodes;
+            var startNode = ((startChildNodes[(range.startOffset > 0) ? (range.startOffset - 1) : range.startOffset]) || range.startContainer);
+            var endNode = (range.endContainer.childNodes[(range.endOffset > 0) ? (range.endOffset - 1) : range.endOffset] || range.endContainer);
+            var lastSelectionNode = endNode.lastChild.nodeName === 'BR' ? (isNOU(endNode.lastChild.previousSibling) ? endNode
+                : endNode.lastChild.previousSibling) : endNode.lastChild;
+            while (!isNOU(lastSelectionNode) && lastSelectionNode.nodeName !== '#text' && lastSelectionNode.nodeName !== 'IMG' &&
+                lastSelectionNode.nodeName !== 'BR' && lastSelectionNode.nodeName !== 'HR') {
+                lastSelectionNode = lastSelectionNode.lastChild;
+            }
+            this.parent.nodeSelection.setSelectionText(this.parent.currentDocument, startNode, lastSelectionNode, 0, lastSelectionNode.textContent.length);
+            range = this.parent.nodeSelection.getRange(this.parent.currentDocument);
+        }
         if (range.startContainer === range.endContainer && range.startContainer === this.parent.editableElement &&
             range.startOffset === range.endOffset && range.startOffset === 0 &&
             this.parent.editableElement.textContent.length === 0 && (this.parent.editableElement.childNodes[0].nodeName != 'TABLE' &&

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

@@ -270,8 +270,16 @@ var SelectionCommands = /** @class */ (function () {
             for (; nodeTraverse && nodeTraverse.parentElement && nodeTraverse.parentElement !== endNode; 
             // eslint-disable-next-line
             nodeTraverse = nodeTraverse) {
-                if (nodeTraverse.parentElement && nodeTraverse.parentElement.tagName.toLocaleLowerCase()
-                    === formatNode.tagName.toLocaleLowerCase() &&
+                var nodeTraverseCondition = void 0;
+                if (formatNode.nodeName === 'SPAN') {
+                    nodeTraverseCondition = nodeTraverse.parentElement.tagName.toLocaleLowerCase()
+                        === formatNode.tagName.toLocaleLowerCase() && nodeTraverse.parentElement.getAttribute('style') === formatNodeStyles;
+                }
+                else {
+                    nodeTraverseCondition = nodeTraverse.parentElement.tagName.toLocaleLowerCase()
+                        === formatNode.tagName.toLocaleLowerCase();
+                }
+                if (nodeTraverse.parentElement && nodeTraverseCondition &&
                     (nodeTraverse.parentElement.childElementCount > 1 || range.startOffset > 1)) {
                     if (textNode.parentElement && textNode.parentElement.tagName.toLocaleLowerCase()
                         === formatNode.tagName.toLocaleLowerCase()) {

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

@@ -50,17 +50,18 @@ var BaseQuickToolbar = /** @class */ (function () {
         this.element = this.parent.createElement('div', { id: popupId, className: className + ' ' + classes.CLS_RTE_ELEMENTS });
         this.element.setAttribute('aria-owns', this.parent.getID());
         this.appendPopupContent();
-        this.createToolbar(args.toolbarItems, args.mode);
+        this.createToolbar(args.toolbarItems, args.mode, args.cssClass);
         this.popupRenderer.renderPopup(this);
         this.addEventListener();
     };
-    BaseQuickToolbar.prototype.createToolbar = function (items, mode) {
+    BaseQuickToolbar.prototype.createToolbar = function (items, mode, cssClass) {
         this.quickTBarObj = new BaseToolbar(this.parent, this.locator);
         this.quickTBarObj.render({
             container: 'quick',
             target: this.toolbarElement,
             items: items,
-            mode: mode
+            mode: mode,
+            cssClass: cssClass
         });
         this.quickTBarObj.toolbarObj.refresh();
     };
@@ -252,6 +253,10 @@ var BaseQuickToolbar = /** @class */ (function () {
                 _this.popupObj.element.classList.remove('e-popup-open');
                 removeClass([_this.element], [classes.CLS_HIDE]);
                 _this.popupObj.show({ name: 'ZoomIn', duration: (Browser.isIE ? 250 : 400) });
+                if (_this.popupObj && _this.parent.cssClass) {
+                    removeClass([_this.popupObj.element], _this.parent.cssClass);
+                    addClass([_this.popupObj.element], _this.parent.cssClass);
+                }
                 setStyleAttribute(_this.element, {
                     maxWidth: window.outerWidth + 'px'
                 });

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

@@ -16,6 +16,7 @@ export declare class BaseToolbar {
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     private addEventListener;
     private removeEventListener;
+    private setCssClass;
     private setRtl;
     private getClass;
     private getTemplateObject;

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

@@ -23,12 +23,24 @@ var BaseToolbar = /** @class */ (function () {
     }
     BaseToolbar.prototype.addEventListener = function () {
         this.parent.on(events.rtlMode, this.setRtl, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
     };
     BaseToolbar.prototype.removeEventListener = function () {
         this.parent.off(events.rtlMode, this.setRtl);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.removeEventListener);
     };
+    BaseToolbar.prototype.setCssClass = function (e) {
+        if (!isNullOrUndefined(this.toolbarObj)) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                this.toolbarObj.setProperties({ cssClass: (this.toolbarObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
     BaseToolbar.prototype.setRtl = function (args) {
         if (!isNullOrUndefined(this.toolbarObj)) {
             this.toolbarObj.setProperties({ enableRtl: args.enableRtl });
@@ -158,7 +170,8 @@ var BaseToolbar = /** @class */ (function () {
             items: this.getItems(args.items, args.container),
             overflowMode: args.mode,
             enablePersistence: this.parent.enablePersistence,
-            enableRtl: this.parent.enableRtl
+            enableRtl: this.parent.enableRtl,
+            cssClass: args.cssClass,
         };
     };
     /**

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

@@ -36,6 +36,8 @@ export declare class ColorPickerInput {
      */
     destroyColorPicker(): void;
     private setRtl;
+    private setCssClass;
+    private updateCss;
     protected addEventListener(): void;
     private onPropertyChanged;
     protected removeEventListener(): void;

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

@@ -1,4 +1,4 @@
-import { select, detach, extend } from '@syncfusion/ej2-base';
+import { select, detach, extend, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { RenderType } from '../base/enum';
 import * as events from '../base/constant';
 import * as classes from '../base/classes';
@@ -83,6 +83,9 @@ var ColorPickerInput = /** @class */ (function () {
                 }
             }
         });
+        if (this.parent.inlineMode.enable) {
+            this.setCssClass({ cssClass: this.parent.cssClass });
+        }
     };
     ColorPickerInput.prototype.destroy = function () {
         this.removeEventListener();
@@ -128,12 +131,29 @@ var ColorPickerInput = /** @class */ (function () {
             this.backgroundColorDropDown.setProperties({ enableRtl: args.enableRtl });
         }
     };
+    ColorPickerInput.prototype.setCssClass = function (e) {
+        this.updateCss(this.fontColorPicker, this.fontColorDropDown, e);
+        this.updateCss(this.backgroundColorPicker, this.backgroundColorDropDown, e);
+    };
+    ColorPickerInput.prototype.updateCss = function (colorPickerObj, dropDownObj, e) {
+        if (colorPickerObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass + ' ' + e.cssClass).trim() });
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                colorPickerObj.setProperties({ cssClass: (colorPickerObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
     ColorPickerInput.prototype.addEventListener = function () {
         this.parent.on(events.toolbarRenderComplete, this.renderColorPickerInput, this);
         this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.destroy, this.destroy, this);
         this.parent.on(events.destroyColorPicker, this.destroyColorPicker, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     ColorPickerInput.prototype.onPropertyChanged = function (model) {
         var newProp = model.newProp;
@@ -206,6 +226,7 @@ var ColorPickerInput = /** @class */ (function () {
         this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.destroyColorPicker, this.destroyColorPicker);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
+        this.parent.off(events.bindCssClass, this.setCssClass);
     };
     return ColorPickerInput;
 }());

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

@@ -54,6 +54,8 @@ export declare class DropDownButtons {
      */
     destroyDropDowns(): void;
     private setRtl;
+    private updateCss;
+    private setCssClass;
     protected addEventListener(): void;
     private onIframeMouseDown;
     protected removeEventListener(): void;

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

@@ -187,6 +187,9 @@ var DropDownButtons = /** @class */ (function () {
                 }
             }
         });
+        if (this.parent.inlineMode.enable) {
+            this.setCssClass({ cssClass: this.parent.cssClass });
+        }
     };
     DropDownButtons.prototype.getUpdateItems = function (items, value) {
         var dropDownItems = items.slice();
@@ -474,6 +477,26 @@ var DropDownButtons = /** @class */ (function () {
             this.bulletFormatListDropDown.setProperties({ enableRtl: args.enableRtl });
         }
     };
+    DropDownButtons.prototype.updateCss = function (dropDownObj, e) {
+        if (dropDownObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                dropDownObj.setProperties({ cssClass: (dropDownObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
+    };
+    DropDownButtons.prototype.setCssClass = function (e) {
+        var dropDownObj = [
+            this.formatDropDown, this.fontNameDropDown, this.fontSizeDropDown, this.alignDropDown, this.imageAlignDropDown,
+            this.displayDropDown, this.numberFormatListDropDown, this.bulletFormatListDropDown, this.tableRowsDropDown,
+            this.tableColumnsDropDown, this.tableCellVerticalAlignDropDown
+        ];
+        for (var i = 0; i < dropDownObj.length; i++) {
+            this.updateCss(dropDownObj[i], e);
+        }
+    };
     DropDownButtons.prototype.addEventListener = function () {
         if (this.parent.isDestroyed) {
             return;
@@ -483,6 +506,7 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.destroy, this.removeEventListener, this);
         this.parent.on(events.modelChanged, this.onPropertyChanged, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
     };
     DropDownButtons.prototype.onIframeMouseDown = function () {
         dispatchEvent(document, 'mousedown');
@@ -496,6 +520,7 @@ var DropDownButtons = /** @class */ (function () {
         this.parent.off(events.beforeDropDownItemRender, this.beforeRender);
         this.parent.off(events.destroy, this.removeEventListener);
         this.parent.off(events.modelChanged, this.onPropertyChanged);
+        this.parent.off(events.bindCssClass, this.setCssClass);
     };
     return DropDownButtons;
 }());

package/src/rich-text-editor/actions/file-manager.d.ts

@@ -18,6 +18,7 @@ export declare class FileManager {
     private constructor();
     private initialize;
     private render;
+    private setCssClass;
     private renderFileManager;
     private getInputUrlElement;
     private insertImageUrl;

package/src/rich-text-editor/actions/file-manager.js

@@ -1,4 +1,4 @@
-import { Browser, detach, closest, isNullOrUndefined as isNOU, EventHandler } from '@syncfusion/ej2-base';
+import { Browser, detach, closest, isNullOrUndefined as isNOU, EventHandler, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { ContextMenu, DetailsView, FileManager as EJ2FileManager } from '@syncfusion/ej2-filemanager';
 import { NavigationPane, Toolbar } from '@syncfusion/ej2-filemanager';
 import { RenderType } from '../base/enum';
@@ -78,6 +78,17 @@ var FileManager = /** @class */ (function () {
         this.dialogObj.createElement = this.parent.createElement;
         this.dialogObj.appendTo(dlgTarget);
         this.dialogObj.show(Browser.isDevice ? true : false);
+        this.setCssClass({ cssClass: this.parent.cssClass });
+    };
+    FileManager.prototype.setCssClass = function (e) {
+        if (this.dialogObj && e.cssClass) {
+            if (isNullOrUndefined(e.oldCssClass)) {
+                this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass + ' ' + e.cssClass).trim() });
+            }
+            else {
+                this.dialogObj.setProperties({ cssClass: (this.dialogObj.cssClass.replace(e.oldCssClass, '').trim() + ' ' + e.cssClass).trim() });
+            }
+        }
     };
     FileManager.prototype.renderFileManager = function () {
         var _this = this;
@@ -202,12 +213,14 @@ var FileManager = /** @class */ (function () {
     FileManager.prototype.addEventListener = function () {
         this.parent.on(events.initialEnd, this.initialize, this);
         this.parent.on(events.renderFileManager, this.render, this);
+        this.parent.on(events.bindCssClass, this.setCssClass, this);
         this.parent.on(events.destroy, this.destroy, this);
     };
     FileManager.prototype.removeEventListener = function () {
         EventHandler.remove(this.parent.element.ownerDocument, 'mousedown', this.onDocumentClick);
         this.parent.off(events.initialEnd, this.initialize);
         this.parent.off(events.renderFileManager, this.render);
+        this.parent.off(events.bindCssClass, this.setCssClass);
         this.parent.off(events.destroy, this.destroy);
     };
     FileManager.prototype.destroyComponents = function () {

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

@@ -153,7 +153,17 @@ var HtmlEditor = /** @class */ (function () {
             e.args.keyCode === 13) {
             this.spaceLink(e.args);
             if (this.parent.editorMode === 'HTML' && !this.parent.readonly) {
-                this.parent.notify(events.enterHandler, { args: e.args });
+                var currentLength = this.parent.getText().trim().length;
+                var selectionLength = this.parent.getSelection().length;
+                var totalLength = (currentLength - selectionLength) + 1;
+                if (!(this.parent.maxLength === -1 || totalLength <= this.parent.maxLength) &&
+                    e.args.keyCode === 13) {
+                    e.args.preventDefault();
+                    return;
+                }
+                else {
+                    this.parent.notify(events.enterHandler, { args: e.args });
+                }
             }
         }
         if (e.args.action === 'space') {

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

@@ -14,6 +14,10 @@ export declare class PasteCleanup {
     private dialogRenderObj;
     private popupObj;
     private uploadObj;
+    private dialogObj;
+    private keepRadioButton;
+    private cleanRadioButton;
+    private plainTextRadioButton;
     private inlineNode;
     private blockNode;
     private isNotFromHtml;
@@ -46,6 +50,8 @@ export declare class PasteCleanup {
     private radioRender;
     private selectFormatting;
     private pasteDialog;
+    private updateCss;
+    private setCssClass;
     private destroyDialog;
     private cleanAppleClass;
     private formatting;