@syncfusion/ej2-richtexteditor 19.2.57 → 19.3.43

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

@@ -8,7 +8,7 @@ import { ClickEventArgs } from '@syncfusion/ej2-navigations';
 import { BaseToolbar } from '../actions/base-toolbar';
 import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
 import { NodeSelection } from '../../selection/selection';
-import { EditorMode } from './../../common/types';
+import { EditorMode, EnterKey, ShiftEnterKey } from './../../common/types';
 import { MarkdownSelection } from './../../markdown-parser/plugin/markdown-selection';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';
 import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel } from '../models/models';
@@ -32,6 +32,8 @@ import { PasteCleanup } from '../actions/paste-clean-up';
 import { Popup } from '@syncfusion/ej2-popups';
 import { Resize } from '../actions/resize';
 import { FileManager } from '../actions/file-manager';
+import { NodeCutter, DOMNode } from '../../editor-manager';
+import { EnterKeyAction } from '../actions/enter-key';
 /**
  * Specifies Rich Text Editor interfaces.
  *
@@ -91,6 +93,9 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     fullScreenModule?: FullScreen;
     resizeModule?: Resize;
     refreshUI?(): void;
+    enterKeyModule?: EnterKeyAction;
+    enterKey?: EnterKey;
+    shiftEnterKey?: ShiftEnterKey;
     pasteCleanupModule?: PasteCleanup;
     undoRedoModule?: UndoRedoManager;
     quickToolbarModule?: QuickToolbar;
@@ -363,8 +368,13 @@ export interface ILinkCommandsArgs {
  * Provides information about a Table added to the Rich Text Editor.
  */
 export interface ITableCommandsArgs {
-    /** Defines the number of rows to be inserted in the table */
+    /**
+
+     * This argument deprecated. Use `rows` argument.
+     */
     row?: number;
+    /** Defines the number of rows to be inserted in the table */
+    rows?: number;
     /** Defines the number of columns to be inserted in the table */
     columns?: number;
     /** Defines the minWidth, maxWidth and width of the table */
@@ -380,7 +390,7 @@ export interface ITableCommandsArgs {
 
  */
 export interface ITableArgs {
-    row?: number;
+    rows?: number;
     columns?: number;
     width?: {
         minWidth?: string | number;
@@ -417,6 +427,8 @@ export interface IEditorModel {
     undoRedoManager?: UndoRedoManager | UndoRedoCommands;
     nodeSelection?: NodeSelection;
     mdSelectionFormats?: MDSelectionFormats;
+    domNode?: DOMNode;
+    nodeCutter?: NodeCutter;
 }
 /**
  * Provides information about a ToolbarItems.

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

@@ -1,4 +1,4 @@
-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, isBlazor } from '@syncfusion/ej2-base';import { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs, BeforeCloseEventArgs } 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, ImageDropEventArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType, DialogType } 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 { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';import { FileManagerSettings } 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, isEditableValueEmpty } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';import { Resize } from '../actions/resize';import { FileManager } from '../actions/file-manager';import { EditorManager } from '../../editor-manager';
+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 { Touch as EJ2Touch, TapEventArgs } from '@syncfusion/ej2-base';import { getScrollableParent, BeforeOpenEventArgs, BeforeCloseEventArgs } 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, ImageDropEventArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';import { ServiceLocator } from '../services/service-locator';import { RendererFactory } from '../services/renderer-factory';import { RenderType, ToolbarType, DialogType } from './enum';import { EditorMode, ShiftEnterKey, EnterKey } from './../../common/types';import { Toolbar } from '../actions/toolbar';import { ExecCommandCallBack } from '../actions/execute-command-callback';import { KeyboardEvents, KeyboardEventArgs } from '../actions/keyboard';import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';import { FileManagerSettings } 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 { EnterKeyAction } from '../actions/enter-key';import * as CONSTANT from '../../common/constant';import { IHtmlKeyboardEvent } from '../../editor-manager/base/interface';import { dispatchEvent, getEditValue, isIDevice, decode, isEditableValueEmpty, getDefaultValue } from '../base/util';import { DialogRenderer } from '../renderer/dialog-renderer';import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';import { Resize } from '../actions/resize';import { FileManager } from '../actions/file-manager';import { EditorManager } from '../../editor-manager';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -331,6 +331,32 @@ export interface RichTextEditorModel extends ComponentModel{
      */
     value?: string;
 
+    /**
+     * Specifies tag to be inserted when enter key is pressed.
+     * 
+     * - `P` - When the enter key is pressed a `p` tag will be inserted and the default value of the Rich Text Editor will be <p><br></p>.
+     * 
+     * - `DIV` - When the enter key is pressed a `div` tag will be inserted instead of the default `P` tag and the default value of the Rich Text Editor will be <div><br></div>.
+     * 
+     * - `BR` - When the enter key is pressed a `br` tag will be inserted instead of the default `P` tag and the default value of the Rich Text Editor will be <br>.
+     *
+     * @default 'P'
+     */
+    enterKey?: EnterKey;
+
+    /**
+     * Specifies tags to be inserted when shift+enter key is pressed.
+     * 
+     * - `BR` - When the shift + enter key is pressed a `br` tag will be inserted which is the default behavior.
+     * 
+     * - `P` - When the shift + enter key is pressed a `p` tag will be inserted instead of the default `br` tag.
+     * 
+     * - `DIV` - When the shift + enter key is pressed a `div` tag will be inserted instead of the default `br` tag.
+     *
+     * @default 'BR'
+     */
+    shiftEnterKey?: ShiftEnterKey;
+
     /**
      * Specifies the count of undo history which is stored in undoRedoManager.
      *

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

@@ -5,12 +5,12 @@ import { RichTextEditorModel } from './rich-text-editor-model';
 import { Render } from '../renderer/render';
 import { ViewSource } from '../renderer/view-source';
 import { IRenderer, IFormatter, ActionCompleteEventArgs, ActionBeginEventArgs, ImageDropEventArgs } from './interface';
-import { CommandName, ResizeArgs } from './interface';
+import { CommandName, ResizeArgs, ToolbarStatusEventArgs } from './interface';
 import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, PasteCleanupArgs } from './interface';
 import { ILinkCommandsArgs, IImageCommandsArgs, BeforeSanitizeHtmlArgs, ITableCommandsArgs, ExecuteCommandOption } from './interface';
 import { ServiceLocator } from '../services/service-locator';
 import { DialogType } from './enum';
-import { EditorMode } from './../../common/types';
+import { EditorMode, ShiftEnterKey, EnterKey } from './../../common/types';
 import { Toolbar } from '../actions/toolbar';
 import { KeyboardEvents } from '../actions/keyboard';
 import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';
@@ -26,6 +26,7 @@ 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 { EnterKeyAction } from '../actions/enter-key';
 import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadEventArgs } from '@syncfusion/ej2-inputs';
 import { Resize } from '../actions/resize';
 import { FileManager } from '../actions/file-manager';
@@ -121,6 +122,11 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     /**
      * @hidden
 
+     */
+    enterKeyModule: EnterKeyAction;
+    /**
+     * @hidden
+
      */
     sourceCodeModule: ViewSource;
     /**
@@ -458,6 +464,30 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * @default null
      */
     value: string;
+    /**
+     * Specifies tag to be inserted when enter key is pressed.
+     *
+     * - `P` - When the enter key is pressed a `p` tag will be inserted and the default value of the Rich Text Editor will be &lt;p&gt;&lt;br&gt;&lt;/p&gt;.
+     *
+     * - `DIV` - When the enter key is pressed a `div` tag will be inserted instead of the default `P` tag and the default value of the Rich Text Editor will be &lt;div&gt;&lt;br&gt;&lt;/div&gt;.
+     *
+     * - `BR` - When the enter key is pressed a `br` tag will be inserted instead of the default `P` tag and the default value of the Rich Text Editor will be &lt;br&gt;.
+     *
+     * @default 'P'
+     */
+    enterKey: EnterKey;
+    /**
+     * Specifies tags to be inserted when shift+enter key is pressed.
+     *
+     * - `BR` - When the shift + enter key is pressed a `br` tag will be inserted which is the default behavior.
+     *
+     * - `P` - When the shift + enter key is pressed a `p` tag will be inserted instead of the default `br` tag.
+     *
+     * - `DIV` - When the shift + enter key is pressed a `div` tag will be inserted instead of the default `br` tag.
+     *
+     * @default 'BR'
+     */
+    shiftEnterKey: ShiftEnterKey;
     /**
      * Specifies the count of undo history which is stored in undoRedoManager.
      *
@@ -762,14 +792,14 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
 
      * @event 'object'
      */
-    private toolbarStatusUpdate;
+    toolbarStatusUpdate: EmitType<Object>;
     /**
      * Triggers when the toolbar items status is updated.
      *
      * @event 'object'
      * @blazorType ToolbarUpdateEventArgs
      */
-    private updatedToolbarStatus;
+    updatedToolbarStatus: EmitType<ToolbarStatusEventArgs>;
     /**
      * Event triggers when the image is selected or dragged into the insert image dialog.
      *
@@ -1253,7 +1283,6 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     private InjectSheet;
     private createScriptElement;
     private createStyleElement;
-    private isBlazor;
     private setValue;
     private updateResizeFlag;
     /**

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') {
@@ -1522,7 +1516,14 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
         if (target !== 'windowResize') {
-            setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
+            if (this.iframeSettings.enable) {
+                if (heightValue !== 'auto') {
+                    setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
+                }
+            }
+            else {
+                setStyleAttribute(cntEle, { height: heightValue, marginTop: topValue + 'px' });
+            }
         }
         if (this.iframeSettings.enable && target === 'sourceCode') {
             var codeElement = select('.' + classes.CLS_RTE_CONTENT, this.element);
@@ -1730,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 {
@@ -1779,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;
@@ -1963,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}
@@ -2179,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);
                     }
                 }
             });