@talrace/ngx-noder 19.0.51 → 19.0.53

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, InjectionToken, Component, ChangeDetectionStrategy, Inject, ViewChild, EventEmitter, Output, HostListener, createComponent, ApplicationRef, Injector, input, computed, effect, NgModule, output } from '@angular/core';
-import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, filter, fromEvent, take, throttleTime, startWith, takeUntil, tap, map, catchError } from 'rxjs';
+import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, filter, fromEvent, take, throttleTime, startWith, takeUntil, switchMap, from, tap, map, catchError } from 'rxjs';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
 import { ComponentPortal } from '@angular/cdk/portal';
@@ -626,6 +626,7 @@ class PageFormatModel {
 class EditorService {
     constructor() {
         this._styles$ = new BehaviorSubject({});
+        this._revisionId$ = new BehaviorSubject(0);
         this._receiveTextStyle$ = new Subject();
         this._isViewOnly$ = new BehaviorSubject(false);
         this._isViewOnly = false;
@@ -719,6 +720,8 @@ class EditorService {
         this._setCommentsVisibility$ = new Subject();
         this._getCommentText$ = new Subject();
         this._replaceCommentText$ = new Subject();
+        this._requestContentsInsertion$ = new Subject();
+        this._insertContents$ = new Subject();
         this._startNewList$ = new Subject();
         this._continueNumbering$ = new Subject();
         this._setNumberingValue$ = new Subject();
@@ -732,6 +735,9 @@ class EditorService {
     get styles$() {
         return this._styles$.asObservable();
     }
+    get revisionId() {
+        return this._revisionId$.value;
+    }
     get receiveTextStyle$() {
         return this._receiveTextStyle$.asObservable();
     }
@@ -1024,6 +1030,12 @@ class EditorService {
     get replaceCommentText$() {
         return this._replaceCommentText$.asObservable();
     }
+    get requestContentsInsertion$() {
+        return this._requestContentsInsertion$.asObservable();
+    }
+    get insertContents$() {
+        return this._insertContents$.asObservable();
+    }
     get startNewList$() {
         return this._startNewList$.asObservable();
     }
@@ -1033,6 +1045,12 @@ class EditorService {
     get setNumberingValue$() {
         return this._setNumberingValue$.asObservable();
     }
+    requestContentsInsertion(contents, from) {
+        this._requestContentsInsertion$.next({ contents, from });
+    }
+    insertContents(contents) {
+        this._insertContents$.next(contents);
+    }
     startNewList() {
         this._startNewList$.next();
     }
@@ -1090,6 +1108,9 @@ class EditorService {
         }
         this._currentPage$.next(value);
     }
+    setRevisionId(id) {
+        this._revisionId$.next(id);
+    }
     receiveTextStyle(component) {
         this._receiveTextStyle$.next(component);
     }
@@ -1666,6 +1687,8 @@ var CommandType;
     CommandType[CommandType["RemoveComment"] = 39] = "RemoveComment";
     CommandType[CommandType["ApplyNumberingLevels"] = 40] = "ApplyNumberingLevels";
     CommandType[CommandType["ApplyNewNumberingForParagraphs"] = 41] = "ApplyNewNumberingForParagraphs";
+    CommandType[CommandType["InsertContents"] = 42] = "InsertContents";
+    CommandType[CommandType["ReplaceByContents"] = 43] = "ReplaceByContents";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1824,6 +1847,112 @@ class BreakHelper {
     }
 }
 
+class ClipboardHandler {
+    constructor(cdkClipboard) {
+        this.cdkClipboard = cdkClipboard;
+        this.sliceMime = 'application/x-noder-slice+json';
+        this.webSliceMime = `web ${this.sliceMime}`;
+        this.internalState = null;
+    }
+    copyEvent(event, text, slice, revisionId) {
+        if (!event.clipboardData) {
+            this.copyAsync(text, slice, revisionId).catch(() => { });
+            return;
+        }
+        event.preventDefault();
+        const sliceData = this.createSliceData(slice, revisionId);
+        event.clipboardData.setData('text/plain', text);
+        event.clipboardData.setData(this.webSliceMime, JSON.stringify(sliceData));
+        this.internalState = { text, sliceData };
+        this.copyAsync(text, slice, revisionId, false).catch(() => { }); // event not update navigation clipboard! Need update both!
+    }
+    readEvent(event) {
+        if (!event.clipboardData) {
+            return { text: null, sliceData: null };
+        }
+        event.preventDefault();
+        const text = event.clipboardData.getData('text/plain');
+        const sliceJson = event.clipboardData.getData(this.webSliceMime);
+        const sliceData = this.getClipboardSlice(text, sliceJson);
+        return { text: text || null, sliceData };
+    }
+    async copyAsync(text, slice, revisionId, useFallback = true) {
+        const sliceData = this.createSliceData(slice, revisionId);
+        try {
+            const textBlob = new Blob([text], { type: 'text/plain' });
+            const sliceBlob = new Blob([JSON.stringify(sliceData)], { type: this.webSliceMime });
+            const clipboardItem = new ClipboardItem({
+                // eslint-disable-next-line @typescript-eslint/naming-convention
+                'text/plain': Promise.resolve(textBlob), // Promise for Safari
+                [this.webSliceMime]: Promise.resolve(sliceBlob)
+            });
+            await navigator.clipboard.write([clipboardItem]);
+        }
+        catch {
+            if (useFallback) {
+                this.cdkClipboard.copy(text);
+            }
+        }
+        this.internalState = { text, sliceData };
+    }
+    async readAsync() {
+        try {
+            const items = await navigator.clipboard.read();
+            const item = items[0];
+            if (!item) {
+                return { text: null, sliceData: null };
+            }
+            let text = null;
+            let jsonSliceData = null;
+            if (item.types.includes(this.webSliceMime)) {
+                const sliceBlob = await item.getType(this.webSliceMime);
+                jsonSliceData = await sliceBlob.text();
+            }
+            if (item.types.includes('text/plain')) {
+                const textBlob = await item.getType('text/plain');
+                text = await textBlob.text();
+            }
+            const sliceData = this.getClipboardSlice(text || '', jsonSliceData || '');
+            return { text, sliceData };
+        }
+        catch {
+            return await this.readFallback();
+        }
+    }
+    getClipboardSlice(clipboardText, clipboardSliceData) {
+        if (this.internalState && this.internalState.text === clipboardText) {
+            return this.internalState.sliceData;
+        }
+        if (!clipboardSliceData) {
+            return null;
+        }
+        try {
+            return JSON.parse(clipboardSliceData);
+        }
+        catch {
+            return null;
+        }
+    }
+    async readFallback() {
+        try {
+            const text = await navigator.clipboard.readText();
+            const sliceData = this.getClipboardSlice(text, '');
+            return { text, sliceData };
+        }
+        catch {
+            return { text: null, sliceData: null };
+        }
+    }
+    createSliceData(slice, revisionId) {
+        return {
+            type: 'NODER_SLICE',
+            version: 1,
+            source: { revisionId },
+            data: slice
+        };
+    }
+}
+
 const COMMENT_TYPES = new InjectionToken('COMMENT_TYPES');
 
 class OverlayService {
@@ -1957,77 +2086,7 @@ class ContentHelper {
     }
 }
 
-const CONTEXT_MENU_HEIGHT = 210;
-const CONTEXT_MENU_WIDTH = 320;
-class ContextMenuComponent {
-    constructor(editorService, overlayService) {
-        this.editorService = editorService;
-        this.overlayService = overlayService;
-    }
-    ngOnDestroy() {
-        this.overlayService.close();
-    }
-    onCopy() {
-        this.editorService.copySelected();
-        this.overlayService.close();
-    }
-    onPaste() {
-        this.editorService.pasteFromClipboard();
-        this.overlayService.close();
-    }
-    onCut() {
-        this.editorService.cutSelected();
-        this.overlayService.close();
-    }
-    onStartNewList() {
-        this.editorService.startNewList();
-        this.overlayService.close();
-    }
-    onContinueNumbering() {
-        this.editorService.continueNumbering();
-        this.overlayService.close();
-    }
-    onSetNumberingValue() {
-        this.overlayService.close(AfterCloseOverlayActions.OpenSetNumberingValue);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ContextMenuComponent, isStandalone: true, selector: "app-nod-context-menu", inputs: { hasNumbering: "hasNumbering", hasSelection: "hasSelection", disableContinueNumber: "disableContinueNumber" }, host: { properties: { "style.height.px": "210", "style.width.px": "320" } }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-nod-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule, MatIconModule], host: {
-                        '[style.height.px]': `${CONTEXT_MENU_HEIGHT}`,
-                        '[style.width.px]': `${CONTEXT_MENU_WIDTH}`
-                    }, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hasNumbering: [{
-                type: Input
-            }], hasSelection: [{
-                type: Input
-            }], disableContinueNumber: [{
-                type: Input
-            }] } });
-
-class CreateEdgesModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-const PARENT_TAG = 'APP-NOD-EDITOR';
-const TABLE_CELL_TAG = 'APP-NOD-TABLE-CELL';
-const EDGE_TAG = 'APP-NOD-EDGE';
-const IMAGE_TAG = 'APP-NOD-IMAGE';
-const CUSTOM_TAG = 'app-nod-custom-element';
-
-class CustomElementSearchResult {
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-
-class DeleteModel {
+class BreakModel {
     constructor(fields) {
         if (fields) {
             Object.assign(this, fields);
@@ -2035,98 +2094,24 @@ class DeleteModel {
     }
 }
 
-class BaseHandler {
-    constructor() {
-        this.actions = {};
-    }
-    getKeyCombination(event) {
-        let result = event.metaKey ? 'Command-' : '';
-        if (event.ctrlKey) {
-            result = `${result}Ctrl-`;
-        }
-        if (event.altKey) {
-            result = `${result}Alt-`;
-        }
-        if (event.shiftKey) {
-            result = `${result}Shift-`;
-        }
-        return `${result}${event.code}`;
-    }
-}
-
-class DocumentHandler extends BaseHandler {
-    constructor(editor) {
-        super();
-        this.documentKeyDown$ = fromEvent(document, 'keydown').subscribe((event) => this.onKeyDown(event));
-        this.contextMenu$ = fromEvent(document, 'contextmenu').subscribe(event => event.preventDefault());
-        this.fillActions(editor);
-    }
-    destroy() {
-        this.documentKeyDown$?.unsubscribe();
-        this.contextMenu$.unsubscribe();
-    }
-    onKeyDown(event) {
-        const keyCombination = this.getKeyCombination(event);
-        if (this.actions[keyCombination]) {
-            this.actions[keyCombination](event);
-        }
-        else {
-            return;
-        }
-        event.preventDefault();
-    }
-    fillActions(editor) {
-        this.actions['Ctrl-KeyP'] = () => editor.onPrint();
-        this.actions['Ctrl-KeyO'] = (event) => editor.onHotKeyDown(event);
-    }
-}
-
-class DragAndDrop {
-    constructor(editorContainer) {
-        this.editorContainer = editorContainer;
-        this.onMove$ = new Subject();
-        this.onDrop$ = new Subject();
-    }
-    onStart(session, range) {
-        if (this.isDragging) {
-            return;
-        }
-        this.isDragging = true;
-        this.editorContainer.classList.add('drag-and-drop-progress');
-        this.sourceSession = session;
-        this.sourceRange = range;
-        this.initListeners();
+class ContentOperationsHelper {
+    static removeContent(content, startIndex, count) {
+        return `${content.slice(0, startIndex)}${content.slice(startIndex + count, content.length)}`;
     }
-    destroyListeners() {
-        this.mouseMove$?.unsubscribe();
-        this.mouseUp$?.unsubscribe();
+    static sliceContent(content, startIndex, count) {
+        return content.slice(startIndex, startIndex + count);
     }
-    onEnd() {
-        this.destroyListeners();
-        if (!this.isDragging) {
-            return;
-        }
-        this.isDragging = false;
-        this.editorContainer.classList.remove('drag-and-drop-progress');
-        this.onDrop$.next({ sourceSession: this.sourceSession, sourceRange: this.sourceRange });
+    static insertContent(content, text, index) {
+        const before = content.slice(0, index);
+        const after = content.slice(index, content.length);
+        return `${before}${text}${after}`;
     }
-    initListeners() {
-        this.destroyListeners();
-        this.mouseMove$ = fromEvent(document, 'mousemove')
-            .pipe(throttleTime(20))
-            .subscribe(event => this.onMove$.next(event));
-        this.mouseUp$ = fromEvent(document, 'mouseup')
-            .pipe(take(1))
-            .subscribe(() => this.onEnd());
+    static replaceContent(content, startIndex, endIndex, text) {
+        const reduced = this.removeContent(content, startIndex, endIndex - startIndex + 1);
+        return this.insertContent(reduced, text, startIndex);
     }
 }
 
-var EdgeType;
-(function (EdgeType) {
-    EdgeType[EdgeType["Header"] = 0] = "Header";
-    EdgeType[EdgeType["Footer"] = 1] = "Footer";
-})(EdgeType || (EdgeType = {}));
-
 class ElementModel {
     constructor(fields) {
         if (fields) {
@@ -2162,58 +2147,504 @@ class FormatHelper {
     }
 }
 
-class GrammarPopupComponent {
-    constructor(editorService, overlayService) {
-        this.editorService = editorService;
-        this.overlayService = overlayService;
-    }
-    onSuggestionClick(index) {
-        this.editorService.applyGrammarSuggestion(this.error, index, this.paragraphIndex);
-        this.overlayService.close();
-    }
-    onIgnoreClick() {
-        this.editorService.ignoreGrammarSuggestion(this.error);
-        this.overlayService.close();
+class BordersStyleModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, ngImport: i0, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, TranslateModule], standalone: true, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { error: [{
-                type: Input
-            }], paragraphIndex: [{
-                type: Input
-            }] } });
 
-class ImageDataModel {
+class ImageModel {
     constructor(fields) {
         if (fields) {
+            if (fields.border) {
+                fields.border = new BordersStyleModel(fields.border);
+            }
             Object.assign(this, fields);
         }
     }
 }
 
-class ImageHelper {
-    static getImageWithAllowedSize(imageData, maxWidth) {
-        if (imageData.width <= maxWidth) {
-            return imageData;
-        }
-        const aspectRatio = imageData.width / imageData.height;
-        const height = maxWidth / aspectRatio;
-        return new ImageDataModel({ width: Math.round(maxWidth), height: Math.round(height), content: imageData.content });
+class IndexedElementHelper {
+    static sliceSection(elements, startIndex, endIndex) {
+        return elements.filter(x => x.insertIndex >= startIndex && x.insertIndex <= endIndex);
+    }
+    static shiftIndexes(elements, offset) {
+        for (const element of elements) {
+            element.insertIndex += offset;
+        }
+    }
+}
+
+class LinkModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class LinkHelper {
+    static sliceSection(links, start, end) {
+        return links.map(link => LinkHelper.getPartialLink(link, start, end)).filter(x => x !== null);
+    }
+    static shiftIndexes(links, offset) {
+        for (const link of links) {
+            link.startIndex += offset;
+            link.endIndex += offset;
+        }
+    }
+    static sliceFormats(links, startIndex, endIndex) {
+        const result = [];
+        for (const link of links) {
+            const absoluteFormats = link.formats.map(x => new FormatModel({ ...x, startIndex: x.startIndex + link.startIndex, endIndex: x.endIndex + link.startIndex }));
+            const slicedLinkFormats = FormatHelper.sliceSection(absoluteFormats, startIndex, endIndex);
+            result.push(...slicedLinkFormats);
+        }
+        return result;
+    }
+    static getPartialLink(link, selectionStart, selectionEnd) {
+        if (link.endIndex < selectionStart || link.startIndex > selectionEnd) {
+            return null;
+        }
+        const newStart = Math.max(link.startIndex, selectionStart);
+        const newEnd = Math.min(link.endIndex, selectionEnd);
+        const formats = link.formats
+            .map(format => {
+            const formatStart = link.startIndex + format.startIndex;
+            const formatEnd = link.startIndex + format.endIndex;
+            if (formatEnd < newStart || formatStart > newEnd) {
+                return null;
+            }
+            const newFormatStart = Math.max(formatStart, newStart) - newStart;
+            const newFormatEnd = Math.min(formatEnd, newEnd) - newStart;
+            const textStyle = new TextStyleModel(format.textStyle);
+            return new FormatModel({ startIndex: newFormatStart, endIndex: newFormatEnd, textStyle });
+        })
+            .filter(x => x !== null);
+        return new LinkModel({ ...link, startIndex: newStart, endIndex: newEnd, formats });
+    }
+}
+
+class PageFormatHelper {
+    static sliceSection(content, start, end) {
+        if (content instanceof DocxModel) {
+            return content.pageFormats.filter(x => x.insertIndex !== 0 && x.insertIndex >= start && x.insertIndex <= end);
+        }
+        return [];
+    }
+    static shiftIndexes(pagesFormats, offset) {
+        for (const pageFormat of pagesFormats) {
+            if (pageFormat.insertIndex === 0) {
+                return;
+            }
+            pageFormat.insertIndex += offset;
+        }
+    }
+}
+
+class ParagraphModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.paragraphStyle) {
+                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class RangeElementHelper {
+    static removeContent(elements, startIndex, endIndex) {
+        const length = endIndex - startIndex + 1;
+        for (let i = elements.length - 1; i >= 0; i--) {
+            const element = elements[i];
+            if (element.endIndex < startIndex) {
+                continue;
+            }
+            if (element.startIndex < startIndex) {
+                if (element.endIndex > endIndex) {
+                    element.endIndex -= length;
+                }
+                else {
+                    element.endIndex = startIndex - 1;
+                }
+                continue;
+            }
+            if (element.startIndex >= startIndex && element.startIndex <= endIndex) {
+                if (element.endIndex <= endIndex) {
+                    elements.splice(i, 1);
+                    continue;
+                }
+                element.startIndex -= element.startIndex - startIndex;
+                element.endIndex -= endIndex - element.startIndex;
+                continue;
+            }
+            element.startIndex -= length;
+            element.endIndex -= length;
+        }
+    }
+    static insertContent(elements, index, length) {
+        for (const element of elements) {
+            if (element.startIndex >= index) {
+                element.startIndex += length;
+                element.endIndex += length;
+            }
+            else if (element.endIndex > index) {
+                element.endIndex += length;
+            }
+        }
+    }
+    static insertRelative(elements, insertIndex, insertLength, insertElements) {
+        this.insertContent(elements, insertIndex, insertLength);
+        if (insertElements.length === 0) {
+            return;
+        }
+        for (const element of insertElements) {
+            element.startIndex += insertIndex;
+            element.endIndex += insertIndex;
+        }
+        const targetIndex = elements.findIndex(x => x.startIndex === insertIndex);
+        if (targetIndex < 0) {
+            elements.push(...insertElements);
+        }
+        else {
+            elements.splice(targetIndex, 0, ...insertElements);
+        }
+    }
+    static restore(elements, index, contentLength, newElements) {
+        RangeElementHelper.insertContent(elements, index, contentLength);
+        const nextElement = elements.find(x => x.startIndex >= index);
+        const indexInElements = nextElement !== undefined ? elements.indexOf(nextElement) : elements.length;
+        elements.splice(indexInElements, 0, ...newElements);
+    }
+    static replaceContent(elements, startIndex, endIndex, length) {
+        RangeElementHelper.removeContent(elements, startIndex, endIndex);
+        RangeElementHelper.insertContent(elements, startIndex, length);
+    }
+    static shiftIndexes(elements, offset) {
+        for (const element of elements) {
+            element.startIndex += offset;
+            element.endIndex += offset;
+        }
+    }
+    static sliceSection(elements, startIndex, endIndex) {
+        return elements.filter(x => x.startIndex >= startIndex && x.endIndex <= endIndex);
+    }
+}
+
+class RestoreModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ContentsModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TableModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.margins) {
+                fields.margins = new MarginsModel(fields.margins);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class TabModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class ContentsOperationsHelper {
+    static GetRestoreFromSlice(contents, startIndex, count) {
+        const text = ContentOperationsHelper.sliceContent(contents.content, startIndex, count);
+        const endIndex = startIndex + count - 1;
+        const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex);
+        const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
+        const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
+        const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
+        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel(x));
+        const comments = RangeElementHelper.sliceSection(contents.comments, startIndex, endIndex);
+        const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
+        const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
+        const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
+        const pageFormats = PageFormatHelper.sliceSection(contents, startIndex, endIndex).map(x => new PageFormatModel(x));
+        return new RestoreModel({
+            insertIndex: startIndex,
+            text,
+            formats,
+            paragraphs,
+            images,
+            tables,
+            elements,
+            breaks,
+            tabs,
+            links,
+            pageFormats,
+            comments
+        });
+    }
+    static GetRelativeContentSlice(contents, startIndex, count) {
+        const content = ContentOperationsHelper.sliceContent(contents.content, startIndex, count);
+        const endIndex = startIndex + count - 1;
+        const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex).map(x => new FormatModel(x));
+        const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
+        const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
+        const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
+        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel(x));
+        const comments = RangeElementHelper.sliceSection(contents.comments, startIndex, endIndex).map(x => new CommentModel(x));
+        const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
+        const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
+        const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
+        FormatHelper.shiftIndexes(formats, -startIndex);
+        IndexedElementHelper.shiftIndexes(paragraphs, -startIndex);
+        IndexedElementHelper.shiftIndexes(images, -startIndex);
+        IndexedElementHelper.shiftIndexes(tables, -startIndex);
+        IndexedElementHelper.shiftIndexes(elements, -startIndex);
+        IndexedElementHelper.shiftIndexes(breaks, -startIndex);
+        IndexedElementHelper.shiftIndexes(tabs, -startIndex);
+        RangeElementHelper.shiftIndexes(comments, -startIndex);
+        LinkHelper.shiftIndexes(links, -startIndex);
+        return new ContentsModel({
+            content,
+            formats,
+            paragraphs,
+            images,
+            tables,
+            elements,
+            breaks,
+            tabs,
+            links,
+            comments
+        });
+    }
+}
+
+const CONTEXT_MENU_HEIGHT = 210;
+const CONTEXT_MENU_WIDTH = 320;
+class ContextMenuComponent {
+    constructor(editorService, overlayService) {
+        this.editorService = editorService;
+        this.overlayService = overlayService;
+    }
+    ngOnDestroy() {
+        this.overlayService.close();
+    }
+    onCopy() {
+        this.editorService.copySelected();
+        this.overlayService.close();
+    }
+    onPaste() {
+        this.editorService.pasteFromClipboard();
+        this.overlayService.close();
+    }
+    onCut() {
+        this.editorService.cutSelected();
+        this.overlayService.close();
+    }
+    onStartNewList() {
+        this.editorService.startNewList();
+        this.overlayService.close();
+    }
+    onContinueNumbering() {
+        this.editorService.continueNumbering();
+        this.overlayService.close();
+    }
+    onSetNumberingValue() {
+        this.overlayService.close(AfterCloseOverlayActions.OpenSetNumberingValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: ContextMenuComponent, isStandalone: true, selector: "app-nod-context-menu", inputs: { hasNumbering: "hasNumbering", hasSelection: "hasSelection", disableContinueNumber: "disableContinueNumber" }, host: { properties: { "style.height.px": "210", "style.width.px": "320" } }, ngImport: i0, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ContextMenuComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-context-menu', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, TranslateModule, MatIconModule], host: {
+                        '[style.height.px]': `${CONTEXT_MENU_HEIGHT}`,
+                        '[style.width.px]': `${CONTEXT_MENU_WIDTH}`
+                    }, template: "<button\n    mat-button\n    (click)=\"onCopy()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-copy\" />\n    {{ 'NODER.LABEL.COPY' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onPaste()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-paste\" />\n    {{ 'NODER.LABEL.PASTE' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onCut()\"\n    [disabled]=\"!hasSelection\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-cut\" />\n    {{ 'NODER.LABEL.CUT' | translate }}\n</button>\n<div class=\"separator\"></div>\n<button\n    mat-button\n    (click)=\"onStartNewList()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-restart-numbering\" />\n    {{ 'NODER.LABEL.START_NEW_LIST' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onContinueNumbering()\"\n    [disabled]=\"!hasNumbering || disableContinueNumber\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-continue-numbering\" />\n    {{ 'NODER.LABEL.CONTINUE_NUMBERING' | translate }}\n</button>\n<button\n    mat-button\n    (click)=\"onSetNumberingValue()\"\n    [disabled]=\"!hasNumbering\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-starting-value\" />\n    {{ 'NODER.LABEL.SET_NUMBERING_VALUE' | translate }}\n</button>\n", styles: [":host{display:flex;padding:8px 16px;flex-direction:column;align-items:flex-start;gap:4px;border-radius:8px;box-shadow:2px 2px 8px #21212129}.separator{width:288px;height:1px}button{width:100%;justify-content:start;min-height:28px;height:28px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { hasNumbering: [{
+                type: Input
+            }], hasSelection: [{
+                type: Input
+            }], disableContinueNumber: [{
+                type: Input
+            }] } });
+
+class CreateEdgesModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+const PARENT_TAG = 'APP-NOD-EDITOR';
+const TABLE_CELL_TAG = 'APP-NOD-TABLE-CELL';
+const EDGE_TAG = 'APP-NOD-EDGE';
+const IMAGE_TAG = 'APP-NOD-IMAGE';
+const CUSTOM_TAG = 'app-nod-custom-element';
+
+class CustomElementSearchResult {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class DeleteModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class BaseHandler {
+    constructor() {
+        this.actions = {};
+    }
+    getKeyCombination(event) {
+        let result = event.metaKey ? 'Command-' : '';
+        if (event.ctrlKey) {
+            result = `${result}Ctrl-`;
+        }
+        if (event.altKey) {
+            result = `${result}Alt-`;
+        }
+        if (event.shiftKey) {
+            result = `${result}Shift-`;
+        }
+        return `${result}${event.code}`;
+    }
+}
+
+class DocumentHandler extends BaseHandler {
+    constructor(editor) {
+        super();
+        this.documentKeyDown$ = fromEvent(document, 'keydown').subscribe((event) => this.onKeyDown(event));
+        this.contextMenu$ = fromEvent(document, 'contextmenu').subscribe(event => event.preventDefault());
+        this.fillActions(editor);
+    }
+    destroy() {
+        this.documentKeyDown$?.unsubscribe();
+        this.contextMenu$.unsubscribe();
+    }
+    onKeyDown(event) {
+        const keyCombination = this.getKeyCombination(event);
+        if (this.actions[keyCombination]) {
+            this.actions[keyCombination](event);
+        }
+        else {
+            return;
+        }
+        event.preventDefault();
+    }
+    fillActions(editor) {
+        this.actions['Ctrl-KeyP'] = () => editor.onPrint();
+        this.actions['Ctrl-KeyO'] = (event) => editor.onHotKeyDown(event);
+    }
+}
+
+class DragAndDrop {
+    constructor(editorContainer) {
+        this.editorContainer = editorContainer;
+        this.onMove$ = new Subject();
+        this.onDrop$ = new Subject();
+    }
+    onStart(session, range) {
+        if (this.isDragging) {
+            return;
+        }
+        this.isDragging = true;
+        this.editorContainer.classList.add('drag-and-drop-progress');
+        this.sourceSession = session;
+        this.sourceRange = range;
+        this.initListeners();
+    }
+    destroyListeners() {
+        this.mouseMove$?.unsubscribe();
+        this.mouseUp$?.unsubscribe();
+    }
+    onEnd() {
+        this.destroyListeners();
+        if (!this.isDragging) {
+            return;
+        }
+        this.isDragging = false;
+        this.editorContainer.classList.remove('drag-and-drop-progress');
+        this.onDrop$.next({ sourceSession: this.sourceSession, sourceRange: this.sourceRange });
+    }
+    initListeners() {
+        this.destroyListeners();
+        this.mouseMove$ = fromEvent(document, 'mousemove')
+            .pipe(throttleTime(20))
+            .subscribe(event => this.onMove$.next(event));
+        this.mouseUp$ = fromEvent(document, 'mouseup')
+            .pipe(take(1))
+            .subscribe(() => this.onEnd());
+    }
+}
+
+var EdgeType;
+(function (EdgeType) {
+    EdgeType[EdgeType["Header"] = 0] = "Header";
+    EdgeType[EdgeType["Footer"] = 1] = "Footer";
+})(EdgeType || (EdgeType = {}));
+
+class GrammarPopupComponent {
+    constructor(editorService, overlayService) {
+        this.editorService = editorService;
+        this.overlayService = overlayService;
+    }
+    onSuggestionClick(index) {
+        this.editorService.applyGrammarSuggestion(this.error, index, this.paragraphIndex);
+        this.overlayService.close();
+    }
+    onIgnoreClick() {
+        this.editorService.ignoreGrammarSuggestion(this.error);
+        this.overlayService.close();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: GrammarPopupComponent, isStandalone: true, selector: "app-nod-grammar-popup", inputs: { error: "error", paragraphIndex: "paragraphIndex" }, ngImport: i0, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: GrammarPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-grammar-popup', changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatButtonModule, MatIconModule, TranslateModule], standalone: true, template: "<span class=\"message\">{{ error.message }}</span>\n<div class=\"options\">\n    @for (suggestion of error.replacements; track i; let i = $index) {\n        <span\n            class=\"suggestion\"\n            (click)=\"onSuggestionClick(i)\">\n            {{ suggestion }}\n        </span>\n    }\n</div>\n<button\n    mat-button\n    class=\"ignore\"\n    (click)=\"onIgnoreClick()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-ignore\"></mat-icon>\n    <span>\n        {{ 'NODER.LABEL.IGNORE' | translate }}\n    </span>\n</button>\n", styles: [":host{border-radius:8px;display:flex;flex-direction:column;padding:8px;max-width:500px;gap:5px}.message{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px}.options{display:flex;flex-flow:column wrap;justify-content:center;gap:5px;padding:10px 0;border-bottom-width:1px;border-bottom-style:solid}.suggestion{font-weight:600;font-size:14px;cursor:pointer;text-decoration:underline;padding:3px 8px}.ignore{margin-left:auto;font-size:12px;letter-spacing:0;cursor:pointer;height:32px}.ignore mat-icon{margin-right:4px}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }], propDecorators: { error: [{
+                type: Input
+            }], paragraphIndex: [{
+                type: Input
+            }] } });
 
-class IndexedElementHelper {
-    static sliceSection(elements, startIndex, endIndex) {
-        return elements.filter(x => x.insertIndex >= startIndex && x.insertIndex <= endIndex);
+class ImageDataModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
     }
-    static shiftIndexes(elements, offset) {
-        for (const element of elements) {
-            element.insertIndex += offset;
+}
+
+class ImageHelper {
+    static getImageWithAllowedSize(imageData, maxWidth) {
+        if (imageData.width <= maxWidth) {
+            return imageData;
         }
+        const aspectRatio = imageData.width / imageData.height;
+        const height = maxWidth / aspectRatio;
+        return new ImageDataModel({ width: Math.round(maxWidth), height: Math.round(height), content: imageData.content });
     }
 }
 
@@ -2373,6 +2804,17 @@ class InsertBreakModel {
     }
 }
 
+class InsertContentsModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.contents) {
+                fields.contents = new ContentsModel(fields.contents);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class InsertElementModel {
     constructor(fields) {
         if (fields) {
@@ -2476,56 +2918,6 @@ class InsertTextModel {
     }
 }
 
-class LinkModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class LinkHelper {
-    static sliceSection(links, start, end) {
-        return links.map(link => LinkHelper.getPartialLink(link, start, end)).filter(x => x !== null);
-    }
-    static shiftIndexes(links, offset) {
-        for (const link of links) {
-            link.startIndex += offset;
-            link.endIndex += offset;
-        }
-    }
-    static sliceFormats(links, startIndex, endIndex) {
-        const result = [];
-        for (const link of links) {
-            const absoluteFormats = link.formats.map(x => new FormatModel({ ...x, startIndex: x.startIndex + link.startIndex, endIndex: x.endIndex + link.startIndex }));
-            const slicedLinkFormats = FormatHelper.sliceSection(absoluteFormats, startIndex, endIndex);
-            result.push(...slicedLinkFormats);
-        }
-        return result;
-    }
-    static getPartialLink(link, selectionStart, selectionEnd) {
-        if (link.endIndex < selectionStart || link.startIndex > selectionEnd) {
-            return null;
-        }
-        const newStart = Math.max(link.startIndex, selectionStart);
-        const newEnd = Math.min(link.endIndex, selectionEnd);
-        const formats = link.formats
-            .map(format => {
-            const formatStart = link.startIndex + format.startIndex;
-            const formatEnd = link.startIndex + format.endIndex;
-            if (formatEnd < newStart || formatStart > newEnd) {
-                return null;
-            }
-            const newFormatStart = Math.max(formatStart, newStart) - newStart;
-            const newFormatEnd = Math.min(formatEnd, newEnd) - newStart;
-            const textStyle = new TextStyleModel(format.textStyle);
-            return new FormatModel({ startIndex: newFormatStart, endIndex: newFormatEnd, textStyle });
-        })
-            .filter(x => x !== null);
-        return new LinkModel({ ...link, startIndex: newStart, endIndex: newEnd, formats });
-    }
-}
-
 var MouseButton;
 (function (MouseButton) {
     MouseButton[MouseButton["Left"] = 0] = "Left";
@@ -2658,14 +3050,6 @@ class RemoveTableRowsModel {
     }
 }
 
-class RestoreModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class ReplaceByRestoreModel {
     constructor(fields) {
         if (fields) {
@@ -2875,6 +3259,12 @@ class OperationHistory {
     pushMoveRange(restore, replace, selection) {
         this.addToHistory(restore, replace, selection, []);
     }
+    pushInsertContents(undo, redo) {
+        this.addToHistory(undo, redo);
+    }
+    pushReplaceByContents(undo, redo) {
+        this.addToHistory(undo, redo);
+    }
     pushReplace(restore, replace) {
         let count = replace.insertText ? replace.insertText.text.length : 1;
         if (replace.insertTable?.insertParagraphBefore) {
@@ -2943,14 +3333,6 @@ class OperationHistory {
     }
 }
 
-class BreakModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
 class IndexedElementOperationsHelper {
     static removeContent(elements, startIndex, endIndex) {
         const length = endIndex - startIndex + 1;
@@ -2981,165 +3363,43 @@ class IndexedElementOperationsHelper {
                 x.insertIndex += length;
             }
         });
-    }
-    static restore(elements, index, contentLength, newElements) {
-        this.insertContent(elements, index, contentLength);
-        let indexInElements = elements.findIndex(x => x.insertIndex >= index);
-        indexInElements = indexInElements === -1 ? elements.length : indexInElements;
-        elements.splice(indexInElements, 0, ...newElements);
-    }
-    static replaceContent(elements, startIndex, endIndex, length) {
-        this.removeContent(elements, startIndex, endIndex);
-        this.insertContent(elements, startIndex, length);
-    }
-}
-
-class BreakOperationsHelper {
-    static insertContent(elements, index, breakType, length) {
-        const element = new BreakModel({ insertIndex: index, breakType });
-        IndexedElementOperationsHelper.insert(elements, element, length);
-    }
-}
-
-class CellModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.margins) {
-                fields.margins = new MarginsModel(fields.margins);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ContentOperationsHelper {
-    static removeContent(content, startIndex, count) {
-        return `${content.slice(0, startIndex)}${content.slice(startIndex + count, content.length)}`;
-    }
-    static sliceContent(content, startIndex, count) {
-        return content.slice(startIndex, startIndex + count);
-    }
-    static insertContent(content, text, index) {
-        const before = content.slice(0, index);
-        const after = content.slice(index, content.length);
-        return `${before}${text}${after}`;
-    }
-    static replaceContent(content, startIndex, endIndex, text) {
-        const reduced = this.removeContent(content, startIndex, endIndex - startIndex + 1);
-        return this.insertContent(reduced, text, startIndex);
-    }
-}
-
-class BordersStyleModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ImageModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.border) {
-                fields.border = new BordersStyleModel(fields.border);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class PageFormatHelper {
-    static sliceSection(content, start, end) {
-        if (content instanceof DocxModel) {
-            return content.pageFormats.filter(x => x.insertIndex !== 0 && x.insertIndex >= start && x.insertIndex <= end);
-        }
-        return [];
-    }
-    static shiftIndexes(pagesFormats, offset) {
-        for (const pageFormat of pagesFormats) {
-            if (pageFormat.insertIndex === 0) {
-                return;
-            }
-            pageFormat.insertIndex += offset;
-        }
-    }
-}
-
-class ParagraphModel {
-    constructor(fields) {
-        if (fields) {
-            if (fields.paragraphStyle) {
-                fields.paragraphStyle = new ParagraphStyleModel(fields.paragraphStyle);
-            }
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class RangeElementHelper {
-    static removeContent(elements, startIndex, endIndex) {
-        const length = endIndex - startIndex + 1;
-        for (let i = elements.length - 1; i >= 0; i--) {
-            const element = elements[i];
-            if (element.endIndex < startIndex) {
-                continue;
-            }
-            if (element.startIndex < startIndex) {
-                if (element.endIndex > endIndex) {
-                    element.endIndex -= length;
-                }
-                else {
-                    element.endIndex = startIndex - 1;
-                }
-                continue;
-            }
-            if (element.startIndex >= startIndex && element.startIndex <= endIndex) {
-                if (element.endIndex <= endIndex) {
-                    elements.splice(i, 1);
-                    continue;
-                }
-                element.startIndex -= element.startIndex - startIndex;
-                element.endIndex -= endIndex - element.startIndex;
-                continue;
-            }
-            element.startIndex -= length;
-            element.endIndex -= length;
-        }
-    }
-    static insertContent(elements, index, length) {
-        for (const element of elements) {
-            if (element.startIndex >= index) {
-                element.startIndex += length;
-                element.endIndex += length;
-            }
-            else if (element.endIndex > index) {
-                element.endIndex += length;
-            }
+    }
+    static insertRelative(elements, insertIndex, insertLength, insertElements) {
+        this.insertContent(elements, insertIndex, insertLength);
+        if (insertElements.length === 0) {
+            return;
+        }
+        for (const element of insertElements) {
+            element.insertIndex += insertIndex;
+        }
+        const targetIndex = elements.findIndex(x => x.insertIndex > insertIndex);
+        if (targetIndex < 0) {
+            elements.push(...insertElements);
+        }
+        else {
+            elements.splice(targetIndex, 0, ...insertElements);
         }
     }
     static restore(elements, index, contentLength, newElements) {
-        RangeElementHelper.insertContent(elements, index, contentLength);
-        const nextElement = elements.find(x => x.startIndex >= index);
-        const indexInElements = nextElement !== undefined ? elements.indexOf(nextElement) : elements.length;
+        this.insertContent(elements, index, contentLength);
+        let indexInElements = elements.findIndex(x => x.insertIndex >= index);
+        indexInElements = indexInElements === -1 ? elements.length : indexInElements;
         elements.splice(indexInElements, 0, ...newElements);
     }
     static replaceContent(elements, startIndex, endIndex, length) {
-        RangeElementHelper.removeContent(elements, startIndex, endIndex);
-        RangeElementHelper.insertContent(elements, startIndex, length);
-    }
-    static shiftIndexes(elements, offset) {
-        for (const element of elements) {
-            element.startIndex += offset;
-            element.endIndex += offset;
-        }
+        this.removeContent(elements, startIndex, endIndex);
+        this.insertContent(elements, startIndex, length);
     }
-    static sliceSection(elements, startIndex, endIndex) {
-        return elements.filter(x => x.startIndex >= startIndex && x.endIndex <= endIndex);
+}
+
+class BreakOperationsHelper {
+    static insertContent(elements, index, breakType, length) {
+        const element = new BreakModel({ insertIndex: index, breakType });
+        IndexedElementOperationsHelper.insert(elements, element, length);
     }
 }
 
-class TableModel {
+class CellModel {
     constructor(fields) {
         if (fields) {
             if (fields.margins) {
@@ -3150,45 +3410,6 @@ class TableModel {
     }
 }
 
-class TabModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class ContentsOperationsHelper {
-    static GetRestoreFromSlice(contents, startIndex, count) {
-        const text = ContentOperationsHelper.sliceContent(contents.content, startIndex, count);
-        const endIndex = startIndex + count - 1;
-        const formats = FormatHelper.sliceSection(contents.formats, startIndex, endIndex);
-        const paragraphs = IndexedElementHelper.sliceSection(contents.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
-        const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
-        const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
-        const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel(x));
-        const comments = RangeElementHelper.sliceSection(contents.comments, startIndex, endIndex);
-        const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
-        const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
-        const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
-        const pageFormats = PageFormatHelper.sliceSection(contents, startIndex, endIndex).map(x => new PageFormatModel(x));
-        return new RestoreModel({
-            insertIndex: startIndex,
-            text,
-            formats,
-            paragraphs,
-            images,
-            tables,
-            elements,
-            breaks,
-            tabs,
-            links,
-            pageFormats,
-            comments
-        });
-    }
-}
-
 class EdgeModel {
     constructor(fields) {
         if (fields) {
@@ -3252,6 +3473,14 @@ class FormatOperationsHelper {
             }
         });
     }
+    static insertRelative(formats, insertIndex, insertLength, insertFormats) {
+        this.insertContent(formats, insertIndex, insertLength);
+        for (const format of insertFormats) {
+            format.startIndex += insertIndex;
+            format.endIndex += insertIndex;
+            this.apply(formats, format.startIndex, format.endIndex, format.textStyle);
+        }
+    }
     static insertStyledContent(formats, index, textLength, style) {
         this.insertContent(formats, index, textLength);
         this.apply(formats, index, index + textLength - 1, style);
@@ -3354,6 +3583,24 @@ class LinkOperationsHelper {
             }
         }
     }
+    static insertRelative(links, insertIndex, insertLength, insertLinks) {
+        this.insertContent(links, insertIndex, insertLength);
+        if (insertLinks.length === 0) {
+            return;
+        }
+        for (const link of links) {
+            link.startIndex += insertIndex;
+            link.endIndex += insertIndex;
+        }
+        const targetIndex = links.findIndex(x => x.startIndex === insertIndex);
+        if (targetIndex < 0) {
+            links.push(...insertLinks);
+        }
+        else {
+            links.splice(targetIndex, 0, ...insertLinks);
+        }
+        this.merge(links, insertIndex - 1, insertIndex + insertLength);
+    }
     static removeContent(links, startIndex, endIndex) {
         const length = endIndex - startIndex + 1;
         for (let i = links.length - 1; i >= 0; i--) {
@@ -5778,6 +6025,17 @@ class OperationsHelper {
                     this.removeComment(document, model.commentId);
                     break;
                 }
+                case CommandType.InsertContents: {
+                    const model = command.insertContents;
+                    this.insertContents(contents, model.insertIndex, model.contents);
+                    break;
+                }
+                case CommandType.ReplaceByContents: {
+                    const model = command.replaceByContents;
+                    this.delete(contents, model.startIndex, model.count);
+                    this.insertContents(contents, model.startIndex, model.contents);
+                    break;
+                }
             }
         });
     }
@@ -6033,6 +6291,22 @@ class OperationsHelper {
         document.comments = document.comments.filter(x => x.commentId !== commentId);
         return comment;
     }
+    static insertContents(contents, insertIndex, insertContents) {
+        const contentLength = insertContents.content.length;
+        contents.content = ContentOperationsHelper.insertContent(contents.content, insertContents.content, insertIndex);
+        IndexedElementOperationsHelper.insertRelative(contents.paragraphs, insertIndex, contentLength, insertContents.paragraphs);
+        IndexedElementOperationsHelper.insertRelative(contents.images, insertIndex, contentLength, insertContents.images);
+        IndexedElementOperationsHelper.insertRelative(contents.tables, insertIndex, contentLength, insertContents.tables);
+        IndexedElementOperationsHelper.insertRelative(contents.elements, insertIndex, contentLength, insertContents.elements);
+        IndexedElementOperationsHelper.insertRelative(contents.breaks, insertIndex, contentLength, insertContents.breaks);
+        IndexedElementOperationsHelper.insertRelative(contents.tabs, insertIndex, contentLength, insertContents.tabs);
+        FormatOperationsHelper.insertRelative(contents.formats, insertIndex, contentLength, insertContents.formats);
+        RangeElementHelper.insertRelative(contents.comments, insertIndex, contentLength, insertContents.comments);
+        LinkOperationsHelper.insertRelative(contents.links, insertIndex, contentLength, insertContents.links);
+        if (contents instanceof DocxModel) {
+            PageFormatOperationsHelper.insertContent(contents, insertIndex, contentLength);
+        }
+    }
     static replace(document, contents, model) {
         this.delete(document, model.delete.startIndex, model.delete.count);
         if (model.insertText) {
@@ -9162,7 +9436,7 @@ class EditSession {
     }
     removeByDocumentIndexes(startIndex, endIndex) {
         const startParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex);
-        const endParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex);
+        const endParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex + 1);
         this.remove(new Range(startParagraphPosition, endParagraphPosition));
     }
     insertTextByDocumentIndex(index, text, style) {
@@ -9313,7 +9587,7 @@ class EditSession {
         this.applyToolbarStyles();
     }
     replace(model) {
-        this.removeByDocumentIndexes(model.delete.startIndex, model.delete.startIndex + model.delete.count);
+        this.removeByDocumentIndexes(model.delete.startIndex, model.delete.startIndex + model.delete.count - 1);
         let endPoint;
         if (model.insertText) {
             endPoint = this.insertTextByDocumentIndex(model.insertText.insertIndex, model.insertText.text);
@@ -9348,7 +9622,7 @@ class EditSession {
             this.removeNumberings(paragraphIndex, paragraphIndex);
         }
         this.applyParagraphStyle(paragraphIndex, paragraphIndex, model.paragraphStyle);
-        this.removeByDocumentIndexes(model.startIndex, model.startIndex + model.count);
+        this.removeByDocumentIndexes(model.startIndex, model.startIndex + model.count - 1);
     }
     restoreWithParagraph(model) {
         this.restore(model.restore);
@@ -9453,6 +9727,23 @@ class EditSession {
         OperationsHelper.applyTableCellsStyles(this.model, model);
         table.instance.updateTable();
     }
+    insertContents(insertIndex, contents) {
+        OperationsHelper.insertContents(this.model, insertIndex, contents);
+        const endIndex = insertIndex + contents.content.length - 1;
+        this.insertComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, insertIndex, endIndex);
+        this.insertComponents(this.model.images, this.customComponents.images, NoderImageComponent, insertIndex, endIndex);
+        this.insertComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, insertIndex, endIndex);
+        this.insertElementComponents(this.model.elements, insertIndex, endIndex);
+        const startPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, insertIndex);
+        const endPosition = this.displayData.insertText(startPosition, contents.content);
+        this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
+        this.selection.placeSelection(endPosition, endPosition);
+        this.applyToolbarStyles();
+    }
+    replaceByContents(startIndex, count, contents) {
+        this.removeByDocumentIndexes(startIndex, startIndex + count - 1);
+        this.insertContents(startIndex, contents);
+    }
     removeMoveRange(moveModel) {
         const endIndex = moveModel.sourceStartIndex + moveModel.sourceCount - 1;
         const startPosition = this.displayData.indexToPosition(moveModel.sourceStartIndex, 0);
@@ -9472,10 +9763,10 @@ class EditSession {
     restoreMoveRange(restoreModel, moveModel, _sourceSessionId) {
         const moveIndex = OperationsHelper.restoreMoveRange(this.model, moveModel, restoreModel);
         const endIndex = moveIndex + moveModel.sourceCount;
-        this.restoreComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, moveIndex, endIndex);
-        this.restoreComponents(this.model.images, this.customComponents.images, NoderImageComponent, moveIndex, endIndex);
-        this.restoreComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, moveIndex, endIndex);
-        this.restoreElementComponents(this.model.elements, moveIndex, endIndex);
+        this.insertComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, moveIndex, endIndex);
+        this.insertComponents(this.model.images, this.customComponents.images, NoderImageComponent, moveIndex, endIndex);
+        this.insertComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, moveIndex, endIndex);
+        this.insertElementComponents(this.model.elements, moveIndex, endIndex);
         const startPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, moveIndex);
         const endPosition = this.displayData.insertText(startPosition, restoreModel.text);
         this.displayData.updateNextLineIndexes(startPosition.row, endPosition.row);
@@ -9491,6 +9782,12 @@ class EditSession {
         const endIndex = this.displayData.positionToIndex(range.end);
         return positionIndex >= startIndex && positionIndex < endIndex;
     }
+    getContentsSlice(start, end) {
+        const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, start);
+        const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, end) - 1;
+        const count = endIndex - startIndex + 1;
+        return ContentsOperationsHelper.GetRelativeContentSlice(this.model, startIndex, count);
+    }
     createRestoreFromSlice(start, end) {
         const startIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, start.row, start.column);
         const endIndex = ContentHelper.paragraphToDocumentIndex(this.displayData.paragraphs, end.row, end.column) - 1;
@@ -9557,7 +9854,7 @@ class EditSession {
         return [format.textStyle];
     }
     replaceByRestore(model) {
-        this.removeByDocumentIndexes(model.delete.startIndex, model.delete.startIndex + model.delete.count);
+        this.removeByDocumentIndexes(model.delete.startIndex, model.delete.startIndex + model.delete.count - 1);
         this.restore(model.restore);
     }
     restore(model) {
@@ -9565,15 +9862,15 @@ class EditSession {
         OperationsHelper.restore(this.model, model);
         const endPoint = this.displayData.insertText(paragraphPosition, model.text);
         const restoreEndIndex = model.insertIndex + model.text.length;
-        this.restoreComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, model.insertIndex, restoreEndIndex);
-        this.restoreComponents(this.model.images, this.customComponents.images, NoderImageComponent, model.insertIndex, restoreEndIndex);
-        this.restoreComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, model.insertIndex, restoreEndIndex);
-        this.restoreElementComponents(this.model.elements, model.insertIndex, restoreEndIndex);
+        this.insertComponents(this.model.tables, this.customComponents.tables, NoderTableComponent, model.insertIndex, restoreEndIndex);
+        this.insertComponents(this.model.images, this.customComponents.images, NoderImageComponent, model.insertIndex, restoreEndIndex);
+        this.insertComponents(this.model.tabs, this.customComponents.tabs, NoderTabComponent, model.insertIndex, restoreEndIndex);
+        this.insertElementComponents(this.model.elements, model.insertIndex, restoreEndIndex);
         this.displayData.updateNextLineIndexes(paragraphPosition.row, endPoint.row);
         this.selection.placeCursor(endPoint);
         this.applyToolbarStyles();
     }
-    restoreComponents(models, components, componentType, restoreIndex, restoreEndIndex) {
+    insertComponents(models, components, componentType, restoreIndex, restoreEndIndex) {
         for (const model of models) {
             if (model.insertIndex < restoreIndex) {
                 continue;
@@ -9584,7 +9881,7 @@ class EditSession {
             this.addComponent(components, model, componentType);
         }
     }
-    restoreElementComponents(elements, restoreIndex, restoreEndIndex) {
+    insertElementComponents(elements, restoreIndex, restoreEndIndex) {
         for (const model of elements) {
             if (model.insertIndex < restoreIndex) {
                 continue;
@@ -9950,7 +10247,6 @@ class CommentHighlightLayer extends HighlightLayer {
         this.commentService = commentService;
         this.className = 'noder-highlight';
         this.selectedCommentClassName = 'noder-selected-highlight';
-        this.selectedCommentId = null;
     }
     update(config) {
         const comments = this.session.model.comments;
@@ -9972,7 +10268,7 @@ class CommentHighlightLayer extends HighlightLayer {
                 continue;
             }
             if (!screenRange.isEmpty) {
-                const className = comment.commentId === this.selectedCommentId ? this.selectedCommentClassName : this.className;
+                const className = comment.commentId === this.commentService.selectedCommentId ? this.selectedCommentClassName : this.className;
                 const result = screenRange.isSingleLine
                     ? this.drawSingleLineMarker(screenRange, className)
                     : this.drawMultiLineMarker(screenRange, className);
@@ -9986,23 +10282,13 @@ class CommentHighlightLayer extends HighlightLayer {
             }
         }
     }
-    removeSessionComments() {
-        this.commentService.removeCommentsFromRender(this.session.sessionId);
-    }
     removeComment(id) {
         this.commentService.removeCommentFromRender(this.session.sessionId, id);
     }
-    setSelectedComment(id) {
-        if (this.selectedCommentId) {
-            this.commentService.setCommentSelected(this.selectedCommentId, false);
-        }
-        this.selectedCommentId = id;
-        if (id) {
-            this.commentService.setCommentSelected(id);
-        }
-    }
     clearSessionComments() {
-        this.commentService.removeCommentsFromRender(this.session.sessionId);
+        if (this.session.model.comments.length) {
+            this.commentService.removeCommentsFromRender(this.session.sessionId);
+        }
     }
     requestCommentRender(highlight, id) {
         const element = Array.isArray(highlight) ? highlight[0] : highlight;
@@ -10200,48 +10486,6 @@ class RenderChangesModel {
     }
 }
 
-class EventHelper {
-    static get nextFrame() {
-        if (!this._nextFrame) {
-            const nextFrame = (callback) => {
-                setTimeout(callback, 17);
-            };
-            this._nextFrame =
-                window.requestAnimationFrame ||
-                    window['webkitRequestAnimationFrame'] ||
-                    window['mozRequestAnimationFrame'] ||
-                    window['msRequestAnimationFrame'] ||
-                    window['oRequestAnimationFrame'] ||
-                    nextFrame;
-        }
-        return this._nextFrame;
-    }
-}
-
-class RenderLoop {
-    constructor(onRender) {
-        this.changes = new RenderChangesModel();
-        this.flush = () => {
-            const changes = this.changes;
-            if (changes.any) {
-                this.changes = new RenderChangesModel();
-                onRender(changes);
-            }
-            if (this.changes.any) {
-                this.schedule();
-            }
-        };
-    }
-    schedule(changes) {
-        if (changes) {
-            this.changes.apply(changes);
-        }
-        if (this.changes) {
-            EventHelper.nextFrame(this.flush);
-        }
-    }
-}
-
 class CustomElementInfo {
     constructor(init) {
         Object.assign(this, init);
@@ -10605,9 +10849,11 @@ class Renderer extends EventEmitting {
     get paragraphsAppeared$() {
         return this.paragraphsAppeared.asObservable();
     }
-    constructor(parentContainer, commentsService, session) {
+    constructor(parentContainer, commentsService, session, loop) {
         super();
         this.session = session;
+        this.loop = loop;
+        this.grammarChecksEnabled = false;
         this.layerConfig = {
             width: 1,
             contentRange: new DistanceModel({ start: 0, end: 0 }), // paragraphs
@@ -10637,7 +10883,7 @@ class Renderer extends EventEmitting {
             width: 1
         };
         this.pagesCountChangedHandler = () => {
-            this.loop.schedule({ lines: true, selection: true });
+            this.scheduleChanges({ lines: true, selection: true });
         };
         this.container = parentContainer;
         this.container.className += ' noder-editor';
@@ -10649,10 +10895,10 @@ class Renderer extends EventEmitting {
         this.commentsLayer = new CommentHighlightLayer(this.content, 'comments-highlight', this.session, commentsService);
         this.cursorLayer = new CursorLayer(this.content, this.session);
         this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
-        this.loop = new RenderLoop(changes => this.renderChanges(changes));
+        loop.registerSession(this.session.sessionId, changes => this.renderChanges(changes));
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.visibilitySubscription = this.visibilitySubject
-            .pipe(debounceTime(3000), filter(x => x))
+            .pipe(filter(() => this.grammarChecksEnabled), debounceTime(3000), filter(x => x))
             .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
@@ -10721,7 +10967,7 @@ class Renderer extends EventEmitting {
         if (lastRow < this.layerConfig.contentRange.start || firstRow > this.layerConfig.contentRange.end) {
             return;
         }
-        this.loop.schedule({ lines: true });
+        this.scheduleChanges({ lines: true });
     }
     moveTextAreaToCursor() {
         if (!this.textarea) {
@@ -10743,38 +10989,38 @@ class Renderer extends EventEmitting {
     updateSelection(range) {
         if (range.isEmpty && this.selectionLayer.marker) {
             this.selectionLayer.marker = null;
-            this.loop.schedule({ selection: true });
+            this.scheduleChanges({ selection: true });
         }
         else if (!range.isEmpty && !this.selectionLayer.marker?.isEqual(range)) {
             this.selectionLayer.marker = range;
-            this.loop.schedule({ selection: true });
+            this.scheduleChanges({ selection: true });
         }
     }
     updateSearchHighlights(ranges) {
         if (this.searchHighlightLayer.markers.length !== ranges.length ||
             !this.searchHighlightLayer.markers.every(x => ranges.some(y => x.isEqual(y)))) {
             this.searchHighlightLayer.markers = ranges;
-            this.loop.schedule({ search: true });
+            this.scheduleChanges({ search: true });
         }
     }
     updateCustomElementHighlights(ranges) {
         this.searchHighlightLayer.customElementsRanges = ranges;
-        this.loop.schedule({ search: true });
+        this.scheduleChanges({ search: true });
     }
     updateActiveSearchHighlight(active) {
         this.searchHighlightLayer.active = active;
-        this.loop.schedule({ search: true });
+        this.scheduleChanges({ search: true });
     }
     updateGrammarHighlights(paragraphId, errors) {
         this.grammarHighlightLayer.setErrors(paragraphId, errors);
-        this.loop.schedule({ grammar: true });
+        this.scheduleChanges({ grammar: true });
     }
     removeGrammarHighlights(paragraphId) {
         this.grammarHighlightLayer.removeParagraphHighlights(paragraphId);
     }
     clearGrammarHighlights() {
         this.grammarHighlightLayer.clearHighlights();
-        this.loop.schedule({ grammar: true });
+        this.scheduleChanges({ grammar: true });
     }
     paragraphsScrolledIntoView() {
         if (!this.layerConfig.visibleRange) {
@@ -10787,11 +11033,11 @@ class Renderer extends EventEmitting {
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
             this.dragAndDropSelectionLayer.marker = null;
-            this.loop.schedule({ dragAndDrop: true });
+            this.scheduleChanges({ dragAndDrop: true });
         }
         else if (!range.isEmpty && !this.dragAndDropSelectionLayer.marker?.isEqual(range)) {
             this.dragAndDropSelectionLayer.marker = range;
-            this.loop.schedule({ dragAndDrop: true });
+            this.scheduleChanges({ dragAndDrop: true });
         }
     }
     clearDragAndDropSelection() {
@@ -10799,7 +11045,7 @@ class Renderer extends EventEmitting {
             return;
         }
         this.dragAndDropSelectionLayer.marker = null;
-        this.loop.schedule({ dragAndDrop: true });
+        this.scheduleChanges({ dragAndDrop: true });
     }
     setVisibility(isVisible) {
         if (this.isVisible !== isVisible) {
@@ -10807,23 +11053,23 @@ class Renderer extends EventEmitting {
             if (!isVisible) {
                 this.commentsLayer.clearSessionComments();
             }
-            this.loop.schedule({ visibilityChanged: true });
+            this.scheduleChanges({ visibilityChanged: true });
         }
     }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
     updateText() {
-        this.loop.schedule({ text: true });
+        this.scheduleChanges({ text: true });
     }
     updateTextAndCursor() {
-        this.loop.schedule({ text: true, cursor: true });
+        this.scheduleChanges({ text: true, cursor: true });
     }
     updateMarker() {
-        this.loop.schedule({ marker: true });
+        this.scheduleChanges({ marker: true });
     }
     updateCursor() {
-        this.loop.schedule({ cursor: true });
+        this.scheduleChanges({ cursor: true });
     }
     // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
     screenToParagraph(x, y, tokenDivider = 1, rect) {
@@ -10880,14 +11126,11 @@ class Renderer extends EventEmitting {
     renderCommentHighlights() {
         this.commentsLayer.update(this.layerConfig);
     }
-    setSelectedComment(comment) {
-        this.commentsLayer.setSelectedComment(comment);
-    }
     removeComment(id) {
         this.commentsLayer.removeComment(id);
     }
     clearComments() {
-        this.commentsLayer.removeSessionComments();
+        this.commentsLayer.clearSessionComments();
     }
     setCommentsVisibility(value) {
         if (!value) {
@@ -10895,6 +11138,9 @@ class Renderer extends EventEmitting {
         }
         this.commentsLayer.enabled = value;
     }
+    scheduleChanges(changes) {
+        this.loop.schedule(this.session.sessionId, changes);
+    }
     renderDragAndDropSelection() {
         this.dragAndDropSelectionLayer.update(this.layerConfig);
     }
@@ -10925,6 +11171,65 @@ class Renderer extends EventEmitting {
     }
 }
 
+class EventHelper {
+    static get nextFrame() {
+        if (!this._nextFrame) {
+            const nextFrame = (callback) => {
+                setTimeout(callback, 17);
+            };
+            this._nextFrame =
+                window.requestAnimationFrame ||
+                    window['webkitRequestAnimationFrame'] ||
+                    window['mozRequestAnimationFrame'] ||
+                    window['msRequestAnimationFrame'] ||
+                    window['oRequestAnimationFrame'] ||
+                    nextFrame;
+        }
+        return this._nextFrame;
+    }
+}
+
+class RenderLoop {
+    constructor() {
+        this.sessionCallbacks = new Map();
+        this.sessionChanges = new Map();
+        this.flush = () => {
+            const sessionsToRender = Array.from(this.sessionChanges.entries());
+            const hasChanges = sessionsToRender.filter(([_, changes]) => changes.any);
+            if (!hasChanges.length) {
+                return;
+            }
+            for (const [sessionId, changes] of hasChanges) {
+                const callback = this.sessionCallbacks.get(sessionId);
+                callback(new RenderChangesModel(changes));
+                this.sessionChanges.set(sessionId, new RenderChangesModel());
+            }
+            const hasMoreChanges = Array.from(this.sessionChanges.values()).some(changes => changes.any);
+            if (hasMoreChanges) {
+                EventHelper.nextFrame(this.flush);
+            }
+        };
+    }
+    registerSession(sessionId, onRender) {
+        this.sessionCallbacks.set(sessionId, onRender);
+        if (!this.sessionChanges.has(sessionId)) {
+            this.sessionChanges.set(sessionId, new RenderChangesModel());
+        }
+    }
+    unregisterSession(sessionId) {
+        this.sessionCallbacks.delete(sessionId);
+        this.sessionChanges.delete(sessionId);
+    }
+    schedule(sessionId, changes) {
+        if (changes) {
+            this.sessionChanges.get(sessionId).apply(changes);
+        }
+        if (this.sessionChanges.get(sessionId).any) {
+            EventHelper.nextFrame(this.flush);
+        }
+    }
+}
+
 /**
  * Represents a vertical scroll bar.
  * @class ScrollBar
@@ -11046,13 +11351,17 @@ class CommentLayer {
     constructor(parentEl) {
         this.commentPadding = 8;
         this.rendersBySession = new Map();
+        this.enabled = false;
         this.element = document.createElement('div');
         this.element.className = `noder-comments-layer`;
         parentEl.appendChild(this.element);
     }
+    enable() {
+        this.enabled = true;
+    }
     disable() {
-        this.rendersBySession.clear();
-        this.renderComments();
+        this.enabled = false;
+        this.element.innerHTML = '';
     }
     scrollComments(offsetY) {
         for (const [sessionId, comments] of this.rendersBySession) {
@@ -11065,6 +11374,9 @@ class CommentLayer {
         }
     }
     renderComments() {
+        if (!this.enabled) {
+            return;
+        }
         this.element.innerHTML = '';
         const topOffset = this.element.getBoundingClientRect().top;
         const sortedComments = Array.from(this.rendersBySession.values())
@@ -11256,12 +11568,6 @@ class VirtualRenderer {
     get cursorLayer() {
         return this.renderer.cursorLayer;
     }
-    get loop() {
-        return this.renderer.loop;
-    }
-    set loop(val) {
-        this.renderer.loop = val;
-    }
     get textarea() {
         return this.renderer.textarea;
     }
@@ -11277,10 +11583,12 @@ class VirtualRenderer {
     get paragraphsAppeared$() {
         return this.renderer.paragraphsAppeared.asObservable();
     }
-    constructor(parentContainer, mainSession, commentService, scrollBar) {
+    constructor(parentContainer, mainSession, commentService, loop, scrollBar) {
         this.commentService = commentService;
+        this.loop = loop;
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
+        this.grammarChecksEnabled = false;
         this.size = {
             width: 0,
             height: 0,
@@ -11291,18 +11599,19 @@ class VirtualRenderer {
         this.paragraphsScrolledIntoViewSubject = new Subject();
         this.container = parentContainer;
         this.createScroller();
-        this.renderer = new Renderer(parentContainer, commentService, mainSession);
+        this.renderer = new Renderer(parentContainer, commentService, mainSession, loop);
+        loop.registerSession(0, changes => this.renderChanges(changes));
         this.pagesLayer = new PagesLayer(this.renderer.content, mainSession);
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
         this.commentLayer = new CommentLayer(this.renderer.content);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(x => {
             this.commentLayer.scrollComments(x);
-            this.loop.schedule({ scroll: true, comments: true });
+            this.scheduleChanges({ scroll: true, comments: true });
         });
-        this.createRenderLoop();
         this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
-            .pipe(debounceTime(3000))
+            .pipe(filter(() => this.grammarChecksEnabled), debounceTime(3000))
             .subscribe(() => this.paragraphsScrolledIntoView());
+        this.scheduleChanges({ full: true });
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -11381,7 +11690,7 @@ class VirtualRenderer {
             this.renderChanges(changes, true);
         }
         else {
-            this.loop.schedule(changes);
+            this.scheduleChanges(changes);
         }
         this.scrollBar.setScrollTop(0);
     }
@@ -11411,21 +11720,28 @@ class VirtualRenderer {
         this.size.dirty = !width || !height;
         return changes;
     }
-    setSelectedComment(commentId) {
-        this.renderer.setSelectedComment(commentId);
+    setSelectedComment(id) {
+        const oldId = this.commentService.selectedCommentId;
+        this.commentService.setSelectedComment(id);
+        if (this.commentService.selectedCommentId !== oldId) {
+            this.scheduleChanges({ comments: true });
+        }
     }
     setCommentsVisibility(value) {
         if (value && !this.commentsSubscription) {
+            this.commentLayer.enable();
             this.commentsSubscription = this.commentService.commentRenderRequests$.subscribe(x => {
                 this.commentLayer.applyChanges(x);
-                this.loop.schedule({ comments: true });
+                setTimeout(() => this.scheduleChanges({ comments: true }));
             });
         }
         else {
+            this.commentLayer.disable();
             this.commentsSubscription?.unsubscribe();
             this.commentsSubscription = null;
         }
         this.renderer.setCommentsVisibility(value);
+        this.scheduleChanges({ comments: true });
     }
     removeComment(id) {
         this.renderer.removeComment(id);
@@ -11492,6 +11808,9 @@ class VirtualRenderer {
     setVisibility(isVisible) {
         this.renderer.setVisibility(isVisible);
     }
+    scheduleChanges(changes) {
+        this.loop.schedule(0, changes);
+    }
     scrollSelectionIntoView(anchor, lead, offset) {
         // first scroll anchor into view then scroll lead into view
         this.scrollCursorIntoView(anchor, offset);
@@ -11511,7 +11830,7 @@ class VirtualRenderer {
                 top -= offset * this.container.scrollHeight;
             }
             this.scrollBar.setScrollTop(top);
-            this.loop.schedule({ scroll: true });
+            this.scheduleChanges({ scroll: true });
         }
         else if (this.scrollBar.scrollTop + this.container.scrollHeight < top + position.height) {
             if (offset) {
@@ -11519,7 +11838,7 @@ class VirtualRenderer {
             }
             top += position.height - this.container.scrollHeight;
             this.scrollBar.setScrollTop(top);
-            this.loop.schedule({ scroll: true });
+            this.scheduleChanges({ scroll: true });
         }
     }
     scrollBy(deltaY) {
@@ -11529,7 +11848,7 @@ class VirtualRenderer {
         const scrollTop = this.scrollBar.scrollTop + deltaY;
         this.scrollBar.setScrollTop(scrollTop);
         this.commentLayer.scrollComments(deltaY);
-        this.loop.schedule({ scroll: true, comments: true });
+        this.scheduleChanges({ scroll: true, comments: true });
     }
     // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
     screenToParagraph(x, y, tokenDivider = 1, rect) {
@@ -11595,11 +11914,6 @@ class VirtualRenderer {
         this.scroller.className = 'noder-scroller';
         this.container.appendChild(this.scroller);
     }
-    createRenderLoop() {
-        this.loop = new RenderLoop(changes => this.renderChanges(changes));
-        this.renderer.loop = this.loop;
-        this.loop.schedule({ full: true });
-    }
     renderScroll(changes) {
         this.pagesLayer.update(this.layerConfig);
         this.edgesLayer.scrollEdges(this.layerConfig);
@@ -11792,6 +12106,7 @@ class CommentRenderService {
         this.applicationRef = inject(ApplicationRef);
         this.injector = inject(Injector);
         this.commentRenderRequests = new Subject();
+        this.selectedCommentId = null;
     }
     requestCommentsRender(sessionId, renderRequests) {
         const requests = [];
@@ -11825,9 +12140,17 @@ class CommentRenderService {
     removeCommentsFromRender(sessionId) {
         this.commentRenderRequests.next(new RemoveCommentsFromDom(sessionId));
     }
-    setCommentSelected(id, selected = true) {
+    setSelectedComment(id) {
+        if (this.selectedCommentId === id) {
+            return;
+        }
+        if (this.selectedCommentId) {
+            const oldComponentRef = this.componentInstances.find(x => x.instance.id === this.selectedCommentId);
+            oldComponentRef?.instance.setSelected(false);
+        }
         const componentRef = this.componentInstances.find(x => x.instance.id === id);
-        componentRef?.instance.setSelected(selected);
+        componentRef?.instance.setSelected(true);
+        this.selectedCommentId = id;
     }
     createComponentRef(id) {
         const ref = createComponent(this.componentType, {
@@ -11857,6 +12180,7 @@ class RegulatorService {
         this.grammarEnabled = false;
         this.selectedCommentSessionId = null;
         this.selectedCommentId = null;
+        this.renderLoop = new RenderLoop();
         this.grammarChecker = new GrammarChecker(this.grammarService);
         this.observer = this.initializeIntersectionObserver();
     }
@@ -11885,9 +12209,9 @@ class RegulatorService {
         const displayData = new DisplayData(model, properties, sessionId, model.pageFormats, DocumentInfo.pagesSpace, customComponents, this.customContentService, this.editorService);
         const scrollBar = new ScrollBar(container.nativeElement.parentElement);
         const mainSession = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, model, this.selection, properties, this.editorService, customComponents, 'main', scrollBar);
-        const virtualRenderer = new VirtualRenderer(container.nativeElement, mainSession, this.commentRenderService, scrollBar);
+        this.mainRenderer = new VirtualRenderer(container.nativeElement, mainSession, this.commentRenderService, this.renderLoop, scrollBar);
         this.editorService.styles = DEFAULT_TOOLBAR_STYLES();
-        this.mainSession = new SessionModel(mainSession, virtualRenderer, sessionId, null, new MainSessionSourceModel(), container.nativeElement);
+        this.mainSession = new SessionModel(mainSession, this.mainRenderer, sessionId, null, new MainSessionSourceModel(), container.nativeElement);
         this.sessions.push(this.mainSession);
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
@@ -11903,7 +12227,7 @@ class RegulatorService {
         const session = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, component.cell, this.selection, component.generalProperties, this.editorService, customComponents, sessionType);
         displayData.pagesFormat[0].contentWidth =
             displayData.pagesFormat[0].contentWidth === 0 ? 1 : displayData.pagesFormat[0].contentWidth;
-        const renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session);
+        const renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session, this.renderLoop);
         const source = new CellSessionSourceModel(component.table, component);
         const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source, nativeElement);
         this.sessions.push(newSession);
@@ -11920,7 +12244,7 @@ class RegulatorService {
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
         const displayData = new DisplayData(component.model, component.generalProperties, sessionId, this.getPageFormats(component.margins, component.width), 0, customComponents, this.customContentService, this.editorService);
         const session = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge', null, component.type, component.model.pageType);
-        const renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session);
+        const renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session, this.renderLoop);
         const source = new EdgeSessionSourceModel(component.model.pageType, component.type);
         const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source, nativeElement);
         this.sessions.push(newSession);
@@ -12080,7 +12404,7 @@ class RegulatorService {
     setCommentsVisibility(value) {
         for (const sessionModel of this.sessions) {
             sessionModel.renderer.setCommentsVisibility(value);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         }
     }
     setSelectedComment(commentId) {
@@ -12089,36 +12413,38 @@ class RegulatorService {
                 return;
             }
             const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
-            sessionModel.renderer.setSelectedComment(null);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            this.mainRenderer.setSelectedComment(null);
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
             return;
         }
+        this.mainRenderer.setSelectedComment(commentId);
         const newSelectedSession = this.sessions.find(x => x.session.model.comments.some(c => c.commentId === commentId));
         if (this.selectedCommentSessionId && this.selectedCommentSessionId !== newSelectedSession.sessionId) {
             const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
-            sessionModel.renderer.setSelectedComment(null);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
+            newSelectedSession.renderer.scheduleChanges({ commentHighlights: true });
         }
         else {
-            newSelectedSession.renderer.setSelectedComment(commentId);
-            newSelectedSession.renderer.loop.schedule({ commentHighlights: true });
+            newSelectedSession.renderer.scheduleChanges({ commentHighlights: true });
         }
         this.selectedCommentId = commentId;
         this.selectedCommentSessionId = newSelectedSession.sessionId;
     }
     setSelectedCommentAtCursor() {
         const comment = this.currentSession.session.getCommentAtCursor();
+        this.mainRenderer.setSelectedComment(comment?.commentId);
         if (this.selectedCommentId && this.selectedCommentId !== comment?.commentId) {
             const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
-            sessionModel.renderer.setSelectedComment(null);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         }
         if (comment) {
-            this.currentSession.renderer.setSelectedComment(comment.commentId);
-            this.currentSession.renderer.loop.schedule({ commentHighlights: true });
+            this.currentSession.renderer.scheduleChanges({ commentHighlights: true });
             this.selectedCommentId = comment.commentId;
             this.selectedCommentSessionId = this.currentSession.sessionId;
+            return;
         }
+        this.selectedCommentId = null;
+        this.selectedCommentSessionId = null;
     }
     isWithinEdge(sessionId) {
         return !!this.getEdgeSessionId(sessionId);
@@ -12147,12 +12473,14 @@ class RegulatorService {
             for (const session of this.sessions) {
                 this.grammarChecker.registerSession(session);
                 session.renderer.paragraphsScrolledIntoView();
+                session.renderer.grammarChecksEnabled = true;
             }
             return;
         }
         for (const session of this.sessions) {
             this.grammarChecker.unregisterSession(session.sessionId);
             session.renderer.clearGrammarHighlights();
+            session.renderer.grammarChecksEnabled = false;
         }
     }
     getEdgeSessionId(sessionId) {
@@ -13763,6 +14091,17 @@ class RemoveWithParagraphModel {
     }
 }
 
+class ReplaceByContentsModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.contents) {
+                fields.contents = new ContentsModel(fields.contents);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class ReplaceModel {
     constructor(fields) {
         if (fields) {
@@ -13862,6 +14201,9 @@ class CommandModel {
             if (fields.insertBreak) {
                 fields.insertBreak = new InsertBreakModel(fields.insertBreak);
             }
+            if (fields.insertContents) {
+                fields.insertContents = new InsertContentsModel(fields.insertContents);
+            }
             if (fields.insertElement) {
                 fields.insertElement = new InsertElementModel(fields.insertElement);
             }
@@ -13919,6 +14261,9 @@ class CommandModel {
             if (fields.replace) {
                 fields.replace = new ReplaceModel(fields.replace);
             }
+            if (fields.replaceByContents) {
+                fields.replaceByContents = new ReplaceByContentsModel(fields.replaceByContents);
+            }
             if (fields.replaceByRestore) {
                 fields.replaceByRestore = new ReplaceByRestoreModel(fields.replaceByRestore);
             }
@@ -14047,6 +14392,12 @@ class SaveCommandsHelper {
     static getReplaceByRestoreCommand(replaceByRestore, targets) {
         return new CommandModel({ commandType: CommandType.ReplaceByRestore, replaceByRestore, targets });
     }
+    static getInsertContentsCommand(model, targets) {
+        return new CommandModel({ commandType: CommandType.InsertContents, insertContents: model, targets });
+    }
+    static getReplaceByContentsModel(model, targets) {
+        return new CommandModel({ commandType: CommandType.ReplaceByContents, replaceByContents: model, targets });
+    }
     static getMoveRangeCommand(model, targets) {
         return new CommandModel({ commandType: CommandType.MoveRange, moveRange: model, targets });
     }
@@ -14815,10 +15166,6 @@ class TextInput {
         parentElement.insertBefore(this.input, parentElement.firstChild);
         this.isFocused = document.activeElement === this.input;
     }
-    getClipboardData(event) {
-        const mime = 'text/plain';
-        return event.clipboardData.getData(mime);
-    }
     getInsertText() {
         const data = this.input.value;
         const selectionStart = this.input.selectionStart;
@@ -14940,12 +15287,13 @@ class Editor {
         this.inputHandler = new InputHandler(this.textInput.input, this);
         this.documentHandler = new DocumentHandler(this);
         this.dragAndDrop = new DragAndDrop(this.container.nativeElement);
+        this.clipboardHandler = new ClipboardHandler(this.clipboard);
         this.initResizeListener();
         this.focus();
         this.session.applyToolbarStyles();
         this.onSetCommentsVisibility(!!this.model.comments.length);
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.toggleGrammarChecksSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription(), this.startNewListSubscription(), this.continueNumberingSubscription(), this.setNumberingValueSubscription());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.selectSpacingSubscription(), this.selectBeforeSubscription(), this.selectAfterSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.toggleGrammarChecksSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription(), this.getCommentTextSubscription(), this.replaceCommentTextSubscription(), this.startNewListSubscription(), this.continueNumberingSubscription(), this.setNumberingValueSubscription(), this.insertContentsSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -15005,9 +15353,6 @@ class Editor {
         const y = rect.top + cursor.pageY + cursor.height;
         this.overlayService.open(component, { textKey }, x, y);
     }
-    cut() {
-        this.removeSelected();
-    }
     insert(text) {
         const sanitizedText = text.replace(this.emojiRegex, ' ');
         if (this.selection.isEmpty) {
@@ -15039,6 +15384,11 @@ class Editor {
         this.onSelectionChange();
         this.onContentChange();
     }
+    insertSlice(sliceData) {
+        const slice = sliceData.data;
+        const revisionId = sliceData.source.revisionId;
+        this.editorService.requestContentsInsertion(slice, revisionId);
+    }
     removeLeft() {
         if (this.selection.isEmpty) {
             this.selection.selectLeft(this.session);
@@ -15481,7 +15831,7 @@ class Editor {
             command = SaveCommandsHelper.getInsertTextCommand(text, insertIndex, this.targets);
         }
         else if (operation instanceof DeleteModel) {
-            this.session.removeByDocumentIndexes(operation.startIndex, operation.startIndex + operation.count);
+            this.session.removeByDocumentIndexes(operation.startIndex, operation.startIndex + operation.count - 1);
             command = SaveCommandsHelper.getDeleteCommand(operation.startIndex, operation.count, this.targets);
         }
         else if (operation instanceof InsertStyledTextModel) {
@@ -15676,6 +16026,16 @@ class Editor {
             this.session.applyNewNumberingForParagraphs(operation.levels, operation.insertIndexes);
             command = SaveCommandsHelper.getApplyNewNumberingForParagraphsCommand(operation.insertIndexes, operation.levels, this.targets);
         }
+        else if (operation instanceof InsertContentsModel) {
+            const deepCopy = structuredClone(operation.contents);
+            this.session.insertContents(operation.insertIndex, deepCopy);
+            command = SaveCommandsHelper.getInsertContentsCommand(operation, this.targets);
+        }
+        else if (operation instanceof ReplaceByContentsModel) {
+            const deepCopy = structuredClone(operation.contents);
+            this.session.replaceByContents(operation.startIndex, operation.count, deepCopy);
+            command = SaveCommandsHelper.getReplaceByContentsModel(operation, this.targets);
+        }
         else {
             throw new Error('Undo/redo is not implemented for the Operation');
         }
@@ -15806,6 +16166,22 @@ class Editor {
         this.history.pushMoveRange(undoModel, redoModel, sourceRange);
         this.commandsService.createCommand(SaveCommandsHelper.getMoveRangeCommand(redoModel, []));
     }
+    saveInsertContentsToHistory(redoModel) {
+        const startIndex = redoModel.insertIndex;
+        const undoModel = new DeleteModel({ startIndex, count: redoModel.contents.content.length });
+        this.history.pushInsertContents(undoModel, redoModel);
+        this.commandsService.createCommand(SaveCommandsHelper.getInsertContentsCommand(redoModel, this.targets));
+    }
+    saveReplaceByContentsToHistory(redoModel) {
+        const undoSlice = ContentsOperationsHelper.GetRelativeContentSlice(this.session.model, redoModel.startIndex, redoModel.count);
+        const undoModel = new ReplaceByContentsModel({
+            startIndex: redoModel.startIndex,
+            contents: undoSlice,
+            count: redoModel.contents.content.length
+        });
+        this.history.pushReplaceByContents(undoModel, redoModel);
+        this.commandsService.createCommand(SaveCommandsHelper.getReplaceByContentsModel(redoModel, this.targets));
+    }
     saveReplaceToHistory(range, model) {
         const restoreModel = this.session.createRestoreFromSlice(range.start, range.end);
         this.history.pushReplace(restoreModel, model);
@@ -15949,29 +16325,42 @@ class Editor {
         this.showInsertOverlay(text);
     }
     onCut(event) {
-        event.preventDefault();
-        const data = this.getSelectedText();
-        if (!data) {
+        const text = this.getSelectedText();
+        const slice = this.getSelectedSlice();
+        if (!text && !slice) {
             return;
         }
-        this.editorService.setClipboardData(data);
-        this.clipboard.copy(data);
-        this.cut();
+        this.clipboardHandler.copyEvent(event, text, slice, this.editorService.revisionId);
+        this.removeSelected();
         this.scrollCursorIntoMainView();
+        this.editorService.setClipboardData(text);
     }
     onCopy(event) {
-        event.preventDefault();
-        const data = this.getSelectedText();
-        if (!data) {
+        const text = this.getSelectedText();
+        const slice = this.getSelectedSlice();
+        if (!text && !slice) {
             return;
         }
-        this.editorService.setClipboardData(data);
-        this.clipboard.copy(data);
+        this.clipboardHandler.copyEvent(event, text, slice, this.editorService.revisionId);
+        this.editorService.setClipboardData(text);
     }
     onPaste(event) {
-        event.preventDefault();
-        const data = this.textInput.getClipboardData(event);
-        this.pasteData(data);
+        const { text, sliceData } = this.clipboardHandler.readEvent(event);
+        if (sliceData) {
+            this.pasteData(text, sliceData);
+            return;
+        }
+        this.clipboardHandler // If slice not found in event should check navigation clipboard for data.
+            .readAsync()
+            .then(asyncData => {
+            if (text === asyncData.text && asyncData.sliceData) {
+                this.pasteData(asyncData.text, asyncData.sliceData);
+            }
+            else if (text) {
+                this.pasteData(text, null);
+            }
+        })
+            .catch(() => { });
     }
     onCreateComment(commentType) {
         const { startIndex, endIndex } = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
@@ -15990,8 +16379,8 @@ class Editor {
         this.commentCreateRequests = this.commentCreateRequests.filter(x => x.reqId !== reqId);
         commentModel.commentId = commentId;
         sessionModel.session.addComment(commentModel);
-        sessionModel.renderer.setSelectedComment(commentModel.commentId);
-        sessionModel.renderer.loop.schedule({ commentHighlights: true });
+        this.mainRenderer.setSelectedComment(commentModel.commentId);
+        sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         this.saveAttachCommentToHistory(commentModel);
     }
     onCommentRemoved(id) {
@@ -16000,7 +16389,7 @@ class Editor {
         session.renderer.removeComment(id);
         this.saveRemoveCommentToHistory(comment, session.source.getTarget());
         this.editorService.removeCommentData([id]);
-        session.renderer.loop.schedule({ commentHighlights: true });
+        session.renderer.scheduleChanges({ commentHighlights: true });
     }
     onCommentTextReplace(commentId, newText) {
         const { session, comment } = this.regulatorService.getComment(commentId);
@@ -16033,7 +16422,7 @@ class Editor {
         window.removeEventListener('resize', this.rerenderResize);
     }
     rerenderMarker() {
-        this.renderer.loop.schedule({ marker: true });
+        this.renderer.scheduleChanges({ marker: true });
     }
     onBlur() {
         if (!this.textInput.isFocused) {
@@ -16279,6 +16668,19 @@ class Editor {
         this.onSelectionChange();
         this.onContentChange();
     }
+    insertContent(insertIndex, contents) {
+        const insertContents = new InsertContentsModel({ insertIndex, contents });
+        this.saveInsertContentsToHistory(insertContents);
+        this.session.insertContents(insertIndex, structuredClone(contents));
+        this.onSelectionChange();
+    }
+    replaceByContents(startIndex, endIndex, contents) {
+        const count = endIndex - startIndex + 1;
+        const replaceByContents = new ReplaceByContentsModel({ startIndex, count, contents });
+        this.saveReplaceByContentsToHistory(replaceByContents);
+        this.session.replaceByContents(startIndex, count, structuredClone(contents));
+        this.onSelectionChange();
+    }
     moveRange(model) {
         this.regulatorService.setTargetedSessionAsCurrent(model.targetTargets);
         const sourceSession = this.regulatorService.getTargetedSession(model.sourceTargets);
@@ -16362,6 +16764,13 @@ class Editor {
         });
         return textInterval;
     }
+    getSelectedSlice() {
+        const selectionRange = this.selection.selectedRange;
+        if (selectionRange.isEmpty) {
+            return null;
+        }
+        return this.session.getContentsSlice(selectionRange.start, selectionRange.end);
+    }
     initMainSession() {
         const pageWidth = this.customPageWidth ?? Math.max(...this.model.pageFormats.map(x => x.pageWidth));
         this.container.nativeElement.style.maxWidth = `${pageWidth}px`;
@@ -16371,7 +16780,7 @@ class Editor {
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
         this.regulatorService.addMainSession(this.model, scalingRatio, this.container);
     }
-    onSelectionChange() {
+    onSelectionChange(isMouseSelection = false) {
         this.session.applyToolbarStyles();
         this.renderer.updateSelection(this.selection.selectedRange);
         if (this.selection.isEmpty) {
@@ -16387,7 +16796,7 @@ class Editor {
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
         this.regulatorService.setSelectedCommentAtCursor();
-        if (!this.selection.isEmpty && this.commentsVisible) {
+        if (!this.selection.isEmpty && this.commentsVisible && !isMouseSelection) {
             const paragraphPos = this.session.selection.cursor;
             const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const mainRect = this.mainRenderer.container.getBoundingClientRect();
@@ -16398,7 +16807,7 @@ class Editor {
         }
     }
     onContentChange() {
-        this.renderer.loop.schedule({ commentHighlights: true });
+        this.renderer.scheduleChanges({ commentHighlights: true });
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -16502,7 +16911,7 @@ class Editor {
         const cursor = this.selection.cursor;
         this.selection.moveSelection(position);
         if (cursor.column !== this.selection.cursor.column || cursor.row !== this.selection.cursor.row) {
-            this.onSelectionChange();
+            this.onSelectionChange(true);
         }
         this.scrollCursorIntoMainView();
     }
@@ -16603,7 +17012,7 @@ class Editor {
     viewOnlyModeSubscription() {
         return this.editorService.isViewOnly$.subscribe(() => {
             this.selection?.clearSelection();
-            this.renderer.loop.schedule({ grammar: true });
+            this.renderer.scheduleChanges({ grammar: true });
         });
     }
     applyLeftMarginPageFormatSubscription() {
@@ -16846,49 +17255,59 @@ class Editor {
     }
     cutSelectedSubscription() {
         return this.editorService.cutSelected$.subscribe(() => {
-            this.onCut(new ClipboardEvent('cut'));
+            const text = this.getSelectedText();
+            const slice = this.getSelectedSlice();
+            if (!text && !slice) {
+                return;
+            }
+            this.clipboardHandler.copyAsync(text, slice, this.editorService.revisionId).catch(() => { });
+            this.removeSelected();
+            this.scrollCursorIntoMainView();
+            this.editorService.setClipboardData(text);
         });
     }
     copySelectedSubscription() {
         return this.editorService.copySelected$.subscribe(() => {
-            this.onCopy(new ClipboardEvent('copy'));
+            const text = this.getSelectedText();
+            const slice = this.getSelectedSlice();
+            if (!text && !slice) {
+                return;
+            }
+            this.clipboardHandler.copyAsync(text, slice, this.editorService.revisionId).catch(() => { });
+            this.editorService.setClipboardData(text);
         });
     }
     pasteFromClipboardSubscription() {
-        return this.editorService.pasteFromClipboard$.subscribe(() => {
-            this.readClipboard()
-                .then(data => this.pasteData(data))
-                .catch(() => {
-                // continue regardless error
-            });
+        return this.editorService.pasteFromClipboard$
+            .pipe(switchMap(() => from(this.clipboardHandler.readAsync())))
+            .subscribe(({ text, sliceData }) => {
+            this.pasteData(text, sliceData);
         });
     }
-    async readClipboard() {
-        const read = await navigator.permissions.query({ name: 'clipboard-read' });
-        return new Promise(resolve => {
-            if (navigator.clipboard && read.state != 'denied') {
-                navigator.clipboard
-                    .readText()
-                    .then(data => {
-                    resolve(data);
-                })
-                    .catch(() => {
-                    // continue regardless error
-                });
+    pasteData(text, sliceData) {
+        if (sliceData) {
+            this.insertSlice(sliceData);
+        }
+        else if (text) {
+            const insertText = text.replace(/\r\n/g, '\n').replace(/\t/g, ' ');
+            this.insert(insertText);
+            this.scrollCursorIntoMainView();
+        }
+    }
+    insertContentsSubscription() {
+        return this.editorService.insertContents$.subscribe(contents => {
+            const start = this.selection.range.start;
+            const startIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, start.row, start.column);
+            if (this.selection.isEmpty) {
+                this.insertContent(startIndex, contents);
             }
             else {
-                resolve(this.clipboardData);
+                const end = this.selection.range.end;
+                const endIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, end.row, end.column) - 1;
+                this.replaceByContents(startIndex, endIndex, contents);
             }
         });
     }
-    pasteData(data) {
-        if (!data) {
-            return;
-        }
-        const text = data.replace(/\r\n/g, '\n').replace(/\t/g, ' ');
-        this.insert(text);
-        this.scrollCursorIntoMainView();
-    }
     selectAllSubscription() {
         return this.editorService.selectAll$.subscribe(() => {
             this.selection.selectAll(this.session.model);
@@ -16900,11 +17319,6 @@ class Editor {
             this.removeSelected();
         });
     }
-    clipboardDataSubscription() {
-        return this.editorService.clipboardData$.subscribe(data => {
-            this.clipboardData = data;
-        });
-    }
     commandCreatedForEdges() {
         return this.commandsService.createCommand$
             .pipe(filter(x => !!x.targets.find(y => !!y.edgeData)))
@@ -16931,7 +17345,7 @@ class Editor {
         ];
     }
     rerenderCommentsSubscription() {
-        return this.editorService.commentSizeChanged$.subscribe(() => this.mainRenderer.loop.schedule({ comments: true }));
+        return this.editorService.commentSizeChanged$.subscribe(() => this.mainRenderer.scheduleChanges({ comments: true }));
     }
     selectCommentSubscription() {
         return this.editorService.setCommentSelected$.subscribe(x => this.regulatorService.setSelectedComment(x));