@talrace/ngx-noder 19.0.51 → 19.0.52

package/fesm2022/talrace-ngx-noder.mjs

@@ -9950,7 +9950,6 @@ 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;
@@ -9972,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);
@@ -9986,23 +9985,13 @@ 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);
-        }
-        this.selectedCommentId = id;
-        if (id) {
-            this.commentService.setCommentSelected(id);
-        }
-    }
     clearSessionComments() {
-        this.commentService.removeCommentsFromRender(this.session.sessionId);
+        if (this.session.model.comments.length) {
+            this.commentService.removeCommentsFromRender(this.session.sessionId);
+        }
     }
     requestCommentRender(highlight, id) {
         const element = Array.isArray(highlight) ? highlight[0] : highlight;
@@ -10200,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);
@@ -10605,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
@@ -10637,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';
@@ -10649,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) {
@@ -10721,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) {
@@ -10743,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) {
@@ -10787,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() {
@@ -10799,7 +10748,7 @@ class Renderer extends EventEmitting {
             return;
         }
         this.dragAndDropSelectionLayer.marker = null;
-        this.loop.schedule({ dragAndDrop: true });
+        this.scheduleChanges({ dragAndDrop: true });
     }
     setVisibility(isVisible) {
         if (this.isVisible !== isVisible) {
@@ -10807,23 +10756,23 @@ class Renderer extends EventEmitting {
             if (!isVisible) {
                 this.commentsLayer.clearSessionComments();
             }
-            this.loop.schedule({ visibilityChanged: true });
+            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) {
@@ -10880,14 +10829,11 @@ class Renderer extends EventEmitting {
     renderCommentHighlights() {
         this.commentsLayer.update(this.layerConfig);
     }
-    setSelectedComment(comment) {
-        this.commentsLayer.setSelectedComment(comment);
-    }
     removeComment(id) {
         this.commentsLayer.removeComment(id);
     }
     clearComments() {
-        this.commentsLayer.removeSessionComments();
+        this.commentsLayer.clearSessionComments();
     }
     setCommentsVisibility(value) {
         if (!value) {
@@ -10895,6 +10841,9 @@ class Renderer extends EventEmitting {
         }
         this.commentsLayer.enabled = value;
     }
+    scheduleChanges(changes) {
+        this.loop.schedule(this.session.sessionId, changes);
+    }
     renderDragAndDropSelection() {
         this.dragAndDropSelectionLayer.update(this.layerConfig);
     }
@@ -10925,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
@@ -11046,13 +11054,17 @@ class CommentLayer {
     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);
     }
+    enable() {
+        this.enabled = true;
+    }
     disable() {
-        this.rendersBySession.clear();
-        this.renderComments();
+        this.enabled = false;
+        this.element.innerHTML = '';
     }
     scrollComments(offsetY) {
         for (const [sessionId, comments] of this.rendersBySession) {
@@ -11065,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())
@@ -11256,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;
     }
@@ -11277,10 +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,
@@ -11291,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);
         this.scrollSubscription = this.scrollBar.scrolled$.subscribe(x => {
             this.commentLayer.scrollComments(x);
-            this.loop.schedule({ scroll: true, comments: true });
+            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);
@@ -11381,7 +11393,7 @@ class VirtualRenderer {
             this.renderChanges(changes, true);
         }
         else {
-            this.loop.schedule(changes);
+            this.scheduleChanges(changes);
         }
         this.scrollBar.setScrollTop(0);
     }
@@ -11411,21 +11423,28 @@ 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);
-                this.loop.schedule({ comments: true });
+                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);
@@ -11492,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);
@@ -11511,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) {
@@ -11519,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) {
@@ -11529,7 +11551,7 @@ class VirtualRenderer {
         const scrollTop = this.scrollBar.scrollTop + deltaY;
         this.scrollBar.setScrollTop(scrollTop);
         this.commentLayer.scrollComments(deltaY);
-        this.loop.schedule({ scroll: true, comments: 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) {
@@ -11595,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);
@@ -11792,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 = [];
@@ -11825,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, {
@@ -11857,6 +11883,7 @@ class RegulatorService {
         this.grammarEnabled = false;
         this.selectedCommentSessionId = null;
         this.selectedCommentId = null;
+        this.renderLoop = new RenderLoop();
         this.grammarChecker = new GrammarChecker(this.grammarService);
         this.observer = this.initializeIntersectionObserver();
     }
@@ -11885,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(), container.nativeElement);
+        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);
@@ -11903,7 +11930,7 @@ class RegulatorService {
         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 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);
@@ -11920,7 +11947,7 @@ class RegulatorService {
         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, nativeElement);
         this.sessions.push(newSession);
@@ -12080,7 +12107,7 @@ class RegulatorService {
     setCommentsVisibility(value) {
         for (const sessionModel of this.sessions) {
             sessionModel.renderer.setCommentsVisibility(value);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         }
     }
     setSelectedComment(commentId) {
@@ -12089,36 +12116,38 @@ class RegulatorService {
                 return;
             }
             const sessionModel = this.getSessionModel(this.selectedCommentSessionId);
-            sessionModel.renderer.setSelectedComment(null);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            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.setSelectedComment(null);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
+            newSelectedSession.renderer.scheduleChanges({ commentHighlights: true });
         }
         else {
-            newSelectedSession.renderer.setSelectedComment(commentId);
-            newSelectedSession.renderer.loop.schedule({ commentHighlights: true });
+            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.setSelectedComment(null);
-            sessionModel.renderer.loop.schedule({ commentHighlights: true });
+            sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         }
         if (comment) {
-            this.currentSession.renderer.setSelectedComment(comment.commentId);
-            this.currentSession.renderer.loop.schedule({ commentHighlights: true });
+            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);
@@ -12147,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) {
@@ -15990,8 +16021,8 @@ 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({ commentHighlights: true });
+        this.mainRenderer.setSelectedComment(commentModel.commentId);
+        sessionModel.renderer.scheduleChanges({ commentHighlights: true });
         this.saveAttachCommentToHistory(commentModel);
     }
     onCommentRemoved(id) {
@@ -16000,7 +16031,7 @@ class Editor {
         session.renderer.removeComment(id);
         this.saveRemoveCommentToHistory(comment, session.source.getTarget());
         this.editorService.removeCommentData([id]);
-        session.renderer.loop.schedule({ commentHighlights: true });
+        session.renderer.scheduleChanges({ commentHighlights: true });
     }
     onCommentTextReplace(commentId, newText) {
         const { session, comment } = this.regulatorService.getComment(commentId);
@@ -16033,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) {
@@ -16371,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) {
@@ -16387,7 +16418,7 @@ class Editor {
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
         this.regulatorService.setSelectedCommentAtCursor();
-        if (!this.selection.isEmpty && this.commentsVisible) {
+        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();
@@ -16398,7 +16429,7 @@ class Editor {
         }
     }
     onContentChange() {
-        this.renderer.loop.schedule({ commentHighlights: true });
+        this.renderer.scheduleChanges({ commentHighlights: true });
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -16502,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();
     }
@@ -16603,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() {
@@ -16931,7 +16962,7 @@ 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 => this.regulatorService.setSelectedComment(x));