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

package/dist/fesm2015/index.js

@@ -3,14 +3,14 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { __decorate, __param, __metadata } from 'tslib';
-import { Inject, Optional, Input, ViewChild, ElementRef, Component, EventEmitter, isDevMode, Output, HostBinding, ContentChild, ViewContainerRef, forwardRef, ChangeDetectorRef, NgZone, TemplateRef, Host, Directive, NgModule } from '@angular/core';
+import { Inject, Optional, Input, ViewChild, ElementRef, Component, Injectable, EventEmitter, isDevMode, Output, 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 { BehaviorSubject, Subject, zip, fromEvent, merge, interval } from 'rxjs';
-import { take, filter, auditTime, map, concatMap, takeUntil } from 'rxjs/operators';
+import { Subject, BehaviorSubject, zip, fromEvent, interval } from 'rxjs';
+import { take, map, filter, concatMap, takeUntil } from 'rxjs/operators';
 import { ToolBarComponent, ToolBarToolComponent, ToolBarButtonComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
 import { DialogContentBase, DialogRef, DialogService, DialogModule } from '@progress/kendo-angular-dialog';
-import { isDocumentAvailable, guid, KendoInput, Keys } from '@progress/kendo-angular-common';
-import { nodes, Schema, marks, Selection, SelectionRange, TextSelection, Fragment, Slice, 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, hasObservers, KendoInput, Keys } from '@progress/kendo-angular-common';
+import { nodes, Schema, marks, Selection, SelectionRange, TextSelection, Fragment, Slice, 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, pasteCleanup, parseContent, AllSelection, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, placeholder, EditorState, EditorView, 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 { LocalizationService, L10N_PREFIX, RTL, MessageService, ComponentMessages } from '@progress/kendo-angular-l10n';
@@ -27,7 +27,7 @@ const 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'
 };
@@ -2533,7 +2533,7 @@ const tablesStyles = `
  */
 const rtlStyles = 'body { direction: rtl }';
 
-const ɵ0$6 = (arg) => `plugins must be a function, but received ${JSON.stringify(arg)}.`;
+const ɵ0$6 = (arg) => `plugins must be a function, but received ${JSON.stringify(arg)}.`, ɵ1$6 = (arg) => `pastedContent must be a function, but received ${JSON.stringify(arg)}.`;
 /* tslint:disable:variable-name */
 /**
  * @hidden
@@ -2542,21 +2542,53 @@ const 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
+ */
+let EditorToolsService = class EditorToolsService {
+    /**
+     * @hidden
+     */
+    constructor() {
+        this.needsCheck = new Subject();
+    }
+};
+EditorToolsService = __decorate([
+    Injectable()
+], EditorToolsService);
+
+/**
+ * The Editor [`paste`]({% slug api_editor_editorcomponent %}#toc-paste) event.
+ */
+class EditorPasteEvent extends PreventableEvent {
+    /**
+     * Constructs the event arguments for the `paste` event.
+     * @hidden
+     */
+    constructor(cleanedHtml, originalHtml, originalEvent) {
+        super();
+        this.cleanedHtml = cleanedHtml;
+        this.originalHtml = originalHtml;
+        this.originalEvent = originalEvent;
+    }
+}
+
 var EditorComponent_1;
 const EMPTY_PARAGRAPH = '<p></p>';
 const defaultPasteCleanupSettings = {
     convertMsLists: false,
     removeAttributes: [],
     removeHtmlComments: false,
-    removeInvalidHTML: false,
+    removeInvalidHTML: true,
     removeMsClasses: false,
     removeMsStyles: false,
-    stripTags: ['']
+    stripTags: []
 };
 const removeCommentsIf = conditionallyExecute(removeComments);
 const removeInvalidHTMLIf = conditionallyExecute(sanitize);
@@ -2574,12 +2606,13 @@ const getPasteCleanupAttributes = (config) => {
  * Represents the [Kendo UI Editor component for Angular]({% slug overview_editor %}).
  */
 let EditorComponent = EditorComponent_1 = class EditorComponent {
-    constructor(dialogService, localization, cdr, ngZone, element) {
+    constructor(dialogService, localization, cdr, ngZone, element, toolsService) {
         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.
@@ -2591,14 +2624,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
          * @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.
@@ -2624,6 +2649,11 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
          * 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)).
          */
@@ -2639,10 +2669,73 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         this.valueModified = new Subject();
         this._readonly = false;
         this._placeholder = '';
+        this.inForm = false;
         this.afterViewInit = new Subject();
         this.contentAreaLoaded = new Subject();
-        this.onChangeCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.dispatchTransaction = (tr) => {
+            const docChanged = tr.docChanged;
+            if (docChanged) {
+                const doc = tr.doc;
+                const html = getHtml({ doc });
+                this.trOnChange = tr;
+                this.htmlOnChange = html;
+                this.ngZone.run(() => {
+                    this.valueModified.next(html);
+                });
+            }
+            if (!docChanged || this.inForm) {
+                this.view.updateState(this.view.state.apply(tr));
+            }
+        };
+        this.transformPastedHTML = (dirtyHtml) => {
+            const pasteCleanupSettings = Object.assign({}, defaultPasteCleanupSettings, this.pasteCleanupSettings);
+            const html = pipe(removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML), removeCommentsIf(pasteCleanupSettings.removeHtmlComments))(dirtyHtml);
+            const clean = pasteCleanup(html, {
+                convertMsLists: pasteCleanupSettings.convertMsLists,
+                stripTags: pasteCleanupSettings.stripTags.join('|'),
+                attributes: getPasteCleanupAttributes(pasteCleanupSettings)
+            });
+            if (hasObservers(this.paste)) {
+                const event = new EditorPasteEvent(clean, dirtyHtml, this._pasteEvent);
+                this.ngZone.run(() => this.paste.emit(event));
+                return event.isDefaultPrevented() ? '' : event.cleanedHtml;
+            }
+            return clean;
+        };
+        this.changeValue = (value) => {
+            const 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 || '')) {
+                    const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
+                    if (iframeContentWindowNotPresent) {
+                        return;
+                    }
+                    const state = this.view.state;
+                    const nextDoc = parseContent(value || '', state.schema, { preserveWhitespace: this.preserveWhitespace });
+                    const tr = state.tr
+                        .setSelection(new AllSelection(state.doc))
+                        .replaceSelectionWith(nextDoc);
+                    this.view.updateState(state.apply(tr));
+                }
+            }
+            this.trOnChange = null;
+            this.htmlOnChange = null;
+        };
+        this.onChangeCallback = (value) => {
+            this.changeValue(value);
+        };
         this.onTouchedCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.onPaste = (_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
@@ -2652,25 +2745,12 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
      * Sets the value of the Editor ([see example]({% slug overview_editor %}#toc-basic-usage)).
      */
     set value(value) {
-        if (this._previousValue === value) {
-            return;
-        }
-        this._value = value;
-        this._previousValue = value;
-        if (this._view) {
-            const iframeContentWindowNotPresent = this.iframe && !this.container.element.nativeElement.contentWindow;
-            if (iframeContentWindowNotPresent) {
-                return;
-            }
-            this.exec('setHTML', {
-                content: this._value || '',
-                parseOptions: {
-                    preserveWhitespace: this.preserveWhitespace
-                }
-            });
-        }
+        this.changeValue(value);
     }
     get value() {
+        if (this.trOnChange) {
+            return this.htmlOnChange;
+        }
         let value = this._view ? this.getSource() : this._value;
         if (value === EMPTY_PARAGRAPH) {
             return this._value ? '' : this._value;
@@ -2848,6 +2928,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         }));
+        this.subs.add(this.toolsService.needsCheck.subscribe(() => this.cdr.markForCheck()));
     }
     ngAfterViewInit() {
         this.afterViewInit.next();
@@ -2859,6 +2940,9 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         }
     }
     ngOnChanges(changes) {
+        if (changes.value && this.view) {
+            this.changeValue(changes.value.currentValue);
+        }
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialize());
         }
@@ -2944,8 +3028,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         const 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.
@@ -3030,6 +3112,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
      * @hidden
      */
     writeValue(value) {
+        this.inForm = true;
         // To avoid confusion, non-existent values are always undefined.
         this.value = value === null ? undefined : value;
     }
@@ -3057,7 +3140,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             return;
         }
         const currentSchema = this.schema || schema;
-        const that = this;
         const containerNativeElement = this.container.element.nativeElement;
         const contentNode = parseContent((this.value || '').trim(), currentSchema, { preserveWhitespace: this.preserveWhitespace });
         if (this.iframe) {
@@ -3101,7 +3183,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             }),
             new Plugin({
                 key: new PluginKey('editor-filter-disabled-state'),
-                filterTransaction: () => !this.disabled
+                filterTransaction: () => !this.disabled || this.inForm
             }),
             history(),
             keymap(buildListKeymap(currentSchema)),
@@ -3128,31 +3210,10 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             this._view = new EditorView({ mount: this.viewMountElement }, {
                 state,
                 editable: () => !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));
-                    // }
-                    const value = that.value;
-                    if (!hasSameMarkup(value, that._previousValue, this.state.schema)) {
-                        that._previousValue = value;
-                        that.ngZone.run(() => that.valueModified.next(value));
-                    }
-                },
-                transformPastedHTML: (html) => {
-                    const pasteCleanupSettings = Object.assign({}, defaultPasteCleanupSettings, this.pasteCleanupSettings);
-                    const clean = pipe(removeCommentsIf(pasteCleanupSettings.removeHtmlComments), removeInvalidHTMLIf(pasteCleanupSettings.removeInvalidHTML))(html);
-                    const attributes = getPasteCleanupAttributes(pasteCleanupSettings);
-                    return pasteCleanup(clean, {
-                        convertMsLists: pasteCleanupSettings.convertMsLists,
-                        stripTags: pasteCleanupSettings.stripTags.join('|'),
-                        attributes
-                    });
+                dispatchTransaction: this.dispatchTransaction,
+                transformPastedHTML: this.transformPastedHTML,
+                handleDOMEvents: {
+                    paste: this.onPaste
                 }
             });
         });
@@ -3193,7 +3254,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                 this.cdr.detectChanges();
             }
         }));
-        this.subs.add(merge(this.valueModified.pipe(filter(() => this.updateInterval > 0), auditTime(this.updateInterval)), this.valueModified.pipe(filter(() => this.updateInterval === 0))).subscribe((value) => {
+        this.subs.add(this.valueModified.subscribe((value) => {
             this.onChangeCallback(value);
             this.valueChange.emit(value);
             this.cdr.markForCheck();
@@ -3286,10 +3347,6 @@ __decorate([
     __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)
@@ -3310,6 +3367,10 @@ __decorate([
     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)
@@ -3397,6 +3458,7 @@ EditorComponent = EditorComponent_1 = __decorate([
         selector: 'kendo-editor',
         providers: [
             EditorLocalizationService,
+            EditorToolsService,
             {
                 provide: LocalizationService,
                 useExisting: EditorLocalizationService
@@ -3556,7 +3618,7 @@ EditorComponent = EditorComponent_1 = __decorate([
         <div *ngIf="!iframe" #content [attr.dir]="direction" class="k-editor-content"></div>
 
         <div class="k-editor-content" *ngIf="iframe">
-            <iframe #content frameborder="0" class="k-iframe" (load)="iframeOnLoad()"></iframe>
+            <iframe #content srcdoc="<!DOCTYPE html>" frameborder="0" class="k-iframe" (load)="iframeOnLoad()"></iframe>
         </div>
 
         <ng-container #dialogsContainer></ng-container>
@@ -3583,7 +3645,8 @@ EditorComponent = EditorComponent_1 = __decorate([
         LocalizationService,
         ChangeDetectorRef,
         NgZone,
-        ElementRef])
+        ElementRef,
+        EditorToolsService])
 ], EditorComponent);
 
 /**
@@ -4085,11 +4148,12 @@ var EditorFormatComponent_1;
  * ```
  */
 let EditorFormatComponent = EditorFormatComponent_1 = class EditorFormatComponent extends ToolBarToolComponent {
-    constructor(editor, dialogService, localization) {
+    constructor(editor, dialogService, localization, toolsService) {
         super();
         this.editor = editor;
         this.dialogService = dialogService;
         this.localization = localization;
+        this.toolsService = toolsService;
         this.disabled = false;
         this.tabindex = -1;
         /**
@@ -4125,7 +4189,10 @@ let EditorFormatComponent = EditorFormatComponent_1 = class EditorFormatComponen
                 return itemArgs.dataItem.tag === null;
             }
         };
-        setTimeout(() => (this.defaultItem = { text: this.title, tag: null }));
+        setTimeout(() => {
+            this.defaultItem = { text: this.title, tag: null };
+            this.toolsService.needsCheck.next();
+        });
         this.subs = this.editor.stateChange.subscribe(({ format }) => {
             const index = this.data.findIndex(item => item.tag === format.selected.tag);
             this.value = index !== -1 ? format.selected.tag : null;
@@ -4266,7 +4333,8 @@ EditorFormatComponent = EditorFormatComponent_1 = __decorate([
     __param(0, Host()),
     __metadata("design:paramtypes", [EditorComponent,
         DialogService,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorFormatComponent);
 
 /**
@@ -4438,11 +4506,12 @@ var EditorFontSizeComponent_1;
  * ```
  */
 let EditorFontSizeComponent = EditorFontSizeComponent_1 = class EditorFontSizeComponent extends ToolBarToolComponent {
-    constructor(editor, dialogService, localization) {
+    constructor(editor, dialogService, localization, toolsService) {
         super();
         this.editor = editor;
         this.dialogService = dialogService;
         this.localization = localization;
+        this.toolsService = toolsService;
         this.disabled = false;
         this.tabindex = -1;
         /**
@@ -4477,7 +4546,10 @@ let EditorFontSizeComponent = EditorFontSizeComponent_1 = class EditorFontSizeCo
                 return itemArgs.dataItem.size === null;
             }
         };
-        setTimeout(() => (this.defaultItem = { text: this.title, size: null }));
+        setTimeout(() => {
+            this.defaultItem = { text: this.title, size: null };
+            this.toolsService.needsCheck.next();
+        });
         this.subs = this.editor.stateChange.subscribe(({ style }) => {
             // remove units(px, em, rem...)
             // string#match returns array
@@ -4622,7 +4694,8 @@ EditorFontSizeComponent = EditorFontSizeComponent_1 = __decorate([
     __param(0, Host()),
     __metadata("design:paramtypes", [EditorComponent,
         DialogService,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorFontSizeComponent);
 
 var EditorFontFamilyComponent_1;
@@ -4638,11 +4711,12 @@ var EditorFontFamilyComponent_1;
  * ```
  */
 let EditorFontFamilyComponent = EditorFontFamilyComponent_1 = class EditorFontFamilyComponent extends ToolBarToolComponent {
-    constructor(editor, dialogService, localization) {
+    constructor(editor, dialogService, localization, toolsService) {
         super();
         this.editor = editor;
         this.dialogService = dialogService;
         this.localization = localization;
+        this.toolsService = toolsService;
         this.disabled = false;
         this.tabindex = -1;
         /**
@@ -4684,7 +4758,10 @@ let EditorFontFamilyComponent = EditorFontFamilyComponent_1 = class EditorFontFa
                 return itemArgs.dataItem.fontName === null;
             }
         };
-        setTimeout(() => (this.defaultItem = { text: this.title, fontName: null }));
+        setTimeout(() => {
+            this.defaultItem = { text: this.title, fontName: null };
+            this.toolsService.needsCheck.next();
+        });
         this.subs = this.editor.stateChange.subscribe(({ style }) => {
             this.value = getUniqueStyleValues(style.selected, 'font-family') || null;
             this.disabled = style.disabled;
@@ -4827,7 +4904,8 @@ EditorFontFamilyComponent = EditorFontFamilyComponent_1 = __decorate([
     __param(0, Host()),
     __metadata("design:paramtypes", [EditorComponent,
         DialogService,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorFontFamilyComponent);
 
 // tslint:disable:no-forward-ref
@@ -5369,11 +5447,12 @@ const commandIcons = {
  * @hidden
  */
 class EditorCommandBase {
-    constructor(command, button, editor, localization) {
+    constructor(command, button, editor, localization, toolsService) {
         this.command = command;
         this.button = button;
         this.editor = editor;
         this.localization = localization;
+        this.toolsService = toolsService;
         setTimeout(() => {
             const text = this.localization.get(this.command);
             if (text) {
@@ -5385,6 +5464,7 @@ class EditorCommandBase {
                 this.button.icon = commandIcons[this.command];
             }
             this.button.title = text;
+            this.toolsService.needsCheck.next();
         });
     }
     ngOnInit() {
@@ -5409,12 +5489,13 @@ class EditorCommandBase {
  * @hidden
  */
 class EditorCommandButton extends EditorCommandBase {
-    constructor(command, button, editor, localization) {
-        super(command, button, editor, localization);
+    constructor(command, button, editor, localization, toolsService) {
+        super(command, button, editor, localization, toolsService);
         this.command = command;
         this.button = button;
         this.editor = editor;
         this.localization = localization;
+        this.toolsService = toolsService;
     }
     clickHandler() {
         this.editor.exec(this.command, this.editor.applyToWord);
@@ -5448,8 +5529,8 @@ class EditorCommandButton extends EditorCommandBase {
  * ```
  */
 let EditorAlignLeftButtonDirective = class EditorAlignLeftButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('alignLeft', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('alignLeft', button, editor, localization, toolsService);
     }
 };
 EditorAlignLeftButtonDirective = __decorate([
@@ -5459,7 +5540,8 @@ EditorAlignLeftButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAlignLeftButtonDirective);
 
 /**
@@ -5481,8 +5563,8 @@ EditorAlignLeftButtonDirective = __decorate([
  * ```
  */
 let EditorAlignCenterButtonDirective = class EditorAlignCenterButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('alignCenter', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('alignCenter', button, editor, localization, toolsService);
     }
 };
 EditorAlignCenterButtonDirective = __decorate([
@@ -5492,7 +5574,8 @@ EditorAlignCenterButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAlignCenterButtonDirective);
 
 /**
@@ -5514,8 +5597,8 @@ EditorAlignCenterButtonDirective = __decorate([
  * ```
  */
 let EditorAlignRightButtonDirective = class EditorAlignRightButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('alignRight', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('alignRight', button, editor, localization, toolsService);
     }
 };
 EditorAlignRightButtonDirective = __decorate([
@@ -5525,7 +5608,8 @@ EditorAlignRightButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAlignRightButtonDirective);
 
 /**
@@ -5547,8 +5631,8 @@ EditorAlignRightButtonDirective = __decorate([
  * ```
  */
 let EditorAlignJustifyButtonDirective = class EditorAlignJustifyButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('alignJustify', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('alignJustify', button, editor, localization, toolsService);
     }
 };
 EditorAlignJustifyButtonDirective = __decorate([
@@ -5558,7 +5642,8 @@ EditorAlignJustifyButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAlignJustifyButtonDirective);
 
 /**
@@ -5580,8 +5665,8 @@ EditorAlignJustifyButtonDirective = __decorate([
  * ```
  */
 let EditorRedoButtonDirective = class EditorRedoButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('redo', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('redo', button, editor, localization, toolsService);
     }
 };
 EditorRedoButtonDirective = __decorate([
@@ -5591,7 +5676,8 @@ EditorRedoButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorRedoButtonDirective);
 
 /**
@@ -5613,8 +5699,8 @@ EditorRedoButtonDirective = __decorate([
  * ```
  */
 let EditorUndoButtonDirective = class EditorUndoButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('undo', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('undo', button, editor, localization, toolsService);
     }
 };
 EditorUndoButtonDirective = __decorate([
@@ -5624,19 +5710,21 @@ EditorUndoButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorUndoButtonDirective);
 
 /**
  * @hidden
  */
 class EditorCommandDialog extends EditorCommandBase {
-    constructor(dialog, button, editor, localization) {
-        super(dialog, button, editor, localization);
+    constructor(dialog, button, editor, localization, toolsService) {
+        super(dialog, button, editor, localization, toolsService);
         this.dialog = dialog;
         this.button = button;
         this.editor = editor;
         this.localization = localization;
+        this.toolsService = toolsService;
     }
     clickHandler() {
         this.editor.openDialog(this.dialog);
@@ -5665,8 +5753,8 @@ class EditorCommandDialog extends EditorCommandBase {
  * ```
  */
 let EditorInsertImageButtonDirective = class EditorInsertImageButtonDirective extends EditorCommandDialog {
-    constructor(button, editor, localization) {
-        super('insertImage', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('insertImage', button, editor, localization, toolsService);
     }
 };
 EditorInsertImageButtonDirective = __decorate([
@@ -5676,7 +5764,8 @@ EditorInsertImageButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorInsertImageButtonDirective);
 
 /**
@@ -5698,8 +5787,8 @@ EditorInsertImageButtonDirective = __decorate([
  * ```
  */
 let EditorIndentButtonDirective = class EditorIndentButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('indent', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('indent', button, editor, localization, toolsService);
     }
 };
 EditorIndentButtonDirective = __decorate([
@@ -5709,7 +5798,8 @@ EditorIndentButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorIndentButtonDirective);
 
 /**
@@ -5731,8 +5821,8 @@ EditorIndentButtonDirective = __decorate([
  * ```
  */
 let EditorOutdentButtonDirective = class EditorOutdentButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('outdent', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('outdent', button, editor, localization, toolsService);
     }
 };
 EditorOutdentButtonDirective = __decorate([
@@ -5742,7 +5832,8 @@ EditorOutdentButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorOutdentButtonDirective);
 
 /**
@@ -5764,8 +5855,8 @@ EditorOutdentButtonDirective = __decorate([
  * ```
  */
 let EditorCreateLinkButtonDirective = class EditorCreateLinkButtonDirective extends EditorCommandDialog {
-    constructor(button, editor, localization) {
-        super('createLink', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('createLink', button, editor, localization, toolsService);
     }
 };
 EditorCreateLinkButtonDirective = __decorate([
@@ -5775,7 +5866,8 @@ EditorCreateLinkButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorCreateLinkButtonDirective);
 
 /**
@@ -5797,8 +5889,8 @@ EditorCreateLinkButtonDirective = __decorate([
  * ```
  */
 let EditorUnlinkButtonDirective = class EditorUnlinkButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('unlink', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('unlink', button, editor, localization, toolsService);
     }
 };
 EditorUnlinkButtonDirective = __decorate([
@@ -5808,7 +5900,8 @@ EditorUnlinkButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorUnlinkButtonDirective);
 
 /**
@@ -5830,8 +5923,8 @@ EditorUnlinkButtonDirective = __decorate([
  * ```
  */
 let EditorInsertOrderedListButtonDirective = class EditorInsertOrderedListButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('insertOrderedList', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('insertOrderedList', button, editor, localization, toolsService);
     }
 };
 EditorInsertOrderedListButtonDirective = __decorate([
@@ -5841,7 +5934,8 @@ EditorInsertOrderedListButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorInsertOrderedListButtonDirective);
 
 /**
@@ -5863,8 +5957,8 @@ EditorInsertOrderedListButtonDirective = __decorate([
  * ```
  */
 let EditorInsertUnorderedListButtonDirective = class EditorInsertUnorderedListButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('insertUnorderedList', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('insertUnorderedList', button, editor, localization, toolsService);
     }
 };
 EditorInsertUnorderedListButtonDirective = __decorate([
@@ -5874,7 +5968,8 @@ EditorInsertUnorderedListButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorInsertUnorderedListButtonDirective);
 
 /**
@@ -5895,8 +5990,8 @@ EditorInsertUnorderedListButtonDirective = __decorate([
  * ```
  */
 let EditorViewSourceButtonDirective = class EditorViewSourceButtonDirective extends EditorCommandDialog {
-    constructor(button, editor, localization) {
-        super('viewSource', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('viewSource', button, editor, localization, toolsService);
     }
 };
 EditorViewSourceButtonDirective = __decorate([
@@ -5906,7 +6001,8 @@ EditorViewSourceButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorViewSourceButtonDirective);
 
 /**
@@ -5928,8 +6024,8 @@ EditorViewSourceButtonDirective = __decorate([
  * ```
  */
 let EditorBoldButtonDirective = class EditorBoldButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('bold', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('bold', button, editor, localization, toolsService);
     }
 };
 EditorBoldButtonDirective = __decorate([
@@ -5939,7 +6035,8 @@ EditorBoldButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorBoldButtonDirective);
 
 /**
@@ -5961,8 +6058,8 @@ EditorBoldButtonDirective = __decorate([
  * ```
  */
 let EditorItalicButtonDirective = class EditorItalicButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('italic', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('italic', button, editor, localization, toolsService);
     }
 };
 EditorItalicButtonDirective = __decorate([
@@ -5972,7 +6069,8 @@ EditorItalicButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorItalicButtonDirective);
 
 /**
@@ -5994,8 +6092,8 @@ EditorItalicButtonDirective = __decorate([
  * ```
  */
 let EditorUnderlineButtonDirective = class EditorUnderlineButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('underline', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('underline', button, editor, localization, toolsService);
     }
 };
 EditorUnderlineButtonDirective = __decorate([
@@ -6005,7 +6103,8 @@ EditorUnderlineButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorUnderlineButtonDirective);
 
 /**
@@ -6027,8 +6126,8 @@ EditorUnderlineButtonDirective = __decorate([
  * ```
  */
 let EditorStrikethroughButtonDirective = class EditorStrikethroughButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('strikethrough', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('strikethrough', button, editor, localization, toolsService);
     }
 };
 EditorStrikethroughButtonDirective = __decorate([
@@ -6038,7 +6137,8 @@ EditorStrikethroughButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorStrikethroughButtonDirective);
 
 /**
@@ -6060,8 +6160,8 @@ EditorStrikethroughButtonDirective = __decorate([
  * ```
  */
 let EditorSubscriptButtonDirective = class EditorSubscriptButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('subscript', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('subscript', button, editor, localization, toolsService);
     }
 };
 EditorSubscriptButtonDirective = __decorate([
@@ -6071,7 +6171,8 @@ EditorSubscriptButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorSubscriptButtonDirective);
 
 /**
@@ -6093,8 +6194,8 @@ EditorSubscriptButtonDirective = __decorate([
  * ```
  */
 let EditorSuperscriptButtonDirective = class EditorSuperscriptButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('superscript', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('superscript', button, editor, localization, toolsService);
     }
 };
 EditorSuperscriptButtonDirective = __decorate([
@@ -6104,7 +6205,8 @@ EditorSuperscriptButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorSuperscriptButtonDirective);
 
 /**
@@ -6118,8 +6220,8 @@ EditorSuperscriptButtonDirective = __decorate([
  * ```
  */
 let EditorInsertFileButtonDirective = class EditorInsertFileButtonDirective extends EditorCommandDialog {
-    constructor(button, editor, localization) {
-        super('insertFile', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('insertFile', button, editor, localization, toolsService);
     }
 };
 EditorInsertFileButtonDirective = __decorate([
@@ -6129,7 +6231,8 @@ EditorInsertFileButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorInsertFileButtonDirective);
 
 /**
@@ -6188,8 +6291,8 @@ EditorBackColorDirective = __decorate([
  * ```
  */
 let EditorCleanFormattingButtonDirective = class EditorCleanFormattingButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('cleanFormatting', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('cleanFormatting', button, editor, localization, toolsService);
     }
 };
 EditorCleanFormattingButtonDirective = __decorate([
@@ -6199,7 +6302,8 @@ EditorCleanFormattingButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorCleanFormattingButtonDirective);
 
 /**
@@ -6214,8 +6318,8 @@ EditorCleanFormattingButtonDirective = __decorate([
  * ```
  */
 let EditorAddColumnBeforeButtonDirective = class EditorAddColumnBeforeButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('addColumnBefore', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('addColumnBefore', button, editor, localization, toolsService);
     }
 };
 EditorAddColumnBeforeButtonDirective = __decorate([
@@ -6225,7 +6329,8 @@ EditorAddColumnBeforeButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAddColumnBeforeButtonDirective);
 
 /**
@@ -6240,8 +6345,8 @@ EditorAddColumnBeforeButtonDirective = __decorate([
  * ```
  */
 let EditorAddColumnAfterButtonDirective = class EditorAddColumnAfterButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('addColumnAfter', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('addColumnAfter', button, editor, localization, toolsService);
     }
 };
 EditorAddColumnAfterButtonDirective = __decorate([
@@ -6251,7 +6356,8 @@ EditorAddColumnAfterButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAddColumnAfterButtonDirective);
 
 /**
@@ -6266,8 +6372,8 @@ EditorAddColumnAfterButtonDirective = __decorate([
  * ```
  */
 let EditorAddRowBeforeButtonDirective = class EditorAddRowBeforeButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('addRowBefore', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('addRowBefore', button, editor, localization, toolsService);
     }
 };
 EditorAddRowBeforeButtonDirective = __decorate([
@@ -6277,7 +6383,8 @@ EditorAddRowBeforeButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAddRowBeforeButtonDirective);
 
 /**
@@ -6292,8 +6399,8 @@ EditorAddRowBeforeButtonDirective = __decorate([
  * ```
  */
 let EditorAddRowAfterButtonDirective = class EditorAddRowAfterButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('addRowAfter', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('addRowAfter', button, editor, localization, toolsService);
     }
 };
 EditorAddRowAfterButtonDirective = __decorate([
@@ -6303,7 +6410,8 @@ EditorAddRowAfterButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorAddRowAfterButtonDirective);
 
 /**
@@ -6318,8 +6426,8 @@ EditorAddRowAfterButtonDirective = __decorate([
  * ```
  */
 let EditorDeleteColumnButtonDirective = class EditorDeleteColumnButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('deleteColumn', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('deleteColumn', button, editor, localization, toolsService);
     }
 };
 EditorDeleteColumnButtonDirective = __decorate([
@@ -6329,7 +6437,8 @@ EditorDeleteColumnButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorDeleteColumnButtonDirective);
 
 /**
@@ -6344,8 +6453,8 @@ EditorDeleteColumnButtonDirective = __decorate([
  * ```
  */
 let EditorDeleteRowButtonDirective = class EditorDeleteRowButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('deleteRow', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('deleteRow', button, editor, localization, toolsService);
     }
 };
 EditorDeleteRowButtonDirective = __decorate([
@@ -6355,7 +6464,8 @@ EditorDeleteRowButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorDeleteRowButtonDirective);
 
 /**
@@ -6370,8 +6480,8 @@ EditorDeleteRowButtonDirective = __decorate([
  * ```
  */
 let EditorDeleteTableButtonDirective = class EditorDeleteTableButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('deleteTable', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('deleteTable', button, editor, localization, toolsService);
     }
 };
 EditorDeleteTableButtonDirective = __decorate([
@@ -6381,7 +6491,8 @@ EditorDeleteTableButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorDeleteTableButtonDirective);
 
 /**
@@ -6398,8 +6509,8 @@ EditorDeleteTableButtonDirective = __decorate([
  * ```
  */
 let EditorMergeCellsButtonDirective = class EditorMergeCellsButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('mergeCells', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('mergeCells', button, editor, localization, toolsService);
     }
 };
 EditorMergeCellsButtonDirective = __decorate([
@@ -6409,7 +6520,8 @@ EditorMergeCellsButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorMergeCellsButtonDirective);
 
 /**
@@ -6426,8 +6538,8 @@ EditorMergeCellsButtonDirective = __decorate([
  * ```
  */
 let EditorSplitCellButtonDirective = class EditorSplitCellButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('splitCell', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('splitCell', button, editor, localization, toolsService);
     }
 };
 EditorSplitCellButtonDirective = __decorate([
@@ -6437,7 +6549,8 @@ EditorSplitCellButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorSplitCellButtonDirective);
 
 /**
@@ -6753,8 +6866,8 @@ DropDownToolDirective = __decorate([
  * ```
  */
 let EditorPrintDirective = class EditorPrintDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('print', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('print', button, editor, localization, toolsService);
         this.editor = editor;
     }
     ngAfterViewInit() {
@@ -6783,7 +6896,8 @@ EditorPrintDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorPrintDirective);
 
 /**
@@ -6804,8 +6918,8 @@ EditorPrintDirective = __decorate([
  * ```
  */
 let EditorSelectAllButtonDirective = class EditorSelectAllButtonDirective extends EditorCommandButton {
-    constructor(button, editor, localization) {
-        super('selectAll', button, editor, localization);
+    constructor(button, editor, localization, toolsService) {
+        super('selectAll', button, editor, localization, toolsService);
     }
     clickHandler() {
         this.editor.shouldEmitFocus = true;
@@ -6819,7 +6933,8 @@ EditorSelectAllButtonDirective = __decorate([
     __param(1, Host()),
     __metadata("design:paramtypes", [ToolBarButtonComponent,
         EditorComponent,
-        EditorLocalizationService])
+        EditorLocalizationService,
+        EditorToolsService])
 ], EditorSelectAllButtonDirective);
 
 const COMPONENT_DIRECTIVES = [
@@ -6991,4 +7106,4 @@ EditorModule = __decorate([
  * 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 };