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

package/dist/fesm5/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 { 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, 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: 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'
 };
@@ -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 }
 };
 
 /**
@@ -2244,7 +2263,7 @@ var FileLinkDialogComponent = /** @class */ (function (_super) {
 /**
  * @hidden
  */
-var defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  padding: 8px;\n}\n\n.ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\ndiv.ProseMirror {\n  position: relative;\n  min-height: 100%;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\ndiv.ProseMirror:focus {\n  outline: none;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror li {\n  position: relative;\n}\n\nli.ProseMirror-selectednode {\n  outline: none;\n}\n\nli.ProseMirror-selectednode:after {\n  content: \"\";\n  position: absolute;\n  left: -32px;\n  right: -2px;\n  top: -2px;\n  bottom: -2px;\n  border: 2px solid #8cf;\n  pointer-events: none;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.ProseMirror .k-placeholder::before {\n    content: attr(data-placeholder);\n    height: 0;\n    color: #8a8a8a;\n    float: left;\n    opacity: 1;\n    cursor: text;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n";
+var defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  padding: 8px;\n}\n\n.ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\ndiv.ProseMirror {\n  position: relative;\n  min-height: 100%;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\ndiv.ProseMirror:focus {\n  outline: none;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror li {\n  position: relative;\n}\n\nli.ProseMirror-selectednode {\n  outline: none;\n}\n\nli.ProseMirror-selectednode:after {\n  content: \"\";\n  position: absolute;\n  left: -32px;\n  right: -2px;\n  top: -2px;\n  bottom: -2px;\n  border: 2px solid #8cf;\n  pointer-events: none;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.ProseMirror .k-placeholder::before {\n    content: attr(data-placeholder);\n    height: 0;\n    color: #8a8a8a;\n    float: left;\n    opacity: 1;\n    cursor: text;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n/* image resizing */\n.k-editor-resize-handles-wrapper {\n    position: absolute;\n    visibility: hidden;\n}\n\n.k-editor-resize-handle {\n    position: absolute;\n    visibility: visible;\n    background-color: #fff;\n    border: 1px solid #000;\n    z-index: 100;\n    width: 5px;\n    height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n    left: 0;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n    cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n    cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n    right: 0;\n    bottom: 0;\n    transform: translate(50%, 50%);\n    cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: e-resize;\n}\n";
 /**
  * @hidden
  */
@@ -2264,7 +2283,8 @@ 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/'
 };
 
 var EMPTY_PARAGRAPH = '<p></p>';
@@ -2306,6 +2326,7 @@ var EditorComponent = /** @class */ (function () {
         /**
          * 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;
         /**
@@ -2802,7 +2823,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;
@@ -2911,7 +2931,8 @@ var EditorComponent = /** @class */ (function () {
             keymap(buildListKeymap(currentSchema)),
             keymap(buildKeymap(currentSchema, { applyToWord: this.applyToWord })),
             keymap(baseKeymap),
-            gapCursor()
+            gapCursor(),
+            imageResizing()
         ];
         if (this.placeholder) {
             defaultPlugins.push(placeholder(this.placeholder));
@@ -2973,8 +2994,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')
@@ -3219,7 +3241,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        "
             ]
@@ -4477,9 +4499,6 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
         return _this;
     }
     EditorInsertTableButtonComponent_1 = EditorInsertTableButtonComponent;
-    EditorInsertTableButtonComponent.prototype.ngAfterViewInit = function () {
-        this.getButton().tabIndex = -1;
-    };
     EditorInsertTableButtonComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
         if (this.subs) {
@@ -4530,7 +4549,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
      * @hidden
      */
     EditorInsertTableButtonComponent.prototype.onBlur = function () {
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         this.buttonBlurred.emit();
     };
     /**
@@ -4551,8 +4570,8 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
      * @hidden
      */
     EditorInsertTableButtonComponent.prototype.focus = function () {
+        this.tabIndex = 0;
         this.getButton().focus();
-        this.getButton().tabIndex = 0;
     };
     /**
      * @hidden
@@ -4561,7 +4580,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
         if (ev.keyCode === Keys.Space || ev.keyCode === Keys.Enter) {
             return true;
         }
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         return false;
     };
     /**
@@ -4604,7 +4623,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
         __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([
@@ -4624,7 +4643,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(function () { return EditorInsertTableButtonComponent_1; }) }],
             selector: 'kendo-editor-insert-table-button',
-            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                type=\"button\"\n                kendoButton\n                #element\n                [attr.title]=\"title\"\n                [icon]=\"'table-insert'\"\n                [disabled]=\"disabled\"\n                (click)=\"toggle()\"\n                (blur)=\"onBlur()\"\n            ></button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button kendoButton #overflowElement [attr.title]=\"title\" [icon]=\"'table-insert'\" [disabled]=\"disabled\" (click)=\"openDialog()\">\n                {{ title }}\n            </button>\n        </ng-template>\n        <ng-template #popupGridTemplate>\n            <kendo-popup-table-grid (cellClick)=\"onCellClick($event)\" (tableWizardClick)=\"onTableWizardClick()\"></kendo-popup-table-grid>\n        </ng-template>\n    "
+            template: "\n        <ng-template #toolbarTemplate>\n            <button\n                type=\"button\"\n                kendoButton\n                #element\n                [attr.title]=\"title\"\n                [attr.tabindex]=\"tabIndex\"\n                [icon]=\"'table-insert'\"\n                [disabled]=\"disabled\"\n                (click)=\"toggle()\"\n                (blur)=\"onBlur()\"\n            ></button>\n        </ng-template>\n        <ng-template #popupTemplate>\n            <button\n                kendoButton\n                #overflowElement\n                [attr.title]=\"title\"\n                [attr.tabindex]=\"tabIndex\"\n                [icon]=\"'table-insert'\"\n                [disabled]=\"disabled\"\n                (click)=\"openDialog()\">\n                {{ title }}\n            </button>\n        </ng-template>\n        <ng-template #popupGridTemplate>\n            <kendo-popup-table-grid (cellClick)=\"onCellClick($event)\" (tableWizardClick)=\"onTableWizardClick()\"></kendo-popup-table-grid>\n        </ng-template>\n    "
         }),
         __param(0, Host()),
         __metadata("design:paramtypes", [EditorComponent,
@@ -4706,9 +4725,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',
@@ -4716,7 +4737,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',
@@ -4724,8 +4747,6 @@ var commandIcons = {
     undo: 'undo',
     unlink: 'unlink-horizontal',
     viewSource: 'html',
-    foreColor: 'foreground-color',
-    backColor: 'background',
     //table
     insertTable: 'table-insert',
     addColumnBefore: 'table-column-insert-left',
@@ -4745,28 +4766,28 @@ var commandIcons = {
  */
 var EditorCommandBase = /** @class */ (function () {
     function EditorCommandBase(command, button, editor, localization) {
+        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 () {
+        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;
         });
+    }
+    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) {
@@ -5971,10 +5992,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)
@@ -6191,6 +6220,100 @@ 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) {
+        var _this = _super.call(this, 'print', button, editor, localization) || 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])
+    ], 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) {
+        return _super.call(this, 'selectAll', button, editor, localization) || 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])
+    ], EditorSelectAllButtonDirective);
+    return EditorSelectAllButtonDirective;
+}(EditorCommandButton));
+
 var COMPONENT_DIRECTIVES = [
     //alignment
     EditorAlignLeftButtonDirective,
@@ -6242,7 +6365,11 @@ var COMPONENT_DIRECTIVES = [
     CustomMessagesComponent,
     LocalizedMessagesDirective,
     // dropdown tools
-    DropDownToolDirective
+    DropDownToolDirective,
+    // print
+    EditorPrintDirective,
+    // select all
+    EditorSelectAllButtonDirective
 ];
 var TOOLBAR_TOOLS = [
     EditorFontSizeComponent,
@@ -6359,4 +6486,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, EditorBoldButtonDirective, EditorItalicButtonDirective, EditorStrikethroughButtonDirective, EditorSubscriptButtonDirective, EditorSuperscriptButtonDirective, EditorUnderlineButtonDirective, EditorComponent, EditorModule, schema };

package/dist/npm/common/error-messages.js

@@ -15,5 +15,6 @@ exports.EditorErrorMessages = {
     setSchemaOnce: 'The Schema cannot be changed dynamically. See http://www.telerik.com/kendo-angular-ui/components/editor/schema/',
     pluginsCallbackType: ɵ0,
     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/'
 };

package/dist/npm/common/styles.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 /**
  * @hidden
  */
-exports.defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  padding: 8px;\n}\n\n.ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\ndiv.ProseMirror {\n  position: relative;\n  min-height: 100%;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\ndiv.ProseMirror:focus {\n  outline: none;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror li {\n  position: relative;\n}\n\nli.ProseMirror-selectednode {\n  outline: none;\n}\n\nli.ProseMirror-selectednode:after {\n  content: \"\";\n  position: absolute;\n  left: -32px;\n  right: -2px;\n  top: -2px;\n  bottom: -2px;\n  border: 2px solid #8cf;\n  pointer-events: none;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.ProseMirror .k-placeholder::before {\n    content: attr(data-placeholder);\n    height: 0;\n    color: #8a8a8a;\n    float: left;\n    opacity: 1;\n    cursor: text;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n";
+exports.defaultStyle = "\nhtml, body {\n    margin: 0;\n    height: 100%;\n    padding: 0;\n}\n\nhtml {\n  min-height: 100%;\n}\n\nbody {\n  box-sizing: border-box;\n  position: relative;\n  padding: 8px;\n}\n\n.ProseMirror-selectednode {\n  outline: 2px solid #8cf;\n}\n\ndiv.ProseMirror {\n  position: relative;\n  min-height: 100%;\n  word-wrap: break-word;\n  white-space: pre-wrap;\n  white-space: break-spaces;\n  -webkit-font-variant-ligatures: none;\n  font-variant-ligatures: none;\n  font-feature-settings: \"liga\" 0; /* the above doesn't seem to work in Edge */\n}\n\ndiv.ProseMirror:focus {\n  outline: none;\n}\n\n.ProseMirror pre {\n  white-space: pre-wrap;\n}\n\n.ProseMirror-hideselection *::selection { background: transparent; }\n.ProseMirror-hideselection *::-moz-selection { background: transparent; }\n.ProseMirror-hideselection { caret-color: transparent; }\n\n.ProseMirror li {\n  position: relative;\n}\n\nli.ProseMirror-selectednode {\n  outline: none;\n}\n\nli.ProseMirror-selectednode:after {\n  content: \"\";\n  position: absolute;\n  left: -32px;\n  right: -2px;\n  top: -2px;\n  bottom: -2px;\n  border: 2px solid #8cf;\n  pointer-events: none;\n}\n\n.ProseMirror-gapcursor {\n  display: none;\n  pointer-events: none;\n  position: absolute;\n}\n\n.ProseMirror-gapcursor:after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: -2px;\n  width: 20px;\n  border-top: 1px solid black;\n  animation: ProseMirror-cursor-blink 1.1s steps(2, start) infinite;\n}\n\n@keyframes ProseMirror-cursor-blink {\n  to {\n    visibility: hidden;\n  }\n}\n\n.ProseMirror-focused .ProseMirror-gapcursor {\n  display: block;\n}\n\n.ProseMirror .k-placeholder::before {\n    content: attr(data-placeholder);\n    height: 0;\n    color: #8a8a8a;\n    float: left;\n    opacity: 1;\n    cursor: text;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n}\n\n/* image resizing */\n.k-editor-resize-handles-wrapper {\n    position: absolute;\n    visibility: hidden;\n}\n\n.k-editor-resize-handle {\n    position: absolute;\n    visibility: visible;\n    background-color: #fff;\n    border: 1px solid #000;\n    z-index: 100;\n    width: 5px;\n    height: 5px;\n}\n\n.k-editor-resize-handle.northwest {\n    top: 0;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: nw-resize;\n}\n\n.k-editor-resize-handle.north {\n    top: 0;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    cursor: n-resize;\n}\n\n.k-editor-resize-handle.northeast {\n    top: 0;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: ne-resize;\n}\n\n.k-editor-resize-handle.southwest {\n    left: 0;\n    bottom: 0;\n    transform: translate(-50%, 50%);\n    cursor: sw-resize;\n}\n\n.k-editor-resize-handle.south {\n    bottom: 0;\n    left: 50%;\n    transform: translate(-50%, 50%);\n    cursor: s-resize;\n}\n\n.k-editor-resize-handle.southeast {\n    right: 0;\n    bottom: 0;\n    transform: translate(50%, 50%);\n    cursor: se-resize;\n}\n\n.k-editor-resize-handle.west {\n    top: 50%;\n    left: 0;\n    transform: translate(-50%, -50%);\n    cursor: w-resize;\n}\n\n.k-editor-resize-handle.east {\n    top: 50%;\n    right: 0;\n    transform: translate(50%, -50%);\n    cursor: e-resize;\n}\n";
 /**
  * @hidden
  */

package/dist/npm/config/command-icons.js

@@ -12,9 +12,11 @@ exports.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',
@@ -22,7 +24,9 @@ exports.commandIcons = {
     insertUnorderedList: 'list-unordered',
     italic: 'italic',
     outdent: 'indent-decrease',
+    print: 'print',
     redo: 'redo',
+    selectAll: 'select-all',
     strikethrough: 'strikethrough',
     subscript: 'sub-script',
     superscript: 'sup-script',
@@ -30,8 +34,6 @@ exports.commandIcons = {
     undo: 'undo',
     unlink: 'unlink-horizontal',
     viewSource: 'html',
-    foreColor: 'foreground-color',
-    backColor: 'background',
     //table
     insertTable: 'table-insert',
     addColumnBefore: 'table-column-insert-left',