@talrace/ngx-noder 0.0.43 → 0.0.44

package/fesm2022/talrace-ngx-noder.mjs

@@ -390,6 +390,94 @@ class FormatStyleHelper {
     }
 }
 
+class FontMetrics {
+    static { this.storageKey = 'metrics'; }
+    static { this.versionKey = 'editorVersion'; }
+    /**
+     * Key value pairs for calculated sizes of char symbols in HTML element
+     */
+    static { this.metrics = JSON.parse(localStorage.getItem(this.storageKey)) || {}; }
+    /**
+     * Key value pairs for identifiers and font strings
+     */
+    static { this.fontStringMap = {}; }
+    static checkVersion(version) {
+        let identifier = localStorage.getItem(this.versionKey);
+        if (identifier === version) {
+            return;
+        }
+        localStorage.removeItem(this.storageKey);
+        localStorage.setItem(this.versionKey, version);
+    }
+    static measureCharSize(ch, contentStyle) {
+        let identifier = this.fontStringMap[contentStyle];
+        if (!identifier) {
+            identifier = contentStyle.split(' ').join('_');
+            this.fontStringMap[contentStyle] = identifier;
+        }
+        this.metrics[identifier] ??= {};
+        if (!this.metrics[identifier][ch] || isNaN(this.metrics[identifier][ch].font)) {
+            this.metrics[identifier][ch] = this.calculateCanvas(ch, contentStyle);
+            localStorage.setItem(this.storageKey, JSON.stringify(this.metrics));
+        }
+        return this.metrics[identifier][ch];
+    }
+    static calculateCanvas(ch, contentStyle) {
+        this.canvasNode ||= document.createElement('canvas');
+        const fontBaseLine = this.fontBaseline(contentStyle, ch);
+        const context = this.canvasNode.getContext('2d');
+        context.font = contentStyle;
+        const textMetrics = context.measureText(ch);
+        return {
+            width: textMetrics.width,
+            height: textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent,
+            baseline: fontBaseLine.baseline,
+            content: fontBaseLine.content,
+            font: fontBaseLine.font,
+            line: fontBaseLine.line,
+            multiplier: fontBaseLine.multiplier,
+            ascent: textMetrics.fontBoundingBoxAscent,
+            descent: textMetrics.fontBoundingBoxDescent
+        };
+    }
+    static fontBaseline(contentStyle, text) {
+        const container = document.body;
+        this.measureDiv ||= document.createElement('div');
+        this.strut ||= document.createElement('span');
+        if (text === ' ') {
+            text = 'X';
+        }
+        this.measureDiv.style.font = contentStyle;
+        this.measureDiv.style.lineHeight = '1';
+        this.measureDiv.style.position = 'absolute';
+        this.measureDiv.style.visibility = 'hidden';
+        this.measureDiv.style.margin = '0';
+        this.measureDiv.style.padding = '0';
+        this.measureDiv.innerHTML = text;
+        this.strut.style.fontSize = '0';
+        this.strut.style.verticalAlign = 'baseline';
+        this.strut.style.padding = '0 10px';
+        this.measureDiv.classList.add('font-baseline');
+        this.measureDiv.appendChild(this.strut);
+        container.appendChild(this.measureDiv);
+        const computedStyle = window.getComputedStyle(this.measureDiv);
+        const fontSize = parseFloat(computedStyle.fontSize);
+        const baselineHeight = fontSize - this.strut.offsetTop;
+        const strutHeight = this.measureDiv.offsetHeight;
+        const lineHeight = parseFloat(computedStyle.lineHeight) || this.measureDiv.offsetHeight;
+        this.measureDiv.parentNode.removeChild(this.measureDiv);
+        this.measureDiv.innerHTML = '';
+        this.strut.innerHTML = '';
+        return {
+            baseline: baselineHeight,
+            content: strutHeight,
+            font: fontSize,
+            line: lineHeight,
+            multiplier: fontSize / baselineHeight
+        };
+    }
+}
+
 class ElementDataModel {
     constructor(id, guid, type) {
         this.id = id;
@@ -835,8 +923,8 @@ class EditorService {
     changedTableSize(insertIndex, sessionId) {
         this._changedTableSize$.next({ insertIndex, sessionId });
     }
-    changedEdgeSize(edgeType, pageType) {
-        this._changedEdgeSize$.next({ edgeType, pageType });
+    changedEdgeSize(edgeType, pageType, pageWidth, pageHeight) {
+        this._changedEdgeSize$.next({ edgeType, pageType, pageWidth, pageHeight });
     }
     imageLoaded(sessionId) {
         this._imageLoaded$.next(sessionId);
@@ -975,6 +1063,12 @@ class BaseNoderComponent extends DestroyComponent {
     requestStyle() {
         this.editorService.receiveTextStyle(this);
     }
+    searchComponent(_) {
+        return 0;
+    }
+    getSearchResultLocations() {
+        return [];
+    }
     rerender() {
         this.editorService.rerender(this.insertIndex);
     }
@@ -1266,6 +1360,12 @@ class CreateEdgesModel {
     }
 }
 
+class CustomElementSearchResult {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
 class DeleteModel {
     constructor(fields) {
         if (fields) {
@@ -5222,11 +5322,11 @@ class EdgeElementModel {
         }
         Object.assign(this, fields);
     }
-    isNotCopy(type, pageType) {
-        return this.edgeType === type && this.pageType === pageType && this.isOrigin;
+    isNotCopy(type, pageType, pageWidth) {
+        return this.edgeType === type && this.pageType === pageType && this.pageWidth === pageWidth && this.isOrigin;
     }
-    isCopy(type, pageType) {
-        return this.edgeType === type && this.pageType === pageType && !this.isOrigin;
+    isCopy(type, pageType, pageWidth) {
+        return this.edgeType === type && this.pageType === pageType && this.pageWidth === pageWidth && !this.isOrigin;
     }
     isWithin(start, end) {
         return this.container.offsetTop < end && this.container.offsetTop + this.container.offsetHeight > start;
@@ -5484,14 +5584,14 @@ class EdgesLayer {
         this.element.className = 'noder-layer noder-edges-layer';
         this.parentElement.appendChild(this.element);
     }
-    updateSingle(type, pageType) {
+    updateSingle(type, pageType, pageWidth) {
         const pages = [];
-        let index = this.elements.findIndex(x => x.isCopy(type, pageType));
+        let index = this.elements.findIndex(x => x.isCopy(type, pageType, pageWidth));
         while (index !== -1) {
             pages.push(this.elements[index].page);
             DomHelper.removeElement(this.elements[index].container);
             this.elements.splice(index, 1);
-            index = this.elements.findIndex(x => x.isCopy(type, pageType));
+            index = this.elements.findIndex(x => x.isCopy(type, pageType, pageWidth));
         }
         const start = -this.element.offsetTop;
         const end = start + this.parentElement.clientHeight;
@@ -5503,7 +5603,7 @@ class EdgesLayer {
                 this.renderPageFooterComponent(page, start, end);
             }
         }
-        let origin = this.elements.find(x => x.isNotCopy(type, pageType));
+        let origin = this.elements.find(x => x.isNotCopy(type, pageType, pageWidth));
         if (origin) {
             const edge = this.session.customComponents.edges.getComponentByPageType(pageType, type);
             const height = this.session.customComponents.edges.getComponentHeight(edge.instance);
@@ -5536,7 +5636,7 @@ class EdgesLayer {
         while (removeIndex !== -1) {
             const element = this.elements[removeIndex];
             if (element.isOrigin) {
-                const copy = this.elements.find(x => x.isCopy(element.edgeType, element.pageType));
+                const copy = this.elements.find(x => x.isCopy(element.edgeType, element.pageType, element.pageWidth));
                 if (copy) {
                     copy.substitute(element);
                 }
@@ -5559,7 +5659,8 @@ class EdgesLayer {
         return paragraphTop + this.session.displayData.calculateHeightForPage(page - 1);
     }
     renderPageHeaderComponent(page, start, end) {
-        const header = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Header);
+        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page).pageFormatModel;
+        const header = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Header, pageFormat.pageWidth);
         if (header) {
             const height = this.session.customComponents.edges.getComponentHeight(header.instance);
             const edgeTop = this.getEdgeTop(0, page);
@@ -5570,11 +5671,11 @@ class EdgesLayer {
         }
     }
     renderPageFooterComponent(page, start, end) {
-        const footer = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Footer);
-        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page);
+        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page).pageFormatModel;
+        const footer = this.session.customComponents.edges.getComponentByPage(page, EdgeType.Footer, pageFormat.pageWidth);
         if (footer) {
             const height = this.session.customComponents.edges.getComponentHeight(footer.instance);
-            const topOffset = pageFormat.pageFormatModel.pageHeight - height;
+            const topOffset = pageFormat.pageHeight - height;
             const edgeTop = this.getEdgeTop(topOffset, page);
             if (edgeTop > end || edgeTop + height < start) {
                 return;
@@ -5584,24 +5685,30 @@ class EdgesLayer {
     }
     renderEdgeComponent(component, edgeHeight, page, edgeTop) {
         const container = RenderingHelper.createDivContainer('noder-edge-group');
-        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page);
-        const offsetForLittlePages = (this.session.displayData.maxPageWidth - pageFormat.pageFormatModel.pageWidth) / 2;
+        const pageFormat = this.session.displayData.getPageFormatByPageNumber(page).pageFormatModel;
+        const offsetForLittlePages = (this.session.displayData.maxPageWidth - pageFormat.pageWidth) / 2;
         DomHelper.setStyle(container.style, 'height', `${edgeHeight}px`);
         DomHelper.setStyle(container.style, 'top', `${edgeTop}px`);
         DomHelper.setStyle(container.style, 'margin-left', `${offsetForLittlePages}px`);
         DomHelper.setStyle(container.style, 'margin-right', `${offsetForLittlePages}px`);
         const componentElement = component.hostView.rootNodes[0];
         const edge = component.instance;
-        edge.setPageWidth(pageFormat.pageFormatModel.pageWidth);
-        edge.width = pageFormat.pageFormatModel.pageWidth;
-        const isOrigin = !this.elements.some(x => x.isNotCopy(edge.type, edge.model.pageType));
+        edge.width = pageFormat.pageWidth;
+        const isOrigin = !this.elements.some(x => x.isNotCopy(edge.type, edge.model.pageType, pageFormat.pageWidth));
         const element = isOrigin ? componentElement : componentElement.cloneNode(true);
         container.appendChild(element);
         this.element.appendChild(container);
-        const model = new EdgeElementModel({ page, container, pageType: edge.model.pageType, edgeType: edge.type, isOrigin });
+        const model = new EdgeElementModel({
+            page,
+            container,
+            pageType: edge.model.pageType,
+            edgeType: edge.type,
+            isOrigin,
+            pageWidth: pageFormat.pageWidth
+        });
         this.elements.push(model);
         if (!isOrigin) {
-            element.onmouseenter = () => model.replace(this.elements.find(x => x.isNotCopy(model.edgeType, model.pageType)));
+            element.onmouseenter = () => model.replace(this.elements.find(x => x.isNotCopy(model.edgeType, model.pageType, pageFormat.pageWidth)));
         }
     }
 }
@@ -6208,7 +6315,8 @@ class PrintRenderer {
             maxHeight,
             offset: 0,
             pages,
-            scrollTop: 0
+            scrollTop: 0,
+            isVisible: true
         };
     }
     createContent() {
@@ -6708,72 +6816,128 @@ class SaveCommandsHelper {
     }
 }
 
-class Search {
-    constructor() {
-        this.term = '';
+class CustomElementInfo {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class SearchResult {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+}
+
+class SessionModel {
+    constructor(session, renderer, sessionId, parentSessionId, source) {
+        this.session = session;
+        this.renderer = renderer;
+        this.sessionId = sessionId;
+        this.parentSessionId = parentSessionId;
+        this.source = source;
     }
+}
+
+class Search {
     get currentMatchIndex() {
         return this.currentIndex + 1;
     }
     get currentMatch() {
         return this.currentIndex < 0 ? null : this.allMatches[this.currentIndex];
     }
-    setSearchTerm(term) {
-        this.term = term;
+    constructor(editorService) {
+        this.editorService = editorService;
+        this.term = '';
     }
-    findAll(sessions) {
+    findAll(sessions, term) {
         this.allMatches = [];
+        this.searchedSessionIds = [];
+        this.danglingSessions = [];
+        this.tables = [];
+        this.term = term;
+        if (!term?.length) {
+            for (const session of sessions) {
+                session.renderer.updateSearchHighlights([]);
+                session.renderer.updateActiveSearchHighlight(null);
+                session.renderer.updateCustomElementHighlights([]);
+            }
+            this.editorService.setSearchResultCount(0);
+            return;
+        }
         this.assembleRegExp(this.term);
         if (!this.regex) {
             return;
         }
-        for (const { session, sessionId, renderer } of sessions) {
-            const sessionHighlights = [];
-            for (let i = 0; i < session.displayData.paragraphs.length; i++) {
-                const paragraph = session.displayData.paragraphs[i];
-                const matches = paragraph.content.matchAll(this.regex);
-                for (const match of matches) {
-                    const range = new Range(new CursorParagraph(i, match.index), new CursorParagraph(i, match.index + match[0].length));
-                    this.allMatches.push({ sessionId, range });
-                    sessionHighlights.push(range);
-                }
+        const mainSession = sessions[0];
+        this.searchContent(mainSession, sessions);
+        const unsearchedSessions = sessions.filter(x => !this.searchedSessionIds.includes(x.sessionId));
+        for (const session of unsearchedSessions) {
+            if (this.tables.some(x => x.tableSessions.includes(session.sessionId))) {
+                continue;
             }
-            renderer.updateSearchHighlights(sessionHighlights);
+            this.danglingSessions.push(session.sessionId);
+            this.searchContent(session, sessions, 'outsideMainSession');
         }
+        this.editorService.setSearchResultCount(this.allMatches.length);
         if (!this.allMatches.length) {
             this.currentIndex = -1;
-            return;
         }
-        this.currentIndex = this.currentIndex > this.allMatches.length - 1 ? this.allMatches.length - 1 : this.currentIndex;
+        else {
+            this.currentIndex = this.currentIndex > this.allMatches.length - 1 ? this.allMatches.length - 1 : this.currentIndex;
+        }
+        this.updateActiveSearchHighlight(sessions);
     }
-    goNext(selection, currentSessionId) {
+    goNext(selection, currentSessionId, sessions) {
         if (!this.allMatches?.length) {
             return;
         }
-        let newIndex = this.allMatches.findIndex(x => (x.sessionId === currentSessionId &&
-            x.range.start.row === selection.cursor.row &&
-            x.range.start.column > selection.cursor.column) ||
-            (x.sessionId === currentSessionId && x.range.start.row > selection.cursor.row) ||
-            x.sessionId > currentSessionId);
-        this.currentIndex = newIndex < 0 ? 0 : newIndex;
+        const resultsAtCursor = this.allMatches.reduce((acc, match, index) => {
+            if (match.sessionId === currentSessionId && match.range.contains(selection.cursor)) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (resultsAtCursor.length) {
+            const nextResultIndex = resultsAtCursor.findIndex(x => x === this.currentIndex) + 1;
+            if (nextResultIndex < resultsAtCursor.length) {
+                this.currentIndex = resultsAtCursor[nextResultIndex];
+            }
+            else {
+                const nextIndex = resultsAtCursor[resultsAtCursor.length - 1] + 1;
+                this.currentIndex = nextIndex > this.allMatches.length - 1 ? 0 : nextIndex;
+            }
+            this.updateActiveSearchHighlight(sessions);
+            return;
+        }
+        const nextIndex = this.findNextAfterCursor(selection.cursor, currentSessionId);
+        this.currentIndex = nextIndex < 0 ? 0 : nextIndex;
+        this.updateActiveSearchHighlight(sessions);
     }
-    goPrevious(selection, currentSessionId) {
+    goPrevious(selection, currentSessionId, sessions) {
         if (!this.allMatches?.length) {
             return;
         }
-        let prevIndex = -1;
-        for (let i = this.allMatches.length - 1; i >= 0; i--) {
-            const match = this.allMatches[i];
-            if ((match.sessionId === currentSessionId &&
-                match.range.start.row === selection.cursor.row &&
-                match.range.start.column < selection.cursor.column) ||
-                (match.sessionId === currentSessionId && match.range.start.row < selection.cursor.row) ||
-                match.sessionId < currentSessionId) {
-                prevIndex = i;
-                break;
+        const resultsAtCursor = this.allMatches.reduce((acc, match, index) => {
+            if (match.sessionId === currentSessionId && match.range.contains(selection.cursor)) {
+                acc.push(index);
+            }
+            return acc;
+        }, []);
+        if (resultsAtCursor.length) {
+            const nextResultIndex = resultsAtCursor.findIndex(x => x === this.currentIndex) - 1;
+            if (nextResultIndex >= 0) {
+                this.currentIndex = resultsAtCursor[nextResultIndex];
+            }
+            else {
+                const nextIndex = resultsAtCursor[0] - 1;
+                this.currentIndex = nextIndex < 0 ? this.allMatches.length - 1 : nextIndex;
             }
+            this.updateActiveSearchHighlight(sessions);
+            return;
         }
+        const prevIndex = this.findPreviousBeforeCursor(selection.cursor, currentSessionId);
         this.currentIndex = prevIndex >= 0 ? prevIndex : this.allMatches.length - 1;
+        this.updateActiveSearchHighlight(sessions);
     }
     assembleRegExp(term) {
         if (!term) {
@@ -6787,6 +6951,203 @@ class Search {
             this.regex = null;
         }
     }
+    searchContent(currentSession, allSessions, mainSessionPosition = null) {
+        this.searchedSessionIds.push(currentSession.sessionId);
+        const sessionHighlights = [];
+        const customElementHighlights = [];
+        for (let i = 0; i < currentSession.session.displayData.paragraphs.length; i++) {
+            const paragraph = currentSession.session.displayData.paragraphs[i];
+            const paragraphTables = this.checkForTables(paragraph, currentSession, allSessions, i);
+            const paragraphCustomElements = this.checkForCustomElements(paragraph, currentSession);
+            const matches = paragraph.content.matchAll(this.regex);
+            const paragraphMatches = [];
+            for (const match of matches) {
+                paragraphMatches.push({ index: match.index, content: match });
+            }
+            const paragraphContent = [...paragraphTables, ...paragraphCustomElements, ...paragraphMatches].sort((x, y) => x.index - y.index);
+            for (const container of paragraphContent) {
+                if (container.content instanceof BaseNoderComponent) {
+                    const parentRange = new Range(new CursorParagraph(i, container.index), new CursorParagraph(i, container.index + 1));
+                    const customElementMatches = container.content.searchComponent(this.regex);
+                    for (let matchIndex = 0; matchIndex < customElementMatches; matchIndex++) {
+                        this.allMatches.push(new CustomElementSearchResult({
+                            sessionId: currentSession.sessionId,
+                            range: parentRange,
+                            mainSessionPosition: mainSessionPosition ?? new CursorParagraph(i, container.index)
+                        }));
+                        customElementHighlights.push(new CustomElementInfo({ index: matchIndex, parentRange }));
+                    }
+                    continue;
+                }
+                if (Array.isArray(container.content) && container.content.every(x => x instanceof SessionModel)) {
+                    for (const session of container.content) {
+                        this.searchContent(session, allSessions, mainSessionPosition ?? new CursorParagraph(i, container.index));
+                    }
+                    continue;
+                }
+                const match = container.content;
+                if (paragraphTables.some(x => x.index >= match.index && x.index <= match.index + match[0].length) ||
+                    paragraphCustomElements.some(x => x.index >= match.index && x.index <= match.index + match[0].length)) {
+                    continue;
+                }
+                const range = new Range(new CursorParagraph(i, match.index), new CursorParagraph(i, match.index + match[0].length));
+                this.allMatches.push(new SearchResult({
+                    sessionId: currentSession.sessionId,
+                    range,
+                    mainSessionPosition: mainSessionPosition ?? new CursorParagraph(i, match.index)
+                }));
+                sessionHighlights.push(range);
+            }
+        }
+        currentSession.renderer.updateSearchHighlights(sessionHighlights);
+        currentSession.renderer.updateCustomElementHighlights(customElementHighlights);
+    }
+    checkForTables(paragraph, currentSession, allSessions, paragraphIndex) {
+        const result = [];
+        const paragraphTables = currentSession.session.displayData.customComponents.tables.filter(x => x.instance.content.insertIndex >= paragraph.startIndex &&
+            x.instance.content.insertIndex <= paragraph.startIndex + paragraph.content.length);
+        for (const table of paragraphTables) {
+            const tableSessions = [];
+            for (const session of allSessions) {
+                const parentTable = session.renderer.container.closest('app-nod-table');
+                if (parentTable && parentTable === table.location.nativeElement) {
+                    tableSessions.push(session);
+                }
+            }
+            this.tables.push({
+                sessionId: currentSession.sessionId,
+                tableSessions: tableSessions.map(x => x.sessionId),
+                row: paragraphIndex,
+                col: table.instance.content.insertIndex - paragraph.startIndex
+            });
+            result.push({ index: table.instance.content.insertIndex - paragraph.startIndex, content: tableSessions });
+        }
+        return result;
+    }
+    checkForCustomElements(paragraph, currentSession) {
+        const result = [];
+        const customElements = currentSession.session.displayData.customComponents.customElements.filter(x => x.instance.content.insertIndex >= paragraph.startIndex &&
+            x.instance.content.insertIndex <= paragraph.startIndex + paragraph.content.length);
+        for (const element of customElements) {
+            if (element.instance instanceof BaseNoderComponent) {
+                result.push({ index: element.instance.content.insertIndex - paragraph.startIndex, content: element.instance });
+            }
+        }
+        return result;
+    }
+    findNextAfterCursor(startCursor, sessionId) {
+        const closestResultCurrentSession = this.allMatches.find(x => (x.sessionId === sessionId && x.range.start.row === startCursor.row && x.range.start.column >= startCursor.column) ||
+            (x.sessionId === sessionId && x.range.start.row > startCursor.row));
+        if (closestResultCurrentSession) {
+            const tablesBeforeClosestResultCurrentSession = this.tables.filter(x => (x.sessionId === sessionId && x.row > startCursor.row && x.row < closestResultCurrentSession.range.start.row) ||
+                (x.sessionId === sessionId &&
+                    x.row === startCursor.row &&
+                    x.row < closestResultCurrentSession.range.start.row &&
+                    x.col > startCursor.column) ||
+                (x.sessionId === sessionId &&
+                    x.row === closestResultCurrentSession.range.start.row &&
+                    x.col < closestResultCurrentSession.range.start.column));
+            if (!tablesBeforeClosestResultCurrentSession.length) {
+                return this.allMatches.indexOf(closestResultCurrentSession);
+            }
+            const tableSessions = tablesBeforeClosestResultCurrentSession.flatMap(x => x.tableSessions);
+            for (const session of tableSessions) {
+                const result = this.findNextAfterCursor(new CursorParagraph(0, 0), session);
+                if (result >= 0) {
+                    return result;
+                }
+            }
+        }
+        const tablesAfterCursor = this.tables.filter(x => (x.sessionId === sessionId && x.row === startCursor.row && x.col >= startCursor.column) ||
+            (x.sessionId === sessionId && x.row > startCursor.row));
+        const tableSessions = tablesAfterCursor.flatMap(x => x.tableSessions);
+        for (const session of tableSessions) {
+            const result = this.findNextAfterCursor(new CursorParagraph(0, 0), session);
+            if (result >= 0) {
+                return result;
+            }
+        }
+        const table = this.tables.find(x => x.tableSessions.includes(sessionId));
+        if (table) {
+            const nextSessionIndex = table.tableSessions.findIndex(x => x === sessionId) + 1;
+            if (nextSessionIndex < table.tableSessions.length) {
+                return this.findNextAfterCursor(new CursorParagraph(0, 0), table.tableSessions[nextSessionIndex]);
+            }
+            return this.findNextAfterCursor(new CursorParagraph(table.row + 1, table.col + 1), table.sessionId);
+        }
+        if (this.danglingSessions.length) {
+            const danglingSessionsIndex = this.danglingSessions.indexOf(sessionId);
+            const nextSessionIndex = danglingSessionsIndex + 1;
+            if (nextSessionIndex < this.danglingSessions.length) {
+                return this.findNextAfterCursor(new CursorParagraph(0, 0), this.danglingSessions[nextSessionIndex]);
+            }
+        }
+        return -1;
+    }
+    findPreviousBeforeCursor(startCursor, sessionId) {
+        const closestResultCurrentSession = this.allMatches.findLast(x => (x.sessionId === sessionId && x.range.start.row === startCursor.row && x.range.start.column < startCursor.column) ||
+            (x.sessionId === sessionId && x.range.start.row < startCursor.row));
+        if (closestResultCurrentSession) {
+            const tablesAfterClosestResultCurrentSession = this.tables.filter(x => (x.sessionId === sessionId && x.row < startCursor.row && x.row > closestResultCurrentSession.range.start.row) ||
+                (x.sessionId === sessionId &&
+                    x.row === startCursor.row &&
+                    x.row > closestResultCurrentSession.range.start.row &&
+                    x.col < startCursor.column) ||
+                (x.sessionId === sessionId &&
+                    x.row === closestResultCurrentSession.range.start.row &&
+                    x.col > closestResultCurrentSession.range.start.column));
+            if (!tablesAfterClosestResultCurrentSession.length) {
+                return this.allMatches.indexOf(closestResultCurrentSession);
+            }
+            const tableSessions = tablesAfterClosestResultCurrentSession.flatMap(x => x.tableSessions);
+            for (const session of tableSessions.toReversed()) {
+                const result = this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), session);
+                if (result >= 0) {
+                    return result;
+                }
+            }
+        }
+        const tablesBeforeCursor = this.tables.filter(x => (x.sessionId === sessionId && x.row === startCursor.row && x.col < startCursor.column) ||
+            (x.sessionId === sessionId && x.row < startCursor.row));
+        const tableSessions = tablesBeforeCursor.flatMap(x => x.tableSessions);
+        for (const session of tableSessions.toReversed()) {
+            const result = this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), session);
+            if (result >= 0) {
+                return result;
+            }
+        }
+        const table = this.tables.find(x => x.tableSessions.includes(sessionId));
+        if (table) {
+            const currentSessionIndex = table.tableSessions.findIndex(x => x === sessionId);
+            if (currentSessionIndex > 0) {
+                return this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), table.tableSessions[currentSessionIndex - 1]);
+            }
+            return this.findPreviousBeforeCursor(new CursorParagraph(table.row - 1, table.col - 1), table.sessionId);
+        }
+        if (this.danglingSessions.length) {
+            const currentSessionIndex = this.danglingSessions.indexOf(sessionId);
+            if (currentSessionIndex > 0) {
+                return this.findPreviousBeforeCursor(new CursorParagraph(Infinity, Infinity), this.danglingSessions[currentSessionIndex - 1]);
+            }
+        }
+        return -1;
+    }
+    updateActiveSearchHighlight(sessions) {
+        this.editorService.setCurrentSearchResultIndex(this.currentMatchIndex);
+        for (const session of sessions) {
+            if (this.currentMatch && session.sessionId === this.currentMatch.sessionId) {
+                const range = this.currentMatch instanceof CustomElementSearchResult
+                    ? new CustomElementInfo({
+                        index: this.currentMatch.index,
+                        parentRange: this.currentMatch.range
+                    })
+                    : this.currentMatch.range;
+                session.renderer.updateActiveSearchHighlight(range);
+                continue;
+            }
+            session.renderer.updateActiveSearchHighlight(null);
+        }
+    }
 }
 
 class Selection {
@@ -7253,6 +7614,7 @@ class Editor {
         this.edgeElementTagName = 'APP-NOD-EDGE';
         this.imageTagName = 'APP-NOD-IMAGE';
         this.subscriptions = [];
+        this.emojiRegex = /\p{Extended_Pictographic}(?:\p{Emoji_Modifier}|\u{200D}\p{Extended_Pictographic})*/gu;
         this.isRerenderSubscriptionOpen = true;
         this.rerenderResize = () => {
             this.mainRenderer.onResize(true);
@@ -7279,8 +7641,8 @@ class Editor {
         this.initResizeListener();
         this.focus();
         this.session.applyToolbarStyles();
-        this.search = new Search();
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription());
+        this.search = new Search(editorService);
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.commandCreatedForEdges());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -7332,13 +7694,14 @@ class Editor {
         this.removeSelected();
     }
     insert(text) {
+        const sanitizedText = text.replace(this.emojiRegex, ' ');
         if (this.selection.isEmpty) {
             const textStyle = ContentStyleHelper.combineTextStyles(null, this.editorService.styles);
-            this.insertText(text, textStyle);
+            this.insertText(sanitizedText, textStyle);
         }
         else {
             const index = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
-            const insertText = new InsertTextModel({ insertIndex: index, text });
+            const insertText = new InsertTextModel({ insertIndex: index, text: sanitizedText });
             this.replaceBy(new ReplaceModel({ insertText }));
         }
     }
@@ -7461,6 +7824,7 @@ class Editor {
         let lastRow = this.selection.cursor.row === endPoint.row ? endPoint.row : Infinity;
         this.renderer.updateLines(this.selection.cursor.row, lastRow);
         this.renderer.updateCursor();
+        this.onContentChange();
         this.rerenderMarker();
     }
     replaceBy(model) {
@@ -7586,45 +7950,27 @@ class Editor {
             });
         }
     }
-    find(term, focusNext = false) {
-        this.search.setSearchTerm(term);
-        if (!term?.length) {
-            for (const session of this.regulatorService.sessions) {
-                session.renderer.updateSearchHighlights([]);
-                session.renderer.updateActiveSearchHighlight(null);
-            }
-            this.editorService.setSearchResultCount(0);
-            return;
-        }
-        this.search.findAll(this.regulatorService.sessions);
-        this.editorService.setSearchResultCount(this.search.allMatches.length);
-        if (focusNext && this.search.allMatches?.length) {
-            this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId);
-            this.updateActiveSearchHighlight();
-            this.mainRenderer.scrollCursorIntoView(new CursorParagraph(this.search.currentMatch.range.start.row, this.search.currentMatch.range.start.column));
-        }
-        else {
-            this.updateActiveSearchHighlight();
-        }
+    find(term) {
+        this.search.findAll(this.regulatorService.sessions, term);
     }
     findNext() {
         if (!this.search.allMatches?.length) {
             return;
         }
-        this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId);
+        this.search.goNext(this.selection, this.regulatorService.currentSession.sessionId, this.regulatorService.sessions);
         this.setCursorAtSearchResult();
-        this.updateActiveSearchHighlight();
     }
     findPrevious() {
         if (!this.search.allMatches?.length) {
             return;
         }
-        this.search.goPrevious(this.selection, this.regulatorService.currentSession.sessionId);
-        this.updateActiveSearchHighlight();
+        this.search.goPrevious(this.selection, this.regulatorService.currentSession.sessionId, this.regulatorService.sessions);
         this.setCursorAtSearchResult();
     }
     replace() {
-        if (!this.search.allMatches?.length || this.search.term === this.replaceTerm) {
+        if (!this.search.currentMatch ||
+            this.search.term === this.replaceTerm ||
+            this.search.currentMatch instanceof CustomElementSearchResult) {
             return;
         }
         if (this.replaceTerm) {
@@ -7638,14 +7984,17 @@ class Editor {
             const replaceModel = new ReplaceModel({ insertText, delete: deleteModel });
             this.saveReplaceToHistory(this.search.currentMatch.range, replaceModel);
             const endPosition = this.session.replace(replaceModel);
-            this.onDocumentChange(new Range(this.search.currentMatch.range.start, endPosition));
+            const range = new Range(this.search.currentMatch.range.start, endPosition);
+            let lastRow = range.start.row === range.end.row ? range.end.row : Infinity;
+            this.renderer.updateLines(range.start.row, lastRow);
         }
         else {
             const range = this.search.currentMatch.range;
             this.saveRemoveToHistory(range);
             this.session.remove(range);
         }
-        this.find(this.search.term);
+        this.onContentChange();
+        this.findNext();
     }
     undo() {
         const undo = this.history.popUndoOperation();
@@ -8361,7 +8710,7 @@ class Editor {
         const scalingRatio = this.customPageWidth ? ScalingHelper.getRatio(this.customPageWidth, pageWidth) : 1;
         this.editorService.setPageFormat(this.model.pageFormats[0]);
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
-        this.regulatorService.addMainSession(this.model, pageWidth, scalingRatio, this.container);
+        this.regulatorService.addMainSession(this.model, scalingRatio, this.container);
     }
     onSelectionChange() {
         this.session.applyToolbarStyles();
@@ -8369,6 +8718,7 @@ class Editor {
         if (this.selection.isEmpty) {
             this.renderer.updateCursor();
         }
+        this.regulatorService.updateCursorPosition();
         this.editorService.setHasSelection(!this.selection.isEmpty);
         const position = this.mainSession.displayData.positionToIndex(this.selection.selectedRange.start);
         const pageFormat = this.mainSession.displayData.getPageFormatAtPosition(position);
@@ -8577,7 +8927,10 @@ class Editor {
     }
     searchOptionSubscriptions() {
         return [
-            this.editorService.searchTerm$.subscribe(searchTerm => this.find(searchTerm, true)),
+            this.editorService.searchTerm$.subscribe(searchTerm => {
+                this.find(searchTerm);
+                this.findNext();
+            }),
             this.editorService.searchNext$.subscribe(() => this.findNext()),
             this.editorService.searchPrevious$.subscribe(() => this.findPrevious())
         ];
@@ -8674,8 +9027,10 @@ class Editor {
         });
     }
     changedEdgeSizeSubscription() {
-        return this.editorService.changedEdgeSize$.subscribe(({ edgeType, pageType }) => {
-            this.mainSession.displayData.pagesFormat.forEach(x => x.updatePageVerticalData(edgeType, pageType));
+        return this.editorService.changedEdgeSize$.subscribe(event => {
+            this.mainSession.displayData.pagesFormat
+                .filter(x => x.pageFormatModel.pageWidth === event.pageWidth)
+                .forEach(x => x.updatePageVerticalData(event.edgeType, event.pageType));
             this.mainSession.displayData.processParagraphsProperties(0);
         });
     }
@@ -8819,6 +9174,11 @@ class Editor {
             this.clipboardData = data;
         });
     }
+    commandCreatedForEdges() {
+        return this.commandsService.createCommand$
+            .pipe(filter(x => !!x.targets.find(y => !!y.edgeData)))
+            .subscribe(() => this.regulatorService.forceUpdateDataForEdges());
+    }
     updateEdgeSubscription() {
         return this.editorService.updateEdges$.subscribe(sessionId => {
             let existed = this.mainSession.customComponents.edges.headersComponents.findIndex(x => x.instance.sessionId === sessionId);
@@ -8853,7 +9213,7 @@ class Editor {
         });
         this.selection.navigateFileStart();
         this.isRerenderSubscriptionOpen = false;
-        this.regulatorService.addMainSession(this.model, pageWidth, scalingRatio, this.container);
+        this.regulatorService.addMainSession(this.model, scalingRatio, this.container);
         this.isRerenderSubscriptionOpen = true;
         this.textInput = new TextInput(this.mainRenderer.container);
         this.mainRenderer.textarea = this.textInput.input;
@@ -8873,27 +9233,14 @@ class Editor {
     changeCellsWidth(rows, widthScale) {
         rows.forEach(row => row.cells.forEach(cell => (cell.width = Math.round(cell.width / widthScale))));
     }
-    updateActiveSearchHighlight() {
-        this.editorService.setCurrentSearchResultIndex(this.search.currentMatchIndex);
-        if (!this.search.currentMatch) {
-            for (const session of this.regulatorService.sessions) {
-                session.renderer.updateActiveSearchHighlight(null);
-            }
-            return;
-        }
-        for (const session of this.regulatorService.sessions) {
-            if (session.sessionId === this.search.currentMatch.sessionId) {
-                session.renderer.updateActiveSearchHighlight(this.search.currentMatch.range);
-                continue;
-            }
-            session.renderer.updateActiveSearchHighlight(null);
-        }
-    }
     setCursorAtSearchResult() {
+        if (this.search.currentMatch.mainSessionPosition !== 'outsideMainSession') {
+            this.mainRenderer.scrollCursorIntoView(this.search.currentMatch.mainSessionPosition, 0.5);
+        }
         this.regulatorService.setCurrentSessionById(this.search.currentMatch.sessionId);
-        const resultCursor = new CursorParagraph(this.search.currentMatch.range.start.row, this.search.currentMatch.range.start.column);
-        this.selection.placeCursor(resultCursor);
-        this.mainRenderer.scrollCursorIntoView(resultCursor);
+        const sessionModel = this.regulatorService.getSessionModel(this.search.currentMatch.sessionId);
+        sessionModel.session.selection.placeCursor(this.search.currentMatch.range.start);
+        this.renderer.updateCursor();
     }
 }
 
@@ -8908,6 +9255,7 @@ class EditorSearchBarComponent {
         this.isReplace = false;
         this.searchResultCount$ = editorService.searchResultCount$;
         this.searchResultIndex$ = editorService.currentSearchResultIndex$;
+        this.isViewOnly$ = editorService.isViewOnly$;
     }
     ngOnInit() {
         this.searchControl.valueChanges
@@ -8919,6 +9267,9 @@ class EditorSearchBarComponent {
         this.editorService.dialogSearchTerm$
             .pipe(distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
             .subscribe(x => this.searchControl.setValue(x));
+        this.isViewOnly$
+            .pipe(filter(x => x), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => (this.isReplace = false));
     }
     ngOnDestroy() {
         this.editorService.setNewSearchTerm('');
@@ -8945,7 +9296,7 @@ class EditorSearchBarComponent {
         this.editorService.replaceCurrentSearchResult();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, deps: [{ token: EditorService }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onleft\"></mat-icon>\n        </button>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findNext()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n<div\n    class=\"replace-form\"\n    *ngIf=\"isReplace\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"replaceControl\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            (keydown.enter)=\"replace()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-button\n        (click)=\"replace()\">\n        {{ 'NODER.LABEL.REPLACE' | translate }}\n    </button>\n</div>\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorSearchBarComponent, isStandalone: true, selector: "app-nod-editor-search-bar", providers: [ExternalElementService], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onleft\"></mat-icon>\n        </button>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findNext()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i6.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i5$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5$1.MatLabel, selector: "mat-label" }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorSearchBarComponent, decorators: [{
             type: Component,
@@ -8958,7 +9309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         MatTooltipModule,
                         ReactiveFormsModule,
                         TranslateModule
-                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-bar', template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onleft\"></mat-icon>\n        </button>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findNext()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n<div\n    class=\"replace-form\"\n    *ngIf=\"isReplace\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n        <input\n            matInput\n            [formControl]=\"replaceControl\"\n            spellcheck=\"false\"\n            autocomplete=\"off\"\n            (keydown.enter)=\"replace()\" />\n    </mat-form-field>\n    <button\n        type=\"button\"\n        mat-button\n        (click)=\"replace()\">\n        {{ 'NODER.LABEL.REPLACE' | translate }}\n    </button>\n</div>\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"] }]
+                    ], providers: [ExternalElementService], changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-search-bar', template: "@let searchResultCount = searchResultCount$ | async;\n@let searchResultIndex = searchResultIndex$ | async;\n@let isViewOnly = isViewOnly$ | async;\n<div class=\"line search-form\">\n    <mat-form-field\n        color=\"accent\"\n        floatLabel=\"auto\"\n        appearance=\"outline\">\n        <mat-label>{{ 'NODER.LABEL.SEARCH_FOR' | translate }}</mat-label>\n        <input\n            matInput\n            #searchInput\n            [formControl]=\"searchControl\"\n            (keydown.enter)=\"findNext()\" />\n    </mat-form-field>\n    <div>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findPrev()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onleft\"></mat-icon>\n        </button>\n        <button\n            type=\"button\"\n            mat-icon-button\n            (click)=\"findNext()\">\n            <mat-icon\n                fontSet=\"noder-icon\"\n                fontIcon=\"icon-arrow-onright\"></mat-icon>\n        </button>\n    </div>\n</div>\n@if (isReplace) {\n    <div class=\"replace-form\">\n        <mat-form-field\n            color=\"accent\"\n            floatLabel=\"auto\"\n            appearance=\"outline\">\n            <mat-label>{{ 'NODER.LABEL.REPLACE_WITH' | translate }}</mat-label>\n            <input\n                matInput\n                [formControl]=\"replaceControl\"\n                spellcheck=\"false\"\n                autocomplete=\"off\"\n                (keydown.enter)=\"replace()\" />\n        </mat-form-field>\n        <button\n            type=\"button\"\n            mat-button\n            (click)=\"replace()\">\n            {{ 'NODER.LABEL.REPLACE' | translate }}\n        </button>\n    </div>\n}\n<div class=\"search-options\">\n    <button\n        type=\"button\"\n        [disabled]=\"isViewOnly\"\n        mat-icon-button\n        matTooltip=\"Toggle Replace Mode\"\n        (click)=\"setReplace()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ isReplace ? 'icon-arrow-up' : 'icon-arrow-down' }}\"></mat-icon>\n    </button>\n    <div class=\"counter\">\n        @if (searchResultCount) {\n            <span>\n                {{ 'NODER.COMPLEX_LABEL.OF_COUNTER' | translate: { current: searchResultIndex, total: searchResultCount ?? 0 } }}\n            </span>\n        } @else {\n            <span>{{ 'NODER.LABEL.NO_RESULTS' | translate }}</span>\n        }\n    </div>\n    <button\n        type=\"button\"\n        mat-icon-button\n        [matTooltip]=\"'NODER.LABEL.CLOSE' | translate\"\n        (click)=\"onClose()\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-cancel-thin\"></mat-icon>\n    </button>\n</div>\n", styles: [":host{min-height:56px;max-width:100%;display:block;font-size:10px;border-style:solid;border-radius:0 0 4px 4px;border-width:1px;border-top:none}:host ::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none}.close-icon{position:absolute;right:1px;top:1px}.search-form,.replace-form,.search-options{margin:8px 6px 0 0;display:flex;gap:8px}mat-form-field{padding-left:10px}.mdc-button{font-size:12px;padding:0 8px;min-width:unset}.search-options{line-height:40px}.search-options .counter{text-align:center;flex:1}.mat-mdc-input-element{font-size:10px}.replace-form .mdc-button{width:80px}\n"] }]
         }], ctorParameters: () => [{ type: EditorService }, { type: i0.DestroyRef }], propDecorators: { searchInput: [{
                 type: ViewChild,
                 args: ['searchInput']
@@ -8967,94 +9318,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
 const EXTERNAL_ELEMENT_SIDENAV = new InjectionToken('EXTERNAL_ELEMENT_SIDENAV');
 const EXTERNAL_ELEMENT_SERVICE = new InjectionToken('EXTERNAL_ELEMENT_SERVICE');
 
-class FontMetrics {
-    static { this.storageKey = 'metrics'; }
-    static { this.versionKey = 'editorVersion'; }
-    /**
-     * Key value pairs for calculated sizes of char symbols in HTML element
-     */
-    static { this.metrics = JSON.parse(localStorage.getItem(this.storageKey)) || {}; }
-    /**
-     * Key value pairs for identifiers and font strings
-     */
-    static { this.fontStringMap = {}; }
-    static checkVersion(version) {
-        let identifier = localStorage.getItem(this.versionKey);
-        if (identifier === version) {
-            return;
-        }
-        localStorage.removeItem(this.storageKey);
-        localStorage.setItem(this.versionKey, version);
-    }
-    static measureCharSize(ch, contentStyle) {
-        let identifier = this.fontStringMap[contentStyle];
-        if (!identifier) {
-            identifier = contentStyle.split(' ').join('_');
-            this.fontStringMap[contentStyle] = identifier;
-        }
-        this.metrics[identifier] ??= {};
-        if (!this.metrics[identifier][ch] || isNaN(this.metrics[identifier][ch].font)) {
-            this.metrics[identifier][ch] = this.calculateCanvas(ch, contentStyle);
-            localStorage.setItem(this.storageKey, JSON.stringify(this.metrics));
-        }
-        return this.metrics[identifier][ch];
-    }
-    static calculateCanvas(ch, contentStyle) {
-        this.canvasNode ||= document.createElement('canvas');
-        const fontBaseLine = this.fontBaseline(contentStyle, ch);
-        const context = this.canvasNode.getContext('2d');
-        context.font = contentStyle;
-        const textMetrics = context.measureText(ch);
-        return {
-            width: textMetrics.width,
-            height: textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent,
-            baseline: fontBaseLine.baseline,
-            content: fontBaseLine.content,
-            font: fontBaseLine.font,
-            line: fontBaseLine.line,
-            multiplier: fontBaseLine.multiplier,
-            ascent: textMetrics.fontBoundingBoxAscent,
-            descent: textMetrics.fontBoundingBoxDescent
-        };
-    }
-    static fontBaseline(contentStyle, text) {
-        const container = document.body;
-        this.measureDiv ||= document.createElement('div');
-        this.strut ||= document.createElement('span');
-        if (text === ' ') {
-            text = 'X';
-        }
-        this.measureDiv.style.font = contentStyle;
-        this.measureDiv.style.lineHeight = '1';
-        this.measureDiv.style.position = 'absolute';
-        this.measureDiv.style.visibility = 'hidden';
-        this.measureDiv.style.margin = '0';
-        this.measureDiv.style.padding = '0';
-        this.measureDiv.innerHTML = text;
-        this.strut.style.fontSize = '0';
-        this.strut.style.verticalAlign = 'baseline';
-        this.strut.style.padding = '0 10px';
-        this.measureDiv.classList.add('font-baseline');
-        this.measureDiv.appendChild(this.strut);
-        container.appendChild(this.measureDiv);
-        const computedStyle = window.getComputedStyle(this.measureDiv);
-        const fontSize = parseFloat(computedStyle.fontSize);
-        const baselineHeight = fontSize - this.strut.offsetTop;
-        const strutHeight = this.measureDiv.offsetHeight;
-        const lineHeight = parseFloat(computedStyle.lineHeight) || this.measureDiv.offsetHeight;
-        this.measureDiv.parentNode.removeChild(this.measureDiv);
-        this.measureDiv.innerHTML = '';
-        this.strut.innerHTML = '';
-        return {
-            baseline: baselineHeight,
-            content: strutHeight,
-            font: fontSize,
-            line: lineHeight,
-            multiplier: fontSize / baselineHeight
-        };
-    }
-}
-
 class ComponentService {
     constructor(applicationRef, injector) {
         this.applicationRef = applicationRef;
@@ -9416,6 +9679,7 @@ class NoderTableCellComponent {
         this.regulatorService = regulatorService;
         this.isHighlighted = false;
         this.resizerBorder = ResizerSide;
+        this.isVisible = false;
         this.pagesCountChangedHandler = (event) => {
             if (this._allParagraphsHeight === event.pageHeight) {
                 return;
@@ -9424,9 +9688,14 @@ class NoderTableCellComponent {
             this.heightChanged(this.rowIndex, this.cellIndex, event.pageHeight);
         };
     }
+    ngAfterViewInit() {
+        this.intersectionObserver = this.initializeIntersectionObserver();
+        this.intersectionObserver.observe(this.container.nativeElement);
+    }
     ngOnDestroy() {
         this.session?.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.regulatorService.removeSession(this.sessionId);
+        this.intersectionObserver?.disconnect();
     }
     initialize() {
         const marginModel = new MarginModel({
@@ -9458,6 +9727,22 @@ class NoderTableCellComponent {
     addEventListeners() {
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
     }
+    initializeIntersectionObserver() {
+        const options = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.01
+        };
+        return new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const wasVisible = this.isVisible;
+                this.isVisible = entry.isIntersecting;
+                if (this.isVisible !== wasVisible) {
+                    this.renderer.setVisibility(this.isVisible);
+                }
+            });
+        }, options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, deps: [{ token: EditorService }, { token: RegulatorService }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderTableCellComponent, isStandalone: false, selector: "app-nod-table-cell", inputs: { table: "table", cell: "cell", rowIndex: "rowIndex", cellIndex: "cellIndex", columnIndex: "columnIndex", width: "width", parentSessionId: "parentSessionId", generalProperties: "generalProperties", heightChanged: "heightChanged", startResizing: "startResizing" }, host: { properties: { "class.highlighted": "this.isHighlighted", "attr.data-session-id": "this.sessionId" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }], ngImport: i0, template: "<div\n    *ngIf=\"cellIndex === 0\"\n    class=\"resizer left-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Left)\"></div>\n<div\n    #container\n    class=\"edit-container\"></div>\n<div class=\"highlight-container\"></div>\n<div\n    class=\"resizer right-border\"\n    (mousedown)=\"onStartResizing($event, resizerBorder.Right)\"></div>\n", styles: [".highlight-container{visibility:hidden;position:absolute;width:100%;height:100%;background-color:#5ea8f766;pointer-events:none;overflow:hidden}:host{display:flex;position:relative;min-height:19px;height:100%;background:transparent}:host.highlighted .highlight-container{visibility:visible}.edit-container{min-height:1px;overflow:hidden}.left-border{left:-6px}.resizer{cursor:col-resize;width:11px;height:100%;position:absolute;z-index:1}.right-border{right:-6px}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
@@ -9503,6 +9788,144 @@ class RowDataModel {
     }
 }
 
+var LineStyles;
+(function (LineStyles) {
+    LineStyles[LineStyles["SolidLine"] = 0] = "SolidLine";
+    LineStyles[LineStyles["RoundDot"] = 1] = "RoundDot";
+    LineStyles[LineStyles["SquareDot"] = 2] = "SquareDot";
+    LineStyles[LineStyles["Dash"] = 3] = "Dash";
+    LineStyles[LineStyles["DashDot"] = 4] = "DashDot";
+    LineStyles[LineStyles["LongDash"] = 5] = "LongDash";
+    LineStyles[LineStyles["LongDashDot"] = 6] = "LongDashDot";
+    LineStyles[LineStyles["LongDashDotDot"] = 7] = "LongDashDotDot";
+    LineStyles[LineStyles["Single"] = 8] = "Single";
+    LineStyles[LineStyles["Thick"] = 9] = "Thick";
+    LineStyles[LineStyles["Double"] = 10] = "Double";
+    LineStyles[LineStyles["Dotted"] = 11] = "Dotted";
+    LineStyles[LineStyles["Dashed"] = 12] = "Dashed";
+    LineStyles[LineStyles["DotDash"] = 13] = "DotDash";
+    LineStyles[LineStyles["DotDotDash"] = 14] = "DotDotDash";
+    LineStyles[LineStyles["Triple"] = 15] = "Triple";
+    LineStyles[LineStyles["ThinThickSmallGap"] = 16] = "ThinThickSmallGap";
+    LineStyles[LineStyles["ThickThinSmallGap"] = 17] = "ThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickThinSmallGap"] = 18] = "ThinThickThinSmallGap";
+    LineStyles[LineStyles["ThinThickMediumGap"] = 19] = "ThinThickMediumGap";
+    LineStyles[LineStyles["ThickThinMediumGap"] = 20] = "ThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickThinMediumGap"] = 21] = "ThinThickThinMediumGap";
+    LineStyles[LineStyles["ThinThickLargeGap"] = 22] = "ThinThickLargeGap";
+    LineStyles[LineStyles["ThickThinLargeGap"] = 23] = "ThickThinLargeGap";
+    LineStyles[LineStyles["ThinThickThinLargeGap"] = 24] = "ThinThickThinLargeGap";
+    LineStyles[LineStyles["Wave"] = 25] = "Wave";
+    LineStyles[LineStyles["DoubleWave"] = 26] = "DoubleWave";
+    LineStyles[LineStyles["DashSmallGap"] = 27] = "DashSmallGap";
+    LineStyles[LineStyles["DashDotStroked"] = 28] = "DashDotStroked";
+    LineStyles[LineStyles["ThreeDEmboss"] = 29] = "ThreeDEmboss";
+    LineStyles[LineStyles["ThreeDEngrave"] = 30] = "ThreeDEngrave";
+    LineStyles[LineStyles["Outset"] = 31] = "Outset";
+    LineStyles[LineStyles["Inset"] = 32] = "Inset";
+    LineStyles[LineStyles["Nil"] = 33] = "Nil";
+})(LineStyles || (LineStyles = {}));
+
+var Positions;
+(function (Positions) {
+    Positions[Positions["Top"] = 0] = "Top";
+    Positions[Positions["Right"] = 1] = "Right";
+    Positions[Positions["Bottom"] = 2] = "Bottom";
+    Positions[Positions["Left"] = 3] = "Left";
+    Positions[Positions["All"] = 4] = "All";
+    Positions[Positions["InsideHorizontal"] = 5] = "InsideHorizontal";
+    Positions[Positions["InsideVertical"] = 6] = "InsideVertical";
+})(Positions || (Positions = {}));
+
+class TableCellHelper {
+    static setCellBorders(cell, borders) {
+        if (!borders?.length || !cell) {
+            return;
+        }
+        borders.forEach(x => {
+            const style = this.getBorderStyle(x);
+            this.setCellBorder(cell, x.position, style);
+        });
+    }
+    static getBorderStyle(border) {
+        if (border.lineStyle === LineStyles.Nil) {
+            return 'none';
+        }
+        let style = `${border.width}pt`;
+        if (border.lineStyle) {
+            style += ` ${this.getBorderLineStyle(border.lineStyle)}`;
+        }
+        if (border.color && border.color !== 'auto') {
+            style += ` ${border.color}`;
+        }
+        return style;
+    }
+    static getBorderLineStyle(lineStyle) {
+        switch (lineStyle) {
+            case LineStyles.RoundDot:
+            case LineStyles.SquareDot:
+            case LineStyles.Dotted:
+                return 'dotted';
+            case LineStyles.Dash:
+            case LineStyles.Dashed:
+            case LineStyles.LongDash:
+            case LineStyles.DashSmallGap:
+            case LineStyles.DashDot:
+            case LineStyles.LongDashDot:
+            case LineStyles.DotDash:
+            case LineStyles.DashDotStroked:
+            case LineStyles.LongDashDotDot:
+            case LineStyles.DotDotDash:
+                return 'dashed';
+            case LineStyles.Double:
+            case LineStyles.DoubleWave:
+                return 'double';
+            case LineStyles.Wave:
+                return 'wavy'; // wavy is supported in some browsers
+            case LineStyles.ThreeDEmboss:
+            case LineStyles.ThreeDEngrave:
+                return 'ridge'; // approximate replacement for 3D effects
+            case LineStyles.Outset:
+                return 'outset';
+            case LineStyles.Inset:
+                return 'inset';
+            case LineStyles.Nil:
+                return 'none';
+            case LineStyles.ThinThickSmallGap: // complex combined styles are not supported
+            case LineStyles.ThickThinSmallGap:
+            case LineStyles.ThinThickThinSmallGap:
+            case LineStyles.ThinThickMediumGap:
+            case LineStyles.ThickThinMediumGap:
+            case LineStyles.ThinThickThinMediumGap:
+            case LineStyles.ThinThickLargeGap:
+            case LineStyles.ThickThinLargeGap:
+            case LineStyles.ThinThickThinLargeGap:
+            case LineStyles.Triple: // triple not support in css, set solid as default
+            case LineStyles.Single:
+            case LineStyles.SolidLine:
+            case LineStyles.Thick:
+            default:
+                return 'solid';
+        }
+    }
+    static setCellBorder(cell, position, style) {
+        switch (position) {
+            case Positions.Top:
+                cell.style.borderTop = style;
+                break;
+            case Positions.Bottom:
+                cell.style.borderBottom = style;
+                break;
+            case Positions.Left:
+                cell.style.borderLeft = style;
+                break;
+            case Positions.Right:
+                cell.style.borderRight = style;
+                break;
+        }
+    }
+}
+
 class SelectionRangeModel {
     constructor(rowIndexes, cellIndexes) {
         this.rowIndexes = rowIndexes;
@@ -10169,6 +10592,9 @@ class NoderTableComponent extends BaseNoderComponent {
                 continue;
             }
             const cell = this.tableEl.rows[rowIndex].insertCell(currentTargetIndex);
+            if (this.table.rows[rowIndex].cells[modelCellIndex].borders) {
+                TableCellHelper.setCellBorders(cell, this.table.rows[rowIndex].cells[modelCellIndex].borders);
+            }
             const componentRef = this.componentService.generateAndAttachComponent(cell, NoderTableCellComponent, {
                 table: this.table,
                 cell: this.table.rows[rowIndex].cells[modelCellIndex],
@@ -10621,8 +11047,8 @@ class PageFormat {
         }
         const pageTypes = this.customComponents.edges.getUniquePageTypes();
         this.pagesVerticalData = pageTypes.map(pageType => {
-            const headerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Header);
-            const footerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Footer);
+            const headerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Header, this.pageFormatModel.pageWidth);
+            const footerHeight = this.customComponents.edges.getComponentHeightByPageType(pageType, EdgeType.Footer, this.pageFormatModel.pageWidth);
             const marginTop = Math.max(headerHeight, this.pageFormatModel.marginTop);
             const marginBottom = Math.max(footerHeight, this.pageFormatModel.marginBottom);
             return new PageVerticalDataModel({
@@ -10635,7 +11061,7 @@ class PageFormat {
     }
     updatePageVerticalData(edgeType, pageType) {
         const pageVerticalData = this.pagesVerticalData.find(x => x.pageType === pageType);
-        const componentHeight = this.customComponents.edges.getComponentHeightByType(pageType, edgeType);
+        const componentHeight = this.customComponents.edges.getComponentHeightByType(pageType, edgeType, this.pageFormatModel.pageWidth);
         if (edgeType === EdgeType.Header) {
             pageVerticalData.marginTop =
                 componentHeight > this.pageFormatModel.marginTop ? componentHeight : this.pageFormatModel.marginTop;
@@ -10685,7 +11111,7 @@ class TextLineInfo {
                 this.paddingLeft = indent.left + (diff - indent.left - indent.right) / 2 + (indent.hanging - indent.firstLine) / 2;
                 break;
             case Alignment$1.right:
-                this.paddingLeft = diff - indent.right;
+                this.paddingLeft = diff - indent.right + indent.hanging - indent.firstLine;
                 break;
             default:
                 this.paddingLeft = indent.left;
@@ -10837,8 +11263,11 @@ class DisplayData extends EventEmitting {
         this.pagesFormat = [];
         this.allPagesHeight = 0;
         this.tabTokens = [];
+        this.updateDataForModel();
+    }
+    updateDataForModel() {
         this.paragraphs = this.splitByParagraphs(this.model.content).map(x => new ParagraphInfoModel({ content: x }));
-        this.pagesFormat = pageFormatModels.map(x => new PageFormat(x, pagesSpace, customComponents));
+        this.pagesFormat = this.pageFormatModels.map(x => new PageFormat(x, this.pagesSpace, this.customComponents));
     }
     recreatePageFormatsNotMainSession(width) {
         this.pagesFormat = [
@@ -11052,7 +11481,11 @@ class DisplayData extends EventEmitting {
             this.allPagesHeight += (lastPageNumber - firstPageNumber + 1) * (pageHeight + this.pagesSpace) + this.pagesSpace;
         });
         const lastPageNumber = this.paragraphs[this.paragraphs.length - 1].paragraphSettings.lastPageNumber;
-        this.emit('pagesCountChanged', { pagesCount: lastPageNumber, pageHeight: this.allPagesHeight + 2 * this.pagesSpace });
+        this.emit('pagesCountChanged', {
+            pagesCount: lastPageNumber,
+            pageHeight: this.allPagesHeight + 2 * this.pagesSpace,
+            pageWidth: this.pagesFormat[0].pageFormatModel.pageWidth // variable needed only for headers and footers (in headers and footers only 1 pageFormat)
+        });
     }
     getAllParagraphsHeight() {
         return this.paragraphs.reduce((sum, x) => sum + x.paragraphSettings.height, 0);
@@ -11784,18 +12217,20 @@ class NoderEdgeComponent extends DestroyComponent {
         this.translateService = translateService;
         this.cdr = cdr;
         this.initialized = false;
+        this.isVisible = false;
         this.pagesCountChangedHandler = (event) => {
             if (this._height === event.pageHeight) {
                 return;
             }
             this._height = event.pageHeight;
             this.applyHeight();
-            this.editorService.changedEdgeSize(this.type, this.model.pageType);
+            this.editorService.changedEdgeSize(this.type, this.model.pageType, event.pageWidth, this._height);
         };
     }
     ngOnDestroy() {
         this.session?.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.regulatorService.removeSession(this.sessionId);
+        this.intersectionObserver?.disconnect();
         super.ngOnDestroy();
     }
     initialize() {
@@ -11814,14 +12249,8 @@ class NoderEdgeComponent extends DestroyComponent {
             this.edgeNameByType = this.getEdgeNameByType();
             this.cdr.detectChanges();
         });
-    }
-    setPageWidth(width) {
-        if (width === this.width) {
-            return;
-        }
-        this.session.displayData.recreatePageFormatsNotMainSession(width);
-        this.session.rerender(0);
-        this.edgeSession.renderer.loop.schedule({ full: true });
+        this.intersectionObserver = this.initializeIntersectionObserver();
+        this.intersectionObserver.observe(this.container.nativeElement);
     }
     enterEditMode() {
         DomHelper.addCssClass(this.container.nativeElement, this.editModeClass);
@@ -11864,6 +12293,22 @@ class NoderEdgeComponent extends DestroyComponent {
         const height = this.contentHeight > maxHeight ? maxHeight : this.contentHeight;
         DomHelper.setStyle(this.typeContainer.nativeElement.style, this.typeContainerPosition, `${height}px`);
     }
+    initializeIntersectionObserver() {
+        const options = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.01
+        };
+        return new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const wasVisible = this.isVisible;
+                this.isVisible = entry.isIntersecting;
+                if (this.isVisible !== wasVisible) {
+                    this.renderer.setVisibility(this.isVisible);
+                }
+            });
+        }, options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i3$1.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: NoderEdgeComponent, isStandalone: false, selector: "app-nod-edge", inputs: { model: "model", generalProperties: "generalProperties", margins: "margins", width: "width", parentSessionId: "parentSessionId", isEvenEdgesExist: "isEvenEdgesExist", 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\">\n    <span>{{ edgeNameByType }}</span>\n</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 }); }
 }
@@ -11893,10 +12338,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             }] } });
 
 class Edges {
-    constructor(componentService, headers, footers, margins, pageWidth, parentSessionId, generalProperties) {
+    constructor(componentService, headers, footers, margins, pageFormats, parentSessionId, generalProperties) {
         this.componentService = componentService;
         this.margins = margins;
-        this.pageWidth = pageWidth;
+        this.pageFormats = pageFormats;
         this.parentSessionId = parentSessionId;
         this.generalProperties = generalProperties;
         this.headersComponents = [];
@@ -11913,23 +12358,19 @@ class Edges {
         }
     }
     createEdges(headerModel, footerModel) {
-        this.headersComponents.push(this.componentService.generateComponent(NoderEdgeComponent, {
-            model: headerModel,
-            margins: new MarginModel({ ...this.margins, bottom: 0 }),
-            type: EdgeType.Header,
-            width: this.pageWidth,
-            generalProperties: this.generalProperties,
-            parentSessionId: this.parentSessionId,
-            isEvenEdgesExist: false
-        }));
-        this.footersComponents.push(this.componentService.generateComponent(NoderEdgeComponent, {
-            model: footerModel,
-            margins: new MarginModel({ ...this.margins, top: 0 }),
-            type: EdgeType.Footer,
-            width: this.pageWidth,
+        this.headersComponents.push(...this.createEdgesByPageFormats(headerModel, new MarginModel({ ...this.margins, bottom: 0 }), EdgeType.Header, false));
+        this.footersComponents.push(...this.createEdgesByPageFormats(footerModel, new MarginModel({ ...this.margins, top: 0 }), EdgeType.Footer, false));
+    }
+    createEdgesByPageFormats(model, margins, type, isEvenEdgesExist) {
+        const uniqueWidth = new Set(this.pageFormats.map(x => x.pageWidth));
+        return Array.from(uniqueWidth).map(width => this.componentService.generateComponent(NoderEdgeComponent, {
+            model,
+            margins,
+            type,
+            width,
             generalProperties: this.generalProperties,
             parentSessionId: this.parentSessionId,
-            isEvenEdgesExist: false
+            isEvenEdgesExist
         }));
     }
     removeEdges(pageType) {
@@ -11941,21 +12382,22 @@ class Edges {
     getTypeBySessionId(sessionId) {
         let component = this.headersComponents.find(x => x.instance.sessionId === sessionId);
         if (component) {
-            return { type: EdgeType.Header, pageType: component.instance.model.pageType };
+            return { type: EdgeType.Header, pageType: component.instance.model.pageType, pageWidth: component.instance.width };
         }
         component = this.footersComponents.find(x => x.instance.sessionId === sessionId);
-        return { type: EdgeType.Footer, pageType: component.instance.model.pageType };
+        return { type: EdgeType.Footer, pageType: component.instance.model.pageType, pageWidth: component.instance.width };
     }
-    getComponentByPage(page, type) {
+    getComponentByPage(page, type, pageWidth) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
-        return this.getComponent(components, page);
+        return this.getComponents(components, page).find(x => x.instance.width === pageWidth);
     }
     getComponentByPageType(pageType, type) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
         return components.find(x => x.instance.model.pageType === pageType);
     }
-    getComponentHeightByPageType(pageType, type) {
-        const component = this.getComponentByPageType(pageType, type);
+    getComponentHeightByPageType(pageType, type, pageWidth) {
+        const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
+        const component = components.find(x => x.instance.model.pageType === pageType && x.instance.width === pageWidth);
         if (!component) {
             return 0;
         }
@@ -11967,9 +12409,9 @@ class Edges {
         const height = instance.contentHeight;
         return height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : height;
     }
-    getComponentHeightByType(pageType, type) {
+    getComponentHeightByType(pageType, type, pageWidth) {
         const components = type === EdgeType.Header ? this.headersComponents : this.footersComponents;
-        const height = components.find(x => x.instance.model.pageType === pageType)?.instance.contentHeight ?? 0;
+        const height = components.find(x => x.instance.model.pageType === pageType && x.instance.width === pageWidth)?.instance.contentHeight ?? 0;
         return height > this.generalProperties.maxEdgeHeight ? this.generalProperties.maxEdgeHeight : height;
     }
     toggleEditMode(isEdit) {
@@ -12013,26 +12455,21 @@ class Edges {
                 return 1;
             return 0;
         })) {
-            const componentRef = this.componentService.generateComponent(NoderEdgeComponent, {
-                model,
-                margins,
-                type,
-                width: this.pageWidth,
-                generalProperties: this.generalProperties,
-                parentSessionId: this.parentSessionId,
-                isEvenEdgesExist
-            });
-            resultComponents.push(componentRef);
+            resultComponents.push(...this.createEdgesByPageFormats(model, margins, type, isEvenEdgesExist));
         }
         return resultComponents;
     }
-    getComponent(edgeComponents, page) {
-        const defaultComponent = edgeComponents.find(x => x.instance.model.pageType === PageType.Default);
+    getComponents(edgeComponents, page) {
+        const defaultComponent = edgeComponents.filter(x => x.instance.model.pageType === PageType.Default);
+        let targetType = PageType.Default;
         if (page === 1) {
-            return edgeComponents.find(x => x.instance.model.pageType === PageType.First) || defaultComponent;
+            targetType = PageType.First;
         }
-        const targetType = page % 2 === 0 ? PageType.Even : PageType.Default;
-        return edgeComponents.find(x => x.instance.model.pageType === targetType) || defaultComponent;
+        else if (page % 2 === 0) {
+            targetType = PageType.Even;
+        }
+        const edges = edgeComponents.filter(x => x.instance.model.pageType === targetType);
+        return edges.length > 0 ? edges : defaultComponent;
     }
 }
 
@@ -12456,7 +12893,7 @@ class EditSession {
     get scrollBarHeight() {
         return this.scrollBar?.element.clientHeight ?? 0; // only main session is scrollable
     }
-    constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar) {
+    constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar, edgeType) {
         this.displayData = displayData;
         this.sessionId = sessionId;
         this.customContentService = customContentService;
@@ -12467,6 +12904,7 @@ class EditSession {
         this.customComponents = customComponents;
         this.type = type;
         this.scrollBar = scrollBar;
+        this.edgeType = edgeType;
         this.tokenRe = new RegExp('^[' + UnicodeHelper.wordChars + '\\$_]+', 'g');
         this.nonTokenRe = new RegExp('^(?:[^' + UnicodeHelper.wordChars + '\\$_]|\\s])+', 'g');
     }
@@ -13085,6 +13523,10 @@ class EditSession {
         OperationsHelper.removeEdges(document.headers, document.footers, pageType);
         this.customComponents.edges.removeEdges(pageType);
     }
+    updateDisplayData() {
+        this.displayData.updateDataForModel();
+        this.displayData.updateNextLineIndexes(0, this.displayData.paragraphs.length - 1);
+    }
 }
 
 class GeneralPropertiesModel {
@@ -13216,7 +13658,8 @@ class RenderChangesModel {
             this.scroll ||
             this.size ||
             this.text ||
-            this.dragAndDrop);
+            this.dragAndDrop ||
+            this.visibilityChanged);
     }
     constructor(fields) {
         this.cursor = false;
@@ -13229,6 +13672,7 @@ class RenderChangesModel {
         this.size = false;
         this.text = false;
         this.dragAndDrop = false;
+        this.visibilityChanged = false;
         if (!fields) {
             return;
         }
@@ -13361,6 +13805,16 @@ class HighlightLayer {
         const left = rangeInfo.leftPos;
         this.renderHighlight(this.getMarkerStyle(height, width, top, left), cssClass);
     }
+    drawCustomElementHighlight(elementInfo, cssClass, screenParentRange) {
+        const elementIndex = this.session.displayData.paragraphs[elementInfo.parentRange.start.row].startIndex + elementInfo.parentRange.start.column;
+        const element = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === elementIndex);
+        if (!element) {
+            return;
+        }
+        const top = this.getTop(screenParentRange.start.row);
+        const info = this.getRangeInfo(this.session, screenParentRange);
+        this.renderHighlight(this.getMarkerStyle(elementInfo.location.height, elementInfo.location.width, top + elementInfo.location.top, info.leftPos + elementInfo.location.left), cssClass);
+    }
     getRangeInfo(session, range) {
         const start = range.start;
         const end = range.end;
@@ -13383,34 +13837,43 @@ class SearchHighlightLayer extends HighlightLayer {
         this.className = 'noder-highlight';
         this.selectedClassName = 'noder-selected-highlight';
         this.markers = [];
+        this.customElementsRanges = [];
     }
     update(config) {
-        if (!config) {
+        if (!config?.isVisible) {
             return;
         }
         this.config = config;
         this.selectionIndex = 0;
+        this.getVisibleCustomElementResults(config);
         if (this.active) {
-            const screenRange = this.active.toScreenRange(this.session);
-            if (!screenRange.isEmpty &&
-                (!config.visibleRange ||
-                    (screenRange.start.row >= config.visibleRange.startScreenLine &&
-                        screenRange.end.row <= config.visibleRange.endScreenLine))) {
-                if (screenRange.isSingleLine) {
-                    this.drawSingleLineMarker(screenRange, this.selectedClassName);
-                }
-                else {
-                    this.drawMultiLineMarker(screenRange, this.selectedClassName);
+            if (this.active instanceof Range) {
+                const screenRange = this.active.toScreenRange(this.session);
+                if (!screenRange.isEmpty &&
+                    (!config.visibleRange ||
+                        (screenRange.start.row >= config.visibleRange.startScreenLine &&
+                            screenRange.end.row <= config.visibleRange.endScreenLine))) {
+                    if (screenRange.isSingleLine) {
+                        this.drawSingleLineMarker(screenRange, this.selectedClassName);
+                    }
+                    else {
+                        this.drawMultiLineMarker(screenRange, this.selectedClassName);
+                    }
                 }
             }
+            else {
+                this.updateActiveResult();
+                const screenParentRange = this.active.parentRange.toScreenRange(this.session);
+                this.drawCustomElementHighlight(this.active, this.selectedClassName, screenParentRange);
+            }
         }
-        if (this.markers) {
+        if (this.markers?.length) {
             const ranges = this.markers
                 .map(x => x.toScreenRange(this.session))
                 .filter(x => !x.isEmpty &&
                 (!config.visibleRange ||
                     (x.start.row >= config.visibleRange.startScreenLine && x.end.row <= config.visibleRange.endScreenLine)) &&
-                !x.isEqual(this.active));
+                ((this.active instanceof Range && !x.isEqual(this.active)) || !(this.active instanceof Range)));
             for (const range of ranges) {
                 if (!range.isEmpty) {
                     if (range.isSingleLine) {
@@ -13422,12 +13885,80 @@ class SearchHighlightLayer extends HighlightLayer {
                 }
             }
         }
+        if (this.customElementsRanges?.length) {
+            for (const element of this.customElementsRanges) {
+                if (!element.location ||
+                    (this.active &&
+                        this.active instanceof CustomElementInfo &&
+                        this.active.parentRange.isEqual(element.parentRange) &&
+                        this.active.location.isEqual(element.location))) {
+                    continue;
+                }
+                const screenParentRange = element.parentRange.toScreenRange(this.session);
+                if (!config.visibleRange ||
+                    (screenParentRange.start.row >= config.visibleRange.startScreenLine &&
+                        screenParentRange.end.row <= config.visibleRange.endScreenLine)) {
+                    this.drawCustomElementHighlight(element, this.className, screenParentRange);
+                }
+            }
+        }
         if (this.selectionIndex !== -1) {
             while (this.selectionIndex < this.element.childElementCount) {
                 this.element.removeChild(this.element.lastChild);
             }
         }
     }
+    getVisibleCustomElementResults(config) {
+        if (!this.customElementsRanges?.length) {
+            return;
+        }
+        const groupedByParentRange = [];
+        for (const element of this.customElementsRanges) {
+            if (element.location) {
+                continue;
+            }
+            const existingGroup = groupedByParentRange.find(group => group.range.isEqual(element.parentRange));
+            if (existingGroup) {
+                existingGroup.elements.push(element);
+            }
+            else {
+                groupedByParentRange.push({
+                    range: element.parentRange,
+                    elements: [element]
+                });
+            }
+        }
+        if (!groupedByParentRange.length) {
+            return;
+        }
+        for (const group of groupedByParentRange) {
+            const screenParentRange = group.range.toScreenRange(this.session);
+            if (config.visibleRange &&
+                (screenParentRange.start.row < config.visibleRange.startScreenLine ||
+                    screenParentRange.end.row > config.visibleRange.endScreenLine)) {
+                continue;
+            }
+            const insertIndex = this.session.displayData.paragraphs[group.range.start.row].startIndex + group.range.start.column;
+            const customElement = this.session.customComponents.customElements.find(x => x.instance.content.insertIndex === insertIndex);
+            const newLocations = customElement.instance.getSearchResultLocations();
+            if (!newLocations?.length) {
+                continue;
+            }
+            for (let i = 0; i < newLocations.length; i++) {
+                group.elements.find(x => x.index === i).location = newLocations[i];
+            }
+        }
+    }
+    updateActiveResult() {
+        if (this.active instanceof CustomElementInfo && !this.active.location) {
+            const active = this.customElementsRanges.find(x => this.active instanceof CustomElementInfo &&
+                x.index === this.active.index &&
+                x.parentRange.isEqual(this.active.parentRange));
+            if (active) {
+                this.active.location = active.location;
+            }
+        }
+    }
 }
 
 class SelectionLayer extends HighlightLayer {
@@ -13483,8 +14014,10 @@ class Renderer extends EventEmitting {
                 endLine: 0,
                 endScreenLine: 0,
                 endScreenFullLine: 0
-            }
+            },
+            isVisible: false
         };
+        this.isVisible = false;
         this.changes = new RenderChangesModel();
         this.textareaSize = {
             height: 1,
@@ -13512,7 +14045,13 @@ class Renderer extends EventEmitting {
             return;
         }
         // text, scrolling and resize changes can cause the view port size to change
-        if (changes.full || changes.size || changes.text || changes.lines || changes.scroll) {
+        if (changes.full ||
+            changes.size ||
+            changes.text ||
+            changes.lines ||
+            changes.scroll ||
+            changes.search ||
+            changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.content.style, 'width', `${this.layerConfig.width}px`);
@@ -13538,6 +14077,9 @@ class Renderer extends EventEmitting {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
+        if (changes.visibilityChanged) {
+            this.renderSearchHighlights();
+        }
         this.session.onRendered();
     }
     /**
@@ -13586,11 +14128,13 @@ class Renderer extends EventEmitting {
             this.loop.schedule({ search: true });
         }
     }
+    updateCustomElementHighlights(ranges) {
+        this.searchHighlightLayer.customElementsRanges = ranges;
+        this.loop.schedule({ search: true });
+    }
     updateActiveSearchHighlight(active) {
-        if (!this.searchHighlightLayer.active?.isEqual(active)) {
-            this.searchHighlightLayer.active = active;
-            this.loop.schedule({ search: true });
-        }
+        this.searchHighlightLayer.active = active;
+        this.loop.schedule({ search: true });
     }
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
@@ -13609,12 +14153,24 @@ class Renderer extends EventEmitting {
         this.dragAndDropSelectionLayer.marker = null;
         this.loop.schedule({ dragAndDrop: true });
     }
+    setVisibility(isVisible) {
+        if (this.isVisible !== isVisible) {
+            this.isVisible = isVisible;
+            this.loop.schedule({ visibilityChanged: true });
+        }
+    }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
     updateText() {
         this.loop.schedule({ text: true });
     }
+    updateTextAndCursor() {
+        this.loop.schedule({ text: true, cursor: true });
+    }
+    updateMarker() {
+        this.loop.schedule({ marker: true });
+    }
     updateCursor() {
         this.loop.schedule({ cursor: true });
     }
@@ -13686,7 +14242,8 @@ class Renderer extends EventEmitting {
             contentRange: new DistanceModel({ start: 0, end: displayData.paragraphs.filter(x => x.paragraphSettings).length - 1 }),
             maxHeight,
             offset: 0,
-            scrollTop: this.session.scrollTop
+            scrollTop: this.session.scrollTop,
+            isVisible: this.isVisible
         };
         return changes;
     }
@@ -13787,16 +14344,6 @@ class ScrollBar {
     }
 }
 
-class SessionModel {
-    constructor(session, renderer, sessionId, parentSessionId, source) {
-        this.session = session;
-        this.renderer = renderer;
-        this.sessionId = sessionId;
-        this.parentSessionId = parentSessionId;
-        this.source = source;
-    }
-}
-
 class VirtualRenderer {
     get cursorLayer() {
         return this.renderer.cursorLayer;
@@ -13850,7 +14397,13 @@ class VirtualRenderer {
             return;
         }
         // text, scrolling and resize changes can cause the view port size to change
-        if (changes.full || changes.size || changes.text || changes.lines || changes.scroll) {
+        if (changes.full ||
+            changes.size ||
+            changes.text ||
+            changes.lines ||
+            changes.scroll ||
+            changes.search ||
+            changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.renderer.content, 0, -this.layerConfig.offset);
             DomHelper.setStyle(this.renderer.content.style, 'width', `${this.layerConfig.width}px`);
@@ -13880,6 +14433,9 @@ class VirtualRenderer {
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
+        if (changes.visibilityChanged) {
+            this.renderSearchHighlights();
+        }
     }
     /**
      * Triggers a resize of the editor
@@ -13946,6 +14502,9 @@ class VirtualRenderer {
     updateSearchHighlights(ranges) {
         this.renderer.updateSearchHighlights(ranges);
     }
+    updateCustomElementHighlights(ranges) {
+        this.renderer.updateCustomElementHighlights(ranges);
+    }
     updateActiveSearchHighlight(active) {
         this.renderer.updateActiveSearchHighlight(active);
     }
@@ -13961,9 +14520,18 @@ class VirtualRenderer {
     updateText() {
         this.renderer.updateText();
     }
+    updateTextAndCursor() {
+        this.renderer.updateTextAndCursor();
+    }
+    updateMarker() {
+        this.renderer.updateMarker();
+    }
     updateCursor() {
         this.renderer.updateCursor();
     }
+    setVisibility(isVisible) {
+        this.renderer.setVisibility(isVisible);
+    }
     scrollSelectionIntoView(anchor, lead, offset) {
         // first scroll anchor into view then scroll lead into view
         this.scrollCursorIntoView(anchor, offset);
@@ -14048,7 +14616,8 @@ class VirtualRenderer {
             offset: 0,
             visibleRange,
             scrollTop: this.scrollBar.scrollTop,
-            pages: visibleRange.pages
+            pages: visibleRange.pages,
+            isVisible: true
         };
         return changes;
     }
@@ -14223,7 +14792,7 @@ class RegulatorService {
         this.sessions = [];
         this.sessionIdIncrement = 0;
     }
-    addMainSession(model, pageWidth, scalingRatio, container) {
+    addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
         const defaultPageFormat = model.pageFormats[model.pageFormats?.length - 1];
         const properties = new GeneralPropertiesModel({
@@ -14242,7 +14811,7 @@ class RegulatorService {
             footer: defaultPageFormat.marginFooter > 0 ? defaultPageFormat.marginFooter : 0
         });
         const edgesMargins = new MarginModel({ ...pageMargin, top: pageMargin.header, bottom: pageMargin.footer });
-        const edges = new Edges(this.componentService, model.headers, model.footers, edgesMargins, pageWidth, sessionId, properties);
+        const edges = new Edges(this.componentService, model.headers, model.footers, edgesMargins, model.pageFormats, sessionId, properties);
         properties.numberingInfo = {};
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: edges };
         const displayData = new DisplayData(model, properties, sessionId, model.pageFormats, DocumentInfo.pagesSpace, customComponents, this.customContentService, this.editorService);
@@ -14275,7 +14844,7 @@ class RegulatorService {
         const sessionId = ++this.sessionIdIncrement;
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
         const displayData = new DisplayData(component.model, component.generalProperties, sessionId, this.getPageFormats(component.margins, component.width), 0, customComponents, this.customContentService, this.editorService);
-        const session = new EditSession(displayData, sessionId, this.customContentService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge');
+        const session = new EditSession(displayData, sessionId, this.customContentService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge', null, component.type);
         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);
@@ -14317,11 +14886,44 @@ class RegulatorService {
     setCurrentSession(session) {
         const previous = this.currentSession;
         this.selection.clearSelection();
-        this.currentSession.renderer.hideCursor();
+        if (this.currentSession.session.isEdge()) {
+            this.sessions.forEach(x => {
+                if (x.session.edgeType === this.currentSession.session.edgeType) {
+                    x.renderer.hideCursor();
+                }
+            });
+        }
+        else {
+            this.currentSession.renderer.hideCursor();
+        }
         this.currentSession.renderer.updateSelection(this.selection.selectedRange);
         this.currentSession = session;
-        this.currentSession.renderer.showCursor();
-        this.arrangeEdgesForSessionChange(previous.session, session.session);
+        if (session.session.isEdge()) {
+            this.sessions.forEach(x => {
+                if (x.session.edgeType === session.session.edgeType) {
+                    x.renderer.showCursor();
+                    this.arrangeEdgesForSessionChange(previous.session, x.session);
+                }
+            });
+        }
+        else {
+            this.currentSession.renderer.showCursor();
+            this.arrangeEdgesForSessionChange(previous.session, session.session);
+        }
+    }
+    updateCursorPosition() {
+        if (!this.currentSession.session.isEdge()) {
+            return;
+        }
+        this.sessions.forEach(x => {
+            if (x.session.edgeType === this.currentSession.session.edgeType) {
+                x.renderer.updateSelection(this.selection.selectedRange);
+                if (this.selection.isEmpty) {
+                    x.renderer.updateCursor();
+                }
+                x.renderer.updateMarker();
+            }
+        });
     }
     getSessionModel(sessionId) {
         return this.sessions.find(x => x.sessionId === sessionId);
@@ -14378,8 +14980,19 @@ class RegulatorService {
     }
     arrangeEdgeChange(sessionId) {
         const edgeSessionId = this.getEdgeSessionId(sessionId);
-        const { type, pageType } = this.mainSession.session.customComponents.edges.getTypeBySessionId(edgeSessionId);
-        this.mainSession.renderer.edgesLayer.updateSingle(type, pageType);
+        const { type, pageType, pageWidth } = this.mainSession.session.customComponents.edges.getTypeBySessionId(edgeSessionId);
+        this.mainSession.renderer.edgesLayer.updateSingle(type, pageType, pageWidth);
+    }
+    forceUpdateDataForEdges() {
+        if (this.currentSession.session.isEdge()) {
+            return;
+        }
+        this.sessions.forEach(x => {
+            if (x.session.isEdge() && x.session.edgeType === this.currentSession.session.edgeType) {
+                x.session.updateDisplayData();
+                x.renderer.updateTextAndCursor();
+            }
+        });
     }
     getEdgeSessionId(sessionId) {
         let session = this.getSession(sessionId);
@@ -17125,6 +17738,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: ['class.noder-modal']
             }] } });
 
+class SearchResultLocation {
+    constructor(init) {
+        Object.assign(this, init);
+    }
+    isEqual(other) {
+        return this.width === other.width && this.height === other.height && this.top === other.top && this.left === other.left;
+    }
+}
+
 class DocumentNameModel {
     constructor(fields) {
         if (fields) {
@@ -17186,5 +17808,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map