@talrace/ngx-noder 0.0.11 → 0.0.13

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Directive, inject, ChangeDetectorRef, HostBinding, Input, Injectable, InjectionToken, createComponent, Component, ChangeDetectionStrategy, ViewChild, EventEmitter, Output, HostListener, NgModule, Inject } from '@angular/core';
-import { Subject, BehaviorSubject, fromEvent, throttleTime, filter, take, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs';
+import { Subject, BehaviorSubject, fromEvent, throttleTime, filter, take, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
 import { HttpHeaders } from '@angular/common/http';
 import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -504,6 +504,9 @@ class EditorService {
         this._endMousePress$ = new Subject();
         this._disableSelection$ = new Subject();
         this._changedTableSize$ = new Subject();
+        this._changedEdgeSize$ = new Subject();
+        this._imageLoaded$ = new Subject();
+        this._changedEdge$ = new Subject();
         this._insertTableRows$ = new Subject();
         this._insertTableColumns$ = new Subject();
         this._removeTableRows$ = new Subject();
@@ -511,9 +514,6 @@ class EditorService {
         this._removeImage$ = new Subject();
         this._resizeTableColumns$ = new Subject();
         this._insertTable$ = new Subject();
-        this._rendererUpdated$ = new Subject();
-        this._edgeElementCopyUpdated$ = new Subject();
-        this._changedEdgeHeight$ = new Subject();
         this._redo$ = new Subject();
         this._undo$ = new Subject();
         this._print$ = new Subject();
@@ -621,6 +621,15 @@ class EditorService {
     get changedTableSize$() {
         return this._changedTableSize$.asObservable();
     }
+    get changedEdgeSize$() {
+        return this._changedEdgeSize$.asObservable();
+    }
+    get imageLoaded$() {
+        return this._imageLoaded$.asObservable();
+    }
+    get changedEdge$() {
+        return this._changedEdge$.asObservable();
+    }
     get insertTableRows$() {
         return this._insertTableRows$.asObservable();
     }
@@ -642,15 +651,6 @@ class EditorService {
     get insertTable$() {
         return this._insertTable$.asObservable();
     }
-    get rendererUpdated$() {
-        return this._rendererUpdated$.asObservable();
-    }
-    get edgeElementCopyUpdated$() {
-        return this._edgeElementCopyUpdated$.asObservable();
-    }
-    get changedEdgeHeight$() {
-        return this._changedEdgeHeight$.asObservable();
-    }
     get redo$() {
         return this._redo$.asObservable();
     }
@@ -748,6 +748,15 @@ class EditorService {
     changedTableSize(insertIndex, sessionId) {
         this._changedTableSize$.next({ insertIndex, sessionId });
     }
+    changedEdgeSize(edgeType, pageType) {
+        this._changedEdgeSize$.next({ edgeType, pageType });
+    }
+    imageLoaded(sessionId) {
+        this._imageLoaded$.next(sessionId);
+    }
+    changedEdge(sessionId) {
+        this._changedEdge$.next(sessionId);
+    }
     insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex, sessionId) {
         this._insertTableRows$.next({ insertIndex, rowsCount, targetIndex, inheritIndex, sessionId });
     }
@@ -772,15 +781,6 @@ class EditorService {
     insertTable(tableData) {
         this._insertTable$.next(tableData);
     }
-    rendererUpdated(sessionId) {
-        this._rendererUpdated$.next(sessionId);
-    }
-    edgeElementCopyUpdated(newElementCopy, page) {
-        this._edgeElementCopyUpdated$.next({ newElementCopy, page });
-    }
-    changedEdgeHeight(type) {
-        this._changedEdgeHeight$.next(type);
-    }
     undo() {
         this._undo$.next();
     }
@@ -1080,6 +1080,15 @@ class ContentHelper {
             }
         });
     }
+    static getContentFromInsertParagraph(insertParagraph) {
+        if (insertParagraph.insertImage) {
+            return insertParagraph.insertImage.imageData.content;
+        }
+        if (insertParagraph.insertTable) {
+            return insertParagraph.insertTable.content;
+        }
+        return insertParagraph.insertText.text;
+    }
 }
 
 class DeleteModel {
@@ -1463,12 +1472,6 @@ class InsertTabModel {
     }
 }
 
-class LinkHelper {
-    static sliceSection(links, startIndex, endIndex) {
-        return links.filter(x => x.startIndex >= startIndex && x.endIndex <= endIndex);
-    }
-}
-
 class LinkModel {
     constructor(fields) {
         if (fields) {
@@ -1477,6 +1480,45 @@ class LinkModel {
     }
 }
 
+class LinkHelper {
+    static sliceSection(links, start, end) {
+        return links.map(link => LinkHelper.getPartialLink(link, start, end)).filter((link) => link !== null);
+    }
+    static sliceFormats(links, startIndex, endIndex) {
+        const result = [];
+        for (const link of links) {
+            const absoluteFormats = link.formats.map(x => ({
+                ...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 newFormats = 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;
+            return new FormatModel({ ...format, startIndex: newFormatStart, endIndex: newFormatEnd });
+        })
+            .filter((format) => format !== null);
+        return new LinkModel({ ...link, startIndex: newStart, endIndex: newEnd, formats: newFormats });
+    }
+}
+
 var MouseButton;
 (function (MouseButton) {
     MouseButton[MouseButton["Left"] = 0] = "Left";
@@ -1501,7 +1543,7 @@ class MouseHandler {
         this.endMousePress();
         this.documentMouseMove$ = fromEvent(document, 'mousemove')
             .pipe(throttleTime(20))
-            .subscribe((event) => editor.onMousePressedMove(event.clientX, event.clientY));
+            .subscribe((event) => editor.onMousePressedMove(event));
         this.documentMouseUp$ = fromEvent(document, 'mouseup').subscribe(() => this.endMousePress());
     }
     endMousePress() {
@@ -1629,70 +1671,49 @@ class OperationHistory {
     }
     pushInsertText(insertIndex, text) {
         const redoStep = new InsertTextModel({ insertIndex, text });
-        const undoStep = new DeleteModel({ startIndex: insertIndex, endIndex: insertIndex + text.length });
+        const undoStep = new DeleteModel({ startIndex: insertIndex, count: text.length });
         this.addToHistory(undoStep, redoStep);
     }
-    pushInsertParagraph(model, paragraphs) {
-        const currentParagraph = paragraphs
-            .slice()
-            .sort((a, b) => a.insertIndex - b.insertIndex)
-            .find(x => x.insertIndex >= model.insertIndex);
-        const previousParagraph = paragraphs
-            .slice()
-            .sort((a, b) => b.insertIndex - a.insertIndex)
-            .find(x => x.insertIndex < currentParagraph.insertIndex);
-        let startIndex = model.insertIndex;
-        let endIndex = model.insertIndex;
-        if (model.insertIndex === 0 || previousParagraph?.insertIndex === model.insertIndex - 1) {
-            endIndex++;
-        }
-        else if (currentParagraph.insertIndex === model.insertIndex) {
-            startIndex++;
-            endIndex++;
-        }
-        else {
-            endIndex = startIndex + 2;
-        }
-        endIndex = endIndex + (model.insertText ? model.insertText.text.length : 1);
-        const undoStep = new DeleteModel({ startIndex, endIndex });
-        this.addToHistory(undoStep, model);
+    pushInsertParagraph(content, model, paragraphs) {
+        const undoStep = this.getDeleteDataForInsertParagraphs(content, model, paragraphs);
+        this.addToHistory(new DeleteModel({ ...undoStep }), model);
     }
     pushInsertElement(model) {
-        const undoStep = new DeleteModel({ startIndex: model.element.insertIndex, endIndex: model.element.insertIndex + 1 });
+        const undoStep = new DeleteModel({ startIndex: model.element.insertIndex, count: CUSTOM_ELEMENT_MARKER.length });
         this.addToHistory(undoStep, model);
     }
-    pushInsertBreak(model, endIndex) {
-        const undoStep = new DeleteModel({ startIndex: model.insertIndex, endIndex });
+    pushInsertBreak(model, count) {
+        const undoStep = new DeleteModel({ startIndex: model.insertIndex, count });
         this.addToHistory(undoStep, model);
     }
     pushInsertTab(model) {
-        const undoStep = new DeleteModel({ startIndex: model.insertIndex, endIndex: model.insertIndex + 1 });
+        const undoStep = new DeleteModel({ startIndex: model.insertIndex, count: CUSTOM_ELEMENT_MARKER.length });
         this.addToHistory(undoStep, model);
     }
     pushInsertImage(model) {
-        const undoStep = new DeleteModel({ startIndex: model.insertIndex, endIndex: model.insertIndex + 1 });
+        const undoStep = new DeleteModel({ startIndex: model.insertIndex, count: CUSTOM_ELEMENT_MARKER.length });
         this.addToHistory(undoStep, model);
     }
     pushInsertLink(model) {
-        const undoStep = new DeleteModel({ startIndex: model.insertIndex, endIndex: model.endIndex });
+        const undoStep = new DeleteModel({ startIndex: model.insertIndex, count: model.linkDataModel.text.length });
         this.addToHistory(undoStep, model);
     }
     pushInsertTable(model) {
-        const undoStep = new DeleteModel({ startIndex: model.insertIndex, endIndex: model.insertIndex + model.content.length });
+        const undoStep = new DeleteModel({ startIndex: model.insertIndex, count: model.content.length });
         this.addToHistory(undoStep, model);
     }
     pushInsertStyledText(insertIndex, text, style) {
         const redoStep = new InsertStyledTextModel({ insertIndex, text, textStyle: style });
-        const undoStep = new DeleteModel({ startIndex: insertIndex, endIndex: insertIndex + text.length });
+        const undoStep = new DeleteModel({ startIndex: insertIndex, count: text.length });
         this.addToHistory(undoStep, redoStep);
     }
     pushDelete(model) {
-        const redoStep = new DeleteModel({ startIndex: model.startIndex, endIndex: model.startIndex + model.text.length });
+        const redoStep = new DeleteModel({ startIndex: model.startIndex, count: model.text.length });
         this.addToHistory(model, redoStep);
     }
-    pushApplyTextStyle(startIndex, endIndex, style, formats) {
+    pushApplyTextStyle(startIndex, endIndex, style, formats, linkFormats) {
         const redoStep = new ApplyTextStyleModel({ startIndex, endIndex, textStyle: style });
-        const undoStep = new RestoreTextStylesModel({ formats });
+        const undoStep = new RestoreTextStylesModel({ formats, linkFormats });
         this.addToHistory(undoStep, redoStep);
     }
     pushApplyParagraphStyle(startIndex, endIndex, style, paragraphs) {
@@ -1803,6 +1824,28 @@ class OperationHistory {
         }
         this.editorService.historyInfo = new OperationsHistoryInfoModel(this.step, this.storage.length - 1);
     }
+    getDeleteDataForInsertParagraphs(content, model, paragraphs) {
+        const currentParagraph = paragraphs
+            .slice()
+            .sort((a, b) => a.insertIndex - b.insertIndex)
+            .find(x => x.insertIndex >= model.insertIndex);
+        const previousParagraph = paragraphs
+            .slice()
+            .sort((a, b) => b.insertIndex - a.insertIndex)
+            .find(x => x.insertIndex < currentParagraph.insertIndex);
+        let startIndex = model.insertIndex;
+        let count = content.length;
+        if (model.insertIndex === 0 || previousParagraph?.insertIndex === model.insertIndex - 1) {
+            count++;
+        }
+        else if (currentParagraph.insertIndex === model.insertIndex) {
+            startIndex++;
+        }
+        else {
+            count = count + 2;
+        }
+        return { startIndex, count };
+    }
 }
 
 class ParagraphModel {
@@ -1944,46 +1987,67 @@ class PositionHelper {
         };
     }
     /**
-     * Converts pixel position to screen position
+     * Calculates the paragraph and line index based on the given Y position.
      **/
-    static pixelToScreen(session, x, y, scrollerPosition) {
-        const displayData = session.displayData;
-        const scrollTop = session.scrollTop;
-        let yPos = y + scrollTop - scrollerPosition.top;
-        let paragraphIndex = displayData.paragraphs.findIndex(paragraph => paragraph.paragraphSettings.distanceFromTop > yPos);
+    static getParagraphAndLineIndexFromYPosition(session, yPosition, top) {
+        const { displayData, scrollTop } = session;
+        yPosition += scrollTop - top;
+        let paragraphIndex = displayData.paragraphs.findIndex(paragraph => paragraph.paragraphSettings.distanceFromTop > yPosition);
         if (paragraphIndex < 0) {
             paragraphIndex = displayData.paragraphs.length - 1;
         }
         else if (paragraphIndex > 0) {
             paragraphIndex--;
         }
-        const paragraphSettings = displayData.getParagraphSettings(paragraphIndex);
-        yPos -= paragraphSettings.distanceFromTop;
+        const paragraphSettings = displayData.paragraphs[paragraphIndex].paragraphSettings;
+        yPosition -= paragraphSettings.distanceFromTop;
         let lineIndex = 0;
-        while (yPos > 0 && lineIndex < paragraphSettings.textLinesInfo.length - 1) {
-            const line = paragraphSettings.textLinesInfo[lineIndex];
-            const width = line.height + line.endPageOffset + line.offsetBefore + line.offsetAfter;
-            if (yPos <= width) {
+        while (yPosition > 0 && lineIndex < paragraphSettings.textLinesInfo.length - 1) {
+            const lineInfo = paragraphSettings.textLinesInfo[lineIndex];
+            const lineHeight = lineInfo.height + lineInfo.endPageOffset + lineInfo.offsetBefore + lineInfo.offsetAfter;
+            if (yPosition <= lineHeight) {
                 break;
             }
             lineIndex++;
-            yPos -= width;
+            yPosition -= lineHeight;
         }
+        return { paragraphIndex, lineIndex };
+    }
+    /**
+     * Maps a pixel position to a screen position using half-token width comparison.
+     */
+    static mapPixelToClosestTokenMidpoint(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
+        const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
         const line = paragraphSettings.textLinesInfo[lineIndex].screenLine;
-        let index = 0;
-        let xPos = x - scrollerPosition.left - displayData.pageMargin.left - paragraphSettings.textLinesInfo[lineIndex].paddingLeft;
+        let indexInLine = 0;
+        let relativeX = xPixel - leftOffset - session.displayData.pageMargin.left - paragraphSettings.textLinesInfo[lineIndex].paddingLeft;
         const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
         if (tokens[0].displayValue === DisplayValue.emptyLine) {
-            return new CursorParagraph(line, index);
+            return { line, indexInLine };
         }
-        while (tokens.length > index) {
-            if (xPos < tokens[index].width / 2) {
-                break;
-            }
-            xPos -= tokens[index].width;
-            index++;
+        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width / 2) {
+            relativeX -= tokens[indexInLine].width;
+            indexInLine++;
         }
-        return new CursorParagraph(line, index);
+        return { line, indexInLine };
+    }
+    /**
+     * Maps a pixel position to a screen position using full-token width comparison.
+     */
+    static mapPixelToNextTokenBoundary(session, xPixel, paragraphIndex, lineIndex, leftOffset) {
+        const paragraphSettings = session.displayData.paragraphs[paragraphIndex].paragraphSettings;
+        const line = paragraphSettings.textLinesInfo[lineIndex].screenLine;
+        let indexInLine = 0;
+        let relativeX = xPixel - leftOffset - session.displayData.pageMargin.left - paragraphSettings.textLinesInfo[lineIndex].paddingLeft;
+        const tokens = LineWidthHelper.getParagraphLineDisplayTokens(session, paragraphIndex, lineIndex);
+        if (tokens[0].displayValue === DisplayValue.emptyLine) {
+            return { line, indexInLine };
+        }
+        while (indexInLine < tokens.length && relativeX >= tokens[indexInLine].width) {
+            relativeX -= tokens[indexInLine].width;
+            indexInLine++;
+        }
+        return { line, indexInLine };
     }
     static findLineInParagraphs(paragraphs, documentLine) {
         let index = 0;
@@ -2015,17 +2079,10 @@ class PositionHelper {
         }
         return column;
     }
-    static pixelToPage(posY, session) {
-        const pagesCount = session.displayData.getParagraphSettings(session.displayData.paragraphs.length - 1).lastPageNumber;
-        let page = 1;
-        while (page <= pagesCount) {
-            const endPagePosition = (session.displayData.pagesSpace + session.displayData.pageHeight) * page;
-            if (endPagePosition >= posY) {
-                break;
-            }
-            page++;
-        }
-        return page;
+    static pixelToPage(clientY, mainSession, mainRenderer) {
+        const positionY = clientY + mainSession.scrollTop - mainRenderer.container.getBoundingClientRect().top;
+        const height = mainSession.displayData.pagesSpace + mainSession.displayData.pageHeight;
+        return Math.floor(positionY / height) + 1;
     }
 }
 
@@ -2403,6 +2460,34 @@ class EdgeElementModel {
         }
         Object.assign(this, fields);
     }
+    isNotCopy(type, pageType) {
+        return this.edgeType === type && this.pageType === pageType && this.isOrigin;
+    }
+    isCopy(type, pageType) {
+        return this.edgeType === type && this.pageType === pageType && !this.isOrigin;
+    }
+    isWithin(start, end) {
+        return this.container.offsetTop < end && this.container.offsetTop + this.container.offsetHeight > start;
+    }
+    replace(model) {
+        const height = this.container.offsetHeight;
+        const top = this.container.offsetTop;
+        const page = this.page;
+        DomHelper.setStyle(this.container.style, 'height', `${model.container.offsetHeight}px`);
+        DomHelper.setStyle(this.container.style, 'top', `${model.container.offsetTop}px`);
+        this.page = model.page;
+        DomHelper.setStyle(model.container.style, 'height', `${height}px`);
+        DomHelper.setStyle(model.container.style, 'top', `${top}px`);
+        model.page = page;
+    }
+    substitute(model) {
+        DomHelper.setStyle(this.container.style, 'height', `${model.container.offsetHeight}px`);
+        DomHelper.setStyle(this.container.style, 'top', `${model.container.offsetTop}px`);
+        const temp = this.container;
+        this.container = model.container;
+        model.container = temp;
+        this.isOrigin = model.isOrigin;
+    }
 }
 
 var EdgeType;
@@ -2693,18 +2778,17 @@ class ParagraphHelper {
 }
 
 class TextLayer {
-    constructor(parentElement, session, editorService, renderingHelper = RenderingHelper) {
+    constructor(parentElement, session, renderingHelper = RenderingHelper) {
+        this.parentElement = parentElement;
         this.session = session;
-        this.editorService = editorService;
         this.renderingHelper = renderingHelper;
         this.edgeElements = [];
-        this.edgeEditingPage = null;
         this.pagesCountChangedHandler = (event) => {
             this.lines.setSizes(event.pagesCount, event.pageHeight);
         };
         this.element = document.createElement('div');
         this.element.className = 'noder-layer noder-text-layer';
-        parentElement.appendChild(this.element);
+        this.parentElement.appendChild(this.element);
         this.lines = new Lines(this.element);
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.element.style.width = `${this.session.displayData.pageWidth}px`;
@@ -2712,31 +2796,73 @@ class TextLayer {
     destroy() {
         this.session.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
+    updateEdge(type, pageType) {
+        const pages = [];
+        let index = this.edgeElements.findIndex(x => x.isCopy(type, pageType));
+        while (index !== -1) {
+            pages.push(this.edgeElements[index].page);
+            DomHelper.removeElement(this.edgeElements[index].container);
+            this.edgeElements.splice(index, 1);
+            index = this.edgeElements.findIndex(x => x.isCopy(type, pageType));
+        }
+        const start = -this.element.offsetTop;
+        const end = start + this.parentElement.clientHeight;
+        for (let page of pages) {
+            if (type === EdgeType.Header) {
+                this.renderPageHeaderComponent(page, start, end);
+            }
+            else {
+                this.renderPageFooterComponent(page, start, end);
+            }
+        }
+        let origin = this.edgeElements.find(x => x.isNotCopy(type, pageType));
+        if (origin) {
+            const edge = this.session.customComponents.edges.getComponentByPageType(pageType, type);
+            const height = this.session.customComponents.edges.getComponentHeight(edge.instance);
+            const topOffset = type === EdgeType.Footer ? this.session.displayData.pageHeight - height : 0;
+            const edgeTop = this.getEdgeTop(topOffset, origin.page);
+            DomHelper.setStyle(origin.container.style, 'height', `${height}px`);
+            DomHelper.setStyle(origin.container.style, 'top', `${edgeTop}px`);
+        }
+    }
     updateEdges(config) {
         DomHelper.translate(this.element, 0, -config.scrollTop);
         while (this.edgeElements.length) {
-            const removedEl = this.edgeElements.pop();
-            DomHelper.removeElement(removedEl.element);
-        }
-        this.renderPagesEdgeComponents(config.pages);
-    }
-    edgeEditingPageUpdated(page) {
-        const oldEditingPage = this.edgeEditingPage;
-        this.edgeEditingPage = page;
-        this.removeEdgeComponents([page ?? oldEditingPage]);
-        this.renderPagesEdgeComponents([page ?? oldEditingPage]);
-    }
-    updateEdgeByLocation(updatedPageType) {
-        DomHelper.translate(this.element, 0, -this.config.scrollTop);
-        let pagesToRender = [];
-        for (let edgeElement of this.edgeElements) {
-            if (edgeElement.pageType !== updatedPageType || pagesToRender.includes(edgeElement.page)) {
-                continue;
+            const removed = this.edgeElements.pop();
+            DomHelper.removeElement(removed.container);
+        }
+        const start = -this.element.offsetTop;
+        const end = start + this.parentElement.clientHeight;
+        for (let page of config.pages) {
+            this.renderPageHeaderComponent(page, start, end);
+            this.renderPageFooterComponent(page, start, end);
+        }
+    }
+    scrollEdges(config) {
+        DomHelper.translate(this.element, 0, -config.scrollTop);
+        const start = -this.element.offsetTop;
+        const end = start + this.parentElement.clientHeight;
+        let removeIndex = this.edgeElements.findIndex(x => !x.isWithin(start, end));
+        while (removeIndex !== -1) {
+            const element = this.edgeElements[removeIndex];
+            if (element.isOrigin) {
+                const copy = this.edgeElements.find(x => x.isCopy(element.edgeType, element.pageType));
+                if (copy) {
+                    copy.substitute(element);
+                }
+            }
+            DomHelper.removeElement(this.edgeElements[removeIndex].container);
+            this.edgeElements.splice(removeIndex, 1);
+            removeIndex = this.edgeElements.findIndex(x => !x.isWithin(start, end));
+        }
+        for (let page of config.pages) {
+            if (!this.edgeElements.some(x => x.page === page && x.edgeType === EdgeType.Header)) {
+                this.renderPageHeaderComponent(page, start, end);
+            }
+            if (!this.edgeElements.some(x => x.page === page && x.edgeType === EdgeType.Footer)) {
+                this.renderPageFooterComponent(page, start, end);
             }
-            pagesToRender.push(edgeElement.page);
         }
-        this.removeEdgeComponents(pagesToRender);
-        this.renderPagesEdgeComponents(pagesToRender);
     }
     updateLines(config) {
         DomHelper.translate(this.element, 0, -config.scrollTop);
@@ -2746,13 +2872,6 @@ class TextLayer {
         }
         this.lines.push(this.renderTextParagraph(config.contentRange));
     }
-    scrollPages(config) {
-        DomHelper.translate(this.element, 0, -config.scrollTop);
-        const removedPages = this.config.pages.filter(x => !config.pages.includes(x));
-        this.removeEdgeComponents(removedPages);
-        const newPages = config.pages.filter(x => !this.config.pages.includes(x));
-        this.renderPagesEdgeComponents(newPages);
-    }
     scrollLines(config) {
         const oldConfig = this.config;
         this.config = config;
@@ -2780,56 +2899,50 @@ class TextLayer {
             this.lines.push(lines);
         }
     }
-    getEdgeParagraphTop(topOffset, page) {
-        const paragraphTop = this.session.displayData.pagesSpace + topOffset;
-        return paragraphTop + (page - 1) * (this.session.displayData.pageHeight + this.session.displayData.pagesSpace);
-    }
     getParagraphTop(row) {
         return this.session.displayData.getDistanceFromTop(row);
     }
-    renderPagesEdgeComponents(pages) {
-        const displayData = this.session.displayData;
-        for (let page of pages) {
-            const header = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Header);
-            const headerHeight = this.session.customComponents.edges.getComponentHeight(page, EdgeType.Header);
-            if (header) {
-                this.renderEdgeComponent(header, headerHeight, page);
+    getEdgeTop(topOffset, page) {
+        const paragraphTop = this.session.displayData.pagesSpace + topOffset;
+        return paragraphTop + (page - 1) * (this.session.displayData.pageHeight + this.session.displayData.pagesSpace);
+    }
+    renderPageHeaderComponent(page, start, end) {
+        const header = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Header);
+        if (header) {
+            const height = this.session.customComponents.edges.getComponentHeight(header.instance);
+            const edgeTop = this.getEdgeTop(0, page);
+            if (edgeTop > end || edgeTop + height < start) {
+                return;
             }
-            const footer = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Footer);
-            const footerHeight = this.session.customComponents.edges.getComponentHeight(page, EdgeType.Footer);
-            if (footer) {
-                const topOffset = displayData.pageHeight - footerHeight;
-                this.renderEdgeComponent(footer, footerHeight, page, topOffset);
+            this.renderEdgeComponent(header, height, page, edgeTop);
+        }
+    }
+    renderPageFooterComponent(page, start, end) {
+        const footer = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Footer);
+        if (footer) {
+            const height = this.session.customComponents.edges.getComponentHeight(footer.instance);
+            const topOffset = this.session.displayData.pageHeight - height;
+            const edgeTop = this.getEdgeTop(topOffset, page);
+            if (edgeTop > end || edgeTop + height < start) {
+                return;
             }
+            this.renderEdgeComponent(footer, height, page, edgeTop);
         }
     }
-    renderEdgeComponent(edgeComponent, edgeHeight, page, topOffset = 0) {
+    renderEdgeComponent(component, edgeHeight, page, edgeTop) {
         const container = RenderingHelper.createDivContainer('noder-edge-group');
-        let paragraphTop = this.getEdgeParagraphTop(topOffset, page);
         DomHelper.setStyle(container.style, 'height', `${edgeHeight}px`);
-        DomHelper.setStyle(container.style, 'top', `${paragraphTop}px`);
-        const componentElement = edgeComponent.hostView.rootNodes[0];
-        if (this.edgeEditingPage === page) {
-            componentElement.setAttribute('data-session-id', `${edgeComponent.instance.sessionId}`);
-            container.appendChild(componentElement);
-            this.element.appendChild(container);
-            this.edgeElements.push(new EdgeElementModel({ page, element: container, pageType: edgeComponent.instance.model.pageType }));
-            return;
-        }
-        const componentCopy = componentElement.cloneNode(true);
-        componentCopy.setAttribute('data-session-id', `${edgeComponent.instance.sessionId}`);
-        container.appendChild(componentCopy);
+        DomHelper.setStyle(container.style, 'top', `${edgeTop}px`);
+        const componentElement = component.hostView.rootNodes[0];
+        const edge = component.instance;
+        const isOrigin = !this.edgeElements.some(x => x.isNotCopy(edge.type, edge.model.pageType));
+        const element = isOrigin ? componentElement : componentElement.cloneNode(true);
+        container.appendChild(element);
         this.element.appendChild(container);
-        this.edgeElements.push(new EdgeElementModel({ page, element: container, pageType: edgeComponent.instance.model.pageType }));
-        this.editorService.edgeElementCopyUpdated(componentCopy, page);
-    }
-    removeEdgeComponents(removedPages) {
-        let removeIndex = this.edgeElements.findIndex(x => removedPages.includes(x.page));
-        while (removeIndex !== -1) {
-            const removedElement = this.edgeElements[removeIndex];
-            DomHelper.removeElement(removedElement.element);
-            this.edgeElements.splice(removeIndex, 1);
-            removeIndex = this.edgeElements.findIndex(x => removedPages.includes(x.page));
+        const model = new EdgeElementModel({ page, container, pageType: edge.model.pageType, edgeType: edge.type, isOrigin });
+        this.edgeElements.push(model);
+        if (!isOrigin) {
+            element.onmouseenter = () => model.replace(this.edgeElements.find(x => x.isNotCopy(model.edgeType, model.pageType)));
         }
     }
     renderTextParagraph(rowsDistance) {
@@ -2845,7 +2958,7 @@ class TextLayer {
             DomHelper.setStyle(paragraphCell.element.style, 'padding-left', `${this.session.displayData.pageMargin.left}px`);
             DomHelper.setStyle(paragraphCell.element.style, 'padding-right', `${this.session.displayData.pageMargin.right}px`);
             const paragraphSettings = this.session.displayData.getParagraphSettings(row);
-            if (paragraphSettings?.numberingData.numberingId !== null) {
+            if (paragraphSettings.numberingData.numberingId !== null) {
                 const numberingElement = this.renderingHelper.renderNumberingMarker(paragraphSettings, this.element, this.session.generalProperties.scalingRatio);
                 numberingElement.className = 'numberingMarker';
                 paragraphCell.element.appendChild(numberingElement);
@@ -2863,10 +2976,7 @@ class TextLayer {
         parent.appendChild(linesContainerElement);
         const startIndex = this.session.displayData.positionToIndex({ row, column: 0 });
         const endIndex = this.session.displayData.positionToIndex({ row: row + 1, column: 0 }) - 1;
-        const combinedFormats = FormatStyleHelper.combineSection(this.session.model.formats, this.session.model.links, startIndex, endIndex).map(x => new FormatExtModel({
-            ...x,
-            content: this.session.model.content.substring(x.startIndex, x.endIndex + 1)
-        }));
+        const combinedFormats = FormatStyleHelper.combineSection(this.session.model.formats, this.session.model.links, startIndex, endIndex).map(x => new FormatExtModel({ ...x, content: this.session.model.content.substring(x.startIndex, x.endIndex + 1) }));
         const splits = this.session.displayData.paragraphs[row].nextLineIndexes;
         if (splits?.length) {
             const distance = new DistanceModel({ start: startIndex, end: endIndex });
@@ -2891,11 +3001,11 @@ class PrintTextLayer extends TextLayer {
 }
 
 class PrintRenderer {
-    constructor(mainSession, editorService) {
+    constructor(mainSession) {
         this.mainSession = mainSession;
         this.pagesCount = Math.round((mainSession.displayData.pagesSpace * 2 + mainSession.displayData.allPagesHeight) / mainSession.displayData.minHeight);
         this.createContent();
-        this.createLayers(editorService);
+        this.createLayers();
     }
     renderPrintDocument() {
         const layerConfig = this.computeLayerConfig();
@@ -2924,8 +3034,8 @@ class PrintRenderer {
         this.content = document.createElement('div');
         this.content.className = 'noder-content print';
     }
-    createLayers(editorService) {
-        this.textLayer = new PrintTextLayer(this.content, this.mainSession, editorService, PrintRenderingHelper);
+    createLayers() {
+        this.textLayer = new PrintTextLayer(this.content, this.mainSession, PrintRenderingHelper);
         this.pagesLayer = new PrintPagesLayer(this.content, this.mainSession);
     }
     createDocumentHtml(layerConfig) {
@@ -2954,9 +3064,9 @@ class PrintRenderer {
 }
 
 class PrintHelper extends RenderingHelper {
-    static printDocument(session, editorService) {
+    static printDocument(session) {
         this.removePrintContainers();
-        const renderer = new PrintRenderer(session, editorService);
+        const renderer = new PrintRenderer(session);
         renderer.renderPrintDocument();
         this.printDocumentHtml(renderer.documentHtml);
     }
@@ -3236,7 +3346,7 @@ class SaveCommandsHelper {
         return new CommandModel({ commandType: CommandType.RemoveNumberings, removeNumberings, targets });
     }
     static getRestoreNumberingsCommand(restoreNumberings, targets) {
-        return new CommandModel({ commandType: CommandType.AddNumbering, restoreNumberings, targets });
+        return new CommandModel({ commandType: CommandType.RestoreNumberings, restoreNumberings, targets });
     }
     static getApplyImageStyleCommand(height, width, insertIndex, targets) {
         const applyImageStyle = new ApplyImageStyleModel({ height, width, insertIndex });
@@ -3250,8 +3360,8 @@ class SaveCommandsHelper {
         const applyTextStyle = new ApplyTextStyleModel({ startIndex, endIndex, textStyle });
         return new CommandModel({ commandType: CommandType.ApplyTextStyle, applyTextStyle, targets });
     }
-    static getDeleteCommand(startIndex, endIndex, targets) {
-        const deleteModel = new DeleteModel({ startIndex, endIndex });
+    static getDeleteCommand(startIndex, count, targets) {
+        const deleteModel = new DeleteModel({ startIndex, count });
         return new CommandModel({ commandType: CommandType.Delete, delete: deleteModel, targets });
     }
     static getInsertTextCommand(text, insertIndex, targets) {
@@ -3318,7 +3428,8 @@ class SaveCommandsHelper {
             paragraphs: restoreModel.paragraphs,
             tables: restoreModel.tables,
             tabs: restoreModel.tabs,
-            text: restoreModel.text
+            text: restoreModel.text,
+            links: restoreModel.links
         });
         return new CommandModel({ commandType: CommandType.Restore, restore, targets });
     }
@@ -3997,7 +4108,7 @@ class Editor {
         this.session.applyToolbarStyles();
         this.search = new Search();
         this.search.set({ wrap: true });
-        this.subscriptions.push(this.searchOptionSubscription(), this.replaceSubscription(), this.setTextStylesSubscription(), this.setParagraphStylesSubscription(), this.changeElementStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.removeNumberingsSubscription(), this.setImageStyleSubscription(), this.createCustomComponentSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTextSubscription(), this.endMousePressSubscription(), this.disableSelectionSubscription(), this.changedTableSizeSubscription(), this.insertTableRowsSubscription(), this.insertTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableColumnsSubscription(), this.removedImageSubscription(), this.resizeTableColumnsSubscription(), this.insertTableSubscription(), this.rendererUpdatedSubscription(), this.edgeElementCopyUpdatedSubscription(), this.changedEdgeHeightSubscription(), this.undoSubscription(), this.redoSubscription(), this.clipboardDataSubscription(), this.cutSelectedSubscription(), this.copySelectedSubscription(), this.pasteFromClipboardSubscription(), this.selectAllSubscription(), this.removeSelectedSubscription(), this.printSubscription(), this.updateEdgeSubscription(), this.blurCustomComponentSubscription());
+        this.subscriptions.push(this.searchOptionSubscription(), this.replaceSubscription(), this.setTextStylesSubscription(), this.setParagraphStylesSubscription(), this.changeElementStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.removeNumberingsSubscription(), this.setImageStyleSubscription(), this.createCustomComponentSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTextSubscription(), this.endMousePressSubscription(), this.disableSelectionSubscription(), this.changedTableSizeSubscription(), this.changedEdgeSizeSubscription(), this.imageLoadedSubscription(), this.changedEdgeSubscription(), this.insertTableRowsSubscription(), this.insertTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableColumnsSubscription(), this.removedImageSubscription(), this.resizeTableColumnsSubscription(), this.insertTableSubscription(), this.undoSubscription(), this.redoSubscription(), this.clipboardDataSubscription(), this.cutSelectedSubscription(), this.copySelectedSubscription(), this.pasteFromClipboardSubscription(), this.selectAllSubscription(), this.removeSelectedSubscription(), this.printSubscription(), this.updateEdgeSubscription(), this.blurCustomComponentSubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -4161,7 +4272,7 @@ class Editor {
             this.replaceBy(new ReplaceModel({ insertParagraph }));
             return;
         }
-        this.saveInsertParagraphToHistory(insertParagraph);
+        this.saveInsertParagraphToHistory(insertTable.content, insertParagraph);
         const endPoint = this.session.insertParagraph(this.selection.cursor, insertParagraph);
         let lastRow = this.selection.cursor.row === endPoint.row ? endPoint.row : Infinity;
         this.renderer.updateLines(this.selection.cursor.row, lastRow);
@@ -4182,7 +4293,7 @@ class Editor {
     }
     replaceBy(model) {
         const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
-        model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, endIndex: partIndexes.endIndex });
+        model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, count: partIndexes.endIndex - partIndexes.startIndex + 1 });
         this.saveReplaceToHistory(this.selection.range, model);
         this.removeCustomElementsData();
         const endPosition = this.session.replace(model);
@@ -4383,8 +4494,8 @@ class Editor {
             command = SaveCommandsHelper.getInsertParagraphCommand(operation, this.targets);
         }
         else if (operation instanceof DeleteModel) {
-            this.session.removeByDocumentIndexes(operation.startIndex, operation.endIndex);
-            command = SaveCommandsHelper.getDeleteCommand(operation.startIndex, operation.endIndex, this.targets);
+            this.session.removeByDocumentIndexes(operation.startIndex, operation.startIndex + operation.count);
+            command = SaveCommandsHelper.getDeleteCommand(operation.startIndex, operation.count, this.targets);
         }
         else if (operation instanceof InsertStyledTextModel) {
             this.session.insertTextByDocumentIndex(operation.insertIndex, operation.text, new TextStyleModel(operation.textStyle));
@@ -4409,7 +4520,7 @@ class Editor {
         }
         else if (operation instanceof RestoreTextStylesModel) {
             const deepCopy = structuredClone(operation);
-            this.session.restoreTextStyles(deepCopy.formats);
+            this.session.restoreTextStyles(deepCopy.formats, deepCopy.linkFormats);
             command = SaveCommandsHelper.getRestoreTextStylesCommand(deepCopy.formats, this.targets);
         }
         else if (operation instanceof RestoreParagraphStylesModel) {
@@ -4437,6 +4548,10 @@ class Editor {
             this.session.insertImageByDocumentIndex(operation);
             command = SaveCommandsHelper.getInsertImageCommand(operation, this.targets);
         }
+        else if (operation instanceof InsertLinkModel) {
+            this.session.insertLinkByDocumentIndex(operation);
+            command = SaveCommandsHelper.getInsertLinkOperation(operation, this.targets);
+        }
         else if (operation instanceof ApplyImageStyleModel) {
             this.session.applyImageStyle(operation);
             const { height, width, insertIndex } = operation;
@@ -4506,18 +4621,18 @@ class Editor {
     }
     saveRemoveToHistory(range) {
         const restoreModel = this.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
-        const endIndex = restoreModel.endIndex;
+        const count = restoreModel.endIndex - restoreModel.startIndex + 1;
         restoreModel.endIndex = restoreModel.startIndex; // this is to restore in position without deleting/replacing anything in range
         this.history.pushDelete(restoreModel);
-        this.commandsService.createCommand(SaveCommandsHelper.getDeleteCommand(restoreModel.startIndex, endIndex, this.targets));
+        this.commandsService.createCommand(SaveCommandsHelper.getDeleteCommand(restoreModel.startIndex, count, this.targets));
     }
     saveInsertTextToHistory(paragraph, indexInParagraph, text) {
         const index = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, paragraph, indexInParagraph);
         this.history.pushInsertText(index, text);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertTextCommand(text, index, this.targets));
     }
-    saveInsertParagraphToHistory(model) {
-        this.history.pushInsertParagraph(model, this.session.model.paragraphs);
+    saveInsertParagraphToHistory(content, model) {
+        this.history.pushInsertParagraph(content, model, this.session.model.paragraphs);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertParagraphCommand(model, this.targets));
     }
     saveInsertStyledTextToHistory(paragraph, indexInParagraph, text, style) {
@@ -4533,8 +4648,8 @@ class Editor {
         model.isOnNewParagraph =
             model.breakType === BreakTypes.Page &&
                 BreakHelper.getBreakType(this.session.model, CUSTOM_ELEMENT_MARKER, model.insertIndex - 1) !== BreakTypes.Page;
-        const endIndex = model.isOnNewParagraph ? model.insertIndex + NEW_LINE_MARKUP.length + 1 : model.insertIndex + 1;
-        this.history.pushInsertBreak(model, endIndex);
+        const count = model.isOnNewParagraph ? NEW_LINE_MARKUP.length + 1 : 1;
+        this.history.pushInsertBreak(model, count);
         this.commandsService.createCommand(SaveCommandsHelper.getInsertBreakCommand(model, this.targets));
     }
     saveInsertTabToHistory(model) {
@@ -4555,7 +4670,8 @@ class Editor {
     }
     saveApplyTextStyleToHistory(startIndex, endIndex, textStyle) {
         const formats = FormatHelper.sliceSection(this.session.model.formats, startIndex, endIndex);
-        this.history.pushApplyTextStyle(startIndex, endIndex, textStyle, formats);
+        const linkFormats = LinkHelper.sliceFormats(this.session.model.links, startIndex, endIndex);
+        this.history.pushApplyTextStyle(startIndex, endIndex, textStyle, formats, linkFormats);
         this.commandsService.createCommand(SaveCommandsHelper.getApplyTextStyleCommand(startIndex, endIndex, textStyle, this.targets));
     }
     saveApplyParagraphStyleToHistory(startIndex, endIndex, paragraphStyle) {
@@ -4592,7 +4708,14 @@ class Editor {
     }
     saveReplaceToHistory(range, model) {
         const restoreModel = this.createRestoreFromSlice(range.start.row, range.start.column, range.end.row, range.end.column);
-        restoreModel.endIndex = restoreModel.startIndex + (model.insertText?.text.length ?? 1); // this is to restore in range with deleting/replacing content within
+        if (model.insertParagraph) {
+            const { startIndex, count } = this.history.getDeleteDataForInsertParagraphs(ContentHelper.getContentFromInsertParagraph(model.insertParagraph), model.insertParagraph, this.session.model.paragraphs);
+            restoreModel.startIndex = startIndex;
+            restoreModel.endIndex = startIndex + count - 1;
+        }
+        else {
+            restoreModel.endIndex = restoreModel.startIndex + (model.insertText?.text.length ?? 1); // this is to restore in range with deleting/replacing content within
+        }
         this.history.pushReplace(restoreModel, model);
         this.commandsService.createCommand(SaveCommandsHelper.getReplaceCommand(model, this.targets));
     }
@@ -4604,11 +4727,11 @@ class Editor {
         const paragraphs = IndexedElementHelper.sliceSection(this.session.model.paragraphs, startIndex, endIndex).map(x => new ParagraphModel(x));
         const images = IndexedElementHelper.sliceSection(this.session.model.images, startIndex, endIndex).map(x => new ImageModel(x));
         const tables = IndexedElementHelper.sliceSection(this.session.model.tables, startIndex, endIndex).map(x => new TableModel(x));
-        const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, guid: '' }));
+        const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).map(x => new ElementModel({ ...x, id: 0, guid: '' }));
         const breaks = IndexedElementHelper.sliceSection(this.session.model.breaks, startIndex, endIndex).map(x => new BreakModel(x));
         const tabs = IndexedElementHelper.sliceSection(this.session.model.tabs, startIndex, endIndex).map(x => new TabModel(x));
         const links = LinkHelper.sliceSection(this.session.model.links, startIndex, endIndex).map(x => new LinkModel(x));
-        return new RestoreModel({ startIndex, endIndex, text, formats, paragraphs, images, tables, elements, breaks, tabs, links: links });
+        return new RestoreModel({ startIndex, endIndex, text, formats, paragraphs, images, tables, elements, breaks, tabs, links });
     }
     createCustomElement(data) {
         const insertIndex = ContentHelper.paragraphToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start.row, this.selection.range.start.column);
@@ -4703,8 +4826,8 @@ class Editor {
         this.renderer.showCursor();
     }
     onMouseClick(event) {
-        const customElement = this.setCurrentSession(event.clientY, event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName) {
+        const customElement = this.setCurrentSession(event.target);
+        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
             this.focusCustomComponent(customElement);
         }
         else {
@@ -4712,8 +4835,8 @@ class Editor {
         }
     }
     onLeftClick(event) {
-        const customElement = this.setCurrentSession(event.clientY, event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName) {
+        const customElement = this.setCurrentSession(event.target);
+        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
             this.focusCustomComponent(customElement);
             return;
         }
@@ -4721,14 +4844,14 @@ class Editor {
         if (!this.textInput.isFocused) {
             this.textInput.input.focus();
         }
-        const position = this.renderer.screenToTextCoordinates(event.clientX, event.clientY);
+        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         if (event.shiftKey) {
             this.selection.moveSelection(position);
         }
         else if (event.ctrlKey) {
-            const linkModel = this.session.getLinkModel(position);
-            if (linkModel) {
-                window.open(linkModel.link);
+            const link = this.getLinkModel(event);
+            if (link) {
+                window.open(link.link);
                 event.preventDefault();
                 return;
             }
@@ -4741,17 +4864,11 @@ class Editor {
         this.mouseHandler.startMousePress(this);
     }
     onDoubleClick(event) {
-        let isStartEditEdge = false;
+        const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
         const customElement = this.getCustomElement(event.target);
         if (customElement) {
             const elementSessionId = +customElement.attributes.getNamedItem('data-session-id').value;
-            let clickedPage = null;
-            const isParentEdge = this.isParentEdge(customElement);
-            if (customElement.tagName === this.edgeElementTagName || (isParentEdge && !this.regulatorService.edgeEditingPage)) {
-                clickedPage = this.getClickedPage(event.clientY);
-                isStartEditEdge = !this.regulatorService.edgeEditingPage;
-            }
-            this.regulatorService.setCustomSessionAsCurrent(elementSessionId, clickedPage);
+            this.regulatorService.setCustomSessionAsCurrent(elementSessionId);
         }
         else {
             this.regulatorService.setMainSessionAsCurrent();
@@ -4762,8 +4879,8 @@ class Editor {
         }
         this.blurCustomComponent();
         event.preventDefault();
-        const position = this.renderer.screenToTextCoordinates(event.clientX, event.clientY);
-        if (isStartEditEdge) {
+        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
+        if (!isEdgeEdit && this.mainSession.customComponents.edges.isEdit) {
             this.selection.placeCursor(position);
         }
         else {
@@ -4773,22 +4890,22 @@ class Editor {
         this.onSelectionChange();
     }
     onTripleClick(event) {
-        const customElement = this.setCurrentSession(event.clientY, event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName) {
+        const customElement = this.setCurrentSession(event.target);
+        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
             this.focusCustomComponent(customElement);
             return;
         }
         this.blurCustomComponent();
         event.preventDefault();
-        const position = this.renderer.screenToTextCoordinates(event.clientX, event.clientY);
+        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         const start = new CursorParagraph(position.row, 0);
         const end = new CursorParagraph(position.row, this.session.displayData.getParagraphContent(position.row).length);
         this.selection.placeSelection(start, end);
         this.onSelectionChange();
     }
     onQuadClick(event) {
-        const customElement = this.setCurrentSession(event.clientY, event.target);
-        if (customElement && customElement.tagName !== this.tableCellTagName) {
+        const customElement = this.setCurrentSession(event.target);
+        if (customElement && customElement.tagName !== this.tableCellTagName && customElement.tagName !== this.edgeElementTagName) {
             this.focusCustomComponent(customElement);
             return;
         }
@@ -4808,44 +4925,33 @@ class Editor {
         event.stopPropagation();
         event.preventDefault();
     }
-    setCurrentSession(clickPositionY, element) {
+    getLinkModel(event) {
+        const isInsideEdge = this.isInsideEdge(event.target);
+        const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
+        if (!isInsideEdge || isEdgeEdit) {
+            const position = this.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY);
+            return this.session.getLinkModel(position);
+        }
+        const customElement = this.getCustomElement(event.target);
+        const sessionId = +customElement.attributes.getNamedItem('data-session-id').value;
+        const session = this.regulatorService.getSessionModel(sessionId);
+        const position = session.renderer.screenToTextCoordinatesUsingBoundary(event.clientX, event.clientY, customElement.getBoundingClientRect());
+        return session.session.getLinkModel(position);
+    }
+    setCurrentSession(element) {
         const customElement = this.getCustomElement(element);
-        this.blurEdgeCustomComponents(customElement);
-        if (!customElement) {
+        const isInsideEdge = this.isInsideEdge(customElement);
+        const isEdgeEdit = this.mainSession.customComponents.edges.isEdit;
+        if (!customElement || (!isEdgeEdit && isInsideEdge)) {
             this.regulatorService.setMainSessionAsCurrent();
+            return this.customElementTagNames.includes(customElement?.tagName) ? customElement : null;
         }
-        else {
-            const elementSessionId = +customElement.attributes.getNamedItem('data-session-id').value;
-            const isEdgeEditing = this.regulatorService.edgeEditingPage;
-            if (customElement.tagName === this.edgeElementTagName) {
-                if (isEdgeEditing) {
-                    const clickedPage = this.getClickedPage(clickPositionY);
-                    this.regulatorService.setCustomSessionAsCurrent(elementSessionId, clickedPage);
-                }
-                else {
-                    this.regulatorService.setMainSessionAsCurrent();
-                }
-            }
-            else {
-                const isParentEdge = this.isParentEdge(customElement);
-                if (!isParentEdge) {
-                    this.regulatorService.setCustomSessionAsCurrent(elementSessionId);
-                    return customElement;
-                }
-                if (isEdgeEditing) {
-                    const clickedPage = this.getClickedPage(clickPositionY);
-                    this.regulatorService.setCustomSessionAsCurrent(elementSessionId, clickedPage);
-                    return customElement;
-                }
-                else {
-                    this.regulatorService.setMainSessionAsCurrent();
-                }
-            }
-        }
-        return null;
+        const elementSessionId = +customElement.attributes.getNamedItem('data-session-id').value;
+        this.regulatorService.setCustomSessionAsCurrent(elementSessionId);
+        return customElement.tagName !== this.edgeElementTagName ? customElement : null;
     }
     getCustomElement(element) {
-        if (element.tagName === this.parentTagName) {
+        if (!element || element.tagName === this.parentTagName) {
             return null;
         }
         else if (this.customElementTagNames.includes(element.tagName)) {
@@ -4855,21 +4961,20 @@ class Editor {
             return this.getCustomElement(element.parentElement);
         }
     }
-    isParentEdge(element) {
-        if (element.tagName === this.parentTagName) {
-            return false;
+    isInsideEdge(element) {
+        return !!this.getParentEdge(element);
+    }
+    getParentEdge(element) {
+        if (!element || element.tagName === this.parentTagName) {
+            return null;
         }
         else if (element.tagName === this.edgeElementTagName) {
-            return true;
+            return element;
         }
         else {
-            return this.isParentEdge(element.parentElement);
+            return this.getParentEdge(element.parentElement);
         }
     }
-    getClickedPage(mousePosition) {
-        const positionY = mousePosition + this.mainSession.scrollTop - this.mainRenderer.container.getBoundingClientRect().top;
-        return PositionHelper.pixelToPage(positionY, this.mainSession);
-    }
     /**
      * Returns the string of text currently highlighted.
      */
@@ -4924,7 +5029,7 @@ class Editor {
         this.editorService.keyDown(event);
     }
     onPrint() {
-        PrintHelper.printDocument(this.mainSession, this.editorService);
+        PrintHelper.printDocument(this.mainSession);
     }
     focusCustomComponent(element) {
         const index = +element.attributes.getNamedItem('data-insert-index').value;
@@ -4947,25 +5052,6 @@ class Editor {
             this.focusedComponent = null;
         }
     }
-    blurEdgeCustomComponents(customElement) {
-        if (!this.regulatorService.edgeEditingPage || !this.focusedComponent) {
-            return;
-        }
-        if (!customElement ||
-            customElement.tagName === this.tableCellTagName ||
-            customElement.tagName === this.edgeElementTagName ||
-            +customElement.attributes.getNamedItem('data-session-id').value !== this.focusedComponent.instance.sessionId) {
-            this.blurCustomComponent();
-            return;
-        }
-        const index = +customElement.attributes.getNamedItem('data-insert-index').value;
-        const component = this.session.customComponents.images.find(x => x.instance.insertIndex === index) ??
-            this.session.customComponents.tables.find(x => x.instance.insertIndex === index) ??
-            this.session.customComponents.customElements.find(x => x.instance.insertIndex === index);
-        if (this.focusedComponent !== component) {
-            this.blurCustomComponent();
-        }
-    }
     isEmptyNumberingParagraph(paragraphIndex) {
         const currentLine = this.session.displayData.getParagraphContent(paragraphIndex);
         return currentLine.length === 0 && this.session.model.paragraphs[paragraphIndex].paragraphStyle.numberingId !== null;
@@ -5039,8 +5125,8 @@ class Editor {
         this.session.resizeTableColumns(resizeTableColumns);
         this.changedTableSize(resizeTableColumns.insertIndex, sessionId);
     }
-    onMousePressedMove(x, y) {
-        const position = this.renderer.screenToTextCoordinates(x, y);
+    onMousePressedMove(event) {
+        const position = this.renderer.screenToTextCoordinatesUsingMidpoint(event.clientX, event.clientY);
         const cursor = this.selection.cursor;
         this.selection.moveSelection(position);
         if (cursor.column !== this.selection.cursor.column || cursor.row !== this.selection.cursor.row) {
@@ -5131,6 +5217,15 @@ class Editor {
             this.changedTableSize(data.insertIndex, data.sessionId);
         });
     }
+    changedEdgeSizeSubscription() {
+        return this.editorService.changedEdgeSize$.subscribe(({ edgeType, pageType }) => this.mainSession.displayData.updatePageVerticalData(edgeType, pageType));
+    }
+    imageLoadedSubscription() {
+        return this.editorService.imageLoaded$.subscribe(sessionId => this.regulatorService.getSession(sessionId).onRendered());
+    }
+    changedEdgeSubscription() {
+        return this.editorService.changedEdge$.subscribe(sessionId => this.regulatorService.arrangeEdgeChange(sessionId));
+    }
     insertTableRowsSubscription() {
         return this.editorService.insertTableRows$.subscribe(data => {
             this.insertTableRows(data.insertIndex, data.rowsCount, data.targetIndex, data.inheritIndex, data.sessionId);
@@ -5173,29 +5268,6 @@ class Editor {
             this.focus();
         });
     }
-    rendererUpdatedSubscription() {
-        return this.editorService.rendererUpdated$.subscribe(sessionId => {
-            const edgeTarget = this.regulatorService.getEdgeTarget(sessionId);
-            if (edgeTarget !== null) {
-                this.mainRenderer.renderer.textLayer.updateEdgeByLocation(edgeTarget.edgeData.pageType);
-            }
-        });
-    }
-    edgeElementCopyUpdatedSubscription() {
-        return this.editorService.edgeElementCopyUpdated$.subscribe(data => {
-            if (this.regulatorService.edgeEditingPage !== data.page) {
-                return;
-            }
-            const edgeSessionId = +data.newElementCopy.attributes.getNamedItem('data-session-id').value;
-            const edgeSession = this.regulatorService.sessions.find(x => x.sessionId === edgeSessionId);
-            edgeSession.renderer.container = data.newElementCopy.firstChild;
-        });
-    }
-    changedEdgeHeightSubscription() {
-        return this.editorService.changedEdgeHeight$.subscribe(edgeType => {
-            this.mainSession.displayData.updatePageVerticalData(edgeType, this.regulatorService.edgeEditingPage);
-        });
-    }
     undoSubscription() {
         return this.editorService.undo$.subscribe(() => {
             this.undo();
@@ -5494,7 +5566,6 @@ class CellSessionSourceModel {
     constructor(table, cellComponent) {
         this.table = table;
         this.cellComponent = cellComponent;
-        this.edgeEditPage = null;
     }
     getTarget() {
         const tableCell = new TableCellModel({
@@ -5502,7 +5573,7 @@ class CellSessionSourceModel {
             row: this.cellComponent.rowIndex,
             column: this.cellComponent.cellIndex
         });
-        return new TargetModel({ type: TargetType.TableCell, tableCell, edgeEditPage: this.edgeEditPage });
+        return new TargetModel({ type: TargetType.TableCell, tableCell });
     }
 }
 
@@ -5783,8 +5854,7 @@ class NoderTableCellComponent {
                 return;
             }
             this._allParagraphsHeight = event.pageHeight;
-            const cellContentHeight = this._allParagraphsHeight;
-            this.heightChanged(this.rowIndex, this.cellIndex, cellContentHeight);
+            this.heightChanged(this.rowIndex, this.cellIndex, event.pageHeight);
         };
     }
     ngOnDestroy() {
@@ -5812,6 +5882,9 @@ class NoderTableCellComponent {
         this.editorService.disableSelection();
     }
     onStartResizing(event, border) {
+        if (this.session.isWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
+            return;
+        }
         event.stopPropagation();
         this.startResizing(new CellResizerParametersModel(this.columnIndex, this.rowIndex, this.cellIndex, border));
     }
@@ -5988,13 +6061,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 class TableSelection {
-    constructor(editorService, overlayService, rowMatrix, table, tableEl, sessionId) {
+    constructor(editorService, overlayService, regulatorService, rowMatrix, table, tableEl, session) {
         this.editorService = editorService;
         this.overlayService = overlayService;
+        this.regulatorService = regulatorService;
         this.rowMatrix = rowMatrix;
         this.table = table;
         this.tableEl = tableEl;
-        this.sessionId = sessionId;
+        this.session = session;
         this.editorTagName = 'APP-NOD-EDITOR';
         this.tableTagName = 'APP-NOD-TABLE';
         this.cellTagName = 'TD';
@@ -6013,6 +6087,9 @@ class TableSelection {
     }
     addTableContextMenuSubscriptions() {
         this.tableContextMenu$ = fromEvent(this.tableEl, 'contextmenu').subscribe((event) => {
+            if (this.session.isEdgeOrWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
+                return;
+            }
             event.preventDefault();
             if (this.editorService.isViewOnly) {
                 return;
@@ -6030,13 +6107,16 @@ class TableSelection {
                 canRemoveRows,
                 canRemoveColumns,
                 tableInsertIndex: this.table.insertIndex,
-                sessionId: this.sessionId
+                sessionId: this.session.sessionId
             };
             this.overlayService.open(TableOverlayMenuComponent, data, event.x, event.y);
         });
     }
     addTableMouseDownSubscriptions() {
         this.tableMouseDown$ = fromEvent(this.tableEl, 'mousedown').subscribe((event) => {
+            if (this.session.isEdgeOrWithinEdge() && !this.regulatorService.mainSession.session.customComponents.edges.isEdit) {
+                return;
+            }
             if (event.ctrlKey ||
                 event.button === MouseButton.Right ||
                 !this.canStartSelection(event.target)) {
@@ -6247,7 +6327,7 @@ class TableSelection {
                 break;
             }
             if (currentElement.tagName === this.tableTagName) {
-                canStartSelection = this.sessionId === +currentElement.getAttribute('data-session-id');
+                canStartSelection = this.session.sessionId === +currentElement.getAttribute('data-session-id');
                 break;
             }
             currentElement = currentElement.parentElement;
@@ -6372,12 +6452,13 @@ class NoderTableComponent extends BaseNoderComponent {
     set table(val) {
         this.content = val;
     }
-    constructor(componentService, editorService, el, overlayService) {
+    constructor(componentService, editorService, el, overlayService, regulatorService) {
         super();
         this.componentService = componentService;
         this.editorService = editorService;
         this.el = el;
         this.overlayService = overlayService;
+        this.regulatorService = regulatorService;
         this.rowMatrix = [];
         this.splits = [];
         this.minRowHeight = 19;
@@ -6420,7 +6501,7 @@ class NoderTableComponent extends BaseNoderComponent {
         this.createResizer();
         this.el.nativeElement.appendChild(this.resizerEl);
         this.el.nativeElement.appendChild(this.tableEl);
-        this.tableSelection = new TableSelection(this.editorService, this.overlayService, this.rowMatrix, this.table, this.tableEl, this.sessionId);
+        this.tableSelection = new TableSelection(this.editorService, this.overlayService, this.regulatorService, this.rowMatrix, this.table, this.tableEl, this.regulatorService.getSession(this.sessionId));
     }
     getCellSession(row, column) {
         return this.rowMatrix[row].cells[column].componentRef.instance.session;
@@ -6753,13 +6834,13 @@ class NoderTableComponent extends BaseNoderComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoderTableComponent, deps: [{ token: ComponentService }, { token: EditorService }, { token: i0.ElementRef }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoderTableComponent, deps: [{ token: ComponentService }, { token: EditorService }, { token: i0.ElementRef }, { token: OverlayService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoderTableComponent, selector: "app-nod-table", usesInheritance: true, ngImport: i0, template: '', isInline: true, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoderTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-table', template: '', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{position:relative}:host::ng-deep table{position:relative;border-collapse:collapse;background:transparent;empty-cells:show;border-spacing:0;overflow:visible;table-layout:fixed}:host::ng-deep td{position:relative;vertical-align:top;border:1px solid #000;margin:0;padding:0;height:inherit}:host::ng-deep .hidden-cell{display:none;cursor:not-allowed}:host::ng-deep .resizer-border{position:absolute;border:solid .5px blue;z-index:1}\n"] }]
-        }], ctorParameters: () => [{ type: ComponentService }, { type: EditorService }, { type: i0.ElementRef }, { type: OverlayService }] });
+        }], ctorParameters: () => [{ type: ComponentService }, { type: EditorService }, { type: i0.ElementRef }, { type: OverlayService }, { type: RegulatorService }] });
 
 class NumberingDataModel {
     constructor(fields) {
@@ -7312,9 +7393,9 @@ class DisplayData extends EventEmitting {
     destroy() {
         this.removeAllListeners('pagesCountChanged');
     }
-    updatePageVerticalData(edgeType, page) {
-        const pageVerticalData = PageHelper.getVerticalData(page, this.pagesVerticalData);
-        const componentHeight = this.customComponents.edges.getComponentHeight(page, edgeType);
+    updatePageVerticalData(edgeType, pageType) {
+        const pageVerticalData = this.pagesVerticalData.find(x => x.pageType === pageType);
+        const componentHeight = this.customComponents.edges.getComponentHeightByType(pageType, edgeType);
         if (edgeType === EdgeType.Header) {
             pageVerticalData.marginTop = componentHeight > this.pageMargin.top ? componentHeight : this.pageMargin.top;
         }
@@ -7924,53 +8005,57 @@ class NoderEdgeComponent extends DestroyComponent {
     get renderer() {
         return this.edgeSession.renderer;
     }
-    get height() {
+    get contentHeight() {
         return this.session.displayData.defaultVerticalData.contentHeight;
     }
     constructor(regulatorService, editorService) {
         super();
         this.regulatorService = regulatorService;
         this.editorService = editorService;
+        this.pagesCountChangedHandler = (event) => {
+            if (this._height === event.pageHeight) {
+                return;
+            }
+            this._height = event.pageHeight;
+            this.applyHeight();
+            this.editorService.changedEdgeSize(this.type, this.model.pageType);
+        };
     }
     ngOnDestroy() {
+        this.session?.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.regulatorService.removeSession(this.sessionId);
         super.ngOnDestroy();
     }
     initialize() {
         this.edgeSession = this.regulatorService.addEdgeSession(this);
         this.sessionId = this.edgeSession.sessionId;
-        this._previousHeight = this.height;
+        this.container.nativeElement.parentElement.setAttribute('data-session-id', `${this.sessionId}`);
         DomHelper.setStyle(this.container.nativeElement.style, 'overflow', 'hidden');
         DomHelper.setStyle(this.typeContainer.nativeElement.style, 'visibility', 'hidden');
-        this.setTypeContainerPosition();
-        this.editorService.rendererUpdated$.pipe(takeUntil(this.destroy$)).subscribe(x => this.rendererUpdated(x));
+        this.applyHeight();
+        this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
     enterEditMode() {
         DomHelper.addCssClass(this.container.nativeElement, this.editModeClass);
         DomHelper.setStyle(this.typeContainer.nativeElement.style, 'visibility', 'visible');
+        this.editorService.changedEdge(this.sessionId);
     }
     leaveEditMode() {
         DomHelper.removeCssClass(this.container.nativeElement, this.editModeClass);
         DomHelper.setStyle(this.typeContainer.nativeElement.style, 'visibility', 'hidden');
+        this.editorService.changedEdge(this.sessionId);
     }
-    rendererUpdated(sessionId) {
-        if (sessionId !== this.sessionId || this.height === this._previousHeight) {
-            return;
-        }
-        this.editorService.changedEdgeHeight(this.type);
-        this._previousHeight = this.height;
-        this.setTypeContainerPosition();
-    }
-    setTypeContainerPosition() {
-        const renderedEdgeHeight = this.height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : this.height;
-        DomHelper.setStyle(this.typeContainer.nativeElement.style, this.typeContainerPosition, `${renderedEdgeHeight}px`);
+    applyHeight() {
+        const maxHeight = this.generalProperties.maxEdgeHeight;
+        const height = this.contentHeight > maxHeight ? maxHeight : this.contentHeight;
+        DomHelper.setStyle(this.typeContainer.nativeElement.style, this.typeContainerPosition, `${height}px`);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoderEdgeComponent, selector: "app-nod-edge", inputs: { model: "model", generalProperties: "generalProperties", margins: "margins", width: "width", parentSessionId: "parentSessionId", type: "type" }, host: { properties: { "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "typeContainer", first: true, predicate: ["locationType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\"></div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: NoderEdgeComponent, selector: "app-nod-edge", inputs: { model: "model", generalProperties: "generalProperties", margins: "margins", width: "width", parentSessionId: "parentSessionId", type: "type" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "typeContainer", first: true, predicate: ["locationType"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\"></div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NoderEdgeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-edge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\"></div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"] }]
+            args: [{ selector: 'app-nod-edge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n    #container\n    class=\"edit-container\"></div>\n<div\n    #locationType\n    class=\"location-type\"></div>\n", styles: [":host{height:100%;width:100%;background:transparent;display:block}.location-type{position:absolute;height:auto;width:auto;font-size:9pt;color:#333;background-color:#f2f2f2;border:1px solid #838282;border-radius:2px;padding:4px;margin-left:5px;z-index:2}.header-edit-mode{border-bottom:1px dashed #838282}.footer-edit-mode{border-top:1px dashed #838282}\n"] }]
         }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }], propDecorators: { model: [{
                 type: Input
             }], generalProperties: [{
@@ -7983,9 +8068,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], type: [{
                 type: Input
-            }], sessionId: [{
-                type: HostBinding,
-                args: ['attr.data-session-id']
             }], container: [{
                 type: ViewChild,
                 args: ['container', { static: true }]
@@ -7994,31 +8076,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 args: ['locationType', { static: true }]
             }] } });
 
-class RenderChangesModel {
-    get any() {
-        return this.cursor || this.full || this.lines || this.marker || this.selection || this.scroll || this.size || this.text;
-    }
-    constructor(fields) {
-        this.cursor = false;
-        this.full = false;
-        this.lines = false;
-        this.marker = false;
-        this.selection = false;
-        this.scroll = false;
-        this.size = false;
-        this.text = false;
-        if (!fields) {
-            return;
-        }
-        Object.assign(this, fields);
-    }
-    apply(changes) {
-        for (let key of Object.keys(this)) {
-            this[key] ||= changes[key];
-        }
-    }
-}
-
 class Edges {
     constructor(componentService, headers, footers, margins, pageWidth, parentSessionId, generalProperties) {
         this.componentService = componentService;
@@ -8026,6 +8083,7 @@ class Edges {
         this.generalProperties = generalProperties;
         this.headersComponents = [];
         this.footersComponents = [];
+        this.isEdit = false;
         if (headers) {
             const headerMargins = new MarginModel({ ...margins, bottom: 0 });
             this.headersComponents = this.createComponents(headers, pageWidth, headerMargins, EdgeType.Header);
@@ -8036,6 +8094,14 @@ class Edges {
         }
         this.setEdgeNameToComponents();
     }
+    getTypeBySessionId(sessionId) {
+        let component = this.headersComponents.find(x => x.instance.sessionId === sessionId);
+        if (component) {
+            return { type: EdgeType.Header, pageType: component.instance.model.pageType };
+        }
+        component = this.footersComponents.find(x => x.instance.sessionId === sessionId);
+        return { type: EdgeType.Footer, pageType: component.instance.model.pageType };
+    }
     getComponentByPage(page, type) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
         return this.getComponent(components, page);
@@ -8049,24 +8115,32 @@ class Edges {
         if (!component) {
             return 0;
         }
-        return component.instance.height > this.generalProperties.maxEdgeHeight
+        return component.instance.contentHeight > this.generalProperties.maxEdgeHeight
             ? this.generalProperties.maxEdgeHeight
-            : component.instance.height;
+            : component.instance.contentHeight;
     }
-    getComponentHeight(page, type) {
+    getComponentHeight(instance) {
+        const height = instance.contentHeight;
+        return height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : height;
+    }
+    getComponentHeightByType(pageType, type) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
-        const component = this.getComponent(components, page);
-        if (!component) {
-            return 0;
-        }
-        return component.instance.height > this.generalProperties.maxEdgeHeight
-            ? this.generalProperties.maxEdgeHeight
-            : component.instance.height;
+        const height = components.find(x => x.instance.model.pageType === pageType)?.instance.contentHeight ?? 0;
+        return height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : height;
     }
-    toggleEditMode(needEnable) {
+    toggleEditMode(isEdit) {
+        if (this.isEdit === isEdit) {
+            return;
+        }
+        this.isEdit = isEdit;
         const edgeComponents = [...this.headersComponents, ...this.footersComponents];
         for (let component of edgeComponents) {
-            needEnable ? component.instance.enterEditMode() : component.instance.leaveEditMode();
+            if (isEdit) {
+                component.instance.enterEditMode();
+            }
+            else {
+                component.instance.leaveEditMode();
+            }
         }
     }
     getUniquePageTypes() {
@@ -8103,7 +8177,6 @@ class Edges {
                 generalProperties: this.generalProperties,
                 parentSessionId: this.parentSessionId
             });
-            componentRef.instance.renderer.renderChanges(new RenderChangesModel({ text: true }));
             resultComponents.push(componentRef);
         }
         return resultComponents;
@@ -8145,11 +8218,10 @@ class EdgeSessionSourceModel {
     constructor(pageType, type) {
         this.pageType = pageType;
         this.type = type;
-        this.edgeEditPage = null;
     }
     getTarget() {
         const edgeData = new EdgeTargetModel({ pageType: this.pageType, type: this.type });
-        return new TargetModel({ type: TargetType.Edge, edgeData, edgeEditPage: this.edgeEditPage });
+        return new TargetModel({ type: TargetType.Edge, edgeData });
     }
 }
 
@@ -8219,7 +8291,7 @@ class ImageInputHandler {
             return;
         }
         const keyCombination = this.getKeyCombination(event);
-        if (this.undoRedoActions[keyCombination] && !this.editorService.isViewOnly) {
+        if (this.undoRedoActions[keyCombination]) {
             this.undoRedoActions[keyCombination]();
             event.preventDefault();
             return;
@@ -8461,7 +8533,7 @@ class NoderImageComponent extends BaseNoderComponent {
             const fileSource = URL.createObjectURL(x);
             const image = this.createImage(fileSource);
             this.elementRef.nativeElement.appendChild(image);
-            this.editorService.rendererUpdated(this.sessionId);
+            this.editorService.imageLoaded(this.sessionId);
         });
     }
     onResizeEnd(size) {
@@ -8614,8 +8686,8 @@ class CellModel {
 }
 
 class ContentOperationsHelper {
-    static removeContent(content, startIndex, endIndex) {
-        return `${content.slice(0, startIndex)}${content.slice(endIndex + 1, content.length)}`;
+    static removeContent(content, startIndex, count) {
+        return `${content.slice(0, startIndex)}${content.slice(startIndex + count, content.length)}`;
     }
     static insertContent(content, text, index) {
         const before = content.slice(0, index);
@@ -8623,7 +8695,7 @@ class ContentOperationsHelper {
         return `${before}${text}${after}`;
     }
     static replaceContent(content, startIndex, endIndex, text) {
-        const reduced = this.removeContent(content, startIndex, endIndex);
+        const reduced = this.removeContent(content, startIndex, endIndex - startIndex + 1);
         return this.insertContent(reduced, text, startIndex);
     }
 }
@@ -8690,7 +8762,7 @@ class FormatOperationsHelper {
             firstIndex++;
         }
         let lastIndex = firstIndex;
-        while (formats[lastIndex].endIndex < endIndex) {
+        while (lastIndex < formats.length - 1 && formats[lastIndex].endIndex < endIndex) {
             lastIndex++;
         }
         if (formats[lastIndex].endIndex > endIndex) {
@@ -8727,13 +8799,13 @@ class ImageOperationsHelper {
 }
 
 class LinkOperationsHelper {
-    static insert(links, link, startIndex, endIndex, textStyle) {
+    static insert(links, link, startIndex, endIndex, linkStyle) {
         LinkOperationsHelper.insertContent(links, startIndex, endIndex - startIndex + 1);
         const linkModel = new LinkModel({
             startIndex: startIndex,
             link,
             endIndex,
-            formats: [new FormatModel({ startIndex: 0, endIndex: endIndex - startIndex, textStyle })]
+            formats: [new FormatModel({ startIndex: 0, endIndex: endIndex - startIndex, textStyle: linkStyle })]
         });
         const index = links.findIndex(x => x.startIndex > linkModel.startIndex);
         if (index < 0) {
@@ -8743,6 +8815,10 @@ class LinkOperationsHelper {
             links.splice(index, 0, linkModel);
         }
     }
+    static insertStyledContent(links, index, textLength, style) {
+        this.insertContent(links, index, textLength);
+        this.apply(links, index, index + textLength - 1, style);
+    }
     static insertContent(links, insertIndex, textLength) {
         for (let link of links) {
             if (link.startIndex < insertIndex && link.endIndex >= insertIndex) {
@@ -8772,13 +8848,13 @@ class LinkOperationsHelper {
             }
             if (links[i].startIndex <= startIndex && links[i].endIndex >= endIndex) {
                 const startInLink = startIndex - links[i].startIndex;
-                const endInLink = startInLink + length - 1;
+                const endInLink = endIndex - links[i].startIndex;
                 links[i].endIndex -= length;
                 FormatOperationsHelper.removeContent(links[i].formats, startInLink, endInLink);
                 continue;
             }
             if (links[i].startIndex >= startIndex && links[i].startIndex <= endIndex) {
-                const endInLink = links[i].startIndex - startIndex - 1;
+                const endInLink = endIndex - links[i].startIndex;
                 links[i].startIndex = startIndex;
                 links[i].endIndex -= length;
                 FormatOperationsHelper.removeContent(links[i].formats, 0, endInLink);
@@ -8792,16 +8868,63 @@ class LinkOperationsHelper {
             }
         }
     }
-    static restore(links, startIndex, contentLength, newlinks) {
+    static restore(links, startIndex, contentLength, newLinks) {
         this.insertContent(links, startIndex, contentLength);
         let indexInElements = links.findIndex(x => x.startIndex >= startIndex);
         indexInElements = indexInElements === -1 ? links.length : indexInElements;
-        links.splice(indexInElements, 0, ...newlinks);
+        links.splice(indexInElements, 0, ...newLinks);
+        this.merge(links, startIndex - 1, startIndex + contentLength);
+    }
+    static restoreFormats(links, formats) {
+        formats.forEach(x => this.apply(links, x.startIndex, x.endIndex, x.textStyle));
     }
     static replaceContent(links, startIndex, endIndex, length) {
         this.removeContent(links, startIndex, endIndex);
         this.insertContent(links, startIndex, length);
     }
+    static apply(links, startIndex, endIndex, style) {
+        for (let link of links) {
+            if (link.startIndex > endIndex || link.endIndex < startIndex) {
+                continue;
+            }
+            const start = startIndex > link.startIndex ? startIndex - link.startIndex : 0;
+            FormatOperationsHelper.apply(link.formats, start, endIndex - link.startIndex, style);
+        }
+    }
+    static merge(links, start, end) {
+        const firstIndex = links.findIndex(x => x.endIndex >= start);
+        for (let link of links) {
+            if (link.startIndex <= start && link.endIndex >= end) {
+                const newLink = links[firstIndex + 1];
+                newLink.formats.forEach(x => {
+                    x.startIndex += newLink.startIndex - link.startIndex;
+                    x.endIndex += newLink.startIndex - link.startIndex;
+                });
+                for (let { startIndex, endIndex, textStyle } of newLink.formats) {
+                    FormatOperationsHelper.apply(link.formats, startIndex, endIndex - startIndex + 1, textStyle);
+                }
+                links.splice(firstIndex + 1, 1);
+                return;
+            }
+        }
+        let lastIndex = firstIndex;
+        while (lastIndex < links.length - 1 && links[lastIndex].endIndex < end) {
+            lastIndex++;
+        }
+        for (let i = lastIndex; i > firstIndex; i--) {
+            const previous = links[i - 1];
+            if (previous.endIndex + 1 === links[i].startIndex && previous.link === links[i].link) {
+                previous.endIndex = links[i].endIndex;
+                links[i].formats.forEach(x => {
+                    x.startIndex += previous.formats[previous.formats.length - 1].endIndex + 1;
+                    x.endIndex += previous.formats[previous.formats.length - 1].endIndex + 1;
+                });
+                previous.formats.push(...links[i].formats);
+                links.splice(i, 1);
+                FormatStyleHelper.mergeFormats(previous.formats, 0, previous.endIndex - previous.startIndex);
+            }
+        }
+    }
 }
 
 class NumberingModel {
@@ -9411,7 +9534,7 @@ class OperationsHelper {
                     this.deleteRestore(contents, command.restore);
                     break;
                 case CommandType.Delete:
-                    this.delete(contents, command.delete.startIndex, command.delete.endIndex);
+                    this.delete(contents, command.delete.startIndex, command.delete.count);
                     break;
                 case CommandType.ReplaceByText: {
                     const model = command.replaceByText;
@@ -9425,7 +9548,7 @@ class OperationsHelper {
                 }
                 case CommandType.RestoreTextStyles: {
                     const model = command.restoreTextStyles;
-                    this.restoreTextStyles(contents, model.formats);
+                    this.restoreTextStyles(contents, model.formats, model.linkFormats);
                     break;
                 }
                 case CommandType.RestoreParagraphStyles: {
@@ -9469,12 +9592,7 @@ class OperationsHelper {
                 }
                 case CommandType.InsertLink: {
                     const model = command.insertLink;
-                    this.insertLink(contents, model.linkDataModel.text, model.linkDataModel.link, model.insertIndex, new TextStyleModel({
-                        ...DEFAULT_TEXT_STYLE,
-                        headingStyleId: HYPERLINK_HEADING_STYLE_ID,
-                        underline: true,
-                        fontColor: HYPERLINK_FONT_COLOR
-                    }));
+                    this.insertLink(contents, model.linkDataModel.text, model.linkDataModel.link, model.insertIndex);
                     break;
                 }
                 case CommandType.InsertTableColumns: {
@@ -9634,7 +9752,7 @@ class OperationsHelper {
         TabOperationsHelper.insertContent(document.tabs, index);
         LinkOperationsHelper.insertContent(document.links, index, 1);
     }
-    static insertLink(document, text, link, index, style) {
+    static insertLink(document, text, link, index) {
         document.content = ContentOperationsHelper.insertContent(document.content, text, index);
         document.contentLength = document.content.length;
         FormatOperationsHelper.insertContent(document.formats, index, text.length);
@@ -9644,7 +9762,13 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.breaks, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, text.length);
-        LinkOperationsHelper.insert(document.links, link, index, index + text.length - 1, style);
+        const formatStyle = FormatStyleHelper.getFormatAtIndex(document.formats, index).textStyle;
+        LinkOperationsHelper.insert(document.links, link, index, index + text.length - 1, {
+            ...formatStyle,
+            fontColor: HYPERLINK_FONT_COLOR,
+            underline: true,
+            headingStyleId: HYPERLINK_HEADING_STYLE_ID
+        });
     }
     static addNumbering(target, numberings, startIndex, endIndex, levels) {
         const newNumberingId = NumberingOperationsHelper.generateNumberingId(numberings);
@@ -9695,11 +9819,11 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.breaks, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, text.length);
-        LinkOperationsHelper.insertContent(document.links, index, text.length);
+        LinkOperationsHelper.insertStyledContent(document.links, index, text.length, style);
     }
     static deleteRestore(document, model) {
         if (model.startIndex !== model.endIndex) {
-            this.delete(document, model.startIndex, model.endIndex);
+            this.delete(document, model.startIndex, model.endIndex - model.startIndex);
         }
         this.restore(document, model);
     }
@@ -9715,9 +9839,10 @@ class OperationsHelper {
         IndexedElementOperationsHelper.restore(document.tabs, model.startIndex, model.text.length, model.tabs);
         LinkOperationsHelper.restore(document.links, model.startIndex, model.text.length, model.links);
     }
-    static delete(document, startIndex, endIndex) {
-        document.content = ContentOperationsHelper.removeContent(document.content, startIndex, endIndex);
+    static delete(document, startIndex, count) {
+        document.content = ContentOperationsHelper.removeContent(document.content, startIndex, count);
         document.contentLength = document.content.length;
+        const endIndex = startIndex + count - 1;
         FormatOperationsHelper.removeContent(document.formats, startIndex, endIndex);
         IndexedElementOperationsHelper.removeContent(document.paragraphs, startIndex, endIndex);
         IndexedElementOperationsHelper.removeContent(document.images, startIndex, endIndex);
@@ -9740,7 +9865,7 @@ class OperationsHelper {
         LinkOperationsHelper.replaceContent(document.links, startIndex, endIndex, text.length);
     }
     static replace(document, model, contentWidth) {
-        this.delete(document, model.delete.startIndex, model.delete.endIndex);
+        this.delete(document, model.delete.startIndex, model.delete.count);
         if (model.insertText) {
             this.insertText(document, model.insertText.text, model.insertText.insertIndex);
         }
@@ -9764,19 +9889,16 @@ class OperationsHelper {
             this.insertTable(document, model.insertTable.insertIndex, model.insertTable, contentWidth);
         }
         else if (model.insertLink) {
-            this.insertLink(document, model.insertLink.linkDataModel.text, model.insertLink.linkDataModel.link, model.insertLink.insertIndex, new TextStyleModel({
-                ...DEFAULT_TEXT_STYLE,
-                headingStyleId: HYPERLINK_HEADING_STYLE_ID,
-                underline: true,
-                fontColor: HYPERLINK_FONT_COLOR
-            }));
+            this.insertLink(document, model.insertLink.linkDataModel.text, model.insertLink.linkDataModel.link, model.insertLink.insertIndex);
         }
     }
     static applyTextStyle(document, startIndex, endIndex, style) {
         FormatOperationsHelper.apply(document.formats, startIndex, endIndex, style);
+        LinkOperationsHelper.apply(document.links, startIndex, endIndex, style);
     }
-    static restoreTextStyles(document, textFormats) {
+    static restoreTextStyles(document, textFormats, linkFormats) {
         FormatOperationsHelper.restoreFormats(document.formats, textFormats);
+        LinkOperationsHelper.restoreFormats(document.links, linkFormats);
     }
     static restoreParagraphStyles(document, paragraphs) {
         ParagraphOperationsHelper.restoreParagraphs(document.paragraphs, paragraphs);
@@ -9840,6 +9962,9 @@ class EditSession {
     get scrollTop() {
         return this.scrollBar?.scrollTop ?? 0; // only main session is scrollable
     }
+    get scrollBarHeight() {
+        return this.scrollBar?.element.clientHeight ?? 0; // only main session is scrollable
+    }
     constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar) {
         this.displayData = displayData;
         this.sessionId = sessionId;
@@ -9936,6 +10061,20 @@ class EditSession {
         const paragraphContent = this.displayData.getParagraphContent(row);
         return paragraphContent.substring(startColumn || 0, endColumn || paragraphContent.length);
     }
+    isEdgeOrWithinEdge() {
+        return this.isEdge() || this.isWithinEdge();
+    }
+    isEdge() {
+        return this.type === 'edge';
+    }
+    isWithinEdge() {
+        return this.type === 'cellWithinEdge';
+    }
+    onRendered() {
+        if (this.isEdgeOrWithinEdge()) {
+            this.editorService.changedEdge(this.sessionId);
+        }
+    }
     removeByDocumentIndexes(startIndex, endIndex) {
         const startParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex);
         const endParagraphPosition = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, endIndex);
@@ -10041,12 +10180,12 @@ class EditSession {
         const start = this.displayData.indexToPosition(applyImage.insertIndex, 0);
         this.displayData.updateNextLineIndexes(start.row, this.displayData.paragraphs.length - 1);
     }
-    restoreTextStyles(formats) {
+    restoreTextStyles(formats, linkFormats) {
         const startIndex = formats[0].startIndex;
         const endIndex = formats[formats.length - 1].endIndex;
         const startParagraph = ContentHelper.documentIndexToParagraphIndex(this.displayData.paragraphs, startIndex).row;
         const endPosition = ContentHelper.documentIndexToParagraphWithOffset(this.displayData.paragraphs, endIndex);
-        OperationsHelper.restoreTextStyles(this.model, formats);
+        OperationsHelper.restoreTextStyles(this.model, formats, linkFormats);
         this.displayData.updateNextLineIndexes(startParagraph, endPosition.row);
         this.selection.placeCursor(endPosition);
         this.applyToolbarStyles();
@@ -10079,7 +10218,7 @@ class EditSession {
         CustomComponentHelper.applyRemovingComponents(this.customComponents.images, partIndexes.startIndex, partIndexes.endIndex);
         CustomComponentHelper.applyRemovingComponents(this.customComponents.customElements, partIndexes.startIndex, partIndexes.endIndex);
         CustomComponentHelper.applyRemovingComponents(this.customComponents.tabs, partIndexes.startIndex, partIndexes.endIndex);
-        OperationsHelper.delete(this.model, partIndexes.startIndex, partIndexes.endIndex);
+        OperationsHelper.delete(this.model, partIndexes.startIndex, partIndexes.endIndex - partIndexes.startIndex + 1);
         this.selection.placeCursor(range.start);
         this.displayData.resetAllNumberingInfo(range.start.row);
         this.displayData.updateNextLineIndexes(range.start.row, range.start.row);
@@ -10089,7 +10228,7 @@ class EditSession {
         this.applyToolbarStyles();
     }
     replace(model) {
-        this.removeByDocumentIndexes(model.delete.startIndex, model.delete.endIndex + 1);
+        this.removeByDocumentIndexes(model.delete.startIndex, model.delete.startIndex + model.delete.count);
         let endPoint;
         if (model.insertText) {
             endPoint = this.insertTextByDocumentIndex(model.insertText.insertIndex, model.insertText.text);
@@ -10183,13 +10322,7 @@ class EditSession {
     }
     insertLink(position, linkData) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, position);
-        const linkStyle = new TextStyleModel({
-            ...DEFAULT_TEXT_STYLE,
-            headingStyleId: HYPERLINK_HEADING_STYLE_ID,
-            underline: true,
-            fontColor: HYPERLINK_FONT_COLOR
-        });
-        OperationsHelper.insertLink(this.model, linkData.text, linkData.link, insertIndex, linkStyle);
+        OperationsHelper.insertLink(this.model, linkData.text, linkData.link, insertIndex);
         const endPosition = this.displayData.insertText(position, linkData.text);
         this.displayData.updateNextLineIndexes(position.row, position.row);
         this.selection.placeCursor(endPosition);
@@ -10297,7 +10430,7 @@ class EditSession {
     }
     getStyleForCursor(index) {
         const link = this.model.links.find(x => x.startIndex <= index && x.endIndex > index);
-        if (link) {
+        if (link && !this.displayData.paragraphs.some(x => x.startIndex === index)) {
             const indexInLink = index - link.startIndex;
             const linkFormat = link.formats.find(x => x.startIndex <= indexInLink && x.endIndex >= indexInLink);
             return [linkFormat.textStyle];
@@ -10350,7 +10483,7 @@ class EditSession {
     }
     getLinkModel(cursor) {
         const index = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, cursor);
-        return this.model.links.find(x => x.startIndex <= index && x.endIndex > index);
+        return this.model.links.find(x => x.startIndex <= index && x.endIndex >= index);
     }
     insertTableRows(insertIndex, rowsCount, targetIndex, inheritIndex) {
         const table = this.customComponents.tables.find(x => x.instance.insertIndex === insertIndex);
@@ -10402,7 +10535,7 @@ class GeneralPropertiesModel {
 
 class MainSessionSourceModel {
     getTarget() {
-        return new TargetModel({ type: TargetType.Document, edgeEditPage: null });
+        return new TargetModel({ type: TargetType.Document });
     }
 }
 
@@ -10503,6 +10636,31 @@ class CursorLayer {
     }
 }
 
+class RenderChangesModel {
+    get any() {
+        return this.cursor || this.full || this.lines || this.marker || this.selection || this.scroll || this.size || this.text;
+    }
+    constructor(fields) {
+        this.cursor = false;
+        this.full = false;
+        this.lines = false;
+        this.marker = false;
+        this.selection = false;
+        this.scroll = false;
+        this.size = false;
+        this.text = false;
+        if (!fields) {
+            return;
+        }
+        Object.assign(this, fields);
+    }
+    apply(changes) {
+        for (let key of Object.keys(this)) {
+            this[key] ||= changes[key];
+        }
+    }
+}
+
 class EventHelper {
     static get nextFrame() {
         if (!this._nextFrame) {
@@ -10662,9 +10820,8 @@ class SelectionLayer {
 }
 
 class Renderer extends EventEmitting {
-    constructor(parentContainer, editorService, session) {
+    constructor(parentContainer, session) {
         super();
-        this.editorService = editorService;
         this.session = session;
         this.layerConfig = {
             width: 1,
@@ -10697,7 +10854,7 @@ class Renderer extends EventEmitting {
         this.container = parentContainer;
         this.container.className += ' noder-editor';
         this.createContentContainer();
-        this.textLayer = new TextLayer(this.content, this.session, this.editorService);
+        this.textLayer = new TextLayer(this.content, this.session);
         this.selectionLayer = new SelectionLayer(this.content, 'text-selection', this.session);
         this.cursorLayer = new CursorLayer(this.content, this.session);
         this.loop = new RenderLoop(changes => this.renderChanges(changes));
@@ -10720,7 +10877,6 @@ class Renderer extends EventEmitting {
         // full
         if (changes.full) {
             this.renderFull();
-            this.editorService.rendererUpdated(this.session.sessionId);
             return;
         }
         if (changes.text || changes.scroll) {
@@ -10732,7 +10888,7 @@ class Renderer extends EventEmitting {
         if (changes.marker || changes.selection) {
             this.renderSelection();
         }
-        this.editorService.rendererUpdated(this.session.sessionId);
+        this.session.onRendered();
     }
     /**
      * Triggers a partial update of the text, from the range given by the two parameters.
@@ -10747,7 +10903,7 @@ class Renderer extends EventEmitting {
         this.loop.schedule({ lines: true });
     }
     moveTextAreaToCursor() {
-        if (this.isMousePressed || !this.textarea) {
+        if (!this.textarea) {
             return;
         }
         let cursorPosition = this.cursorLayer.cursorPosition;
@@ -10779,32 +10935,32 @@ class Renderer extends EventEmitting {
     updateText() {
         this.loop.schedule({ text: true });
     }
-    /**
-     * Triggers a full update of all the layers, for all the rows.
-     **/
-    updateFull(force) {
-        if (force) {
-            this.renderChanges(new RenderChangesModel({ full: true }), true);
-            return;
-        }
-        this.loop.schedule({ full: true });
-    }
     updateCursor() {
         this.loop.schedule({ cursor: true });
     }
-    screenToTextCoordinates(x, y) {
-        const screen = PositionHelper.pixelToScreen(this.session, x, y, this.container.getBoundingClientRect());
-        return PositionHelper.screenToDocument(this.session, screen.row, screen.column);
+    /**
+     * Converts screen coordinates to text coordinates by mapping to the closest token midpoint.
+     */
+    screenToTextCoordinatesUsingMidpoint(x, y, rect) {
+        const { left, top } = rect ?? this.container.getBoundingClientRect();
+        const { paragraphIndex, lineIndex } = PositionHelper.getParagraphAndLineIndexFromYPosition(this.session, y, top);
+        const { line, indexInLine } = PositionHelper.mapPixelToClosestTokenMidpoint(this.session, x, paragraphIndex, lineIndex, left);
+        return PositionHelper.screenToDocument(this.session, line, indexInLine);
+    }
+    /**
+     * Converts screen coordinates to text coordinates by mapping to the next token boundary.
+     */
+    screenToTextCoordinatesUsingBoundary(x, y, rect) {
+        const { left, top } = rect ?? this.container.getBoundingClientRect();
+        const { paragraphIndex, lineIndex } = PositionHelper.getParagraphAndLineIndexFromYPosition(this.session, y, top);
+        const { line, indexInLine } = PositionHelper.mapPixelToNextTokenBoundary(this.session, x, paragraphIndex, lineIndex, left);
+        return PositionHelper.screenToDocument(this.session, line, indexInLine);
     }
     showCursor() {
         this.cursorLayer.showCursor();
-        DomHelper.addCssClass(this.container, 'ace_focus');
-        this.editorService.rendererUpdated(this.session.sessionId);
     }
     hideCursor() {
         this.cursorLayer.hideCursor();
-        DomHelper.removeCssClass(this.container, 'ace_focus');
-        this.editorService.rendererUpdated(this.session.sessionId);
     }
     destroy() {
         this.session.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
@@ -10816,6 +10972,7 @@ class Renderer extends EventEmitting {
         this.selectionLayer.update(this.layerConfig);
         this.cursorLayer.update(this.layerConfig);
         this.moveTextAreaToCursor();
+        this.session.onRendered();
     }
     renderText() {
         this.textLayer.updateLines(this.layerConfig);
@@ -10834,7 +10991,6 @@ class Renderer extends EventEmitting {
         const maxHeight = displayData.allPagesHeight;
         const minHeight = displayData.minHeight;
         const changes = new RenderChangesModel({ scroll: true });
-        // todo check logic after move wrapdata to display data
         this.layerConfig = {
             width: this.session.displayData.contentWidth + displayData.pageMargin.left + displayData.pageMargin.right,
             height: displayData.defaultVerticalData.contentHeight,
@@ -10949,12 +11105,6 @@ class SessionModel {
 }
 
 class VirtualRenderer {
-    get isMousePressed() {
-        return this.renderer.isMousePressed;
-    }
-    set isMousePressed(val) {
-        this.renderer.isMousePressed = val;
-    }
     get cursorLayer() {
         return this.renderer.cursorLayer;
     }
@@ -10976,7 +11126,7 @@ class VirtualRenderer {
     set layerConfig(val) {
         this.renderer.layerConfig = val;
     }
-    constructor(parentContainer, editorService, mainSession, scrollBar) {
+    constructor(parentContainer, mainSession, scrollBar) {
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
         this.size = {
@@ -10988,8 +11138,7 @@ class VirtualRenderer {
         };
         this.container = parentContainer;
         this.createScroller();
-        this.renderer = new Renderer(parentContainer, editorService, mainSession);
-        this.renderer.layerConfig = this.getDefaultLayerConfig();
+        this.renderer = new Renderer(parentContainer, mainSession);
         this.pagesLayer = new PagesLayer(this.renderer.content, mainSession);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(() => this.loop.schedule({ scroll: true }));
         this.createRenderLoop();
@@ -11075,7 +11224,7 @@ class VirtualRenderer {
         return changes;
     }
     moveTextAreaToCursor() {
-        if (this.isMousePressed || !this.textarea) {
+        if (!this.textarea) {
             return;
         }
         let cursorPosition = this.cursorLayer.cursorPosition;
@@ -11100,12 +11249,6 @@ class VirtualRenderer {
     updateText() {
         this.renderer.updateText();
     }
-    /**
-     * Triggers a full update of all the layers, for all the rows.
-     **/
-    updateFull(force) {
-        this.renderer.updateFull(force);
-    }
     updateCursor() {
         this.renderer.updateCursor();
     }
@@ -11147,8 +11290,11 @@ class VirtualRenderer {
         this.scrollBar.setScrollTop(scrollTop);
         this.loop.schedule({ scroll: true });
     }
-    screenToTextCoordinates(x, y) {
-        return this.renderer.screenToTextCoordinates(x, y);
+    screenToTextCoordinatesUsingMidpoint(x, y, rect) {
+        return this.renderer.screenToTextCoordinatesUsingMidpoint(x, y, rect);
+    }
+    screenToTextCoordinatesUsingBoundary(x, y, rect) {
+        return this.renderer.screenToTextCoordinatesUsingBoundary(x, y, rect);
     }
     showCursor() {
         this.renderer.showCursor();
@@ -11205,12 +11351,11 @@ class VirtualRenderer {
     }
     renderScroll(changes) {
         this.pagesLayer.update(this.layerConfig);
+        this.renderer.textLayer.scrollEdges(this.layerConfig);
         if (changes.text || changes.lines) {
-            this.renderer.textLayer.updateEdges(this.layerConfig);
             this.renderer.textLayer.updateLines(this.layerConfig);
         }
         else {
-            this.renderer.textLayer.scrollPages(this.layerConfig);
             this.renderer.textLayer.scrollLines(this.layerConfig);
         }
         this.renderer.selectionLayer.update(this.layerConfig);
@@ -11235,28 +11380,6 @@ class VirtualRenderer {
     renderSelection() {
         this.renderer.renderSelection();
     }
-    getDefaultLayerConfig() {
-        return {
-            width: 1,
-            contentRange: new DistanceModel({ start: 0, end: 0 }),
-            minHeight: 1,
-            maxHeight: 1,
-            offset: 0,
-            height: 1,
-            scrollTop: 0,
-            pages: [],
-            visibleRange: {
-                startParagraph: 0,
-                startLine: 0,
-                startScreenLine: 0,
-                startScreenFullLine: 0,
-                endParagraph: 0,
-                endLine: 0,
-                endScreenLine: 0,
-                endScreenFullLine: 0
-            }
-        };
-    }
 }
 
 class CustomContentService {
@@ -11385,7 +11508,6 @@ class RegulatorService {
         this.componentService = componentService;
         this.sessions = [];
         this.sessionIdIncrement = 0;
-        this.edgeEditingPage = null;
     }
     addMainSession(model, pageWidth, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
@@ -11411,25 +11533,26 @@ class RegulatorService {
         const displayData = new DisplayData(model, properties, sessionId, pageMargin, DocumentInfo.pagesSpace, pageWidth, model.pageHeight, customComponents, this.customContentService, this.editorService);
         const scrollBar = new ScrollBar(container.nativeElement.parentElement);
         const mainSession = new EditSession(displayData, sessionId, this.customContentService, model, this.selection, properties, this.editorService, customComponents, 'main', scrollBar);
-        displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
-        const virtualRenderer = new VirtualRenderer(container.nativeElement, this.editorService, mainSession, scrollBar);
+        const virtualRenderer = new VirtualRenderer(container.nativeElement, mainSession, scrollBar);
         this.editorService.styles = DEFAULT_TOOLBAR_STYLES();
         this.mainSession = new SessionModel(mainSession, virtualRenderer, sessionId, null, new MainSessionSourceModel());
         this.sessions.push(this.mainSession);
         this.currentSession = this.mainSession;
+        displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
     }
     addCellSession(table, margins, component, properties) {
         const sessionId = ++this.sessionIdIncrement;
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
         const displayData = new DisplayData(component.cell, properties, sessionId, margins, 0, component.width, 0, customComponents, this.customContentService, this.editorService);
-        const session = new EditSession(displayData, sessionId, this.customContentService, component.cell, this.selection, properties, this.editorService, customComponents, 'cell');
+        const sessionType = this.isWithinEdge(component.parentSessionId) ? 'cellWithinEdge' : 'cell';
+        const session = new EditSession(displayData, sessionId, this.customContentService, component.cell, this.selection, properties, this.editorService, customComponents, sessionType);
         displayData.contentWidth = displayData.contentWidth === 0 ? 1 : displayData.contentWidth;
-        displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
-        const renderer = new Renderer(component.container.nativeElement, this.editorService, session);
+        const renderer = new Renderer(component.container.nativeElement, session);
         const source = new CellSessionSourceModel(table, component);
         const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source);
-        newSession.renderer.updateText();
         this.sessions.push(newSession);
+        displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
+        newSession.renderer.updateText();
         return newSession;
     }
     addEdgeSession(component) {
@@ -11437,11 +11560,12 @@ class RegulatorService {
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
         const displayData = new DisplayData(component.model, component.generalProperties, sessionId, component.margins, 0, component.width, 0, customComponents, this.customContentService, this.editorService);
         const session = new EditSession(displayData, sessionId, this.customContentService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge');
-        displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
-        const renderer = new Renderer(component.container.nativeElement, this.editorService, session);
+        const renderer = new Renderer(component.container.nativeElement, session);
         const source = new EdgeSessionSourceModel(component.model.pageType, component.type);
         const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source);
         this.sessions.push(newSession);
+        displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
+        newSession.renderer.updateText();
         return newSession;
     }
     removeSession(sessionId) {
@@ -11454,16 +11578,12 @@ class RegulatorService {
         if (this.mainSession.sessionId === this.currentSession.sessionId) {
             return;
         }
-        this.toggleEdgeEditMode();
         this.setCurrentSession(this.mainSession);
     }
-    setCustomSessionAsCurrent(sessionId, edgeEditingPage = null) {
-        if (sessionId === this.currentSession.sessionId && this.currentSession.source.edgeEditPage !== edgeEditingPage) {
-            this.currentSession.source.edgeEditPage = edgeEditingPage;
-            this.mainSession.renderer.renderer.textLayer.edgeEditingPageUpdated(edgeEditingPage);
+    setCustomSessionAsCurrent(sessionId) {
+        if (sessionId === this.currentSession.sessionId) {
             return;
         }
-        this.toggleEdgeEditMode(edgeEditingPage);
         this.setCurrentSessionById(sessionId);
     }
     setTargetedSessionAsCurrent(targets) {
@@ -11472,8 +11592,6 @@ class RegulatorService {
             return;
         }
         const session = this.sessions.find(x => x.sessionId === targetedSession.sessionId);
-        const edgeEditPage = targets.length ? targets[targets.length - 1].edgeEditPage : null;
-        this.toggleEdgeEditMode(edgeEditPage);
         this.setCurrentSession(session);
     }
     setCurrentSessionById(sessionId) {
@@ -11481,16 +11599,19 @@ class RegulatorService {
         this.setCurrentSession(this.sessions[index]);
     }
     setCurrentSession(session) {
+        const previous = this.currentSession;
         this.selection.clearSelection();
         this.currentSession.renderer.hideCursor();
         this.currentSession.renderer.updateSelection(this.selection.range);
         this.currentSession = session;
         this.currentSession.renderer.showCursor();
-        this.currentSession.source.edgeEditPage = this.edgeEditingPage;
+        this.arrangeEdgesForSessionChange(previous.session, session.session);
+    }
+    getSessionModel(sessionId) {
+        return this.sessions.find(x => x.sessionId === sessionId);
     }
     getSession(sessionId) {
-        const session = this.sessions.find(x => x.sessionId === sessionId);
-        return session.session;
+        return this.getSessionModel(sessionId).session;
     }
     setSelection(selection) {
         this.selection = selection;
@@ -11516,19 +11637,6 @@ class RegulatorService {
         }
         return result;
     }
-    getEdgeTarget(sessionId) {
-        let session = this.sessions.find(x => x.sessionId === sessionId);
-        let parentSession = this.sessions.find(x => x.sessionId === session.parentSessionId);
-        while (parentSession) {
-            const target = session.source.getTarget();
-            if (target.type === TargetType.Edge) {
-                return target;
-            }
-            session = parentSession;
-            parentSession = this.sessions.find(x => x.sessionId === parentSession.parentSessionId);
-        }
-        return null;
-    }
     getTargetedSession(targets) {
         let result = this.mainSession.session;
         for (const target of targets) {
@@ -11549,13 +11657,33 @@ class RegulatorService {
         }
         return result;
     }
-    toggleEdgeEditMode(edgeEditingPage = null) {
-        if (!this.mainSession.session.customComponents.edges || this.edgeEditingPage === edgeEditingPage) {
+    isWithinEdge(sessionId) {
+        return !!this.getEdgeSessionId(sessionId);
+    }
+    arrangeEdgeChange(sessionId) {
+        const edgeSessionId = this.getEdgeSessionId(sessionId);
+        const { type, pageType } = this.mainSession.session.customComponents.edges.getTypeBySessionId(edgeSessionId);
+        this.mainSession.renderer.renderer.textLayer.updateEdge(type, pageType);
+    }
+    getEdgeSessionId(sessionId) {
+        let session = this.getSession(sessionId);
+        while (session && !session.isEdge()) {
+            const model = this.sessions.find(x => x.sessionId === session.sessionId);
+            session = model.parentSessionId ? this.getSession(model.parentSessionId) : null;
+        }
+        return session?.sessionId;
+    }
+    arrangeEdgesForSessionChange(previous, current) {
+        const isPreviousEdge = previous.isEdgeOrWithinEdge();
+        const isCurrentEdge = current.isEdgeOrWithinEdge();
+        if (isPreviousEdge !== isCurrentEdge) {
+            this.mainSession.session.customComponents.edges.toggleEditMode(isCurrentEdge);
             return;
         }
-        this.edgeEditingPage = edgeEditingPage;
-        this.mainSession.session.customComponents.edges.toggleEditMode(!!this.edgeEditingPage);
-        this.mainSession.renderer.renderer.textLayer.edgeEditingPageUpdated(edgeEditingPage);
+        if (isPreviousEdge) {
+            previous.onRendered();
+            current.onRendered();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RegulatorService, deps: [{ token: CustomContentService }, { token: EditorService }, { token: ComponentService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RegulatorService }); }
@@ -13540,7 +13668,6 @@ class MenuDropdownsComponent extends BaseToolbarComponent {
         this.showLayout = true;
         this.showFormat = true;
         this.openFileFromDisk = new EventEmitter();
-        this.addCustomElement = new EventEmitter();
         this.saveAs = new EventEmitter();
         this.insertPageBreak = new EventEmitter();
         this.createDocument = new EventEmitter();
@@ -13577,7 +13704,7 @@ class MenuDropdownsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsComponent, deps: [{ token: CustomIconService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", insertPageBreak: "insertPageBreak", createDocument: "createDocument", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        File\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">New</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">Open From</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">Save As</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">Rename</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">Print</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">Delete</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        Edit\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">Undo</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">Redo</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">Cut</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">Copy</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">Paste</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">Select All</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">Delete</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        Insert\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">Image</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            Table\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">Link</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.title }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.name }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">Headers & Footers</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">Header</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">Footer</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        Layout\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">Page Break</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        Format\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">Align</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">Left</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">Center</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">Right</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">Bullets & Numbering</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">Bullet List Menu</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">Numbered List Menu</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">Text</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">Bold</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">Italic</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">Underlined</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">Headers & Footers</span>\n            </div>\n        </button>\n    </mat-menu>\n    <mat-menu\n        #tableInsert=\"matMenu\"\n        class=\"insert-table noder-modal\">\n        <app-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: { showFile: "showFile", showEdit: "showEdit", showInsert: "showInsert", showLayout: "showLayout", showFormat: "showFormat" }, outputs: { openFileFromDisk: "openFileFromDisk", saveAs: "saveAs", insertPageBreak: "insertPageBreak", createDocument: "createDocument", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected" }, viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container\n    *ngIf=\"{\n        clipboardData: editorService.clipboardData$ | async,\n        hasSelection: editorService.hasSelection$ | async,\n        isViewOnly: editorService.isViewOnly$ | async\n    } as data\">\n    <button\n        *ngIf=\"showFile\"\n        id=\"menu-dropdowns-menu-file\"\n        mat-button\n        [matMenuTriggerFor]=\"fileMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        File\n    </button>\n    <mat-menu\n        #fileMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"createDocument.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-new\"\n            mat-menu-item\n            (click)=\"createDocument.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-add-new\"></mat-icon>\n                <span class=\"menu-item-text\">New</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"openFileFromDisk.observed && !data.isViewOnly\"\n            id=\"menu-dropdowns-menu-item-open-from\"\n            mat-menu-item\n            (click)=\"openFileFromDisk.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-open-from\"></mat-icon>\n                <span class=\"menu-item-text\">Open From</span>\n                <span class=\"hot-keys\">Ctrl+O</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"saveAs.observed\"\n            id=\"menu-dropdowns-menu-item-save-as\"\n            mat-menu-item\n            (click)=\"saveAs.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-save\"></mat-icon>\n                <span class=\"menu-item-text\">Save As</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"rename.observed\"\n            id=\"menu-dropdowns-menu-item-rename\"\n            mat-menu-item\n            (click)=\"rename.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-rename\"></mat-icon>\n                <span class=\"menu-item-text\">Rename</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"print.observed\"\n            id=\"menu-dropdowns-menu-item-print\"\n            mat-menu-item\n            (click)=\"print.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-print\"></mat-icon>\n                <span class=\"menu-item-text\">Print</span>\n                <span class=\"hot-keys\">Ctrl+P</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"delete.observed\"\n            id=\"menu-dropdowns-menu-item-delete\"\n            mat-menu-item\n            (click)=\"delete.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">Delete</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showEdit\"\n        id=\"menu-dropdowns-menu-edit\"\n        mat-button\n        [matMenuTriggerFor]=\"editMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\"\n        (menuOpened)=\"openEditMenu.emit()\">\n        Edit\n    </button>\n    <mat-menu\n        #editMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"undo.observed\"\n            id=\"menu-dropdowns-menu-item-undo\"\n            mat-menu-item\n            [disabled]=\"!canUndo\"\n            (click)=\"undo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-undo\"></mat-icon>\n                <span class=\"menu-item-text\">Undo</span>\n                <span class=\"hot-keys\">Ctrl+Z</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"redo.observed\"\n            id=\"menu-dropdowns-menu-item-redo\"\n            mat-menu-item\n            [disabled]=\"!canRedo\"\n            (click)=\"redo.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-redo\"></mat-icon>\n                <span class=\"menu-item-text\">Redo</span>\n                <span class=\"hot-keys\">Ctrl+Y</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"cutSelected.observed\"\n            id=\"menu-dropdowns-menu-item-cut\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"cutSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-cut\"></mat-icon>\n                <span class=\"menu-item-text\">Cut</span>\n                <span class=\"hot-keys\">Ctrl+X</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"copySelected.observed\"\n            id=\"menu-dropdowns-menu-item-copy\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"copySelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-file-copy\"></mat-icon>\n                <span class=\"menu-item-text\">Copy</span>\n                <span class=\"hot-keys\">Ctrl+C</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"pasteClipboardData.observed\"\n            id=\"menu-dropdowns-menu-item-paste\"\n            mat-menu-item\n            [disabled]=\"!data.clipboardData?.length\"\n            (click)=\"pasteClipboardData.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-content-paste\"></mat-icon>\n                <span class=\"menu-item-text\">Paste</span>\n                <span class=\"hot-keys\">Ctrl+V</span>\n            </div>\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"selectAll.observed\"\n            id=\"menu-dropdowns-menu-item-select-all\"\n            mat-menu-item\n            (click)=\"selectAll.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-select-all\"></mat-icon>\n                <span class=\"menu-item-text\">Select All</span>\n                <span class=\"hot-keys\">Ctrl+A</span>\n            </div>\n        </button>\n        <button\n            *ngIf=\"removeSelected.observed\"\n            id=\"menu-dropdowns-menu-item-delete-text\"\n            mat-menu-item\n            [disabled]=\"!data.hasSelection\"\n            (click)=\"removeSelected.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-delete\"></mat-icon>\n                <span class=\"menu-item-text\">Delete</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showInsert && !data.isViewOnly\"\n        #insertMenuTrigger=\"matMenuTrigger\"\n        id=\"menu-dropdowns-menu-insert\"\n        mat-button\n        [matMenuTriggerFor]=\"insertMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        Insert\n    </button>\n    <mat-menu\n        #insertMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertImage.observed\"\n            id=\"menu-dropdowns-menu-item-image\"\n            mat-menu-item\n            (click)=\"insertImage.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-image\"></mat-icon>\n                <span class=\"menu-item-text\">Image</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-table\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"tableInsert\"\n            (menuOpened)=\"showInsertTableMenu = true\"\n            (menuClosed)=\"onTableInsertMenuClosed()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-table\"></mat-icon>\n            Table\n        </button>\n        <hr class=\"noder-divider\" />\n        <button\n            *ngIf=\"insertLink.observed\"\n            id=\"menu-dropdowns-menu-item-link\"\n            mat-menu-item\n            (click)=\"insertLink.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-link-on\"></mat-icon>\n                <span class=\"menu-item-text\">Link</span>\n                <span class=\"hot-keys\">Ctrl+K</span>\n            </div>\n        </button>\n        <button\n            *ngFor=\"let element of elements\"\n            id=\"menu-dropdowns-menu-item-{{ element.title }}\"\n            mat-menu-item\n            (click)=\"onCreateElement(element)\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"{{ element.icon }}\"></mat-icon>\n                <span class=\"menu-item-text\">{{ element.name }}</span>\n            </div>\n        </button>\n        <button\n            id=\"menu-dropdowns-menu-item-headers-footers\"\n            mat-menu-item\n            class=\"hidden\"\n            [matMenuTriggerFor]=\"listHeadersFootersMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">Headers & Footers</span>\n            </div>\n        </button>\n        <mat-menu\n            #listHeadersFootersMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-header\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-header\"></mat-icon>\n                    <span class=\"menu-item-text\">Header</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-footer\"\n                mat-menu-item>\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-bottom\"></mat-icon>\n                    <span class=\"menu-item-text\">Footer</span>\n                </div>\n            </button>\n        </mat-menu>\n    </mat-menu>\n    <button\n        *ngIf=\"showLayout && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-layout\"\n        mat-button\n        [matMenuTriggerFor]=\"layoutMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        Layout\n    </button>\n    <mat-menu\n        #layoutMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            *ngIf=\"insertPageBreak.observed\"\n            id=\"menu-dropdowns-menu-item-page-break\"\n            mat-menu-item\n            (click)=\"insertPageBreak.emit()\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-page-break\"></mat-icon>\n                <span class=\"menu-item-text\">Page Break</span>\n                <span class=\"hot-keys\">Ctrl+Enter</span>\n            </div>\n        </button>\n    </mat-menu>\n    <button\n        *ngIf=\"showFormat && !data.isViewOnly\"\n        id=\"menu-dropdowns-menu-format\"\n        mat-button\n        [matMenuTriggerFor]=\"formatMenu\"\n        [matMenuTriggerRestoreFocus]=\"false\">\n        Format\n    </button>\n    <mat-menu\n        #formatMenu=\"matMenu\"\n        class=\"noder-modal\">\n        <button\n            id=\"menu-dropdowns-menu-item-align\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listAlignMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-alignleft\"></mat-icon>\n                <span class=\"menu-item-text\">Align</span>\n            </div>\n        </button>\n        <mat-menu\n            #listAlignMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-align-left\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Left)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignleft\"></mat-icon>\n                    <span class=\"menu-item-text\">Left</span>\n                    <span class=\"hot-keys\">Ctrl+L</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-center\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Center)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-aligncenter\"></mat-icon>\n                    <span class=\"menu-item-text\">Center</span>\n                    <span class=\"hot-keys\">Ctrl+E</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-align-right\"\n                mat-menu-item\n                (click)=\"onSelectFormat(alignments.Right)\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-alignright\"></mat-icon>\n                    <span class=\"menu-item-text\">Right</span>\n                    <span class=\"hot-keys\">Ctrl+R</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-bullets-numbering\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listBulletsNumberingMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bulleted\"></mat-icon>\n                <span class=\"menu-item-text\">Bullets & Numbering</span>\n            </div>\n        </button>\n        <mat-menu\n            #listBulletsNumberingMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bullets\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listBulletedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bulleted\"></mat-icon>\n                    <span class=\"menu-item-text\">Bullet List Menu</span>\n                </div>\n            </button>\n            <mat-menu\n                #listBulletedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-marker\">\n                    <mat-icon\n                        svgIcon=\"marker-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"marker-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.BulletList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.BulletList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n            <button\n                id=\"menu-dropdowns-menu-item-numbering\"\n                mat-menu-item\n                [matMenuTriggerFor]=\"listNumberedMenu\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-numbered\"></mat-icon>\n                    <span class=\"menu-item-text\">Numbered List Menu</span>\n                </div>\n            </button>\n            <mat-menu\n                #listNumberedMenu=\"matMenu\"\n                class=\"dropdown-numbering-overlay noder-modal\"\n                yPosition=\"below\">\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-1\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList1\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList1)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-2\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList2\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList2)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-3\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList3\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList3)\"></mat-icon>\n                </div>\n                <div class=\"list-icon list-number\">\n                    <mat-icon\n                        svgIcon=\"number-4\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList4\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList4)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-5\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList5\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList5)\"></mat-icon>\n                    <mat-icon\n                        svgIcon=\"number-6\"\n                        [class.selected]=\"numberingTemplateType === numberingTemplateTypes.NumberList6\"\n                        (click)=\"onSelectNumberingTemplate(numberingTemplateTypes.NumberList6)\"></mat-icon>\n                </div>\n            </mat-menu>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-text\"\n            mat-menu-item\n            [matMenuTriggerFor]=\"listTextMenu\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-format-bold\"></mat-icon>\n                <span class=\"menu-item-text\">Text</span>\n            </div>\n        </button>\n        <mat-menu\n            #listTextMenu=\"matMenu\"\n            class=\"noder-modal\">\n            <button\n                id=\"menu-dropdowns-menu-item-bold\"\n                mat-menu-item\n                (click)=\"onApplyBold()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-bold\"></mat-icon>\n                    <span class=\"menu-item-text\">Bold</span>\n                    <span class=\"hot-keys\">Ctrl+B</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-italic\"\n                mat-menu-item\n                (click)=\"onApplyItalic()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-italic\"></mat-icon>\n                    <span class=\"menu-item-text\">Italic</span>\n                    <span class=\"hot-keys\">Ctrl+I</span>\n                </div>\n            </button>\n            <button\n                id=\"menu-dropdowns-menu-item-underlined\"\n                mat-menu-item\n                (click)=\"onApplyUnderline()\">\n                <div class=\"heading-menu\">\n                    <mat-icon\n                        fontSet=\"noder-icon\"\n                        fontIcon=\"icon-format-underlined\"></mat-icon>\n                    <span class=\"menu-item-text\">Underlined</span>\n                    <span class=\"hot-keys\">Ctrl+U</span>\n                </div>\n            </button>\n        </mat-menu>\n        <button\n            id=\"menu-dropdowns-menu-item-header-footer\"\n            mat-menu-item\n            class=\"hidden\">\n            <div class=\"heading-menu\">\n                <mat-icon\n                    fontSet=\"noder-icon\"\n                    fontIcon=\"icon-headers-footers\"></mat-icon>\n                <span class=\"menu-item-text\">Headers & Footers</span>\n            </div>\n        </button>\n    </mat-menu>\n    <mat-menu\n        #tableInsert=\"matMenu\"\n        class=\"insert-table noder-modal\">\n        <app-nod-insert-table\n            *ngIf=\"showInsertTableMenu\"\n            (selectSizes)=\"insertTable.emit($event)\" />\n    </mat-menu>\n</ng-container>\n", styles: [":host{display:flex;align-items:center;height:100%}.menu-buttons mat-icon{width:24px;height:24px;font-size:24px}.heading-menu{display:inline-flex;width:210px}.hot-keys{text-align:end;width:auto}.menu-item-text{white-space:nowrap;width:64%}.mat-mdc-menu-item .mat-icon{margin-right:4px;width:28px}.hidden{display:none}.list-marker,.list-number{margin:0 5px}.list-marker mat-icon,.list-number mat-icon{width:70px;height:80px;margin:0 5px}.list-marker mat-icon:hover,.list-number mat-icon:hover{border:none}.list-icon .selected,.list-icon .selected:hover,.list-number .selected,.list-number .selected:hover{border-width:2px;border-style:solid}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$2.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuDropdownsComponent, decorators: [{
             type: Component,
@@ -13594,8 +13721,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], openFileFromDisk: [{
                 type: Output
-            }], addCustomElement: [{
-                type: Output
             }], saveAs: [{
                 type: Output
             }], insertPageBreak: [{
@@ -13627,7 +13752,7 @@ class FontComponent {
     constructor() {
         this.isDisabled = false;
         this.selectFont = new EventEmitter();
-        this.fonts = [DEFAULT_FONT_FAMILY, 'Verdana', 'Arial', 'Times New Roman'];
+        this.fonts = ['Arial', DEFAULT_FONT_FAMILY, 'Times New Roman', 'Verdana'];
         this.font = DEFAULT_FONT_FAMILY;
     }
     set styles(value) {
@@ -14088,11 +14213,11 @@ class EditorToolbarComponent {
         this.insertTable = new EventEmitter();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorToolbarComponent, deps: [{ token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorToolbarComponent, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (addCustomElement)=\"addCustomElement.emit($event)\"\n    (saveAs)=\"saveAs.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "addCustomElement", "saveAs", "insertPageBreak", "createDocument", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditorToolbarComponent, selector: "app-nod-editor-toolbar", outputs: { openFileFromDisk: "openFileFromDisk", addCustomElement: "addCustomElement", saveAs: "saveAs", print: "print", insertPageBreak: "insertPageBreak", createDocument: "createDocument", insertImage: "insertImage", rename: "rename", delete: "delete", openEditMenu: "openEditMenu", redo: "redo", undo: "undo", cutSelected: "cutSelected", copySelected: "copySelected", pasteClipboardData: "pasteClipboardData", selectAll: "selectAll", removeSelected: "removeSelected", insertLink: "insertLink", createElement: "createElement", changeParagraphStyle: "changeParagraphStyle", changeTextStyle: "changeTextStyle", setNumberingTemplateType: "setNumberingTemplateType", removeNumberings: "removeNumberings", insertTable: "insertTable" }, ngImport: i0, template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: MenuDropdownsComponent, selector: "app-nod-menu-dropdowns", inputs: ["showFile", "showEdit", "showInsert", "showLayout", "showFormat"], outputs: ["openFileFromDisk", "saveAs", "insertPageBreak", "createDocument", "rename", "delete", "openEditMenu", "cutSelected", "copySelected", "pasteClipboardData", "selectAll", "removeSelected"] }, { kind: "component", type: ToolbarActionsComponent, selector: "app-nod-toolbar-actions" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditorToolbarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (addCustomElement)=\"addCustomElement.emit($event)\"\n    (saveAs)=\"saveAs.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-toolbar', template: "<app-nod-menu-dropdowns\n    (openFileFromDisk)=\"openFileFromDisk.emit()\"\n    (saveAs)=\"saveAs.emit()\"\n    (print)=\"print.emit()\"\n    (insertPageBreak)=\"insertPageBreak.emit()\"\n    (createDocument)=\"createDocument.emit()\"\n    (insertImage)=\"insertImage.emit()\"\n    (rename)=\"rename.emit()\"\n    (delete)=\"delete.emit()\"\n    (openEditMenu)=\"openEditMenu.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (cutSelected)=\"cutSelected.emit()\"\n    (copySelected)=\"copySelected.emit()\"\n    (pasteClipboardData)=\"pasteClipboardData.emit()\"\n    (selectAll)=\"selectAll.emit()\"\n    (removeSelected)=\"removeSelected.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n<app-nod-toolbar-actions\n    *ngIf=\"(editorService.styles$ | async) && (editorService.isViewOnly$ | async) === false\"\n    (print)=\"print.emit()\"\n    (redo)=\"redo.emit()\"\n    (undo)=\"undo.emit()\"\n    (changeParagraphStyle)=\"changeParagraphStyle.emit($event)\"\n    (changeTextStyle)=\"changeTextStyle.emit($event)\"\n    (setNumberingTemplateType)=\"setNumberingTemplateType.emit($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\"\n    (createElement)=\"createElement.emit($event)\"\n    (insertImage)=\"insertImage.emit()\"\n    (insertLink)=\"insertLink.emit()\"\n    (insertTable)=\"insertTable.emit($event)\" />\n", styles: [":host ::ng-deep{display:flex;position:relative;width:100%;height:32px}app-nod-toolbar-actions{display:flex;position:absolute;align-items:center;justify-content:center;width:100%;height:100%}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }], propDecorators: { openFileFromDisk: [{
                 type: Output
             }], addCustomElement: [{
@@ -14526,9 +14651,11 @@ class RevisionHelper {
     }
     static fillEdgesDefaultStyles(headers, footers) {
         for (const header of headers) {
+            this.fillTablesDefaultStyles(header.tables);
             this.fillDefaultStyles(header);
         }
         for (const footer of footers) {
+            this.fillTablesDefaultStyles(footer.tables);
             this.fillDefaultStyles(footer);
         }
     }