@talrace/ngx-noder 19.0.50 → 19.0.52

package/fesm2022/talrace-ngx-noder.mjs

@@ -8361,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;
@@ -8381,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');
@@ -8400,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);
@@ -8444,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
@@ -9969,13 +9950,11 @@ class CommentHighlightLayer extends HighlightLayer {
         this.commentService = commentService;
         this.className = 'noder-highlight';
         this.selectedCommentClassName = 'noder-selected-highlight';
-        this.selectedCommentId = null;
     }
     update(config) {
         const comments = this.session.model.comments;
         if (!config?.isVisible || !comments?.length || !this.enabled) {
             this.element.innerHTML = '';
-            this.commentService.removeCommentsFromRender(this.session.sessionId);
             return;
         }
         this.config = config;
@@ -9992,7 +9971,7 @@ class CommentHighlightLayer extends HighlightLayer {
                 continue;
             }
             if (!screenRange.isEmpty) {
-                const className = comment.commentId === this.selectedCommentId ? this.selectedCommentClassName : this.className;
+                const className = comment.commentId === this.commentService.selectedCommentId ? this.selectedCommentClassName : this.className;
                 const result = screenRange.isSingleLine
                     ? this.drawSingleLineMarker(screenRange, className)
                     : this.drawMultiLineMarker(screenRange, className);
@@ -10006,13 +9985,12 @@ class CommentHighlightLayer extends HighlightLayer {
             }
         }
     }
-    setSelectedComment(id) {
-        if (this.selectedCommentId) {
-            this.commentService.setCommentSelected(this.selectedCommentId, false);
-        }
-        this.selectedCommentId = id;
-        if (id) {
-            this.commentService.setCommentSelected(id);
+    removeComment(id) {
+        this.commentService.removeCommentFromRender(this.session.sessionId, id);
+    }
+    clearSessionComments() {
+        if (this.session.model.comments.length) {
+            this.commentService.removeCommentsFromRender(this.session.sessionId);
         }
     }
     requestCommentRender(highlight, id) {
@@ -10176,6 +10154,7 @@ class RenderChangesModel {
             this.selection ||
             this.search ||
             this.grammar ||
+            this.commentHighlights ||
             this.comments ||
             this.scroll ||
             this.size ||
@@ -10191,6 +10170,7 @@ class RenderChangesModel {
         this.selection = false;
         this.search = false;
         this.grammar = false;
+        this.commentHighlights = false;
         this.comments = false;
         this.scroll = false;
         this.size = false;
@@ -10209,48 +10189,6 @@ class RenderChangesModel {
     }
 }
 
-class EventHelper {
-    static get nextFrame() {
-        if (!this._nextFrame) {
-            const nextFrame = (callback) => {
-                setTimeout(callback, 17);
-            };
-            this._nextFrame =
-                window.requestAnimationFrame ||
-                    window['webkitRequestAnimationFrame'] ||
-                    window['mozRequestAnimationFrame'] ||
-                    window['msRequestAnimationFrame'] ||
-                    window['oRequestAnimationFrame'] ||
-                    nextFrame;
-        }
-        return this._nextFrame;
-    }
-}
-
-class RenderLoop {
-    constructor(onRender) {
-        this.changes = new RenderChangesModel();
-        this.flush = () => {
-            const changes = this.changes;
-            if (changes.any) {
-                this.changes = new RenderChangesModel();
-                onRender(changes);
-            }
-            if (this.changes.any) {
-                this.schedule();
-            }
-        };
-    }
-    schedule(changes) {
-        if (changes) {
-            this.changes.apply(changes);
-        }
-        if (this.changes) {
-            EventHelper.nextFrame(this.flush);
-        }
-    }
-}
-
 class CustomElementInfo {
     constructor(init) {
         Object.assign(this, init);
@@ -10614,9 +10552,11 @@ class Renderer extends EventEmitting {
     get paragraphsAppeared$() {
         return this.paragraphsAppeared.asObservable();
     }
-    constructor(parentContainer, commentsService, session) {
+    constructor(parentContainer, commentsService, session, loop) {
         super();
         this.session = session;
+        this.loop = loop;
+        this.grammarChecksEnabled = false;
         this.layerConfig = {
             width: 1,
             contentRange: new DistanceModel({ start: 0, end: 0 }), // paragraphs
@@ -10646,7 +10586,7 @@ class Renderer extends EventEmitting {
             width: 1
         };
         this.pagesCountChangedHandler = () => {
-            this.loop.schedule({ lines: true, selection: true });
+            this.scheduleChanges({ lines: true, selection: true });
         };
         this.container = parentContainer;
         this.container.className += ' noder-editor';
@@ -10658,10 +10598,10 @@ class Renderer extends EventEmitting {
         this.commentsLayer = new CommentHighlightLayer(this.content, 'comments-highlight', this.session, commentsService);
         this.cursorLayer = new CursorLayer(this.content, this.session);
         this.dragAndDropSelectionLayer = new SelectionLayer(this.content, 'drag-and-drop-selection', this.session);
-        this.loop = new RenderLoop(changes => this.renderChanges(changes));
+        loop.registerSession(this.session.sessionId, changes => this.renderChanges(changes));
         this.session.displayData.addEventListener('pagesCountChanged', this.pagesCountChangedHandler);
         this.visibilitySubscription = this.visibilitySubject
-            .pipe(debounceTime(3000), filter(x => x))
+            .pipe(filter(() => this.grammarChecksEnabled), debounceTime(3000), filter(x => x))
             .subscribe(() => this.paragraphsScrolledIntoView());
     }
     renderChanges(changes, force) {
@@ -10679,7 +10619,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);
@@ -10706,8 +10646,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();
@@ -10715,7 +10655,7 @@ class Renderer extends EventEmitting {
         if (changes.visibilityChanged) {
             this.renderSearchHighlights();
             this.renderGrammarHighlights();
-            this.renderComments();
+            this.renderCommentHighlights();
             this.visibilitySubject.next(this.isVisible);
         }
         this.session.onRendered();
@@ -10730,7 +10670,7 @@ class Renderer extends EventEmitting {
         if (lastRow < this.layerConfig.contentRange.start || firstRow > this.layerConfig.contentRange.end) {
             return;
         }
-        this.loop.schedule({ lines: true });
+        this.scheduleChanges({ lines: true });
     }
     moveTextAreaToCursor() {
         if (!this.textarea) {
@@ -10752,38 +10692,38 @@ class Renderer extends EventEmitting {
     updateSelection(range) {
         if (range.isEmpty && this.selectionLayer.marker) {
             this.selectionLayer.marker = null;
-            this.loop.schedule({ selection: true });
+            this.scheduleChanges({ selection: true });
         }
         else if (!range.isEmpty && !this.selectionLayer.marker?.isEqual(range)) {
             this.selectionLayer.marker = range;
-            this.loop.schedule({ selection: true });
+            this.scheduleChanges({ selection: true });
         }
     }
     updateSearchHighlights(ranges) {
         if (this.searchHighlightLayer.markers.length !== ranges.length ||
             !this.searchHighlightLayer.markers.every(x => ranges.some(y => x.isEqual(y)))) {
             this.searchHighlightLayer.markers = ranges;
-            this.loop.schedule({ search: true });
+            this.scheduleChanges({ search: true });
         }
     }
     updateCustomElementHighlights(ranges) {
         this.searchHighlightLayer.customElementsRanges = ranges;
-        this.loop.schedule({ search: true });
+        this.scheduleChanges({ search: true });
     }
     updateActiveSearchHighlight(active) {
         this.searchHighlightLayer.active = active;
-        this.loop.schedule({ search: true });
+        this.scheduleChanges({ search: true });
     }
     updateGrammarHighlights(paragraphId, errors) {
         this.grammarHighlightLayer.setErrors(paragraphId, errors);
-        this.loop.schedule({ grammar: true });
+        this.scheduleChanges({ grammar: true });
     }
     removeGrammarHighlights(paragraphId) {
         this.grammarHighlightLayer.removeParagraphHighlights(paragraphId);
     }
     clearGrammarHighlights() {
         this.grammarHighlightLayer.clearHighlights();
-        this.loop.schedule({ grammar: true });
+        this.scheduleChanges({ grammar: true });
     }
     paragraphsScrolledIntoView() {
         if (!this.layerConfig.visibleRange) {
@@ -10796,11 +10736,11 @@ class Renderer extends EventEmitting {
     updateDragAndDropSelection(range) {
         if (range.isEmpty && this.dragAndDropSelectionLayer.marker) {
             this.dragAndDropSelectionLayer.marker = null;
-            this.loop.schedule({ dragAndDrop: true });
+            this.scheduleChanges({ dragAndDrop: true });
         }
         else if (!range.isEmpty && !this.dragAndDropSelectionLayer.marker?.isEqual(range)) {
             this.dragAndDropSelectionLayer.marker = range;
-            this.loop.schedule({ dragAndDrop: true });
+            this.scheduleChanges({ dragAndDrop: true });
         }
     }
     clearDragAndDropSelection() {
@@ -10808,28 +10748,31 @@ class Renderer extends EventEmitting {
             return;
         }
         this.dragAndDropSelectionLayer.marker = null;
-        this.loop.schedule({ dragAndDrop: true });
+        this.scheduleChanges({ dragAndDrop: true });
     }
     setVisibility(isVisible) {
         if (this.isVisible !== isVisible) {
             this.isVisible = isVisible;
-            this.loop.schedule({ visibilityChanged: true });
+            if (!isVisible) {
+                this.commentsLayer.clearSessionComments();
+            }
+            this.scheduleChanges({ visibilityChanged: true });
         }
     }
     /**
      * Triggers a full update of the text, for all the rows.
      **/
     updateText() {
-        this.loop.schedule({ text: true });
+        this.scheduleChanges({ text: true });
     }
     updateTextAndCursor() {
-        this.loop.schedule({ text: true, cursor: true });
+        this.scheduleChanges({ text: true, cursor: true });
     }
     updateMarker() {
-        this.loop.schedule({ marker: true });
+        this.scheduleChanges({ marker: true });
     }
     updateCursor() {
-        this.loop.schedule({ cursor: true });
+        this.scheduleChanges({ cursor: true });
     }
     // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
     screenToParagraph(x, y, tokenDivider = 1, rect) {
@@ -10883,15 +10826,24 @@ 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.clearSessionComments();
     }
     setCommentsVisibility(value) {
+        if (!value) {
+            this.commentsLayer.clearSessionComments();
+        }
         this.commentsLayer.enabled = value;
     }
+    scheduleChanges(changes) {
+        this.loop.schedule(this.session.sessionId, changes);
+    }
     renderDragAndDropSelection() {
         this.dragAndDropSelectionLayer.update(this.layerConfig);
     }
@@ -10922,6 +10874,65 @@ class Renderer extends EventEmitting {
     }
 }
 
+class EventHelper {
+    static get nextFrame() {
+        if (!this._nextFrame) {
+            const nextFrame = (callback) => {
+                setTimeout(callback, 17);
+            };
+            this._nextFrame =
+                window.requestAnimationFrame ||
+                    window['webkitRequestAnimationFrame'] ||
+                    window['mozRequestAnimationFrame'] ||
+                    window['msRequestAnimationFrame'] ||
+                    window['oRequestAnimationFrame'] ||
+                    nextFrame;
+        }
+        return this._nextFrame;
+    }
+}
+
+class RenderLoop {
+    constructor() {
+        this.sessionCallbacks = new Map();
+        this.sessionChanges = new Map();
+        this.flush = () => {
+            const sessionsToRender = Array.from(this.sessionChanges.entries());
+            const hasChanges = sessionsToRender.filter(([_, changes]) => changes.any);
+            if (!hasChanges.length) {
+                return;
+            }
+            for (const [sessionId, changes] of hasChanges) {
+                const callback = this.sessionCallbacks.get(sessionId);
+                callback(new RenderChangesModel(changes));
+                this.sessionChanges.set(sessionId, new RenderChangesModel());
+            }
+            const hasMoreChanges = Array.from(this.sessionChanges.values()).some(changes => changes.any);
+            if (hasMoreChanges) {
+                EventHelper.nextFrame(this.flush);
+            }
+        };
+    }
+    registerSession(sessionId, onRender) {
+        this.sessionCallbacks.set(sessionId, onRender);
+        if (!this.sessionChanges.has(sessionId)) {
+            this.sessionChanges.set(sessionId, new RenderChangesModel());
+        }
+    }
+    unregisterSession(sessionId) {
+        this.sessionCallbacks.delete(sessionId);
+        this.sessionChanges.delete(sessionId);
+    }
+    schedule(sessionId, changes) {
+        if (changes) {
+            this.sessionChanges.get(sessionId).apply(changes);
+        }
+        if (this.sessionChanges.get(sessionId).any) {
+            EventHelper.nextFrame(this.flush);
+        }
+    }
+}
+
 /**
  * Represents a vertical scroll bar.
  * @class ScrollBar
@@ -11009,12 +11020,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;
     }
 }
 
@@ -11039,19 +11051,20 @@ class RenderComments {
 }
 
 class CommentLayer {
-    constructor(parentEl, commentService) {
+    constructor(parentEl) {
         this.commentPadding = 8;
         this.rendersBySession = new Map();
+        this.enabled = false;
         this.element = document.createElement('div');
         this.element.className = `noder-comments-layer`;
         parentEl.appendChild(this.element);
-        this.commentSubscription = commentService.commentRenderRequests$.subscribe(x => {
-            this.applyChanges(x);
-            this.renderComments();
-        });
     }
-    destroy() {
-        this.commentSubscription.unsubscribe();
+    enable() {
+        this.enabled = true;
+    }
+    disable() {
+        this.enabled = false;
+        this.element.innerHTML = '';
     }
     scrollComments(offsetY) {
         for (const [sessionId, comments] of this.rendersBySession) {
@@ -11064,6 +11077,9 @@ class CommentLayer {
         }
     }
     renderComments() {
+        if (!this.enabled) {
+            return;
+        }
         this.element.innerHTML = '';
         const topOffset = this.element.getBoundingClientRect().top;
         const sortedComments = Array.from(this.rendersBySession.values())
@@ -11094,7 +11110,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;
@@ -11255,12 +11271,6 @@ class VirtualRenderer {
     get cursorLayer() {
         return this.renderer.cursorLayer;
     }
-    get loop() {
-        return this.renderer.loop;
-    }
-    set loop(val) {
-        this.renderer.loop = val;
-    }
     get textarea() {
         return this.renderer.textarea;
     }
@@ -11276,9 +11286,12 @@ class VirtualRenderer {
     get paragraphsAppeared$() {
         return this.renderer.paragraphsAppeared.asObservable();
     }
-    constructor(parentContainer, mainSession, commentService, scrollBar) {
+    constructor(parentContainer, mainSession, commentService, loop, scrollBar) {
+        this.commentService = commentService;
+        this.loop = loop;
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
+        this.grammarChecksEnabled = false;
         this.size = {
             width: 0,
             height: 0,
@@ -11289,18 +11302,19 @@ class VirtualRenderer {
         this.paragraphsScrolledIntoViewSubject = new Subject();
         this.container = parentContainer;
         this.createScroller();
-        this.renderer = new Renderer(parentContainer, commentService, mainSession);
+        this.renderer = new Renderer(parentContainer, commentService, mainSession, loop);
+        loop.registerSession(0, changes => this.renderChanges(changes));
         this.pagesLayer = new PagesLayer(this.renderer.content, mainSession);
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
-        this.commentLayer = new CommentLayer(this.renderer.content, 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.scheduleChanges({ scroll: true, comments: true });
         });
-        this.createRenderLoop();
         this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
-            .pipe(debounceTime(3000))
+            .pipe(filter(() => this.grammarChecksEnabled), debounceTime(3000))
             .subscribe(() => this.paragraphsScrolledIntoView());
+        this.scheduleChanges({ full: true });
     }
     renderChanges(changes, force) {
         changes.apply(this.changes);
@@ -11343,7 +11357,7 @@ class VirtualRenderer {
         }
         if (changes.cursor) {
             this.renderCursor();
-            this.renderComments();
+            this.renderCommentHighlights();
         }
         if (changes.marker || changes.selection) {
             this.renderSelection();
@@ -11354,8 +11368,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();
@@ -11376,7 +11393,7 @@ class VirtualRenderer {
             this.renderChanges(changes, true);
         }
         else {
-            this.loop.schedule(changes);
+            this.scheduleChanges(changes);
         }
         this.scrollBar.setScrollTop(0);
     }
@@ -11406,11 +11423,34 @@ class VirtualRenderer {
         this.size.dirty = !width || !height;
         return changes;
     }
-    setSelectedComment(commentId) {
-        this.renderer.setSelectedComment(commentId);
+    setSelectedComment(id) {
+        const oldId = this.commentService.selectedCommentId;
+        this.commentService.setSelectedComment(id);
+        if (this.commentService.selectedCommentId !== oldId) {
+            this.scheduleChanges({ comments: true });
+        }
     }
     setCommentsVisibility(value) {
+        if (value && !this.commentsSubscription) {
+            this.commentLayer.enable();
+            this.commentsSubscription = this.commentService.commentRenderRequests$.subscribe(x => {
+                this.commentLayer.applyChanges(x);
+                setTimeout(() => this.scheduleChanges({ comments: true }));
+            });
+        }
+        else {
+            this.commentLayer.disable();
+            this.commentsSubscription?.unsubscribe();
+            this.commentsSubscription = null;
+        }
         this.renderer.setCommentsVisibility(value);
+        this.scheduleChanges({ comments: true });
+    }
+    removeComment(id) {
+        this.renderer.removeComment(id);
+    }
+    clearComments() {
+        this.renderer.clearComments();
     }
     moveTextAreaToCursor() {
         if (!this.textarea) {
@@ -11471,6 +11511,9 @@ class VirtualRenderer {
     setVisibility(isVisible) {
         this.renderer.setVisibility(isVisible);
     }
+    scheduleChanges(changes) {
+        this.loop.schedule(0, changes);
+    }
     scrollSelectionIntoView(anchor, lead, offset) {
         // first scroll anchor into view then scroll lead into view
         this.scrollCursorIntoView(anchor, offset);
@@ -11490,7 +11533,7 @@ class VirtualRenderer {
                 top -= offset * this.container.scrollHeight;
             }
             this.scrollBar.setScrollTop(top);
-            this.loop.schedule({ scroll: true });
+            this.scheduleChanges({ scroll: true });
         }
         else if (this.scrollBar.scrollTop + this.container.scrollHeight < top + position.height) {
             if (offset) {
@@ -11498,7 +11541,7 @@ class VirtualRenderer {
             }
             top += position.height - this.container.scrollHeight;
             this.scrollBar.setScrollTop(top);
-            this.loop.schedule({ scroll: true });
+            this.scheduleChanges({ scroll: true });
         }
     }
     scrollBy(deltaY) {
@@ -11508,7 +11551,7 @@ class VirtualRenderer {
         const scrollTop = this.scrollBar.scrollTop + deltaY;
         this.scrollBar.setScrollTop(scrollTop);
         this.commentLayer.scrollComments(deltaY);
-        this.loop.schedule({ scroll: true });
+        this.scheduleChanges({ scroll: true, comments: true });
     }
     // tokenDivider - used to measure if token fits (1 - should be fully fit, 2 - half of token, 3 - third part, ...) to be included
     screenToParagraph(x, y, tokenDivider = 1, rect) {
@@ -11534,8 +11577,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() {
@@ -11573,11 +11617,6 @@ class VirtualRenderer {
         this.scroller.className = 'noder-scroller';
         this.container.appendChild(this.scroller);
     }
-    createRenderLoop() {
-        this.loop = new RenderLoop(changes => this.renderChanges(changes));
-        this.renderer.loop = this.loop;
-        this.loop.schedule({ full: true });
-    }
     renderScroll(changes) {
         this.pagesLayer.update(this.layerConfig);
         this.edgesLayer.scrollEdges(this.layerConfig);
@@ -11624,8 +11663,8 @@ class VirtualRenderer {
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
-    renderComments() {
-        this.renderer.renderComments();
+    renderCommentHighlights() {
+        this.renderer.renderCommentHighlights();
     }
 }
 
@@ -11770,6 +11809,7 @@ class CommentRenderService {
         this.applicationRef = inject(ApplicationRef);
         this.injector = inject(Injector);
         this.commentRenderRequests = new Subject();
+        this.selectedCommentId = null;
     }
     requestCommentsRender(sessionId, renderRequests) {
         const requests = [];
@@ -11803,9 +11843,17 @@ class CommentRenderService {
     removeCommentsFromRender(sessionId) {
         this.commentRenderRequests.next(new RemoveCommentsFromDom(sessionId));
     }
-    setCommentSelected(id, selected = true) {
+    setSelectedComment(id) {
+        if (this.selectedCommentId === id) {
+            return;
+        }
+        if (this.selectedCommentId) {
+            const oldComponentRef = this.componentInstances.find(x => x.instance.id === this.selectedCommentId);
+            oldComponentRef?.instance.setSelected(false);
+        }
         const componentRef = this.componentInstances.find(x => x.instance.id === id);
-        componentRef?.instance.setSelected(selected);
+        componentRef?.instance.setSelected(true);
+        this.selectedCommentId = id;
     }
     createComponentRef(id) {
         const ref = createComponent(this.componentType, {
@@ -11833,7 +11881,11 @@ class RegulatorService {
         this.sessions = [];
         this.sessionIdIncrement = 0;
         this.grammarEnabled = false;
+        this.selectedCommentSessionId = null;
+        this.selectedCommentId = null;
+        this.renderLoop = new RenderLoop();
         this.grammarChecker = new GrammarChecker(this.grammarService);
+        this.observer = this.initializeIntersectionObserver();
     }
     addMainSession(model, scalingRatio, container) {
         const sessionId = ++this.sessionIdIncrement;
@@ -11860,9 +11912,9 @@ class RegulatorService {
         const displayData = new DisplayData(model, properties, sessionId, model.pageFormats, DocumentInfo.pagesSpace, customComponents, this.customContentService, this.editorService);
         const scrollBar = new ScrollBar(container.nativeElement.parentElement);
         const mainSession = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, model, this.selection, properties, this.editorService, customComponents, 'main', scrollBar);
-        const virtualRenderer = new VirtualRenderer(container.nativeElement, mainSession, this.commentRenderService, scrollBar);
+        this.mainRenderer = new VirtualRenderer(container.nativeElement, mainSession, this.commentRenderService, this.renderLoop, scrollBar);
         this.editorService.styles = DEFAULT_TOOLBAR_STYLES();
-        this.mainSession = new SessionModel(mainSession, virtualRenderer, sessionId, null, new MainSessionSourceModel());
+        this.mainSession = new SessionModel(mainSession, this.mainRenderer, sessionId, null, new MainSessionSourceModel(), container.nativeElement);
         this.sessions.push(this.mainSession);
         this.currentSession = this.mainSession;
         displayData.updateNextLineIndexes(0, displayData.paragraphs.length - 1);
@@ -11870,45 +11922,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 renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session, this.renderLoop);
+        const source = new CellSessionSourceModel(component.table, component);
+        const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source, nativeElement);
         this.sessions.push(newSession);
         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 renderer = new Renderer(component.container.nativeElement, this.commentRenderService, session, this.renderLoop);
         const source = new EdgeSessionSourceModel(component.model.pageType, component.type);
-        const newSession = new SessionModel(session, renderer, sessionId, component.parentSessionId, source);
+        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);
     }
@@ -12052,9 +12107,48 @@ class RegulatorService {
     setCommentsVisibility(value) {
         for (const sessionModel of this.sessions) {
             sessionModel.renderer.setCommentsVisibility(value);
-            sessionModel.renderer.loop.schedule({ comments: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         }
     }
+    setSelectedComment(commentId) {
+        if (!commentId) {
+            if (!this.selectedCommentSessionId) {
+                return;
+            }
+            const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
+            this.mainRenderer.setSelectedComment(null);
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
+            return;
+        }
+        this.mainRenderer.setSelectedComment(commentId);
+        const newSelectedSession = this.sessions.find(x => x.session.model.comments.some(c => c.commentId === commentId));
+        if (this.selectedCommentSessionId && this.selectedCommentSessionId !== newSelectedSession.sessionId) {
+            const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
+            newSelectedSession.renderer.scheduleChanges({ commentHighlights: true });
+        }
+        else {
+            newSelectedSession.renderer.scheduleChanges({ commentHighlights: true });
+        }
+        this.selectedCommentId = commentId;
+        this.selectedCommentSessionId = newSelectedSession.sessionId;
+    }
+    setSelectedCommentAtCursor() {
+        const comment = this.currentSession.session.getCommentAtCursor();
+        this.mainRenderer.setSelectedComment(comment?.commentId);
+        if (this.selectedCommentId && this.selectedCommentId !== comment?.commentId) {
+            const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
+        }
+        if (comment) {
+            this.currentSession.renderer.scheduleChanges({ commentHighlights: true });
+            this.selectedCommentId = comment.commentId;
+            this.selectedCommentSessionId = this.currentSession.sessionId;
+            return;
+        }
+        this.selectedCommentId = null;
+        this.selectedCommentSessionId = null;
+    }
     isWithinEdge(sessionId) {
         return !!this.getEdgeSessionId(sessionId);
     }
@@ -12082,12 +12176,14 @@ class RegulatorService {
             for (const session of this.sessions) {
                 this.grammarChecker.registerSession(session);
                 session.renderer.paragraphsScrolledIntoView();
+                session.renderer.grammarChecksEnabled = true;
             }
             return;
         }
         for (const session of this.sessions) {
             this.grammarChecker.unregisterSession(session.sessionId);
             session.renderer.clearGrammarHighlights();
+            session.renderer.grammarChecksEnabled = false;
         }
     }
     getEdgeSessionId(sessionId) {
@@ -12125,6 +12221,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 }); }
 }
@@ -12139,12 +12248,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;
@@ -12153,14 +12262,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({
@@ -12171,7 +12275,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();
     }
@@ -12192,29 +12296,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
@@ -13331,16 +13419,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++;
@@ -13350,6 +13434,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++;
@@ -15931,16 +16021,17 @@ class Editor {
         this.commentCreateRequests = this.commentCreateRequests.filter(x => x.reqId !== reqId);
         commentModel.commentId = commentId;
         sessionModel.session.addComment(commentModel);
-        sessionModel.renderer.setSelectedComment(commentModel.commentId);
-        sessionModel.renderer.loop.schedule({ comments: true });
+        this.mainRenderer.setSelectedComment(commentModel.commentId);
+        sessionModel.renderer.scheduleChanges({ 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.scheduleChanges({ commentHighlights: true });
     }
     onCommentTextReplace(commentId, newText) {
         const { session, comment } = this.regulatorService.getComment(commentId);
@@ -15973,7 +16064,7 @@ class Editor {
         window.removeEventListener('resize', this.rerenderResize);
     }
     rerenderMarker() {
-        this.renderer.loop.schedule({ marker: true });
+        this.renderer.scheduleChanges({ marker: true });
     }
     onBlur() {
         if (!this.textInput.isFocused) {
@@ -16311,7 +16402,7 @@ class Editor {
         this.editorService.paragraphStyle(this.model.paragraphs[0].paragraphStyle);
         this.regulatorService.addMainSession(this.model, scalingRatio, this.container);
     }
-    onSelectionChange() {
+    onSelectionChange(isMouseSelection = false) {
         this.session.applyToolbarStyles();
         this.renderer.updateSelection(this.selection.selectedRange);
         if (this.selection.isEmpty) {
@@ -16326,8 +16417,8 @@ class Editor {
         this.editorService.paragraphStyle(paragraphStyle, numbering);
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
-        this.updateSelectedComment();
-        if (!this.selection.isEmpty && this.commentsVisible) {
+        this.regulatorService.setSelectedCommentAtCursor();
+        if (!this.selection.isEmpty && this.commentsVisible && !isMouseSelection) {
             const paragraphPos = this.session.selection.cursor;
             const cursor = PositionHelper.paragraphToPixel(this.session, paragraphPos.row, paragraphPos.column);
             const mainRect = this.mainRenderer.container.getBoundingClientRect();
@@ -16338,7 +16429,7 @@ class Editor {
         }
     }
     onContentChange() {
-        this.renderer.loop.schedule({ comments: true });
+        this.renderer.scheduleChanges({ commentHighlights: true });
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -16442,7 +16533,7 @@ class Editor {
         const cursor = this.selection.cursor;
         this.selection.moveSelection(position);
         if (cursor.column !== this.selection.cursor.column || cursor.row !== this.selection.cursor.row) {
-            this.onSelectionChange();
+            this.onSelectionChange(true);
         }
         this.scrollCursorIntoMainView();
     }
@@ -16543,7 +16634,7 @@ class Editor {
     viewOnlyModeSubscription() {
         return this.editorService.isViewOnly$.subscribe(() => {
             this.selection?.clearSelection();
-            this.renderer.loop.schedule({ grammar: true });
+            this.renderer.scheduleChanges({ grammar: true });
         });
     }
     applyLeftMarginPageFormatSubscription() {
@@ -16871,15 +16962,10 @@ class Editor {
         ];
     }
     rerenderCommentsSubscription() {
-        return this.editorService.commentSizeChanged$.subscribe(() => this.mainRenderer.loop.schedule({ comments: true }));
+        return this.editorService.commentSizeChanged$.subscribe(() => this.mainRenderer.scheduleChanges({ comments: true }));
     }
     selectCommentSubscription() {
-        return this.editorService.setCommentSelected$.subscribe(x => {
-            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));
@@ -16960,16 +17046,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';