@syncfusion/ej2-richtexteditor 21.2.10 → 22.1.34

package/src/rich-text-editor/actions/enter-key.js

@@ -46,7 +46,7 @@ var EnterKeyAction = /** @class */ (function () {
             }
             isTableEnter = blockElement.tagName === 'TD' || blockElement.tagName === 'TBODY' ? false : true;
         }
-        if (e.args.which === 13 && e.args.code === 'Enter') {
+        if (e.args.which === 13 && (!Browser.isDevice ? e.args.code === 'Enter' : e.args.key === 'Enter')) {
             if (isNOU(this.startNode.closest('LI, UL, OL')) && isNOU(this.endNode.closest('LI, UL, OL')) && isTableEnter &&
                 isNOU(this.startNode.closest('PRE')) && isNOU(this.endNode.closest('PRE'))) {
                 var shiftKey_1 = e.args.shiftKey;
@@ -152,7 +152,7 @@ var EnterKeyAction = /** @class */ (function () {
                                 var isFocusedFirst = false;
                                 if (_this.range.startOffset !== 0 && _this.range.endOffset !== 0 &&
                                     _this.range.startContainer === _this.range.endContainer && !(!isNOU(nearBlockNode.childNodes[0])
-                                    && nearBlockNode.childNodes[0].nodeName === 'IMG' && nearBlockNode.querySelectorAll('img, audio, video').length > 0)) {
+                                    && (nearBlockNode.childNodes[0].nodeName === 'IMG' || nearBlockNode.querySelectorAll('img, audio, video').length > 0))) {
                                     var startNodeText = _this.range.startContainer.textContent;
                                     var splitFirstText = startNodeText.substring(0, _this.range.startOffset);
                                     // eslint-disable-next-line max-len

package/src/rich-text-editor/actions/execute-command-callback.js

@@ -1,4 +1,5 @@
 import * as events from '../base/constant';
+import { isNullOrUndefined as isNOU } from '@syncfusion/ej2-base';
 /**
  * `ExecCommandCallBack` module is used to run the editor manager command
  */
@@ -12,7 +13,8 @@ var ExecCommandCallBack = /** @class */ (function () {
         this.parent.on(events.destroy, this.removeEventListener, this);
     };
     ExecCommandCallBack.prototype.commandCallBack = function (args) {
-        if (args.requestType !== 'Undo' && args.requestType !== 'Redo') {
+        var formatPainterCopy = !isNOU(args.requestType) && args.requestType === 'FormatPainter' && args.action === 'format-copy';
+        if (!isNOU(args) && !isNOU(args.requestType) && args.requestType !== 'Undo' && args.requestType !== 'Redo' && !formatPainterCopy) {
             this.parent.formatter.saveData();
         }
         this.parent.notify(events.toolbarRefresh, { args: args });

package/src/rich-text-editor/actions/file-manager.js

@@ -116,6 +116,7 @@ var FileManager = /** @class */ (function () {
             detailsViewSettings: this.parent.fileManagerSettings.detailsViewSettings,
             contextMenuSettings: this.parent.fileManagerSettings.contextMenuSettings,
             navigationPaneSettings: this.parent.fileManagerSettings.navigationPaneSettings,
+            beforeSend: this.parent.fileManagerSettings.beforeSend,
             fileSelect: function (e) {
                 var selectedFile = e.fileDetails;
                 if (selectedFile.isFile && proxy.parent.insertImageSettings.allowedTypes.indexOf(selectedFile.type) > -1) {

package/src/rich-text-editor/actions/format-painter.d.ts

@@ -1,5 +1,5 @@
-import { IRichTextEditor } from '../base/interface';
-export declare class FormatPainter {
+import { IFormatPainter, IRichTextEditor } from '../base/interface';
+export declare class FormatPainter implements IFormatPainter {
     private parent;
     private isSticky;
     private isActive;

package/src/rich-text-editor/actions/format-painter.js

@@ -27,14 +27,10 @@ var FormatPainter = /** @class */ (function () {
     };
     FormatPainter.prototype.onKeyDown = function (event) {
         var originalEvent = event.args;
-        if ((originalEvent.ctrlKey && originalEvent.shiftKey && (originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste'))
+        if ((originalEvent.altKey && originalEvent.shiftKey && (originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste'))
             || (originalEvent.action === 'escape' && (this.previousAction === 'format-copy' || this.previousAction === 'format-paste'))) {
-            if (!isNOU(originalEvent.key) && originalEvent.key.toLowerCase() === 'c') {
-                originalEvent.preventDefault();
-            }
-            if (!isNOU(originalEvent.key) && originalEvent.key.toLowerCase() === 'v' &&
-                this.previousAction === 'format-copy' || this.previousAction === 'format-paste' || this.isSticky) {
-                originalEvent.preventDefault();
+            if ((originalEvent.action === 'format-copy' || originalEvent.action === 'format-paste')) {
+                originalEvent.stopPropagation();
             }
             this.actionHandler(event, 'keyBoard');
         }
@@ -118,8 +114,7 @@ var FormatPainter = /** @class */ (function () {
         }
     };
     FormatPainter.prototype.destroy = function () {
-        /**Removeeventlistener */
-        if (this.parent.isDestroyed) {
+        if (isNOU(this.parent) || this.parent.isDestroyed) {
             return;
         }
         this.parent.off(events.formatPainterClick, this.toolbarClick);
@@ -127,6 +122,13 @@ var FormatPainter = /** @class */ (function () {
         this.parent.off(events.formatPainterDoubleClick, this.toolbarDoubleClick);
         this.parent.off(events.keyDown, this.onKeyDown);
         this.parent.off(events.destroy, this.destroy);
+        if (!isNOU(this.parent.formatter.editorManager.formatPainterEditor)) {
+            this.parent.formatter.editorManager.formatPainterEditor.destroy();
+        }
+        this.parent = undefined;
+        this.isSticky = undefined;
+        this.isActive = undefined;
+        this.previousAction = undefined;
     };
     /**
      * For internal use only - Get the module name.

package/src/rich-text-editor/actions/full-screen.js

@@ -25,6 +25,9 @@ var FullScreen = /** @class */ (function () {
             && !isNOU(this.parent.quickToolbarModule)) {
             this.parent.quickToolbarModule.hideQuickToolbars();
         }
+        if (this.parent.showTooltip && !isNOU(document.querySelector('.e-tooltip-wrap'))) {
+            this.parent.notify(events.maximizeMinimizeClick, { args: event });
+        }
         this.scrollableParent = getScrollableParent(this.parent.element);
         if (!this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {
             var evenArgs = {
@@ -77,6 +80,9 @@ var FullScreen = /** @class */ (function () {
             && !isNOU(this.parent.quickToolbarModule)) {
             this.parent.quickToolbarModule.hideQuickToolbars();
         }
+        if (this.parent.showTooltip && !isNOU(document.querySelector('.e-tooltip-wrap'))) {
+            this.parent.notify(events.maximizeMinimizeClick, { args: event });
+        }
         if (this.parent.element.classList.contains(classes.CLS_FULL_SCREEN)) {
             var evenArgs = {
                 cancel: false,

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

@@ -294,9 +294,15 @@ var HtmlEditor = /** @class */ (function () {
     };
     HtmlEditor.prototype.backSpaceCleanup = function (e, currentRange) {
         var isLiElement = false;
+        var isPreviousNotContentEditable = true;
+        if (!isNOU(currentRange.startContainer.previousSibling) &&
+            currentRange.startContainer.previousSibling.nodeName === 'SPAN') {
+            isPreviousNotContentEditable = currentRange.startContainer.previousSibling.contentEditable === 'false' ? false : true;
+        }
         if (e.args.code === 'Backspace' && e.args.keyCode === 8 && currentRange.startOffset === 0 &&
             currentRange.endOffset === 0 && this.parent.getSelection().length === 0 && currentRange.startContainer.textContent.length > 0 &&
-            currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH') {
+            currentRange.startContainer.parentElement.tagName !== 'TD' && currentRange.startContainer.parentElement.tagName !== 'TH' &&
+            isPreviousNotContentEditable) {
             var checkNode = currentRange.startContainer.nodeName === '#text' ? currentRange.startContainer.parentElement : currentRange.startContainer;
             if (!this.parent.formatter.editorManager.domNode.isBlockNode(checkNode) &&
                 !isNOU(checkNode.previousSibling) && checkNode.previousSibling.nodeName === 'BR') {
@@ -524,7 +530,7 @@ var HtmlEditor = /** @class */ (function () {
                 var resultSplitContent = '';
                 for (var j = 0; j < splitTextContent.length; j++) {
                     if (splitTextContent[j].match(httpRegex) || splitTextContent[j].match(wwwRegex)) {
-                        resultSplitContent += '<a className="e-rte-anchor" href="' + splitTextContent[j] +
+                        resultSplitContent += '<a class="e-rte-anchor" href="' + splitTextContent[j] +
                             '" title="' + splitTextContent[j] + '"target="_blank">' + splitTextContent[j] + ' </a>';
                     }
                     else {
@@ -681,6 +687,9 @@ var HtmlEditor = /** @class */ (function () {
                             member: 'fileManager', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                         });
                         break;
+                    case 'EmojiPicker':
+                        this.parent.notify(events.emojiPicker, { member: 'emojiPicker', args: args });
+                        break;
                     default:
                         this.parent.formatter.process(this.parent, args, args.originalEvent, null);
                         break;

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

@@ -156,6 +156,7 @@ var PasteCleanup = /** @class */ (function () {
             if (Browser.userAgent.indexOf('Firefox') !== -1) {
                 var currentFocusNode = _this.nodeSelectionObj.getRange(_this.contentRenderer.getDocument()).startContainer;
                 if (currentFocusNode.nodeName !== '#text') {
+                    // eslint-disable-next-line
                     currentFocusNode = currentFocusNode.childNodes[_this.nodeSelectionObj.getRange(_this.contentRenderer.getDocument()).startOffset];
                 }
                 if (currentFocusNode.previousSibling.nodeName === 'IMG') {

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

@@ -68,7 +68,7 @@ var Resize = /** @class */ (function () {
         else {
             var eventType = Browser.info.name !== 'msie' ? e.touches[0] : e;
             this.parent.element.style.height = eventType.clientY - boundRect.top + 'px';
-            this.parent.element.style.width = (!this.parent.enableRtl) ? e.clientX - boundRect.left + 'px' : boundRect.right - e.clientX + 'px';
+            this.parent.element.style.width = (!this.parent.enableRtl) ? eventType.clientX - boundRect.left + 'px' : boundRect.right - eventType.clientX + 'px';
         }
         if (!this.parent.toolbarSettings.enable) {
             this.parent.setContentHeight('', false);

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

@@ -22,3 +22,4 @@ export * from './actions/html-attributes';
 export * from './actions/html-toolbar-status';
 export * from './actions/xhtml-validation';
 export * from './actions/format-painter';
+export * from './actions/emoji-picker';

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

@@ -22,3 +22,4 @@ export * from './actions/html-attributes';
 export * from './actions/html-toolbar-status';
 export * from './actions/xhtml-validation';
 export * from './actions/format-painter';
+export * from './actions/emoji-picker';

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

@@ -724,6 +724,16 @@ export declare const formatPainterDoubleClick: string;
 /**
  * @hidden
 
+ */
+export declare const emojiPicker: string;
+/**
+ * @hidden
+
+ */
+export declare const maximizeMinimizeClick: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

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

@@ -724,6 +724,16 @@ export var formatPainterDoubleClick = 'formatPainterDoubleClick';
 /**
  * @hidden
 
+ */
+export var emojiPicker = 'emojiPicker';
+/**
+ * @hidden
+
+ */
+export var maximizeMinimizeClick = 'maximizeMinimizeClick';
+/**
+ * @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,7 +60,3 @@ 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 the context or contexts in which styles will be copied
- */
-export declare type FormatPainterContext = 'Text' | 'List' | 'Table';

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

@@ -10,7 +10,7 @@ import { BaseQuickToolbar } from '../actions/base-quick-toolbar';
 import { NodeSelection } from '../../selection/selection';
 import { EditorMode, EnterKey, ShiftEnterKey } from './../../common/types';
 import { MarkdownSelection } from './../../markdown-parser/plugin/markdown-selection';
-import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel, FormatPainterSettingsModel } from '../models/models';
+import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';
 import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel } from '../models/models';
 import { Count } from '../actions/count';
 import { ColorPicker, ColorPickerEventArgs, ColorPickerModel, FileInfo } from '@syncfusion/ej2-inputs';
@@ -34,9 +34,9 @@ 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 { NodeCutter, DOMNode, IFormatPainterEditor } from '../../editor-manager';
 import { EnterKeyAction } from '../actions/enter-key';
-import { FormatPainter } from '../actions/format-painter';
+import { EmojiPicker } from '../actions/emoji-picker';
 /**
  * Specifies Rich Text Editor interfaces.
  *
@@ -88,12 +88,12 @@ export interface IRichTextEditor extends Component<HTMLElement> {
      *
      * @default
      * {
-     * allowedContext: ['Text', 'List', 'Table'],
      * allowedFormats: 'b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; table; thead; tbody; tr; td; th; ol; ul; li; pre;',
      * deniedFormats: null
      * }
      */
     formatPainterSettings: FormatPainterSettingsModel;
+    emojiPickerSettings: EmojiSettingsModel;
     floatingToolbarOffset?: number;
     showCharCount?: boolean;
     enableTabKey?: boolean;
@@ -143,7 +143,8 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     markdownEditorModule: MarkdownEditor;
     htmlEditorModule: HtmlEditor;
     countModule?: Count;
-    formatPainterModule?: FormatPainter;
+    formatPainterModule?: IFormatPainter;
+    emojiPickerModule?: EmojiPicker;
     serviceLocator?: ServiceLocator;
     setEnable?(): void;
     setReadOnly?(isInit?: boolean): void;
@@ -193,6 +194,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     getSelection(): string;
     currentTarget: HTMLElement;
     focusIn(): void;
+    showEmojiPicker?(x?: number, y?: number): void;
 }
 /**
 
@@ -253,6 +255,7 @@ export interface NotifyArgs {
     touchData?: ITouchData;
     allowedStylePropertiesArray?: string[];
     formatPainterSettings?: FormatPainterSettingsModel;
+    emojiPickerSettings?: EmojiSettingsModel;
 }
 /**
  * Provides information about the current and previous cssClass property .
@@ -294,6 +297,15 @@ export interface ITouchData {
 /**
  * @hidden
 
+ */
+export interface IFormatPainter {
+    /** Stores the previous action. */
+    previousAction: string;
+    destroy: Function;
+}
+/**
+ * @hidden
+
  */
 export interface IColorPickerModel extends ColorPickerModel {
     element?: HTMLElement;
@@ -501,6 +513,22 @@ export interface IFormatPainterArgs {
      */
     formatPainterAction: string;
 }
+export interface IEmojiIcons {
+    /** Defines the description of emoji icon. */
+    desc: string;
+    /** Defines the Unicode of emoji icon. */
+    code: string;
+}
+export interface EmojiIconsSet {
+    /** Defines the name for category the Unicode. */
+    name: string;
+    /** Defines the icon Unicode which is showing in emoji picker toolbar item. */
+    code: string;
+    /** Defines the css class for emoji icon. */
+    iconCss?: string;
+    /** Defines the icons collection. */
+    icons: IEmojiIcons[];
+}
 /**
 
  */
@@ -544,6 +572,7 @@ export interface IEditorModel {
     mdSelectionFormats?: MDSelectionFormats;
     domNode?: DOMNode;
     nodeCutter?: NodeCutter;
+    formatPainterEditor?: IFormatPainterEditor;
 }
 /**
  * Provides information about a ToolbarItems.
@@ -701,6 +730,15 @@ export interface ActionBeginEventArgs {
 
      */
     itemCollection?: IItemCollectionArgs;
+    /**
+     * Defines the emoji picker details.
+     *
+
+     */
+    emojiPickerArgs?: IEmojiPickerArgs;
+}
+export interface IEmojiPickerArgs {
+    emojiSettings: EmojiSettingsModel;
 }
 /**
  * Provides information about a Print event.
@@ -1310,7 +1348,7 @@ export declare const executeGroup: {
 /**
  * Defines types to be used as CommandName.
  */
-export declare type CommandName = 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'superscript' | 'subscript' | 'uppercase' | 'lowercase' | 'fontColor' | 'fontName' | 'fontSize' | 'backColor' | 'justifyCenter' | 'justifyFull' | 'justifyLeft' | 'justifyRight' | 'undo' | 'createLink' | 'formatBlock' | 'heading' | 'indent' | 'insertHTML' | 'insertOrderedList' | 'insertUnorderedList' | 'insertParagraph' | 'outdent' | 'redo' | 'removeFormat' | 'insertText' | 'insertImage' | 'insertAudio' | 'insertVideo' | 'insertHorizontalRule' | 'insertBrOnReturn' | 'insertCode' | 'insertTable' | 'editImage' | 'editLink' | 'applyFormatPainter' | 'copyFormatPainter' | 'escapeFormatPainter';
+export declare type CommandName = 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'superscript' | 'subscript' | 'uppercase' | 'lowercase' | 'fontColor' | 'fontName' | 'fontSize' | 'backColor' | 'justifyCenter' | 'justifyFull' | 'justifyLeft' | 'justifyRight' | 'undo' | 'createLink' | 'formatBlock' | 'heading' | 'indent' | 'insertHTML' | 'insertOrderedList' | 'insertUnorderedList' | 'insertParagraph' | 'outdent' | 'redo' | 'removeFormat' | 'insertText' | 'insertImage' | 'insertAudio' | 'insertVideo' | 'insertHorizontalRule' | 'insertBrOnReturn' | 'insertCode' | 'insertTable' | 'editImage' | 'editLink' | 'applyFormatPainter' | 'copyFormatPainter' | 'escapeFormatPainter' | 'emojiPicker';
 /**
  * @hidden
 

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 } 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, IFormatPainterArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, AfterMediaDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, IAudioCommandsArgs, IVideoCommandsArgs, 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, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel , FormatPainterSettingsModel} from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings } 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 { Audio } from '../renderer/audio-module';import { Video } from '../renderer/video-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 { FormatPainter } from '../actions/format-painter';
+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, IFormatPainterArgs } from './interface';import { IExecutionGroup, executeGroup, CommandName, ResizeArgs, StatusArgs, ToolbarStatusEventArgs } from './interface';import { BeforeQuickToolbarOpenArgs, ChangeEventArgs, AfterImageDeleteEventArgs, AfterMediaDeleteEventArgs, PasteCleanupArgs } from './interface';import { ILinkCommandsArgs, IImageCommandsArgs, IAudioCommandsArgs, IVideoCommandsArgs, 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, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList, FormatPainterSettings, EmojiSettings } 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 { Audio } from '../renderer/audio-module';import { Video } from '../renderer/video-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 { FormatPainter } from '../actions/format-painter';import { EmojiPicker } from '../actions/emoji-picker';
 import {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -94,7 +94,6 @@ export interface RichTextEditorModel extends ComponentModel{
 
     /**
      * Specifies the format painter options in Rich Text Editor with the following properties.
-     * * allowedContext - Sets the context or contexts in which styles will be copied.
      * * allowedFormats - Sets the tag name selectors  for elements from which the formats  can be copied.
      * * deniedFormats - Sets the selectors  for elements from which formats  cannot be copied.
      *
@@ -102,15 +101,21 @@ export interface RichTextEditorModel extends ComponentModel{
      *
      * @default
      * {
-     * allowedContext: ['Text', 'List', 'Table'],
-     * allowedFormats: 'b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; table; thead; tbody; tr; td; th; ol; ul; li; pre;',
+     * allowedFormats: 'b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; ol; ul; li; pre;',
      * deniedFormats: null
      * }
-     * @aspignore
-     * @private
      */
     formatPainterSettings?: FormatPainterSettingsModel
 
+    /**
+     * Specifies the emoji picker options in Rich Text Editor with the following properties.
+     * * iconsSet – Specify an array of items representing emoji icons.
+     * * showSearchBox -  Enables or disables the search box in an emoji picker.
+     *
+     *
+     */
+    emojiPickerSettings?: EmojiSettingsModel
+
     /**
      * Specifies the items to be rendered in an iframe mode, and it has the following properties.
      * * enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.
@@ -660,8 +665,9 @@ export interface RichTextEditorModel extends ComponentModel{
      * {% codeBlock src='rich-text-editor/value-template/index.md' %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType string
      */
-    valueTemplate?: string;
+    valueTemplate?: string | Function;
 
     /**
      * Specifies the saveInterval in milliseconds for autosave the value.

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

@@ -15,7 +15,7 @@ import { Toolbar } from '../actions/toolbar';
 import { KeyboardEvents } from '../actions/keyboard';
 import { FontFamilyModel, FontSizeModel, FontColorModel, FormatModel, BackgroundColorModel, NumberFormatListModel, BulletFormatListModel } from '../models/models';
 import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel } from '../models/models';
-import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel } from '../models/models';
+import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel, EmojiSettingsModel } from '../models/models';
 import { Link } from '../renderer/link-module';
 import { Image } from '../renderer/image-module';
 import { Audio } from '../renderer/audio-module';
@@ -33,6 +33,7 @@ import { SelectedEventArgs, RemovingEventArgs, UploadingEventArgs, BeforeUploadE
 import { Resize } from '../actions/resize';
 import { FileManager } from '../actions/file-manager';
 import { FormatPainter } from '../actions/format-painter';
+import { EmojiPicker } from '../actions/emoji-picker';
 /**
  * Represents the Rich Text Editor component.
  * ```html
@@ -184,6 +185,11 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
 
      */
     formatPainterModule: FormatPainter;
+    /**
+     * @hidden
+
+     */
+    emojiPickerModule: EmojiPicker;
     needsID: boolean;
     /**
      * Specifies the group of items aligned horizontally in the toolbar as well as defined the toolbar rendering type.
@@ -270,7 +276,6 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
     pasteCleanupSettings: PasteCleanupSettingsModel;
     /**
      * Specifies the format painter options in Rich Text Editor with the following properties.
-     * * allowedContext - Sets the context or contexts in which styles will be copied.
      * * allowedFormats - Sets the tag name selectors  for elements from which the formats  can be copied.
      * * deniedFormats - Sets the selectors  for elements from which formats  cannot be copied.
      *
@@ -278,14 +283,19 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      *
      * @default
      * {
-     * allowedContext: ['Text', 'List', 'Table'],
-     * allowedFormats: 'b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; table; thead; tbody; tr; td; th; ol; ul; li; pre;',
+     * allowedFormats: 'b; em; font; sub; sup; kbd; i; s; u; code; strong; span; p; div; h1; h2; h3; h4; h5; h6; blockquote; ol; ul; li; pre;',
      * deniedFormats: null
      * }
-     * @aspignore
-     * @private
      */
     formatPainterSettings: FormatPainterSettingsModel;
+    /**
+     * Specifies the emoji picker options in Rich Text Editor with the following properties.
+     * * iconsSet – Specify an array of items representing emoji icons.
+     * * showSearchBox -  Enables or disables the search box in an emoji picker.
+     *
+     *
+     */
+    emojiPickerSettings: EmojiSettingsModel;
     /**
      * Specifies the items to be rendered in an iframe mode, and it has the following properties.
      * * enable - Set Boolean value to enable, the editors content is placed in an iframe and isolated from the rest of the page.
@@ -799,8 +809,9 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * {% codeBlock src='rich-text-editor/value-template/index.md' %}{% endcodeBlock %}
      *
      * @default null
+     * @aspType string
      */
-    valueTemplate: string;
+    valueTemplate: string | Function;
     /**
      * Specifies the saveInterval in milliseconds for autosave the value.
      * The change event will be triggered if the content was changed from the last saved interval.
@@ -1172,6 +1183,15 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * @public
      */
     getSelection(): string;
+    /**
+     * Shows the emoji picker
+     *
+     * @param {number} x - specifies the number value.
+     * @param {number} y - specifies the number value.
+     * @returns {void}
+     * @public
+     */
+    showEmojiPicker(x?: number, y?: number): void;
     /**
      * Executes the commands
      *