@progress/kendo-angular-editor 2.5.0-dev.202111161123 → 2.5.0-dev.202111291334

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 { Subject, fromEvent, merge, BehaviorSubject, zip, interval } from 'rxjs';
 import { take, filter, auditTime, map, 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, 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 { 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';
 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: 1637061495,
+    publishDate: 1638192544,
     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'
 };
@@ -1651,7 +1651,7 @@ var deleteTableElement = function (selector) { return function (state, dispatch)
 var deleteTable$1 = deleteTableElement(isTable);
 
 var alignRemove = function (state, dispatch) { return alignBlocks(alignRemoveRules)(state, dispatch); };
-var ɵ1$5 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, bold, { applyToWord: applyToWord })); }, ɵ2$4 = function (options) { return cleanFormatting(options); }, ɵ3$4 = function (attrs) { return expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ4$2 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ5$2 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }); }, ɵ6$1 = function (attrs) { return expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }); }, ɵ7$1 = function (text) { return insertText(text); }, ɵ8$1 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, italic, { applyToWord: applyToWord })); }, ɵ9$1 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, strikethrough, { applyToWord: applyToWord })); }, ɵ10 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, subscript, { applyToWord: applyToWord })); }, ɵ11 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, superscript, { applyToWord: applyToWord })); }, ɵ12 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, underline, { applyToWord: applyToWord })); }, ɵ13 = function () { return removeLink(link); }, ɵ14 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ15 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord }); };
+var ɵ1$5 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, bold, { applyToWord: applyToWord })); }, ɵ2$4 = function (options) { return cleanFormatting(options); }, ɵ3$4 = function (attrs) { return expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ4$2 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ5$2 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }); }, ɵ6$1 = function (attrs) { return expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }); }, ɵ7$1 = function (text) { return insertText(text); }, ɵ8$1 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, italic, { applyToWord: applyToWord })); }, ɵ9$1 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, strikethrough, { applyToWord: applyToWord })); }, ɵ10 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, subscript, { applyToWord: applyToWord })); }, ɵ11 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, superscript, { applyToWord: applyToWord })); }, ɵ12 = function (applyToWord) { return expandToWordWrap(toggleInlineFormat, __assign({}, underline, { applyToWord: applyToWord })); }, ɵ13 = function () { return removeLink(link); }, ɵ14 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ15 = function (attrs) { return expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord }); }, ɵ16 = function () { return function (state, dispatch) { return selectAll(state, dispatch); }; };
 var inlineCommand = {
     bold: ɵ1$5,
     cleanFormatting: ɵ2$4,
@@ -1667,42 +1667,43 @@ var inlineCommand = {
     underline: ɵ12,
     unlink: ɵ13,
     foreColor: ɵ14,
-    backColor: ɵ15
+    backColor: ɵ15,
+    selectAll: ɵ16
 };
-var ɵ16 = function () { return function (state, dispatch) { return isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch); }; }, ɵ17 = function () { return function (state, dispatch) { return isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch); }; }, ɵ18 = function () { return function (state, dispatch) { return isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch); }; }, ɵ19 = function () { return function (state, dispatch) { return isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch); }; }, ɵ20 = function (formatAttr) { return formatBlockElements(formatAttr.tag); }, ɵ21 = function () { return getHtml; }, ɵ22 = function () { return indent; }, ɵ23 = function (attrs) { return insertImage(attrs); }, ɵ24 = function () { return toggleOrderedList; }, ɵ25 = function () { return toggleUnorderedList; }, ɵ26 = function () { return outdent; }, ɵ27 = function () { return redo; }, ɵ28 = function (_a) {
+var ɵ17 = function () { return function (state, dispatch) { return isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch); }; }, ɵ18 = function () { return function (state, dispatch) { return isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch); }; }, ɵ19 = function () { return function (state, dispatch) { return isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch); }; }, ɵ20 = function () { return function (state, dispatch) { return isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch); }; }, ɵ21 = function (formatAttr) { return formatBlockElements(formatAttr.tag); }, ɵ22 = function () { return getHtml; }, ɵ23 = function () { return indent; }, ɵ24 = function (attrs) { return insertImage(attrs); }, ɵ25 = function () { return toggleOrderedList; }, ɵ26 = function () { return toggleUnorderedList; }, ɵ27 = function () { return outdent; }, ɵ28 = function () { return redo; }, ɵ29 = function (_a) {
     var content = _a.content, parseOptions = _a.parseOptions;
     return setHtml(content, 'setHTML', parseOptions);
-}, ɵ29 = function () { return undo; };
+}, ɵ30 = function () { return undo; };
 var blockCommand = {
-    alignCenter: ɵ16,
-    alignJustify: ɵ17,
-    alignLeft: ɵ18,
-    alignRight: ɵ19,
-    format: ɵ20,
-    getHTML: ɵ21,
-    indent: ɵ22,
-    insertImage: ɵ23,
+    alignCenter: ɵ17,
+    alignJustify: ɵ18,
+    alignLeft: ɵ19,
+    alignRight: ɵ20,
+    format: ɵ21,
+    getHTML: ɵ22,
+    indent: ɵ23,
+    insertImage: ɵ24,
     // think about changing the command name.
-    insertOrderedList: ɵ24,
+    insertOrderedList: ɵ25,
     // think about changing the command name.
-    insertUnorderedList: ɵ25,
-    outdent: ɵ26,
-    redo: ɵ27,
-    setHTML: ɵ28,
-    undo: ɵ29
+    insertUnorderedList: ɵ26,
+    outdent: ɵ27,
+    redo: ɵ28,
+    setHTML: ɵ29,
+    undo: ɵ30
 };
-var ɵ30 = function (attr) { return insertTable(attr); }, ɵ31 = function () { return addColumnBefore$1; }, ɵ32 = function () { return addColumnAfter$1; }, ɵ33 = function () { return addRowBefore$1; }, ɵ34 = function () { return addRowAfter$1; }, ɵ35 = function () { return deleteRow$1; }, ɵ36 = function () { return deleteColumn$1; }, ɵ37 = function () { return mergeCells$1; }, ɵ38 = function () { return splitCell$1; }, ɵ39 = function () { return deleteTable$1; };
+var ɵ31 = function (attr) { return insertTable(attr); }, ɵ32 = function () { return addColumnBefore$1; }, ɵ33 = function () { return addColumnAfter$1; }, ɵ34 = function () { return addRowBefore$1; }, ɵ35 = function () { return addRowAfter$1; }, ɵ36 = function () { return deleteRow$1; }, ɵ37 = function () { return deleteColumn$1; }, ɵ38 = function () { return mergeCells$1; }, ɵ39 = function () { return splitCell$1; }, ɵ40 = function () { return deleteTable$1; };
 var tableCommand = {
-    insertTable: ɵ30,
-    addColumnBefore: ɵ31,
-    addColumnAfter: ɵ32,
-    addRowBefore: ɵ33,
-    addRowAfter: ɵ34,
-    deleteRow: ɵ35,
-    deleteColumn: ɵ36,
-    mergeCells: ɵ37,
-    splitCell: ɵ38,
-    deleteTable: ɵ39
+    insertTable: ɵ31,
+    addColumnBefore: ɵ32,
+    addColumnAfter: ɵ33,
+    addRowBefore: ɵ34,
+    addRowAfter: ɵ35,
+    deleteRow: ɵ36,
+    deleteColumn: ɵ37,
+    mergeCells: ɵ38,
+    splitCell: ɵ39,
+    deleteTable: ɵ40
 };
 /**
  * @hidden
@@ -1769,6 +1770,10 @@ var getToolbarState = function (state, options) { return ({
         selected: false,
         disabled: !redo(state)
     },
+    selectAll: {
+        selected: false,
+        disabled: false
+    },
     strikethrough: {
         selected: hasMark(state, strikethrough),
         disabled: false
@@ -1818,6 +1823,12 @@ var getToolbarState = function (state, options) { return ({
         selected: false,
         disabled: false
     },
+    // print
+    print: {
+        selected: false,
+        disabled: false
+    },
+    // table
     insertTable: {
         selected: false,
         disabled: false
@@ -1890,6 +1901,8 @@ var initialToolBarState = {
     //history
     redo: { selected: false, disabled: true },
     undo: { selected: false, disabled: true },
+    // print
+    print: { selected: false, disabled: false },
     //dialogs
     createLink: { selected: false, disabled: true },
     insertFile: { selected: false, disabled: true },
@@ -1905,7 +1918,9 @@ var initialToolBarState = {
     deleteColumn: { selected: false, disabled: true },
     mergeCells: { selected: false, disabled: true },
     splitCell: { selected: false, disabled: true },
-    deleteTable: { selected: false, disabled: true }
+    deleteTable: { selected: false, disabled: true },
+    // select all
+    selectAll: { selected: false, disabled: false }
 };
 /**
  * @hidden
@@ -1938,6 +1953,8 @@ var disabledToolBarState = {
     //history
     redo: { selected: false, disabled: true },
     undo: { selected: false, disabled: true },
+    // print
+    print: { selected: false, disabled: true },
     //dialogs
     createLink: { selected: false, disabled: true },
     insertFile: { selected: false, disabled: true },
@@ -1953,7 +1970,9 @@ var disabledToolBarState = {
     deleteColumn: { selected: false, disabled: true },
     mergeCells: { selected: false, disabled: true },
     splitCell: { selected: false, disabled: true },
-    deleteTable: { selected: false, disabled: true }
+    deleteTable: { selected: false, disabled: true },
+    // select all
+    selectAll: { selected: false, disabled: true }
 };
 
 /**
@@ -2264,9 +2283,23 @@ var EditorErrorMessages = {
     setSchemaOnce: 'The Schema cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/schema/',
     pluginsCallbackType: ɵ0$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/'
+    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;
+}());
+
 var EMPTY_PARAGRAPH = '<p></p>';
 var defaultPasteCleanupSettings = {
     convertMsLists: false,
@@ -2296,16 +2329,18 @@ 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.
+         * @default true
          */
         this.iframe = true;
         /**
@@ -2649,6 +2684,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();
@@ -2802,7 +2838,6 @@ var EditorComponent = /** @class */ (function () {
      * Manually focus the Editor.
      */
     EditorComponent.prototype.focus = function () {
-        // this.focusChangedProgrammatically = true;
         this.focusChangedProgrammatically = true;
         this._view.focus();
         this.focusChangedProgrammatically = false;
@@ -2974,8 +3009,9 @@ var EditorComponent = /** @class */ (function () {
                 if (_this.readonly) {
                     contentAreaClasslist_1.add('k-state-focused');
                 }
-                if (!_this.focusChangedProgrammatically) {
+                if (!_this.focusChangedProgrammatically || _this.shouldEmitFocus) {
                     _this.ngZone.run(function () { return _this.onFocus.emit(); });
+                    _this.shouldEmitFocus = false;
                 }
             }));
             this.subs.add(fromEvent(containerElement, 'focusout')
@@ -3201,6 +3237,7 @@ var EditorComponent = /** @class */ (function () {
             selector: 'kendo-editor',
             providers: [
                 EditorLocalizationService,
+                EditorToolsService,
                 {
                     provide: LocalizationService,
                     useExisting: EditorLocalizationService
@@ -3220,7 +3257,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-redo=\"kendo.editor.redo|The title of the tool that undos the last action.\"\n            redo=\"Redo\"\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 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        "
             ]
@@ -3229,7 +3266,8 @@ var EditorComponent = /** @class */ (function () {
             LocalizationService,
             ChangeDetectorRef,
             NgZone,
-            ElementRef])
+            ElementRef,
+            EditorToolsService])
     ], EditorComponent);
     return EditorComponent;
 }());
@@ -3582,11 +3620,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;
         /**
@@ -3629,7 +3668,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; });
@@ -3748,7 +3790,8 @@ var EditorFormatComponent = /** @class */ (function (_super) {
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
             DialogService,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorFormatComponent);
     return EditorFormatComponent;
 }(ToolBarToolComponent));
@@ -3884,11 +3927,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;
         /**
@@ -3930,7 +3974,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
@@ -4053,7 +4100,8 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
             DialogService,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorFontSizeComponent);
     return EditorFontSizeComponent;
 }(ToolBarToolComponent));
@@ -4071,11 +4119,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;
         /**
@@ -4124,7 +4173,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;
@@ -4245,7 +4297,8 @@ var EditorFontFamilyComponent = /** @class */ (function (_super) {
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
             DialogService,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorFontFamilyComponent);
     return EditorFontFamilyComponent;
 }(ToolBarToolComponent));
@@ -4704,9 +4757,11 @@ var commandIcons = {
     alignJustify: 'align-justify',
     alignLeft: 'align-left',
     alignRight: 'align-right',
+    backColor: 'background',
     bold: 'bold',
     cleanFormatting: 'clear-css',
     createLink: 'link-horizontal',
+    foreColor: 'foreground-color',
     indent: 'indent-increase',
     insertFile: 'file-add',
     insertImage: 'image',
@@ -4714,7 +4769,9 @@ var commandIcons = {
     insertUnorderedList: 'list-unordered',
     italic: 'italic',
     outdent: 'indent-decrease',
+    print: 'print',
     redo: 'redo',
+    selectAll: 'select-all',
     strikethrough: 'strikethrough',
     subscript: 'sub-script',
     superscript: 'sup-script',
@@ -4722,8 +4779,6 @@ var commandIcons = {
     undo: 'undo',
     unlink: 'unlink-horizontal',
     viewSource: 'html',
-    foreColor: 'foreground-color',
-    backColor: 'background',
     //table
     insertTable: 'table-insert',
     addColumnBefore: 'table-column-insert-left',
@@ -4742,29 +4797,31 @@ 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;
-    }
-    EditorCommandBase.prototype.ngOnInit = function () {
-        var _this = this;
-        this.subs = this.editor.stateChange.subscribe(this.onStateChange.bind(this));
-        this.subs.add(this.button.click.subscribe((this.clickHandler.bind(this))));
-        this.subs.add(this.button.pointerdown.subscribe((this.pointerdownHandler.bind(this))));
-        Promise.resolve(null).then(function () {
+        this.toolsService = toolsService;
+        setTimeout(function () {
             var text = _this.localization.get(_this.command);
             if (text) {
-                _this.button.showText = "overflow";
-                _this.button.showIcon = "both";
+                _this.button.showText = 'overflow';
+                _this.button.showIcon = 'both';
                 _this.button.text = text;
             }
-            if (!_this.button.icon) {
+            if (!_this.button.toolbarOptions.icon) {
                 _this.button.icon = commandIcons[_this.command];
             }
             _this.button.title = text;
+            _this.toolsService.needsCheck.next();
         });
+    }
+    EditorCommandBase.prototype.ngOnInit = function () {
+        this.subs = this.editor.stateChange.subscribe(this.onStateChange.bind(this));
+        this.subs.add(this.button.click.subscribe((this.clickHandler.bind(this))));
+        this.subs.add(this.button.pointerdown.subscribe((this.pointerdownHandler.bind(this))));
     };
     EditorCommandBase.prototype.ngOnDestroy = function () {
         if (this.subs) {
@@ -4785,12 +4842,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 () {
@@ -4827,8 +4885,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({
@@ -4837,7 +4895,8 @@ var EditorAlignLeftButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignLeftButtonDirective);
     return EditorAlignLeftButtonDirective;
 }(EditorCommandButton));
@@ -4862,8 +4921,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({
@@ -4872,7 +4931,8 @@ var EditorAlignCenterButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignCenterButtonDirective);
     return EditorAlignCenterButtonDirective;
 }(EditorCommandButton));
@@ -4897,8 +4957,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({
@@ -4907,7 +4967,8 @@ var EditorAlignRightButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignRightButtonDirective);
     return EditorAlignRightButtonDirective;
 }(EditorCommandButton));
@@ -4932,8 +4993,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({
@@ -4942,7 +5003,8 @@ var EditorAlignJustifyButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAlignJustifyButtonDirective);
     return EditorAlignJustifyButtonDirective;
 }(EditorCommandButton));
@@ -4967,8 +5029,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({
@@ -4977,7 +5039,8 @@ var EditorRedoButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorRedoButtonDirective);
     return EditorRedoButtonDirective;
 }(EditorCommandButton));
@@ -5002,8 +5065,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({
@@ -5012,7 +5075,8 @@ var EditorUndoButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorUndoButtonDirective);
     return EditorUndoButtonDirective;
 }(EditorCommandButton));
@@ -5022,12 +5086,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 () {
@@ -5059,8 +5124,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({
@@ -5069,7 +5134,8 @@ var EditorInsertImageButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertImageButtonDirective);
     return EditorInsertImageButtonDirective;
 }(EditorCommandDialog));
@@ -5094,8 +5160,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({
@@ -5104,7 +5170,8 @@ var EditorIndentButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorIndentButtonDirective);
     return EditorIndentButtonDirective;
 }(EditorCommandButton));
@@ -5129,8 +5196,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({
@@ -5139,7 +5206,8 @@ var EditorOutdentButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorOutdentButtonDirective);
     return EditorOutdentButtonDirective;
 }(EditorCommandButton));
@@ -5164,8 +5232,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({
@@ -5174,7 +5242,8 @@ var EditorCreateLinkButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorCreateLinkButtonDirective);
     return EditorCreateLinkButtonDirective;
 }(EditorCommandDialog));
@@ -5199,8 +5268,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({
@@ -5209,7 +5278,8 @@ var EditorUnlinkButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorUnlinkButtonDirective);
     return EditorUnlinkButtonDirective;
 }(EditorCommandButton));
@@ -5234,8 +5304,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({
@@ -5244,7 +5314,8 @@ var EditorInsertOrderedListButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertOrderedListButtonDirective);
     return EditorInsertOrderedListButtonDirective;
 }(EditorCommandButton));
@@ -5269,8 +5340,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({
@@ -5279,7 +5350,8 @@ var EditorInsertUnorderedListButtonDirective = /** @class */ (function (_super)
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertUnorderedListButtonDirective);
     return EditorInsertUnorderedListButtonDirective;
 }(EditorCommandButton));
@@ -5303,8 +5375,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({
@@ -5313,7 +5385,8 @@ var EditorViewSourceButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorViewSourceButtonDirective);
     return EditorViewSourceButtonDirective;
 }(EditorCommandDialog));
@@ -5338,8 +5411,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({
@@ -5348,7 +5421,8 @@ var EditorBoldButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorBoldButtonDirective);
     return EditorBoldButtonDirective;
 }(EditorCommandButton));
@@ -5373,8 +5447,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({
@@ -5383,7 +5457,8 @@ var EditorItalicButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorItalicButtonDirective);
     return EditorItalicButtonDirective;
 }(EditorCommandButton));
@@ -5408,8 +5483,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({
@@ -5418,7 +5493,8 @@ var EditorUnderlineButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorUnderlineButtonDirective);
     return EditorUnderlineButtonDirective;
 }(EditorCommandButton));
@@ -5443,8 +5519,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({
@@ -5453,7 +5529,8 @@ var EditorStrikethroughButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorStrikethroughButtonDirective);
     return EditorStrikethroughButtonDirective;
 }(EditorCommandButton));
@@ -5478,8 +5555,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({
@@ -5488,7 +5565,8 @@ var EditorSubscriptButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSubscriptButtonDirective);
     return EditorSubscriptButtonDirective;
 }(EditorCommandButton));
@@ -5513,8 +5591,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({
@@ -5523,7 +5601,8 @@ var EditorSuperscriptButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSuperscriptButtonDirective);
     return EditorSuperscriptButtonDirective;
 }(EditorCommandButton));
@@ -5540,8 +5619,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({
@@ -5550,7 +5629,8 @@ var EditorInsertFileButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorInsertFileButtonDirective);
     return EditorInsertFileButtonDirective;
 }(EditorCommandDialog));
@@ -5614,8 +5694,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({
@@ -5624,7 +5704,8 @@ var EditorCleanFormattingButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorCleanFormattingButtonDirective);
     return EditorCleanFormattingButtonDirective;
 }(EditorCommandButton));
@@ -5642,8 +5723,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({
@@ -5652,7 +5733,8 @@ var EditorAddColumnBeforeButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddColumnBeforeButtonDirective);
     return EditorAddColumnBeforeButtonDirective;
 }(EditorCommandButton));
@@ -5670,8 +5752,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({
@@ -5680,7 +5762,8 @@ var EditorAddColumnAfterButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddColumnAfterButtonDirective);
     return EditorAddColumnAfterButtonDirective;
 }(EditorCommandButton));
@@ -5698,8 +5781,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({
@@ -5708,7 +5791,8 @@ var EditorAddRowBeforeButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddRowBeforeButtonDirective);
     return EditorAddRowBeforeButtonDirective;
 }(EditorCommandButton));
@@ -5726,8 +5810,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({
@@ -5736,7 +5820,8 @@ var EditorAddRowAfterButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorAddRowAfterButtonDirective);
     return EditorAddRowAfterButtonDirective;
 }(EditorCommandButton));
@@ -5754,8 +5839,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({
@@ -5764,7 +5849,8 @@ var EditorDeleteColumnButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorDeleteColumnButtonDirective);
     return EditorDeleteColumnButtonDirective;
 }(EditorCommandButton));
@@ -5782,8 +5868,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({
@@ -5792,7 +5878,8 @@ var EditorDeleteRowButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorDeleteRowButtonDirective);
     return EditorDeleteRowButtonDirective;
 }(EditorCommandButton));
@@ -5810,8 +5897,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({
@@ -5820,7 +5907,8 @@ var EditorDeleteTableButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorDeleteTableButtonDirective);
     return EditorDeleteTableButtonDirective;
 }(EditorCommandButton));
@@ -5840,8 +5928,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({
@@ -5850,7 +5938,8 @@ var EditorMergeCellsButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorMergeCellsButtonDirective);
     return EditorMergeCellsButtonDirective;
 }(EditorCommandButton));
@@ -5870,8 +5959,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({
@@ -5880,7 +5969,8 @@ var EditorSplitCellButtonDirective = /** @class */ (function (_super) {
         __param(1, Host()),
         __metadata("design:paramtypes", [ToolBarButtonComponent,
             EditorComponent,
-            EditorLocalizationService])
+            EditorLocalizationService,
+            EditorToolsService])
     ], EditorSplitCellButtonDirective);
     return EditorSplitCellButtonDirective;
 }(EditorCommandButton));
@@ -5969,10 +6059,18 @@ var Messages = /** @class */ (function (_super) {
         Input(),
         __metadata("design:type", String)
     ], Messages.prototype, "outdent", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "print", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
     ], Messages.prototype, "redo", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], Messages.prototype, "selectAll", void 0);
     __decorate([
         Input(),
         __metadata("design:type", String)
@@ -6189,6 +6287,102 @@ var DropDownToolDirective = /** @class */ (function () {
     return DropDownToolDirective;
 }());
 
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor Print tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ *
+ * > The Editor Print tool is supported in the default [`iframe`](https://www.telerik.com/kendo-angular-ui-develop/components/editor/api/EditorComponent/#toc-iframe) mode only.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorPrintButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorPrintButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+var EditorPrintDirective = /** @class */ (function (_super) {
+    __extends(EditorPrintDirective, _super);
+    function EditorPrintDirective(button, editor, localization, toolsService) {
+        var _this = _super.call(this, 'print', button, editor, localization, toolsService) || this;
+        _this.editor = editor;
+        return _this;
+    }
+    EditorPrintDirective.prototype.ngAfterViewInit = function () {
+        if (isDevMode) {
+            if (!this.editor.iframe) {
+                throw new Error(EditorErrorMessages.printTool);
+            }
+        }
+    };
+    EditorPrintDirective.prototype.clickHandler = function () {
+        if (this.editor.iframe) {
+            var view = this.editor.view;
+            var dom = view && view.dom;
+            var doc = dom && dom.ownerDocument;
+            var editorWindow = doc && doc.defaultView;
+            if (editorWindow) {
+                editorWindow.print();
+            }
+        }
+    };
+    EditorPrintDirective = __decorate([
+        Directive({
+            selector: 'kendo-toolbar-button[kendoEditorPrintButton]'
+        }),
+        __param(1, Host()),
+        __metadata("design:paramtypes", [ToolBarButtonComponent,
+            EditorComponent,
+            EditorLocalizationService,
+            EditorToolsService])
+    ], EditorPrintDirective);
+    return EditorPrintDirective;
+}(EditorCommandButton));
+
+/**
+ * A directive which configures an existing `ToolBarButtonComponent` as an Editor SelectAll tool
+ * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
+ * The directive will predefine the `icon` and `click` event handlers of the button.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorSelectAllButton></kendo-toolbar-button>
+ * ```
+ *
+ * The following example demonstrates how to change the default icon that is applied by the directive.
+ *
+ * @example
+ * ```ts-no-run
+ * <kendo-toolbar-button kendoEditorSelectAllButton icon="blogger"></kendo-toolbar-button>
+ * ```
+ */
+var EditorSelectAllButtonDirective = /** @class */ (function (_super) {
+    __extends(EditorSelectAllButtonDirective, _super);
+    function EditorSelectAllButtonDirective(button, editor, localization, toolsService) {
+        return _super.call(this, 'selectAll', button, editor, localization, toolsService) || this;
+    }
+    EditorSelectAllButtonDirective.prototype.clickHandler = function () {
+        this.editor.shouldEmitFocus = true;
+        _super.prototype.clickHandler.call(this);
+    };
+    EditorSelectAllButtonDirective = __decorate([
+        Directive({
+            selector: 'kendo-toolbar-button[kendoEditorSelectAllButton]'
+        }),
+        __param(1, Host()),
+        __metadata("design:paramtypes", [ToolBarButtonComponent,
+            EditorComponent,
+            EditorLocalizationService,
+            EditorToolsService])
+    ], EditorSelectAllButtonDirective);
+    return EditorSelectAllButtonDirective;
+}(EditorCommandButton));
+
 var COMPONENT_DIRECTIVES = [
     //alignment
     EditorAlignLeftButtonDirective,
@@ -6240,7 +6434,11 @@ var COMPONENT_DIRECTIVES = [
     CustomMessagesComponent,
     LocalizedMessagesDirective,
     // dropdown tools
-    DropDownToolDirective
+    DropDownToolDirective,
+    // print
+    EditorPrintDirective,
+    // select all
+    EditorSelectAllButtonDirective
 ];
 var TOOLBAR_TOOLS = [
     EditorFontSizeComponent,
@@ -6357,4 +6555,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, 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 };