@syncfusion/ej2-richtexteditor 22.2.12 → 23.1.39

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

@@ -30,6 +30,7 @@ var PasteCleanup = /** @class */ (function () {
             'header', 'article', 'nav', 'footer', 'section', 'aside', 'main', 'figure', 'figcaption'];
         this.isNotFromHtml = false;
         this.containsHtml = false;
+        this.cropImageData = [];
         this.parent = parent;
         this.locator = serviceLocator;
         this.renderFactory = this.locator.getService('rendererFactory');
@@ -110,8 +111,9 @@ var PasteCleanup = /** @class */ (function () {
                     args: e.args,
                     text: e.text,
                     allowedStylePropertiesArray: this.parent.pasteCleanupSettings.allowedStyleProps,
-                    callBack: function (a) {
+                    callBack: function (a, cropImageData) {
                         value = a.trim();
+                        _this.cropImageData = cropImageData;
                     }
                 });
             }
@@ -160,7 +162,9 @@ var PasteCleanup = /** @class */ (function () {
                     currentFocusNode = currentFocusNode.childNodes[_this.nodeSelectionObj.getRange(_this.contentRenderer.getDocument()).startOffset];
                 }
                 if (currentFocusNode.previousSibling.nodeName === 'IMG') {
-                    currentFocusNode.previousSibling.classList.add('pasteContent_Img');
+                    if (!isNOU(currentFocusNode.previousSibling.getAttribute('src'))) {
+                        currentFocusNode.previousSibling.classList.add('pasteContent_Img');
+                    }
                     currentFocusNode.previousSibling.classList.add(CLS_RTE_IMAGE);
                     if (_this.parent.insertImageSettings.display === 'inline') {
                         currentFocusNode.previousSibling.classList.add(CLS_IMGINLINE);
@@ -192,6 +196,7 @@ var PasteCleanup = /** @class */ (function () {
     PasteCleanup.prototype.makeSpace = function (enterSplitText) {
         var contentWithSpace = '';
         var spaceBetweenContent = true;
+        enterSplitText = enterSplitText.replace(/\t/g, '    ');
         var spaceSplit = enterSplitText.split(' ');
         for (var j = 0; j < spaceSplit.length; j++) {
             if (spaceSplit[j].trim() === '') {
@@ -211,7 +216,8 @@ var PasteCleanup = /** @class */ (function () {
             var imgName = [];
             var uploadImg = [];
             for (var i = 0; i < allImgElm.length; i++) {
-                if (allImgElm[i].getAttribute('src').split(',')[0].indexOf('base64') >= 0) {
+                if (!isNOU(allImgElm[i].getAttribute('src')) &&
+                    allImgElm[i].getAttribute('src').split(',')[0].indexOf('base64') >= 0) {
                     base64Src.push(allImgElm[i].getAttribute('src'));
                     imgName.push(getUniqueID('rte_image'));
                     uploadImg.push(allImgElm[i]);
@@ -293,7 +299,6 @@ var PasteCleanup = /** @class */ (function () {
             _this.refreshPopup(imgElem, _this.popupObj);
         }, timeOut);
         var rawFile;
-        var beforeUploadArgs;
         this.uploadObj = new Uploader({
             asyncSettings: {
                 saveUrl: this.parent.insertImageSettings.saveUrl,
@@ -325,28 +330,8 @@ var PasteCleanup = /** @class */ (function () {
                 }
             },
             beforeUpload: function (args) {
-                if (_this.parent.isServerRendered) {
-                    beforeUploadArgs = JSON.parse(JSON.stringify(args));
-                    beforeUploadArgs.filesData = rawFile;
-                    args.cancel = true;
-                    _this.parent.trigger(events.imageUploading, beforeUploadArgs, function (beforeUploadArgs) {
-                        if (beforeUploadArgs.cancel) {
-                            return;
-                        }
-                        _this.toolbarEnableDisable(true);
-                        /* eslint-disable */
-                        _this.uploadObj.currentRequestHeader = beforeUploadArgs.currentRequest ?
-                            beforeUploadArgs.currentRequest : _this.uploadObj.currentRequestHeader;
-                        _this.uploadObj.customFormDatas = beforeUploadArgs.customFormData && beforeUploadArgs.customFormData.length > 0 ?
-                            beforeUploadArgs.customFormData : _this.uploadObj.customFormDatas;
-                        _this.uploadObj.uploadFiles(rawFile, null);
-                        /* eslint-enable */
-                    });
-                }
-                else {
-                    _this.parent.trigger(events.beforeImageUpload, args);
-                    _this.toolbarEnableDisable(true);
-                }
+                _this.parent.trigger(events.beforeImageUpload, args);
+                _this.toolbarEnableDisable(true);
             },
             // eslint-disable-next-line
             failure: function (e) {
@@ -364,9 +349,6 @@ var PasteCleanup = /** @class */ (function () {
             },
             selected: function (e) {
                 e.cancel = true;
-                if (_this.parent.isServerRendered) {
-                    rawFile = e.filesData;
-                }
             },
             removing: function () {
                 _this.parent.inputElement.contentEditable = 'true';
@@ -388,8 +370,8 @@ var PasteCleanup = /** @class */ (function () {
                 statusCode: '1'
             }];
         this.uploadObj.createFileList(fileData);
-        /* eslint-enable */
         rawFile = fileData;
+        /* eslint-enable */
         this.uploadObj.upload(fileData);
         this.popupObj.element.getElementsByClassName('e-file-select-wrap')[0].style.display = 'none';
         detach(this.popupObj.element.querySelector('.e-rte-dialog-upload .e-file-select-wrap'));
@@ -464,7 +446,9 @@ var PasteCleanup = /** @class */ (function () {
 
      */
     PasteCleanup.prototype.imageFormatting = function (pasteArgs, imgElement) {
-        imgElement.elements[0].classList.add('pasteContent_Img');
+        if (!isNOU(imgElement.elements[0].getAttribute('src'))) {
+            imgElement.elements[0].classList.add('pasteContent_Img');
+        }
         var imageElement = this.parent.createElement('span');
         imageElement.appendChild(imgElement.elements[0]);
         var imageValue = imageElement.innerHTML;
@@ -657,7 +641,9 @@ var PasteCleanup = /** @class */ (function () {
         clipBoardElem.innerHTML = this.sanitizeHelper(clipBoardElem.innerHTML);
         var allImg = clipBoardElem.querySelectorAll('img');
         for (var i = 0; i < allImg.length; i++) {
-            allImg[i].classList.add('pasteContent_Img');
+            if (!isNOU(allImg[i].getAttribute('src'))) {
+                allImg[i].classList.add('pasteContent_Img');
+            }
             this.setImageProperties(allImg[i]);
         }
         this.addTempClass(clipBoardElem);
@@ -700,6 +686,51 @@ var PasteCleanup = /** @class */ (function () {
             }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
             this.parent.notify(events.toolbarRefresh, {});
+            this.cropImageHandler(this.parent.inputElement);
+        }
+    };
+    PasteCleanup.prototype.cropImageHandler = function (element) {
+        var _this = this;
+        var allImgElm = element.querySelectorAll('.e-img-cropped');
+        if (allImgElm.length > 0) {
+            var _loop_1 = function (i) {
+                if (allImgElm[i].getAttribute('src').split(',')[0].indexOf('base64') >= 0) {
+                    var image_1 = new Image();
+                    image_1.src = allImgElm[i].getAttribute('src');
+                    var canvas_1 = document.createElement('canvas');
+                    var ctx_1 = canvas_1.getContext('2d');
+                    image_1.onload = function () {
+                        var wGoalWidth = _this.cropImageData[i].goalWidth / image_1.naturalWidth;
+                        var hGoalHeight = _this.cropImageData[i].goalHeight / image_1.naturalHeight;
+                        var cropLength = _this.cropImageData[i].cropLength / wGoalWidth;
+                        var cropTop = _this.cropImageData[i].cropTop / hGoalHeight;
+                        var cropWidth = (_this.cropImageData[i].goalWidth -
+                            _this.cropImageData[i].cropLength -
+                            _this.cropImageData[i].cropR) / wGoalWidth;
+                        var cropHeight = (_this.cropImageData[i].goalHeight -
+                            _this.cropImageData[i].cropTop -
+                            _this.cropImageData[i].cropB) / hGoalHeight;
+                        canvas_1.width = cropWidth;
+                        canvas_1.height = cropHeight;
+                        // Draw the cropped portion of the image onto the canvas
+                        ctx_1.drawImage(image_1, cropLength, cropTop, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
+                        // Convert the cropped canvas to a base64 encoded image
+                        var croppedBase64 = canvas_1.toDataURL('image/png');
+                        // Call the provided callback with the cropped base64 data
+                        allImgElm[i].setAttribute('src', croppedBase64);
+                        allImgElm[i].classList.remove('e-img-cropped');
+                        _this.imgUploading(_this.parent.inputElement);
+                        if (_this.parent.iframeSettings.enable) {
+                            _this.parent.updateValue();
+                        }
+                    };
+                }
+            };
+            for (var i = 0; i < allImgElm.length; i++) {
+                _loop_1(i);
+            }
+        }
+        else {
             this.imgUploading(this.parent.inputElement);
             if (this.parent.iframeSettings.enable) {
                 this.parent.updateValue();

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

@@ -92,8 +92,10 @@ var QuickToolbar = /** @class */ (function () {
         }
         this.linkQTBar = this.createQTBar('Link', 'Scrollable', this.parent.quickToolbarSettings.link, RenderType.LinkToolbar);
         this.renderFactory.addRenderer(RenderType.LinkToolbar, this.linkQTBar);
-        this.textQTBar = this.createQTBar('Text', 'Scrollable', this.parent.quickToolbarSettings.text, RenderType.TextToolbar);
-        this.renderFactory.addRenderer(RenderType.TextToolbar, this.textQTBar);
+        if (!isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
+            this.textQTBar = this.createQTBar('Text', 'MultiRow', this.parent.quickToolbarSettings.text, RenderType.TextToolbar);
+            this.renderFactory.addRenderer(RenderType.TextToolbar, this.textQTBar);
+        }
         this.imageQTBar = this.createQTBar('Image', 'MultiRow', this.parent.quickToolbarSettings.image, RenderType.ImageToolbar);
         this.renderFactory.addRenderer(RenderType.ImageToolbar, this.imageQTBar);
         this.audioQTBar = this.createQTBar('Audio', 'MultiRow', this.parent.quickToolbarSettings.audio, RenderType.AudioToolbar);
@@ -235,6 +237,24 @@ var QuickToolbar = /** @class */ (function () {
                 }
             }
         }
+        if (!isNOU(this.textQTBar) && !isNOU(this.parent.quickToolbarSettings.text) && !this.parent.inlineMode.enable) {
+            var args = e.args.touches ?
+                e.args.changedTouches[0] : e.args;
+            var target = e.args.target;
+            this.hideQuickToolbars();
+            var parentLeft = this.parent.element.getBoundingClientRect().left;
+            this.offsetX = this.parent.iframeSettings.enable ? this.parent.element.ownerDocument.documentElement.scrollLeft
+                + parentLeft + args.clientX : args.pageX;
+            this.offsetY = pageYOffset(args, this.parent.element, this.parent.iframeSettings.enable);
+            var range = this.parent.getRange();
+            if ((range.endContainer.parentElement.tagName === range.startContainer.parentElement.tagName && (range.startContainer.parentElement.tagName === 'A' && range.endContainer.parentElement.tagName === 'A')) ||
+                (target.tagName === 'IMG') || (target.tagName === 'VIDEO') || (target.tagName === 'AUDIO') || (target.childNodes[0].nodeType === 1 && target.childNodes[0].classList.contains('e-rte-audio')) ||
+                (this.parent.getRange().startOffset === this.parent.getRange().endOffset)) {
+                return;
+            }
+            this.target = target;
+            this.textQTBar.showPopup(this.offsetX, this.offsetY, target, 'text');
+        }
     };
     QuickToolbar.prototype.keyDownHandler = function () {
         if ((this.parent.inlineMode.enable && (!Browser.isDevice || isIDevice()))
@@ -247,6 +267,11 @@ var QuickToolbar = /** @class */ (function () {
             && !isNullOrUndefined(select('.' + CLS_INLINE_POP, document))) {
             this.hideInlineQTBar();
         }
+        if (!isNOU(this.parent.quickToolbarSettings.text)) {
+            if (this.textQTBar && !hasClass(this.textQTBar.element, 'e-popup-close') && document.body.contains(this.textQTBar.element)) {
+                this.textQTBar.hidePopup();
+            }
+        }
     };
     QuickToolbar.prototype.keyUpHandler = function (e) {
         if (this.parent.inlineMode.enable && !Browser.isDevice) {
@@ -299,6 +324,9 @@ var QuickToolbar = /** @class */ (function () {
 
      */
     QuickToolbar.prototype.destroy = function () {
+        if (isNOU(this.parent)) {
+            return;
+        }
         if (this.linkQTBar) {
             EventHandler.remove(this.linkQTBar.element, 'mousedown', this.onMouseDown);
             EventHandler.remove(this.linkQTBar.element, 'keyup', this.keyUpQT);
@@ -405,6 +433,7 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.on(events.keyDown, this.onKeyDown, this);
         this.parent.on(events.rtlMode, this.setRtl, this);
         this.parent.on(events.bindCssClass, this.setCssClass, this);
+        this.parent.on(events.hidePopup, this.hideQuickToolbars, this);
     };
     QuickToolbar.prototype.onKeyDown = function (e) {
         var args = e.args;
@@ -458,6 +487,9 @@ var QuickToolbar = /** @class */ (function () {
         if (this.linkQTBar) {
             this.linkQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
         }
+        if (this.textQTBar) {
+            this.textQTBar.quickTBarObj.toolbarObj.setProperties({ enableRtl: args.enableRtl });
+        }
     };
     /**
      * removeEventListener
@@ -486,6 +518,7 @@ var QuickToolbar = /** @class */ (function () {
         this.parent.off(events.keyDown, this.onKeyDown);
         this.parent.off(events.rtlMode, this.setRtl);
         this.parent.off(events.bindCssClass, this.setCssClass);
+        this.parent.off(events.hidePopup, this.hideQuickToolbars);
     };
     /**
      * Called internally if any of the property value changed.

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

@@ -23,7 +23,7 @@ var Toolbar = /** @class */ (function () {
         this.renderFactory = this.locator.getService('rendererFactory');
         model.updateDropDownLocale(this.parent);
         updateDropDownFontFormatLocale(this.parent);
-        this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent));
+        this.renderFactory.addRenderer(RenderType.Toolbar, new ToolbarRenderer(this.parent, this.locator));
         this.toolbarRenderer = this.renderFactory.getRenderer(RenderType.Toolbar);
         this.baseToolbar = new BaseToolbar(this.parent, this.locator);
         this.addEventListener();
@@ -497,6 +497,9 @@ var Toolbar = /** @class */ (function () {
 
      */
     Toolbar.prototype.destroy = function () {
+        if (isNOU(this.parent)) {
+            return;
+        }
         if (this.isToolbarDestroyed()) {
             this.destroyToolbar();
             if (this.keyBoardModule) {

package/src/rich-text-editor/actions/xhtml-validation.js

@@ -41,7 +41,7 @@ var XhtmlValidation = /** @class */ (function () {
      */
     XhtmlValidation.prototype.selfEncloseValidation = function (currentValue, valueLength) {
         if (valueLength === 0 && currentValue.indexOf('table') < 0 && currentValue.indexOf('img') < 0 &&
-            currentValue !== '<p><br></p>' && currentValue !== '<div><br></div>' && currentValue !== '<br>') {
+            currentValue.includes('&nbsp;')) {
             var arrayValue = currentValue.split('&nbsp;');
             arrayValue[arrayValue.length - 1] = '&#8203;' + arrayValue[arrayValue.length - 1];
             currentValue = arrayValue.join('');

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

@@ -104,6 +104,11 @@ export declare const CLS_IMAGE_POP: string;
 /**
  * @hidden
 
+ */
+export declare const CLS_TEXT_POP: string;
+/**
+ * @hidden
+
  */
 export declare const CLS_INLINE_POP: string;
 /**

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

@@ -104,6 +104,11 @@ export var CLS_IMAGE_POP = 'e-rte-image-popup';
 /**
  * @hidden
 
+ */
+export var CLS_TEXT_POP = 'e-rte-text-popup';
+/**
+ * @hidden
+
  */
 export var CLS_INLINE_POP = 'e-rte-inline-popup';
 /**

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

@@ -734,6 +734,11 @@ export declare const maximizeMinimizeClick: string;
 /**
  * @hidden
 
+ */
+export declare const hidePopup: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

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

@@ -734,6 +734,11 @@ export var maximizeMinimizeClick = 'maximizeMinimizeClick';
 /**
  * @hidden
 
+ */
+export var hidePopup = 'hidePopup';
+/**
+ * @hidden
+
  */
 export var blockEmptyNodes = "address:empty, article:empty, aside:empty, blockquote:empty,\n details:empty, dd:empty, div:empty, dl:empty, dt:empty, fieldset:empty, footer:empty,form:empty, h1:empty,\n h2:empty, h3:empty, h4:empty, h5:empty, h6:empty, header:empty, hgroup:empty, li:empty, main:empty, nav:empty,\n noscript:empty, output:empty, p:empty, pre:empty, section:empty, td:empty, th:empty";
 /**

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

@@ -60,3 +60,7 @@ export declare enum DialogType {
  * Defines types to be used to configure the toolbar items.
  */
 export declare type ToolbarItems = 'alignments' | 'justifyLeft' | 'justifyCenter' | 'justifyRight' | 'justifyFull' | 'fontName' | 'fontSize' | 'fontColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'clearFormat' | 'clearAll' | 'cut' | 'copy' | 'paste' | 'unorderedList' | 'orderedList' | 'indent' | 'outdent' | 'undo' | 'redo' | 'superScript' | 'subScript' | 'createLink' | 'openLink' | 'editLink' | 'image' | 'createTable' | 'removeTable' | 'replace' | 'align' | 'caption' | 'remove' | 'openImageLink' | 'editImageLink' | 'removeImageLink' | 'insertLink' | 'display' | 'altText' | 'dimension' | 'fullScreen' | 'maximize' | 'minimize' | 'lowerCase' | 'upperCase' | 'print' | 'formats' | 'sourceCode' | 'preview' | 'viewSide' | 'insertCode' | 'tableHeader' | 'tableRemove' | 'tableRows' | 'tableColumns' | 'tableCellBackground' | 'tableCellHorizontalAlign' | 'tableCellVerticalAlign' | 'tableEditProperties' | 'styles' | 'removeLink' | 'merge';
+/**
+ * Defines types to be used to configure the toolbarSettings items.
+ */
+export declare type ToolbarConfigItems = 'Alignments' | 'JustifyLeft' | 'JustifyCenter' | 'JustifyRight' | 'JustifyFull' | 'FontName' | 'FontSize' | 'FontColor' | 'BackgroundColor' | 'Bold' | 'Italic' | 'Underline' | 'StrikeThrough' | 'ClearFormat' | 'ClearAll' | 'Cut' | 'Copy' | 'Paste' | 'UnorderedList' | 'OrderedList' | 'Indent' | 'Outdent' | 'Undo' | 'Redo' | 'SuperScript' | 'SubScript' | 'CreateLink' | 'Image' | 'CreateTable' | 'InsertLink' | 'FullScreen' | 'LowerCase' | 'UpperCase' | 'Print' | 'Formats' | 'FormatPainter' | 'EmojiPicker' | 'UnderLine' | 'ZoomOut' | 'ZoomIn' | 'SourceCode' | 'Preview' | 'ViewSide' | 'InsertCode' | 'Audio' | 'Video' | 'NumberFormatList' | 'BulletFormatList' | 'FileManager' | '|' | '-';

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

@@ -249,7 +249,9 @@ export interface NotifyArgs {
     range?: Range;
     /** Defines the action. */
     action?: string;
-    callBack?(args?: string | IImageCommandsArgs): void;
+    callBack?(args?: string | IImageCommandsArgs, cropImageData?: {
+        [key: string]: string | boolean | number;
+    }[]): void;
     file?: Blob;
     insertElement?: Element;
     touchData?: ITouchData;
@@ -792,6 +794,13 @@ export interface IShowQuickTBarOptions {
     popHeight: number;
     bodyRightSpace: number;
 }
+/**
+
+ */
+export interface IPositionChanged {
+    x: boolean;
+    y: boolean;
+}
 /**
 
  */
@@ -802,13 +811,6 @@ export interface IQuickToolbarOptions {
     toolbarItems: (string | IToolbarItems)[];
     cssClass: string;
 }
-/**
-
- */
-export interface IPositionChanged {
-    x: Boolean;
-    y: Boolean;
-}
 /**
  * Provides information about a BeforeQuickToolbarOpen event.
  */
@@ -1120,8 +1122,6 @@ export interface ImageSuccessEventArgs {
     e?: object;
     /**
      * Returns the details about upload file.
-     *
-     * @blazorType Syncfusion.EJ2.Blazor.Inputs.FileInfo
      */
     file: FileInfo;
     /**
@@ -1134,8 +1134,6 @@ export interface ImageSuccessEventArgs {
     operation: string;
     /**
      * Returns the upload event operation.
-     *
-     * @blazorType ResponseEventArgs
      */
     response?: ResponseEventArgs;
     /**
@@ -1157,8 +1155,6 @@ export interface ImageFailedEventArgs {
     e?: object;
     /**
      * Returns the details about upload file.
-     *
-     * @blazorType Syncfusion.EJ2.Blazor.Inputs.FileInfo
      */
     file: FileInfo;
     /**
@@ -1171,8 +1167,6 @@ export interface ImageFailedEventArgs {
     operation: string;
     /**
      * Returns the upload event operation.
-     *
-     * @blazorType ResponseEventArgs
      */
     response?: ResponseEventArgs;
     /**
@@ -1258,8 +1252,6 @@ export interface ToolbarClickEventArgs {
     cancel: boolean;
     /**
      * Defines the current Toolbar Item Object.
-     *
-     * @blazorType Syncfusion.EJ2.Blazor.Navigations.ItemModel
      */
     item: ItemModel;
     /**
@@ -1326,16 +1318,12 @@ export interface ImageUploadingEventArgs {
     cancel: boolean;
     /**
      * Defines the additional data in key and value pair format that will be submitted to the upload action.
-     *
-     * @blazorType object
      */
     customFormData: {
         [key: string]: Object;
     }[];
     /**
      * Returns the XMLHttpRequest instance that is associated with upload action.
-     *
-     * @blazorType object
      */
     currentRequest?: {
         [key: string]: string;