@syncfusion/ej2-richtexteditor 20.4.53 → 21.1.35

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);
@@ -628,6 +642,7 @@ var RichTextEditor = /** @class */ (function (_super) {
         var currentEndContainer = range.endContainer;
         var currentStartOffset = range.startOffset;
         var isSameContainer = currentStartContainer === currentEndContainer ? true : false;
+        var currentEndOffset = currentEndContainer.textContent.length;
         var endNode = range.endContainer.nodeName === '#text' ? range.endContainer.parentElement :
             range.endContainer;
         var closestLI = closest(endNode, 'LI');
@@ -713,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;
@@ -1668,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++) {
@@ -1707,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);
     };
@@ -1821,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.
@@ -2072,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;
@@ -2425,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);
@@ -2455,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
  */

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

@@ -5,7 +5,7 @@ import { NavigationPaneSettingsModel, SearchSettingsModel, SortOrder } from '@sy
 import { ToolbarSettingsModel as FileToolbarSettingsModel } from '@syncfusion/ej2-filemanager';
 import { UploadSettingsModel, ViewType } from '@syncfusion/ej2-filemanager';
 import { SaveFormat, DisplayLayoutOptions } from '../../common';
-import { ToolbarType, ActionOnScroll, ToolbarItems } from '../base/enum';
+import { ToolbarType, ActionOnScroll, ToolbarItems, FormatPainterContext } from '../base/enum';
 import { IToolbarItems, IDropDownItemModel, ColorModeType, IToolsItemConfigs, IListDropDownModel } from '../base/interface';
 /**
  * Configures the toolbar settings of the RichTextEditor.
@@ -497,6 +497,29 @@ export declare class QuickToolbarSettings extends ChildProperty<QuickToolbarSett
      */
     table: (string | IToolbarItems)[];
 }
+/**
+ * Configure the format painter settings of the Rich Text Editor.
+ */
+export declare class FormatPainterSettings extends ChildProperty<FormatPainterSettings> {
+    /**
+     * 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;
+}
 /**
  * Configures the Paste Cleanup settings of the RichTextEditor.
  */

package/src/rich-text-editor/models/toolbar-settings.js

@@ -309,6 +309,26 @@ var QuickToolbarSettings = /** @class */ (function (_super) {
     return QuickToolbarSettings;
 }(ChildProperty));
 export { QuickToolbarSettings };
+/**
+ * Configure the format painter settings of the Rich Text Editor.
+ */
+var FormatPainterSettings = /** @class */ (function (_super) {
+    __extends(FormatPainterSettings, _super);
+    function FormatPainterSettings() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    __decorate([
+        Property(['Text', 'List', 'Table'])
+    ], FormatPainterSettings.prototype, "allowedContext", void 0);
+    __decorate([
+        Property('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;')
+    ], FormatPainterSettings.prototype, "allowedFormats", void 0);
+    __decorate([
+        Property(null)
+    ], FormatPainterSettings.prototype, "deniedFormats", void 0);
+    return FormatPainterSettings;
+}(ChildProperty));
+export { FormatPainterSettings };
 /**
  * Configures the Paste Cleanup settings of the RichTextEditor.
  */

package/src/rich-text-editor/renderer/audio-module.js

@@ -181,8 +181,9 @@ var Audio = /** @class */ (function () {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && this.isAudioElem(selectNodeEle[0]) && selectNodeEle.length < 1) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 originalEvent.preventDefault();
                 var event_1 = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -231,8 +232,9 @@ var Audio = /** @class */ (function () {
                 }
                 break;
             case 'insert-audio':
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -258,7 +260,8 @@ var Audio = /** @class */ (function () {
             this.insertAudio({
                 args: {
                     item: { command: 'Audios', subCommand: 'Audio' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle,
                 selection: save,

package/src/rich-text-editor/renderer/image-module.js

@@ -387,7 +387,8 @@ var Image = /** @class */ (function () {
                     img.setAttribute('width', (img.width + this.mouseX).toString());
                 }
                 else {
-                    img.setAttribute('width', (img.offsetWidth + this.mouseX).toString());
+                    var currentWidth = img.offsetWidth === 0 ? img.width + this.mouseX + parseInt(img.style.outlineWidth.split('p')[0]) : img.offsetWidth + this.mouseX;
+                    img.setAttribute('width', (currentWidth).toString());
                 }
             }
         }
@@ -470,7 +471,7 @@ var Image = /** @class */ (function () {
         var pageX = this.getPointX(e);
         var pageY = this.getPointY(e);
         var mouseX = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageX - this.pageX) : (pageX - this.pageX);
-        var mouseY = (this.resizeBtnStat.topLeft || this.resizeBtnStat.topRight) ? -(pageY - this.pageY) : (pageY - this.pageY);
+        var mouseY = (this.resizeBtnStat.botLeft || this.resizeBtnStat.topLeft) ? -(pageY - this.pageY) : (pageY - this.pageY);
         var width = parseInt(this.imgDupPos.width, 10) + mouseX;
         var height = parseInt(this.imgDupPos.height, 10) + mouseY;
         this.mouseX = mouseX;
@@ -641,8 +642,9 @@ var Image = /** @class */ (function () {
         }
         if (originalEvent.keyCode === 8 || originalEvent.keyCode === 46) {
             if (selectNodeEle && selectNodeEle[0].nodeName === 'IMG' && selectNodeEle.length < 1) {
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 originalEvent.preventDefault();
                 var event_1 = {
                     selectNode: selectNodeEle, selection: save, selectParent: selectParentEle,
@@ -701,8 +703,9 @@ var Image = /** @class */ (function () {
                 }
                 break;
             case 'insert-image':
-                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection))
+                if (!isNullOrUndefined(this.parent.formatter.editorManager.nodeSelection)) {
                     save = this.parent.formatter.editorManager.nodeSelection.save(range, this.parent.contentModule.getDocument());
+                }
                 this.openDialog(true, originalEvent, save, selectNodeEle, selectParentEle);
                 originalEvent.preventDefault();
                 break;
@@ -728,7 +731,8 @@ var Image = /** @class */ (function () {
             this.insertImage({
                 args: {
                     item: { command: 'Images', subCommand: 'Image' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle,
                 selection: save,
@@ -739,7 +743,8 @@ var Image = /** @class */ (function () {
             this.insertImage({
                 args: {
                     item: { command: 'Images', subCommand: 'Image' },
-                    originalEvent: event
+                    originalEvent: event,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 member: 'image',
                 text: this.parent.formatter.editorManager.markdownSelection.getSelectedText(this.parent.contentModule.getEditPanel()),

package/src/rich-text-editor/renderer/link-module.js

@@ -198,7 +198,8 @@ var Link = /** @class */ (function () {
             var eventArgs = {
                 args: event ? event.args : {
                     item: { command: 'Links', subCommand: 'CreateLink' },
-                    originalEvent: undefined
+                    originalEvent: undefined,
+                    name: !isInternal ? 'showDialog' : null
                 },
                 selectNode: selectNodeEle, selection: save, selectParent: selectParentEle
             };