@progress/kendo-angular-editor 4.0.0 → 4.0.1-dev.202205191407

package/editor.component.d.ts

@@ -134,6 +134,7 @@ export declare class EditorComponent implements AfterViewInit, ControlValueAcces
      */
     stateChange: BehaviorSubject<any>;
     get toolbar(): ToolBarComponent;
+    get toolbarElement(): ElementRef;
     /**
      * Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object
      * that manages the DOM structure that represents an editable document.

package/esm2015/editor.component.js

@@ -201,7 +201,7 @@ export class EditorComponent {
         this.onChangeCallback = (value) => {
             this.changeValue(value);
         };
-        this.onTouchedCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.onTouchedCallback = (_) => { };
         this.onPaste = (_view, nativeEvent) => {
             this._pasteEvent = nativeEvent;
             return false;
@@ -382,6 +382,9 @@ export class EditorComponent {
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
     }
+    get toolbarElement() {
+        return this.defaultToolbar || this.userToolBarElement;
+    }
     /**
      * Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object
      * that manages the DOM structure that represents an editable document.
@@ -402,6 +405,7 @@ export class EditorComponent {
         this.subs.add(this.toolsService.needsCheck.subscribe(() => this.cdr.markForCheck()));
     }
     ngAfterViewInit() {
+        var _a;
         this.afterViewInit.next();
         if (!this.iframe) {
             this.contentAreaLoaded.next();
@@ -409,6 +413,13 @@ export class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        // address edge cases for responsive toolbar tools
+        // calculations - https://github.com/telerik/kendo-angular/issues/3661
+        if ((_a = this.toolbar) === null || _a === void 0 ? void 0 : _a.resizable) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => this.toolbar.onResize(), 70);
+            });
+        }
     }
     ngOnChanges(changes) {
         if (changes.value && this.view) {
@@ -741,7 +752,7 @@ export class EditorComponent {
         }));
         this.subs.add(fromEvent(this.viewMountElement, 'keyup')
             .pipe(map((e) => e.keyCode), filter((code) => code === 121), // F10
-        map(() => this.userToolBarElement || this.defaultToolbar))
+        map(() => this.toolbarElement))
             .subscribe((toolbar) => toolbar.nativeElement.focus()));
         this.subs.add(fromEvent(this.viewMountElement, 'blur')
             .pipe(filter((event) => !this.viewMountElement.contains(event.relatedTarget)))
@@ -820,7 +831,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             provide: KendoInput,
             useExisting: forwardRef(() => EditorComponent)
         }
-    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoEditorLocalizedMessages
             i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
@@ -931,7 +942,6 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             deleteTable="Delete table"
         >
         </ng-container>
-
         <ng-content select="kendo-toolbar"></ng-content>
         <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
             <kendo-toolbar-buttongroup>
@@ -1104,7 +1114,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             deleteTable="Delete table"
         >
         </ng-container>
-
         <ng-content select="kendo-toolbar"></ng-content>
         <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
             <kendo-toolbar-buttongroup>
@@ -1225,16 +1234,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['style.maxHeight']
             }], userToolBarComponent: [{
                 type: ContentChild,
-                args: [ToolBarComponent, { static: false }]
+                args: [ToolBarComponent]
             }], userToolBarElement: [{
                 type: ContentChild,
-                args: [ToolBarComponent, { read: ElementRef, static: false }]
+                args: [ToolBarComponent, { read: ElementRef }]
             }], dialogContainer: [{
                 type: ViewChild,
-                args: ['dialogsContainer', { read: ViewContainerRef, static: true }]
+                args: ['dialogsContainer', { read: ViewContainerRef }]
             }], container: [{
                 type: ViewChild,
-                args: ['content', { read: ViewContainerRef, static: false }]
+                args: ['content', { read: ViewContainerRef }]
             }], defaultToolbar: [{
                 type: ViewChild,
                 args: ['defaultToolbar', { read: ElementRef, static: false }]

package/esm2015/package-metadata.js

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

@@ -35,7 +35,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1650441316,
+    publishDate: 1652969231,
     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'
 };
@@ -2823,7 +2823,7 @@ class EditorComponent {
         this.onChangeCallback = (value) => {
             this.changeValue(value);
         };
-        this.onTouchedCallback = (_) => { }; // tslint:disable-line:no-empty
+        this.onTouchedCallback = (_) => { };
         this.onPaste = (_view, nativeEvent) => {
             this._pasteEvent = nativeEvent;
             return false;
@@ -3004,6 +3004,9 @@ class EditorComponent {
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
     }
+    get toolbarElement() {
+        return this.defaultToolbar || this.userToolBarElement;
+    }
     /**
      * Returns the ProseMirror [EditorView](https://prosemirror.net/docs/ref/#view.EditorView) object
      * that manages the DOM structure that represents an editable document.
@@ -3024,6 +3027,7 @@ class EditorComponent {
         this.subs.add(this.toolsService.needsCheck.subscribe(() => this.cdr.markForCheck()));
     }
     ngAfterViewInit() {
+        var _a;
         this.afterViewInit.next();
         if (!this.iframe) {
             this.contentAreaLoaded.next();
@@ -3031,6 +3035,13 @@ class EditorComponent {
         if (this.resizable) {
             this.normalizeSize();
         }
+        // address edge cases for responsive toolbar tools
+        // calculations - https://github.com/telerik/kendo-angular/issues/3661
+        if ((_a = this.toolbar) === null || _a === void 0 ? void 0 : _a.resizable) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => this.toolbar.onResize(), 70);
+            });
+        }
     }
     ngOnChanges(changes) {
         if (changes.value && this.view) {
@@ -3363,7 +3374,7 @@ class EditorComponent {
         }));
         this.subs.add(fromEvent(this.viewMountElement, 'keyup')
             .pipe(map((e) => e.keyCode), filter$1((code) => code === 121), // F10
-        map(() => this.userToolBarElement || this.defaultToolbar))
+        map(() => this.toolbarElement))
             .subscribe((toolbar) => toolbar.nativeElement.focus()));
         this.subs.add(fromEvent(this.viewMountElement, 'blur')
             .pipe(filter$1((event) => !this.viewMountElement.contains(event.relatedTarget)))
@@ -3442,7 +3453,7 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             provide: KendoInput,
             useExisting: forwardRef(() => EditorComponent)
         }
-    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "userToolBarComponent", first: true, predicate: ToolBarComponent, descendants: true }, { propertyName: "userToolBarElement", first: true, predicate: ToolBarComponent, descendants: true, read: ElementRef }], viewQueries: [{ propertyName: "dialogContainer", first: true, predicate: ["dialogsContainer"], descendants: true, read: ViewContainerRef }, { propertyName: "container", first: true, predicate: ["content"], descendants: true, read: ViewContainerRef }, { propertyName: "defaultToolbar", first: true, predicate: ["defaultToolbar"], descendants: true, read: ElementRef }, { propertyName: "defaultToolbarComponent", first: true, predicate: ["defaultToolbar"], descendants: true, read: ToolBarComponent }], usesOnChanges: true, ngImport: i0, template: `
         <ng-container
             kendoEditorLocalizedMessages
             i18n-alignCenter="kendo.editor.alignCenter|The title of the tool that aligns text in the center."
@@ -3553,7 +3564,6 @@ EditorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             deleteTable="Delete table"
         >
         </ng-container>
-
         <ng-content select="kendo-toolbar"></ng-content>
         <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
             <kendo-toolbar-buttongroup>
@@ -3726,7 +3736,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             deleteTable="Delete table"
         >
         </ng-container>
-
         <ng-content select="kendo-toolbar"></ng-content>
         <kendo-toolbar [overflow]="true" [tabindex]="readonly ? -1 : 0" *ngIf="!userToolBarElement" #defaultToolbar>
             <kendo-toolbar-buttongroup>
@@ -3847,16 +3856,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: ['style.maxHeight']
             }], userToolBarComponent: [{
                 type: ContentChild,
-                args: [ToolBarComponent, { static: false }]
+                args: [ToolBarComponent]
             }], userToolBarElement: [{
                 type: ContentChild,
-                args: [ToolBarComponent, { read: ElementRef, static: false }]
+                args: [ToolBarComponent, { read: ElementRef }]
             }], dialogContainer: [{
                 type: ViewChild,
-                args: ['dialogsContainer', { read: ViewContainerRef, static: true }]
+                args: ['dialogsContainer', { read: ViewContainerRef }]
             }], container: [{
                 type: ViewChild,
-                args: ['content', { read: ViewContainerRef, static: false }]
+                args: ['content', { read: ViewContainerRef }]
             }], defaultToolbar: [{
                 type: ViewChild,
                 args: ['defaultToolbar', { read: ElementRef, static: false }]

package/main.d.ts

@@ -5,7 +5,7 @@
 export { EditorComponent } from './editor.component';
 export { EditorModule } from './editor.module';
 export { schema, Schema } from './config/schema';
-export { EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes } from '@progress/kendo-editor-common';
+export { EditorState, Plugin, PluginKey, Transaction, EditorView, Decoration, DecorationSet, NodeType, Node, MarkType, Mark, InputRule, inputRules, wrappingInputRule, textblockTypeInputRule, keymap, baseKeymap, history, dropCursor, gapCursor, tableNodes, NodeSpec, MarkSpec } from '@progress/kendo-editor-common';
 export { getSelectionText } from './util';
 export { PluginsFn } from './common/plugins-function';
 export { ApplyToWordOptions } from './common/apply-to-word-options';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-editor",
-  "version": "4.0.0",
+  "version": "4.0.1-dev.202205191407",
   "description": "Kendo UI Editor for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",