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

package/dist/es2015/package-metadata.js

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635505364,
+    publishDate: 1637061495,
     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'
 };

package/dist/es2015/tools/tables/editor-insert-table-button.component.d.ts

@@ -2,7 +2,7 @@
 * Copyright © 2021 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { TemplateRef, ElementRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { TemplateRef, ElementRef, OnDestroy } from '@angular/core';
 import { ToolBarToolComponent } from '@progress/kendo-angular-toolbar';
 import { PopupRef, PopupService } from '@progress/kendo-angular-popup';
 import { EditorComponent } from '../../editor.component';
@@ -16,7 +16,7 @@ import { DialogService } from '@progress/kendo-angular-dialog';
  * <kendo-editor-insert-table-button></kendo-editor-insert-table-button>
  * ```
  */
-export declare class EditorInsertTableButtonComponent extends ToolBarToolComponent implements AfterViewInit, OnDestroy {
+export declare class EditorInsertTableButtonComponent extends ToolBarToolComponent implements OnDestroy {
     private editor;
     private localization;
     private popupService;
@@ -39,7 +39,6 @@ export declare class EditorInsertTableButtonComponent extends ToolBarToolCompone
     private cellClicked;
     private subs;
     constructor(editor: EditorComponent, localization: EditorLocalizationService, popupService: PopupService, dialogService: DialogService);
-    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     readonly outerWidth: number;
     readonly title: string;

package/dist/es2015/tools/tables/editor-insert-table-button.component.js

@@ -42,9 +42,6 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
             this.toggle(false);
         }));
     }
-    ngAfterViewInit() {
-        this.getButton().tabIndex = -1;
-    }
     ngOnDestroy() {
         this.destroyPopup();
         if (this.subs) {
@@ -87,7 +84,7 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
      * @hidden
      */
     onBlur() {
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         this.buttonBlurred.emit();
     }
     /**
@@ -108,8 +105,8 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
      * @hidden
      */
     focus() {
+        this.tabIndex = 0;
         this.getButton().focus();
-        this.getButton().tabIndex = 0;
     }
     /**
      * @hidden
@@ -118,7 +115,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;
     }
     /**
@@ -161,7 +158,7 @@ tslib_1.__decorate([
     tslib_1.__metadata("design:type", TemplateRef)
 ], EditorInsertTableButtonComponent.prototype, "toolbarTemplate", void 0);
 tslib_1.__decorate([
-    ViewChild('popupTemplate', { static: true }),
+    ViewChild('popupTemplate', { static: false }),
     tslib_1.__metadata("design:type", TemplateRef)
 ], EditorInsertTableButtonComponent.prototype, "popupTemplate", void 0);
 tslib_1.__decorate([
@@ -188,6 +185,7 @@ EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = tslib_1.
                 kendoButton
                 #element
                 [attr.title]="title"
+                [attr.tabindex]="tabIndex"
                 [icon]="'table-insert'"
                 [disabled]="disabled"
                 (click)="toggle()"
@@ -195,7 +193,14 @@ EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = tslib_1.
             ></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>

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, 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: 1635505364,
+    publishDate: 1637061495,
     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'
 };
@@ -2376,6 +2376,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
@@ -3015,7 +3087,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));
@@ -3078,7 +3151,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                     contentAreaClasslist.add('k-state-focused');
                 }
                 if (!this.focusChangedProgrammatically) {
-                    this.onFocus.emit();
+                    this.ngZone.run(() => this.onFocus.emit());
                 }
             }));
             this.subs.add(fromEvent(containerElement, 'focusout')
@@ -3087,7 +3160,7 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
                     contentAreaClasslist.remove('k-state-focused');
                 }
                 if (!this.focusChangedProgrammatically) {
-                    this.onBlur.emit();
+                    this.ngZone.run(() => this.onBlur.emit());
                 }
             }));
         }
@@ -4977,9 +5050,6 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
             this.toggle(false);
         }));
     }
-    ngAfterViewInit() {
-        this.getButton().tabIndex = -1;
-    }
     ngOnDestroy() {
         this.destroyPopup();
         if (this.subs) {
@@ -5022,7 +5092,7 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
      * @hidden
      */
     onBlur() {
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         this.buttonBlurred.emit();
     }
     /**
@@ -5043,8 +5113,8 @@ let EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = clas
      * @hidden
      */
     focus() {
+        this.tabIndex = 0;
         this.getButton().focus();
-        this.getButton().tabIndex = 0;
     }
     /**
      * @hidden
@@ -5053,7 +5123,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 +5166,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 +5193,7 @@ EditorInsertTableButtonComponent = EditorInsertTableButtonComponent_1 = __decora
                 kendoButton
                 #element
                 [attr.title]="title"
+                [attr.tabindex]="tabIndex"
                 [icon]="'table-insert'"
                 [disabled]="disabled"
                 (click)="toggle()"
@@ -5130,7 +5201,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>

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, 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: 1635505364,
+    publishDate: 1637061495,
     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'
 };
@@ -2244,7 +2244,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
  */
@@ -2911,7 +2911,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));
@@ -2974,7 +2975,7 @@ var EditorComponent = /** @class */ (function () {
                     contentAreaClasslist_1.add('k-state-focused');
                 }
                 if (!_this.focusChangedProgrammatically) {
-                    _this.onFocus.emit();
+                    _this.ngZone.run(function () { return _this.onFocus.emit(); });
                 }
             }));
             this.subs.add(fromEvent(containerElement, 'focusout')
@@ -2983,7 +2984,7 @@ var EditorComponent = /** @class */ (function () {
                     contentAreaClasslist_1.remove('k-state-focused');
                 }
                 if (!_this.focusChangedProgrammatically) {
-                    _this.onBlur.emit();
+                    _this.ngZone.run(function () { return _this.onBlur.emit(); });
                 }
             }));
         }
@@ -4477,9 +4478,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 +4528,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
      * @hidden
      */
     EditorInsertTableButtonComponent.prototype.onBlur = function () {
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         this.buttonBlurred.emit();
     };
     /**
@@ -4551,8 +4549,8 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
      * @hidden
      */
     EditorInsertTableButtonComponent.prototype.focus = function () {
+        this.tabIndex = 0;
         this.getButton().focus();
-        this.getButton().tabIndex = 0;
     };
     /**
      * @hidden
@@ -4561,7 +4559,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 +4602,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 +4622,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,

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/editor.component.js

@@ -672,7 +672,8 @@ var EditorComponent = /** @class */ (function () {
             kendo_editor_common_1.keymap(kendo_editor_common_1.buildListKeymap(currentSchema)),
             kendo_editor_common_1.keymap(kendo_editor_common_1.buildKeymap(currentSchema, { applyToWord: this.applyToWord })),
             kendo_editor_common_1.keymap(kendo_editor_common_1.baseKeymap),
-            kendo_editor_common_1.gapCursor()
+            kendo_editor_common_1.gapCursor(),
+            kendo_editor_common_1.imageResizing()
         ];
         if (this.placeholder) {
             defaultPlugins.push(kendo_editor_common_1.placeholder(this.placeholder));
@@ -735,7 +736,7 @@ var EditorComponent = /** @class */ (function () {
                     contentAreaClasslist_1.add('k-state-focused');
                 }
                 if (!_this.focusChangedProgrammatically) {
-                    _this.onFocus.emit();
+                    _this.ngZone.run(function () { return _this.onFocus.emit(); });
                 }
             }));
             this.subs.add(rxjs_1.fromEvent(containerElement, 'focusout')
@@ -744,7 +745,7 @@ var EditorComponent = /** @class */ (function () {
                     contentAreaClasslist_1.remove('k-state-focused');
                 }
                 if (!_this.focusChangedProgrammatically) {
-                    _this.onBlur.emit();
+                    _this.ngZone.run(function () { return _this.onBlur.emit(); });
                 }
             }));
         }

package/dist/npm/package-metadata.js

@@ -11,7 +11,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1635505364,
+    publishDate: 1637061495,
     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'
 };

package/dist/npm/tools/tables/editor-insert-table-button.component.js

@@ -47,9 +47,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) {
@@ -100,7 +97,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
      * @hidden
      */
     EditorInsertTableButtonComponent.prototype.onBlur = function () {
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         this.buttonBlurred.emit();
     };
     /**
@@ -121,8 +118,8 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
      * @hidden
      */
     EditorInsertTableButtonComponent.prototype.focus = function () {
+        this.tabIndex = 0;
         this.getButton().focus();
-        this.getButton().tabIndex = 0;
     };
     /**
      * @hidden
@@ -131,7 +128,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
         if (ev.keyCode === kendo_angular_common_1.Keys.Space || ev.keyCode === kendo_angular_common_1.Keys.Enter) {
             return true;
         }
-        this.getButton().tabIndex = -1;
+        this.tabIndex = -1;
         return false;
     };
     /**
@@ -174,7 +171,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], EditorInsertTableButtonComponent.prototype, "toolbarTemplate", void 0);
     tslib_1.__decorate([
-        core_1.ViewChild('popupTemplate', { static: true }),
+        core_1.ViewChild('popupTemplate', { static: false }),
         tslib_1.__metadata("design:type", core_1.TemplateRef)
     ], EditorInsertTableButtonComponent.prototype, "popupTemplate", void 0);
     tslib_1.__decorate([
@@ -194,7 +191,7 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
             // tslint:disable-next-line:no-forward-ref
             providers: [{ provide: kendo_angular_toolbar_1.ToolBarToolComponent, useExisting: core_1.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    "
         }),
         tslib_1.__param(0, core_1.Host()),
         tslib_1.__metadata("design:paramtypes", [editor_component_1.EditorComponent,