@syncfusion/ej2-richtexteditor 20.4.52 → 21.1.35

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;
     /**

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

@@ -44,7 +44,7 @@ import { RendererFactory } from '../services/renderer-factory';
 import { RenderType, ToolbarType, DialogType } from './enum';
 import { ExecCommandCallBack } from '../actions/execute-command-callback';
 import { KeyboardEvents } from '../actions/keyboard';
-import { ToolbarSettings, ImageSettings, AudioSettings, VideoSettings, QuickToolbarSettings, FontFamily, FontSize, Format, NumberFormatList, BulletFormatList } from '../models/toolbar-settings';
+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';
@@ -118,6 +118,10 @@ var RichTextEditor = /** @class */ (function (_super) {
                 member: 'video',
                 args: [this, this.serviceLocator]
             });
+            modules.push({
+                member: 'formatPainter',
+                args: [this]
+            });
         }
         if (this.fileManagerSettings.enable) {
             modules.push({ member: 'fileManager', args: [this, this.serviceLocator] });
@@ -187,7 +191,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         this.setContainer();
         this.persistData();
         setStyleAttribute(this.element, { 'width': formatUnit(this.width) });
-        attributes(this.element, { role: 'application' });
+        attributes(this.element, { role: 'application', 'aria-label': 'Rich Text Editor' });
     };
     RichTextEditor.prototype.persistData = function () {
         if (this.enablePersistence && this.originalElement.tagName === 'TEXTAREA') {
@@ -328,6 +332,7 @@ var RichTextEditor = /** @class */ (function (_super) {
      */
     RichTextEditor.prototype.executeCommand = function (commandName, value, option) {
         value = this.htmlPurifier(commandName, value);
+        var internalValue;
         if (this.editorMode === 'HTML') {
             var range = this.getRange();
             if (this.iframeSettings.enable) {
@@ -374,7 +379,16 @@ var RichTextEditor = /** @class */ (function (_super) {
                 return;
             }
         }
-        this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (value ? value : tool.value), null, null, (value ? value : tool.value), (value ? value : tool.value));
+        internalValue = value;
+        if (tool.command === 'FormatPainter') {
+            if (!isNOU(value)) {
+                this.formatPainterSettings = value;
+            }
+            internalValue = {
+                formatPainterAction: tool.value
+            };
+        }
+        this.formatter.editorManager.execCommand(tool.command, tool.subCommand ? tool.subCommand : (internalValue ? internalValue : tool.value), null, null, (internalValue ? internalValue : tool.value), (internalValue ? internalValue : tool.value));
         if (option && option.undo) {
             this.formatter.saveData();
             this.formatter.enableUndo(this);
@@ -632,11 +646,13 @@ var RichTextEditor = /** @class */ (function (_super) {
         var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
+        var isDetached = false;
         if (!isNOU(closestLI) && endNode.textContent.length === range.endOffset &&
             !range.collapsed && isNOU(endNode.nextElementSibling)) {
             for (var i = 0; i < closestLI.childNodes.length; i++) {
                 if (closestLI.childNodes[i].nodeName === '#text' && closestLI.childNodes[i].textContent.trim().length === 0) {
                     detach(closestLI.childNodes[i]);
+                    isDetached = true;
                     i--;
                 }
             }
@@ -644,7 +660,11 @@ var RichTextEditor = /** @class */ (function (_super) {
             while (currentLastElem.lastChild !== null && currentLastElem.nodeName !== '#text') {
                 currentLastElem = currentLastElem.lastChild;
             }
-            this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentStartContainer : (currentLastElem.nodeName === 'BR' && !isNOU(currentLastElem.previousSibling) ? currentLastElem.previousSibling : currentStartContainer), currentEndContainer, currentStartOffset, (currentLastElem.nodeName === 'BR' ? 0 : currentEndOffset));
+            if (isDetached) {
+                var currentLast = currentLastElem.nodeName === 'BR' && !isNOU(currentLastElem.previousSibling) ?
+                    currentLastElem.previousSibling : currentLastElem;
+                this.formatter.editorManager.nodeSelection.setSelectionText(this.contentModule.getDocument(), isSameContainer ? currentLast : currentStartContainer, currentLast, currentStartOffset, (currentLast.nodeName === 'BR' ? 0 : currentLast.textContent.length));
+            }
         }
     };
     /**
@@ -708,14 +728,21 @@ var RichTextEditor = /** @class */ (function (_super) {
             this.formatter.saveData();
         }
         if (e.action !== 'insert-link' &&
+            e.action !== 'format-copy' && e.action !== 'format-paste' &&
             (e.action && e.action !== 'paste' && e.action !== 'space'
                 || e.which === 9 || (e.code === 'Backspace' && e.which === 8))) {
-            this.formatter.process(this, null, e);
+            var FormatPainterEscapeAction = false;
+            if (!isNOU(this.formatPainterModule)) {
+                FormatPainterEscapeAction = this.formatPainterModule.previousAction === 'escape';
+            }
+            if (!FormatPainterEscapeAction) {
+                this.formatter.process(this, null, e);
+            }
             switch (e.action) {
                 case 'toolbar-focus':
                     if (this.toolbarSettings.enable) {
                         // eslint-disable-next-line
-                        var selector = '.e-toolbar-item[aria-disabled="false"][title] [tabindex]';
+                        var selector = '.e-toolbar-item[title] [tabindex]';
                         this.toolbarModule.baseToolbar.toolbarObj.element.querySelector(selector).focus();
                     }
                     break;
@@ -1663,6 +1690,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
             else {
                 var compiledTemplate = compile(this.valueTemplate)('', this, 'valueTemplate');
+                // eslint-disable-next-line
                 if (typeof this.valueTemplate !== 'string' && this.isReact) {
                     this.displayTempElem = this.createElement('div');
                     for (var i = 0; i < compiledTemplate.length; i++) {
@@ -1702,7 +1730,7 @@ var RichTextEditor = /** @class */ (function (_super) {
             }
         }
     };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    // eslint-disable-next-line
     RichTextEditor.prototype.renderTemplates = function (callBack) {
         this.renderReactTemplates(callBack);
     };
@@ -1816,7 +1844,9 @@ var RichTextEditor = /** @class */ (function (_super) {
      * @public
      */
     RichTextEditor.prototype.getHtml = function () {
-        return this.serializeValue(this.contentModule.getEditPanel().innerHTML);
+        var htmlValue = this.contentModule.getEditPanel().innerHTML;
+        return (this.enableXhtml && (htmlValue === '<p><br></p>' || htmlValue === '<div><br></div>' ||
+            htmlValue === '<br>') ? null : this.serializeValue(htmlValue));
     };
     /**
      * Retrieves the Rich Text Editor's XHTML validated HTML content when `enableXhtml` property is enabled.
@@ -2067,8 +2097,8 @@ var RichTextEditor = /** @class */ (function (_super) {
         }
         var getTextArea = this.element.querySelector('.e-rte-srctextarea');
         if (this.editorMode === 'HTML') {
-            value = (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>'
-                || this.inputElement.innerHTML === '<br>') ? null : this.enableHtmlEncode ?
+            value = (this.inputElement.innerHTML === '<p><br></p>' || this.inputElement.innerHTML === '<div><br></div>' ||
+                this.inputElement.innerHTML === '<br>') ? null : this.enableHtmlEncode ?
                 this.encode(decode(this.inputElement.innerHTML)) : this.inputElement.innerHTML;
             if (getTextArea && getTextArea.style.display === 'block') {
                 value = getTextArea.value;
@@ -2420,6 +2450,9 @@ var RichTextEditor = /** @class */ (function (_super) {
     __decorate([
         Complex({}, PasteCleanupSettings)
     ], RichTextEditor.prototype, "pasteCleanupSettings", void 0);
+    __decorate([
+        Complex({}, FormatPainterSettings)
+    ], RichTextEditor.prototype, "formatPainterSettings", void 0);
     __decorate([
         Complex({}, IFrameSettings)
     ], RichTextEditor.prototype, "iframeSettings", void 0);
@@ -2450,6 +2483,9 @@ var RichTextEditor = /** @class */ (function (_super) {
     __decorate([
         Property(false)
     ], RichTextEditor.prototype, "enablePersistence", void 0);
+    __decorate([
+        Property(true)
+    ], RichTextEditor.prototype, "showTooltip", void 0);
     __decorate([
         Property(false)
     ], RichTextEditor.prototype, "enableResize", void 0);

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

@@ -512,6 +512,8 @@ export function decode(value) {
 export function sanitizeHelper(value, parent) {
     if (parent.enableHtmlSanitizer) {
         var item = SanitizeHtmlHelper.beforeSanitize();
+        if (item.selectors.tags[2] && item.selectors.tags[2].indexOf('iframe') > -1)
+            item.selectors.tags[2] = 'iframe:not(.e-rte-embed-url)';
         var beforeEvent = {
             cancel: false,
             helper: null

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

@@ -1,4 +1,4 @@
-import { extend, isNullOrUndefined, Browser } from '@syncfusion/ej2-base';
+import { extend, isNullOrUndefined as isNOU, Browser } from '@syncfusion/ej2-base';
 import * as CONSTANT from '../base/constant';
 import { updateUndoRedoStatus, isIDevice } from '../base/util';
 import { KEY_DOWN, KEY_UP } from './../../common/constant';
@@ -27,10 +27,16 @@ var Formatter = /** @class */ (function () {
         var selection = self.contentModule.getDocument().getSelection();
         var range = (selection.rangeCount > 0) ? selection.getRangeAt(selection.rangeCount - 1) : null;
         var saveSelection;
+        var isKeyboardVideoInsert = (!isNOU(value) && !isNOU(value.cssClass) &&
+            value.cssClass !== 'e-video-inline');
         if (self.editorMode === 'HTML') {
-            saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());
+            if (!isNOU(args) && !isKeyboardVideoInsert) {
+                if (isNOU(args.name) || (!isNOU(args.name) && args.name !== 'showDialog')) {
+                    saveSelection = this.editorManager.nodeSelection.save(range, self.contentModule.getDocument());
+                }
+            }
         }
-        if (!isNullOrUndefined(args)
+        if (!isNOU(args)
             && args.item.command
             && args.item.command !== 'Table'
             && args.item.command !== 'Actions'
@@ -45,7 +51,7 @@ var Formatter = /** @class */ (function () {
                 || self.contentModule.getPanel() === range.commonAncestorContainer)) {
             return;
         }
-        if (!isNullOrUndefined(args) && self.maxLength !== -1 && !isNullOrUndefined(args.item.command)) {
+        if (!isNOU(args) && self.maxLength !== -1 && !isNOU(args.item.command)) {
             var currentInsertContentLength = 0;
             if (args.item.command === 'Links') {
                 currentInsertContentLength = value.text.length === 0 ? value.url.length : value.text.length;
@@ -60,7 +66,7 @@ var Formatter = /** @class */ (function () {
                 return;
             }
         }
-        if (isNullOrUndefined(args)) {
+        if (isNOU(args)) {
             var action_1 = event.action;
             if (action_1 !== 'tab' && action_1 !== 'enter' && action_1 !== 'space' && action_1 !== 'escape') {
                 args = {};
@@ -84,7 +90,7 @@ var Formatter = /** @class */ (function () {
                     }
                 });
             }
-            var isTableModule = isNullOrUndefined(self.tableModule) ? true : self.tableModule ?
+            var isTableModule = isNOU(self.tableModule) ? true : self.tableModule ?
                 self.tableModule.ensureInsideTableList : false;
             if ((event.which === 9 && isTableModule) || event.which !== 9) {
                 if (event.which === 13 && self.editorMode === 'HTML') {
@@ -100,22 +106,25 @@ var Formatter = /** @class */ (function () {
                 });
             }
         }
-        else if (!isNullOrUndefined(args) && args.item.command && args.item.subCommand && ((args.item.command !== args.item.subCommand
+        else if (!isNOU(args) && args.item.command && args.item.subCommand && ((args.item.command !== args.item.subCommand
             && args.item.command !== 'Font')
             || ((args.item.subCommand === 'FontName' || args.item.subCommand === 'FontSize') && args.name === 'dropDownSelect')
             || ((args.item.subCommand === 'BackgroundColor' || args.item.subCommand === 'FontColor')
-                && args.name === 'colorPickerChanged'))) {
+                && args.name === 'colorPickerChanged') || args.item.subCommand === 'FormatPainter')) {
             extend(args, args, { requestType: args.item.subCommand, cancel: false, itemCollection: value, selectType: args.name }, true);
             self.trigger(CONSTANT.actionBegin, args, function (actionBeginArgs) {
                 if (!actionBeginArgs.cancel) {
+                    var formatPainterCopyAction = !isNOU(actionBeginArgs.name) && actionBeginArgs.name === 'format-copy';
                     if (_this.getUndoRedoStack().length === 0 && actionBeginArgs.item.command !== 'Links'
-                        && actionBeginArgs.item.command !== 'Images') {
+                        && actionBeginArgs.item.command !== 'Images' && !formatPainterCopyAction) {
                         _this.saveData();
                     }
                     self.isBlur = false;
                     self.contentModule.getEditPanel().focus();
-                    if (self.editorMode === 'HTML') {
-                        saveSelection.restore();
+                    if (self.editorMode === 'HTML' && !isKeyboardVideoInsert) {
+                        if (isNOU(args.selectType) || (!isNOU(args.selectType) && args.selectType !== 'showDialog')) {
+                            saveSelection.restore();
+                        }
                     }
                     var command = actionBeginArgs.item.subCommand.toLocaleLowerCase();
                     if (command === 'paste' || command === 'cut' || command === 'copy') {
@@ -129,7 +138,7 @@ var Formatter = /** @class */ (function () {
                 }
             });
         }
-        if (isNullOrUndefined(event) || event && event.action !== 'copy') {
+        if (isNOU(event) || event && event.action !== 'copy') {
             this.enableUndo(self);
         }
     };
@@ -166,7 +175,7 @@ var Formatter = /** @class */ (function () {
      */
     Formatter.prototype.onSuccess = function (self, events) {
         self.notify(CONSTANT.contentChanged, {});
-        if (events && (isNullOrUndefined(events.event) || events.event.action !== 'copy')) {
+        if (events && (isNOU(events.event) || events.event.action !== 'copy')) {
             this.enableUndo(self);
             self.notify(CONSTANT.execCommandCallBack, events);
         }

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

@@ -1,5 +1,6 @@
 import { Formatter } from './formatter';
 import { IEditorModel, IHtmlFormatterModel } from './../base/interface';
+import { FormatPainterSettingsModel } from '../models';
 /**
  * HTML adapter
  *
@@ -19,14 +20,15 @@ export declare class HTMLFormatter extends Formatter {
     /**
      * Update the formatter of RichTextEditor
      *
-     * @param  {Element} editElement - specifies the edit element.
-     * @param  {Document} doc - specifies the doucment
+     * @param {Element} editElement - specifies the edit element.
+     * @param {Document} doc - specifies the doucment
      * @param {number} options - specifies the options
+     * @param {FormatPainterSettingsModel} formatPainterSettings - specifies the format painter settings
      * @returns {void}
      * @hidden
 
      */
     updateFormatter(editElement: Element, doc?: Document, options?: {
         [key: string]: number;
-    }): void;
+    }, formatPainterSettings?: FormatPainterSettingsModel): void;
 }

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

@@ -28,7 +28,7 @@ var HTMLFormatter = /** @class */ (function (_super) {
         _this.initialize();
         extend(_this, _this, options, true);
         if (_this.currentDocument && _this.element) {
-            _this.updateFormatter(_this.element, _this.currentDocument, options.options);
+            _this.updateFormatter(_this.element, _this.currentDocument, options.options, options.formatPainterSettings);
         }
         return _this;
     }
@@ -38,19 +38,21 @@ var HTMLFormatter = /** @class */ (function (_super) {
     /**
      * Update the formatter of RichTextEditor
      *
-     * @param  {Element} editElement - specifies the edit element.
-     * @param  {Document} doc - specifies the doucment
+     * @param {Element} editElement - specifies the edit element.
+     * @param {Document} doc - specifies the doucment
      * @param {number} options - specifies the options
+     * @param {FormatPainterSettingsModel} formatPainterSettings - specifies the format painter settings
      * @returns {void}
      * @hidden
 
      */
-    HTMLFormatter.prototype.updateFormatter = function (editElement, doc, options) {
+    HTMLFormatter.prototype.updateFormatter = function (editElement, doc, options, formatPainterSettings) {
         if (editElement && doc) {
             this.editorManager = new EditorManager({
                 document: doc,
                 editableElement: editElement,
-                options: options
+                options: options,
+                formatPainterSettings: formatPainterSettings
             });
         }
     };

package/src/rich-text-editor/models/default-locale.js

@@ -190,7 +190,8 @@ export var defaultLocale = {
     'bulletFormatListCircle': 'Circle',
     'bulletFormatListSquare': 'Square',
     'numberFormatListNone': 'None',
-    'bulletFormatListNone': 'None'
+    'bulletFormatListNone': 'None',
+    'formatPainter': 'Format Painter'
 };
 export var toolsLocale = {
     'alignments': 'alignments',
@@ -277,7 +278,8 @@ export var toolsLocale = {
     'alignbottom': 'AlignBottom',
     'insertrowbefore': 'insertRowBefore',
     'insertrowafter': 'insertRowAfter',
-    'deleterow': 'deleteRow'
+    'deleterow': 'deleteRow',
+    'formatpainter': 'formatPainter'
 };
 export var fontNameLocale = [
     { locale: 'fontNameSegoeUI', value: 'Segoe UI' },

package/src/rich-text-editor/models/items.d.ts

@@ -30,3 +30,6 @@ export declare const backgroundColor: {
 export declare const numberFormatList: IListDropDownModel[];
 export declare const bulletFormatList: IListDropDownModel[];
 export declare function updateDropDownLocale(self: IRichTextEditor): void;
+export declare let windowKeys: {
+    [key: string]: string;
+};

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

@@ -551,6 +551,13 @@ export var tools = {
         'tooltip': 'Styles',
         'command': 'Table',
         'subCommand': 'Styles'
+    },
+    'formatpainter': {
+        'id': 'FormatPainter',
+        'icon': 'e-rte-format-painter',
+        'tooltip': 'Format Painter',
+        'command': 'FormatPainter',
+        'subCommand': 'FormatPainter'
     }
 };
 var alignmentLocale = [
@@ -740,3 +747,28 @@ export function updateDropDownLocale(self) {
         TableStyleItems[i].text = getLocale(self, tableStyleLocale, TableStyleItems[i]);
     });
 }
+export var windowKeys = {
+    'Insert Link': 'Ctrl + K',
+    'Insert Image': 'Ctrl + Shift + I',
+    'Create Table': 'Ctrl + Shift + E',
+    'Undo': 'Ctrl + Z',
+    'Redo': 'Ctrl + Y',
+    'Copy': 'Ctrl + C',
+    'Cut': 'Ctrl + X',
+    'Paste': 'Ctrl + V',
+    'Bold': 'Ctrl + B',
+    'Italic': 'Ctrl + I',
+    'Underline': 'Ctrl + U',
+    'Strikethrough': 'Ctrl + Shift + S',
+    'Upper Case': 'Ctrl + Shift + U',
+    'Lower Case': 'Ctrl + Shift + L',
+    'Superscript': 'Ctrl + Shift + =',
+    'Subscript': 'Ctrl + =',
+    'Source Code': 'Ctrl + Shift + H',
+    'Maximize': 'Ctrl + Shift + F',
+    'Minimize': 'Esc',
+    'Clear Format': 'Ctrl + Shift + R',
+    'Numbered List': 'Ctrl + Shift + O',
+    'Bulleted List': 'Ctrl + Alt + O',
+    'Format Painter': 'Ctrl + Shift + C, Ctrl + Shift + V'
+};

package/src/rich-text-editor/models/toolbar-settings-model.d.ts

@@ -1,4 +1,4 @@
-import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { AjaxSettings, AjaxSettingsModel, ContextMenuSettings, ContextMenuSettingsModel } from '@syncfusion/ej2-filemanager';import { DetailsViewSettings, DetailsViewSettingsModel, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';import { NavigationPaneSettingsModel, SearchSettings, SearchSettingsModel, SortOrder } from '@syncfusion/ej2-filemanager';import { ToolbarSettingsModel as FileToolbarSettingsModel, ToolbarSettings as FileToolbarSettings } from '@syncfusion/ej2-filemanager';import { UploadSettings, UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';import { SaveFormat, DisplayLayoutOptions } from '../../common';import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';import { backgroundColor, fontColor, fontFamily, fontSize,  formatItems, predefinedItems, TableStyleItems, numberFormatList, bulletFormatList  } from './items';
+import { Property, ChildProperty, Complex } from '@syncfusion/ej2-base';import { AjaxSettings, AjaxSettingsModel, ContextMenuSettings, ContextMenuSettingsModel } from '@syncfusion/ej2-filemanager';import { DetailsViewSettings, DetailsViewSettingsModel, NavigationPaneSettings } from '@syncfusion/ej2-filemanager';import { NavigationPaneSettingsModel, SearchSettings, SearchSettingsModel, SortOrder } from '@syncfusion/ej2-filemanager';import { ToolbarSettingsModel as FileToolbarSettingsModel, ToolbarSettings as FileToolbarSettings } from '@syncfusion/ej2-filemanager';import { UploadSettings, UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';import { SaveFormat, DisplayLayoutOptions } from '../../common';import { ToolbarType, ActionOnScroll, ToolbarItems, FormatPainterContext } from '../base/enum';import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';import { backgroundColor, fontColor, fontFamily, fontSize,  formatItems, predefinedItems, TableStyleItems, numberFormatList, bulletFormatList  } from './items';
 
 /**
  * Interface for a class ToolbarSettings
@@ -575,6 +575,34 @@ export interface QuickToolbarSettingsModel {
 
 }
 
+/**
+ * Interface for a class FormatPainterSettings
+ */
+export interface FormatPainterSettingsModel {
+
+    /**
+     * Defines the context or contexts in which styles will be copied.
+     *
+     * @default ['Text', 'List', 'Table']
+     */
+    allowedContext?: FormatPainterContext[];
+
+    /**
+     * Defines the tag name selectors for obtaining the formats from the elements.
+     *
+     * @default '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?: string;
+
+    /**
+     * Defines selectors for the elements from which fetching formats is expressly prohibited.
+     *
+     * @default null
+     */
+    deniedFormats?: string;
+
+}
+
 /**
  * Interface for a class PasteCleanupSettings
  */