@syncfusion/ej2-richtexteditor 19.2.62 → 19.3.43

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

@@ -31,7 +31,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { Component, EventHandler, Complex, Browser, addClass, select, detach } from '@syncfusion/ej2-base';
 import { Property, NotifyPropertyChanges, 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, isBlazor } from '@syncfusion/ej2-base';
+import { isNullOrUndefined as isNOU, compile, append, extend, debounce } from '@syncfusion/ej2-base';
 import { Touch as EJ2Touch } from '@syncfusion/ej2-base';
 import { getScrollableParent } from '@syncfusion/ej2-popups';
 import * as events from '../base/constant';
@@ -53,8 +53,9 @@ import { InlineMode } from '../models/inline-mode';
 import { defaultLocale } from '../models/default-locale';
 import { setAttributes } from '../actions/html-attributes';
 import { FullScreen } from '../actions/full-screen';
+import { EnterKeyAction } from '../actions/enter-key';
 import * as CONSTANT from '../../common/constant';
-import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty } from '../base/util';
+import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';
 import { DialogRenderer } from '../renderer/dialog-renderer';
 /**
  * Represents the Rich Text Editor component.
@@ -207,9 +208,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.htmlAttributes = { 'tabindex': this.element.getAttribute('tabindex') };
             this.element.removeAttribute('tabindex');
         }
-        if (!this.isBlazor()) {
-            this.element.innerHTML = '';
-        }
+        this.element.innerHTML = '';
         var invalidAttr = ['class', 'style', 'id', 'ejs-for'];
         var htmlAttr = {};
         for (var a = 0; a < this.element.attributes.length; a++) {
@@ -227,23 +226,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             var rteOuterWrapper = this.createElement('div', {
                 className: this.element.getAttribute('class')
             });
-            if (!this.isBlazor()) {
-                this.element.innerHTML = '';
-            }
+            this.element.innerHTML = '';
             this.element.parentElement.insertBefore(rteOuterWrapper, this.element);
-            if (isBlazor()) {
-                rteOuterWrapper.appendChild(this.element);
-                this.valueContainer = this.createElement('textarea', {
-                    id: this.element.id + '-value'
-                });
-            }
-            else {
-                this.valueContainer = this.element;
-            }
+            this.valueContainer = this.element;
             removeClass([this.valueContainer], this.element.getAttribute('class').split(' '));
-            if (this.isBlazor()) {
-                addClass([this.element], classes.CLS_RTE_HIDDEN);
-            }
             this.element = rteOuterWrapper;
         }
         else {
@@ -460,12 +446,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         this.setContentHeight();
         if (this.value !== null) {
-            if (!this.isBlazor()) {
-                this.valueContainer.defaultValue = this.value;
-            }
-            else {
-                this.defaultResetValue = this.value;
-            }
+            this.valueContainer.defaultValue = this.value;
         }
         // eslint-disable-next-line
         (!this.enabled) ? this.unWireEvents() : this.eventInitializer();
@@ -568,7 +549,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.notify(events.keyUp, { member: 'keyup', args: e });
         if (e.code === 'KeyX' && e.which === 88 && e.keyCode === 88 && e.ctrlKey && (this.inputElement.innerHTML === '' ||
             this.inputElement.innerHTML === '<br>')) {
-            this.inputElement.innerHTML = getEditValue('<p><br></p>', this);
+            this.inputElement.innerHTML = getEditValue(getDefaultValue(this), this);
         }
         var allowedKeys = e.which === 32 || e.which === 13 || e.which === 8 || e.which === 46;
         if (((e.key !== 'shift' && !e.ctrlKey) && e.key && e.key.length === 1 || allowedKeys) || (this.editorMode === 'Markdown'
@@ -580,7 +561,10 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.notify(events.toolbarRefresh, { args: e });
         }
         if (!isNOU(this.placeholder)) {
-            this.setPlaceHolder();
+            if (!(e.key === 'Enter' && e.keyCode === 13) && (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>' ||
+                this.inputElement.innerHTML === '<br>')) {
+                this.setPlaceHolder();
+            }
         }
     };
     /**
@@ -809,22 +793,16 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         this.unWireEvents();
         if (this.originalElement.tagName === 'TEXTAREA') {
-            if (isBlazor()) {
-                detach(this.valueContainer);
-                this.valueContainer = this.element.querySelector('.e-blazor-hidden.e-control.e-richtexteditor');
-            }
             this.element.parentElement.insertBefore(this.valueContainer, this.element);
             this.valueContainer.id = this.getID();
             this.valueContainer.removeAttribute('name');
             detach(this.element);
             if (this.originalElement.innerHTML.trim() !== '') {
-                if (!isBlazor()) {
-                    this.valueContainer.value = this.originalElement.innerHTML.trim();
-                    this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);
-                }
+                this.valueContainer.value = this.originalElement.innerHTML.trim();
+                this.setProperties({ value: (!isNOU(this.initialValue) ? this.initialValue : null) }, true);
             }
             else {
-                this.valueContainer.value = !this.isBlazor() ? this.valueContainer.defaultValue : this.defaultResetValue;
+                this.valueContainer.value = this.valueContainer.defaultValue;
             }
             this.element = this.valueContainer;
             for (var i = 0; i < this.originalElement.classList.length; i++) {
@@ -900,12 +878,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @returns {Element} - specifies the element.
      */
     RichTextEditor.prototype.getContent = function () {
-        if (this.iframeSettings.enable && isBlazor()) {
-            return this.inputElement;
-        }
-        else {
-            return this.contentModule.getPanel();
-        }
+        return this.contentModule.getPanel();
     };
     /**
      * Returns the text content as string.
@@ -977,10 +950,23 @@ var RichTextEditor = /** @class */ (function (_super) {
         for (var _i = 0, _a = Object.keys(newProp); _i < _a.length; _i++) {
             var prop = _a[_i];
             switch (prop) {
+                case 'enterKey':
                 case 'value': {
-                    var nVal = newProp[prop];
+                    var nVal = void 0;
+                    if (prop === 'enterKey') {
+                        if (this.value === null || this.value === '<div><br></div>' || this.value === '<p><br></p>' ||
+                            this.value === '<br>') {
+                            nVal = null;
+                        }
+                        else {
+                            nVal = this.value;
+                        }
+                    }
+                    else {
+                        nVal = newProp[prop];
+                    }
                     var val = this.editorMode === 'HTML' ? getEditValue(nVal, this) : nVal;
-                    if (!isNOU(nVal) && nVal !== '') {
+                    if ((!isNOU(nVal) && nVal !== '') || prop === 'enterKey') {
                         this.value = this.serializeValue(((this.enableHtmlEncode) ? this.encode(decode(val)) : val));
                     }
                     this.updatePanelValue();
@@ -1146,7 +1132,18 @@ var RichTextEditor = /** @class */ (function (_super) {
                 getTextArea.value = '';
             }
             if (this.editorMode === 'HTML') {
-                this.inputElement.innerHTML = '<p><br/></p>';
+                if (this.enterKey === 'DIV') {
+                    this.inputElement.innerHTML = '<div><br/></div>';
+                }
+                else if (this.enterKey === 'BR') {
+                    this.inputElement.innerHTML = '<br/>';
+                }
+                else {
+                    this.inputElement.innerHTML = '<p><br/></p>';
+                    if (value === '' && this.formatter && this.inputElement) {
+                        this.formatter.editorManager.nodeSelection.setCursorPoint(this.contentModule.getDocument(), this.inputElement.firstElementChild, this.inputElement.firstElementChild.childElementCount);
+                    }
+                }
             }
             else {
                 this.inputElement.value = '';
@@ -1194,10 +1191,9 @@ var RichTextEditor = /** @class */ (function (_super) {
                     });
                 }
                 this.placeHolderWrapper.innerHTML = this.placeholder;
-                if (this.inputElement.textContent.length === 0 &&
-                    !isNOU(this.inputElement.firstChild) && this.inputElement.firstChild.nodeName === 'P' &&
-                    !isNOU(this.inputElement.firstChild.firstChild) && this.inputElement.firstChild.firstChild.nodeName === 'BR' &&
-                    this.inputElement.innerHTML !== '<p><br></p><p><br></p>') {
+                if (this.inputElement.textContent.length === 0 && !isNOU(this.inputElement.firstChild) && (this.inputElement.firstChild.nodeName === 'BR' ||
+                    ((this.inputElement.firstChild.nodeName === 'P' || this.inputElement.firstChild.nodeName === 'DIV') && !isNOU(this.inputElement.firstChild.firstChild) &&
+                        this.inputElement.firstChild.firstChild.nodeName === 'BR'))) {
                     this.placeHolderWrapper.style.display = 'block';
                 }
                 else {
@@ -1359,6 +1355,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var rendererFactory = this.serviceLocator.getService('rendererFactory');
         this.contentModule = rendererFactory.getRenderer(RenderType.Content);
         this.fullScreenModule = new FullScreen(this);
+        this.enterKeyModule = new EnterKeyAction(this);
         this.renderModule.render();
         this.inputElement = this.contentModule.getEditPanel();
         this.setHeight(this.height);
@@ -1428,9 +1425,6 @@ var RichTextEditor = /** @class */ (function (_super) {
         styleEle.rel = 'stylesheet';
         return styleEle;
     };
-    RichTextEditor.prototype.isBlazor = function () {
-        return (!isBlazor() ? false : true);
-    };
     RichTextEditor.prototype.setValue = function () {
         if (this.valueTemplate) {
             if (typeof this.valueTemplate === 'string') {
@@ -1737,7 +1731,8 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.isFocusOut = false;
             addClass([this.element], [classes.CLS_FOCUS]);
             if (this.editorMode === 'HTML') {
-                this.cloneValue = (this.inputElement.innerHTML === '<p><br></p>') ? null : this.enableHtmlEncode ?
+                this.cloneValue = (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>' ||
+                    this.inputElement.innerHTML === '<br>') ? null : this.enableHtmlEncode ?
                     this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
             }
             else {
@@ -1786,7 +1781,8 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         var getTextArea = this.element.querySelector('.e-rte-srctextarea');
         if (this.editorMode === 'HTML') {
-            value = (this.inputElement.innerHTML === '<p><br></p>') ? null : this.enableHtmlEncode ?
+            value = (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>' ||
+                this.inputElement.innerHTML === '<br>') ? null : this.enableHtmlEncode ?
                 this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
             if (getTextArea && getTextArea.style.display === 'block') {
                 value = getTextArea.value;
@@ -1970,7 +1966,7 @@ var RichTextEditor = /** @class */ (function (_super) {
     };
     RichTextEditor.prototype.resetHandler = function () {
         var defaultValue = this.valueContainer.defaultValue.trim();
-        this.setProperties({ value: defaultValue === '' ? null : (this.isBlazor() ? this.defaultResetValue : defaultValue) });
+        this.setProperties({ value: defaultValue === '' ? null : defaultValue });
     };
     /**
      * @returns {void}
@@ -2186,6 +2182,12 @@ var RichTextEditor = /** @class */ (function (_super) {
     __decorate([
         Property(null)
     ], RichTextEditor.prototype, "value", void 0);
+    __decorate([
+        Property('P')
+    ], RichTextEditor.prototype, "enterKey", void 0);
+    __decorate([
+        Property('BR')
+    ], RichTextEditor.prototype, "shiftEnterKey", void 0);
     __decorate([
         Property(30)
     ], RichTextEditor.prototype, "undoRedoSteps", void 0);

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

@@ -128,7 +128,13 @@ export declare function getEditValue(value: string, rteObj: IRichTextEditor): st
  * @returns {string} - returns the string
  * @hidden
  */
-export declare function updateTextNode(value: string): string;
+export declare function updateTextNode(value: string, rteObj?: IRichTextEditor): string;
+/**
+ * @param {IRichTextEditor} rteObj - specifies the rte object
+ * @returns {string} - returns the value based on enter configuration.
+ * @hidden
+ */
+export declare function getDefaultValue(rteObj: IRichTextEditor): string;
 /**
  * @param {string} value - specifies the value
  * @returns {boolean} - returns the boolean value

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

@@ -380,11 +380,19 @@ export function toObjectLowerCase(obj) {
 export function getEditValue(value, rteObj) {
     var val;
     if (value !== null && value !== '') {
-        val = rteObj.enableHtmlEncode ? updateTextNode(decode(value)) : updateTextNode(value);
+        val = rteObj.enableHtmlEncode ? updateTextNode(decode(value), rteObj) : updateTextNode(value, rteObj);
         rteObj.setProperties({ value: val }, true);
     }
     else {
-        val = rteObj.enableHtmlEncode ? '&lt;p&gt;&lt;br/&gt;&lt;/p&gt;' : '<p><br/></p>';
+        if (rteObj.enterKey === 'DIV') {
+            val = rteObj.enableHtmlEncode ? '&lt;div&gt;&lt;br/&gt;&lt;/div&gt;' : '<div><br/></div>';
+        }
+        else if (rteObj.enterKey === 'BR') {
+            val = rteObj.enableHtmlEncode ? '&lt;br/&gt;' : '<br/>';
+        }
+        else {
+            val = rteObj.enableHtmlEncode ? '&lt;p&gt;&lt;br/&gt;&lt;/p&gt;' : '<p><br/></p>';
+        }
     }
     return val;
 }
@@ -393,7 +401,7 @@ export function getEditValue(value, rteObj) {
  * @returns {string} - returns the string
  * @hidden
  */
-export function updateTextNode(value) {
+export function updateTextNode(value, rteObj) {
     var tempNode = document.createElement('div');
     var resultElm = document.createElement('div');
     var childNodes = tempNode.childNodes;
@@ -402,20 +410,25 @@ export function updateTextNode(value) {
     if (childNodes.length > 0) {
         var isPreviousInlineElem = void 0;
         var previousParent = void 0;
-        var paraElm = void 0;
+        var insertElem = void 0;
         while (tempNode.firstChild) {
-            if ((tempNode.firstChild.nodeName === '#text' &&
+            if (rteObj.enterKey !== 'BR' && ((tempNode.firstChild.nodeName === '#text' &&
                 (tempNode.firstChild.textContent.indexOf('\n') < 0 || tempNode.firstChild.textContent.trim() !== '')) ||
-                inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0) {
+                inlineNode.indexOf(tempNode.firstChild.nodeName.toLocaleLowerCase()) >= 0)) {
                 if (!isPreviousInlineElem) {
-                    paraElm = createElement('p');
-                    resultElm.appendChild(paraElm);
-                    paraElm.appendChild(tempNode.firstChild);
+                    if (rteObj.enterKey === 'DIV') {
+                        insertElem = createElement('div');
+                    }
+                    else {
+                        insertElem = createElement('p');
+                    }
+                    resultElm.appendChild(insertElem);
+                    insertElem.appendChild(tempNode.firstChild);
                 }
                 else {
                     previousParent.appendChild(tempNode.firstChild);
                 }
-                previousParent = paraElm;
+                previousParent = insertElem;
                 isPreviousInlineElem = true;
             }
             else if (tempNode.firstChild.nodeName === '#text' && (tempNode.firstChild.textContent === '\n' ||
@@ -440,13 +453,34 @@ export function updateTextNode(value) {
     }
     return resultElm.innerHTML;
 }
+/**
+ * @param {IRichTextEditor} rteObj - specifies the rte object
+ * @returns {string} - returns the value based on enter configuration.
+ * @hidden
+ */
+export function getDefaultValue(rteObj) {
+    var currentVal;
+    if (rteObj.enterKey === 'DIV') {
+        currentVal = rteObj.enableHtmlEncode ? '&lt;div&gt;&lt;br/&gt;&lt;/div&gt;' : '<div><br/></div>';
+    }
+    else if (rteObj.enterKey === 'BR') {
+        currentVal = rteObj.enableHtmlEncode ? '&lt;br/&gt;' : '<br/>';
+    }
+    else {
+        currentVal = rteObj.enableHtmlEncode ? '&lt;p&gt;&lt;br/&gt;&lt;/p&gt;' : '<p><br/></p>';
+    }
+    return currentVal;
+}
 /**
  * @param {string} value - specifies the value
  * @returns {boolean} - returns the boolean value
  * @hidden
  */
 export function isEditableValueEmpty(value) {
-    return (value === '<p><br></p>' || value === '&lt;p&gt;&lt;br&gt;&lt;/p&gt;' || value === '') ? true : false;
+    return (value === '<p><br></p>' || value === '&lt;p&gt;&lt;br&gt;&lt;/p&gt;'
+        || value === '<div><br></div>' || value === '&lt;div&gt;&lt;br&gt;&lt;/div&gt;'
+        || value === '<br>' || value === '&lt;br&gt;'
+        || value === '') ? true : false;
 }
 /**
  * @param {string} value - specifies the string value

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

@@ -1,4 +1,4 @@
-import { extend, isNullOrUndefined, Browser, isBlazor } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
 import * as CONSTANT from '../base/constant';
 import { updateUndoRedoStatus, isIDevice } from '../base/util';
 import { KEY_DOWN, KEY_UP } from './../../common/constant';
@@ -59,10 +59,6 @@ var Formatter = /** @class */ (function () {
                     itemCollection: value
                 };
                 extend(args, args, items, true);
-                if (isBlazor()) {
-                    delete args.item;
-                    delete args.itemCollection;
-                }
                 self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {
                     if (actionBeginArgs.cancel) {
                         if (action_1 === 'paste' || action_1 === 'cut' || action_1 === 'copy') {
@@ -74,10 +70,16 @@ var Formatter = /** @class */ (function () {
             var isTableModule = isNullOrUndefined(self.tableModule) ? true : self.tableModule ?
                 self.tableModule.ensureInsideTableList : false;
             if ((event.which === 9 && isTableModule) || event.which !== 9) {
+                if (event.which === 13 && self.editorMode === 'HTML') {
+                    value = {
+                        'enterAction': self.enterKey
+                    };
+                }
                 this.editorManager.observer.notify((event.type === 'keydown' ? KEY_DOWN : KEY_UP), {
                     event: event,
                     callBack: this.onSuccess.bind(this, self),
-                    value: value
+                    value: value,
+                    enterAction: self.enterKey
                 });
             }
         }
@@ -105,7 +107,7 @@ var Formatter = /** @class */ (function () {
                     else {
                         _this.editorManager.observer.notify(CONSTANT.checkUndo, { subCommand: actionBeginArgs.item.subCommand });
                         _this.editorManager.execCommand(actionBeginArgs.item.command, actionBeginArgs.item.subCommand, event, _this.onSuccess.bind(_this, self), actionBeginArgs.item.value, actionBeginArgs.item.subCommand === 'Pre' && args.name === 'dropDownSelect' ?
-                            { name: args.name } : value, ('#' + self.getID() + ' iframe'));
+                            { name: args.name } : value, ('#' + self.getID() + ' iframe'), self.enterKey);
                     }
                 }
             });

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

@@ -149,14 +149,14 @@ export var tools = {
     'numberformatlist': {
         'id': 'NumberFormatList',
         'icon': 'e-order-list',
-        'tooltip': 'NumberFormatList',
+        'tooltip': 'Number Format List',
         'command': 'NumberFormatList',
         'subCommand': 'NumberFormatList'
     },
     'bulletformatlist': {
         'id': 'BulletFormatList',
         'icon': 'e-unorder-list',
-        'tooltip': 'BulletFormatList',
+        'tooltip': 'Bullet Format List',
         'command': 'BulletFormatList',
         'subCommand': 'BulletFormatList'
     },
@@ -330,7 +330,7 @@ export var tools = {
     },
     'dimension': {
         'id': 'Dimension',
-        'icon': 'e-dimension',
+        'icon': 'e-img-dimension',
         'tooltip': 'Change Size',
         'command': 'Images',
         'subCommand': 'Dimension'

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

@@ -39,10 +39,10 @@ var IframeContentRender = /** @class */ (function (_super) {
             rteContent + '</body></html>';
         var iFrameContent = IFRAMEHEADER + iFrameBodyContent;
         var iframe = this.parent.createElement('iframe', {
-            innerHTML: iFrameContent,
             id: this.parent.getID() + '_rte-view',
             className: 'e-rte-content',
-            styles: 'display:block;'
+            styles: 'display:block;',
+            attrs: { 'srcdoc': iFrameContent }
         });
         this.setPanel(iframe);
         rteObj.element.appendChild(iframe);

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

@@ -24,10 +24,15 @@ export declare class Image {
     private imgEle;
     private prevSelectedImgEle;
     private isImgUploaded;
+    private isAllowedTypes;
     private pageX;
     private pageY;
     private dialogRenderObj;
     private deletedImg;
+    private changedWidthValue;
+    private changedHeightValue;
+    private inputWidthValue;
+    private inputHeightValue;
     private constructor();
     protected addEventListener(): void;
     protected removeEventListener(): void;
@@ -87,6 +92,7 @@ export declare class Image {
     private imageUrlPopup;
     private insertImageUrl;
     private imgsizeInput;
+    private inputValue;
     private insertSize;
     private insertImage;
     private imgUpload;