@progress/kendo-angular-editor 2.5.0-dev.202111240844 → 3.0.0-dev.202112211443

package/dist/fesm5/index.js

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __assign, __extends, __decorate, __param, __metadata } from 'tslib';
-import { Inject, Optional, Input, ViewChild, ElementRef, Component, isDevMode, Output, EventEmitter, HostBinding, ContentChild, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, TemplateRef, Host, Directive, NgModule } from '@angular/core';
+import { Inject, Optional, Input, ViewChild, ElementRef, Component, Injectable, isDevMode, Output, EventEmitter, HostBinding, ContentChild, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, TemplateRef, Host, Directive, NgModule } from '@angular/core';
 import { FormControl, Validators, FormGroup, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { fromEvent, merge, BehaviorSubject, Subject, zip, interval } from 'rxjs';
-import { take, filter, auditTime, map, concatMap, takeUntil } from 'rxjs/operators';
+import { Subject, fromEvent, BehaviorSubject, zip, interval } from 'rxjs';
+import { take, map, filter, concatMap, takeUntil } from 'rxjs/operators';
 import { ToolBarComponent, ToolBarToolComponent, ToolBarButtonComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
 import { DialogRef, DialogContentBase, DialogService, DialogModule } from '@progress/kendo-angular-dialog';
-import { isDocumentAvailable, guid, KendoInput, Keys } from '@progress/kendo-angular-common';
-import { nodes, Schema, marks, SelectionRange, TextSelection, Fragment, Slice, Selection, NodeSelection, insertNode, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, alignBlocks, alignRemoveRules, alignJustifyRules, alignLeftRules, alignRightRules, formatBlockElements, getHtml, indent, insertImage, toggleOrderedList, toggleUnorderedList, outdent, redo, setHtml, undo, hasMark, activeNode, canIndentAsListItem, canBeIndented, indentRules, hasNode, canOutdentAsListItem, outdentRules, getActiveMarks, expandSelection, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, mergeCells, splitCell, deleteTable, getNodeFromSelection, getMark, getSelectionText, parseContent, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, placeholder, EditorState, EditorView, hasSameMarkup, pasteCleanup, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr } from '@progress/kendo-editor-common';
+import { isDocumentAvailable, guid, PreventableEvent, KendoInput, hasObservers, Keys } from '@progress/kendo-angular-common';
+import { nodes, Schema, marks, SelectionRange, TextSelection, Fragment, Slice, Selection, NodeSelection, insertNode, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, alignBlocks, alignRemoveRules, alignJustifyRules, alignLeftRules, alignRightRules, formatBlockElements, getHtml, indent, insertImage, toggleOrderedList, toggleUnorderedList, outdent, redo, setHtml, undo, hasMark, activeNode, canIndentAsListItem, canBeIndented, indentRules, hasNode, canOutdentAsListItem, outdentRules, getActiveMarks, expandSelection, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, mergeCells, splitCell, deleteTable, getNodeFromSelection, getMark, getSelectionText, parseContent, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, placeholder, EditorState, EditorView, pasteCleanup, AllSelection, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr } from '@progress/kendo-editor-common';
 export { Schema, EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes, getSelectionText } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { L10N_PREFIX, RTL, MessageService, LocalizationService, ComponentMessages } from '@progress/kendo-angular-l10n';
@@ -27,7 +27,7 @@ var packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1637743184,
+    publishDate: 1640097479,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };
@@ -2273,7 +2273,7 @@ var tablesStyles = "\n  .ProseMirror .tableWrapper {\n    overflow-x: auto;\n
  */
 var rtlStyles = 'body { direction: rtl }';
 
-var ɵ0$6 = function (arg) { return "plugins must be a function, but received " + JSON.stringify(arg) + "."; };
+var ɵ0$6 = function (arg) { return "plugins must be a function, but received " + JSON.stringify(arg) + "."; }, ɵ1$6 = function (arg) { return "pastedContent must be a function, but received " + JSON.stringify(arg) + "."; };
 /* tslint:disable:variable-name */
 /**
  * @hidden
@@ -2282,20 +2282,53 @@ var EditorErrorMessages = {
     schemaType: 'Expected value of type Schema. See http://www.telerik.com/kendo-angular-ui/components/editor/schema/',
     setSchemaOnce: 'The Schema cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/schema/',
     pluginsCallbackType: ɵ0$6,
+    pastedContentCallbackType: ɵ1$6,
     setPluginsOnce: 'The plugins cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/plugins/',
     setPlaceHolderOnce: 'The placeholder cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/placeholder/',
     printTool: 'The Print tool and functionality are supported only in iframe mode. See https://www.telerik.com/kendo-angular-ui-develop/components/editor/api/EditorPrintButtonDirective/'
 };
 
+/**
+ * @hidden
+ */
+var EditorToolsService = /** @class */ (function () {
+    function EditorToolsService() {
+        this.needsCheck = new Subject();
+    }
+    EditorToolsService = __decorate([
+        Injectable()
+    ], EditorToolsService);
+    return EditorToolsService;
+}());
+
+/**
+ * The Editor [`paste`]({% slug api_editor_editorcomponent %}#toc-paste) event.
+ */
+var EditorPasteEvent = /** @class */ (function (_super) {
+    __extends(EditorPasteEvent, _super);
+    /**
+     * Constructs the event arguments for the `paste` event.
+     * @hidden
+     */
+    function EditorPasteEvent(cleanedHtml, originalHtml, originalEvent) {
+        var _this = _super.call(this) || this;
+        _this.cleanedHtml = cleanedHtml;
+        _this.originalHtml = originalHtml;
+        _this.originalEvent = originalEvent;
+        return _this;
+    }
+    return EditorPasteEvent;
+}(PreventableEvent));
+
 var EMPTY_PARAGRAPH = '<p></p>';
 var defaultPasteCleanupSettings = {
     convertMsLists: false,
     removeAttributes: [],
     removeHtmlComments: false,
-    removeInvalidHTML: false,
+    removeInvalidHTML: true,
     removeMsClasses: false,
     removeMsStyles: false,
-    stripTags: ['']
+    stripTags: []
 };
 var removeCommentsIf = conditionallyExecute(removeComments);
 var removeInvalidHTMLIf = conditionallyExecute(sanitize);
@@ -2316,13 +2349,14 @@ var getPasteCleanupAttributes = function (config) {
  * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
  */
 var EditorComponent = /** @class */ (function () {
-    function EditorComponent(dialogService, localization, cdr, ngZone, element) {
+    function EditorComponent(dialogService, localization, cdr, ngZone, element, toolsService) {
         var _this = this;
         this.dialogService = dialogService;
         this.localization = localization;
         this.cdr = cdr;
         this.ngZone = ngZone;
         this.element = element;
+        this.toolsService = toolsService;
         /**
          * If set to `false`, the Editor will run in style non-encapsulated mode. This means
          * that the styles of the page will be persisted in the Editor and its content will be affected by them.
@@ -2334,14 +2368,6 @@ var EditorComponent = /** @class */ (function () {
          * @default false
          */
         this.applyToWord = false;
-        /**
-         * By design, the Editor emits `valueChange`, updates the model and the ToolBar state on each keystroke.
-         * When you are interested in ignoring the new values for a given amout of time and take only the most recent one, you can use the `updateInterval` property.
-         * A possible use case is to get the new values and to update the ToolBar state at a maximum rate per second in order to speed up your application.
-         * The specified interval (in milliseconds) should be a positive number.
-         * By default the `updateInterval` is set to 100 miliseconds. If set to zero the delay will be disabled entirely.
-         */
-        this.updateInterval = 100;
         /**
          * By default, whitespace is collapsed as per HTML's rules.
          * Set to `true` to preserve whitespace, but normalize newlines to spaces.
@@ -2367,6 +2393,11 @@ var EditorComponent = /** @class */ (function () {
          * Fires when the content area of the Editor is focused ([see example]({% slug overview_editor %}#toc-events)).
          */
         this.onFocus = new EventEmitter();
+        /**
+         * Fires when the user performs paste in the content area of the Editor ([see example]({% slug overview_editor %}#toc-events)).
+         * The event is preventable. If you cancel it, the Editor content will not change.
+         */
+        this.paste = new EventEmitter();
         /**
          * Fires when the content area of the Editor is blurred ([see example]({% slug overview_editor %}#toc-events)).
          */
@@ -2382,10 +2413,73 @@ var EditorComponent = /** @class */ (function () {
         this.valueModified = new Subject();
         this._readonly = false;
         this._placeholder = '';
+        this.inForm = false;
         this.afterViewInit = new Subject();
         this.contentAreaLoaded = new Subject();
-        this.onChangeCallback = function (_) { }; // tslint:disable-line:no-empty
+        this.dispatchTransaction = function (tr) {
+            var docChanged = tr.docChanged;
+            if (docChanged) {
+                var doc = tr.doc;
+                var html_1 = getHtml({ doc: doc });
+                _this.trOnChange = tr;
+                _this.htmlOnChange = html_1;
+                _this.ngZone.run(function () {
+                    _this.valueModified.next(html_1);
+                });
+            }
+            if (!docChanged || _this.inForm) {
+                _this.view.updateState(_this.view.state.apply(tr));
+            }
+        };
+        this.transformPastedHTML = function (dirtyHtml) {
+            var pasteCleanupSettings = __assign({}, defaultPasteCleanupSettings, _this.pasteCleanupSettings);
+            var html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
+            var clean = pasteCleanup(html, {
+                convertMsLists: pasteCleanupSettings.convertMsLists,
+                stripTags: pasteCleanupSettings.stripTags.join('|'),
+                attributes: getPasteCleanupAttributes(pasteCleanupSettings)
+            });
+            if (hasObservers(_this.paste)) {
+                var event_1 = new EditorPasteEvent(clean, dirtyHtml, _this._pasteEvent);
+                _this.ngZone.run(function () { return _this.paste.emit(event_1); });
+                return event_1.isDefaultPrevented() ? '' : event_1.cleanedHtml;
+            }
+            return clean;
+        };
+        this.changeValue = function (value) {
+            var prev = _this._value;
+            _this._value = value;
+            if (!_this._view) {
+                return;
+            }
+            if (_this.htmlOnChange === value && _this.trOnChange) {
+                _this.view.updateState(_this.view.state.apply(_this.trOnChange));
+            }
+            else {
+                if ((prev || '') !== (value || '')) {
+                    var iframeContentWindowNotPresent = _this.iframe && !_this.container.element.nativeElement.contentWindow;
+                    if (iframeContentWindowNotPresent) {
+                        return;
+                    }
+                    var state = _this.view.state;
+                    var nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: _this.preserveWhitespace });
+                    var tr = state.tr
+                        .setSelection(new AllSelection(state.doc))
+                        .replaceSelectionWith(nextDoc);
+                    _this.view.updateState(state.apply(tr));
+                }
+            }
+            _this.trOnChange = null;
+            _this.htmlOnChange = null;
+        };
+        this.onChangeCallback = function (value) {
+            _this.changeValue(value);
+        };
         this.onTouchedCallback = function (_) { }; // tslint:disable-line:no-empty
+        this.onPaste = function (_view, nativeEvent) {
+            _this._pasteEvent = nativeEvent;
+            return false;
+        };
         validatePackage(packageMetadata);
         this.direction = localization.rtl ? 'rtl' : 'ltr';
         // https://stackoverflow.com/questions/56572483/chrome-is-synchronously-handling-iframe-loading-whereas-firefox-handles-it-asyn
@@ -2394,6 +2488,9 @@ var EditorComponent = /** @class */ (function () {
     EditorComponent_1 = EditorComponent;
     Object.defineProperty(EditorComponent.prototype, "value", {
         get: function () {
+            if (this.trOnChange) {
+                return this.htmlOnChange;
+            }
             var value = this._view ? this.getSource() : this._value;
             if (value === EMPTY_PARAGRAPH) {
                 return this._value ? '' : this._value;
@@ -2406,23 +2503,7 @@ var EditorComponent = /** @class */ (function () {
          * Sets the value of the Editor ([see example]({% slug overview_editor %}#toc-basic-usage)).
          */
         set: function (value) {
-            if (this._previousValue === value) {
-                return;
-            }
-            this._value = value;
-            this._previousValue = value;
-            if (this._view) {
-                var iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
-                if (iframeContentWindowNotPresent) {
-                    return;
-                }
-                this.exec('setHTML', {
-                    content: this._value || '',
-                    parseOptions: {
-                        preserveWhitespace: this.preserveWhitespace
-                    }
-                });
-            }
+            this.changeValue(value);
         },
         enumerable: true,
         configurable: true
@@ -2670,6 +2751,7 @@ var EditorComponent = /** @class */ (function () {
             var rtl = _a.rtl;
             _this.direction = rtl ? 'rtl' : 'ltr';
         }));
+        this.subs.add(this.toolsService.needsCheck.subscribe(function () { return _this.cdr.markForCheck(); }));
     };
     EditorComponent.prototype.ngAfterViewInit = function () {
         this.afterViewInit.next();
@@ -2682,6 +2764,9 @@ var EditorComponent = /** @class */ (function () {
     };
     EditorComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
+        if (changes.value && this.view) {
+            this.changeValue(changes.value.currentValue);
+        }
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.initialize(); });
         }
@@ -2767,8 +2852,6 @@ var EditorComponent = /** @class */ (function () {
         var command = editorCommands[commandName](attr);
         // Executes a ProseMirror command.
         command(this._view.state, this._view.dispatch, this._view);
-        // See the `dispatchTransaction` comments.
-        // this.stateChange.emit(updateToolBar(this.view));
     };
     /**
      * Opens a dialog.
@@ -2853,6 +2936,7 @@ var EditorComponent = /** @class */ (function () {
      * @hidden
      */
     EditorComponent.prototype.writeValue = function (value) {
+        this.inForm = true;
         // To avoid confusion, non-existent values are always undefined.
         this.value = value === null ? undefined : value;
     };
@@ -2881,7 +2965,6 @@ var EditorComponent = /** @class */ (function () {
             return;
         }
         var currentSchema = this.schema || schema;
-        var that = this;
         var containerNativeElement = this.container.element.nativeElement;
         var contentNode = parseContent((this.value || '').trim(), currentSchema, { preserveWhitespace: this.preserveWhitespace });
         if (this.iframe) {
@@ -2925,7 +3008,7 @@ var EditorComponent = /** @class */ (function () {
             }),
             new Plugin({
                 key: new PluginKey('editor-filter-disabled-state'),
-                filterTransaction: function () { return !_this.disabled; }
+                filterTransaction: function () { return !_this.disabled || _this.inForm; }
             }),
             history(),
             keymap(buildListKeymap(currentSchema)),
@@ -2952,31 +3035,10 @@ var EditorComponent = /** @class */ (function () {
             _this._view = new EditorView({ mount: _this.viewMountElement }, {
                 state: state,
                 editable: function () { return !_this.readonly; },
-                dispatchTransaction: function (tr) {
-                    // `this` is bound to the view instance.
-                    this.updateState(this.state.apply(tr));
-                    // that.cdr.detectChanges();
-                    // When the user utilizes keyboard shortcuts&mdash;for example, `Ctrl`+`b`&mdash;
-                    // `tr.docChanged` is `true` and the toolbar is not updated.
-                    // A possible future solution is to move the keymaps to the service.
-                    // if (!tr.docChanged) {
-                    //     that.stateChange.emit(updateToolBar(that.view));
-                    // }
-                    var value = that.value;
-                    if (!hasSameMarkup(value, that._previousValue, this.state.schema)) {
-                        that._previousValue = value;
-                        that.ngZone.run(function () { return that.valueModified.next(value); });
-                    }
-                },
-                transformPastedHTML: function (html) {
-                    var pasteCleanupSettings = __assign({}, defaultPasteCleanupSettings, _this.pasteCleanupSettings);
-                    var clean = pipe(removeCommentsIf(pasteCleanupSettings.removeHtmlComments), removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML))(html);
-                    var attributes = getPasteCleanupAttributes(pasteCleanupSettings);
-                    return pasteCleanup(clean, {
-                        convertMsLists: pasteCleanupSettings.convertMsLists,
-                        stripTags: pasteCleanupSettings.stripTags.join('|'),
-                        attributes: attributes
-                    });
+                dispatchTransaction: _this.dispatchTransaction,
+                transformPastedHTML: _this.transformPastedHTML,
+                handleDOMEvents: {
+                    paste: _this.onPaste
                 }
             });
         });
@@ -3017,7 +3079,7 @@ var EditorComponent = /** @class */ (function () {
                 _this.cdr.detectChanges();
             }
         }));
-        this.subs.add(merge(this.valueModified.pipe(filter(function () { return _this.updateInterval > 0; }), auditTime(this.updateInterval)), this.valueModified.pipe(filter(function () { return _this.updateInterval === 0; }))).subscribe(function (value) {
+        this.subs.add(this.valueModified.subscribe(function (value) {
             _this.onChangeCallback(value);
             _this.valueChange.emit(value);
             _this.cdr.markForCheck();
@@ -3111,10 +3173,6 @@ var EditorComponent = /** @class */ (function () {
         __metadata("design:type", String),
         __metadata("design:paramtypes", [String])
     ], EditorComponent.prototype, "placeholder", null);
-    __decorate([
-        Input(),
-        __metadata("design:type", Number)
-    ], EditorComponent.prototype, "updateInterval", void 0);
     __decorate([
         Input(),
         __metadata("design:type", Object)
@@ -3135,6 +3193,10 @@ var EditorComponent = /** @class */ (function () {
         Output('focus'),
         __metadata("design:type", EventEmitter)
     ], EditorComponent.prototype, "onFocus", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], EditorComponent.prototype, "paste", void 0);
     __decorate([
         Output('blur'),
         __metadata("design:type", EventEmitter)
@@ -3222,6 +3284,7 @@ var EditorComponent = /** @class */ (function () {
             selector: 'kendo-editor',
             providers: [
                 EditorLocalizationService,
+                EditorToolsService,
                 {
                     provide: LocalizationService,
                     useExisting: EditorLocalizationService
@@ -3241,7 +3304,7 @@ var EditorComponent = /** @class */ (function () {
                 }
             ],
             /* tslint:disable:max-line-length */
-            template: "\n        <ng-container\n            kendoEditorLocalizedMessages\n            i18n-alignCenter=\"kendo.editor.alignCenter|The title of the tool that aligns text in the center.\"\n            alignCenter=\"Center text\"\n            i18n-alignJustify=\"kendo.editor.alignJustify|The title of the tool that justifies text both left and right.\"\n            alignJustify=\"Justify\"\n            i18n-alignLeft=\"kendo.editor.alignLeft|The title of the tool that aligns text on the left.\"\n            alignLeft=\"Align text left\"\n            i18n-alignRight=\"kendo.editor.alignRight|The title of the tool that aligns text on the right.\"\n            alignRight=\"Align text right\"\n            i18n-backColor=\"kendo.editor.backColor|The title of the tool that changes the text background color.\"\n            backColor=\"Background color\"\n            i18n-bold=\"kendo.editor.bold|The title of the tool that makes text bold.\"\n            bold=\"Bold\"\n            i18n-cleanFormatting=\"kendo.editor.cleanFormatting|The title of the Clean Formatting tool.\"\n            cleanFormatting=\"Clean formatting\"\n            i18n-createLink=\"kendo.editor.createLink|The title of the tool that creates hyperlinks.\"\n            createLink=\"Insert link\"\n            i18n-dialogApply=\"kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs.\"\n            dialogApply=\"Apply\"\n            i18n-dialogCancel=\"kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs.\"\n            dialogCancel=\"Cancel\"\n            i18n-dialogInsert=\"kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs.\"\n            dialogInsert=\"Insert\"\n            i18n-dialogUpdate=\"kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs.\"\n            dialogUpdate=\"Update\"\n            i18n-fileText=\"kendo.editor.fileText|The caption for the file text in the insertFile dialog.\"\n            fileText=\"Text\"\n            i18n-fileTitle=\"kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog.\"\n            fileTitle=\"Title\"\n            i18n-fileWebAddress=\"kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog.\"\n            fileWebAddress=\"Web address\"\n            i18n-fontFamily=\"kendo.editor.fontFamily|The title of the tool that changes the text font.\"\n            fontFamily=\"Select font family\"\n            i18n-fontSize=\"kendo.editor.fontSize|The title of the tool that changes the text size.\"\n            fontSize=\"Select font size\"\n            i18n-foreColor=\"kendo.editor.foreColor|The title of the tool that changes the text color.\"\n            foreColor=\"Color\"\n            i18n-format=\"kendo.editor.format|The title of the tool that lets users choose block formats.\"\n            format=\"Format\"\n            i18n-imageAltText=\"kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog.\"\n            imageAltText=\"Alternate text\"\n            i18n-imageHeight=\"kendo.editor.imageHeight|The caption for the image height in the insertImage dialog.\"\n            imageHeight=\"Height (px)\"\n            i18n-imageWebAddress=\"kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog.\"\n            imageWebAddress=\"Web address\"\n            i18n-imageWidth=\"kendo.editor.imageWidth|The caption for the image width in the insertImage dialog.\"\n            imageWidth=\"Width (px)\"\n            i18n-indent=\"kendo.editor.indent|The title of the tool that indents the content.\"\n            indent=\"Indent\"\n            i18n-insertFile=\"kendo.editor.insertFile|The title of the tool that inserts links to files.\"\n            insertFile=\"Insert file\"\n            i18n-insertImage=\"kendo.editor.insertImage|The title of the tool that inserts images.\"\n            insertImage=\"Insert image\"\n            i18n-insertOrderedList=\"kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list.\"\n            insertOrderedList=\"Insert ordered list\"\n            i18n-insertUnorderedList=\"kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list.\"\n            insertUnorderedList=\"Insert unordered list\"\n            i18n-italic=\"kendo.editor.italic|The title of the tool that makes text italicized.\"\n            italic=\"Italic\"\n            i18n-linkOpenInNewWindow=\"kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog.\"\n            linkOpenInNewWindow=\"Open link in new window\"\n            i18n-linkText=\"kendo.editor.linkText|The caption for the link text in the createLink dialog.\"\n            linkText=\"Text\"\n            i18n-linkTitle=\"kendo.editor.linkTitle|The caption for the link title in the createLink dialog.\"\n            linkTitle=\"Title\"\n            i18n-linkWebAddress=\"kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog.\"\n            linkWebAddress=\"Web address\"\n            i18n-outdent=\"kendo.editor.outdent|The title of the tool that outdents the content.\"\n            outdent=\"Outdent\"\n            i18n-print=\"kendo.editor.print|The title of the print tool.\"\n            print=\"Print\"\n            i18n-redo=\"kendo.editor.redo|The title of the tool that undos the last action.\"\n            redo=\"Redo\"\n            i18n-selectAll=\"kendo.editor.selectAll|The title of the tool that selects all content.\"\n            selectAll=\"Select All\"\n            i18n-strikethrough=\"kendo.editor.strikethrough|The title of the tool that strikes through text.\"\n            strikethrough=\"Strikethrough\"\n            i18n-subscript=\"kendo.editor.subscript|The title of the tool that makes text subscript.\"\n            subscript=\"Subscript\"\n            i18n-superscript=\"kendo.editor.superscript|The title of the tool that makes text superscript.\"\n            superscript=\"Superscript\"\n            i18n-underline=\"kendo.editor.underline|The title of the tool that underlines text.\"\n            underline=\"Underline\"\n            i18n-unlink=\"kendo.editor.unlink|The title of the tool that removes hyperlinks.\"\n            unlink=\"Remove Link\"\n            i18n-undo=\"kendo.editor.undo|The title of the tool that undos the last action.\"\n            undo=\"Undo\"\n            i18n-viewSource=\"kendo.editor.viewSource|The title of the tool that shows the editor value as HTML.\"\n            viewSource=\"View source\"\n            i18n-insertTable=\"kendo.editor.insertTable|The title of the tool that inserts table.\"\n            insertTable=\"Insert Table\"\n            i18n-addColumnBefore=\"kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column.\"\n            addColumnBefore=\"Add column before\"\n            i18n-addColumnAfter=\"kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column.\"\n            addColumnAfter=\"Add column after\"\n            i18n-addRowBefore=\"kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row.\"\n            addRowBefore=\"Add row before\"\n            i18n-addRowAfter=\"kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row.\"\n            addRowAfter=\"Add row after\"\n            i18n-deleteColumn=\"kendo.editor.deleteColumn|The title of the tool that deletes a table column.\"\n            deleteColumn=\"Delete column\"\n            i18n-deleteRow=\"kendo.editor.deleteRow|The title of the tool that deletes a table row.\"\n            deleteRow=\"Delete row\"\n            i18n-deleteTable=\"kendo.editor.deleteTable|The title of the tool that deletes a table.\"\n            deleteTable=\"Delete table\"\n        >\n        </ng-container>\n\n        <ng-content select=\"kendo-toolbar\"></ng-content>\n        <kendo-toolbar [overflow]=\"true\" [tabindex]=\"readonly ? -1 : 0\" *ngIf=\"!userToolBarElement\" #defaultToolbar>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\n        </kendo-toolbar>\n\n        <div *ngIf=\"!iframe\" #content [attr.dir]=\"direction\" class=\"k-editor-content\"></div>\n\n        <div class=\"k-editor-content\" *ngIf=\"iframe\">\n            <iframe #content frameborder=\"0\" class=\"k-iframe\" (load)=\"iframeOnLoad()\"></iframe>\n        </div>\n\n        <ng-container #dialogsContainer></ng-container>\n    ",
+            template: "\n        <ng-container\n            kendoEditorLocalizedMessages\n            i18n-alignCenter=\"kendo.editor.alignCenter|The title of the tool that aligns text in the center.\"\n            alignCenter=\"Center text\"\n            i18n-alignJustify=\"kendo.editor.alignJustify|The title of the tool that justifies text both left and right.\"\n            alignJustify=\"Justify\"\n            i18n-alignLeft=\"kendo.editor.alignLeft|The title of the tool that aligns text on the left.\"\n            alignLeft=\"Align text left\"\n            i18n-alignRight=\"kendo.editor.alignRight|The title of the tool that aligns text on the right.\"\n            alignRight=\"Align text right\"\n            i18n-backColor=\"kendo.editor.backColor|The title of the tool that changes the text background color.\"\n            backColor=\"Background color\"\n            i18n-bold=\"kendo.editor.bold|The title of the tool that makes text bold.\"\n            bold=\"Bold\"\n            i18n-cleanFormatting=\"kendo.editor.cleanFormatting|The title of the Clean Formatting tool.\"\n            cleanFormatting=\"Clean formatting\"\n            i18n-createLink=\"kendo.editor.createLink|The title of the tool that creates hyperlinks.\"\n            createLink=\"Insert link\"\n            i18n-dialogApply=\"kendo.editor.dialogApply|The label of the **Apply** button in all editor dialogs.\"\n            dialogApply=\"Apply\"\n            i18n-dialogCancel=\"kendo.editor.dialogCancel|The label of the **Cancel** button in all editor dialogs.\"\n            dialogCancel=\"Cancel\"\n            i18n-dialogInsert=\"kendo.editor.dialogInsert|The label of the **Insert** button in all editor dialogs.\"\n            dialogInsert=\"Insert\"\n            i18n-dialogUpdate=\"kendo.editor.dialogUpdate|The label of the **Update** button in all editor dialogs.\"\n            dialogUpdate=\"Update\"\n            i18n-fileText=\"kendo.editor.fileText|The caption for the file text in the insertFile dialog.\"\n            fileText=\"Text\"\n            i18n-fileTitle=\"kendo.editor.fileTitle|The caption for the file Title in the insertFile dialog.\"\n            fileTitle=\"Title\"\n            i18n-fileWebAddress=\"kendo.editor.fileWebAddress|The caption for the file URL in the insertFile dialog.\"\n            fileWebAddress=\"Web address\"\n            i18n-fontFamily=\"kendo.editor.fontFamily|The title of the tool that changes the text font.\"\n            fontFamily=\"Select font family\"\n            i18n-fontSize=\"kendo.editor.fontSize|The title of the tool that changes the text size.\"\n            fontSize=\"Select font size\"\n            i18n-foreColor=\"kendo.editor.foreColor|The title of the tool that changes the text color.\"\n            foreColor=\"Color\"\n            i18n-format=\"kendo.editor.format|The title of the tool that lets users choose block formats.\"\n            format=\"Format\"\n            i18n-imageAltText=\"kendo.editor.imageAltText|The caption for the image alternate text in the insertImage dialog.\"\n            imageAltText=\"Alternate text\"\n            i18n-imageHeight=\"kendo.editor.imageHeight|The caption for the image height in the insertImage dialog.\"\n            imageHeight=\"Height (px)\"\n            i18n-imageWebAddress=\"kendo.editor.imageWebAddress|The caption for the image URL in the insertImage dialog.\"\n            imageWebAddress=\"Web address\"\n            i18n-imageWidth=\"kendo.editor.imageWidth|The caption for the image width in the insertImage dialog.\"\n            imageWidth=\"Width (px)\"\n            i18n-indent=\"kendo.editor.indent|The title of the tool that indents the content.\"\n            indent=\"Indent\"\n            i18n-insertFile=\"kendo.editor.insertFile|The title of the tool that inserts links to files.\"\n            insertFile=\"Insert file\"\n            i18n-insertImage=\"kendo.editor.insertImage|The title of the tool that inserts images.\"\n            insertImage=\"Insert image\"\n            i18n-insertOrderedList=\"kendo.editor.insertOrderedList|The title of the tool that inserts an ordered list.\"\n            insertOrderedList=\"Insert ordered list\"\n            i18n-insertUnorderedList=\"kendo.editor.insertUnorderedList|The title of the tool that inserts an unordered list.\"\n            insertUnorderedList=\"Insert unordered list\"\n            i18n-italic=\"kendo.editor.italic|The title of the tool that makes text italicized.\"\n            italic=\"Italic\"\n            i18n-linkOpenInNewWindow=\"kendo.editor.linkOpenInNewWindow|The caption for the checkbox for opening the link in a new window in the createLink dialog.\"\n            linkOpenInNewWindow=\"Open link in new window\"\n            i18n-linkText=\"kendo.editor.linkText|The caption for the link text in the createLink dialog.\"\n            linkText=\"Text\"\n            i18n-linkTitle=\"kendo.editor.linkTitle|The caption for the link title in the createLink dialog.\"\n            linkTitle=\"Title\"\n            i18n-linkWebAddress=\"kendo.editor.linkWebAddress|The caption for the URL in the createLink dialog.\"\n            linkWebAddress=\"Web address\"\n            i18n-outdent=\"kendo.editor.outdent|The title of the tool that outdents the content.\"\n            outdent=\"Outdent\"\n            i18n-print=\"kendo.editor.print|The title of the print tool.\"\n            print=\"Print\"\n            i18n-redo=\"kendo.editor.redo|The title of the tool that undos the last action.\"\n            redo=\"Redo\"\n            i18n-selectAll=\"kendo.editor.selectAll|The title of the tool that selects all content.\"\n            selectAll=\"Select All\"\n            i18n-strikethrough=\"kendo.editor.strikethrough|The title of the tool that strikes through text.\"\n            strikethrough=\"Strikethrough\"\n            i18n-subscript=\"kendo.editor.subscript|The title of the tool that makes text subscript.\"\n            subscript=\"Subscript\"\n            i18n-superscript=\"kendo.editor.superscript|The title of the tool that makes text superscript.\"\n            superscript=\"Superscript\"\n            i18n-underline=\"kendo.editor.underline|The title of the tool that underlines text.\"\n            underline=\"Underline\"\n            i18n-unlink=\"kendo.editor.unlink|The title of the tool that removes hyperlinks.\"\n            unlink=\"Remove Link\"\n            i18n-undo=\"kendo.editor.undo|The title of the tool that undos the last action.\"\n            undo=\"Undo\"\n            i18n-viewSource=\"kendo.editor.viewSource|The title of the tool that shows the editor value as HTML.\"\n            viewSource=\"View source\"\n            i18n-insertTable=\"kendo.editor.insertTable|The title of the tool that inserts table.\"\n            insertTable=\"Insert Table\"\n            i18n-addColumnBefore=\"kendo.editor.addColumnBefore|The title of the tool that adds new column before currently selected column.\"\n            addColumnBefore=\"Add column before\"\n            i18n-addColumnAfter=\"kendo.editor.addColumnAfter|The title of the tool that adds new column after currently selected column.\"\n            addColumnAfter=\"Add column after\"\n            i18n-addRowBefore=\"kendo.editor.addRowBefore|The title of the tool that adds new row before currently selected row.\"\n            addRowBefore=\"Add row before\"\n            i18n-addRowAfter=\"kendo.editor.addRowAfter|The title of the tool that adds new row after currently selected row.\"\n            addRowAfter=\"Add row after\"\n            i18n-deleteColumn=\"kendo.editor.deleteColumn|The title of the tool that deletes a table column.\"\n            deleteColumn=\"Delete column\"\n            i18n-deleteRow=\"kendo.editor.deleteRow|The title of the tool that deletes a table row.\"\n            deleteRow=\"Delete row\"\n            i18n-deleteTable=\"kendo.editor.deleteTable|The title of the tool that deletes a table.\"\n            deleteTable=\"Delete table\"\n        >\n        </ng-container>\n\n        <ng-content select=\"kendo-toolbar\"></ng-content>\n        <kendo-toolbar [overflow]=\"true\" [tabindex]=\"readonly ? -1 : 0\" *ngIf=\"!userToolBarElement\" #defaultToolbar>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-dropdownlist kendoEditorFormat></kendo-toolbar-dropdownlist>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorAlignLeftButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignCenterButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignRightButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorAlignJustifyButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorInsertUnorderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorInsertOrderedListButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorIndentButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorOutdentButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-buttongroup>\n                <kendo-toolbar-button kendoEditorCreateLinkButton></kendo-toolbar-button>\n                <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>\n            </kendo-toolbar-buttongroup>\n            <kendo-toolbar-button kendoEditorInsertImageButton></kendo-toolbar-button>\n        </kendo-toolbar>\n\n        <div *ngIf=\"!iframe\" #content [attr.dir]=\"direction\" class=\"k-editor-content\"></div>\n\n        <div class=\"k-editor-content\" *ngIf=\"iframe\">\n            <iframe #content srcdoc=\"<!DOCTYPE html>\" frameborder=\"0\" class=\"k-iframe\" (load)=\"iframeOnLoad()\"></iframe>\n        </div>\n\n        <ng-container #dialogsContainer></ng-container>\n    ",
             styles: [
                 "\n            >>> .k-editor-content > .ProseMirror {\n                height: 100%;\n                width: 100%;\n                box-sizing: border-box;\n                outline: none;\n                overflow: auto;\n            }\n\n            .k-iframe {\n                width: 100%;\n                height: 100%;\n                display: block;\n            }\n        "
             ]
@@ -3250,7 +3313,8 @@ var EditorComponent = /** @class */ (function () {
             LocalizationService,
             ChangeDetectorRef,
             NgZone,
-            ElementRef])
+            ElementRef,
+            EditorToolsService])
     ], EditorComponent);
     return EditorComponent;
 }());
@@ -3603,11 +3667,12 @@ var InsertTableDialogComponent = /** @class */ (function (_super) {
  */
 var EditorFormatComponent = /** @class */ (function (_super) {
     __extends(EditorFormatComponent, _super);
-    function EditorFormatComponent(editor, dialogService, localization) {
+    function EditorFormatComponent(editor, dialogService, localization, toolsService) {
         var _this = _super.call(this) || this;
         _this.editor = editor;
         _this.dialogService = dialogService;
         _this.localization = localization;
+        _this.toolsService = toolsService;
         _this.disabled = false;
         _this.tabindex = -1;
         /**
@@ -3650,7 +3715,10 @@ var EditorFormatComponent = /** @class */ (function (_super) {
                 return itemArgs.dataItem.tag === null;
             }
         };
-        setTimeout(function () { return (_this.defaultItem = { text: _this.title, tag: null }); });
+        setTimeout(function () {
+            _this.defaultItem = { text: _this.title, tag: null };
+            _this.toolsService.needsCheck.next();
+        });
         this.subs = this.editor.stateChange.subscribe(function (_a) {
             var format = _a.format;
             var index = _this.data.findIndex(function (item) { return item.tag === format.selected.tag; });
@@ -3769,7 +3837,8 @@ var EditorFormatComponent = /** @class */ (function (_super) {
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
             DialogService,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorFormatComponent);
     return EditorFormatComponent;
 }(ToolBarToolComponent));
@@ -3905,11 +3974,12 @@ var FontSizeDialogComponent = /** @class */ (function (_super) {
  */
 var EditorFontSizeComponent = /** @class */ (function (_super) {
     __extends(EditorFontSizeComponent, _super);
-    function EditorFontSizeComponent(editor, dialogService, localization) {
+    function EditorFontSizeComponent(editor, dialogService, localization, toolsService) {
         var _this = _super.call(this) || this;
         _this.editor = editor;
         _this.dialogService = dialogService;
         _this.localization = localization;
+        _this.toolsService = toolsService;
         _this.disabled = false;
         _this.tabindex = -1;
         /**
@@ -3951,7 +4021,10 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
                 return itemArgs.dataItem.size === null;
             }
         };
-        setTimeout(function () { return (_this.defaultItem = { text: _this.title, size: null }); });
+        setTimeout(function () {
+            _this.defaultItem = { text: _this.title, size: null };
+            _this.toolsService.needsCheck.next();
+        });
         this.subs = this.editor.stateChange.subscribe(function (_a) {
             // remove units(px, em, rem...)
             // string#match returns array
@@ -4074,7 +4147,8 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
             DialogService,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorFontSizeComponent);
     return EditorFontSizeComponent;
 }(ToolBarToolComponent));
@@ -4092,11 +4166,12 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
  */
 var EditorFontFamilyComponent = /** @class */ (function (_super) {
     __extends(EditorFontFamilyComponent, _super);
-    function EditorFontFamilyComponent(editor, dialogService, localization) {
+    function EditorFontFamilyComponent(editor, dialogService, localization, toolsService) {
         var _this = _super.call(this) || this;
         _this.editor = editor;
         _this.dialogService = dialogService;
         _this.localization = localization;
+        _this.toolsService = toolsService;
         _this.disabled = false;
         _this.tabindex = -1;
         /**
@@ -4145,7 +4220,10 @@ var EditorFontFamilyComponent = /** @class */ (function (_super) {
                 return itemArgs.dataItem.fontName === null;
             }
         };
-        setTimeout(function () { return (_this.defaultItem = { text: _this.title, fontName: null }); });
+        setTimeout(function () {
+            _this.defaultItem = { text: _this.title, fontName: null };
+            _this.toolsService.needsCheck.next();
+        });
         this.subs = this.editor.stateChange.subscribe(function (_a) {
             var style = _a.style;
             _this.value = getUniqueStyleValues(style.selected, 'font-family') || null;
@@ -4266,7 +4344,8 @@ var EditorFontFamilyComponent = /** @class */ (function (_super) {
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
             DialogService,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorFontFamilyComponent);
     return EditorFontFamilyComponent;
 }(ToolBarToolComponent));
@@ -4765,12 +4844,13 @@ var commandIcons = {
  * @hidden
  */
 var EditorCommandBase = /** @class */ (function () {
-    function EditorCommandBase(command, button, editor, localization) {
+    function EditorCommandBase(command, button, editor, localization, toolsService) {
         var _this = this;
         this.command = command;
         this.button = button;
         this.editor = editor;
         this.localization = localization;
+        this.toolsService = toolsService;
         setTimeout(function () {
             var text = _this.localization.get(_this.command);
             if (text) {
@@ -4782,6 +4862,7 @@ var EditorCommandBase = /** @class */ (function () {
                 _this.button.icon = commandIcons[_this.command];
             }
             _this.button.title = text;
+            _this.toolsService.needsCheck.next();
         });
     }
     EditorCommandBase.prototype.ngOnInit = function () {
@@ -4808,12 +4889,13 @@ var EditorCommandBase = /** @class */ (function () {
  */
 var EditorCommandButton = /** @class */ (function (_super) {
     __extends(EditorCommandButton, _super);
-    function EditorCommandButton(command, button, editor, localization) {
-        var _this = _super.call(this, command, button, editor, localization) || this;
+    function EditorCommandButton(command, button, editor, localization, toolsService) {
+        var _this = _super.call(this, command, button, editor, localization, toolsService) || this;
         _this.command = command;
         _this.button = button;
         _this.editor = editor;
         _this.localization = localization;
+        _this.toolsService = toolsService;
         return _this;
     }
     EditorCommandButton.prototype.clickHandler = function () {
@@ -4850,8 +4932,8 @@ var EditorCommandButton = /** @class */ (function (_super) {
  */
 var EditorAlignLeftButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAlignLeftButtonDirective, _super);
-    function EditorAlignLeftButtonDirective(button, editor, localization) {
-        return _super.call(this, 'alignLeft', button, editor, localization) || this;
+    function EditorAlignLeftButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'alignLeft', button, editor, localization, toolsService) || this;
     }
     EditorAlignLeftButtonDirective = __decorate([
         Directive({
@@ -4860,7 +4942,8 @@ var EditorAlignLeftButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignLeftButtonDirective);
     return EditorAlignLeftButtonDirective;
 }(EditorCommandButton));
@@ -4885,8 +4968,8 @@ var EditorAlignLeftButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAlignCenterButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAlignCenterButtonDirective, _super);
-    function EditorAlignCenterButtonDirective(button, editor, localization) {
-        return _super.call(this, 'alignCenter', button, editor, localization) || this;
+    function EditorAlignCenterButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'alignCenter', button, editor, localization, toolsService) || this;
     }
     EditorAlignCenterButtonDirective = __decorate([
         Directive({
@@ -4895,7 +4978,8 @@ var EditorAlignCenterButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignCenterButtonDirective);
     return EditorAlignCenterButtonDirective;
 }(EditorCommandButton));
@@ -4920,8 +5004,8 @@ var EditorAlignCenterButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAlignRightButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAlignRightButtonDirective, _super);
-    function EditorAlignRightButtonDirective(button, editor, localization) {
-        return _super.call(this, 'alignRight', button, editor, localization) || this;
+    function EditorAlignRightButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'alignRight', button, editor, localization, toolsService) || this;
     }
     EditorAlignRightButtonDirective = __decorate([
         Directive({
@@ -4930,7 +5014,8 @@ var EditorAlignRightButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignRightButtonDirective);
     return EditorAlignRightButtonDirective;
 }(EditorCommandButton));
@@ -4955,8 +5040,8 @@ var EditorAlignRightButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAlignJustifyButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAlignJustifyButtonDirective, _super);
-    function EditorAlignJustifyButtonDirective(button, editor, localization) {
-        return _super.call(this, 'alignJustify', button, editor, localization) || this;
+    function EditorAlignJustifyButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'alignJustify', button, editor, localization, toolsService) || this;
     }
     EditorAlignJustifyButtonDirective = __decorate([
         Directive({
@@ -4965,7 +5050,8 @@ var EditorAlignJustifyButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignJustifyButtonDirective);
     return EditorAlignJustifyButtonDirective;
 }(EditorCommandButton));
@@ -4990,8 +5076,8 @@ var EditorAlignJustifyButtonDirective = /** @class */ (function (_super) {
  */
 var EditorRedoButtonDirective = /** @class */ (function (_super) {
     __extends(EditorRedoButtonDirective, _super);
-    function EditorRedoButtonDirective(button, editor, localization) {
-        return _super.call(this, 'redo', button, editor, localization) || this;
+    function EditorRedoButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'redo', button, editor, localization, toolsService) || this;
     }
     EditorRedoButtonDirective = __decorate([
         Directive({
@@ -5000,7 +5086,8 @@ var EditorRedoButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorRedoButtonDirective);
     return EditorRedoButtonDirective;
 }(EditorCommandButton));
@@ -5025,8 +5112,8 @@ var EditorRedoButtonDirective = /** @class */ (function (_super) {
  */
 var EditorUndoButtonDirective = /** @class */ (function (_super) {
     __extends(EditorUndoButtonDirective, _super);
-    function EditorUndoButtonDirective(button, editor, localization) {
-        return _super.call(this, 'undo', button, editor, localization) || this;
+    function EditorUndoButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'undo', button, editor, localization, toolsService) || this;
     }
     EditorUndoButtonDirective = __decorate([
         Directive({
@@ -5035,7 +5122,8 @@ var EditorUndoButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorUndoButtonDirective);
     return EditorUndoButtonDirective;
 }(EditorCommandButton));
@@ -5045,12 +5133,13 @@ var EditorUndoButtonDirective = /** @class */ (function (_super) {
  */
 var EditorCommandDialog = /** @class */ (function (_super) {
     __extends(EditorCommandDialog, _super);
-    function EditorCommandDialog(dialog, button, editor, localization) {
-        var _this = _super.call(this, dialog, button, editor, localization) || this;
+    function EditorCommandDialog(dialog, button, editor, localization, toolsService) {
+        var _this = _super.call(this, dialog, button, editor, localization, toolsService) || this;
         _this.dialog = dialog;
         _this.button = button;
         _this.editor = editor;
         _this.localization = localization;
+        _this.toolsService = toolsService;
         return _this;
     }
     EditorCommandDialog.prototype.clickHandler = function () {
@@ -5082,8 +5171,8 @@ var EditorCommandDialog = /** @class */ (function (_super) {
  */
 var EditorInsertImageButtonDirective = /** @class */ (function (_super) {
     __extends(EditorInsertImageButtonDirective, _super);
-    function EditorInsertImageButtonDirective(button, editor, localization) {
-        return _super.call(this, 'insertImage', button, editor, localization) || this;
+    function EditorInsertImageButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'insertImage', button, editor, localization, toolsService) || this;
     }
     EditorInsertImageButtonDirective = __decorate([
         Directive({
@@ -5092,7 +5181,8 @@ var EditorInsertImageButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertImageButtonDirective);
     return EditorInsertImageButtonDirective;
 }(EditorCommandDialog));
@@ -5117,8 +5207,8 @@ var EditorInsertImageButtonDirective = /** @class */ (function (_super) {
  */
 var EditorIndentButtonDirective = /** @class */ (function (_super) {
     __extends(EditorIndentButtonDirective, _super);
-    function EditorIndentButtonDirective(button, editor, localization) {
-        return _super.call(this, 'indent', button, editor, localization) || this;
+    function EditorIndentButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'indent', button, editor, localization, toolsService) || this;
     }
     EditorIndentButtonDirective = __decorate([
         Directive({
@@ -5127,7 +5217,8 @@ var EditorIndentButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorIndentButtonDirective);
     return EditorIndentButtonDirective;
 }(EditorCommandButton));
@@ -5152,8 +5243,8 @@ var EditorIndentButtonDirective = /** @class */ (function (_super) {
  */
 var EditorOutdentButtonDirective = /** @class */ (function (_super) {
     __extends(EditorOutdentButtonDirective, _super);
-    function EditorOutdentButtonDirective(button, editor, localization) {
-        return _super.call(this, 'outdent', button, editor, localization) || this;
+    function EditorOutdentButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'outdent', button, editor, localization, toolsService) || this;
     }
     EditorOutdentButtonDirective = __decorate([
         Directive({
@@ -5162,7 +5253,8 @@ var EditorOutdentButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorOutdentButtonDirective);
     return EditorOutdentButtonDirective;
 }(EditorCommandButton));
@@ -5187,8 +5279,8 @@ var EditorOutdentButtonDirective = /** @class */ (function (_super) {
  */
 var EditorCreateLinkButtonDirective = /** @class */ (function (_super) {
     __extends(EditorCreateLinkButtonDirective, _super);
-    function EditorCreateLinkButtonDirective(button, editor, localization) {
-        return _super.call(this, 'createLink', button, editor, localization) || this;
+    function EditorCreateLinkButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'createLink', button, editor, localization, toolsService) || this;
     }
     EditorCreateLinkButtonDirective = __decorate([
         Directive({
@@ -5197,7 +5289,8 @@ var EditorCreateLinkButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorCreateLinkButtonDirective);
     return EditorCreateLinkButtonDirective;
 }(EditorCommandDialog));
@@ -5222,8 +5315,8 @@ var EditorCreateLinkButtonDirective = /** @class */ (function (_super) {
  */
 var EditorUnlinkButtonDirective = /** @class */ (function (_super) {
     __extends(EditorUnlinkButtonDirective, _super);
-    function EditorUnlinkButtonDirective(button, editor, localization) {
-        return _super.call(this, 'unlink', button, editor, localization) || this;
+    function EditorUnlinkButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'unlink', button, editor, localization, toolsService) || this;
     }
     EditorUnlinkButtonDirective = __decorate([
         Directive({
@@ -5232,7 +5325,8 @@ var EditorUnlinkButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorUnlinkButtonDirective);
     return EditorUnlinkButtonDirective;
 }(EditorCommandButton));
@@ -5257,8 +5351,8 @@ var EditorUnlinkButtonDirective = /** @class */ (function (_super) {
  */
 var EditorInsertOrderedListButtonDirective = /** @class */ (function (_super) {
     __extends(EditorInsertOrderedListButtonDirective, _super);
-    function EditorInsertOrderedListButtonDirective(button, editor, localization) {
-        return _super.call(this, 'insertOrderedList', button, editor, localization) || this;
+    function EditorInsertOrderedListButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'insertOrderedList', button, editor, localization, toolsService) || this;
     }
     EditorInsertOrderedListButtonDirective = __decorate([
         Directive({
@@ -5267,7 +5361,8 @@ var EditorInsertOrderedListButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertOrderedListButtonDirective);
     return EditorInsertOrderedListButtonDirective;
 }(EditorCommandButton));
@@ -5292,8 +5387,8 @@ var EditorInsertOrderedListButtonDirective = /** @class */ (function (_super) {
  */
 var EditorInsertUnorderedListButtonDirective = /** @class */ (function (_super) {
     __extends(EditorInsertUnorderedListButtonDirective, _super);
-    function EditorInsertUnorderedListButtonDirective(button, editor, localization) {
-        return _super.call(this, 'insertUnorderedList', button, editor, localization) || this;
+    function EditorInsertUnorderedListButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'insertUnorderedList', button, editor, localization, toolsService) || this;
     }
     EditorInsertUnorderedListButtonDirective = __decorate([
         Directive({
@@ -5302,7 +5397,8 @@ var EditorInsertUnorderedListButtonDirective = /** @class */ (function (_super)
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertUnorderedListButtonDirective);
     return EditorInsertUnorderedListButtonDirective;
 }(EditorCommandButton));
@@ -5326,8 +5422,8 @@ var EditorInsertUnorderedListButtonDirective = /** @class */ (function (_super)
  */
 var EditorViewSourceButtonDirective = /** @class */ (function (_super) {
     __extends(EditorViewSourceButtonDirective, _super);
-    function EditorViewSourceButtonDirective(button, editor, localization) {
-        return _super.call(this, 'viewSource', button, editor, localization) || this;
+    function EditorViewSourceButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'viewSource', button, editor, localization, toolsService) || this;
     }
     EditorViewSourceButtonDirective = __decorate([
         Directive({
@@ -5336,7 +5432,8 @@ var EditorViewSourceButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorViewSourceButtonDirective);
     return EditorViewSourceButtonDirective;
 }(EditorCommandDialog));
@@ -5361,8 +5458,8 @@ var EditorViewSourceButtonDirective = /** @class */ (function (_super) {
  */
 var EditorBoldButtonDirective = /** @class */ (function (_super) {
     __extends(EditorBoldButtonDirective, _super);
-    function EditorBoldButtonDirective(button, editor, localization) {
-        return _super.call(this, 'bold', button, editor, localization) || this;
+    function EditorBoldButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'bold', button, editor, localization, toolsService) || this;
     }
     EditorBoldButtonDirective = __decorate([
         Directive({
@@ -5371,7 +5468,8 @@ var EditorBoldButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorBoldButtonDirective);
     return EditorBoldButtonDirective;
 }(EditorCommandButton));
@@ -5396,8 +5494,8 @@ var EditorBoldButtonDirective = /** @class */ (function (_super) {
  */
 var EditorItalicButtonDirective = /** @class */ (function (_super) {
     __extends(EditorItalicButtonDirective, _super);
-    function EditorItalicButtonDirective(button, editor, localization) {
-        return _super.call(this, 'italic', button, editor, localization) || this;
+    function EditorItalicButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'italic', button, editor, localization, toolsService) || this;
     }
     EditorItalicButtonDirective = __decorate([
         Directive({
@@ -5406,7 +5504,8 @@ var EditorItalicButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorItalicButtonDirective);
     return EditorItalicButtonDirective;
 }(EditorCommandButton));
@@ -5431,8 +5530,8 @@ var EditorItalicButtonDirective = /** @class */ (function (_super) {
  */
 var EditorUnderlineButtonDirective = /** @class */ (function (_super) {
     __extends(EditorUnderlineButtonDirective, _super);
-    function EditorUnderlineButtonDirective(button, editor, localization) {
-        return _super.call(this, 'underline', button, editor, localization) || this;
+    function EditorUnderlineButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'underline', button, editor, localization, toolsService) || this;
     }
     EditorUnderlineButtonDirective = __decorate([
         Directive({
@@ -5441,7 +5540,8 @@ var EditorUnderlineButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorUnderlineButtonDirective);
     return EditorUnderlineButtonDirective;
 }(EditorCommandButton));
@@ -5466,8 +5566,8 @@ var EditorUnderlineButtonDirective = /** @class */ (function (_super) {
  */
 var EditorStrikethroughButtonDirective = /** @class */ (function (_super) {
     __extends(EditorStrikethroughButtonDirective, _super);
-    function EditorStrikethroughButtonDirective(button, editor, localization) {
-        return _super.call(this, 'strikethrough', button, editor, localization) || this;
+    function EditorStrikethroughButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'strikethrough', button, editor, localization, toolsService) || this;
     }
     EditorStrikethroughButtonDirective = __decorate([
         Directive({
@@ -5476,7 +5576,8 @@ var EditorStrikethroughButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorStrikethroughButtonDirective);
     return EditorStrikethroughButtonDirective;
 }(EditorCommandButton));
@@ -5501,8 +5602,8 @@ var EditorStrikethroughButtonDirective = /** @class */ (function (_super) {
  */
 var EditorSubscriptButtonDirective = /** @class */ (function (_super) {
     __extends(EditorSubscriptButtonDirective, _super);
-    function EditorSubscriptButtonDirective(button, editor, localization) {
-        return _super.call(this, 'subscript', button, editor, localization) || this;
+    function EditorSubscriptButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'subscript', button, editor, localization, toolsService) || this;
     }
     EditorSubscriptButtonDirective = __decorate([
         Directive({
@@ -5511,7 +5612,8 @@ var EditorSubscriptButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSubscriptButtonDirective);
     return EditorSubscriptButtonDirective;
 }(EditorCommandButton));
@@ -5536,8 +5638,8 @@ var EditorSubscriptButtonDirective = /** @class */ (function (_super) {
  */
 var EditorSuperscriptButtonDirective = /** @class */ (function (_super) {
     __extends(EditorSuperscriptButtonDirective, _super);
-    function EditorSuperscriptButtonDirective(button, editor, localization) {
-        return _super.call(this, 'superscript', button, editor, localization) || this;
+    function EditorSuperscriptButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'superscript', button, editor, localization, toolsService) || this;
     }
     EditorSuperscriptButtonDirective = __decorate([
         Directive({
@@ -5546,7 +5648,8 @@ var EditorSuperscriptButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSuperscriptButtonDirective);
     return EditorSuperscriptButtonDirective;
 }(EditorCommandButton));
@@ -5563,8 +5666,8 @@ var EditorSuperscriptButtonDirective = /** @class */ (function (_super) {
  */
 var EditorInsertFileButtonDirective = /** @class */ (function (_super) {
     __extends(EditorInsertFileButtonDirective, _super);
-    function EditorInsertFileButtonDirective(button, editor, localization) {
-        return _super.call(this, 'insertFile', button, editor, localization) || this;
+    function EditorInsertFileButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'insertFile', button, editor, localization, toolsService) || this;
     }
     EditorInsertFileButtonDirective = __decorate([
         Directive({
@@ -5573,7 +5676,8 @@ var EditorInsertFileButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertFileButtonDirective);
     return EditorInsertFileButtonDirective;
 }(EditorCommandDialog));
@@ -5637,8 +5741,8 @@ var EditorBackColorDirective = /** @class */ (function () {
  */
 var EditorCleanFormattingButtonDirective = /** @class */ (function (_super) {
     __extends(EditorCleanFormattingButtonDirective, _super);
-    function EditorCleanFormattingButtonDirective(button, editor, localization) {
-        return _super.call(this, 'cleanFormatting', button, editor, localization) || this;
+    function EditorCleanFormattingButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'cleanFormatting', button, editor, localization, toolsService) || this;
     }
     EditorCleanFormattingButtonDirective = __decorate([
         Directive({
@@ -5647,7 +5751,8 @@ var EditorCleanFormattingButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorCleanFormattingButtonDirective);
     return EditorCleanFormattingButtonDirective;
 }(EditorCommandButton));
@@ -5665,8 +5770,8 @@ var EditorCleanFormattingButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAddColumnBeforeButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAddColumnBeforeButtonDirective, _super);
-    function EditorAddColumnBeforeButtonDirective(button, editor, localization) {
-        return _super.call(this, 'addColumnBefore', button, editor, localization) || this;
+    function EditorAddColumnBeforeButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'addColumnBefore', button, editor, localization, toolsService) || this;
     }
     EditorAddColumnBeforeButtonDirective = __decorate([
         Directive({
@@ -5675,7 +5780,8 @@ var EditorAddColumnBeforeButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddColumnBeforeButtonDirective);
     return EditorAddColumnBeforeButtonDirective;
 }(EditorCommandButton));
@@ -5693,8 +5799,8 @@ var EditorAddColumnBeforeButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAddColumnAfterButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAddColumnAfterButtonDirective, _super);
-    function EditorAddColumnAfterButtonDirective(button, editor, localization) {
-        return _super.call(this, 'addColumnAfter', button, editor, localization) || this;
+    function EditorAddColumnAfterButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'addColumnAfter', button, editor, localization, toolsService) || this;
     }
     EditorAddColumnAfterButtonDirective = __decorate([
         Directive({
@@ -5703,7 +5809,8 @@ var EditorAddColumnAfterButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddColumnAfterButtonDirective);
     return EditorAddColumnAfterButtonDirective;
 }(EditorCommandButton));
@@ -5721,8 +5828,8 @@ var EditorAddColumnAfterButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAddRowBeforeButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAddRowBeforeButtonDirective, _super);
-    function EditorAddRowBeforeButtonDirective(button, editor, localization) {
-        return _super.call(this, 'addRowBefore', button, editor, localization) || this;
+    function EditorAddRowBeforeButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'addRowBefore', button, editor, localization, toolsService) || this;
     }
     EditorAddRowBeforeButtonDirective = __decorate([
         Directive({
@@ -5731,7 +5838,8 @@ var EditorAddRowBeforeButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddRowBeforeButtonDirective);
     return EditorAddRowBeforeButtonDirective;
 }(EditorCommandButton));
@@ -5749,8 +5857,8 @@ var EditorAddRowBeforeButtonDirective = /** @class */ (function (_super) {
  */
 var EditorAddRowAfterButtonDirective = /** @class */ (function (_super) {
     __extends(EditorAddRowAfterButtonDirective, _super);
-    function EditorAddRowAfterButtonDirective(button, editor, localization) {
-        return _super.call(this, 'addRowAfter', button, editor, localization) || this;
+    function EditorAddRowAfterButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'addRowAfter', button, editor, localization, toolsService) || this;
     }
     EditorAddRowAfterButtonDirective = __decorate([
         Directive({
@@ -5759,7 +5867,8 @@ var EditorAddRowAfterButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddRowAfterButtonDirective);
     return EditorAddRowAfterButtonDirective;
 }(EditorCommandButton));
@@ -5777,8 +5886,8 @@ var EditorAddRowAfterButtonDirective = /** @class */ (function (_super) {
  */
 var EditorDeleteColumnButtonDirective = /** @class */ (function (_super) {
     __extends(EditorDeleteColumnButtonDirective, _super);
-    function EditorDeleteColumnButtonDirective(button, editor, localization) {
-        return _super.call(this, 'deleteColumn', button, editor, localization) || this;
+    function EditorDeleteColumnButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'deleteColumn', button, editor, localization, toolsService) || this;
     }
     EditorDeleteColumnButtonDirective = __decorate([
         Directive({
@@ -5787,7 +5896,8 @@ var EditorDeleteColumnButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorDeleteColumnButtonDirective);
     return EditorDeleteColumnButtonDirective;
 }(EditorCommandButton));
@@ -5805,8 +5915,8 @@ var EditorDeleteColumnButtonDirective = /** @class */ (function (_super) {
  */
 var EditorDeleteRowButtonDirective = /** @class */ (function (_super) {
     __extends(EditorDeleteRowButtonDirective, _super);
-    function EditorDeleteRowButtonDirective(button, editor, localization) {
-        return _super.call(this, 'deleteRow', button, editor, localization) || this;
+    function EditorDeleteRowButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'deleteRow', button, editor, localization, toolsService) || this;
     }
     EditorDeleteRowButtonDirective = __decorate([
         Directive({
@@ -5815,7 +5925,8 @@ var EditorDeleteRowButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorDeleteRowButtonDirective);
     return EditorDeleteRowButtonDirective;
 }(EditorCommandButton));
@@ -5833,8 +5944,8 @@ var EditorDeleteRowButtonDirective = /** @class */ (function (_super) {
  */
 var EditorDeleteTableButtonDirective = /** @class */ (function (_super) {
     __extends(EditorDeleteTableButtonDirective, _super);
-    function EditorDeleteTableButtonDirective(button, editor, localization) {
-        return _super.call(this, 'deleteTable', button, editor, localization) || this;
+    function EditorDeleteTableButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'deleteTable', button, editor, localization, toolsService) || this;
     }
     EditorDeleteTableButtonDirective = __decorate([
         Directive({
@@ -5843,7 +5954,8 @@ var EditorDeleteTableButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorDeleteTableButtonDirective);
     return EditorDeleteTableButtonDirective;
 }(EditorCommandButton));
@@ -5863,8 +5975,8 @@ var EditorDeleteTableButtonDirective = /** @class */ (function (_super) {
  */
 var EditorMergeCellsButtonDirective = /** @class */ (function (_super) {
     __extends(EditorMergeCellsButtonDirective, _super);
-    function EditorMergeCellsButtonDirective(button, editor, localization) {
-        return _super.call(this, 'mergeCells', button, editor, localization) || this;
+    function EditorMergeCellsButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'mergeCells', button, editor, localization, toolsService) || this;
     }
     EditorMergeCellsButtonDirective = __decorate([
         Directive({
@@ -5873,7 +5985,8 @@ var EditorMergeCellsButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorMergeCellsButtonDirective);
     return EditorMergeCellsButtonDirective;
 }(EditorCommandButton));
@@ -5893,8 +6006,8 @@ var EditorMergeCellsButtonDirective = /** @class */ (function (_super) {
  */
 var EditorSplitCellButtonDirective = /** @class */ (function (_super) {
     __extends(EditorSplitCellButtonDirective, _super);
-    function EditorSplitCellButtonDirective(button, editor, localization) {
-        return _super.call(this, 'splitCell', button, editor, localization) || this;
+    function EditorSplitCellButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'splitCell', button, editor, localization, toolsService) || this;
     }
     EditorSplitCellButtonDirective = __decorate([
         Directive({
@@ -5903,7 +6016,8 @@ var EditorSplitCellButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSplitCellButtonDirective);
     return EditorSplitCellButtonDirective;
 }(EditorCommandButton));
@@ -6241,8 +6355,8 @@ var DropDownToolDirective = /** @class */ (function () {
  */
 var EditorPrintDirective = /** @class */ (function (_super) {
     __extends(EditorPrintDirective, _super);
-    function EditorPrintDirective(button, editor, localization) {
-        var _this = _super.call(this, 'print', button, editor, localization) || this;
+    function EditorPrintDirective(button, editor, localization, toolsService) {
+        var _this = _super.call(this, 'print', button, editor, localization, toolsService) || this;
         _this.editor = editor;
         return _this;
     }
@@ -6271,7 +6385,8 @@ var EditorPrintDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorPrintDirective);
     return EditorPrintDirective;
 }(EditorCommandButton));
@@ -6295,8 +6410,8 @@ var EditorPrintDirective = /** @class */ (function (_super) {
  */
 var EditorSelectAllButtonDirective = /** @class */ (function (_super) {
     __extends(EditorSelectAllButtonDirective, _super);
-    function EditorSelectAllButtonDirective(button, editor, localization) {
-        return _super.call(this, 'selectAll', button, editor, localization) || this;
+    function EditorSelectAllButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'selectAll', button, editor, localization, toolsService) || this;
     }
     EditorSelectAllButtonDirective.prototype.clickHandler = function () {
         this.editor.shouldEmitFocus = true;
@@ -6309,7 +6424,8 @@ var EditorSelectAllButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSelectAllButtonDirective);
     return EditorSelectAllButtonDirective;
 }(EditorCommandButton));
@@ -6486,4 +6602,4 @@ var EditorModule = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { ColorPickerDialogComponent, FileLinkDialogComponent, FontFamilyDialogComponent, FontSizeDialogComponent, FormatDialogComponent, ImageDialogComponent, InsertTableDialogComponent, SourceDialogComponent, CustomMessagesComponent, EditorLocalizationService, LocalizedMessagesDirective, Messages, EditorAlignCenterButtonDirective, EditorAlignJustifyButtonDirective, EditorAlignLeftButtonDirective, EditorAlignRightButtonDirective, EditorBackColorDirective, EditorColorPickerComponent, EditorForeColorDirective, EditorCleanFormattingButtonDirective, FontFamilyDropDownListComponent, EditorFontFamilyComponent, FontSizeDropDownListComponent, EditorFontSizeComponent, FormatDropDownListComponent, EditorFormatComponent, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorInsertFileButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorPrintDirective, EditorSelectAllButtonDirective, DropDownToolDirective, EditorCommandBase, EditorCommandButton, EditorCommandDialog, EditorViewSourceButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, PopupTableGridComponent, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorUnderlineButtonDirective, EditorComponent, EditorModule, schema };
+export { ColorPickerDialogComponent, FileLinkDialogComponent, FontFamilyDialogComponent, FontSizeDialogComponent, FormatDialogComponent, ImageDialogComponent, InsertTableDialogComponent, SourceDialogComponent, CustomMessagesComponent, EditorLocalizationService, LocalizedMessagesDirective, Messages, EditorAlignCenterButtonDirective, EditorAlignJustifyButtonDirective, EditorAlignLeftButtonDirective, EditorAlignRightButtonDirective, EditorBackColorDirective, EditorColorPickerComponent, EditorForeColorDirective, EditorCleanFormattingButtonDirective, FontFamilyDropDownListComponent, EditorFontFamilyComponent, FontSizeDropDownListComponent, EditorFontSizeComponent, FormatDropDownListComponent, EditorFormatComponent, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorInsertFileButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, EditorPrintDirective, EditorSelectAllButtonDirective, DropDownToolDirective, EditorCommandBase, EditorCommandButton, EditorCommandDialog, EditorViewSourceButtonDirective, EditorAddColumnAfterButtonDirective, EditorAddColumnBeforeButtonDirective, EditorAddRowAfterButtonDirective, EditorAddRowBeforeButtonDirective, EditorDeleteColumnButtonDirective, EditorDeleteRowButtonDirective, EditorDeleteTableButtonDirective, EditorInsertTableButtonComponent, EditorMergeCellsButtonDirective, EditorSplitCellButtonDirective, PopupTableGridComponent, EditorToolsService, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorUnderlineButtonDirective, EditorComponent, EditorModule, schema, EditorPasteEvent };