@syncfusion/ej2-richtexteditor 20.4.52 → 21.1.35

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

@@ -0,0 +1,142 @@
+import { addClass, isNullOrUndefined as isNOU, removeClass } from '@syncfusion/ej2-base';
+import * as events from '../base/constant';
+var FormatPainter = /** @class */ (function () {
+    function FormatPainter(parent) {
+        this.isSticky = false;
+        this.isActive = false;
+        this.parent = parent;
+        this.addEventListener();
+    }
+    FormatPainter.prototype.addEventListener = function () {
+        this.parent.on(events.formatPainterClick, this.toolbarClick, this);
+        this.parent.on(events.formatPainterDoubleClick, this.toolbarDoubleClick, this);
+        this.parent.on(events.editAreaClick, this.editAreaClick, this);
+        this.parent.on(events.keyDown, this.onKeyDown, this);
+        this.parent.on(events.destroy, this.destroy, this);
+    };
+    FormatPainter.prototype.toolbarClick = function (args) {
+        this.isActive = true;
+        this.parent.focusIn();
+        this.actionHandler(args, 'click');
+    };
+    FormatPainter.prototype.toolbarDoubleClick = function (args) {
+        this.isActive = true;
+        this.isSticky = true;
+        this.parent.focusIn();
+        this.actionHandler(args, 'dbClick');
+    };
+    FormatPainter.prototype.onKeyDown = function (event) {
+        var originalEvent = event.args;
+        if ((originalEvent.ctrlKey && 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();
+            }
+            this.actionHandler(event, 'keyBoard');
+        }
+    };
+    FormatPainter.prototype.actionHandler = function (event, type) {
+        var action;
+        var isKeyboard = false;
+        var originalEvent;
+        var args;
+        var item;
+        switch (type) {
+            case 'dbClick':
+                args = event.args;
+                item = args.item;
+                originalEvent = event.args.originalEvent;
+                action = 'format-copy';
+                break;
+            case 'keyBoard':
+                args = null;
+                originalEvent = event.args;
+                isKeyboard = true;
+                action = event.args.action;
+                if (action === 'escape') {
+                    this.isSticky = false;
+                    this.isActive = false;
+                }
+                break;
+            case 'click':
+                args = event.args;
+                item = args.item;
+                originalEvent = event.args.originalEvent;
+                action = 'format-copy';
+                break;
+            case 'docClick':
+                originalEvent = event;
+                action = 'format-paste';
+                break;
+        }
+        this.updateCursor(isKeyboard);
+        var enable = type === 'docClick' || action === 'escape' ? false : true;
+        this.updateToolbarBtn(enable);
+        if (isNOU(item)) {
+            item = {
+                command: 'FormatPainter',
+                subCommand: 'FormatPainter'
+            };
+        }
+        var actionBeginArgs = {
+            requestType: 'FormatPainter', originalEvent: originalEvent, name: action, item: item
+        };
+        var value = {
+            formatPainterAction: action
+        };
+        this.parent.formatter.process(this.parent, actionBeginArgs, originalEvent, value);
+        this.previousAction = action;
+    };
+    FormatPainter.prototype.updateCursor = function (isKeyboard) {
+        if (!this.parent.inputElement.classList.contains('e-rte-cursor-brush') && !isKeyboard) {
+            addClass([this.parent.inputElement], 'e-rte-cursor-brush');
+        }
+        else if (!this.isSticky) {
+            removeClass([this.parent.inputElement], 'e-rte-cursor-brush');
+        }
+    };
+    FormatPainter.prototype.updateToolbarBtn = function (enable) {
+        var toolbarBtn = this.parent.element.querySelector('.e-rte-format-painter').parentElement.parentElement;
+        if (enable) {
+            addClass([toolbarBtn], 'e-active');
+        }
+        else if (!this.isSticky) {
+            removeClass([toolbarBtn], 'e-active');
+        }
+    };
+    FormatPainter.prototype.editAreaClick = function (args) {
+        if (this.isActive) {
+            if (!this.isSticky) {
+                this.isActive = false;
+            }
+            this.actionHandler(args, 'docClick');
+            this.updateToolbarBtn(false);
+        }
+    };
+    FormatPainter.prototype.destroy = function () {
+        /**Removeeventlistener */
+        if (this.parent.isDestroyed) {
+            return;
+        }
+        this.parent.off(events.formatPainterClick, this.toolbarClick);
+        this.parent.off(events.editAreaClick, this.editAreaClick);
+        this.parent.off(events.formatPainterDoubleClick, this.toolbarDoubleClick);
+        this.parent.off(events.keyDown, this.onKeyDown);
+        this.parent.off(events.destroy, this.destroy);
+    };
+    /**
+     * For internal use only - Get the module name.
+     *
+     * @returns {void}
+     * @hidden
+     */
+    FormatPainter.prototype.getModuleName = function () {
+        return 'formatPainter';
+    };
+    return FormatPainter;
+}());
+export { FormatPainter };

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

@@ -106,7 +106,6 @@ var FullScreen = /** @class */ (function () {
                             _this.parent.toolbarModule.addFixedTBarClass();
                         }
                     }
-                    _this.parent.refreshUI();
                     _this.parent.trigger(events.actionComplete, { requestType: 'Minimize', targetItem: 'Minimize', args: event });
                 }
             });

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

@@ -21,6 +21,7 @@ export declare class HtmlEditor {
     private isImageDelete;
     private saveSelection;
     xhtmlValidation: XhtmlValidation;
+    private clickTimeout;
     constructor(parent?: IRichTextEditor, serviceLocator?: ServiceLocator);
     /**
      * Destroys the Markdown.

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/paste-clean-up.js

@@ -651,7 +651,7 @@ var PasteCleanup = /** @class */ (function () {
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 _this.parent.formatter.onSuccess(_this.parent, args);
-            }, clipBoardElem);
+            }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
             this.parent.notify(events.toolbarRefresh, {});
             this.imgUploading(this.parent.inputElement);
@@ -721,7 +721,7 @@ var PasteCleanup = /** @class */ (function () {
             this.parent.formatter.editorManager.execCommand('inserthtml', 'pasteCleanup', args, function (returnArgs) {
                 extend(args, { elements: returnArgs.elements, imageElements: returnArgs.imgElem }, true);
                 _this.parent.formatter.onSuccess(_this.parent, args);
-            }, clipBoardElem);
+            }, clipBoardElem, null, null, this.parent.enterKey);
             this.removeTempClass();
         }
         else {

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

@@ -250,10 +250,17 @@ var QuickToolbar = /** @class */ (function () {
     };
     QuickToolbar.prototype.keyUpHandler = function (e) {
         if (this.parent.inlineMode.enable && !Browser.isDevice) {
+            var args = e.args;
             if (this.parent.inlineMode.onSelection) {
+                if (this.parent.getSelection().length > 0) {
+                    if ((args.ctrlKey && args.keyCode === 65) || (args.shiftKey && (args.keyCode === 33 || args.keyCode === 34 ||
+                        args.keyCode === 35 || args.keyCode === 36 || args.keyCode === 37 || args.keyCode === 38 ||
+                        args.keyCode === 39 || args.keyCode === 40))) {
+                        this.showInlineQTBar(this.offsetX, this.offsetY, args.target);
+                    }
+                }
                 return;
             }
-            var args = e.args;
             this.deBounce(this.offsetX, this.offsetY, args.target);
         }
     };

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;
@@ -557,6 +562,11 @@ var Toolbar = /** @class */ (function () {
     Toolbar.prototype.toolbarClickHandler = function (e) {
         var trg = closest(e.originalEvent.target, '.e-hor-nav');
         if (trg && this.parent.toolbarSettings.type === ToolbarType.Expand && !isNOU(trg)) {
+            var extendedTbar = this.tbElement.querySelector('.e-toolbar-extended');
+            if (!isNOU(extendedTbar)) {
+                setStyleAttribute(extendedTbar, { maxHeight: '', display: 'block' });
+                setStyleAttribute(extendedTbar, { maxHeight: extendedTbar.offsetHeight + 'px', display: '' });
+            }
             if (!trg.classList.contains('e-nav-active')) {
                 removeClass([this.tbElement], [classes.CLS_EXPAND_OPEN]);
                 this.parent.setContentHeight('toolbar', false);

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