@talrace/ngx-noder 19.0.49 → 19.0.51

package/fesm2022/talrace-ngx-noder.mjs

@@ -6890,41 +6890,33 @@ class DisplayTokenHelper {
             for (let i = 0; i < text.length; i++) {
                 result.push(this.getSymbolToken(text[i], fontString, index));
                 result[i].customIndex = i;
+                result[i].customText = text;
             }
-            return result.length ? result : [this.getSymbolToken(' ', fontString, index)];
+            return result;
         }
-        const ascent = component.instance.ascent() ?? 0;
-        const descent = component.instance.descent() ?? 0;
-        return [
-            new DisplayToken({
-                width: component.instance.width(),
-                height: ascent + descent,
-                font: FontMetrics.measureCharSize('0', fontString).font,
-                ascent,
-                descent,
-                displayValue: this.getComponentDisplayValue(component.instance),
-                index
-            })
-        ];
+        return [this.getComponentToken(component, fontString, index)];
     }
-    static getTableTokens(component, fontString, index, withNumbering) {
-        if (!withNumbering) {
-            return this.getComponentTokens(component, fontString, index);
-        }
-        const spaceToken = this.getSymbolToken(' ', fontString, index);
-        spaceToken.customIndex = 0;
+    static getComponentToken(component, fontString, index) {
         const ascent = component.instance.ascent() ?? 0;
         const descent = component.instance.descent() ?? 0;
-        const tableToken = new DisplayToken({
+        return new DisplayToken({
             width: component.instance.width(),
             height: ascent + descent,
             font: FontMetrics.measureCharSize('0', fontString).font,
             ascent,
             descent,
-            displayValue: DisplayValue.table,
-            index,
-            customIndex: 1
+            displayValue: this.getComponentDisplayValue(component.instance),
+            index
         });
+    }
+    static getTableTokens(component, fontString, index, withNumbering) {
+        const tableToken = this.getComponentToken(component, fontString, index);
+        if (!withNumbering) {
+            return [tableToken];
+        }
+        const spaceToken = this.getSymbolToken(' ', fontString, index);
+        spaceToken.customIndex = 0;
+        tableToken.customIndex = 1;
         return [spaceToken, tableToken];
     }
     static getBreakDisplayValue(breakType) {
@@ -7146,7 +7138,8 @@ class LineInfoHelper {
                     line.customTexts.push({
                         index: indexInParagraph,
                         start: token.customIndex,
-                        end: token.customIndex + 1
+                        end: token.customIndex + 1,
+                        text: token.customText
                     });
                 }
             }
@@ -8368,14 +8361,14 @@ class NoderEdgeComponent extends DestroyComponent {
         // todo need make in diff Task for get correct contentHeight
         return this.session.displayData.pagesFormat[0].defaultVerticalData.contentHeight;
     }
-    constructor(regulatorService, editorService, translateService, cdr) {
+    constructor(regulatorService, editorService, translateService, cdr, elementRef) {
         super();
         this.regulatorService = regulatorService;
         this.editorService = editorService;
         this.translateService = translateService;
         this.cdr = cdr;
+        this.elementRef = elementRef;
         this.initialized = false;
-        this.isVisible = false;
         this.pagesCountChangedHandler = (event) => {
             if (this._height === event.pageHeight) {
                 return;
@@ -8388,11 +8381,10 @@ class NoderEdgeComponent extends DestroyComponent {
     ngOnDestroy() {
         this.session?.displayData.removeEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.regulatorService.removeSession(this.sessionId);
-        this.intersectionObserver?.disconnect();
         super.ngOnDestroy();
     }
     initialize() {
-        this.edgeSession = this.regulatorService.addEdgeSession(this);
+        this.edgeSession = this.regulatorService.addEdgeSession(this, this.elementRef.nativeElement);
         this.sessionId = this.edgeSession.sessionId;
         this.container.nativeElement.parentElement.setAttribute('data-session-id', `${this.sessionId}`);
         DomHelper.setStyle(this.container.nativeElement.style, 'overflow', 'hidden');
@@ -8407,8 +8399,6 @@ class NoderEdgeComponent extends DestroyComponent {
             this.edgeNameByType = this.getEdgeNameByType();
             this.cdr.detectChanges();
         });
-        this.intersectionObserver = this.initializeIntersectionObserver();
-        this.intersectionObserver.observe(this.container.nativeElement);
     }
     enterEditMode() {
         DomHelper.addCssClass(this.container.nativeElement, this.editModeClass);
@@ -8451,29 +8441,13 @@ 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: i6.TranslateService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, deps: [{ token: RegulatorService }, { token: EditorService }, { token: i6.TranslateService }, { token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderEdgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-edge', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
-        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i6.TranslateService }, { type: i0.ChangeDetectorRef }], propDecorators: { model: [{
+        }], ctorParameters: () => [{ type: RegulatorService }, { type: EditorService }, { type: i6.TranslateService }, { type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { model: [{
                 type: Input
             }], generalProperties: [{
                 type: Input
@@ -9982,7 +9956,6 @@ class CommentHighlightLayer extends HighlightLayer {
         const comments = this.session.model.comments;
         if (!config?.isVisible || !comments?.length || !this.enabled) {
             this.element.innerHTML = '';
-            this.commentService.removeCommentsFromRender(this.session.sessionId);
             return;
         }
         this.config = config;
@@ -10013,6 +9986,12 @@ class CommentHighlightLayer extends HighlightLayer {
             }
         }
     }
+    removeSessionComments() {
+        this.commentService.removeCommentsFromRender(this.session.sessionId);
+    }
+    removeComment(id) {
+        this.commentService.removeCommentFromRender(this.session.sessionId, id);
+    }
     setSelectedComment(id) {
         if (this.selectedCommentId) {
             this.commentService.setCommentSelected(this.selectedCommentId, false);
@@ -10022,6 +10001,9 @@ class CommentHighlightLayer extends HighlightLayer {
             this.commentService.setCommentSelected(id);
         }
     }
+    clearSessionComments() {
+        this.commentService.removeCommentsFromRender(this.session.sessionId);
+    }
     requestCommentRender(highlight, id) {
         const element = Array.isArray(highlight) ? highlight[0] : highlight;
         const rect = element.getBoundingClientRect();
@@ -10183,6 +10165,7 @@ class RenderChangesModel {
             this.selection ||
             this.search ||
             this.grammar ||
+            this.commentHighlights ||
             this.comments ||
             this.scroll ||
             this.size ||
@@ -10198,6 +10181,7 @@ class RenderChangesModel {
         this.selection = false;
         this.search = false;
         this.grammar = false;
+        this.commentHighlights = false;
         this.comments = false;
         this.scroll = false;
         this.size = false;
@@ -10686,7 +10670,7 @@ class Renderer extends EventEmitting {
             changes.scroll ||
             changes.search ||
             changes.grammar ||
-            changes.comments ||
+            changes.commentHighlights ||
             changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.content, 0, -this.layerConfig.offset);
@@ -10713,8 +10697,8 @@ class Renderer extends EventEmitting {
         if (changes.grammar) {
             this.renderGrammarHighlights();
         }
-        if (changes.comments) {
-            this.renderComments();
+        if (changes.commentHighlights) {
+            this.renderCommentHighlights();
         }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
@@ -10722,7 +10706,7 @@ class Renderer extends EventEmitting {
         if (changes.visibilityChanged) {
             this.renderSearchHighlights();
             this.renderGrammarHighlights();
-            this.renderComments();
+            this.renderCommentHighlights();
             this.visibilitySubject.next(this.isVisible);
         }
         this.session.onRendered();
@@ -10820,6 +10804,9 @@ class Renderer extends EventEmitting {
     setVisibility(isVisible) {
         if (this.isVisible !== isVisible) {
             this.isVisible = isVisible;
+            if (!isVisible) {
+                this.commentsLayer.clearSessionComments();
+            }
             this.loop.schedule({ visibilityChanged: true });
         }
     }
@@ -10890,13 +10877,22 @@ class Renderer extends EventEmitting {
     renderGrammarHighlights() {
         this.grammarHighlightLayer.update(this.layerConfig);
     }
-    renderComments() {
+    renderCommentHighlights() {
         this.commentsLayer.update(this.layerConfig);
     }
     setSelectedComment(comment) {
         this.commentsLayer.setSelectedComment(comment);
     }
+    removeComment(id) {
+        this.commentsLayer.removeComment(id);
+    }
+    clearComments() {
+        this.commentsLayer.removeSessionComments();
+    }
     setCommentsVisibility(value) {
+        if (!value) {
+            this.commentsLayer.clearSessionComments();
+        }
         this.commentsLayer.enabled = value;
     }
     renderDragAndDropSelection() {
@@ -11016,12 +11012,13 @@ class ScrollBar {
 }
 
 class SessionModel {
-    constructor(session, renderer, sessionId, parentSessionId, source) {
+    constructor(session, renderer, sessionId, parentSessionId, source, nativeElement) {
         this.session = session;
         this.renderer = renderer;
         this.sessionId = sessionId;
         this.parentSessionId = parentSessionId;
         this.source = source;
+        this.nativeElement = nativeElement;
     }
 }
 
@@ -11046,19 +11043,16 @@ class RenderComments {
 }
 
 class CommentLayer {
-    constructor(parentEl, commentService) {
+    constructor(parentEl) {
         this.commentPadding = 8;
         this.rendersBySession = new Map();
         this.element = document.createElement('div');
         this.element.className = `noder-comments-layer`;
         parentEl.appendChild(this.element);
-        this.commentSubscription = commentService.commentRenderRequests$.subscribe(x => {
-            this.applyChanges(x);
-            this.renderComments();
-        });
     }
-    destroy() {
-        this.commentSubscription.unsubscribe();
+    disable() {
+        this.rendersBySession.clear();
+        this.renderComments();
     }
     scrollComments(offsetY) {
         for (const [sessionId, comments] of this.rendersBySession) {
@@ -11101,7 +11095,7 @@ class CommentLayer {
             }
             return;
         }
-        let lastCommentBounds = { from: 0, to: 0 };
+        let lastCommentBounds = { from: -Infinity, to: -Infinity };
         for (let i = selectedIndex + 1; i < sortedComments.length; i++) {
             const comment = sortedComments[i];
             let top = comment.highlightTop - topOffset;
@@ -11284,6 +11278,7 @@ class VirtualRenderer {
         return this.renderer.paragraphsAppeared.asObservable();
     }
     constructor(parentContainer, mainSession, commentService, scrollBar) {
+        this.commentService = commentService;
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
         this.size = {
@@ -11299,10 +11294,10 @@ class VirtualRenderer {
         this.renderer = new Renderer(parentContainer, commentService, mainSession);
         this.pagesLayer = new PagesLayer(this.renderer.content, mainSession);
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
-        this.commentLayer = new CommentLayer(this.renderer.content, commentService);
+        this.commentLayer = new CommentLayer(this.renderer.content);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(x => {
-            this.loop.schedule({ scroll: true });
             this.commentLayer.scrollComments(x);
+            this.loop.schedule({ scroll: true, comments: true });
         });
         this.createRenderLoop();
         this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
@@ -11350,7 +11345,7 @@ class VirtualRenderer {
         }
         if (changes.cursor) {
             this.renderCursor();
-            this.renderComments();
+            this.renderCommentHighlights();
         }
         if (changes.marker || changes.selection) {
             this.renderSelection();
@@ -11361,8 +11356,11 @@ class VirtualRenderer {
         if (changes.grammar) {
             this.renderGrammarHighlights();
         }
+        if (changes.commentHighlights) {
+            this.renderCommentHighlights();
+        }
         if (changes.comments) {
-            this.renderComments();
+            this.commentLayer.renderComments();
         }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
@@ -11417,8 +11415,24 @@ class VirtualRenderer {
         this.renderer.setSelectedComment(commentId);
     }
     setCommentsVisibility(value) {
+        if (value && !this.commentsSubscription) {
+            this.commentsSubscription = this.commentService.commentRenderRequests$.subscribe(x => {
+                this.commentLayer.applyChanges(x);
+                this.loop.schedule({ comments: true });
+            });
+        }
+        else {
+            this.commentsSubscription?.unsubscribe();
+            this.commentsSubscription = null;
+        }
         this.renderer.setCommentsVisibility(value);
     }
+    removeComment(id) {
+        this.renderer.removeComment(id);
+    }
+    clearComments() {
+        this.renderer.clearComments();
+    }
     moveTextAreaToCursor() {
         if (!this.textarea) {
             return;
@@ -11515,7 +11529,7 @@ class VirtualRenderer {
         const scrollTop = this.scrollBar.scrollTop + deltaY;
         this.scrollBar.setScrollTop(scrollTop);
         this.commentLayer.scrollComments(deltaY);
-        this.loop.schedule({ scroll: true });
+        this.loop.schedule({ scroll: true, comments: true });
     }
     // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
     screenToParagraph(x, y, tokenDivider = 1, rect) {
@@ -11541,8 +11555,9 @@ class VirtualRenderer {
         DomHelper.removeElement(this.scrollBar.element);
         this.pagesLayer.destroy();
         this.renderer.destroy();
-        this.commentLayer.destroy();
+        this.commentLayer.disable();
         this.scrollSubscription?.unsubscribe();
+        this.commentsSubscription?.unsubscribe();
         this.paragraphsScrolledIntoViewSubscription?.unsubscribe();
     }
     computeLayerConfig() {
@@ -11631,8 +11646,8 @@ class VirtualRenderer {
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
-    renderComments() {
-        this.renderer.renderComments();
+    renderCommentHighlights() {
+        this.renderer.renderCommentHighlights();
     }
 }
 
@@ -11840,7 +11855,10 @@ class RegulatorService {
         this.sessions = [];
         this.sessionIdIncrement = 0;
         this.grammarEnabled = false;
+        this.selectedCommentSessionId = null;
+        this.selectedCommentId = null;
         this.grammarChecker = new GrammarChecker(this.grammarService);
+        this.observer = this.initializeIntersectionObserver();
     }
     addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
@@ -11869,7 +11887,7 @@ class RegulatorService {
         const mainSession = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, model, this.selection, properties, this.editorService, customComponents, 'main', scrollBar);
         const virtualRenderer = new VirtualRenderer(container.nativeElement, mainSession, this.commentRenderService, scrollBar);
         this.editorService.styles = DEFAULT_TOOLBAR_STYLES();
-        this.mainSession = new SessionModel(mainSession, virtualRenderer, sessionId, null, new MainSessionSourceModel());
+        this.mainSession = new SessionModel(mainSession, virtualRenderer, sessionId, null, new MainSessionSourceModel(), container.nativeElement);
         this.sessions.push(this.mainSession);
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
@@ -11877,45 +11895,48 @@ class RegulatorService {
             this.grammarChecker.registerSession(this.mainSession);
         }
     }
-    addCellSession(table, margins, component, properties) {
+    addCellSession(margins, component, nativeElement) {
         const sessionId = ++this.sessionIdIncrement;
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
-        const displayData = new DisplayData(component.cell, properties, sessionId, this.getPageFormats(margins, component.width), 0, customComponents, this.customContentService, this.editorService);
+        const displayData = new DisplayData(component.cell, component.generalProperties, sessionId, this.getPageFormats(margins, component.width), 0, customComponents, this.customContentService, this.editorService);
         const sessionType = this.isWithinEdge(component.parentSessionId) ? 'cellWithinEdge' : 'cell';
-        const session = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, component.cell, this.selection, properties, this.editorService, customComponents, sessionType);
+        const session = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, component.cell, this.selection, component.generalProperties, this.editorService, customComponents, sessionType);
         displayData.pagesFormat[0].contentWidth =
             displayData.pagesFormat[0].contentWidth === 0 ? 1 : displayData.pagesFormat[0].contentWidth;
         const renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session);
-        const source = new CellSessionSourceModel(table, component);
-        const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source);
+        const source = new CellSessionSourceModel(component.table, component);
+        const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source, nativeElement);
         this.sessions.push(newSession);
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
         if (this.grammarEnabled) {
             this.grammarChecker.registerSession(newSession);
         }
+        this.observer.observe(nativeElement);
         return newSession;
     }
-    addEdgeSession(component) {
+    addEdgeSession(component, nativeElement) {
         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, this.commentRenderService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge', null, component.type, component.model.pageType);
         const renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session);
         const source = new EdgeSessionSourceModel(component.model.pageType, component.type);
-        const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source);
+        const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source, nativeElement);
         this.sessions.push(newSession);
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
         newSession.renderer.updateText();
         if (this.grammarEnabled) {
             this.grammarChecker.registerSession(newSession);
         }
+        this.observer.observe(nativeElement);
         return newSession;
     }
     removeSession(sessionId) {
         const index = this.sessions.findIndex(x => x.sessionId === sessionId);
         this.sessions[index].session.destroy();
         this.sessions[index].renderer.destroy();
+        this.observer.unobserve(this.sessions[index].nativeElement);
         this.sessions.splice(index, 1);
         this.grammarChecker.unregisterSession(sessionId);
     }
@@ -12059,7 +12080,44 @@ class RegulatorService {
     setCommentsVisibility(value) {
         for (const sessionModel of this.sessions) {
             sessionModel.renderer.setCommentsVisibility(value);
-            sessionModel.renderer.loop.schedule({ comments: true });
+            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+        }
+    }
+    setSelectedComment(commentId) {
+        if (!commentId) {
+            if (!this.selectedCommentSessionId) {
+                return;
+            }
+            const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
+            sessionModel.renderer.setSelectedComment(null);
+            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            return;
+        }
+        const newSelectedSession = this.sessions.find(x => x.session.model.comments.some(c => c.commentId === commentId));
+        if (this.selectedCommentSessionId && this.selectedCommentSessionId !== newSelectedSession.sessionId) {
+            const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
+            sessionModel.renderer.setSelectedComment(null);
+            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+        }
+        else {
+            newSelectedSession.renderer.setSelectedComment(commentId);
+            newSelectedSession.renderer.loop.schedule({ commentHighlights: true });
+        }
+        this.selectedCommentId = commentId;
+        this.selectedCommentSessionId = newSelectedSession.sessionId;
+    }
+    setSelectedCommentAtCursor() {
+        const comment = this.currentSession.session.getCommentAtCursor();
+        if (this.selectedCommentId && this.selectedCommentId !== comment?.commentId) {
+            const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
+            sessionModel.renderer.setSelectedComment(null);
+            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+        }
+        if (comment) {
+            this.currentSession.renderer.setSelectedComment(comment.commentId);
+            this.currentSession.renderer.loop.schedule({ commentHighlights: true });
+            this.selectedCommentId = comment.commentId;
+            this.selectedCommentSessionId = this.currentSession.sessionId;
         }
     }
     isWithinEdge(sessionId) {
@@ -12132,6 +12190,19 @@ class RegulatorService {
             })
         ];
     }
+    initializeIntersectionObserver() {
+        const options = {
+            root: null,
+            rootMargin: '50px',
+            threshold: 0.01
+        };
+        return new IntersectionObserver(entries => {
+            entries.forEach(entry => {
+                const sessionId = +entry.target.getAttribute('data-session-id');
+                this.getSessionModel(sessionId)?.renderer.setVisibility(entry.isIntersecting);
+            });
+        }, options);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, deps: [{ token: CustomContentService }, { token: EditorService }, { token: ComponentService }, { token: GrammarService }, { token: CommentRenderService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService }); }
 }
@@ -12146,12 +12217,12 @@ class NoderTableCellComponent {
     get renderer() {
         return this.cellSession.renderer;
     }
-    constructor(editorService, regulatorService) {
+    constructor(editorService, regulatorService, elementRef) {
         this.editorService = editorService;
         this.regulatorService = regulatorService;
+        this.elementRef = elementRef;
         this.isHighlighted = false;
         this.resizerBorder = ResizerSide;
-        this.isVisible = false;
         this.pagesCountChangedHandler = (event) => {
             if (this._allParagraphsHeight === event.pageHeight) {
                 return;
@@ -12160,14 +12231,9 @@ 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({
@@ -12178,7 +12244,7 @@ class NoderTableCellComponent {
             header: 0,
             footer: 0
         });
-        this.cellSession = this.regulatorService.addCellSession(this.table, marginModel, this, this.generalProperties);
+        this.cellSession = this.regulatorService.addCellSession(marginModel, this, this.elementRef.nativeElement);
         this.sessionId = this.cellSession.sessionId;
         this.addEventListeners();
     }
@@ -12199,29 +12265,13 @@ 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, deps: [{ token: EditorService }, { token: RegulatorService }, { token: i0.ElementRef }], 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NoderTableCellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-nod-table-cell', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, 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"] }]
-        }], ctorParameters: () => [{ type: EditorService }, { type: RegulatorService }], propDecorators: { table: [{
+        }], ctorParameters: () => [{ type: EditorService }, { type: RegulatorService }, { type: i0.ElementRef }], propDecorators: { table: [{
                 type: Input
             }], cell: [{
                 type: Input
@@ -13338,16 +13388,12 @@ class RenderingHelper {
         }
         const components = customContentService.getComponents(customComponents, fragmentStartIndex, fragmentEndIndex);
         for (const component of components) {
-            const textBeforeElement = fragmentText.substring(0, component.instance.insertIndex - fragmentStartIndex);
+            const instance = component.instance;
+            const textBeforeElement = fragmentText.substring(0, instance.insertIndex - fragmentStartIndex);
             fragmentText = fragmentText.substring(textBeforeElement.length + 1, fragmentText.length);
             this.renderText(fragment, textStyle, textBeforeElement, wordSpacing);
             renderedIndexes += textBeforeElement.length;
-            if (component.instance instanceof ExternalComponent && component.instance.isText) {
-                const rendered = this.renderExternalText(fragment, textStyle, wordSpacing, component.instance, line, renderedTokensInLine + renderedIndexes + additionalTokens, paragraphStartIndex);
-                renderedIndexes += rendered.renderedIndexes;
-                additionalTokens += rendered.additionalTokens;
-            }
-            else if (component.instance instanceof NoderTableComponent && line.customTexts?.length > 0) {
+            if (instance instanceof NoderTableComponent && line.customTexts?.length > 0) {
                 if (line.customTexts[0].start === 0) {
                     this.renderText(fragment, textStyle, ' ', wordSpacing);
                     additionalTokens++;
@@ -13357,6 +13403,12 @@ class RenderingHelper {
                     renderedIndexes++;
                 }
             }
+            else if (instance instanceof ExternalComponent && line.customTexts?.some(x => x.index === instance.insertIndex)) {
+                const tokens = renderedTokensInLine + renderedIndexes + additionalTokens;
+                const rendered = this.renderExternalText(fragment, textStyle, wordSpacing, instance, line, tokens, paragraphStartIndex);
+                renderedIndexes += rendered.renderedIndexes;
+                additionalTokens += rendered.additionalTokens;
+            }
             else {
                 customContentService.componentService.attachComponent(fragment, component);
                 renderedIndexes++;
@@ -13377,10 +13429,8 @@ class RenderingHelper {
             { name: 'data-session-id', value: `${instance.sessionId}` },
             { name: 'data-insert-index', value: `${instance.insertIndex}` }
         ];
-        let text = instance.getText();
-        text = !text.length ? ' ' : text;
         const customText = line.customTexts.find(x => x.index === instance.insertIndex - paragraphStartIndex);
-        const customTextFragment = text.substring(customText.start, customText.end);
+        const customTextFragment = customText.text.substring(customText.start, customText.end);
         if (!line.wordSpacing) {
             this.renderText(fragment, textStyle, customTextFragment, wordSpacing, classes, attributes, style);
             additionalTokens += customTextFragment.length;
@@ -13402,7 +13452,7 @@ class RenderingHelper {
                 additionalTokens += rightText.length;
             }
         }
-        if (text.length === customText.end) {
+        if (customText.text.length === customText.end) {
             renderedIndexes++;
             additionalTokens--;
         }
@@ -15941,15 +15991,16 @@ class Editor {
         commentModel.commentId = commentId;
         sessionModel.session.addComment(commentModel);
         sessionModel.renderer.setSelectedComment(commentModel.commentId);
-        sessionModel.renderer.loop.schedule({ comments: true });
+        sessionModel.renderer.loop.schedule({ commentHighlights: true });
         this.saveAttachCommentToHistory(commentModel);
     }
     onCommentRemoved(id) {
         const session = this.regulatorService.getCommentSessionModel(id);
         const comment = session.session.removeComment(id);
+        session.renderer.removeComment(id);
         this.saveRemoveCommentToHistory(comment, session.source.getTarget());
         this.editorService.removeCommentData([id]);
-        session.renderer.loop.schedule({ comments: true });
+        session.renderer.loop.schedule({ commentHighlights: true });
     }
     onCommentTextReplace(commentId, newText) {
         const { session, comment } = this.regulatorService.getComment(commentId);
@@ -16335,7 +16386,7 @@ class Editor {
         this.editorService.paragraphStyle(paragraphStyle, numbering);
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
-        this.updateSelectedComment();
+        this.regulatorService.setSelectedCommentAtCursor();
         if (!this.selection.isEmpty && this.commentsVisible) {
             const paragraphPos = this.session.selection.cursor;
             const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
@@ -16347,7 +16398,7 @@ class Editor {
         }
     }
     onContentChange() {
-        this.renderer.loop.schedule({ comments: true });
+        this.renderer.loop.schedule({ commentHighlights: true });
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -16883,12 +16934,7 @@ class Editor {
         return this.editorService.commentSizeChanged$.subscribe(() => this.mainRenderer.loop.schedule({ comments: true }));
     }
     selectCommentSubscription() {
-        return this.editorService.setCommentSelected$.subscribe(x => {
-            for (const session of this.regulatorService.sessions) {
-                session.renderer.setSelectedComment(x);
-                session.renderer.loop.schedule({ comments: true });
-            }
-        });
+        return this.editorService.setCommentSelected$.subscribe(x => this.regulatorService.setSelectedComment(x));
     }
     removeCommentSubscription() {
         return this.editorService.removeComment$.subscribe(x => this.onCommentRemoved(x));
@@ -16969,16 +17015,6 @@ class Editor {
         this.overlayService.open(CommentPopupComponent, {}, hintX, hintY);
         event?.stopPropagation();
     }
-    updateSelectedComment() {
-        for (const session of this.regulatorService.sessions) {
-            if (!this.selection.range.isEmpty || session.session !== this.session) {
-                session.renderer.setSelectedComment(null);
-                continue;
-            }
-            const comment = session.session.getCommentAtCursor();
-            session.renderer.setSelectedComment(comment?.commentId);
-        }
-    }
 }
 
 const EDITOR_VERSION = '2';