@syncfusion/ej2-richtexteditor 20.4.53 → 21.1.37

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

@@ -561,117 +561,136 @@ var HtmlEditor = /** @class */ (function () {
         }
     };
     HtmlEditor.prototype.onToolbarClick = function (args) {
+        var _this = this;
         var save;
         var selectNodeEle;
         var selectParentEle;
         var item = args.item;
         var closestElement = closest(args.originalEvent.target, '.e-rte-quick-popup');
-        if (closestElement && !closestElement.classList.contains('e-rte-inline-popup')) {
-            if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||
-                item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {
-                if (isIDevice() && item.command === 'Images') {
-                    this.nodeSelectionObj.restore();
-                }
-                var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());
-                save = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());
-                selectNodeEle = this.nodeSelectionObj.getNodeCollection(range);
-                selectParentEle = this.nodeSelectionObj.getParentNodeCollection(range);
-            }
-            if (item.command === 'Images') {
-                this.parent.notify(events.imageToolbarAction, {
-                    member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                });
-            }
-            if (item.command === 'Audios') {
-                this.parent.notify(events.audioToolbarAction, {
-                    member: 'audio', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                });
-            }
-            if (item.command === 'Videos') {
-                this.parent.notify(events.videoToolbarAction, {
-                    member: 'video', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                });
-            }
-            if (item.command === 'Links') {
-                this.parent.notify(events.linkToolbarAction, {
-                    member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                });
-            }
-            if (item.command === 'Table') {
-                this.parent.notify(events.tableToolbarAction, {
-                    member: 'table', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                });
-            }
-        }
-        else {
-            var linkDialog = document.getElementById(this.parent.getID() + '_rtelink');
-            var imageDialog = document.getElementById(this.parent.getID() + '_image');
-            if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||
-                item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {
-                var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());
-                if (isNullOrUndefined(linkDialog) && isNullOrUndefined(imageDialog)) {
+        if (item.command !== 'FormatPainter') {
+            if (closestElement && !closestElement.classList.contains('e-rte-inline-popup')) {
+                if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||
+                    item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {
+                    if (isIDevice() && item.command === 'Images') {
+                        this.nodeSelectionObj.restore();
+                    }
+                    var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());
                     save = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());
+                    selectNodeEle = this.nodeSelectionObj.getNodeCollection(range);
+                    selectParentEle = this.nodeSelectionObj.getParentNodeCollection(range);
                 }
-                selectNodeEle = this.nodeSelectionObj.getNodeCollection(range);
-                selectParentEle = this.nodeSelectionObj.getParentNodeCollection(range);
-            }
-            switch (item.subCommand) {
-                case 'Maximize':
-                    this.parent.notify(events.enableFullScreen, { args: args });
-                    break;
-                case 'Minimize':
-                    this.parent.notify(events.disableFullScreen, { args: args });
-                    break;
-                case 'CreateLink':
-                    this.parent.notify(events.insertLink, {
-                        member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                    });
-                    break;
-                case 'RemoveLink':
-                    this.parent.notify(events.unLink, {
-                        member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
-                    });
-                    break;
-                case 'Print':
-                    this.parent.print();
-                    break;
-                case 'Image':
-                    this.parent.notify(events.insertImage, {
+                if (item.command === 'Images') {
+                    this.parent.notify(events.imageToolbarAction, {
                         member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                     });
-                    break;
-                case 'Audio':
-                    this.parent.notify(events.insertAudio, {
+                }
+                if (item.command === 'Audios') {
+                    this.parent.notify(events.audioToolbarAction, {
                         member: 'audio', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                     });
-                    break;
-                case 'Video':
-                    this.parent.notify(events.insertVideo, {
+                }
+                if (item.command === 'Videos') {
+                    this.parent.notify(events.videoToolbarAction, {
                         member: 'video', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                     });
-                    break;
-                case 'CreateTable':
-                    this.parent.notify(events.createTable, {
-                        member: 'table', args: args, selection: save
+                }
+                if (item.command === 'Links') {
+                    this.parent.notify(events.linkToolbarAction, {
+                        member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                    });
+                }
+                if (item.command === 'Table') {
+                    this.parent.notify(events.tableToolbarAction, {
+                        member: 'table', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
                     });
-                    break;
-                case 'SourceCode':
-                    this.parent.notify(events.sourceCode, { member: 'viewSource', args: args });
-                    break;
-                case 'Preview':
-                    this.parent.notify(events.updateSource, { member: 'updateSource', args: args });
-                    break;
-                case 'FontColor':
-                case 'BackgroundColor':
-                    break;
-                case 'File':
-                    this.parent.notify(events.renderFileManager, {
-                        member: 'fileManager', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                }
+            }
+            else {
+                var linkDialog = document.getElementById(this.parent.getID() + '_rtelink');
+                var imageDialog = document.getElementById(this.parent.getID() + '_image');
+                if (!(item.subCommand === 'SourceCode' || item.subCommand === 'Preview' ||
+                    item.subCommand === 'FontColor' || item.subCommand === 'BackgroundColor')) {
+                    var range = this.nodeSelectionObj.getRange(this.parent.contentModule.getDocument());
+                    if (isNullOrUndefined(linkDialog) && isNullOrUndefined(imageDialog)) {
+                        save = this.nodeSelectionObj.save(range, this.parent.contentModule.getDocument());
+                    }
+                    selectNodeEle = this.nodeSelectionObj.getNodeCollection(range);
+                    selectParentEle = this.nodeSelectionObj.getParentNodeCollection(range);
+                }
+                switch (item.subCommand) {
+                    case 'Maximize':
+                        this.parent.notify(events.enableFullScreen, { args: args });
+                        break;
+                    case 'Minimize':
+                        this.parent.notify(events.disableFullScreen, { args: args });
+                        break;
+                    case 'CreateLink':
+                        this.parent.notify(events.insertLink, {
+                            member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                        });
+                        break;
+                    case 'RemoveLink':
+                        this.parent.notify(events.unLink, {
+                            member: 'link', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                        });
+                        break;
+                    case 'Print':
+                        this.parent.print();
+                        break;
+                    case 'Image':
+                        this.parent.notify(events.insertImage, {
+                            member: 'image', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                        });
+                        break;
+                    case 'Audio':
+                        this.parent.notify(events.insertAudio, {
+                            member: 'audio', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                        });
+                        break;
+                    case 'Video':
+                        this.parent.notify(events.insertVideo, {
+                            member: 'video', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                        });
+                        break;
+                    case 'CreateTable':
+                        this.parent.notify(events.createTable, {
+                            member: 'table', args: args, selection: save
+                        });
+                        break;
+                    case 'SourceCode':
+                        this.parent.notify(events.sourceCode, { member: 'viewSource', args: args });
+                        break;
+                    case 'Preview':
+                        this.parent.notify(events.updateSource, { member: 'updateSource', args: args });
+                        break;
+                    case 'FontColor':
+                    case 'BackgroundColor':
+                        break;
+                    case 'File':
+                        this.parent.notify(events.renderFileManager, {
+                            member: 'fileManager', args: args, selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
+                        });
+                        break;
+                    default:
+                        this.parent.formatter.process(this.parent, args, args.originalEvent, null);
+                        break;
+                }
+            }
+        }
+        else {
+            if (args.originalEvent.detail === 1) {
+                clearTimeout(this.clickTimeout);
+                this.clickTimeout = setTimeout(function () {
+                    _this.parent.notify(events.formatPainterClick, {
+                        member: 'formatPainter', args: args
                     });
-                    break;
-                default:
-                    this.parent.formatter.process(this.parent, args, args.originalEvent, null);
-                    break;
+                }, 200);
+            }
+            else {
+                clearTimeout(this.clickTimeout);
+                this.parent.notify(events.formatPainterDoubleClick, {
+                    member: 'formatPainter', args: args
+                });
             }
         }
     };
@@ -714,7 +733,8 @@ var HtmlEditor = /** @class */ (function () {
             var formatterClass = new HTMLFormatter({
                 currentDocument: this.contentRenderer.getDocument(),
                 element: editElement,
-                options: option
+                options: option,
+                formatPainterSettings: this.parent.formatPainterSettings
             });
             this.parent.setProperties({ formatter: formatterClass }, true);
         }

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

@@ -318,6 +318,7 @@ var Toolbar = /** @class */ (function () {
             args.baseToolbar.toolbarObj.items[index].tooltipText = item.tooltip;
             args.baseToolbar.toolbarObj.items[index].subCommand = item.subCommand;
             args.baseToolbar.toolbarObj.dataBind();
+            args.baseToolbar.toolbarObj.refreshOverflow();
         }
         else {
             this.addTBarItem(args, 0);
@@ -458,7 +459,11 @@ var Toolbar = /** @class */ (function () {
 
      */
     Toolbar.prototype.refreshToolbarOverflow = function () {
+        this.parent.element.classList.remove(classes.CLS_RTL);
         this.baseToolbar.toolbarObj.refreshOverflow();
+        if (this.parent.enableRtl) {
+            this.parent.element.classList.add(classes.CLS_RTL);
+        }
     };
     Toolbar.prototype.isToolbarDestroyed = function () {
         return this.baseToolbar.toolbarObj && !this.baseToolbar.toolbarObj.isDestroyed;

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

@@ -21,3 +21,4 @@ export * from './actions/full-screen';
 export * from './actions/html-attributes';
 export * from './actions/html-toolbar-status';
 export * from './actions/xhtml-validation';
+export * from './actions/format-painter';

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

@@ -21,3 +21,4 @@ export * from './actions/full-screen';
 export * from './actions/html-attributes';
 export * from './actions/html-toolbar-status';
 export * from './actions/xhtml-validation';
+export * from './actions/format-painter';

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

@@ -714,6 +714,16 @@ export declare const bindCssClass: string;
 /**
  * @hidden
 
+ */
+export declare const formatPainterClick: string;
+/**
+ * @hidden
+
+ */
+export declare const formatPainterDoubleClick: string;
+/**
+ * @hidden
+
  */
 export declare const blockEmptyNodes: string;
 /**

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

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

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

@@ -60,3 +60,7 @@ export declare enum DialogType {
  * Defines types to be used to configure the toolbar items.
  */
 export declare type ToolbarItems = 'alignments' | 'justifyLeft' | 'justifyCenter' | 'justifyRight' | 'justifyFull' | 'fontName' | 'fontSize' | 'fontColor' | 'backgroundColor' | 'bold' | 'italic' | 'underline' | 'strikeThrough' | 'clearFormat' | 'clearAll' | 'cut' | 'copy' | 'paste' | 'unorderedList' | 'orderedList' | 'indent' | 'outdent' | 'undo' | 'redo' | 'superScript' | 'subScript' | 'createLink' | 'openLink' | 'editLink' | 'image' | 'createTable' | 'removeTable' | 'replace' | 'align' | 'caption' | 'remove' | 'openImageLink' | 'editImageLink' | 'removeImageLink' | 'insertLink' | 'display' | 'altText' | 'dimension' | 'fullScreen' | 'maximize' | 'minimize' | 'lowerCase' | 'upperCase' | 'print' | 'formats' | 'sourceCode' | 'preview' | 'viewSide' | 'insertCode' | 'tableHeader' | 'tableRemove' | 'tableRows' | 'tableColumns' | 'tableCellBackground' | 'tableCellHorizontalAlign' | 'tableCellVerticalAlign' | 'tableEditProperties' | 'styles' | 'removeLink' | 'merge';
+/**
+ * Defines 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 } from '../models/models';
+import { ToolbarSettingsModel, IFrameSettingsModel, ImageSettingsModel, AudioSettingsModel, VideoSettingsModel, TableSettingsModel, FormatPainterSettingsModel } 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';
@@ -36,6 +36,7 @@ import { Resize } from '../actions/resize';
 import { FileManager } from '../actions/file-manager';
 import { NodeCutter, DOMNode } from '../../editor-manager';
 import { EnterKeyAction } from '../actions/enter-key';
+import { FormatPainter } from '../actions/format-painter';
 /**
  * Specifies Rich Text Editor interfaces.
  *
@@ -82,6 +83,17 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     fileManagerSettings: FileManagerSettingsModel;
     tableSettings: TableSettingsModel;
     pasteCleanupSettings: PasteCleanupSettingsModel;
+    /**
+     * Configure the format painter settings of the RTE.
+     *
+     * @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;
     floatingToolbarOffset?: number;
     showCharCount?: boolean;
     enableTabKey?: boolean;
@@ -98,6 +110,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     format?: IFormatProperties;
     value?: string;
     saveInterval?: number;
+    showTooltip?: boolean;
     isBlur?: boolean;
     isRTE?: boolean;
     contentModule?: IRenderer;
@@ -130,6 +143,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     markdownEditorModule: MarkdownEditor;
     htmlEditorModule: HtmlEditor;
     countModule?: Count;
+    formatPainterModule?: FormatPainter;
     serviceLocator?: ServiceLocator;
     setEnable?(): void;
     setReadOnly?(isInit?: boolean): void;
@@ -178,6 +192,7 @@ export interface IRichTextEditor extends Component<HTMLElement> {
     getInsertVidMaxWidth?(): string | number;
     getSelection(): string;
     currentTarget: HTMLElement;
+    focusIn(): void;
 }
 /**
 
@@ -237,6 +252,7 @@ export interface NotifyArgs {
     insertElement?: Element;
     touchData?: ITouchData;
     allowedStylePropertiesArray?: string[];
+    formatPainterSettings?: FormatPainterSettingsModel;
 }
 /**
  * Provides information about the current and previous cssClass property .
@@ -475,6 +491,16 @@ export interface ITableCommandsArgs {
     /** Defines the instance of the current selection */
     selection?: NodeSelection;
 }
+/**
+
+ */
+export interface IFormatPainterArgs {
+    /**
+     * Defines the action to be performed.
+     * Allowed values are 'format-copy', 'format-paste', 'escape'.
+     */
+    formatPainterAction: string;
+}
 /**
 
  */
@@ -496,7 +522,7 @@ export interface ITableArgs {
  */
 export interface ITableNotifyArgs {
     module?: string;
-    args?: ClickEventArgs | MouseEvent | KeyboardEventArgs;
+    args?: ClickEventArgs | MouseEvent | KeyboardEventArgs | TouchEvent;
     selection?: NodeSelection;
     selectNode?: Node[];
     selectParent?: Node[];
@@ -843,6 +869,7 @@ export interface IHtmlFormatterModel {
     options?: {
         [key: string]: number;
     };
+    formatPainterSettings?: FormatPainterSettingsModel;
 }
 /**
 
@@ -1275,7 +1302,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';
+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';
 /**
  * @hidden
 

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

@@ -173,5 +173,17 @@ export var executeGroup = {
     'removeFormat': {
         command: 'Clear',
         subCommand: 'ClearFormat'
+    },
+    'copyFormatPainter': {
+        command: 'FormatPainter',
+        value: 'format-copy'
+    },
+    'applyFormatPainter': {
+        command: 'FormatPainter',
+        value: 'format-paste'
+    },
+    'escapeFormatPainter': {
+        command: 'FormatPainter',
+        value: 'escape'
     }
 };

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 } 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 } from '../models/models';import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, 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 { 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 { 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 {ComponentModel} from '@syncfusion/ej2-base';
 
 /**
@@ -92,13 +92,32 @@ export interface RichTextEditorModel extends ComponentModel{
      */
     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.
+     *
+     * {% codeBlock src='rich-text-editor/format-painter-settings/index.md' %}{% endcodeBlock %}
+     *
+     * @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
+     * }
+     * @aspignore
+     * @private
+     */
+    formatPainterSettings?: FormatPainterSettingsModel
+
     /**
      * 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.
      * * attributes - Custom style to be used inside the iframe to display content. This style is added to the iframe body.
      * * resources - we can add both styles and scripts to the iframe.
-     * 1. styles[] - An array of CSS style files to inject inside the iframe to display content.
-     * 2. scripts[] - An array of JS script files to inject inside the iframe.
+     * 1. styles[] - An array of CSS style files to inject inside the iframe to display content
+     * 2. scripts[] - An array of JS script files to inject inside the iframe
      *
      * {% codeBlock src='rich-text-editor/iframe-settings/index.md' %}{% endcodeBlock %}
      *
@@ -287,6 +306,13 @@ export interface RichTextEditorModel extends ComponentModel{
      */
     enablePersistence?: boolean;
 
+    /**
+     * Specify the value whether tooltip will be displayed for the Rich Text Editor toolbar.
+     *
+     * @default false.
+     */
+    showTooltip?: boolean;
+
     /**
      * Enables or disables the resizing option in the editor.
      * If enabled, the Rich Text Editor can be resized by dragging the resize icon in the bottom right corner.
@@ -948,7 +974,7 @@ export interface RichTextEditorModel extends ComponentModel{
      *
      * @event 'afterPasteCleanup'
      */
-    afterPasteCleanup?: EmitType<Object>;
+    afterPasteCleanup?: EmitType<object>;
 
     /**
      * Triggers before drop the image.

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 } from '../models/models';
+import { QuickToolbarSettingsModel, InlineModeModel, PasteCleanupSettingsModel, FileManagerSettingsModel, FormatPainterSettingsModel } from '../models/models';
 import { Link } from '../renderer/link-module';
 import { Image } from '../renderer/image-module';
 import { Audio } from '../renderer/audio-module';
@@ -32,6 +32,7 @@ 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';
+import { FormatPainter } from '../actions/format-painter';
 /**
  * Represents the Rich Text Editor component.
  * ```html
@@ -178,6 +179,11 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
 
      */
     fileManagerModule: FileManager;
+    /**
+     * @hidden
+
+     */
+    formatPainterModule: FormatPainter;
     needsID: boolean;
     /**
      * Specifies the group of items aligned horizontally in the toolbar as well as defined the toolbar rendering type.
@@ -262,13 +268,31 @@ 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.
+     *
+     * {% codeBlock src='rich-text-editor/format-painter-settings/index.md' %}{% endcodeBlock %}
+     *
+     * @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
+     * }
+     * @aspignore
+     * @private
+     */
+    formatPainterSettings: FormatPainterSettingsModel;
     /**
      * 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.
      * * attributes - Custom style to be used inside the iframe to display content. This style is added to the iframe body.
      * * resources - we can add both styles and scripts to the iframe.
-     * 1. styles[] - An array of CSS style files to inject inside the iframe to display content.
-     * 2. scripts[] - An array of JS script files to inject inside the iframe.
+     * 1. styles[] - An array of CSS style files to inject inside the iframe to display content
+     * 2. scripts[] - An array of JS script files to inject inside the iframe
      *
      * {% codeBlock src='rich-text-editor/iframe-settings/index.md' %}{% endcodeBlock %}
      *
@@ -447,6 +471,12 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * @default false.
      */
     enablePersistence: boolean;
+    /**
+     * Specify the value whether tooltip will be displayed for the Rich Text Editor toolbar.
+     *
+     * @default false.
+     */
+    showTooltip: boolean;
     /**
      * Enables or disables the resizing option in the editor.
      * If enabled, the Rich Text Editor can be resized by dragging the resize icon in the bottom right corner.
@@ -1044,7 +1074,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      *
      * @event 'afterPasteCleanup'
      */
-    afterPasteCleanup: EmitType<Object>;
+    afterPasteCleanup: EmitType<object>;
     /**
      * Triggers before drop the image.
      *
@@ -1151,7 +1181,7 @@ export declare class RichTextEditor extends Component<HTMLElement> implements IN
      * @param {ExecuteCommandOption} option - specifies the command option
      * @public
      */
-    executeCommand(commandName: CommandName, value?: string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs | ITableCommandsArgs, option?: ExecuteCommandOption): void;
+    executeCommand(commandName: CommandName, value?: string | HTMLElement | ILinkCommandsArgs | IImageCommandsArgs | ITableCommandsArgs | FormatPainterSettingsModel, option?: ExecuteCommandOption): void;
     private htmlPurifier;
     private encode;
     /**