@talrace/ngx-noder 19.0.52 → 19.0.54

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) {
@@ -2932,214 +3322,84 @@ class OperationHistory {
         targets ??= this.regulatorService.getCurrentSessionTargets();
         const cursor = selection?.start ?? this.regulatorService.selection.cursor;
         const anchor = selection?.end ?? this.regulatorService.selection.anchor;
-        this.step++;
-        this.storage.splice(this.step, this.storage.length);
-        this.storage.push({ undo: undoStep, redo: redoStep, targets, cursor, anchor });
-        if (this.storage.length > this.MAX_HISTORY) {
-            this.storage.splice(0, 1);
-            this.step--;
-        }
-        this.editorService.historyInfo = new OperationsHistoryInfoModel(this.step, this.storage.length - 1);
-    }
-}
-
-class BreakModel {
-    constructor(fields) {
-        if (fields) {
-            Object.assign(this, fields);
-        }
-    }
-}
-
-class IndexedElementOperationsHelper {
-    static removeContent(elements, startIndex, endIndex) {
-        const length = endIndex - startIndex + 1;
-        for (let i = elements.length - 1; i >= 0; i--) {
-            if (elements[i].insertIndex >= startIndex && elements[i].insertIndex <= endIndex) {
-                elements.splice(i, 1);
-            }
-        }
-        elements.forEach(x => {
-            if (x.insertIndex > endIndex) {
-                x.insertIndex -= length;
-            }
-        });
-    }
-    static insert(elements, element, length = 1) {
-        this.insertContent(elements, element.insertIndex, length);
-        const index = elements.findIndex(x => x.insertIndex > element.insertIndex);
-        if (index < 0) {
-            elements.push(element);
-        }
-        else {
-            elements.splice(index, 0, element);
-        }
-    }
-    static insertContent(elements, index, length) {
-        elements.forEach(x => {
-            if (x.insertIndex >= index) {
-                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);
+        this.step++;
+        this.storage.splice(this.step, this.storage.length);
+        this.storage.push({ undo: undoStep, redo: redoStep, targets, cursor, anchor });
+        if (this.storage.length > this.MAX_HISTORY) {
+            this.storage.splice(0, 1);
+            this.step--;
         }
+        this.editorService.historyInfo = new OperationsHistoryInfoModel(this.step, this.storage.length - 1);
     }
 }
 
-class RangeElementHelper {
+class IndexedElementOperationsHelper {
     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 (elements[i].insertIndex >= startIndex && elements[i].insertIndex <= endIndex) {
+                elements.splice(i, 1);
             }
-            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;
+        }
+        elements.forEach(x => {
+            if (x.insertIndex > endIndex) {
+                x.insertIndex -= length;
             }
-            element.startIndex -= length;
-            element.endIndex -= length;
+        });
+    }
+    static insert(elements, element, length = 1) {
+        this.insertContent(elements, element.insertIndex, length);
+        const index = elements.findIndex(x => x.insertIndex > element.insertIndex);
+        if (index < 0) {
+            elements.push(element);
+        }
+        else {
+            elements.splice(index, 0, element);
         }
     }
     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;
+        elements.forEach(x => {
+            if (x.insertIndex >= index) {
+                x.insertIndex += 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;
@@ -9953,7 +10250,7 @@ class CommentHighlightLayer extends HighlightLayer {
     }
     update(config) {
         const comments = this.session.model.comments;
-        if (!config?.isVisible || !comments?.length || !this.enabled) {
+        if (!comments?.length || !this.enabled) {
             this.element.innerHTML = '';
             return;
         }
@@ -10094,6 +10391,12 @@ class CursorLayer {
     }
 }
 
+class CustomElementInfo {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
 class GrammarHighlightLayer extends HighlightLayer {
     constructor(parentEl, cssClass, session) {
         super(parentEl, cssClass, session);
@@ -10101,7 +10404,7 @@ class GrammarHighlightLayer extends HighlightLayer {
         this.errorsByParagraph = new Map();
     }
     update(config) {
-        if (!config?.isVisible || !this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
+        if (!this.errorsByParagraph.size || this.session.editorService.isViewOnly) {
             this.element.innerHTML = '';
             return;
         }
@@ -10159,8 +10462,7 @@ class RenderChangesModel {
             this.scroll ||
             this.size ||
             this.text ||
-            this.dragAndDrop ||
-            this.visibilityChanged);
+            this.dragAndDrop);
     }
     constructor(fields) {
         this.cursor = false;
@@ -10176,7 +10478,6 @@ class RenderChangesModel {
         this.size = false;
         this.text = false;
         this.dragAndDrop = false;
-        this.visibilityChanged = false;
         if (!fields) {
             return;
         }
@@ -10189,12 +10490,6 @@ class RenderChangesModel {
     }
 }
 
-class CustomElementInfo {
-    constructor(init) {
-        Object.assign(this, init);
-    }
-}
-
 class SearchHighlightLayer extends HighlightLayer {
     constructor(parentEl, cssClass, session) {
         super(parentEl, cssClass, session);
@@ -10204,9 +10499,6 @@ class SearchHighlightLayer extends HighlightLayer {
         this.customElementsRanges = [];
     }
     update(config) {
-        if (!config?.isVisible) {
-            return;
-        }
         this.config = config;
         this.selectionIndex = 0;
         this.getVisibleCustomElementResults(config);
@@ -10574,10 +10866,8 @@ class Renderer extends EventEmitting {
                 endLine: 0,
                 endScreenLine: 0,
                 endScreenFullLine: 0
-            },
-            isVisible: false
+            }
         };
-        this.isVisible = false;
         this.changes = new RenderChangesModel();
         this.paragraphsAppeared = new Subject();
         this.visibilitySubject = new Subject();
@@ -10619,8 +10909,7 @@ class Renderer extends EventEmitting {
             changes.scroll ||
             changes.search ||
             changes.grammar ||
-            changes.commentHighlights ||
-            changes.visibilityChanged) {
+            changes.commentHighlights) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.content.style, 'width', `${this.layerConfig.width}px`);
@@ -10652,12 +10941,6 @@ class Renderer extends EventEmitting {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
-        if (changes.visibilityChanged) {
-            this.renderSearchHighlights();
-            this.renderGrammarHighlights();
-            this.renderCommentHighlights();
-            this.visibilitySubject.next(this.isVisible);
-        }
         this.session.onRendered();
     }
     /**
@@ -10707,10 +10990,22 @@ class Renderer extends EventEmitting {
         }
     }
     updateCustomElementHighlights(ranges) {
-        this.searchHighlightLayer.customElementsRanges = ranges;
-        this.scheduleChanges({ search: true });
+        if (this.searchHighlightLayer.customElementsRanges.length !== ranges.length ||
+            !this.searchHighlightLayer.customElementsRanges.every(x => ranges.some(z => x.location.isEqual(z.location)))) {
+            this.searchHighlightLayer.customElementsRanges = ranges;
+            this.scheduleChanges({ search: true });
+        }
     }
     updateActiveSearchHighlight(active) {
+        if (this.searchHighlightLayer.active === active ||
+            (this.searchHighlightLayer.active instanceof Range &&
+                active instanceof Range &&
+                this.searchHighlightLayer.active.isEqual(active)) ||
+            (this.searchHighlightLayer.active instanceof CustomElementInfo &&
+                active instanceof CustomElementInfo &&
+                this.searchHighlightLayer.active.location.isEqual(active.location))) {
+            return;
+        }
         this.searchHighlightLayer.active = active;
         this.scheduleChanges({ search: true });
     }
@@ -10750,15 +11045,6 @@ class Renderer extends EventEmitting {
         this.dragAndDropSelectionLayer.marker = null;
         this.scheduleChanges({ dragAndDrop: true });
     }
-    setVisibility(isVisible) {
-        if (this.isVisible !== isVisible) {
-            this.isVisible = isVisible;
-            if (!isVisible) {
-                this.commentsLayer.clearSessionComments();
-            }
-            this.scheduleChanges({ visibilityChanged: true });
-        }
-    }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
@@ -10857,8 +11143,7 @@ class Renderer extends EventEmitting {
             contentRange: new DistanceModel({ start: 0, end: displayData.paragraphs.filter(x => x.paragraphSettings).length - 1 }),
             maxHeight,
             offset: 0,
-            scrollTop: this.session.scrollTop,
-            isVisible: this.isVisible
+            scrollTop: this.session.scrollTop
         };
         return changes;
     }
@@ -11329,14 +11614,7 @@ class VirtualRenderer {
             return;
         }
         // text, scrolling and resize changes can cause the view port size to change
-        if (changes.full ||
-            changes.size ||
-            changes.text ||
-            changes.lines ||
-            changes.scroll ||
-            changes.search ||
-            changes.grammar ||
-            changes.visibilityChanged) {
+        if (changes.full || changes.size || changes.text || changes.lines || changes.scroll || changes.search || changes.grammar) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.renderer.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.renderer.content.style, 'width', `${this.layerConfig.width}px`);
@@ -11377,9 +11655,6 @@ class VirtualRenderer {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
-        if (changes.visibilityChanged) {
-            this.renderSearchHighlights();
-        }
     }
     /**
      * Triggers a resize of the editor
@@ -11508,9 +11783,6 @@ class VirtualRenderer {
     updateCursor() {
         this.renderer.updateCursor();
     }
-    setVisibility(isVisible) {
-        this.renderer.setVisibility(isVisible);
-    }
     scheduleChanges(changes) {
         this.loop.schedule(0, changes);
     }
@@ -11570,6 +11842,10 @@ class VirtualRenderer {
         this.renderer.clearGrammarHighlights();
     }
     paragraphsScrolledIntoView() {
+        if (!this.layerConfig.visibleRange) {
+            this.renderer.paragraphsAppeared.next(this.renderer.session.displayData.paragraphs);
+            return;
+        }
         const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph + 1);
         this.renderer.paragraphsAppeared.next(paragraphs);
     }
@@ -11607,8 +11883,7 @@ class VirtualRenderer {
             offset: 0,
             visibleRange,
             scrollTop: this.scrollBar.scrollTop,
-            pages: visibleRange.pages,
-            isVisible: true
+            pages: visibleRange.pages
         };
         return changes;
     }
@@ -11885,7 +12160,6 @@ class RegulatorService {
         this.selectedCommentId = null;
         this.renderLoop = new RenderLoop();
         this.grammarChecker = new GrammarChecker(this.grammarService);
-        this.observer = this.initializeIntersectionObserver();
     }
     addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
@@ -11939,7 +12213,6 @@ class RegulatorService {
         if (this.grammarEnabled) {
             this.grammarChecker.registerSession(newSession);
         }
-        this.observer.observe(nativeElement);
         return newSession;
     }
     addEdgeSession(component, nativeElement) {
@@ -11956,14 +12229,12 @@ class RegulatorService {
         if (this.grammarEnabled) {
             this.grammarChecker.registerSession(newSession);
         }
-        this.observer.observe(nativeElement);
         return newSession;
     }
     removeSession(sessionId) {
         const index = this.sessions.findIndex(x => x.sessionId === sessionId);
         this.sessions[index].session.destroy();
         this.sessions[index].renderer.destroy();
-        this.observer.unobserve(this.sessions[index].nativeElement);
         this.sessions.splice(index, 1);
         this.grammarChecker.unregisterSession(sessionId);
     }
@@ -12221,19 +12492,6 @@ class RegulatorService {
             })
         ];
     }
-    initializeIntersectionObserver() {
-        const options = {
-            root: null,
-            rootMargin: '50px',
-            threshold: 0.01
-        };
-        return new IntersectionObserver(entries => {
-            entries.forEach(entry => {
-                const sessionId = +entry.target.getAttribute('data-session-id');
-                this.getSessionModel(sessionId)?.renderer.setVisibility(entry.isIntersecting);
-            });
-        }, options);
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, deps: [{ token: CustomContentService }, { token: EditorService }, { token: ComponentService }, { token: GrammarService }, { token: CommentRenderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService }); }
 }
@@ -13699,8 +13957,7 @@ class PrintRenderer {
             maxHeight,
             offset: 0,
             pages,
-            scrollTop: 0,
-            isVisible: true
+            scrollTop: 0
         };
     }
     createContent() {
@@ -13794,6 +14051,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) {
@@ -13893,6 +14161,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);
             }
@@ -13950,6 +14221,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);
             }
@@ -14078,6 +14352,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 });
     }
@@ -14846,10 +15126,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;
@@ -14971,12 +15247,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());
@@ -15036,9 +15313,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) {
@@ -15070,6 +15344,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);
@@ -15512,7 +15791,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) {
@@ -15707,6 +15986,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');
         }
@@ -15837,6 +16126,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);
@@ -15980,29 +16285,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);
@@ -16310,6 +16628,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);
@@ -16393,6 +16724,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`;
@@ -16877,49 +17215,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);
@@ -16931,11 +17279,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)))