@progress/kendo-angular-editor 2.4.0-dev.202110181309 → 2.4.1-dev.202110261541

package/dist/es/editor.component.js

@@ -10,7 +10,7 @@ import { map, filter, auditTime, take } from 'rxjs/operators';
 import { ToolBarComponent } from '@progress/kendo-angular-toolbar';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
-import { buildKeymap, buildListKeymap, hasSameMarkup, getHtml, pasteCleanup, sanitize, removeComments, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute, placeholder, EditorView, EditorState, baseKeymap, keymap, history, parseContent, Plugin, PluginKey, TextSelection, Schema, gapCursor } from '@progress/kendo-editor-common';
+import { buildKeymap, buildListKeymap, hasSameMarkup, getHtml, pasteCleanup, sanitize, removeComments, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute, placeholder, EditorView, EditorState, baseKeymap, keymap, history, parseContent, Plugin, PluginKey, TextSelection, Schema, gapCursor, getSelectionText } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { schema } from './config/schema';
@@ -344,7 +344,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "minWidth", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.minWidth;
+            return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -352,7 +352,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "maxWidth", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.maxWidth;
+            return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -360,7 +360,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "minHeight", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.minHeight;
+            return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -368,7 +368,7 @@ var EditorComponent = /** @class */ (function () {
     Object.defineProperty(EditorComponent.prototype, "maxHeight", {
         get: function () {
             var resizableOptions = this.resizable;
-            return resizableOptions.maxHeight;
+            return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
         },
         enumerable: true,
         configurable: true
@@ -391,6 +391,16 @@ var EditorComponent = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(EditorComponent.prototype, "selectionText", {
+        /**
+         * Returns the text which the current Editor selection contains ([see example]({% slug selection_editor %}#toc-retrieve-the-selected-text)).
+         */
+        get: function () {
+            return this._view && this._view.state ? getSelectionText(this._view.state) : '';
+        },
+        enumerable: true,
+        configurable: true
+    });
     EditorComponent.prototype.ngOnInit = function () {
         var _this = this;
         this.subs.add(this.localization.changes.subscribe(function (_a) {
@@ -403,12 +413,18 @@ var EditorComponent = /** @class */ (function () {
         if (!this.iframe) {
             this.contentAreaLoaded.next();
         }
+        if (this.resizable) {
+            this.normalizeSize();
+        }
     };
     EditorComponent.prototype.ngOnChanges = function (changes) {
         var _this = this;
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(function () { return _this.initialize(); });
         }
+        if (changes.resizable && !changes.resizable.isFirstChange()) {
+            this.normalizeSize();
+        }
     };
     /**
      * @hidden
@@ -564,7 +580,12 @@ var EditorComponent = /** @class */ (function () {
         return getHtml(this._view.state);
     };
     EditorComponent.prototype.ngOnDestroy = function () {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     };
     /**
      * @hidden
@@ -745,6 +766,48 @@ var EditorComponent = /** @class */ (function () {
             .pipe(filter(function (event) { return !_this.viewMountElement.contains(event.relatedTarget); }))
             .subscribe(function () { return _this.onTouchedCallback(); }));
     };
+    EditorComponent.prototype.normalizeSize = function () {
+        var _this = this;
+        if (typeof this.resizable === 'object' && !this._styleObserver) {
+            var element_1 = this.element.nativeElement;
+            this._styleObserver = new MutationObserver(function () {
+                _this.ngZone.runOutsideAngular(function () { return _this.normalizeProperties(element_1); });
+            });
+            this._styleObserver.observe(element_1, { attributeFilter: ['style'] });
+        }
+    };
+    EditorComponent.prototype.normalizeProperties = function (element) {
+        var props = Object.keys(this.resizable);
+        var pixelWidth = parseInt(element.style.width, 10);
+        var pixelHeight = parseInt(element.style.height, 10);
+        var resizable = this.resizable;
+        props.forEach(function (prop) {
+            var isMinProp = prop.startsWith('min');
+            var isMaxProp = !isMinProp;
+            var isWidthProp = prop.endsWith('Width');
+            var isHeightProp = !isWidthProp;
+            if (isMinProp && isWidthProp) {
+                if (pixelWidth < resizable.minWidth) {
+                    element.style.width = resizable.minWidth + 'px';
+                }
+            }
+            else if (isMinProp && isHeightProp) {
+                if (pixelHeight < resizable.minHeight) {
+                    element.style.height = resizable.minHeight + 'px';
+                }
+            }
+            else if (isMaxProp && isWidthProp) {
+                if (pixelWidth > resizable.maxWidth) {
+                    element.style.width = resizable.maxWidth + 'px';
+                }
+            }
+            else {
+                if (pixelHeight > resizable.maxHeight) {
+                    element.style.height = resizable.maxHeight + 'px';
+                }
+            }
+        });
+    };
     var EditorComponent_1;
     tslib_1.__decorate([
         Input(),

package/dist/es/package-metadata.js

@@ -9,7 +9,7 @@ export var packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1634562312,
+    publishDate: 1635262687,
     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/es/tools/colorpicker/editor-colorpicker.component.js

@@ -58,7 +58,9 @@ var EditorColorPickerComponent = /** @class */ (function (_super) {
         });
     };
     EditorColorPickerComponent.prototype.ngOnDestroy = function () {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     };
     /**
      * @hidden

package/dist/es/tools/fontfamily/editor-fontfamily.component.js

@@ -95,7 +95,9 @@ var EditorFontFamilyComponent = /** @class */ (function (_super) {
         }
     };
     EditorFontFamilyComponent.prototype.ngOnDestroy = function () {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     };
     Object.defineProperty(EditorFontFamilyComponent.prototype, "outerWidth", {
         get: function () {

package/dist/es/tools/fontsize/editor-fontsize.component.js

@@ -90,7 +90,9 @@ var EditorFontSizeComponent = /** @class */ (function (_super) {
         }
     };
     EditorFontSizeComponent.prototype.ngOnDestroy = function () {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     };
     Object.defineProperty(EditorFontSizeComponent.prototype, "outerWidth", {
         get: function () {

package/dist/es/tools/format/editor-format.component.js

@@ -90,7 +90,9 @@ var EditorFormatComponent = /** @class */ (function (_super) {
         }
     };
     EditorFormatComponent.prototype.ngOnDestroy = function () {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     };
     Object.defineProperty(EditorFormatComponent.prototype, "outerWidth", {
         get: function () {

package/dist/es/tools/shared/editor-command-base.js

@@ -32,7 +32,9 @@ var EditorCommandBase = /** @class */ (function () {
         });
     };
     EditorCommandBase.prototype.ngOnDestroy = function () {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     };
     // tslint:disable-next-line
     EditorCommandBase.prototype.clickHandler = function () { };

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

@@ -39,9 +39,9 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
             var insertTable = _a.insertTable;
             _this.disabled = insertTable.disabled;
         });
-        _this.subs = _this.buttonBlurred.pipe(concatMap(function () { return interval(200).pipe(take(1), takeUntil(_this.cellClicked)); })).subscribe(function () {
+        _this.subs.add(_this.buttonBlurred.pipe(concatMap(function () { return interval(200).pipe(take(1), takeUntil(_this.cellClicked)); })).subscribe(function () {
             _this.toggle(false);
-        });
+        }));
         return _this;
     }
     EditorInsertTableButtonComponent_1 = EditorInsertTableButtonComponent;
@@ -50,7 +50,9 @@ var EditorInsertTableButtonComponent = /** @class */ (function (_super) {
     };
     EditorInsertTableButtonComponent.prototype.ngOnDestroy = function () {
         this.destroyPopup();
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
     };
     Object.defineProperty(EditorInsertTableButtonComponent.prototype, "outerWidth", {
         get: function () {

package/dist/es2015/common/resizable-options.interface.d.ts

@@ -7,19 +7,19 @@
  */
 export interface EditorResizableOptions {
     /**
-     * The value of the [CSS `min-width` property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) that will be applied to the Editor wrapper element.
+     * Specifies the minimum width of the resizable Editor in pixels.
      */
-    minWidth?: string;
+    minWidth?: number;
     /**
-     * The value of the [CSS `min-height` property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-height) that will be applied to the Editor wrapper element.
+     * Specifies the minimum height of the resizable Editor in pixels.
      */
-    minHeight?: string;
+    minHeight?: number;
     /**
-     * The value of the [CSS `max-width` property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-width) that will be applied to the Editor wrapper element.
+     * Specifies the maximum width of the resizable Editor in pixels.
      */
-    maxWidth?: string;
+    maxWidth?: number;
     /**
-     * The value of the [CSS `max-height` property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-height) that will be applied to the Editor wrapper element.
+     * Specifies the maximum height of the resizable Editor in pixels.
      */
-    maxHeight?: string;
+    maxHeight?: number;
 }

package/dist/es2015/editor.component.d.ts

@@ -129,6 +129,10 @@ export declare class EditorComponent implements AfterViewInit, ControlValueAcces
      * that manages the DOM structure that represents an editable document.
      */
     readonly view: EditorView;
+    /**
+     * Returns the text which the current Editor selection contains ([see example]({% slug selection_editor %}#toc-retrieve-the-selected-text)).
+     */
+    readonly selectionText: string;
     /**
      * @hidden
      */
@@ -154,6 +158,7 @@ export declare class EditorComponent implements AfterViewInit, ControlValueAcces
     private _schema;
     private _plugins;
     private _placeholder;
+    private _styleObserver;
     private afterViewInit;
     private contentAreaLoaded;
     constructor(dialogService: DialogService, localization: LocalizationService, cdr: ChangeDetectorRef, ngZone: NgZone, element: ElementRef);
@@ -267,6 +272,8 @@ export declare class EditorComponent implements AfterViewInit, ControlValueAcces
      */
     isEmpty(): boolean;
     private initialize;
+    private normalizeSize;
+    private normalizeProperties;
     private onChangeCallback;
     private onTouchedCallback;
 }

package/dist/es2015/editor.component.js

@@ -11,7 +11,7 @@ import { map, filter, auditTime, take } from 'rxjs/operators';
 import { ToolBarComponent } from '@progress/kendo-angular-toolbar';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { isDocumentAvailable, KendoInput } from '@progress/kendo-angular-common';
-import { buildKeymap, buildListKeymap, hasSameMarkup, getHtml, pasteCleanup, sanitize, removeComments, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute, placeholder, EditorView, EditorState, baseKeymap, keymap, history, parseContent, Plugin, PluginKey, TextSelection, Schema, gapCursor } from '@progress/kendo-editor-common';
+import { buildKeymap, buildListKeymap, hasSameMarkup, getHtml, pasteCleanup, sanitize, removeComments, sanitizeClassAttr, sanitizeStyleAttr, removeAttribute, placeholder, EditorView, EditorState, baseKeymap, keymap, history, parseContent, Plugin, PluginKey, TextSelection, Schema, gapCursor, getSelectionText } from '@progress/kendo-editor-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from './package-metadata';
 import { schema } from './config/schema';
@@ -291,19 +291,19 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
     }
     get minWidth() {
         const resizableOptions = this.resizable;
-        return resizableOptions.minWidth;
+        return resizableOptions.minWidth ? resizableOptions.minWidth + 'px' : undefined;
     }
     get maxWidth() {
         const resizableOptions = this.resizable;
-        return resizableOptions.maxWidth;
+        return resizableOptions.maxWidth ? resizableOptions.maxWidth + 'px' : undefined;
     }
     get minHeight() {
         const resizableOptions = this.resizable;
-        return resizableOptions.minHeight;
+        return resizableOptions.minHeight ? resizableOptions.minHeight + 'px' : undefined;
     }
     get maxHeight() {
         const resizableOptions = this.resizable;
-        return resizableOptions.maxHeight;
+        return resizableOptions.maxHeight ? resizableOptions.maxHeight + 'px' : undefined;
     }
     get toolbar() {
         return this.defaultToolbarComponent || this.userToolBarComponent;
@@ -315,6 +315,12 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
     get view() {
         return this._view;
     }
+    /**
+     * Returns the text which the current Editor selection contains ([see example]({% slug selection_editor %}#toc-retrieve-the-selected-text)).
+     */
+    get selectionText() {
+        return this._view && this._view.state ? getSelectionText(this._view.state) : '';
+    }
     ngOnInit() {
         this.subs.add(this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
@@ -325,11 +331,17 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         if (!this.iframe) {
             this.contentAreaLoaded.next();
         }
+        if (this.resizable) {
+            this.normalizeSize();
+        }
     }
     ngOnChanges(changes) {
         if (changes.iframe && !changes.iframe.isFirstChange()) {
             this.ngZone.onStable.pipe(take(1)).subscribe(() => this.initialize());
         }
+        if (changes.resizable && !changes.resizable.isFirstChange()) {
+            this.normalizeSize();
+        }
     }
     /**
      * @hidden
@@ -485,7 +497,12 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
         return getHtml(this._view.state);
     }
     ngOnDestroy() {
-        this.subs.unsubscribe();
+        if (this.subs) {
+            this.subs.unsubscribe();
+        }
+        if (this._styleObserver) {
+            this._styleObserver.disconnect();
+        }
     }
     /**
      * @hidden
@@ -665,6 +682,47 @@ let EditorComponent = EditorComponent_1 = class EditorComponent {
             .pipe(filter((event) => !this.viewMountElement.contains(event.relatedTarget)))
             .subscribe(() => this.onTouchedCallback()));
     }
+    normalizeSize() {
+        if (typeof this.resizable === 'object' && !this._styleObserver) {
+            const element = this.element.nativeElement;
+            this._styleObserver = new MutationObserver(() => {
+                this.ngZone.runOutsideAngular(() => this.normalizeProperties(element));
+            });
+            this._styleObserver.observe(element, { attributeFilter: ['style'] });
+        }
+    }
+    normalizeProperties(element) {
+        const props = Object.keys(this.resizable);
+        const pixelWidth = parseInt(element.style.width, 10);
+        const pixelHeight = parseInt(element.style.height, 10);
+        const resizable = this.resizable;
+        props.forEach(prop => {
+            const isMinProp = prop.startsWith('min');
+            const isMaxProp = !isMinProp;
+            const isWidthProp = prop.endsWith('Width');
+            const isHeightProp = !isWidthProp;
+            if (isMinProp && isWidthProp) {
+                if (pixelWidth < resizable.minWidth) {
+                    element.style.width = resizable.minWidth + 'px';
+                }
+            }
+            else if (isMinProp && isHeightProp) {
+                if (pixelHeight < resizable.minHeight) {
+                    element.style.height = resizable.minHeight + 'px';
+                }
+            }
+            else if (isMaxProp && isWidthProp) {
+                if (pixelWidth > resizable.maxWidth) {
+                    element.style.width = resizable.maxWidth + 'px';
+                }
+            }
+            else {
+                if (pixelHeight > resizable.maxHeight) {
+                    element.style.height = resizable.maxHeight + 'px';
+                }
+            }
+        });
+    }
 };
 tslib_1.__decorate([
     Input(),