@syncfusion/ej2-richtexteditor 18.1.52 → 18.2.44-4568

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

@@ -2,7 +2,7 @@ import { getEditValue } from '../base/util';
 /**
  * Content module is used to render Rich Text Editor content
  * @hidden
-
+ * @deprecated
  */
 var ContentRender = /** @class */ (function () {
     /**
@@ -15,7 +15,7 @@ var ContentRender = /** @class */ (function () {
     /**
      * The function is used to render Rich Text Editor content div
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
@@ -37,7 +37,7 @@ var ContentRender = /** @class */ (function () {
      * Get the content div element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.getPanel = function () {
         return this.contentPanel;
@@ -46,7 +46,7 @@ var ContentRender = /** @class */ (function () {
      * Get the editable element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.getEditPanel = function () {
         return this.editableElement;
@@ -62,7 +62,7 @@ var ContentRender = /** @class */ (function () {
      * Set the content div element of RichTextEditor
      * @param {Element} panel
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.setPanel = function (panel) {
         this.contentPanel = panel;
@@ -71,7 +71,7 @@ var ContentRender = /** @class */ (function () {
      * Get the document of RichTextEditor
      * @return {Document}
      * @hidden
-
+     * @deprecated
      */
     ContentRender.prototype.getDocument = function () {
         return this.getEditPanel().ownerDocument;

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

@@ -10,15 +10,16 @@ export declare class DialogRenderer {
     /**
      * dialog render method
      * @hidden
-
+     * @deprecated
      */
     render(e: DialogModel): Dialog;
     private beforeOpen;
     private open;
+    private beforeClose;
     /**
      * dialog close method
      * @hidden
-
+     * @deprecated
      */
     close(args: Object): void;
 }

package/src/rich-text-editor/renderer/dialog-renderer.js

@@ -11,19 +11,16 @@ var DialogRenderer = /** @class */ (function () {
     /**
      * dialog render method
      * @hidden
-
+     * @deprecated
      */
     DialogRenderer.prototype.render = function (e) {
         var dlgObj;
-        if (isNOU(e.beforeOpen)) {
-            e.beforeOpen = this.beforeOpen.bind(this);
-        }
-        if (isNOU(e.open)) {
-            e.open = this.open.bind(this);
-        }
+        e.beforeOpen = this.beforeOpen.bind(this);
+        e.open = this.open.bind(this);
         if (isNOU(e.close)) {
             e.close = this.close.bind(this);
         }
+        e.beforeClose = this.beforeClose.bind(this);
         dlgObj = new Dialog(e);
         dlgObj.isStringTemplate = true;
         return dlgObj;
@@ -34,10 +31,13 @@ var DialogRenderer = /** @class */ (function () {
     DialogRenderer.prototype.open = function (args) {
         this.parent.trigger(events.dialogOpen, args);
     };
+    DialogRenderer.prototype.beforeClose = function (args) {
+        this.parent.trigger(events.beforeDialogClose, args);
+    };
     /**
      * dialog close method
      * @hidden
-
+     * @deprecated
      */
     DialogRenderer.prototype.close = function (args) {
         this.parent.trigger(events.dialogClose, args);

package/src/rich-text-editor/renderer/iframe-content-renderer.d.ts

@@ -2,13 +2,13 @@ import { ContentRender } from '../renderer/content-renderer';
 /**
  * Content module is used to render Rich Text Editor content
  * @hidden
-
+ * @deprecated
  */
 export declare class IframeContentRender extends ContentRender {
     /**
      * The function is used to render Rich Text Editor iframe
      * @hidden
-
+     * @deprecated
      */
     renderPanel(): void;
     private setThemeColor;
@@ -16,14 +16,14 @@ export declare class IframeContentRender extends ContentRender {
      * Get the editable element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     getEditPanel(): Element;
     /**
      * Get the document of RichTextEditor
      * @param  {Document}
      * @hidden
-
+     * @deprecated
      */
     getDocument(): Document;
 }

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

@@ -20,7 +20,7 @@ var IFRAMEHEADER = "\n<!DOCTYPE html> \n    <html>\n         <head>\n
 /**
  * Content module is used to render Rich Text Editor content
  * @hidden
-
+ * @deprecated
  */
 var IframeContentRender = /** @class */ (function (_super) {
     __extends(IframeContentRender, _super);
@@ -30,7 +30,7 @@ var IframeContentRender = /** @class */ (function (_super) {
     /**
      * The function is used to render Rich Text Editor iframe
      * @hidden
-
+     * @deprecated
      */
     IframeContentRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
@@ -64,7 +64,7 @@ var IframeContentRender = /** @class */ (function (_super) {
      * Get the editable element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     IframeContentRender.prototype.getEditPanel = function () {
         var editNode;
@@ -80,7 +80,7 @@ var IframeContentRender = /** @class */ (function (_super) {
      * Get the document of RichTextEditor
      * @param  {Document}
      * @hidden
-
+     * @deprecated
      */
     IframeContentRender.prototype.getDocument = function () {
         return this.getEditPanel().ownerDocument;

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

@@ -121,7 +121,7 @@ export declare class Image {
      * @method destroy
      * @return {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     /**

package/src/rich-text-editor/renderer/image-module.js

@@ -485,23 +485,29 @@ var Image = /** @class */ (function () {
         var selectNodeEle;
         var selectParentEle;
         this.deletedImg = [];
+        var isCursor;
+        var keyCodeValues = [27, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123,
+            44, 45, 9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93, 144, 145, 182, 183];
+        if (this.parent.editorMode === 'HTML') {
+            range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+            isCursor = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
+        }
+        if (!isCursor && this.parent.editorMode === 'HTML' && keyCodeValues.indexOf(originalEvent.which) < 0) {
+            var nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range);
+            for (var i = 0; i < nodes.length; i++) {
+                if (nodes[i].nodeName === 'IMG') {
+                    this.deletedImg.push(nodes[i]);
+                }
+            }
+        }
         if (this.parent.editorMode === 'HTML' && ((originalEvent.which === 8 && originalEvent.code === 'Backspace') ||
             (originalEvent.which === 46 && originalEvent.code === 'Delete'))) {
-            var range_1 = this.parent.getRange();
-            var isCursor = range_1.startContainer === range_1.endContainer && range_1.startOffset === range_1.endOffset;
-            if ((originalEvent.which === 8 && originalEvent.code === 'Backspace' && isCursor)) {
-                this.checkImageBack(range_1);
-            }
-            else if ((originalEvent.which === 46 && originalEvent.code === 'Delete' && isCursor)) {
-                this.checkImageDel(range_1);
-            }
-            else if (!isCursor) {
-                var nodes = this.parent.formatter.editorManager.nodeSelection.getNodeCollection(range_1);
-                for (var i = 0; i < nodes.length; i++) {
-                    if (nodes[i].nodeName === 'IMG') {
-                        this.deletedImg.push(nodes[i]);
-                    }
-                }
+            var isCursor_1 = range.startContainer === range.endContainer && range.startOffset === range.endOffset;
+            if ((originalEvent.which === 8 && originalEvent.code === 'Backspace' && isCursor_1)) {
+                this.checkImageBack(range);
+            }
+            else if ((originalEvent.which === 46 && originalEvent.code === 'Delete' && isCursor_1)) {
+                this.checkImageDel(range);
             }
         }
         if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection) &&
@@ -534,7 +540,7 @@ var Image = /** @class */ (function () {
                         originalEvent: originalEvent
                     }
                 };
-                this.deleteImg(event_1);
+                this.deleteImg(event_1, originalEvent.keyCode);
             }
             if (this.parent.contentModule.getEditPanel().querySelector('.e-img-resize')) {
                 this.remvoeResizEle();
@@ -578,7 +584,7 @@ var Image = /** @class */ (function () {
         if (!isNOU(this.deletedImg) && this.deletedImg.length > 0) {
             for (var i = 0; i < this.deletedImg.length; i++) {
                 var args = {
-                    img: this.deletedImg[i],
+                    element: this.deletedImg[i],
                     src: this.deletedImg[i].getAttribute('src')
                 };
                 this.parent.trigger(events.afterImageDelete, args);
@@ -917,11 +923,14 @@ var Image = /** @class */ (function () {
         var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi;
         return regexp.test(url);
     };
-    Image.prototype.deleteImg = function (e) {
+    Image.prototype.deleteImg = function (e, keyCode) {
         if (e.selectNode[0].nodeName !== 'IMG') {
             return;
         }
-        var args = { img: e.selectNode[0] };
+        var args = {
+            element: e.selectNode[0],
+            src: e.selectNode[0].getAttribute('src')
+        };
         if (this.parent.formatter.getUndoRedoStack().length === 0) {
             this.parent.formatter.saveData();
         }
@@ -938,7 +947,9 @@ var Image = /** @class */ (function () {
             this.quickToolObj.imageQTBar.hidePopup();
         }
         this.cancelResizeAction();
-        this.parent.trigger(events.afterImageDelete, args);
+        if (isNullOrUndefined(keyCode)) {
+            this.parent.trigger(events.afterImageDelete, args);
+        }
     };
     Image.prototype.caption = function (e) {
         var selectNode = e.selectNode[0];
@@ -1352,15 +1363,24 @@ var Image = /** @class */ (function () {
         });
         uploadParentEle.appendChild(uploadEle);
         var altText;
+        var rawFile;
+        var selectArgs;
+        var beforeUploadArgs;
         this.uploadObj = new Uploader({
             asyncSettings: { saveUrl: this.parent.insertImageSettings.saveUrl, },
             dropArea: span, multiple: false, enableRtl: this.parent.enableRtl,
             allowedExtensions: this.parent.insertImageSettings.allowedTypes.toString(),
             selected: function (e) {
                 proxy.isImgUploaded = true;
-                _this.parent.trigger(events.imageSelected, e, function (e) {
-                    _this.checkExtension(e.filesData[0]);
-                    altText = e.filesData[0].name;
+                selectArgs = e;
+                if (_this.parent.isServerRendered) {
+                    selectArgs = JSON.parse(JSON.stringify(e));
+                    e.cancel = true;
+                    rawFile = e.filesData;
+                }
+                _this.parent.trigger(events.imageSelected, selectArgs, function (selectArgs) {
+                    _this.checkExtension(selectArgs.filesData[0]);
+                    altText = selectArgs.filesData[0].name;
                     if (_this.parent.editorMode === 'HTML' && isNullOrUndefined(_this.parent.insertImageSettings.path)) {
                         var reader_1 = new FileReader();
                         reader_1.addEventListener('load', function (e) {
@@ -1379,12 +1399,33 @@ var Image = /** @class */ (function () {
                             };
                             proxy.inputUrl.setAttribute('disabled', 'true');
                         });
-                        reader_1.readAsDataURL(e.filesData[0].rawFile);
+                        reader_1.readAsDataURL(selectArgs.filesData[0].rawFile);
+                    }
+                    if (_this.parent.isServerRendered) {
+                        /* tslint:disable */
+                        _this.uploadObj._internalRenderSelect(selectArgs, rawFile);
+                        /* tslint:enable */
                     }
                 });
             },
+            beforeUpload: function (args) {
+                if (_this.parent.isServerRendered) {
+                    beforeUploadArgs = JSON.parse(JSON.stringify(args));
+                    args.cancel = true;
+                    _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {
+                        if (beforeUploadArgs.cancel) {
+                            return;
+                        }
+                        /* tslint:disable */
+                        _this.uploadObj.uploadFiles(rawFile, null);
+                        /* tslint:enable */
+                    });
+                }
+            },
             uploading: function (e) {
-                _this.parent.trigger(events.imageUploading, e);
+                if (!_this.parent.isServerRendered) {
+                    _this.parent.trigger(events.imageUploading, e);
+                }
             },
             success: function (e) {
                 _this.parent.trigger(events.imageUploadSuccess, e, function (e) {
@@ -1429,6 +1470,9 @@ var Image = /** @class */ (function () {
             if (this.uploadObj.allowedExtensions.toLocaleLowerCase().indexOf(('.' + e.type).toLocaleLowerCase()) === -1) {
                 this.dialogObj.getButtons(0).element.setAttribute('disabled', 'disabled');
             }
+            else {
+                this.dialogObj.getButtons(0).element.removeAttribute('disabled');
+            }
         }
     };
     Image.prototype.fileSelect = function () {
@@ -1654,6 +1698,8 @@ var Image = /** @class */ (function () {
         var timeOut = dragEvent.dataTransfer.files[0].size > 1000000 ? 300 : 100;
         setTimeout(function () { proxy.refreshPopup(imageElement); }, timeOut);
         var range = this.parent.formatter.editorManager.nodeSelection.getRange(this.parent.contentModule.getDocument());
+        var rawFile;
+        var beforeUploadArgs;
         this.uploadObj = new Uploader({
             asyncSettings: {
                 saveUrl: this.parent.insertImageSettings.saveUrl,
@@ -1673,15 +1719,36 @@ var Image = /** @class */ (function () {
                 detach(imageElement);
                 _this.popupObj.close();
             },
+            beforeUpload: function (args) {
+                if (_this.parent.isServerRendered) {
+                    beforeUploadArgs = JSON.parse(JSON.stringify(args));
+                    args.cancel = true;
+                    isUploading = true;
+                    _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {
+                        if (beforeUploadArgs.cancel) {
+                            return;
+                        }
+                        /* tslint:disable */
+                        _this.uploadObj.uploadFiles(rawFile, null);
+                        _this.parent.inputElement.contentEditable = 'false';
+                        /* tslint:enable */
+                    });
+                }
+            },
             uploading: function (e) {
-                isUploading = true;
-                _this.parent.trigger(events.imageUploading, e);
-                _this.parent.inputElement.contentEditable = 'false';
+                if (!_this.parent.isServerRendered) {
+                    isUploading = true;
+                    _this.parent.trigger(events.imageUploading, e);
+                    _this.parent.inputElement.contentEditable = 'false';
+                }
             },
             selected: function (e) {
                 if (isUploading) {
                     e.cancel = true;
                 }
+                if (_this.parent.isServerRendered) {
+                    rawFile = e.filesData;
+                }
             },
             failure: function (e) {
                 isUploading = false;
@@ -1809,7 +1876,7 @@ var Image = /** @class */ (function () {
      * @method destroy
      * @return {void}
      * @hidden
-
+     * @deprecated
      */
     Image.prototype.destroy = function () {
         this.removeEventListener();

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

@@ -38,7 +38,7 @@ export declare class Link {
      * @method destroy
      * @return {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     /**

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

@@ -443,7 +443,7 @@ var Link = /** @class */ (function () {
      * @method destroy
      * @return {void}
      * @hidden
-
+     * @deprecated
      */
     Link.prototype.destroy = function () {
         this.removeEventListener();

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

@@ -2,7 +2,7 @@ import { IRenderer, IRichTextEditor } from '../base/interface';
 /**
  * Markdown module is used to render Rich Text Editor as Markdown editor content
  * @hidden
-
+ * @deprecated
  */
 export declare class MarkdownRender implements IRenderer {
     private contentPanel;
@@ -15,21 +15,21 @@ export declare class MarkdownRender implements IRenderer {
     /**
      * The function is used to render Rich Text Editor content div
      * @hidden
-
+     * @deprecated
      */
     renderPanel(): void;
     /**
      * Get the content div element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     getPanel(): Element;
     /**
      * Get the editable element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     getEditPanel(): Element;
     /**
@@ -41,14 +41,14 @@ export declare class MarkdownRender implements IRenderer {
      * Set the content div element of RichTextEditor
      * @param  {Element} panel
      * @hidden
-
+     * @deprecated
      */
     setPanel(panel: Element): void;
     /**
      * Get the document of RichTextEditor
      * @param  {Document}
      * @hidden
-
+     * @deprecated
      */
     getDocument(): Document;
 }

package/src/rich-text-editor/renderer/markdown-renderer.js

@@ -1,7 +1,7 @@
 /**
  * Markdown module is used to render Rich Text Editor as Markdown editor content
  * @hidden
-
+ * @deprecated
  */
 var MarkdownRender = /** @class */ (function () {
     /**
@@ -13,7 +13,7 @@ var MarkdownRender = /** @class */ (function () {
     /**
      * The function is used to render Rich Text Editor content div
      * @hidden
-
+     * @deprecated
      */
     MarkdownRender.prototype.renderPanel = function () {
         var rteObj = this.parent;
@@ -30,7 +30,7 @@ var MarkdownRender = /** @class */ (function () {
      * Get the content div element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     MarkdownRender.prototype.getPanel = function () {
         return this.contentPanel;
@@ -39,7 +39,7 @@ var MarkdownRender = /** @class */ (function () {
      * Get the editable element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     MarkdownRender.prototype.getEditPanel = function () {
         return this.editableElement;
@@ -55,7 +55,7 @@ var MarkdownRender = /** @class */ (function () {
      * Set the content div element of RichTextEditor
      * @param  {Element} panel
      * @hidden
-
+     * @deprecated
      */
     MarkdownRender.prototype.setPanel = function (panel) {
         this.contentPanel = panel;
@@ -64,7 +64,7 @@ var MarkdownRender = /** @class */ (function () {
      * Get the document of RichTextEditor
      * @param  {Document}
      * @hidden
-
+     * @deprecated
      */
     MarkdownRender.prototype.getDocument = function () {
         return this.getEditPanel().ownerDocument;

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

@@ -3,7 +3,7 @@ import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
 /**
  * `Popup renderer` module is used to render popup in RichTextEditor.
  * @hidden
-
+ * @deprecated
  */
 export declare class PopupRenderer implements IRenderer {
     private popupObj;
@@ -17,27 +17,27 @@ export declare class PopupRenderer implements IRenderer {
     /**
      * renderPopup method
      * @hidden
-
+     * @deprecated
      */
     renderPopup(args: BaseQuickToolbar): void;
     /**
      * The function is used to add popup class in Quick Toolbar
      * @hidden
-
+     * @deprecated
      */
     renderPanel(): void;
     /**
      * Get the popup element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     getPanel(): Element;
     /**
      * Set the popup element of RichTextEditor
      * @param  {Element} panel
      * @hidden
-
+     * @deprecated
      */
     setPanel(panel: Element): void;
 }

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

@@ -5,7 +5,7 @@ import * as events from '../base/constant';
 /**
  * `Popup renderer` module is used to render popup in RichTextEditor.
  * @hidden
-
+ * @deprecated
  */
 var PopupRenderer = /** @class */ (function () {
     /**
@@ -21,7 +21,7 @@ var PopupRenderer = /** @class */ (function () {
     /**
      * renderPopup method
      * @hidden
-
+     * @deprecated
      */
     PopupRenderer.prototype.renderPopup = function (args) {
         this.setPanel(args.element);
@@ -37,7 +37,7 @@ var PopupRenderer = /** @class */ (function () {
     /**
      * The function is used to add popup class in Quick Toolbar
      * @hidden
-
+     * @deprecated
      */
     PopupRenderer.prototype.renderPanel = function () {
         this.getPanel().classList.add(CLS_QUICK_POP);
@@ -46,7 +46,7 @@ var PopupRenderer = /** @class */ (function () {
      * Get the popup element of RichTextEditor
      * @return {Element}
      * @hidden
-
+     * @deprecated
      */
     PopupRenderer.prototype.getPanel = function () {
         return this.popupPanel;
@@ -55,7 +55,7 @@ var PopupRenderer = /** @class */ (function () {
      * Set the popup element of RichTextEditor
      * @param  {Element} panel
      * @hidden
-
+     * @deprecated
      */
     PopupRenderer.prototype.setPanel = function (panel) {
         this.popupPanel = panel;

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

@@ -3,7 +3,7 @@ import { ServiceLocator } from '../services/service-locator';
 /**
  * Content module is used to render Rich Text Editor content
  * @hidden
-
+ * @deprecated
  */
 export declare class Render {
     private parent;
@@ -17,7 +17,7 @@ export declare class Render {
     /**
      * To initialize Rich Text Editor header, content and footer rendering
      * @hidden
-
+     * @deprecated
      */
     render(): void;
     /**

package/src/rich-text-editor/renderer/render.js

@@ -3,7 +3,7 @@ import * as events from '../base/constant';
 /**
  * Content module is used to render Rich Text Editor content
  * @hidden
-
+ * @deprecated
  */
 var Render = /** @class */ (function () {
     /**
@@ -18,7 +18,7 @@ var Render = /** @class */ (function () {
     /**
      * To initialize Rich Text Editor header, content and footer rendering
      * @hidden
-
+     * @deprecated
      */
     Render.prototype.render = function () {
         var rteObj = this.parent;

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

@@ -86,7 +86,7 @@ export declare class Table {
      * @method destroy
      * @return {void}
      * @hidden
-
+     * @deprecated
      */
     destroy(): void;
     /**