@syncfusion/ej2-richtexteditor - npm Package Compare versions

Comparing version 17.1.43 to 17.1.47

CHANGELOG.md

@@ -5,2 +5,10 @@ # Changelog
 
+## 17.1.43 (2019-04-30)
+
+### RichTextEditor
+
+#### Bug Fixes
+
+- #234280 - RichTextEditor's toolbar is broken when using ES2015 target that issue has been resolved.
+
 ## 17.1.42 (2019-04-23)
@@ -7,0 +15,0 @@

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 17.1.43
+*  version : 17.1.47
 *  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.43",
+  "version": "17.1.47",
   "description": "Essential JS 2 RichTextEditor component",
@@ -11,6 +11,6 @@ "author": "Syncfusion Inc.",
   "dependencies": {
-    "@syncfusion/ej2-base": "~17.1.43",
-    "@syncfusion/ej2-navigations": "~17.1.43",
-    "@syncfusion/ej2-popups": "~17.1.42",
-    "@syncfusion/ej2-splitbuttons": "~17.1.42"
+    "@syncfusion/ej2-base": "~17.1.47",
+    "@syncfusion/ej2-navigations": "~17.1.47",
+    "@syncfusion/ej2-popups": "~17.1.47",
+    "@syncfusion/ej2-splitbuttons": "~17.1.47"
   },
@@ -17,0 +17,0 @@ "devDependencies": {},

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

@@ -52,3 +52,3 @@ import { Observer } from '@syncfusion/ej2-base';
     private editorKeyUp;
-    execCommand<T>(command: ExecCommand, value: T, event?: Event, callBack?: Function, text?: string | Node, exeValue?: T): void;
+    execCommand<T>(command: ExecCommand, value: T, event?: Event, callBack?: Function, text?: string | Node, exeValue?: T, selector?: string): void;
 }

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

@@ -68,15 +68,15 @@ import { Observer } from '@syncfusion/ej2-base';
     };
-    EditorManager.prototype.execCommand = function (command, value, event, callBack, text, exeValue) {
+    EditorManager.prototype.execCommand = function (command, value, event, callBack, text, exeValue, selector) {
         switch (command.toLocaleLowerCase()) {
             case 'lists':
-                this.observer.notify(EVENTS.LIST_TYPE, { subCommand: value, event: event, callBack: callBack });
+                this.observer.notify(EVENTS.LIST_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
                 break;
             case 'formats':
-                this.observer.notify(EVENTS.FORMAT_TYPE, { subCommand: value, event: event, callBack: callBack });
+                this.observer.notify(EVENTS.FORMAT_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
                 break;
             case 'alignments':
-                this.observer.notify(CONSTANT.ALIGNMENT_TYPE, { subCommand: value, event: event, callBack: callBack });
+                this.observer.notify(CONSTANT.ALIGNMENT_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
                 break;
             case 'indents':
-                this.observer.notify(CONSTANT.INDENT_TYPE, { subCommand: value, event: event, callBack: callBack });
+                this.observer.notify(CONSTANT.INDENT_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
                 break;
@@ -125,3 +125,3 @@ case 'links':
             case 'casing':
-                this.observer.notify(CONSTANT.SELECTION_TYPE, { subCommand: value, event: event, callBack: callBack, value: text });
+                this.observer.notify(CONSTANT.SELECTION_TYPE, { subCommand: value, event: event, callBack: callBack, value: text, selector: selector });
                 break;
@@ -135,6 +135,6 @@ case 'inserthtml':
             case 'clear':
-                this.observer.notify(CONSTANT.CLEAR_TYPE, { subCommand: value, event: event, callBack: callBack });
+                this.observer.notify(CONSTANT.CLEAR_TYPE, { subCommand: value, event: event, callBack: callBack, selector: selector });
                 break;
             case 'actions':
-                this.observer.notify(EVENTS.ACTION, { subCommand: value, event: event, callBack: callBack });
+                this.observer.notify(EVENTS.ACTION, { subCommand: value, event: event, callBack: callBack, selector: selector });
                 break;
@@ -141,0 +141,0 @@ }

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

@@ -42,2 +42,6 @@ import { NodeSelection } from './../../selection/index';
     event?: MouseEvent;
+    /**
+     * Specifies the iframe element selector.
+     */
+    selector?: string;
 }
@@ -44,0 +48,0 @@ /**

src/editor-manager/plugin/alignments.js

 import * as CONSTANT from './../base/constant';
 import { setStyleAttribute } from '@syncfusion/ej2-base';
 import * as EVENTS from './../../common/constant';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 /**
@@ -58,2 +59,5 @@ * Formats internal component
         save = this.parent.domNode.saveMarker(save);
+        if (isIDevice()) {
+            setEditFrameFocus(this.parent.editableElement, e.selector);
+        }
         save.restore();
@@ -60,0 +64,0 @@ if (e.callBack) {

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

@@ -31,3 +31,3 @@ import * as CONSTANT from './../base/constant';
         if (e.subCommand === 'ClearFormat') {
-            ClearFormat.clear(this.parent.currentDocument, this.parent.editableElement);
+            ClearFormat.clear(this.parent.currentDocument, this.parent.editableElement, e.selector);
             if (e.callBack) {
@@ -34,0 +34,0 @@ e.callBack({

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

@@ -5,3 +5,3 @@ export declare class ClearFormat {
     private static NONVALID_TAGS;
-    static clear(docElement: Document, endNode: Node): void;
+    static clear(docElement: Document, endNode: Node, selector?: string): void;
     private static reSelection;
@@ -8,0 +8,0 @@ private static clearBlocks;

src/editor-manager/plugin/clearformat.js

@@ -8,6 +8,7 @@ /**
 import { IsFormatted } from './isformatted';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 var ClearFormat = /** @class */ (function () {
     function ClearFormat() {
     }
-    ClearFormat.clear = function (docElement, endNode) {
+    ClearFormat.clear = function (docElement, endNode, selector) {
         var nodeSelection = new NodeSelection();
@@ -39,2 +40,5 @@ var nodeCutter = new NodeCutter();
             this.clearBlocks(docElement, cloneParentNodes, endNode, nodeCutter, nodeSelection);
+            if (isIDevice()) {
+                setEditFrameFocus(endNode, selector);
+            }
             this.reSelection(docElement, save, exactNodes);
@@ -41,0 +45,0 @@ }

src/editor-manager/plugin/formats.js

 import * as EVENTS from './../../common/constant';
 import { isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 /**
@@ -52,2 +53,5 @@ * Formats internal component
         save = this.parent.domNode.saveMarker(save);
+        if (isIDevice()) {
+            setEditFrameFocus(this.parent.editableElement, e.selector);
+        }
         save.restore();
@@ -54,0 +58,0 @@ if (e.callBack) {

src/editor-manager/plugin/indents.js

 import * as CONSTANT from './../base/constant';
 import * as EVENTS from './../../common/constant';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 /**
@@ -76,2 +77,5 @@ * Indents internal component
         this.parent.editableElement.focus();
+        if (isIDevice()) {
+            setEditFrameFocus(this.parent.editableElement, e.selector);
+        }
         save = this.parent.domNode.saveMarker(save);
@@ -78,0 +82,0 @@ save.restore();

src/editor-manager/plugin/lists.js

@@ -6,2 +6,3 @@ import * as CONSTANT from './../base/constant';
 import { setStyleAttribute } from '@syncfusion/ej2-base';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 /**
@@ -236,3 +237,3 @@ * Lists internal component
         }
-        this.applyLists(listsNodes, this.currentAction);
+        this.applyLists(listsNodes, this.currentAction, e.selector);
         if (e.callBack) {
@@ -248,3 +249,3 @@ e.callBack({
     };
-    Lists.prototype.applyLists = function (elements, type) {
+    Lists.prototype.applyLists = function (elements, type, selector) {
         var isReverse = true;
@@ -274,2 +275,5 @@ if (this.isRevert(elements, type)) {
         this.parent.editableElement.focus();
+        if (isIDevice()) {
+            setEditFrameFocus(this.parent.editableElement, selector);
+        }
         this.saveSelection = this.domNode.saveMarker(this.saveSelection);
@@ -276,0 +280,0 @@ this.saveSelection.restore();

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

 export declare class SelectionCommands {
-    static applyFormat(docElement: Document, format: string, endNode: Node, value?: string): void;
+    static applyFormat(docElement: Document, format: string, endNode: Node, value?: string, selector?: string): void;
     private static insertCursorNode;
@@ -4,0 +4,0 @@ private static removeFormat;

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

@@ -8,6 +8,7 @@ /**
 import { IsFormatted } from './isformatted';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 var SelectionCommands = /** @class */ (function () {
     function SelectionCommands() {
     }
-    SelectionCommands.applyFormat = function (docElement, format, endNode, value) {
+    SelectionCommands.applyFormat = function (docElement, format, endNode, value, selector) {
         var validFormats = ['bold', 'italic', 'underline', 'strikethrough', 'superscript',
@@ -51,2 +52,5 @@ 'subscript', 'uppercase', 'lowercase', 'fontcolor', 'fontname', 'fontsize', 'backgroundcolor'];
             }
+            if (isIDevice()) {
+                setEditFrameFocus(endNode, selector);
+            }
             save.restore();
@@ -53,0 +57,0 @@ }

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

@@ -31,3 +31,3 @@ import * as CONSTANT from './../base/constant';
     SelectionBasedExec.prototype.applySelection = function (e) {
-        SelectionCommands.applyFormat(this.parent.currentDocument, e.subCommand.toLocaleLowerCase(), this.parent.editableElement, e.value);
+        SelectionCommands.applyFormat(this.parent.currentDocument, e.subCommand.toLocaleLowerCase(), this.parent.editableElement, e.value, e.selector);
         this.callBack(e, e.subCommand);
@@ -34,0 +34,0 @@ };

src/editor-manager/plugin/undo.js

 import { debounce, isNullOrUndefined } from '@syncfusion/ej2-base';
 import { NodeSelection } from './../../selection/selection';
 import * as EVENTS from './../../common/constant';
+import { isIDevice, setEditFrameFocus } from '../../common/util';
 /**
@@ -116,2 +117,5 @@ * `Undo` module is used to handle undo actions.
             this.parent.editableElement.focus();
+            if (isIDevice()) {
+                setEditFrameFocus(this.parent.editableElement, e.selector);
+            }
             range.restore();
@@ -140,2 +144,5 @@ this.steps--;
             this.parent.editableElement.focus();
+            if (isIDevice()) {
+                setEditFrameFocus(this.parent.editableElement, e.selector);
+            }
             range.restore();
@@ -142,0 +149,0 @@ this.steps++;

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

@@ -7,3 +7,3 @@ import { detach, getUniqueID, append, closest, selectAll, select, isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 import { RenderType } from '../base/enum';
-import { setToolbarStatus, updateUndoRedoStatus } from '../base/util';
+import { setToolbarStatus, updateUndoRedoStatus, isIDevice } from '../base/util';
 import { BaseToolbar } from './base-toolbar';
@@ -175,3 +175,3 @@ import { DropDownButtons } from './dropdown-buttons';
         addClass([this.element], [classes.CLS_HIDE]);
-        if (Browser.isDevice) {
+        if (Browser.isDevice && !isIDevice()) {
             addClass([this.parent.getToolbar()], [classes.CLS_HIDE]);
@@ -242,3 +242,3 @@ }
         var viewSourcePanel = this.parent.sourceCodeModule.getViewPanel();
-        if (Browser.isDevice) {
+        if (Browser.isDevice && !isIDevice()) {
             removeClass([this.parent.getToolbar()], [classes.CLS_HIDE]);
@@ -245,0 +245,0 @@ }

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

@@ -32,2 +32,4 @@ import { select, detach, extend } from '@syncfusion/ej2-base';
         var tbElement = args.container;
+        var targetID;
+        var options;
         templateItems.forEach(function (item) {
@@ -37,3 +39,3 @@ if (getIndex(item, args.items) !== -1) {
                     case 'fontcolor':
-                        var targetID = _this.parent.getID() + '_' + suffixID + '_FontColor_Target';
+                        targetID = _this.parent.getID() + '_' + suffixID + '_FontColor_Target';
                         var fontNode = _this.parent.createElement('input');
@@ -43,3 +45,3 @@ fontNode.id = targetID;
                         document.body.appendChild(fontNode);
-                        var args_1 = {
+                        options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
@@ -53,4 +55,4 @@ + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,
                         };
-                        _this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(args_1, 'fontcolor');
-                        _this.fontColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(args_1, 'fontcolor', _this.fontColorPicker);
+                        _this.fontColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'fontcolor');
+                        _this.fontColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'fontcolor', _this.fontColorPicker);
                         break;
@@ -63,3 +65,3 @@ case 'backgroundcolor':
                         document.body.appendChild(backNode);
-                        args_1 = {
+                        options = {
                             cssClass: _this.tools[item.toLocaleLowerCase()].icon
@@ -73,4 +75,4 @@ + ' ' + classes.CLS_RTE_ELEMENTS + ' ' + classes.CLS_ICONS,
                         };
-                        _this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(args_1, 'backgroundcolor');
-                        _this.backgroundColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(args_1, 'backgroundcolor', _this.backgroundColorPicker);
+                        _this.backgroundColorPicker = _this.toolbarRenderer.renderColorPicker(options, 'backgroundcolor');
+                        _this.backgroundColorDropDown = _this.toolbarRenderer.renderColorPickerDropDown(options, 'backgroundcolor', _this.backgroundColorPicker);
                         break;
@@ -126,2 +128,3 @@ }
         var newProp = model.newProp;
+        var element;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -137,3 +140,3 @@ var prop = _a[_i];
                                     this.fontColorPicker.setProperties({ value: newProp.fontColor.default });
-                                    var element = this.fontColorDropDown.element;
+                                    element = this.fontColorDropDown.element;
                                     var fontBorder = element.querySelector('.' + this.tools['fontcolor'].icon);
@@ -165,3 +168,3 @@ fontBorder.style.borderBottomColor = newProp.fontColor.default;
                                     this.backgroundColorPicker.setProperties({ value: newProp.backgroundColor.default });
-                                    var element = this.backgroundColorDropDown.element;
+                                    element = this.backgroundColorDropDown.element;
                                     var backgroundBorder = element.querySelector('.' + this.tools['backgroundcolor'].icon);
@@ -168,0 +171,0 @@ backgroundBorder.style.borderBottomColor = newProp.backgroundColor.default;

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

@@ -155,2 +155,4 @@ import { addClass, isNullOrUndefined, removeClass, select, closest } from '@syncfusion/ej2-base';
         var newProp = model.newProp;
+        var type;
+        var content;
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
@@ -167,8 +169,7 @@ var prop = _a[_i];
                                     var fontItems = this.fontNameDropDown.items;
-                                    var type = !isNullOrUndefined(closest(this.fontNameDropDown.element, '.' + classes.CLS_QUICK_TB)) ?
+                                    type = !isNullOrUndefined(closest(this.fontNameDropDown.element, '.' + classes.CLS_QUICK_TB)) ?
                                         '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, fontNameContent, 'text', 'text')));
+                                    content = this.dropdownContent(this.parent.fontFamily.width, type, ((type === 'quick') ? '' : getDropDownValue(fontItems, fontNameContent, 'text', 'text')));
                                     this.fontNameDropDown.setProperties({ content: content });
@@ -199,6 +200,6 @@ if (!isNullOrUndefined(this.parent.fontFamily.default)) {
                                     var fontsize = this.fontSizeDropDown.items;
-                                    var type = !isNullOrUndefined(closest(this.fontSizeDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
+                                    type = !isNullOrUndefined(closest(this.fontSizeDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
                                     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')));
+                                    content = this.dropdownContent(this.parent.fontSize.width, type, getFormattedFontSize(getDropDownValue(fontsize, fontSizeContent.replace(/\s/g, ''), 'value', 'text')));
                                     this.fontSizeDropDown.setProperties({ content: content });
@@ -229,7 +230,6 @@ if (!isNullOrUndefined(this.parent.fontSize.default)) {
                                     var formatItems = this.formatDropDown.items;
-                                    var type = !isNullOrUndefined(closest(this.formatDropDown.element, '.' + classes.CLS_QUICK_TB)) ? 'quick' : 'toolbar';
+                                    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, formatContent, 'text', 'text')));
+                                    content = this.dropdownContent(this.parent.format.width, type, ((type === 'quick') ? '' : getDropDownValue(formatItems, formatContent, 'text', 'text')));
                                     this.formatDropDown.setProperties({ content: content });
@@ -236,0 +236,0 @@ break;

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

@@ -13,2 +13,3 @@ import * as events from '../base/constant';
 import { getTextNodesUnder } from '../base/util';
+import { isIDevice } from '../../common/util';
 /**
@@ -72,3 +73,3 @@ * `HtmlEditor` module is used to HTML editor
         this.contentRenderer.getEditPanel().focus();
-        if (isNullOrUndefined(e.items) || (e.items && e.items[0].command !== 'Table')) {
+        if (isNullOrUndefined(e.items) || e.items) {
             this.saveSelection.restore();
@@ -181,2 +182,5 @@ }
                 item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {
+                if (isIDevice() && item.command === 'Images') {
+                    this.nodeSelectionObj.restore();
+                }
                 var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());
@@ -183,0 +187,0 @@ save = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());

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

@@ -41,2 +41,4 @@ import { RenderType } from '../base/enum';
     getInlineBaseToolbar(): BaseToolbar;
+    private selectionChangeHandler;
+    private onSelectionChange;
     /**
@@ -43,0 +45,0 @@ * Destroys the ToolBar.

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

 import { select, isNullOrUndefined, Browser, addClass, removeClass, EventHandler, closest } from '@syncfusion/ej2-base';
 import { RenderType } from '../base/enum';
 import * as events from '../base/constant';
-import { pageYOffset, hasClass } from '../base/util';
+import { pageYOffset, hasClass, isIDevice } from '../base/util';
 import { BaseQuickToolbar } from './base-quick-toolbar';
@@ -63,2 +63,5 @@ import { PopupRenderer } from '../renderer/popup-renderer';
         this.contentRenderer = this.renderFactory.getRenderer(RenderType.Content);
+        if (this.parent.inlineMode.enable && this.parent.inlineMode.onSelection && isIDevice()) {
+            EventHandler.add(this.contentRenderer.getDocument(), 'selectionchange', this.selectionChangeHandler, this);
+        }
     };
@@ -95,3 +98,3 @@ QuickToolbar.prototype.onMouseDown = function (e) {
     QuickToolbar.prototype.renderInlineQuickToolbar = function () {
-        if (this.parent.inlineMode.enable && !Browser.isDevice) {
+        if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
             addClass([this.parent.element], [CLS_INLINE]);
@@ -124,3 +127,3 @@ this.inlineQTBar = this.createQTBar('Inline', 'MultiRow', this.parent.toolbarSettings.items, RenderType.InlineToolbar);
         }
-        if (this.parent.inlineMode.enable && !Browser.isDevice) {
+        if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
             this.hideInlineQTBar();
@@ -135,10 +138,15 @@ }
     QuickToolbar.prototype.mouseUpHandler = function (e) {
-        if (this.parent.inlineMode.enable && !Browser.isDevice) {
-            var args = e.args;
+        if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
+            var coordinates = void 0;
+            coordinates = e.args.touches ? e.args.changedTouches[0] : e.args;
             var range = this.parent.getRange();
-            var target = args.target;
+            var target = e.args.target;
             if (isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {
+                if (isIDevice() && e.touchData && e.touchData.prevClientX !== e.touchData.clientX
+                    && e.touchData.prevClientY !== e.touchData.clientY) {
+                    return;
+                }
                 this.hideInlineQTBar();
-                this.offsetX = args.pageX;
-                this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
+                this.offsetX = coordinates.pageX;
+                this.offsetY = pageYOffset(coordinates, this.parent.element, this.parent.iframeSettings.enable);
                 if (target.nodeName === 'TEXTAREA') {
@@ -162,3 +170,4 @@ this.showInlineQTBar(this.offsetX, this.offsetY, target);
     QuickToolbar.prototype.keyDownHandler = function () {
-        if ((this.parent.inlineMode.enable && !Browser.isDevice) && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+        if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
+            && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
@@ -168,3 +177,4 @@ }
     QuickToolbar.prototype.inlineQTBarMouseDownHandler = function () {
-        if ((this.parent.inlineMode.enable && !Browser.isDevice) && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
+        if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
+            && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
@@ -185,2 +195,16 @@ }
     };
+    QuickToolbar.prototype.selectionChangeHandler = function (e) {
+        var _this = this;
+        clearTimeout(this.deBouncer);
+        this.deBouncer = window.setTimeout(function () { _this.onSelectionChange(e); }, 1000);
+    };
+    QuickToolbar.prototype.onSelectionChange = function (e) {
+        if (!isNullOrUndefined(select('.' + CLS_INLINE_POP, document.body))) {
+            return;
+        }
+        var selection = this.contentRenderer.getDocument().getSelection();
+        if (!selection.isCollapsed) {
+            this.mouseUpHandler({ args: e });
+        }
+    };
     /**
@@ -210,2 +234,5 @@ * Destroys the ToolBar.
             EventHandler.remove(this.inlineQTBar.element, 'mousedown', this.onMouseDown);
+            if (isIDevice()) {
+                EventHandler.remove(document, 'selectionchange', this.selectionChangeHandler);
+            }
             this.inlineQTBar.destroy();
@@ -329,3 +356,3 @@ }
         }
-        if (this.parent.inlineMode.enable && !Browser.isDevice) {
+        if (this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
             addClass([this.parent.element], [CLS_INLINE]);
@@ -332,0 +359,0 @@ this.wireInlineQTBarEvents();

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

@@ -7,3 +7,3 @@ import { addClass, Browser, EventHandler, detach, removeClass, select, selectAll, KeyboardEvents } from '@syncfusion/ej2-base';
 import { RenderType, ToolbarType } from '../base/enum';
-import { setToolbarStatus, updateUndoRedoStatus, getTBarItemsIndex, getCollection, toObjectLowerCase } from '../base/util';
+import { setToolbarStatus, updateUndoRedoStatus, getTBarItemsIndex, getCollection, toObjectLowerCase, isIDevice } from '../base/util';
 import * as model from '../models/items';
@@ -57,3 +57,3 @@ import { ToolbarRenderer } from '../renderer/toolbar-renderer';
         this.tbElement = this.parent.createElement('div', { id: this.parent.getID() + '_toolbar' });
-        if (!Browser.isDevice && this.parent.inlineMode.enable) {
+        if (!Browser.isDevice && this.parent.inlineMode.enable && isIDevice()) {
             return;
@@ -88,3 +88,3 @@ }
     Toolbar.prototype.checkToolbarResponsive = function (ele) {
-        if (!Browser.isDevice) {
+        if (!Browser.isDevice || isIDevice()) {
             return false;
@@ -220,3 +220,3 @@ }
         this.wireEvents();
-        if (this.parent.inlineMode.enable) {
+        if (this.parent.inlineMode.enable && !isIDevice()) {
             this.addFixedTBarClass();
@@ -270,17 +270,13 @@ }
     Toolbar.prototype.updateToolbarStatus = function (args) {
-        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);
-            }
+        if (!this.tbElement || (this.parent.inlineMode.enable && (isIDevice() || !Browser.isDevice))) {
+            return;
         }
+        var options = {
+            args: args,
+            dropDownModule: this.dropDownModule,
+            parent: this.parent,
+            tbElements: selectAll('.' + classes.CLS_TB_ITEM, this.tbElement),
+            tbItems: this.baseToolbar.toolbarObj.items
+        };
+        setToolbarStatus(options, (this.parent.inlineMode.enable ? true : false));
     };
@@ -391,3 +387,3 @@ Toolbar.prototype.fullScreen = function (e) {
     Toolbar.prototype.mouseDownHandler = function () {
-        if (Browser.isDevice && this.parent.inlineMode.enable) {
+        if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {
             this.showFixedTBar();
@@ -397,3 +393,3 @@ }
     Toolbar.prototype.focusChangeHandler = function () {
-        if (Browser.isDevice && this.parent.inlineMode.enable) {
+        if (Browser.isDevice && this.parent.inlineMode.enable && !isIDevice()) {
             this.isToolbar = false;
@@ -426,2 +422,5 @@ this.hideFixedTBar();
     Toolbar.prototype.wireEvents = function () {
+        if (this.parent.inlineMode.enable && isIDevice()) {
+            return;
+        }
         EventHandler.add(this.tbElement, 'click mousedown', this.toolbarMouseDownHandler, this);
@@ -428,0 +427,0 @@ };

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

@@ -72,2 +72,3 @@ import { Component, Observer, L10n, KeyboardEventArgs } from '@syncfusion/ej2-base';
     editorMode?: EditorMode;
+    enableHtmlEncode?: boolean;
     formatter?: IFormatter;
@@ -146,3 +147,3 @@ inputElement?: HTMLElement;
     module?: string;
-    args?: KeyboardEvent | MouseEvent | ClickEventArgs | ClipboardEvent;
+    args?: KeyboardEvent | MouseEvent | ClickEventArgs | ClipboardEvent | TouchEvent;
     cancel?: boolean;
@@ -168,3 +169,10 @@ requestType?: Action;
     insertElement?: Element;
+    touchData?: ITouchData;
 }
+export interface ITouchData {
+    prevClientX?: number;
+    prevClientY?: number;
+    clientX?: number;
+    clientY?: number;
+}
 export interface IColorPickerModel extends ColorPickerModel {
@@ -197,3 +205,3 @@ element?: HTMLElement;
     module?: string;
-    args?: KeyboardEvent | MouseEvent | ClickEventArgs | IToolbarItemModel | ClipboardEvent;
+    args?: KeyboardEvent | MouseEvent | ClickEventArgs | IToolbarItemModel | ClipboardEvent | TouchEvent;
     cancel?: boolean;
@@ -200,0 +208,0 @@ requestType?: Action;

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, isNullOrUndefined } 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 { 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, getEditValue, isIDevice, decode } from '../base/util';
 import {ChangeEventArgs} from "./rich-text-editor";
@@ -3,0 +3,0 @@ import {ComponentModel} from '@syncfusion/ej2-base';

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

@@ -588,3 +588,2 @@ import { Component, ModuleDeclaration, EmitType } from '@syncfusion/ej2-base';
     private encode;
-    private decode;
     /**
@@ -591,0 +590,0 @@ * For internal use only - To Initialize the component rendering.

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

@@ -23,3 +23,3 @@ var __extends = (this && this.__extends) || (function () {
 import { setStyleAttribute, Event, removeClass, print as printWindow, attributes } from '@syncfusion/ej2-base';
-import { isNullOrUndefined as isNOU, compile, append, extend, debounce, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';
 import { getScrollableParent } from '@syncfusion/ej2-popups';
@@ -45,3 +45,3 @@ import * as events from '../base/constant';
 import * as CONSTANT from '../../common/constant';
-import { dispatchEvent } from '../base/util';
+import { dispatchEvent, getEditValue, isIDevice, decode } from '../base/util';
 /**
@@ -256,8 +256,2 @@ * Represents the RichTextEditor component.
     };
-    RichTextEditor.prototype.decode = function (value) {
-        return value.replace(/&amp;/g, '&').replace(/&amp;lt;/g, '<')
-            .replace(/&lt;/g, '<').replace(/&amp;gt;/g, '>')
-            .replace(/&gt;/g, '>').replace(/&nbsp;/g, ' ')
-            .replace(/&amp;nbsp;/g, ' ').replace(/&quot;/g, '');
-    };
     /**
@@ -343,3 +337,2 @@ * For internal use only - To Initialize the component rendering.
     RichTextEditor.prototype.mouseUp = function (e) {
-        var touch = (e.touches ? e.changedTouches[0] : e);
         this.notify(events.mouseUp, { member: 'mouseUp', args: e });
@@ -350,5 +343,11 @@ if (this.inputElement && ((this.editorMode === 'HTML' && this.inputElement.textContent.length !== 0) ||
         }
-        if (this.clickPoints.clientX === touch.clientX && this.clickPoints.clientY === touch.clientY) {
+        if (!isIDevice()) {
             this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });
         }
+        else {
+            var touch = (e.touches ? e.changedTouches[0] : e);
+            if (this.clickPoints.clientX === touch.clientX && this.clickPoints.clientY === touch.clientY) {
+                this.notify(events.editAreaClick, { member: 'editAreaClick', args: e });
+            }
+        }
     };
@@ -444,3 +443,3 @@ /**
                 this.valueContainer.value = this.originalElement.innerHTML.trim();
-                this.setProperties({ value: (!isNullOrUndefined(this.initialValue) ? this.initialValue : null) }, true);
+                this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);
             }
@@ -455,3 +454,3 @@ else {
                 this.element.innerHTML = this.originalElement.innerHTML.trim();
-                this.setProperties({ value: (!isNullOrUndefined(this.initialValue) ? this.initialValue : null) }, true);
+                this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);
             }
@@ -536,3 +535,7 @@ else {
                 case 'value':
-                    this.value = (this.enableHtmlEncode) ? this.encode(this.decode(newProp[prop])) : newProp[prop];
+                    var nVal = newProp[prop];
+                    var val = this.editorMode === 'HTML' ? getEditValue(nVal, this) : nVal;
+                    if (!isNOU(nVal) && nVal !== '') {
+                        this.value = (this.enableHtmlEncode) ? this.encode(decode(val)) : val;
+                    }
                     this.updatePanelValue();
@@ -641,3 +644,3 @@ this.setPlaceHolder();
         if (this.enableHtmlEncode) {
-            this.setProperties({ value: this.encode(this.decode(this.inputElement.innerHTML)) });
+            this.setProperties({ value: this.encode(decode(this.inputElement.innerHTML)) });
         }
@@ -647,3 +650,3 @@ else {
                 value: /<[a-z][\s\S]*>/i.test(this.inputElement.innerHTML) ? this.inputElement.innerHTML :
-                    this.decode(this.inputElement.innerHTML)
+                    decode(this.inputElement.innerHTML)
             });
@@ -666,3 +669,3 @@ }
         }
-        value = (this.enableHtmlEncode && this.value) ? this.decode(value) : value;
+        value = (this.enableHtmlEncode && this.value) ? decode(value) : value;
         if (value) {
@@ -861,3 +864,3 @@ if (this.valueContainer) {
         if (this.enableHtmlEncode && !isNOU(this.value)) {
-            this.setProperties({ value: this.encode(this.decode(this.value)) });
+            this.setProperties({ value: this.encode(decode(this.value)) });
         }
@@ -935,3 +938,3 @@ };
             if (this.element.tagName === 'TEXTAREA') {
-                this.setProperties({ value: this.decode(this.element.innerHTML.trim()) });
+                this.setProperties({ value: decode(this.element.innerHTML.trim()) });
             }
@@ -1001,3 +1004,3 @@ else {
         var tbObj;
-        if (this.inlineMode.enable && !Browser.isDevice) {
+        if (this.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
             tbObj = this.quickToolbarModule && this.quickToolbarModule.getInlineBaseToolbar();
@@ -1073,3 +1076,3 @@ }
                 this.cloneValue = (this.inputElement.innerHTML === '<p><br></p>') ? null : this.enableHtmlEncode ?
-                    this.encode(this.decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
+                    this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
             }
@@ -1095,3 +1098,3 @@ else {
             value = (this.inputElement.innerHTML === '<p><br></p>') ? null : this.enableHtmlEncode ?
-                this.encode(this.decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
+                this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
         }
@@ -1098,0 +1101,0 @@ else {

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

@@ -1,2 +0,2 @@
-import { IToolsItemConfigs } from '../base/interface';
+import { IToolsItemConfigs, IRichTextEditor } from '../base/interface';
 import { IToolbarItems, IDropDownItemModel, ISetToolbarStatusArgs, IToolbarItemModel } from './interface';
@@ -10,3 +10,3 @@ import { BaseToolbar } from '../actions/base-toolbar';
 export declare function getFormattedFontSize(value: string): string;
-export declare function pageYOffset(e: MouseEvent, parentElement: HTMLElement, isIFrame: boolean): number;
+export declare function pageYOffset(e: MouseEvent | Touch, parentElement: HTMLElement, isIFrame: boolean): number;
 export declare function getTooltipText(item: string, serviceLocator: ServiceLocator): string;
@@ -30,1 +30,4 @@ export declare function setToolbarStatus(e: ISetToolbarStatusArgs, isPopToolbar: boolean): void;
 };
+export declare function getEditValue(value: string, rteObj: IRichTextEditor): string;
+export declare function updateTextNode(value: string): string;
+export declare function decode(value: string): string;

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

 /**
  * Exports util methods used by RichTextEditor.
  */
-import { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, addClass, removeClass, selectAll, createElement, Browser } from '@syncfusion/ej2-base';
 import * as classes from '../base/classes';
@@ -61,8 +61,4 @@ import * as model from '../models/items';
     var result = false;
-    var iosDevices = ['iphone', 'ipad', 'ipod'];
-    for (var i = 0; i < iosDevices.length; i++) {
-        if (navigator.platform.toLocaleLowerCase().indexOf(iosDevices[i]) > -1) {
-            result = true;
-            break;
-        }
+    if (Browser.isDevice && Browser.isIos) {
+        result = true;
     }
@@ -123,3 +119,3 @@ return result;
                             result = getDropDownValue(formatItems, value, 'subCommand', 'text');
-                            var formatContent = isNullOrUndefined(e.parent.format.default) ? formatItems[0].text :
+                            var formatContent = isNOU(e.parent.format.default) ? formatItems[0].text :
                                 e.parent.format.default;
@@ -150,3 +146,3 @@ dropDown.formatDropDown.content = ('<span style="display: inline-flex;' +
                             result = getDropDownValue(fontNameItems, value, 'value', 'text');
-                            var fontNameContent = isNullOrUndefined(e.parent.fontFamily.default) ? fontNameItems[0].text :
+                            var fontNameContent = isNOU(e.parent.fontFamily.default) ? fontNameItems[0].text :
                                 e.parent.fontFamily.default;
@@ -167,3 +163,3 @@ var name_1 = (isNOU(result) ? fontNameContent : result);
                             var fontSizeItems = e.parent.fontSize.items;
-                            var fontSizeContent = isNullOrUndefined(e.parent.fontSize.default) ? fontSizeItems[1].text :
+                            var fontSizeContent = isNOU(e.parent.fontSize.default) ? fontSizeItems[1].text :
                                 e.parent.fontSize.default;
@@ -268,1 +264,34 @@ result = getDropDownValue(fontSizeItems, (value === '' ? fontSizeContent.replace(/\s/g, '') : value), 'value', 'text');
 }
+export function getEditValue(value, rteObj) {
+    var val;
+    if (value !== null && value !== '') {
+        val = rteObj.enableHtmlEncode ? updateTextNode(decode(value)) : updateTextNode(value);
+        rteObj.setProperties({ value: val }, true);
+    }
+    else {
+        val = rteObj.enableHtmlEncode ? '&lt;p&gt;&lt;br/&gt;&lt;/p&gt;' : '<p><br/></p>';
+    }
+    return val;
+}
+export function updateTextNode(value) {
+    var tempNode = document.createElement('div');
+    tempNode.innerHTML = value;
+    var childNodes = tempNode.childNodes;
+    if (childNodes.length > 0) {
+        [].slice.call(childNodes).forEach(function (childNode) {
+            if (childNode.nodeType === Node.TEXT_NODE && childNode.parentNode === tempNode) {
+                var defaultTag = document.createElement('p');
+                var parentNode = childNode.parentNode;
+                parentNode.insertBefore(defaultTag, childNode);
+                defaultTag.appendChild(childNode);
+            }
+        });
+    }
+    return tempNode.innerHTML;
+}
+export function decode(value) {
+    return value.replace(/&amp;/g, '&').replace(/&amp;lt;/g, '<')
+        .replace(/&lt;/g, '<').replace(/&amp;gt;/g, '>')
+        .replace(/&gt;/g, '>').replace(/&nbsp;/g, ' ')
+        .replace(/&amp;nbsp;/g, ' ').replace(/&quot;/g, '');
+}

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

 import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
 import * as CONSTANT from '../base/constant';
-import { updateUndoRedoStatus } from '../base/util';
+import { updateUndoRedoStatus, isIDevice } from '../base/util';
 import { KEY_DOWN, KEY_UP } from './../../common/constant';
@@ -85,3 +85,3 @@ /**
                 this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: args.item.subCommand });
-                this.editorManager.execCommand(args.item.command, args.item.subCommand, event, this.onSuccess.bind(this, self), args.item.value, value);
+                this.editorManager.execCommand(args.item.command, args.item.subCommand, event, this.onSuccess.bind(this, self), args.item.value, value, ('#' + self.getID() + ' iframe'));
             }
@@ -139,3 +139,3 @@ }
         var status = this.getUndoStatus();
-        if (self.inlineMode.enable && !Browser.isDevice) {
+        if (self.inlineMode.enable && (!Browser.isDevice || isIDevice())) {
             updateUndoRedoStatus(self.quickToolbarModule.inlineQTBar.quickTBarObj, status);
@@ -142,0 +142,0 @@ }

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

@@ -173,3 +173,3 @@ import { Property, ChildProperty } from '@syncfusion/ej2-base';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs } from '../base/interface';import { TableStyleItems } from '../models/items';
     /**
-     * specifies the action that should happen when scroll the target-parent container.
+     * Specifies the action that should happen when scroll the target-parent container.
      * @default 'hide'
@@ -176,0 +176,0 @@ */

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

@@ -153,3 +153,3 @@ import { ChildProperty } from '@syncfusion/ej2-base';
     /**
-     * specifies the action that should happen when scroll the target-parent container.
+     * Specifies the action that should happen when scroll the target-parent container.
      * @default 'hide'
@@ -156,0 +156,0 @@ */

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

@@ -0,1 +1,2 @@
+import { getEditValue } from '../base/util';
 /**
@@ -19,3 +20,3 @@ * Content module is used to render RichTextEditor content
         var div = this.parent.createElement('div', { className: 'e-rte-content', id: this.parent.getID() + 'rte-view' });
-        var rteContent = (rteObj.value !== null && rteObj.value !== '') ? rteObj.value : '<p><br/></p>';
+        var rteContent = getEditValue(rteObj.value, rteObj);
         this.editableElement = this.parent.createElement('div', {
@@ -22,0 +23,0 @@ className: 'e-content',

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

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

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

@@ -1,2 +0,2 @@
-import { EventHandler, detach, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { EventHandler, detach, isNullOrUndefined, select } from '@syncfusion/ej2-base';
 import { closest, addClass, removeClass, Browser } from '@syncfusion/ej2-base';
@@ -9,2 +9,3 @@ import * as events from '../base/constant';
 import { dispatchEvent, parseHtml } from '../base/util';
+import { isIDevice } from '../../common/util';
 /**
@@ -79,3 +80,2 @@ * `Link` module is used to handle undo actions.
         var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
-        var args = e.args;
         var target;
@@ -96,2 +96,4 @@ [].forEach.call(e.elements, function (element, index) {
         else {
+            var args = void 0;
+            args = e.args.touches ? e.args.changedTouches[0] : args = e.args;
             pageX = args.pageX;
@@ -235,3 +237,3 @@ pageY = (this.parent.iframeSettings.enable) ? window.pageYOffset + parentTop + args.clientY : args.pageY;
                 },
-                { click: function (e) { _this.cancelDialog(e); }, buttonModel: { cssClass: 'e-flat', content: linkCancel } }],
+                { click: this.cancelDialog.bind(selectObj), buttonModel: { cssClass: 'e-flat', content: linkCancel } }],
             target: (Browser.isDevice) ? document.body : this.parent.element,
@@ -310,2 +312,8 @@ animationSettings: { effect: 'None' },
         };
+        if (document.body.contains(proxy.dialogObj.element)) {
+            this.selfLink.dialogObj.hide({ returnValue: false });
+        }
+        if (isIDevice() && proxy.parent.iframeSettings.enable) {
+            select('iframe', proxy.parent.element).contentWindow.focus();
+        }
         if (proxy.parent.editorMode === 'HTML') {
@@ -318,5 +326,2 @@ this.selection.restore();
         this.selfLink.parent.formatter.process(this.selfLink.parent, this.args, this.args.originalEvent, value);
-        if (document.body.contains(proxy.dialogObj.element)) {
-            this.selfLink.dialogObj.hide({ returnValue: false });
-        }
         this.selfLink.parent.contentModule.getEditPanel().focus();
@@ -348,3 +353,8 @@ };
         });
-        this.contentModule.getEditPanel().focus();
+        if (isIDevice() && this.parent.iframeSettings.enable) {
+            select('iframe', this.parent.element).contentWindow.focus();
+        }
+        else {
+            this.contentModule.getEditPanel().focus();
+        }
         this.hideLinkQuickToolbar();
@@ -379,5 +389,10 @@ };
     Link.prototype.cancelDialog = function (e) {
-        this.parent.isBlur = false;
-        this.dialogObj.hide({ returnValue: true });
-        this.parent.contentModule.getEditPanel().focus();
+        this.selfLink.parent.isBlur = false;
+        this.selfLink.dialogObj.hide({ returnValue: true });
+        if (isIDevice()) {
+            this.selection.restore();
+        }
+        else {
+            this.selfLink.parent.contentModule.getEditPanel().focus();
+        }
     };
@@ -384,0 +399,0 @@ Link.prototype.onDocumentClick = function (e) {

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

@@ -44,4 +44,4 @@ import { detach, closest, Browser } from '@syncfusion/ej2-base';
         this.parent.off(events.editAreaClick, this.editAreaClickHandler);
-        this.parent.on(events.tableToolbarAction, this.onToolbarAction, this);
-        this.parent.on(events.dropDownSelect, this.dropdownSelect, this);
+        this.parent.off(events.tableToolbarAction, this.onToolbarAction);
+        this.parent.off(events.dropDownSelect, this.dropdownSelect);
         this.parent.off(events.mouseDown, this.cellSelect);
@@ -186,3 +186,3 @@ this.parent.off(events.tableColorPickerChanged, this.setBGColor);
             (this.parent.element.classList.contains(classes.CLS_TB_ALT_BOR)) ?
-                this.parent.element.classList.remove(classes.CLS_TB_DASH_BOR) : this.parent.element.classList.add(classes.CLS_TB_ALT_BOR);
+                this.parent.element.classList.remove(classes.CLS_TB_ALT_BOR) : this.parent.element.classList.add(classes.CLS_TB_ALT_BOR);
             (table.classList.contains(classes.CLS_TB_ALT_BOR)) ? table.classList.remove(classes.CLS_TB_ALT_BOR) :
@@ -192,2 +192,3 @@ table.classList.add(classes.CLS_TB_ALT_BOR);
         this.parent.formatter.saveData();
+        this.parent.formatter.editorManager.nodeSelection.restore();
     };
@@ -194,0 +195,0 @@ Table.prototype.insideList = function (range) {

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

@@ -324,2 +324,5 @@ import { addClass, Browser, removeClass, EventHandler, formatUnit, isNullOrUndefined } from '@syncfusion/ej2-base';
             change: function (colorPickerArgs) {
+                if (isIDevice()) {
+                    proxy.parent.notify(events.selectionRestore, {});
+                }
                 /* tslint:disable */
@@ -326,0 +329,0 @@ var colorpickerValue = Browser.info.name === 'msie' || Browser.info.name === 'edge' || isIDevice() ? colorPickerArgs.currentValue.rgba : colorPickerArgs.currentValue.hex;

src/selection/selection.js

@@ -159,3 +159,3 @@ /**
         for (; index--; null) {
-            node = node.childNodes[num[index]];
+            node = node && node.childNodes[num[index]];
         }
@@ -162,0 +162,0 @@ if (node && constant >= 0) {

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

10510877

increased by0.61%

Number of package files

316

increased by0.64%

Lines of code

93855

increased by0.56%

Dependency changes

• Updated@syncfusion/ej2-base@~17.1.47

• Updated@syncfusion/ej2-navigations@~17.1.47

• Updated@syncfusion/ej2-popups@~17.1.47

• Updated@syncfusion/ej2-splitbuttons@~17.1.47