@talrace/ngx-noder 0.0.21 → 0.0.22

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, ChangeDetectorRef, HostBinding, Input, Injectable, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, NgModule, Inject } from '@angular/core';
+import { Directive, Injectable, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, NgModule, Inject } from '@angular/core';
 import { Subject, BehaviorSubject, fromEvent, throttleTime, filter, take, startWith, takeUntil, catchError, debounceTime, distinctUntilChanged } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
@@ -385,10 +385,8 @@ class FormatStyleHelper {
 }
 
 class ElementDataModel {
-    constructor(type, width, height, guid) {
+    constructor(type, guid) {
         this.type = type;
-        this.width = width;
-        this.height = height;
         this.guid = guid;
     }
 }
@@ -419,63 +417,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Directive
         }] });
 
-class BaseNoderComponent extends DestroyComponent {
-    constructor() {
-        super(...arguments);
-        this._isFocused = false;
-        this.cdr = inject(ChangeDetectorRef);
-    }
-    get focused() {
-        return this._isFocused;
-    }
-    get insertIndex() {
-        return this.content.insertIndex;
-    }
-    set insertIndex(val) {
-        this.content.insertIndex = val;
-    }
-    get height() {
-        return this._height;
-    }
-    get width() {
-        return this._width;
-    }
-    get isFocused() {
-        return this._isFocused;
-    }
-    focus() {
-        this._isFocused = true;
-        this.cdr.detectChanges();
-    }
-    blur() {
-        this._isFocused = false;
-        this.cdr.detectChanges();
-    }
-    receiveStyle(_textStyle) { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseNoderComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseNoderComponent, isStandalone: true, inputs: { content: "content", sessionId: "sessionId", contentWidth: "contentWidth", generalProperties: "generalProperties" }, host: { properties: { "class.focused": "this.focused", "attr.data-session-id": "this.sessionId", "attr.data-insert-index": "this.insertIndex" } }, usesInheritance: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseNoderComponent, decorators: [{
-            type: Directive
-        }], propDecorators: { focused: [{
-                type: HostBinding,
-                args: ['class.focused']
-            }], content: [{
-                type: Input
-            }], sessionId: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['attr.data-session-id']
-            }], insertIndex: [{
-                type: HostBinding,
-                args: ['attr.data-insert-index']
-            }], contentWidth: [{
-                type: Input
-            }], generalProperties: [{
-                type: Input
-            }] } });
-
 class OperationsHistoryInfoModel {
     constructor(step, storageLength) {
         this.step = step;
@@ -502,7 +443,7 @@ class EditorService {
         this._setNumberingTemplateType$ = new Subject();
         this._removeNumberings$ = new Subject();
         this._changeImageStyle$ = new Subject();
-        this._changeElementStyle$ = new Subject();
+        this._rerender$ = new Subject();
         this._createCustomComponent$ = new Subject();
         this._insertBreak$ = new Subject();
         this._insertImage$ = new Subject();
@@ -608,8 +549,8 @@ class EditorService {
     get setImageStyle$() {
         return this._changeImageStyle$.asObservable();
     }
-    get changeElementStyle$() {
-        return this._changeElementStyle$.asObservable();
+    get rerender$() {
+        return this._rerender$.asObservable();
     }
     get createCustomComponent$() {
         return this._createCustomComponent$.asObservable();
@@ -753,8 +694,8 @@ class EditorService {
     changeImageStyle(value) {
         this._changeImageStyle$.next(value);
     }
-    changeElementStyle(value) {
-        this._changeElementStyle$.next(value);
+    rerender(index = 0) {
+        this._rerender$.next(index);
     }
     createCustomComponent(model) {
         this._createCustomComponent$.next(model);
@@ -865,19 +806,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }] });
 
-class ElementModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ExternalComponent extends BaseNoderComponent {
+class BaseNoderComponent extends DestroyComponent {
     constructor() {
         super(...arguments);
+        this._isFocused = false;
+        this.cdr = inject(ChangeDetectorRef);
         this.editorService = inject(EditorService);
     }
+    get focused() {
+        return this._isFocused;
+    }
+    get insertIndex() {
+        return this.content.insertIndex;
+    }
+    set insertIndex(val) {
+        this.content.insertIndex = val;
+    }
+    get isFocused() {
+        return this._isFocused;
+    }
+    focus() {
+        this._isFocused = true;
+        this.cdr.detectChanges();
+    }
+    blur() {
+        this._isFocused = false;
+        this.cdr.detectChanges();
+    }
+    receiveStyle(_textStyle) { }
+    requestStyle() {
+        this.editorService.receiveTextStyle(this);
+    }
+    rerender() {
+        this.editorService.rerender(this.insertIndex);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseNoderComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: BaseNoderComponent, isStandalone: true, inputs: { content: "content", sessionId: "sessionId", contentWidth: "contentWidth", generalProperties: "generalProperties" }, host: { properties: { "class.focused": "this.focused", "attr.data-session-id": "this.sessionId", "attr.data-insert-index": "this.insertIndex" } }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: BaseNoderComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { focused: [{
+                type: HostBinding,
+                args: ['class.focused']
+            }], content: [{
+                type: Input
+            }], sessionId: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['attr.data-session-id']
+            }], insertIndex: [{
+                type: HostBinding,
+                args: ['attr.data-insert-index']
+            }], contentWidth: [{
+                type: Input
+            }], generalProperties: [{
+                type: Input
+            }] } });
+
+class ExternalComponent extends BaseNoderComponent {
     focus() {
         super.focus();
         if (this.editorService.isViewOnly) {
@@ -892,16 +879,6 @@ class ExternalComponent extends BaseNoderComponent {
         }
         this.editorService.closeSidenav();
     }
-    changeElementHeight(height) {
-        if (this._height !== height) {
-            this.editorService.changeElementStyle(new ElementModel({ ...this.content, height }));
-        }
-    }
-    changeElementWidth(width) {
-        if (this._width !== width) {
-            this.editorService.changeElementStyle(new ElementModel({ ...this.content, width }));
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ExternalComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: ExternalComponent, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
 }
@@ -961,23 +938,22 @@ var CommandType;
     CommandType[CommandType["ApplyParagraphStyle"] = 8] = "ApplyParagraphStyle";
     CommandType[CommandType["InsertElement"] = 9] = "InsertElement";
     CommandType[CommandType["InsertBreak"] = 10] = "InsertBreak";
-    CommandType[CommandType["ApplyElementStyle"] = 11] = "ApplyElementStyle";
-    CommandType[CommandType["ApplyImageStyle"] = 12] = "ApplyImageStyle";
-    CommandType[CommandType["AddNumbering"] = 13] = "AddNumbering";
-    CommandType[CommandType["InsertTab"] = 14] = "InsertTab";
-    CommandType[CommandType["InsertTableColumns"] = 15] = "InsertTableColumns";
-    CommandType[CommandType["InsertTableRows"] = 16] = "InsertTableRows";
-    CommandType[CommandType["RemoveTableColumns"] = 17] = "RemoveTableColumns";
-    CommandType[CommandType["RemoveTableRows"] = 18] = "RemoveTableRows";
-    CommandType[CommandType["ResizeTableColumns"] = 19] = "ResizeTableColumns";
-    CommandType[CommandType["RestoreTable"] = 20] = "RestoreTable";
-    CommandType[CommandType["InsertTable"] = 21] = "InsertTable";
-    CommandType[CommandType["InsertImage"] = 22] = "InsertImage";
-    CommandType[CommandType["RemoveNumberings"] = 23] = "RemoveNumberings";
-    CommandType[CommandType["RestoreNumberings"] = 24] = "RestoreNumberings";
-    CommandType[CommandType["Replace"] = 25] = "Replace";
-    CommandType[CommandType["InsertLink"] = 26] = "InsertLink";
-    CommandType[CommandType["InsertParagraph"] = 27] = "InsertParagraph";
+    CommandType[CommandType["ApplyImageStyle"] = 11] = "ApplyImageStyle";
+    CommandType[CommandType["AddNumbering"] = 12] = "AddNumbering";
+    CommandType[CommandType["InsertTab"] = 13] = "InsertTab";
+    CommandType[CommandType["InsertTableColumns"] = 14] = "InsertTableColumns";
+    CommandType[CommandType["InsertTableRows"] = 15] = "InsertTableRows";
+    CommandType[CommandType["RemoveTableColumns"] = 16] = "RemoveTableColumns";
+    CommandType[CommandType["RemoveTableRows"] = 17] = "RemoveTableRows";
+    CommandType[CommandType["ResizeTableColumns"] = 18] = "ResizeTableColumns";
+    CommandType[CommandType["RestoreTable"] = 19] = "RestoreTable";
+    CommandType[CommandType["InsertTable"] = 20] = "InsertTable";
+    CommandType[CommandType["InsertImage"] = 21] = "InsertImage";
+    CommandType[CommandType["RemoveNumberings"] = 22] = "RemoveNumberings";
+    CommandType[CommandType["RestoreNumberings"] = 23] = "RestoreNumberings";
+    CommandType[CommandType["Replace"] = 24] = "Replace";
+    CommandType[CommandType["InsertLink"] = 25] = "InsertLink";
+    CommandType[CommandType["InsertParagraph"] = 26] = "InsertParagraph";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1007,14 +983,6 @@ class AddNumberingModel {
     }
 }
 
-class ApplyElementStyleModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ApplyImageStyleModel {
     constructor(fields) {
         if (fields) {
@@ -1181,6 +1149,14 @@ class DocumentHandler extends BaseHandler {
     }
 }
 
+class ElementModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class FormatHelper {
     static sliceSection(formats, startIndex, endIndex) {
         let result = [];
@@ -1759,11 +1735,6 @@ class OperationHistory {
         const undoStep = new RestoreParagraphStylesModel({ paragraphs });
         this.addToHistory(undoStep, redoStep);
     }
-    pushApplyElementStyle(previous, current) {
-        const redoStep = new ApplyElementStyleModel({ insertIndex: current.insertIndex, width: current.width, height: current.height });
-        const undoStep = new ApplyElementStyleModel({ insertIndex: previous.insertIndex, width: previous.width, height: previous.height });
-        this.addToHistory(undoStep, redoStep);
-    }
     pushInsertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex, table) {
         const oldTable = JSON.parse(JSON.stringify(table));
         const redoStep = new InsertTableRowsModel({ insertIndex, rowsCount, targetIndex, inheritIndex });
@@ -3300,9 +3271,6 @@ class CommandModel {
             if (fields.addNumbering) {
                 fields.addNumbering = new AddNumberingModel(fields.addNumbering);
             }
-            if (fields.applyElementStyle) {
-                fields.applyElementStyle = new ApplyElementStyleModel(fields.applyElementStyle);
-            }
             if (fields.applyImageStyle) {
                 fields.applyImageStyle = new ApplyImageStyleModel(fields.applyImageStyle);
             }
@@ -3492,9 +3460,6 @@ class SaveCommandsHelper {
     static getResizeTableColumnsCommand(resizeTableColumns, targets) {
         return new CommandModel({ commandType: CommandType.ResizeTableColumns, resizeTableColumns, targets });
     }
-    static getApplyElementStyleCommand(applyElementStyle, targets) {
-        return new CommandModel({ commandType: CommandType.ApplyElementStyle, applyElementStyle, targets });
-    }
 }
 
 class SearchOptions {
@@ -4193,7 +4158,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.changeElementStyleSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.replaceSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.replaceSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), this.searchOptionSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -4447,10 +4412,6 @@ class Editor {
         this.saveApplyParagraphStyleToHistory(startIndex, endIndex, paragraphStyle);
         this.session.applyParagraphStyle(startIndex, endIndex, paragraphStyle);
     }
-    applyElementStyle(current) {
-        this.saveApplyElementStyleToHistory(current);
-        this.session.applyElementStyle(new ApplyElementStyleModel(current));
-    }
     setNumberingTemplate(templateLevels) {
         const range = this.selection.range;
         const startIndex = this.session.model.paragraphs[range.start.row].insertIndex;
@@ -4622,10 +4583,6 @@ class Editor {
             this.session.insertBreakByDocumentIndex(operation);
             command = SaveCommandsHelper.getInsertBreakCommand(operation, this.targets);
         }
-        else if (operation instanceof ApplyElementStyleModel) {
-            this.session.applyElementStyle(operation);
-            command = SaveCommandsHelper.getApplyElementStyleCommand(operation, this.targets);
-        }
         else if (operation instanceof InsertTabModel) {
             this.session.insertTabByDocumentIndex(operation);
             command = SaveCommandsHelper.getInsertTabCommand(operation, this.targets);
@@ -4766,11 +4723,6 @@ class Editor {
         this.history.pushApplyParagraphStyle(startIndex, endIndex, paragraphStyle, paragraphsDeepCopy);
         this.commandsService.createCommand(SaveCommandsHelper.getApplyParagraphStyleCommand(startIndex, endIndex, paragraphStyle, this.targets));
     }
-    saveApplyElementStyleToHistory(current) {
-        const previous = this.session.model.elements.find(x => x.insertIndex === current.insertIndex);
-        this.history.pushApplyElementStyle(previous, current);
-        this.commandsService.createCommand(SaveCommandsHelper.getApplyElementStyleCommand(current, this.targets));
-    }
     saveAddNumberingToHistory(templateLevels, startIndex, endIndex) {
         const paragraphs = IndexedElementHelper.sliceSection(this.session.model.paragraphs, startIndex, endIndex);
         const paragraphsDeepCopy = paragraphs.map(x => new ParagraphModel({ insertIndex: x.insertIndex, paragraphStyle: new ParagraphStyleModel({ ...x.paragraphStyle }) }));
@@ -5248,8 +5200,8 @@ class Editor {
     setImageStyleSubscription() {
         return this.editorService.setImageStyle$.subscribe(image => this.applyImageStyles(image));
     }
-    changeElementStyleSubscription() {
-        return this.editorService.changeElementStyle$.subscribe(x => this.applyElementStyle(x));
+    rerenderSubscription() {
+        return this.editorService.rerender$.subscribe(index => this.session.rerender(index));
     }
     createCustomComponentSubscription() {
         return this.editorService.createCustomComponent$.subscribe(model => {
@@ -6521,10 +6473,9 @@ class NoderTableComponent extends BaseNoderComponent {
     set table(val) {
         this.content = val;
     }
-    constructor(componentService, editorService, el, overlayService, regulatorService) {
+    constructor(componentService, el, overlayService, regulatorService) {
         super();
         this.componentService = componentService;
-        this.editorService = editorService;
         this.el = el;
         this.overlayService = overlayService;
         this.regulatorService = regulatorService;
@@ -6592,7 +6543,7 @@ class NoderTableComponent extends BaseNoderComponent {
         const cellWidth = this.getCellWidth(tableRow, cellIndex, absoluteCellIndex);
         if (tableRow.cells[cellIndex].widthType === 'pct') {
             tableRow.cells[cellIndex].widthType = 'dxa';
-            return (cellWidth * this._width) / 5000; // 5000 is equal to 100% in docx units of measurement
+            return (cellWidth * this.width) / 5000; // 5000 is equal to 100% in docx units of measurement
         }
         return ScalingHelper.scale(cellWidth, this.generalProperties.scalingRatio);
     }
@@ -6618,7 +6569,7 @@ class NoderTableComponent extends BaseNoderComponent {
         this.initialize();
     }
     insertRows(rowsCount, targetIndex) {
-        this._width = this.getTableWidth();
+        this.width = this.getTableWidth();
         let rowIndex = 0;
         while (rowIndex < rowsCount) {
             const targetRowIndex = targetIndex + rowIndex;
@@ -6790,7 +6741,7 @@ class NoderTableComponent extends BaseNoderComponent {
                 bordersHeight += this.borderSize;
             }
         }
-        this._height = rowsHeight + bordersHeight;
+        this.height = rowsHeight + bordersHeight;
     }
     processSplit(leftSpaceOnPage, spaceBetweenPagesContent, contentHeight) {
         this.removeSplits();
@@ -6903,13 +6854,13 @@ class NoderTableComponent extends BaseNoderComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableComponent, deps: [{ token: ComponentService }, { token: EditorService }, { token: i0.ElementRef }, { token: OverlayService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableComponent, deps: [{ token: ComponentService }, { token: i0.ElementRef }, { token: OverlayService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableComponent, isStandalone: false, selector: "app-nod-table", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentService }, { type: EditorService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
+        }], ctorParameters: () => [{ type: ComponentService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
 
 class NumberingDataModel {
     constructor(fields) {
@@ -8593,19 +8544,18 @@ class NoderImageComponent extends BaseNoderComponent {
         this.content = val;
     }
     get size() {
-        return { width: this._width, height: this._height };
+        return { width: this.width, height: this.height };
     }
-    constructor(elementRef, apiService, editorService) {
+    constructor(elementRef, apiService) {
         super();
         this.elementRef = elementRef;
         this.apiService = apiService;
-        this.editorService = editorService;
         this.isCanvas = false;
     }
     initialize() {
         const url = this.image.content?.replace('/api/', '') ?? '';
-        this._height = ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio);
-        this._width = ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio);
+        this.height = ScalingHelper.scale(this.image.height, this.generalProperties.scalingRatio);
+        this.width = ScalingHelper.scale(this.image.width, this.generalProperties.scalingRatio);
         this.apiService.getFile(url).subscribe(x => {
             const fileSource = URL.createObjectURL(x);
             const image = this.createImage(fileSource);
@@ -8619,8 +8569,8 @@ class NoderImageComponent extends BaseNoderComponent {
         this.editorService.changeImageStyle(resizedImage);
     }
     resize(size) {
-        this._width = size.width;
-        this._height = size.height;
+        this.width = size.width;
+        this.height = size.height;
         this.isCanvas ? this.resizeCanvas(size) : this.resizeImage(size);
         this.cdr.markForCheck();
     }
@@ -8638,8 +8588,8 @@ class NoderImageComponent extends BaseNoderComponent {
     }
     createImage(fileSource) {
         const imageEl = document.createElement('img');
-        imageEl.width = this._width;
-        imageEl.height = this._height;
+        imageEl.width = this.width;
+        imageEl.height = this.height;
         imageEl.src = fileSource;
         return imageEl;
     }
@@ -8653,27 +8603,15 @@ class NoderImageComponent extends BaseNoderComponent {
         image.style.width = `${size.width}px`;
         image.style.height = `${size.height}px`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderImageComponent, deps: [{ token: i0.ElementRef }, { token: ImageApiService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderImageComponent, deps: [{ token: i0.ElementRef }, { token: ImageApiService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderImageComponent, isStandalone: false, selector: "app-nod-image", usesInheritance: true, ngImport: i0, template: "<app-nod-resizer\n    *ngIf=\"isFocused\"\n    class=\"resizer\"\n    [isDisabled]=\"isViewOnly$ | async\"\n    [size]=\"size\"\n    (resizeEnd)=\"onResizeEnd($event)\" />\n", styles: [":host{position:relative;outline:none}.resizer{position:absolute;z-index:1}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ResizerComponent, selector: "app-nod-resizer", inputs: ["isDisabled", "size"], outputs: ["resizeEnd"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderImageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-image', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<app-nod-resizer\n    *ngIf=\"isFocused\"\n    class=\"resizer\"\n    [isDisabled]=\"isViewOnly$ | async\"\n    [size]=\"size\"\n    (resizeEnd)=\"onResizeEnd($event)\" />\n", styles: [":host{position:relative;outline:none}.resizer{position:absolute;z-index:1}\n"] }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ImageApiService }, { type: EditorService }] });
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: ImageApiService }] });
 
 class NoderTabComponent extends BaseNoderComponent {
-    get width() {
-        return this._width;
-    }
-    set width(value) {
-        this._width = value;
-    }
-    get height() {
-        return this._height;
-    }
-    set height(value) {
-        this._height = value;
-    }
     get tab() {
         return this.content;
     }
@@ -8684,8 +8622,8 @@ class NoderTabComponent extends BaseNoderComponent {
         this.calculateProperties();
     }
     calculateProperties() {
-        this._height = this.tab.fontSize;
-        this._width = ScalingHelper.scale(this.tab.width, this.generalProperties.scalingRatio);
+        this.height = this.tab.fontSize;
+        this.width = ScalingHelper.scale(this.tab.width, this.generalProperties.scalingRatio);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTabComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTabComponent, isStandalone: false, selector: "app-nod-tab", host: { properties: { "style.width.px": "this.width", "style.fontSize.pt": "this.height" } }, usesInheritance: true, ngImport: i0, template: "&emsp;\n", styles: [":host{position:relative;outline:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
@@ -9641,9 +9579,6 @@ class OperationsHelper {
                     this.applyParagraphStyle(contents, model.startIndex, model.endIndex, model.paragraphStyle);
                     break;
                 }
-                case CommandType.ApplyElementStyle:
-                    this.applyElementStyle(contents, command.applyElementStyle);
-                    break;
                 case CommandType.InsertElement: {
                     const model = command.insertElement;
                     this.insertElement(contents, model);
@@ -9986,11 +9921,6 @@ class OperationsHelper {
     static applyParagraphStyle(document, startIndex, endIndex, style) {
         ParagraphOperationsHelper.apply(document.paragraphs, startIndex, endIndex, style);
     }
-    static applyElementStyle(document, model) {
-        const element = document.elements.find(x => x.insertIndex == model.insertIndex);
-        element.width = model.width ?? element.width;
-        element.height = model.height ?? element.height;
-    }
     static applyImageStyle(document, image) {
         ImageOperationsHelper.apply(document.images, image);
     }
@@ -10211,9 +10141,9 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex).row;
         OperationsHelper.applyTextStyle(this.model, startIndex, endIndex, textStyle);
+        this.provideTextStyle(startIndex, endIndex);
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.setTextStyle(textStyle);
-        this.provideTextStyle(startIndex, endIndex);
     }
     applyParagraphStyle(startIndex, endIndex, paragraphStyle) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
@@ -10222,12 +10152,9 @@ class EditSession {
         this.displayData.updateNextLineIndexes(startParagraph, endParagraph);
         this.applyToolbarStyles();
     }
-    applyElementStyle(model) {
-        OperationsHelper.applyElementStyle(this.model, model);
-        const imageComponentRef = this.customComponents.customElements.find(x => x.instance.insertIndex === model.insertIndex);
-        imageComponentRef.instance.initialize();
-        const paragraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, model.insertIndex).row;
-        this.displayData.updateNextLineIndexes(paragraph, paragraph);
+    rerender(insertIndex) {
+        const paragraphIndex = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex).row;
+        this.displayData.updateNextLineIndexes(paragraphIndex, paragraphIndex);
     }
     addNumbering(levels, startIndex, endIndex) {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
@@ -10282,10 +10209,10 @@ class EditSession {
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
         OperationsHelper.restoreTextStyles(this.model, formats, linkFormats);
+        this.provideTextStyle(startIndex, endIndex);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
-        this.provideTextStyle(startIndex, endIndex);
     }
     restoreParagraphStyles(paragraphs) {
         const startIndex = paragraphs[0].insertIndex;
@@ -12532,7 +12459,7 @@ class BaseToolbarComponent extends DestroyComponent {
     }
     async onCreateElement(model) {
         const data = await model.factoryMethod();
-        const element = new ElementDataModel(model.type, data.width, data.height, data.guid);
+        const element = new ElementDataModel(model.type, data.guid);
         this.createElement.emit(element);
     }
     checkFontLoadedAndApplyStyle(style) {