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

package/dist/fesm2015/index.js

@@ -10,7 +10,7 @@ import { take, filter, auditTime, map, concatMap, takeUntil } from 'rxjs/operato
 import { ToolBarComponent, ToolBarToolComponent, ToolBarButtonComponent, ToolBarModule } from '@progress/kendo-angular-toolbar';
 import { DialogContentBase, DialogRef, DialogService, DialogModule } from '@progress/kendo-angular-dialog';
 import { isDocumentAvailable, guid, KendoInput, Keys } from '@progress/kendo-angular-common';
-import { nodes, Schema, marks, Selection, SelectionRange, TextSelection, Fragment, Slice, NodeSelection, insertNode, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, 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, placeholder, EditorState, EditorView, hasSameMarkup, pasteCleanup, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr } from '@progress/kendo-editor-common';
+import { nodes, Schema, marks, Selection, SelectionRange, TextSelection, Fragment, Slice, NodeSelection, insertNode, expandToWordWrap, toggleInlineFormat, bold, cleanFormatting, applyLink, applyInlineStyle, insertText, italic, strikethrough, subscript, superscript, underline, removeLink, link, selectAll, isAligned, alignCenterRules, alignBlocks, alignRemoveRules, alignJustifyRules, alignLeftRules, alignRightRules, formatBlockElements, getHtml, indent, insertImage, toggleOrderedList, toggleUnorderedList, outdent, redo, setHtml, undo, hasMark, activeNode, canIndentAsListItem, canBeIndented, indentRules, hasNode, canOutdentAsListItem, outdentRules, getActiveMarks, expandSelection, addColumnBefore, addColumnAfter, addRowBefore, addRowAfter, deleteRow, deleteColumn, mergeCells, splitCell, deleteTable, getNodeFromSelection, getMark, getSelectionText, parseContent, Plugin, PluginKey, history, keymap, buildListKeymap, buildKeymap, baseKeymap, gapCursor, imageResizing, placeholder, EditorState, EditorView, hasSameMarkup, pasteCleanup, removeComments, sanitize, removeAttribute, sanitizeStyleAttr, sanitizeClassAttr } from '@progress/kendo-editor-common';
 export { Schema, EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes, getSelectionText } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { LocalizationService, L10N_PREFIX, RTL, MessageService, ComponentMessages } from '@progress/kendo-angular-l10n';
@@ -27,7 +27,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635941024,
+    publishDate: 1637743184,
     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'
 };
@@ -1607,7 +1607,7 @@ const deleteTableElement = (selector) => (state, dispatch) => {
 const deleteTable$1 = deleteTableElement(isTable);
 
 const alignRemove = (state, dispatch) => alignBlocks(alignRemoveRules)(state, dispatch);
-const ɵ1$5 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, bold, { applyToWord })), ɵ2$4 = (options) => cleanFormatting(options), ɵ3$4 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }), ɵ4$2 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ5$2 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }), ɵ6$1 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }), ɵ7$1 = text => insertText(text), ɵ8$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, italic, { applyToWord })), ɵ9$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, strikethrough, { applyToWord })), ɵ10 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, subscript, { applyToWord })), ɵ11 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, superscript, { applyToWord })), ɵ12 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, underline, { applyToWord })), ɵ13 = () => removeLink(link), ɵ14 = attrs => expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ15 = attrs => expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord });
+const ɵ1$5 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, bold, { applyToWord })), ɵ2$4 = (options) => cleanFormatting(options), ɵ3$4 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs.value, applyToWord: attrs.applyToWord }), ɵ4$2 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-family', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ5$2 = attrs => expandToWordWrap(applyInlineStyle, { style: 'font-size', value: attrs.value + 'px', applyToWord: attrs.applyToWord }), ɵ6$1 = attrs => expandToWordWrap(applyLink, { mark: 'link', attrs: attrs, applyToWord: attrs.applyToWord }), ɵ7$1 = text => insertText(text), ɵ8$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, italic, { applyToWord })), ɵ9$1 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, strikethrough, { applyToWord })), ɵ10 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, subscript, { applyToWord })), ɵ11 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, superscript, { applyToWord })), ɵ12 = (applyToWord) => expandToWordWrap(toggleInlineFormat, Object.assign({}, underline, { applyToWord })), ɵ13 = () => removeLink(link), ɵ14 = attrs => expandToWordWrap(applyInlineStyle, { style: 'color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ15 = attrs => expandToWordWrap(applyInlineStyle, { style: 'background-color', value: attrs.value, applyToWord: attrs.applyToWord }), ɵ16 = () => (state, dispatch) => selectAll(state, dispatch);
 const inlineCommand = {
     bold: ɵ1$5,
     cleanFormatting: ɵ2$4,
@@ -1623,39 +1623,40 @@ const inlineCommand = {
     underline: ɵ12,
     unlink: ɵ13,
     foreColor: ɵ14,
-    backColor: ɵ15
+    backColor: ɵ15,
+    selectAll: ɵ16
 };
-const ɵ16 = () => (state, dispatch) => isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch), ɵ17 = () => (state, dispatch) => isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch), ɵ18 = () => (state, dispatch) => isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch), ɵ19 = () => (state, dispatch) => isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch), ɵ20 = formatAttr => formatBlockElements(formatAttr.tag), ɵ21 = () => getHtml, ɵ22 = () => indent, ɵ23 = attrs => insertImage(attrs), ɵ24 = () => toggleOrderedList, ɵ25 = () => toggleUnorderedList, ɵ26 = () => outdent, ɵ27 = () => redo, ɵ28 = ({ content, parseOptions }) => setHtml(content, 'setHTML', parseOptions), ɵ29 = () => undo;
+const ɵ17 = () => (state, dispatch) => isAligned(state, alignCenterRules) ? alignRemove(state, dispatch) : alignBlocks(alignCenterRules)(state, dispatch), ɵ18 = () => (state, dispatch) => isAligned(state, alignJustifyRules) ? alignRemove(state, dispatch) : alignBlocks(alignJustifyRules)(state, dispatch), ɵ19 = () => (state, dispatch) => isAligned(state, alignLeftRules) ? alignRemove(state, dispatch) : alignBlocks(alignLeftRules)(state, dispatch), ɵ20 = () => (state, dispatch) => isAligned(state, alignRightRules) ? alignRemove(state, dispatch) : alignBlocks(alignRightRules)(state, dispatch), ɵ21 = formatAttr => formatBlockElements(formatAttr.tag), ɵ22 = () => getHtml, ɵ23 = () => indent, ɵ24 = attrs => insertImage(attrs), ɵ25 = () => toggleOrderedList, ɵ26 = () => toggleUnorderedList, ɵ27 = () => outdent, ɵ28 = () => redo, ɵ29 = ({ content, parseOptions }) => setHtml(content, 'setHTML', parseOptions), ɵ30 = () => undo;
 const 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
 };
-const ɵ30 = attr => insertTable(attr), ɵ31 = () => addColumnBefore$1, ɵ32 = () => addColumnAfter$1, ɵ33 = () => addRowBefore$1, ɵ34 = () => addRowAfter$1, ɵ35 = () => deleteRow$1, ɵ36 = () => deleteColumn$1, ɵ37 = () => mergeCells$1, ɵ38 = () => splitCell$1, ɵ39 = () => deleteTable$1;
+const ɵ31 = attr => insertTable(attr), ɵ32 = () => addColumnBefore$1, ɵ33 = () => addColumnAfter$1, ɵ34 = () => addRowBefore$1, ɵ35 = () => addRowAfter$1, ɵ36 = () => deleteRow$1, ɵ37 = () => deleteColumn$1, ɵ38 = () => mergeCells$1, ɵ39 = () => splitCell$1, ɵ40 = () => deleteTable$1;
 const 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
@@ -1722,6 +1723,10 @@ const getToolbarState = (state, options) => ({
         selected: false,
         disabled: !redo(state)
     },
+    selectAll: {
+        selected: false,
+        disabled: false
+    },
     strikethrough: {
         selected: hasMark(state, strikethrough),
         disabled: false
@@ -1771,6 +1776,12 @@ const getToolbarState = (state, options) => ({
         selected: false,
         disabled: false
     },
+    // print
+    print: {
+        selected: false,
+        disabled: false
+    },
+    // table
     insertTable: {
         selected: false,
         disabled: false
@@ -1843,6 +1854,8 @@ const 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 },
@@ -1858,7 +1871,9 @@ const 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
@@ -1891,6 +1906,8 @@ const 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 },
@@ -1906,7 +1923,9 @@ const 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 }
 };
 
 /**
@@ -2376,6 +2395,78 @@ li.ProseMirror-selectednode:after {
     -ms-user-select: none;
     user-select: none;
 }
+
+/* image resizing */
+.k-editor-resize-handles-wrapper {
+    position: absolute;
+    visibility: hidden;
+}
+
+.k-editor-resize-handle {
+    position: absolute;
+    visibility: visible;
+    background-color: #fff;
+    border: 1px solid #000;
+    z-index: 100;
+    width: 5px;
+    height: 5px;
+}
+
+.k-editor-resize-handle.northwest {
+    top: 0;
+    left: 0;
+    transform: translate(-50%, -50%);
+    cursor: nw-resize;
+}
+
+.k-editor-resize-handle.north {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    cursor: n-resize;
+}
+
+.k-editor-resize-handle.northeast {
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    cursor: ne-resize;
+}
+
+.k-editor-resize-handle.southwest {
+    left: 0;
+    bottom: 0;
+    transform: translate(-50%, 50%);
+    cursor: sw-resize;
+}
+
+.k-editor-resize-handle.south {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, 50%);
+    cursor: s-resize;
+}
+
+.k-editor-resize-handle.southeast {
+    right: 0;
+    bottom: 0;
+    transform: translate(50%, 50%);
+    cursor: se-resize;
+}
+
+.k-editor-resize-handle.west {
+    top: 50%;
+    left: 0;
+    transform: translate(-50%, -50%);
+    cursor: w-resize;
+}
+
+.k-editor-resize-handle.east {
+    top: 50%;
+    right: 0;
+    transform: translate(50%, -50%);
+    cursor: e-resize;
+}
 `;
 /**
  * @hidden
@@ -2452,7 +2543,8 @@ const 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/'
 };
 
 var EditorComponent_1;
@@ -2491,6 +2583,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         /**
          * 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;
         /**
@@ -2907,7 +3000,6 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
      * Manually focus the Editor.
      */
     focus() {
-        // this.focusChangedProgrammatically = true;
         this.focusChangedProgrammatically = true;
         this._view.focus();
         this.focusChangedProgrammatically = false;
@@ -3015,7 +3107,8 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             keymap(buildListKeymap(currentSchema)),
             keymap(buildKeymap(currentSchema, { applyToWord: this.applyToWord })),
             keymap(baseKeymap),
-            gapCursor()
+            gapCursor(),
+            imageResizing()
         ];
         if (this.placeholder) {
             defaultPlugins.push(placeholder(this.placeholder));
@@ -3077,8 +3170,9 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                 if (this.readonly) {
                     contentAreaClasslist.add('k-state-focused');
                 }
-                if (!this.focusChangedProgrammatically) {
+                if (!this.focusChangedProgrammatically || this.shouldEmitFocus) {
                     this.ngZone.run(() => this.onFocus.emit());
+                    this.shouldEmitFocus = false;
                 }
             }));
             this.subs.add(fromEvent(containerElement, 'focusout')
@@ -3393,8 +3487,12 @@ EditorComponent = EditorComponent_1 = __decorate([
             linkWebAddress="Web address"
             i18n-outdent="kendo.editor.outdent|The title of the tool that outdents the content."
             outdent="Outdent"
+            i18n-print="kendo.editor.print|The title of the print tool."
+            print="Print"
             i18n-redo="kendo.editor.redo|The title of the tool that undos the last action."
             redo="Redo"
+            i18n-selectAll="kendo.editor.selectAll|The title of the tool that selects all content."
+            selectAll="Select All"
             i18n-strikethrough="kendo.editor.strikethrough|The title of the tool that strikes through text."
             strikethrough="Strikethrough"
             i18n-subscript="kendo.editor.subscript|The title of the tool that makes text subscript."
@@ -4977,9 +5075,6 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
             this.toggle(false);
         }));
     }
-    ngAfterViewInit() {
-        this.getButton().tabIndex = -1;
-    }
     ngOnDestroy() {
         this.destroyPopup();
         if (this.subs) {
@@ -5022,7 +5117,7 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
      * @hidden
      */
     onBlur() {
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         this.buttonBlurred.emit();
     }
     /**
@@ -5043,8 +5138,8 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
      * @hidden
      */
     focus() {
+        this.tabIndex = 0;
         this.getButton().focus();
-        this.getButton().tabIndex = 0;
     }
     /**
      * @hidden
@@ -5053,7 +5148,7 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
         if (ev.keyCode === Keys.Space || ev.keyCode === Keys.Enter) {
             return true;
         }
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         return false;
     }
     /**
@@ -5096,7 +5191,7 @@ __decorate([
     __metadata("design:type", TemplateRef)
 ], EditorInsertTableButtonComponent.prototype, "toolbarTemplate", void 0);
 __decorate([
-    ViewChild('popupTemplate', { static: true }),
+    ViewChild('popupTemplate', { static: false }),
     __metadata("design:type", TemplateRef)
 ], EditorInsertTableButtonComponent.prototype, "popupTemplate", void 0);
 __decorate([
@@ -5123,6 +5218,7 @@ EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = __decora
                 kendoButton
                 #element
                 [attr.title]="title"
+                [attr.tabindex]="tabIndex"
                 [icon]="'table-insert'"
                 [disabled]="disabled"
                 (click)="toggle()"
@@ -5130,7 +5226,14 @@ EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = __decora
             ></button>
         </ng-template>
         <ng-template #popupTemplate>
-            <button kendoButton #overflowElement [attr.title]="title" [icon]="'table-insert'" [disabled]="disabled" (click)="openDialog()">
+            <button
+                kendoButton
+                #overflowElement
+                [attr.title]="title"
+                [attr.tabindex]="tabIndex"
+                [icon]="'table-insert'"
+                [disabled]="disabled"
+                (click)="openDialog()">
                 {{ title }}
             </button>
         </ng-template>
@@ -5226,9 +5329,11 @@ const 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',
@@ -5236,7 +5341,9 @@ const commandIcons = {
     insertUnorderedList: 'list-unordered',
     italic: 'italic',
     outdent: 'indent-decrease',
+    print: 'print',
     redo: 'redo',
+    selectAll: 'select-all',
     strikethrough: 'strikethrough',
     subscript: 'sub-script',
     superscript: 'sup-script',
@@ -5244,8 +5351,6 @@ const commandIcons = {
     undo: 'undo',
     unlink: 'unlink-horizontal',
     viewSource: 'html',
-    foreColor: 'foreground-color',
-    backColor: 'background',
     //table
     insertTable: 'table-insert',
     addColumnBefore: 'table-column-insert-left',
@@ -5269,24 +5374,24 @@ class EditorCommandBase {
         this.button = button;
         this.editor = editor;
         this.localization = localization;
-    }
-    ngOnInit() {
-        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(() => {
+        setTimeout(() => {
             const 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;
         });
     }
+    ngOnInit() {
+        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))));
+    }
     ngOnDestroy() {
         if (this.subs) {
             this.subs.unsubscribe();
@@ -6416,10 +6521,18 @@ __decorate([
     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)
@@ -6620,6 +6733,95 @@ DropDownToolDirective = __decorate([
         NgZone])
 ], 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>
+ * ```
+ */
+let EditorPrintDirective = class EditorPrintDirective extends EditorCommandButton {
+    constructor(button, editor, localization) {
+        super('print', button, editor, localization);
+        this.editor = editor;
+    }
+    ngAfterViewInit() {
+        if (isDevMode) {
+            if (!this.editor.iframe) {
+                throw new Error(EditorErrorMessages.printTool);
+            }
+        }
+    }
+    clickHandler() {
+        if (this.editor.iframe) {
+            const view = this.editor.view;
+            const dom = view && view.dom;
+            const doc = dom && dom.ownerDocument;
+            const 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])
+], EditorPrintDirective);
+
+/**
+ * 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>
+ * ```
+ */
+let EditorSelectAllButtonDirective = class EditorSelectAllButtonDirective extends EditorCommandButton {
+    constructor(button, editor, localization) {
+        super('selectAll', button, editor, localization);
+    }
+    clickHandler() {
+        this.editor.shouldEmitFocus = true;
+        super.clickHandler();
+    }
+};
+EditorSelectAllButtonDirective = __decorate([
+    Directive({
+        selector: 'kendo-toolbar-button[kendoEditorSelectAllButton]'
+    }),
+    __param(1, Host()),
+    __metadata("design:paramtypes", [ToolBarButtonComponent,
+        EditorComponent,
+        EditorLocalizationService])
+], EditorSelectAllButtonDirective);
+
 const COMPONENT_DIRECTIVES = [
     //alignment
     EditorAlignLeftButtonDirective,
@@ -6671,7 +6873,11 @@ const COMPONENT_DIRECTIVES = [
     CustomMessagesComponent,
     LocalizedMessagesDirective,
     // dropdown tools
-    DropDownToolDirective
+    DropDownToolDirective,
+    // print
+    EditorPrintDirective,
+    // select all
+    EditorSelectAllButtonDirective
 ];
 const TOOLBAR_TOOLS = [
     EditorFontSizeComponent,
@@ -6785,4 +6991,4 @@ EditorModule = __decorate([
  * Generated bundle index. Do not edit.
  */
 
-export { ColorPickerDialogComponent, FileLinkDialogComponent, FontFamilyDialogComponent, FontSizeDialogComponent, FormatDialogComponent, ImageDialogComponent, InsertTableDialogComponent, SourceDialogComponent, CustomMessagesComponent, EditorLocalizationService, LocalizedMessagesDirective, Messages, EditorAlignCenterButtonDirective, EditorAlignJustifyButtonDirective, EditorAlignLeftButtonDirective, EditorAlignRightButtonDirective, EditorBackColorDirective, EditorColorPickerComponent, EditorForeColorDirective, EditorCleanFormattingButtonDirective, FontFamilyDropDownListComponent, EditorFontFamilyComponent, FontSizeDropDownListComponent, EditorFontSizeComponent, FormatDropDownListComponent, EditorFormatComponent, EditorRedoButtonDirective, EditorUndoButtonDirective, EditorInsertImageButtonDirective, EditorIndentButtonDirective, EditorOutdentButtonDirective, EditorCreateLinkButtonDirective, EditorInsertFileButtonDirective, EditorUnlinkButtonDirective, EditorInsertOrderedListButtonDirective, EditorInsertUnorderedListButtonDirective, 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, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorUnderlineButtonDirective, EditorComponent, EditorModule, schema };