@talrace/ngx-noder 19.0.32 → 19.0.34

package/fesm2022/talrace-ngx-noder.mjs

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
-import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, Inject, input, computed, effect, NgModule } from '@angular/core';
-import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, filter, fromEvent, throttleTime, take, startWith, takeUntil, tap, map, catchError } from 'rxjs';
+import { Directive, Injectable, signal, inject, ChangeDetectorRef, HostBinding, Input, Component, ChangeDetectionStrategy, ViewChild, InjectionToken, createComponent, EventEmitter, Output, HostListener, ApplicationRef, Injector, Inject, input, computed, effect, NgModule } from '@angular/core';
+import { Subject, BehaviorSubject, distinctUntilChanged, debounceTime, filter, fromEvent, take, throttleTime, startWith, takeUntil, tap, map, catchError } from 'rxjs';
 import * as i1$2 from '@angular/common/http';
 import { HttpHeaders } from '@angular/common/http';
+import { ComponentPortal } from '@angular/cdk/portal';
+import * as i1 from '@angular/cdk/overlay';
+import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i4 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
+import * as i5 from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 import * as i3 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { ComponentPortal } from '@angular/cdk/portal';
-import * as i1 from '@angular/cdk/overlay';
-import { OverlayConfig } from '@angular/cdk/overlay';
 import * as i3$1 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
 import * as i2 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
-import * as i5 from '@angular/material/icon';
-import { MatIconModule } from '@angular/material/icon';
 import * as i6 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
 import * as i5$2 from '@angular/material/tooltip';
@@ -32,20 +32,21 @@ import { MatSelectModule } from '@angular/material/select';
 import * as i3$2 from '@angular/material/core';
 import * as i10 from '@angular/material/sidenav';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$1 from '@angular/material/menu';
 import { MatMenuModule } from '@angular/material/menu';
+import { TextFieldModule } from '@angular/cdk/text-field';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i4$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i2$1 from '@angular/platform-browser';
 import * as i2$2 from '@angular/material/autocomplete';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i3$3 from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i2$3 from '@angular/material/divider';
 import { MatDividerModule } from '@angular/material/divider';
 import * as i5$3 from 'ngx-colors';
 import { NgxColorsModule } from 'ngx-colors';
-import * as i3$3 from '@angular/material/button-toggle';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import * as i10$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import * as i12 from '@angular/material/radio';
@@ -145,10 +146,10 @@ const DEFAULT_PARAGRAPH_STYLE = new ParagraphStyleModel({
     alignment: Alignment$1.left,
     backgroundColor: DEFAULT_BACKGROUND_COLOR,
     headingStyleId: DEFAULT_HEADING_STYLE_ID,
-    indentFirstLine: 0,
-    indentHanging: 0,
-    indentLeft: 0,
-    indentRight: 0,
+    indentFirstLine: null,
+    indentHanging: null,
+    indentLeft: null,
+    indentRight: null,
     lineSpacing: 1,
     spaceAfter: 0,
     spaceBefore: 0,
@@ -622,6 +623,7 @@ class EditorService {
         this._changedEdgeSize$ = new Subject();
         this._imageLoaded$ = new Subject();
         this._changedEdge$ = new Subject();
+        this._addCommentAtSelection$ = new Subject();
         this._insertTableRows$ = new Subject();
         this._insertTableColumns$ = new Subject();
         this._removeTableRows$ = new Subject();
@@ -648,6 +650,8 @@ class EditorService {
         this._removeLeft$ = new Subject();
         this._removeCustomElementsData$ = new Subject();
         this._restoreCustomElementsData$ = new Subject();
+        this._removeCommentData$ = new Subject();
+        this._restoreCommentData$ = new Subject();
         this._currentPage$ = new BehaviorSubject(1);
         this._lastPageNumber$ = new BehaviorSubject(1);
         this._applyDocumentPageFormat$ = new Subject();
@@ -664,6 +668,12 @@ class EditorService {
             paragraphStyle: new ParagraphStyleModel(),
             numberingModel: null
         });
+        this._commentSizeChanged$ = new Subject();
+        this._createComment$ = new Subject();
+        this._commentCreated$ = new Subject();
+        this._removeComment$ = new Subject();
+        this._setCommentSelected$ = new Subject();
+        this._setCommentsVisibility$ = new Subject();
     }
     set styles(value) {
         this._styles$.next({ ...value });
@@ -788,6 +798,9 @@ class EditorService {
     get changedEdge$() {
         return this._changedEdge$.asObservable();
     }
+    get addCommentAtSelection$() {
+        return this._addCommentAtSelection$.asObservable();
+    }
     get insertTableRows$() {
         return this._insertTableRows$.asObservable();
     }
@@ -873,6 +886,12 @@ class EditorService {
     get restoreCustomElementsData$() {
         return this._restoreCustomElementsData$.asObservable();
     }
+    get removeCommentData$() {
+        return this._removeCommentData$.asObservable();
+    }
+    get restoreCommentData$() {
+        return this._restoreCommentData$.asObservable();
+    }
     get currentPage() {
         return this._currentPage$.value;
     }
@@ -921,6 +940,24 @@ class EditorService {
     get paragraphStyle$() {
         return this._paragraphStyle$.asObservable();
     }
+    get commentSizeChanged$() {
+        return this._commentSizeChanged$.asObservable();
+    }
+    get createComment$() {
+        return this._createComment$.asObservable();
+    }
+    get commentCreated$() {
+        return this._commentCreated$.asObservable();
+    }
+    get removeComment$() {
+        return this._removeComment$.asObservable();
+    }
+    get setCommentSelected$() {
+        return this._setCommentSelected$.asObservable();
+    }
+    get setCommentsVisibility$() {
+        return this._setCommentsVisibility$.asObservable();
+    }
     tabSettings(value) {
         this._tabSettings$.next(value);
     }
@@ -1126,6 +1163,12 @@ class EditorService {
     restoreCustomElementsData(elements) {
         this._restoreCustomElementsData$.next(elements);
     }
+    removeCommentData(commentIds) {
+        this._removeCommentData$.next(commentIds);
+    }
+    restoreCommentData(commentIds) {
+        this._restoreCommentData$.next(commentIds);
+    }
     setNewSearchTerm(term) {
         this._searchTerm$.next(term);
     }
@@ -1162,6 +1205,27 @@ class EditorService {
     ignoreGrammarSuggestion(error) {
         this._ignoreGrammarError$.next(error);
     }
+    addCommentAtSelection() {
+        this._addCommentAtSelection$.next();
+    }
+    commentSizeChanged() {
+        this._commentSizeChanged$.next();
+    }
+    createComment(reqId) {
+        this._createComment$.next(reqId);
+    }
+    commentCreated(commentId, reqId) {
+        this._commentCreated$.next({ commentId, reqId });
+    }
+    removeComment(id) {
+        this._removeComment$.next(id);
+    }
+    setCommentSelected(id) {
+        this._setCommentSelected$.next(id);
+    }
+    setCommentsVisibility(value) {
+        this._setCommentsVisibility$.next(value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorService }); }
 }
@@ -1304,6 +1368,38 @@ class DefaultImageApiService {
     }
 }
 
+class BaseCommentComponent {
+    constructor(elementRef, editorService) {
+        this.elementRef = elementRef;
+        this.editorService = editorService;
+        this.resizeObserver = new ResizeObserver(entries => {
+            const height = entries[0].borderBoxSize[0].blockSize;
+            if (!height || this.height === height) {
+                return;
+            }
+            this.height = height;
+            this.editorService.commentSizeChanged();
+        });
+    }
+    setSelected(value) {
+        this.selected = value;
+    }
+    setEditing(value) {
+        this.editing = value;
+    }
+    markAsNew() {
+        this.setSelected(true);
+        this.setEditing(true);
+        this.isNew = true;
+    }
+    initialize() {
+        this.resizeObserver.observe(this.elementRef.nativeElement);
+    }
+    destroy() {
+        this.resizeObserver.disconnect();
+    }
+}
+
 class GrammarService {
     constructor() {
         this.debounceTime = 3000;
@@ -1442,6 +1538,8 @@ var CommandType;
     CommandType[CommandType["RestorePageFormats"] = 35] = "RestorePageFormats";
     CommandType[CommandType["ApplyParagraphs"] = 36] = "ApplyParagraphs";
     CommandType[CommandType["ApplyTableCellsStyles"] = 37] = "ApplyTableCellsStyles";
+    CommandType[CommandType["AttachComment"] = 38] = "AttachComment";
+    CommandType[CommandType["RemoveComment"] = 39] = "RemoveComment";
 })(CommandType || (CommandType = {}));
 
 class PageNumbersModel {
@@ -1539,6 +1637,25 @@ class ApplyTextStyleModel {
     }
 }
 
+class CommentModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
+class AttachCommentModel {
+    constructor(fields) {
+        if (fields) {
+            if (fields.comment) {
+                fields.comment = new CommentModel(fields.comment);
+            }
+            Object.assign(this, fields);
+        }
+    }
+}
+
 const CUSTOM_ELEMENT_MARKER = '*';
 const TABLE_MARKER = '#';
 
@@ -1558,6 +1675,82 @@ class BreakHelper {
     }
 }
 
+class OverlayService {
+    constructor(overlay) {
+        this.overlay = overlay;
+        this.overlayResult = new Subject();
+    }
+    open(component, data, xPosition, yPosition) {
+        this.close();
+        this.overlayRef = this.overlay.create(this.getOverlayConfig(xPosition, yPosition));
+        const ref = this.overlayRef.attach(new ComponentPortal(component));
+        Object.assign(ref.instance, data);
+        this.clickSubscription();
+        return this.overlayResult.asObservable();
+    }
+    close(value) {
+        this.overlayResult.next(value);
+        this.openedSubscription?.unsubscribe();
+        if (this.overlayRef) {
+            this.overlayRef.dispose();
+            this.overlayRef = null;
+        }
+    }
+    clickSubscription() {
+        this.openedSubscription = fromEvent(document, 'mousedown')
+            .pipe(filter(event => {
+            const clickTarget = event.target;
+            return (this.overlayRef &&
+                !this.overlayRef.overlayElement.contains(clickTarget) &&
+                this.overlayRef.overlayElement.parentElement.parentElement.children.length === 1);
+        }), take(1))
+            .subscribe(() => this.close());
+    }
+    getOverlayConfig(xPosition, yPosition) {
+        return new OverlayConfig({
+            hasBackdrop: false,
+            backdropClass: 'noder-backdrop',
+            positionStrategy: this.getOverlayPosition(xPosition, yPosition),
+            scrollStrategy: this.overlay.scrollStrategies.reposition()
+        });
+    }
+    getOverlayPosition(xPosition, yPosition) {
+        return this.overlay.position().global().left(`${xPosition}px`).top(`${yPosition}px`);
+    }
+    scroll(deltaY) {
+        // todo: close overlay when out of visible area
+        if (!this.overlayRef) {
+            return;
+        }
+        const x = this.overlayRef.overlayElement.offsetLeft;
+        const y = this.overlayRef.overlayElement.offsetTop - deltaY;
+        const strategy = this.overlay.position().global().left(`${x}px`).top(`${y}px`);
+        this.overlayRef.updatePositionStrategy(strategy);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.Overlay }] });
+
+class CommentPopupComponent {
+    constructor(editorService, overlayService) {
+        this.editorService = editorService;
+        this.overlayService = overlayService;
+    }
+    addComment() {
+        this.editorService.addCommentAtSelection();
+        this.overlayService.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentPopupComponent, deps: [{ token: EditorService }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: CommentPopupComponent, isStandalone: false, selector: "app-nod-comment-popup", ngImport: i0, template: "<button\n    mat-stroked-button\n    (click)=\"addComment()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-comment\"></mat-icon>\n</button>\n", styles: [":host{min-height:30px;border-radius:8px}button{min-width:0}.mat-icon{display:flex;justify-content:center;align-items:center;margin:0}\n"], dependencies: [{ kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentPopupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-nod-comment-popup', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<button\n    mat-stroked-button\n    (click)=\"addComment()\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-comment\"></mat-icon>\n</button>\n", styles: [":host{min-height:30px;border-radius:8px}button{min-width:0}.mat-icon{display:flex;justify-content:center;align-items:center;margin:0}\n"] }]
+        }], ctorParameters: () => [{ type: EditorService }, { type: OverlayService }] });
+
 class CursorParagraph {
     constructor(row, column) {
         this.row = row;
@@ -1604,6 +1797,9 @@ class ContentHelper {
             }
         });
     }
+    static getCommentsInRange(comments, startIndex, endIndex) {
+        return comments.filter(x => x.startIndex >= startIndex && x.endIndex <= endIndex);
+    }
 }
 
 class CreateEdgesModel {
@@ -1755,65 +1951,6 @@ class FormatHelper {
 
 const POPUP_HEIGHT = 150;
 
-class OverlayService {
-    constructor(overlay) {
-        this.overlay = overlay;
-        this.overlayResult = new Subject();
-    }
-    open(component, data, xPosition, yPosition) {
-        this.close();
-        this.overlayRef = this.overlay.create(this.getOverlayConfig(xPosition, yPosition));
-        const ref = this.overlayRef.attach(new ComponentPortal(component));
-        Object.assign(ref.instance, data);
-        this.clickSubscription();
-        return this.overlayResult.asObservable();
-    }
-    close(value) {
-        this.overlayResult.next(value);
-        this.openedSubscription?.unsubscribe();
-        if (this.overlayRef) {
-            this.overlayRef.dispose();
-            this.overlayRef = null;
-        }
-    }
-    clickSubscription() {
-        this.openedSubscription = fromEvent(document, 'mousedown')
-            .pipe(filter(event => {
-            const clickTarget = event.target;
-            return (this.overlayRef &&
-                !this.overlayRef.overlayElement.contains(clickTarget) &&
-                this.overlayRef.overlayElement.parentElement.parentElement.children.length === 1);
-        }), take(1))
-            .subscribe(() => this.close());
-    }
-    getOverlayConfig(xPosition, yPosition) {
-        return new OverlayConfig({
-            hasBackdrop: false,
-            backdropClass: 'noder-backdrop',
-            positionStrategy: this.getOverlayPosition(xPosition, yPosition),
-            scrollStrategy: this.overlay.scrollStrategies.reposition()
-        });
-    }
-    getOverlayPosition(xPosition, yPosition) {
-        return this.overlay.position().global().left(`${xPosition}px`).top(`${yPosition}px`);
-    }
-    scroll(deltaY) {
-        // todo: close overlay when out of visible area
-        if (!this.overlayRef) {
-            return;
-        }
-        const x = this.overlayRef.overlayElement.offsetLeft;
-        const y = this.overlayRef.overlayElement.offsetTop - deltaY;
-        const strategy = this.overlay.position().global().left(`${x}px`).top(`${y}px`);
-        this.overlayRef.updatePositionStrategy(strategy);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, deps: [{ token: i1.Overlay }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: OverlayService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.Overlay }] });
-
 class GrammarPopupComponent {
     constructor(editorService, overlayService) {
         this.editorService = editorService;
@@ -2194,6 +2331,7 @@ var MouseButton;
 
 class MouseHandler {
     constructor(container, editor) {
+        this.clickableElements = ['.noder-comment'];
         this.clicks = 0;
         this.containerWheel$ = fromEvent(container, 'wheel')
             .pipe(throttleTime(20))
@@ -2203,20 +2341,26 @@ class MouseHandler {
     destroy() {
         this.containerWheel$?.unsubscribe();
         this.containerMouseDown$?.unsubscribe();
-        this.endMousePress();
+        this.endMousePress(null, null);
     }
     startMousePress(editor) {
-        this.endMousePress();
+        this.endMousePress(editor, null);
         this.documentMouseMove$ = fromEvent(document, 'mousemove')
             .pipe(throttleTime(20))
             .subscribe((event) => editor.onMousePressedMove(event));
-        this.documentMouseUp$ = fromEvent(document, 'mouseup').subscribe(() => this.endMousePress());
+        this.documentMouseUp$ = fromEvent(document, 'mouseup').subscribe((event) => this.endMousePress(editor, event));
     }
-    endMousePress() {
+    endMousePress(editor, event) {
         this.documentMouseMove$?.unsubscribe();
         this.documentMouseUp$?.unsubscribe();
+        editor?.onMousePressEnd(event);
     }
     onMultiMouseDown(event, editor) {
+        for (const element of this.clickableElements) {
+            if (event.target.closest(element)) {
+                return;
+            }
+        }
         if (event.button !== MouseButton.Left) {
             editor.onMouseClick(event);
             return;
@@ -2256,6 +2400,14 @@ let CellDataModel$1 = class CellDataModel {
     }
 };
 
+class RemoveCommentModel {
+    constructor(fields) {
+        if (fields) {
+            Object.assign(this, fields);
+        }
+    }
+}
+
 class RemoveEdgesModel {
     constructor(fields) {
         if (fields) {
@@ -2351,6 +2503,16 @@ class OperationHistory {
         this.step = -1;
         this.editorService.historyInfo = new OperationsHistoryInfoModel(this.step, this.storage.length - 1);
     }
+    pushAttachComment(comment) {
+        const redoStep = new AttachCommentModel({ comment: comment });
+        const undoStep = new RemoveCommentModel({ commentId: comment.commentId });
+        this.addToHistory(undoStep, redoStep);
+    }
+    pushRemoveComment(comment) {
+        const redoStep = new RemoveCommentModel({ commentId: comment.commentId });
+        const undoStep = new AttachCommentModel({ comment: comment });
+        this.addToHistory(undoStep, redoStep);
+    }
     pushInsertText(insertIndex, text) {
         const redoStep = new InsertTextModel({ insertIndex, text });
         const undoStep = new DeleteModel({ startIndex: insertIndex, count: text.length });
@@ -2695,6 +2857,67 @@ class ParagraphModel {
     }
 }
 
+class RangeElementHelper {
+    static removeContent(elements, startIndex, endIndex) {
+        const length = endIndex - startIndex + 1;
+        for (let i = elements.length - 1; i >= 0; i--) {
+            const element = elements[i];
+            if (element.endIndex < startIndex) {
+                continue;
+            }
+            if (element.startIndex < startIndex) {
+                if (element.endIndex > endIndex) {
+                    element.endIndex -= length;
+                }
+                else {
+                    element.endIndex = startIndex;
+                }
+                continue;
+            }
+            if (element.startIndex >= startIndex && element.startIndex <= endIndex) {
+                if (element.endIndex <= endIndex) {
+                    elements.splice(i, 1);
+                    continue;
+                }
+                element.startIndex = endIndex;
+                continue;
+            }
+            element.startIndex -= length;
+            element.endIndex -= length;
+        }
+    }
+    static insertContent(elements, index, length) {
+        for (const element of elements) {
+            if (element.startIndex >= index) {
+                element.startIndex += length;
+                element.endIndex += length;
+            }
+            else if (element.endIndex >= index) {
+                element.endIndex += length;
+            }
+        }
+    }
+    static restore(elements, index, contentLength, newElements) {
+        RangeElementHelper.insertContent(elements, index, contentLength);
+        const nextElement = elements.find(x => x.startIndex >= index);
+        const indexInElements = nextElement !== undefined ? elements.indexOf(nextElement) : elements.length;
+        elements.splice(indexInElements, 0, ...newElements);
+    }
+    static replaceContent(elements, startIndex, endIndex, length) {
+        RangeElementHelper.removeContent(elements, startIndex, endIndex);
+        RangeElementHelper.insertContent(elements, startIndex, length);
+    }
+    static shiftIndexes(elements, offset) {
+        for (const element of elements) {
+            element.startIndex += offset;
+            element.endIndex += offset;
+        }
+    }
+    static sliceSection(elements, startIndex, endIndex) {
+        return elements.filter(x => x.startIndex >= startIndex && x.endIndex <= endIndex);
+    }
+}
+
 class TableModel {
     constructor(fields) {
         if (fields) {
@@ -2723,6 +2946,7 @@ class ContentsOperationsHelper {
         const images = IndexedElementHelper.sliceSection(contents.images, startIndex, endIndex).map(x => new ImageModel(x));
         const tables = IndexedElementHelper.sliceSection(contents.tables, startIndex, endIndex).map(x => new TableModel(x));
         const elements = IndexedElementHelper.sliceSection(contents.elements, startIndex, endIndex).map(x => new ElementModel(x));
+        const comments = RangeElementHelper.sliceSection(contents.comments, startIndex, endIndex);
         const breaks = IndexedElementHelper.sliceSection(contents.breaks, startIndex, endIndex).map(x => new BreakModel(x));
         const tabs = IndexedElementHelper.sliceSection(contents.tabs, startIndex, endIndex).map(x => new TabModel(x));
         const links = LinkHelper.sliceSection(contents.links, startIndex, endIndex).map(x => new LinkModel(x));
@@ -2738,7 +2962,8 @@ class ContentsOperationsHelper {
             breaks,
             tabs,
             links,
-            pageFormats
+            pageFormats,
+            comments
         });
     }
 }
@@ -2763,6 +2988,7 @@ class EdgesOperationsHelper {
             paragraphs: [new ParagraphModel({ insertIndex: 0, paragraphStyle: DEFAULT_PARAGRAPH_STYLE })],
             tables: [],
             tabs: [],
+            comments: [],
             links: []
         }));
     }
@@ -4494,6 +4720,7 @@ var VerticalMerge;
 class TableOperationsHelper {
     static insertContent(tables, insertIndex, columnsCount, rowsCount, contentWidth) {
         let rows = [];
+        const columnWidth = Math.round(contentWidth / columnsCount);
         for (let i = 0; i < rowsCount; i++) {
             let cells = [];
             for (let j = 0; j < columnsCount; j++) {
@@ -4507,13 +4734,14 @@ class TableOperationsHelper {
                     tables: [],
                     tabs: [],
                     links: [],
+                    comments: [],
+                    width: columnWidth,
                     widthType: 'dxa'
                 });
                 cells.push(cell);
             }
             rows.push(new RowModel({ cells: cells }));
         }
-        const columnWidth = Math.round(contentWidth / columnsCount);
         const columns = [];
         for (let i = 0; i < columnsCount; i++) {
             const column = new ColumnModel({
@@ -4607,7 +4835,8 @@ class TableOperationsHelper {
                 verticalMerge: this.getCellVerticalMerge(matrix[inheritIndex].cells[i].verticalMerge, targetIndex, inheritIndex),
                 tables: [],
                 tabs: [],
-                links: []
+                links: [],
+                comments: []
             });
             newCells.push(newCell);
         }
@@ -5189,7 +5418,7 @@ class OperationsHelper {
                 }
                 case CommandType.InsertTableColumns: {
                     const model = command.insertTableColumns;
-                    const contentWidth = this.getContentWidth(document, contents);
+                    const contentWidth = this.getContentWidth(document, contents, model.insertIndex);
                     this.insertTableColumns(contents, model.insertIndex, model.count, model.targetIndex, model.inheritIndex, contentWidth);
                     break;
                 }
@@ -5200,7 +5429,7 @@ class OperationsHelper {
                 }
                 case CommandType.RemoveTableColumns: {
                     const model = command.removeTableColumns;
-                    const contentWidth = this.getContentWidth(document, contents);
+                    const contentWidth = this.getContentWidth(document, contents, model.insertIndex);
                     this.removeTableColumns(contents, model.insertIndex, model.startIndex, model.endIndex, contentWidth);
                     break;
                 }
@@ -5215,8 +5444,9 @@ class OperationsHelper {
                     break;
                 }
                 case CommandType.InsertTable: {
-                    const contentWidth = this.getContentWidth(document, contents);
-                    this.insertTable(contents, command.insertTable, contentWidth);
+                    const model = command.insertTable;
+                    const contentWidth = this.getContentWidth(document, contents, model.insertIndex);
+                    this.insertTable(contents, model, contentWidth);
                     break;
                 }
                 case CommandType.ApplyImageStyle: {
@@ -5235,8 +5465,7 @@ class OperationsHelper {
                     break;
                 }
                 case CommandType.Replace: {
-                    const contentWidth = this.getContentWidth(document, contents);
-                    this.replace(contents, command.replace, contentWidth);
+                    this.replace(document, contents, command.replace);
                     break;
                 }
                 case CommandType.CreateEdges: {
@@ -5305,6 +5534,16 @@ class OperationsHelper {
                     this.applyTableCellsStyles(contents, model);
                     break;
                 }
+                case CommandType.AttachComment: {
+                    const model = command.attachComment;
+                    this.addComment(document, model.comment);
+                    break;
+                }
+                case CommandType.RemoveComment: {
+                    const model = command.removeComment;
+                    this.removeComment(document, model.commentId);
+                    break;
+                }
             }
         });
     }
@@ -5332,20 +5571,25 @@ class OperationsHelper {
         IndexedElementHelper.shiftIndexes(restore.elements, offset);
         IndexedElementHelper.shiftIndexes(restore.breaks, offset);
         IndexedElementHelper.shiftIndexes(restore.tabs, offset);
+        RangeElementHelper.shiftIndexes(restore.comments, offset);
         LinkHelper.shiftIndexes(restore.links, offset);
         PageFormatHelper.shiftIndexes(restore.pageFormats, offset);
         this.restore(targetContents, restore);
         return moveIndex;
     }
-    static getContentWidth(document, contents) {
-        let contentWidth = 0;
-        const defaultPageFormat = document.pageFormats[document.pageFormats.length - 1];
+    static getContentWidth(document, contents, insertIndex = 0) {
+        let contentWidth;
         if (contents instanceof CellModel) {
             const margins = (contents.margins?.left ?? 0) + (contents.margins?.right ?? 0);
             contentWidth = contents.width - margins;
         }
+        else if (contents instanceof EdgeModel) {
+            const pageFormat = document.pageFormats[document.pageFormats.length - 1];
+            contentWidth = pageFormat.pageWidth - pageFormat.marginLeft - pageFormat.marginRight;
+        }
         else {
-            contentWidth = defaultPageFormat.pageWidth - defaultPageFormat.marginLeft - defaultPageFormat.marginRight;
+            const pageFormat = document.pageFormats.findLast(x => x.insertIndex <= insertIndex) ?? document.pageFormats[document.pageFormats.length - 1];
+            contentWidth = pageFormat.pageWidth - pageFormat.marginLeft - pageFormat.marginRight;
         }
         return contentWidth;
     }
@@ -5358,6 +5602,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.breaks, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, text.length);
+        RangeElementHelper.insertContent(document.comments, index, text.length);
         LinkOperationsHelper.insertContent(document.links, index, text.length);
         PageFormatOperationsHelper.insertContent(document, index, text.length);
     }
@@ -5370,6 +5615,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insert(document.elements, element.element);
         IndexedElementOperationsHelper.insertContent(document.breaks, element.element.insertIndex, 1);
         IndexedElementOperationsHelper.insertContent(document.tabs, element.element.insertIndex, 1);
+        RangeElementHelper.insertContent(document.comments, element.element.insertIndex, 1);
         LinkOperationsHelper.insertContent(document.links, element.element.insertIndex, 1);
         PageFormatOperationsHelper.insertContent(document, element.element.insertIndex, 1);
     }
@@ -5382,6 +5628,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, text.length);
         BreakOperationsHelper.insertContent(document.breaks, index + text.length - 1, breakType, text.length);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, text.length);
+        RangeElementHelper.insertContent(document.comments, index, text.length);
         LinkOperationsHelper.insertContent(document.links, index, text.length);
         PageFormatOperationsHelper.insertContent(document, index, text.length);
     }
@@ -5394,6 +5641,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, 1);
         IndexedElementOperationsHelper.insertContent(document.breaks, index, 1);
         TabOperationsHelper.insertContent(document.tabs, index);
+        RangeElementHelper.insertContent(document.comments, index, 1);
         LinkOperationsHelper.insertContent(document.links, index, 1);
         PageFormatOperationsHelper.insertContent(document, index, 1);
     }
@@ -5406,6 +5654,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.breaks, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, text.length);
+        RangeElementHelper.insertContent(document.comments, index, text.length);
         PageFormatOperationsHelper.insertContent(document, index, text.length);
         const formatStyle = FormatStyleHelper.getFormatAtIndex(document.formats, index).textStyle;
         LinkOperationsHelper.insert(document.links, link, index, text.length, {
@@ -5463,6 +5712,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.breaks, index, 1);
         ImageOperationsHelper.insertContent(document.images, index, imageData);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, 1);
+        RangeElementHelper.insertContent(document.comments, index, 1);
         LinkOperationsHelper.insertContent(document.links, index, 1);
         PageFormatOperationsHelper.insertContent(document, index, 1);
     }
@@ -5482,6 +5732,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.breaks, index, 1);
         TableOperationsHelper.insertContent(document.tables, index, tableModel.columnsCount, tableModel.rowsCount, contentWidth);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, 1);
+        RangeElementHelper.insertContent(document.comments, index, 1);
         LinkOperationsHelper.insertContent(document.links, index, 1);
         PageFormatOperationsHelper.insertContent(document, index, 1);
         if (tableModel.insertParagraphAfter) {
@@ -5506,6 +5757,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.insertContent(document.elements, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.breaks, index, text.length);
         IndexedElementOperationsHelper.insertContent(document.tabs, index, text.length);
+        RangeElementHelper.insertContent(document.comments, index, text.length);
         LinkOperationsHelper.insertStyledContent(document.links, index, text.length, style);
         PageFormatOperationsHelper.insertContent(document, index, text.length);
     }
@@ -5518,6 +5770,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.restore(document.elements, model.insertIndex, model.text.length, model.elements);
         IndexedElementOperationsHelper.restore(document.breaks, model.insertIndex, model.text.length, model.breaks);
         IndexedElementOperationsHelper.restore(document.tabs, model.insertIndex, model.text.length, model.tabs);
+        RangeElementHelper.restore(document.comments, model.insertIndex, model.text.length, model.comments);
         PageFormatOperationsHelper.restore(document, model.insertIndex, model.text.length, model.pageFormats);
         LinkOperationsHelper.restore(document.links, model.insertIndex, model.text.length, model.links);
     }
@@ -5531,6 +5784,7 @@ class OperationsHelper {
         IndexedElementOperationsHelper.removeContent(document.elements, startIndex, endIndex);
         IndexedElementOperationsHelper.removeContent(document.breaks, startIndex, endIndex);
         IndexedElementOperationsHelper.removeContent(document.tabs, startIndex, endIndex);
+        RangeElementHelper.removeContent(document.comments, startIndex, endIndex);
         PageFormatOperationsHelper.removeContent(document, startIndex, endIndex);
         LinkOperationsHelper.removeContent(document.links, startIndex, endIndex);
     }
@@ -5543,32 +5797,43 @@ class OperationsHelper {
         IndexedElementOperationsHelper.replaceContent(document.elements, startIndex, endIndex, text.length);
         IndexedElementOperationsHelper.replaceContent(document.breaks, startIndex, endIndex, text.length);
         IndexedElementOperationsHelper.replaceContent(document.tabs, startIndex, endIndex, text.length);
+        RangeElementHelper.replaceContent(document.comments, startIndex, endIndex, text.length);
         PageFormatOperationsHelper.replaceContent(document, startIndex, endIndex, text.length);
         LinkOperationsHelper.replaceContent(document.links, startIndex, endIndex, text.length);
     }
-    static replace(document, model, contentWidth) {
+    static addComment(document, comment) {
+        document.comments.push(comment);
+    }
+    static removeComment(document, commentId) {
+        const comment = document.comments.find(x => x.commentId === commentId);
+        document.comments = document.comments.filter(x => x.commentId !== commentId);
+        return comment;
+    }
+    static replace(document, contents, model) {
         this.delete(document, model.delete.startIndex, model.delete.count);
         if (model.insertText) {
-            this.insertText(document, model.insertText.text, model.insertText.insertIndex);
+            this.insertText(contents, model.insertText.text, model.insertText.insertIndex);
         }
         else if (model.insertElement) {
-            this.insertElement(document, model.insertElement);
+            this.insertElement(contents, model.insertElement);
         }
         else if (model.insertTab) {
-            this.insertTab(document, model.insertTab.insertIndex);
+            this.insertTab(contents, model.insertTab.insertIndex);
         }
         else if (model.insertBreak) {
             const text = model.insertBreak.isOnNewParagraph ? `${NEW_LINE_MARKUP}${CUSTOM_ELEMENT_MARKER}` : CUSTOM_ELEMENT_MARKER;
-            this.insertBreak(document, text, model.insertBreak.insertIndex, model.insertBreak.breakType);
+            this.insertBreak(contents, text, model.insertBreak.insertIndex, model.insertBreak.breakType);
         }
         else if (model.insertImage) {
-            this.insertImage(document, model.insertImage.insertIndex, model.insertImage.imageData);
+            this.insertImage(contents, model.insertImage.insertIndex, model.insertImage.imageData);
         }
         else if (model.insertTable) {
-            this.insertTable(document, model.insertTable, contentWidth);
+            const insertTableModel = model.insertTable;
+            const contentWidth = this.getContentWidth(document, contents, insertTableModel.insertIndex);
+            this.insertTable(contents, insertTableModel, contentWidth);
         }
         else if (model.insertLink) {
-            this.insertLink(document, model.insertLink.linkDataModel.text, model.insertLink.linkDataModel.link, model.insertLink.insertIndex);
+            this.insertLink(contents, model.insertLink.linkDataModel.text, model.insertLink.linkDataModel.link, model.insertLink.insertIndex);
         }
     }
     static applyTextStyle(document, startIndex, endIndex, style) {
@@ -5910,11 +6175,12 @@ class PositionHelper {
         const numberingOffsetLeft = paragraphSettings.numberingData.numberingId === null
             ? 0
             : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft;
-        if (lineIndex === 0 &&
-            (textLineInfo.indentFirstLine ||
+        if (textLineInfo.isNumbering &&
+            lineIndex === 0 &&
+            (textLineInfo.indentFirstLine !== null ||
                 (numberingOffsetLeft - textLineInfo.indentLeft > 0 &&
-                    numberingOffsetLeft - textLineInfo.indentLeft < textLineInfo.markerWidth))) {
-            return DEFAULT_OFFSET_AFTER_NUMBERING_MARKER;
+                    numberingOffsetLeft - textLineInfo.indentLeft <= textLineInfo.markerWidth))) {
+            return textLineInfo.markerWidth;
         }
         return 0;
     }
@@ -5991,7 +6257,7 @@ class RenderingHelper {
         lineEl.className = 'noder-line';
         if (lineInfo) {
             const paddingLeft = ScalingHelper.scale(lineInfo.paddingLeft, scalingRatio);
-            const marginLeft = numberingOffsetLeft > 0 ? -numberingOffsetLeft : 0;
+            const marginLeft = numberingOffsetLeft !== null ? -numberingOffsetLeft : 0;
             // eslint-disable-next-line prettier/prettier
             let styleString = `padding-left:${paddingLeft}px;height:${lineInfo.height + lineInfo.offsetAfter}px;margin-top:${lineInfo.offsetBefore}px;margin-bottom:${lineInfo.endPageOffset}px;margin-left:${marginLeft}px;background-color:${lineInfo.backgroundColor};`;
             if (lineInfo.wordSpacing) {
@@ -6021,10 +6287,11 @@ class RenderingHelper {
             ? 0
             : currentParagraph.numberingData.width + currentParagraph.numberingData.paddingLeft;
         let markerWidth = 0;
-        if (currentParagraph.textLinesInfo[0].indentFirstLine ||
-            (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
-                numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth)) {
-            markerWidth = DEFAULT_OFFSET_AFTER_NUMBERING_MARKER;
+        if (currentParagraph.textLinesInfo[0].isNumbering &&
+            (currentParagraph.textLinesInfo[0].indentFirstLine !== null ||
+                (numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft > 0 &&
+                    numberingOffsetLeft - currentParagraph.textLinesInfo[0].indentLeft < currentParagraph.textLinesInfo[0].markerWidth))) {
+            markerWidth = currentParagraph.textLinesInfo[0].markerWidth;
         }
         let lineEl = RenderingHelper.createLineElement(currentParagraph.textLinesInfo[splitIndex], numberingOffsetLeft - markerWidth, scalingRatio);
         domContent.parentNode.appendChild(lineEl);
@@ -6896,9 +7163,10 @@ class TextLayer {
                 ? 0
                 : paragraphSettings.numberingData.width + paragraphSettings.numberingData.paddingLeft - markerWidth;
             let offset = 0;
-            if (numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
+            if (paragraphSettings.textLinesInfo[0].isNumbering &&
+                numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft > 0 &&
                 numberingOffsetLeft - paragraphSettings.textLinesInfo[0].indentLeft < paragraphSettings.textLinesInfo[0].markerWidth) {
-                offset = DEFAULT_OFFSET_AFTER_NUMBERING_MARKER;
+                offset = paragraphSettings.textLinesInfo[0].markerWidth;
             }
             const lineInfo = paragraphSettings.textLinesInfo[0];
             const lastLineEl = this.renderingHelper.createLineElement(lineInfo, numberingOffsetLeft - offset, this.session.generalProperties.scalingRatio);
@@ -7221,6 +7489,9 @@ class CommandModel {
             if (fields.applyTextStyle) {
                 fields.applyTextStyle = new ApplyTextStyleModel(fields.applyTextStyle);
             }
+            if (fields.attachComment) {
+                fields.attachComment = new AttachCommentModel(fields.attachComment);
+            }
             if (fields.createEdges) {
                 fields.createEdges = new CreateEdgesModel(fields.createEdges);
             }
@@ -7263,6 +7534,9 @@ class CommandModel {
             if (fields.moveRange) {
                 fields.moveRange = new MoveRangeModel(fields.moveRange);
             }
+            if (fields.removeComment) {
+                fields.removeComment = new RemoveCommentModel(fields.removeComment);
+            }
             if (fields.removeEdges) {
                 fields.removeEdges = new RemoveEdgesModel(fields.removeEdges);
             }
@@ -7441,6 +7715,12 @@ class SaveCommandsHelper {
     static getRestorePageFormatsCommand(restorePageFormats, targets) {
         return new CommandModel({ commandType: CommandType.RestorePageFormats, restorePageFormats, targets });
     }
+    static getAttachCommentCommand(attachComment, targets) {
+        return new CommandModel({ commandType: CommandType.AttachComment, attachComment, targets });
+    }
+    static getRemoveCommentCommand(removeComment, targets) {
+        return new CommandModel({ commandType: CommandType.RemoveComment, removeComment, targets });
+    }
     static getApplyDocumentPageFormatCommand(applyDocumentPageFormat, targets) {
         return new CommandModel({ commandType: CommandType.ApplyDocumentPageFormat, applyDocumentPageFormat, targets });
     }
@@ -8255,6 +8535,7 @@ class Editor {
         this.edgeElementTagName = 'APP-NOD-EDGE';
         this.imageTagName = 'APP-NOD-IMAGE';
         this.subscriptions = [];
+        this.commentCreateRequests = [];
         this.emojiRegex = /\p{Extended_Pictographic}(?:\p{Emoji_Modifier}|\u{200D}\p{Extended_Pictographic})*/gu;
         this.isRerenderSubscriptionOpen = true;
         this.rerenderResize = () => {
@@ -8283,7 +8564,7 @@ class Editor {
         this.focus();
         this.session.applyToolbarStyles();
         this.search = new Search(editorService);
-        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges());
+        this.subscriptions.push(this.changedEdgeSizeSubscription(), this.changedEdgeSubscription(), this.changedTableSizeSubscription(), this.clipboardDataSubscription(), this.copySelectedSubscription(), this.createCustomComponentSubscription(), this.replaceByCustomComponentSubscription(), this.cutSelectedSubscription(), this.disableSelectionSubscription(), this.endMousePressSubscription(), this.imageLoadedSubscription(), this.insertBreakSubscription(), this.insertImageSubscription(), this.insertLinkSubscription(), this.insertTableColumnsSubscription(), this.insertTableRowsSubscription(), this.insertTableSubscription(), this.updateTableBorderStyleSubscription(), this.updateTableBorderWidthSubscription(), this.updateTableBordersSubscription(), this.insertTextSubscription(), this.pasteFromClipboardSubscription(), this.printSubscription(), this.redoSubscription(), this.removeLeftSubscription(), this.removeNumberingsSubscription(), this.removeRightSubscription(), this.removeSelectedSubscription(), this.removeTableColumnsSubscription(), this.removeTableRowsSubscription(), this.removeTableSubscription(), this.rerenderSubscription(), this.resizeTableColumnsSubscription(), ...this.searchOptionSubscriptions(), ...this.replaceSubscription(), this.grammarReplaceSubscription(), this.ignoreGrammarErrorSubscription(), this.selectAllSubscription(), this.setImageStyleSubscription(), this.setNumberingTemplateTypeSubscription(), this.setParagraphStylesSubscription(), this.setTextStylesSubscription(), this.undoSubscription(), this.updateEdgeSubscription(), this.viewOnlyModeSubscription(), this.applyPageFormatSubscription(), this.applyRightMarginPageFormatSubscription(), this.applyLeftMarginPageFormatSubscription(), this.insertPageFormatSubscription(), this.applyDocumentPageFormatSubscription(), this.dragMoveSubscription(), this.dragDropSubscription(), this.applyFirstLinePositionSubscription(), this.applyRightIndentParagraphSubscription(), this.applyLeftIndentParagraphSubscription(), this.applyTabSettingsSubscription(), this.commandCreatedForEdges(), ...this.commentCreationSubscriptions(), this.removeCommentSubscription(), this.rerenderCommentsSubscription(), this.selectCommentSubscription(), this.setComentsVisibilitySubscription());
     }
     destroy() {
         this.subscriptions.forEach(s => s?.unsubscribe());
@@ -8431,9 +8712,9 @@ class Editor {
             if (paragraph.paragraphSettings.numberingData.numberingId && paragraph.paragraphSettings.numberingData.level <= 6) {
                 this.applyParagraphStyles(new ParagraphStyleModel({
                     numberingLevel: paragraph.paragraphSettings.numberingData.level + 1,
-                    indentLeft: 0,
-                    indentFirstLine: 0,
-                    indentHanging: 0
+                    indentLeft: null,
+                    indentFirstLine: null,
+                    indentHanging: null
                 }));
                 return;
             }
@@ -8459,9 +8740,9 @@ class Editor {
                 }
                 this.applyParagraphStyles(new ParagraphStyleModel({
                     numberingLevel: paragraph.paragraphSettings.numberingData.level - 1,
-                    indentLeft: 0,
-                    indentFirstLine: 0,
-                    indentHanging: 0
+                    indentLeft: null,
+                    indentFirstLine: null,
+                    indentHanging: null
                 }));
                 return;
             }
@@ -8563,7 +8844,7 @@ class Editor {
         const partIndexes = ContentHelper.getSelectedPartDocumentIndexes(this.session.displayData.paragraphs, this.selection.range);
         model.delete = new DeleteModel({ startIndex: partIndexes.startIndex, count: partIndexes.endIndex - partIndexes.startIndex + 1 });
         this.saveReplaceToHistory(this.selection.range, model);
-        this.removeCustomElementsData();
+        this.removeExternalData();
         const endPosition = this.session.replace(model);
         this.onDocumentChange(new Range(this.selection.cursor, endPosition));
         this.onSelectionChange();
@@ -8770,6 +9051,7 @@ class Editor {
             const deepCopy = structuredClone(operation);
             this.editorService.restoreCustomElementsData(deepCopy.elements);
             this.session.restore(deepCopy);
+            this.editorService.restoreCommentData(operation.comments.map(x => x.commentId));
             command = SaveCommandsHelper.getRestoreCommand(deepCopy, this.targets);
         }
         else if (operation instanceof ApplyTextStyleModel) {
@@ -8885,6 +9167,7 @@ class Editor {
             const deepCopy = structuredClone(operation);
             this.editorService.restoreCustomElementsData(deepCopy.restore.elements);
             this.session.restoreWithParagraph(deepCopy);
+            this.editorService.restoreCommentData(operation.restore.comments.map(x => x.commentId));
             command = SaveCommandsHelper.getRestoreWithParagraphCommand(deepCopy, this.targets);
         }
         else if (operation instanceof MoveRangeModel) {
@@ -8920,9 +9203,20 @@ class Editor {
             const deepCopy = structuredClone(operation);
             this.editorService.restoreCustomElementsData(deepCopy.restore.elements);
             this.session.replaceByRestore(structuredClone(deepCopy));
+            this.editorService.restoreCommentData(operation.restore.comments.map(x => x.commentId));
             command = SaveCommandsHelper.getReplaceByRestoreCommand(structuredClone(deepCopy), this.targets);
         }
-        else if (operation instanceof ApplyParagraphsModel) {
+        else if (operation instanceof AttachCommentModel) {
+            this.session.addComment(operation.comment);
+            this.editorService.restoreCommentData([operation.comment.commentId]);
+            command = SaveCommandsHelper.getAttachCommentCommand(operation, this.targets);
+        }
+        else if (operation instanceof RemoveCommentModel) {
+            this.session.removeComment(operation.commentId);
+            this.editorService.removeCommentData([operation.commentId]);
+            command = SaveCommandsHelper.getRemoveCommentCommand(operation, this.targets);
+        }
+        else if (operation instanceof ApplyParagraphsModel) {
             const deepCopy = structuredClone(operation);
             this.session.applyParagraphs(deepCopy.paragraphs);
             command = SaveCommandsHelper.getApplyParagraphsCommand(deepCopy.paragraphs, this.targets);
@@ -8938,6 +9232,14 @@ class Editor {
         this.commandsService.createCommand(command);
         this.renderer.updateCursor();
     }
+    saveAttachCommentToHistory(commentModel) {
+        this.history.pushAttachComment(commentModel);
+        this.commandsService.createCommand(SaveCommandsHelper.getAttachCommentCommand(new AttachCommentModel({ comment: commentModel }), this.targets));
+    }
+    saveRemoveCommentToHistory(comment, target) {
+        this.history.pushRemoveComment(comment);
+        this.commandsService.createCommand(SaveCommandsHelper.getRemoveCommentCommand(new RemoveCommentModel({ commentId: comment.commentId }), [target]));
+    }
     saveRemoveToHistory(range) {
         const restore = this.session.createRestoreFromSlice(range.start, range.end);
         this.history.pushDelete(restore);
@@ -9114,7 +9416,7 @@ class Editor {
         }
         else {
             this.saveRemoveToHistory(range);
-            this.removeCustomElementsData();
+            this.removeExternalData();
             this.session.remove(range);
             this.onSelectionChange();
             this.onContentChange();
@@ -9135,18 +9437,22 @@ class Editor {
             paragraphStyle: new ParagraphStyleModel({ ...lastParagraph.paragraphStyle })
         });
         this.saveRemoveWithParagraphToHistory(operation, reversed);
-        this.removeCustomElementsData();
+        this.removeExternalData();
         this.session.removeWithParagraph(operation);
         this.onSelectionChange();
         this.onContentChange();
     }
-    removeCustomElementsData() {
+    removeExternalData() {
         const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
         const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.end) - 1;
         const elements = IndexedElementHelper.sliceSection(this.session.model.elements, startIndex, endIndex).slice();
         if (elements.length) {
             this.editorService.removeCustomElementsData(elements);
         }
+        const comments = ContentHelper.getCommentsInRange(this.session.model.comments, startIndex, endIndex);
+        if (comments.length) {
+            this.editorService.removeCommentData(comments.map(x => x.commentId));
+        }
     }
     removeOrLowerNestingNumbering(paragraph) {
         if (paragraph.paragraphSettings.numberingData.level > 0) {
@@ -9190,6 +9496,39 @@ class Editor {
         const data = this.textInput.getClipboardData(event);
         this.pasteData(data);
     }
+    onCreateComment() {
+        const startIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.start);
+        const endIndex = ContentHelper.paragraphPositionToDocumentIndex(this.session.displayData.paragraphs, this.selection.range.end);
+        const reqId = Date.now();
+        const comment = new CommentModel({ startIndex, endIndex });
+        this.commentCreateRequests.push({ sessionId: this.session.sessionId, reqId, comment });
+        this.editorService.createComment(reqId);
+    }
+    onCommentCreated(reqId, commentId) {
+        const request = this.commentCreateRequests.find(x => x.reqId === reqId);
+        const commentModel = request.comment;
+        if (!commentModel) {
+            return;
+        }
+        const sessionModel = this.regulatorService.getSessionModel(request.sessionId);
+        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.saveAttachCommentToHistory(commentModel);
+    }
+    onCommentRemoved(id) {
+        const { session, target } = this.regulatorService.getCommentTarget(id);
+        const comment = session.session.removeComment(id);
+        this.saveRemoveCommentToHistory(comment, target);
+        this.editorService.removeCommentData([id]);
+        session.renderer.loop.schedule({ comments: true });
+    }
+    onSetCommentsVisibility(value) {
+        this.commentsVisible = value;
+        this.regulatorService.setCommentsVisibility(value);
+    }
     initResizeListener() {
         window.addEventListener('resize', this.rerenderResize);
     }
@@ -9312,6 +9651,7 @@ class Editor {
             const range = this.session.getWordRange(position.row, position.column);
             this.selection.placeSelection(range.start, range.end);
         }
+        this.setCommentPopup(event);
         this.onSelectionChange();
     }
     onTripleClick(event) {
@@ -9325,6 +9665,7 @@ class Editor {
         const start = new CursorParagraph(position.row, 0);
         const end = new CursorParagraph(position.row, this.session.displayData.getParagraphContent(position.row).length);
         this.selection.placeSelection(start, end);
+        this.setCommentPopup(event);
         this.onSelectionChange();
     }
     onQuadClick(event) {
@@ -9335,19 +9676,31 @@ class Editor {
         }
         event.preventDefault();
         this.selection.selectAll(this.session.model);
+        this.setCommentPopup(event);
         this.onSelectionChange();
     }
     onMouseWheel(event) {
         if (event.ctrlKey) {
             return;
         }
+        event.stopPropagation();
+        event.preventDefault();
         const factor = 0.35;
         const scrollSpeed = 4;
-        const deltaY = event.deltaY * factor * scrollSpeed;
+        let deltaY = event.deltaY * factor * scrollSpeed;
+        const scrollTop = this.mainRenderer.scrollBar.scrollTop;
+        const maxScroll = this.mainSession.displayData.allPagesHeight - this.mainRenderer.size.scrollerHeight;
+        if (scrollTop + deltaY < 0) {
+            deltaY = -scrollTop;
+        }
+        else if (scrollTop + deltaY > maxScroll) {
+            deltaY = maxScroll - scrollTop;
+        }
+        if (deltaY === 0) {
+            return;
+        }
         this.onScroll(deltaY);
         this.overlayService.scroll(deltaY);
-        event.stopPropagation();
-        event.preventDefault();
     }
     onScroll(deltaY) {
         this.mainRenderer.scrollBy(deltaY);
@@ -9505,8 +9858,18 @@ class Editor {
         this.editorService.paragraphStyle(paragraphStyle, numbering);
         this.editorService.setPageFormat(pageFormat.pageFormatModel);
         this.rerenderMarker();
+        this.updateSelectedComment();
+        if (!this.selection.isEmpty && this.commentsVisible) {
+            const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+            const mainRect = this.mainRenderer.container.getBoundingClientRect();
+            const rect = this.renderer.container.getBoundingClientRect();
+            const hintX = mainRect.right - 20;
+            const hintY = rect.top + cursor.pageY + cursor.lineHeight / 2 - 20;
+            this.overlayService.open(CommentPopupComponent, {}, hintX, hintY);
+        }
     }
     onContentChange() {
+        this.renderer.loop.schedule({ comments: true });
         if (this.search.term) {
             this.find(this.search.term);
         }
@@ -9616,6 +9979,9 @@ class Editor {
         }
         this.scrollCursorIntoMainView();
     }
+    onMousePressEnd(event) {
+        this.setCommentPopup(event);
+    }
     provideTextStyle(component) {
         const session = this.regulatorService.getSession(component.sessionId);
         const format = session.model.formats.find(x => x.startIndex <= component.insertIndex && x.endIndex >= component.insertIndex);
@@ -9776,7 +10142,7 @@ class Editor {
     }
     applyFirstLinePositionSubscription() {
         return this.editorService.firstLinePosition$.subscribe(x => {
-            const value = x > 0 ? { indentFirstLine: x, indentHanging: 0 } : { indentHanging: Math.abs(x), indentFirstLine: 0 };
+            const value = x > 0 ? { indentFirstLine: x, indentHanging: null } : { indentHanging: Math.abs(x), indentFirstLine: null };
             this.applyParagraphsMargin(value);
         });
     }
@@ -9829,7 +10195,7 @@ class Editor {
     }
     endMousePressSubscription() {
         return this.editorService.endMousePress$.subscribe(() => {
-            this.mouseHandler.endMousePress();
+            this.mouseHandler.endMousePress(this, null);
         });
     }
     disableSelectionSubscription() {
@@ -10025,6 +10391,28 @@ class Editor {
             }
         });
     }
+    commentCreationSubscriptions() {
+        return [
+            this.editorService.addCommentAtSelection$.subscribe(() => this.onCreateComment()),
+            this.editorService.commentCreated$.subscribe(x => this.onCommentCreated(x.reqId, x.commentId))
+        ];
+    }
+    rerenderCommentsSubscription() {
+        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);
+            }
+        });
+    }
+    removeCommentSubscription() {
+        return this.editorService.removeComment$.subscribe(x => this.onCommentRemoved(x));
+    }
+    setComentsVisibilitySubscription() {
+        return this.editorService.setCommentsVisibility$.subscribe(x => this.onSetCommentsVisibility(x));
+    }
     recreateMainSession() {
         while (this.regulatorService.sessions.length > 0) {
             const session = this.regulatorService.sessions[0];
@@ -10070,6 +10458,28 @@ class Editor {
         sessionModel.session.selection.placeCursor(this.search.currentMatch.range.start);
         this.renderer.updateCursor();
     }
+    setCommentPopup(event) {
+        if (this.selection.range.isEmpty || !this.commentsVisible) {
+            return;
+        }
+        const cursor = PositionHelper.documentToPixel(this.session, this.session.selection.cursor);
+        const mainRect = this.mainRenderer.container.getBoundingClientRect();
+        const rect = this.renderer.container.getBoundingClientRect();
+        const hintX = mainRect.right - 20;
+        const hintY = rect.top + cursor.pageY + cursor.lineHeight / 2 - 20;
+        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';
@@ -11677,7 +12087,7 @@ class NumberingHelper {
         const level = paragraph.paragraphStyle.numberingLevel;
         const numberingLevelModel = this.find(numberings, numberingId, level);
         for (let i = 0; i < level; i++) {
-            if (!numberingInfo[numberingId][i]) {
+            if (!numberingInfo[numberingId] || !numberingInfo[numberingId][i]) {
                 const numberingLevel = this.find(numberings, numberingId, i);
                 this.getMarker(numberingLevel, numberingId, paragraphs, paragraphIndex, numberingInfo);
             }
@@ -11692,13 +12102,13 @@ class NumberingHelper {
         paragraph.numberingData.markerTextStyle = markerTextStyle;
         paragraph.numberingData.width = markerSizes.width;
         paragraph.numberingData.height = markerSizes.height;
-        const indentLeft = paragraphStyle.indentLeft ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
+        const indentLeft = paragraphStyle.indentLeft !== null ? paragraphStyle.indentLeft : numberingLevel.indentLeft;
         let indent = 0;
-        if (!paragraphStyle.indentHanging && !paragraphStyle.indentFirstLine) {
+        if (paragraphStyle.indentHanging === null && paragraphStyle.indentFirstLine === null) {
             indent = -numberingLevel.indentHanging;
         }
         else {
-            indent = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+            indent = paragraphStyle.indentHanging !== null ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
         }
         paragraph.numberingData.paddingLeft = indentLeft + indent;
     }
@@ -12468,7 +12878,7 @@ class DisplayData extends EventEmitting {
             const isLastLineOfParagraph = !wrapLimit || prevToken.isLineBreak;
             if (paragraphStyle.alignment === Alignment$1.justify && !isLastLineOfParagraph && wrapTokens.length > 1) {
                 let currentLineWidth = 0;
-                let spaceCount = 0;
+                let spaceCount = wrapTokens[0].markerWidth ? 1 : 0;
                 for (let i = 0; i < wrapTokens.length; i++) {
                     const token = wrapTokens[i];
                     currentLineWidth += token.width;
@@ -12483,7 +12893,7 @@ class DisplayData extends EventEmitting {
                 }
                 const { left, right, firstLine, hanging } = lineInfo.indent;
                 const indent = left + right + firstLine - hanging || 0;
-                const availableWidth = pageFormat.contentWidth - indent;
+                const availableWidth = pageFormat.contentWidth - indent - wrapTokens[0].markerWidth;
                 const whitespaceDeficit = availableWidth - currentLineWidth;
                 if (spaceCount > 0 && whitespaceDeficit > 0) {
                     lineInfo.wordSpacing = whitespaceDeficit / spaceCount;
@@ -12550,7 +12960,7 @@ class DisplayData extends EventEmitting {
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
-                    markerWidth: lineInfo.markerWidth,
+                    markerWidth: isFirstCharacter && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
                     isNumbering: lineInfo.isNumbering,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
@@ -12681,7 +13091,7 @@ class DisplayData extends EventEmitting {
                     indentBefore: lineInfo.offsetBefore,
                     indentAfter: lineInfo.offsetAfter,
                     lineSpacing: lineInfo.lineSpacing,
-                    markerWidth: lineInfo.markerWidth,
+                    markerWidth: isFirstCharacter && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
                     isPageBreak: breakType === BreakTypes.Page,
                     isLineBreak: breakType === BreakTypes.TextWrapping,
                     isTab: false,
@@ -12804,16 +13214,17 @@ class DisplayData extends EventEmitting {
         markerWidth = markerSizes.width;
         let indentHanging = levelModel.indentHanging;
         let indentFirstLine = DEFAULT_PARAGRAPH_STYLE.indentFirstLine;
-        if (paragraph.paragraphStyle.indentFirstLine || paragraph.paragraphStyle.indentHanging) {
-            if (paragraph.paragraphStyle.indentFirstLine) {
+        if (paragraph.paragraphStyle.indentFirstLine !== null || paragraph.paragraphStyle.indentHanging !== null) {
+            if (paragraph.paragraphStyle.indentFirstLine !== null) {
                 indentFirstLine = paragraph.paragraphStyle.indentFirstLine;
-                indentHanging = 0;
+                indentHanging = null;
             }
             else {
-                indentHanging = paragraph.paragraphStyle.indentHanging ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
+                indentHanging =
+                    paragraph.paragraphStyle.indentHanging !== null ? paragraph.paragraphStyle.indentHanging : levelModel.indentHanging;
             }
         }
-        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft ? paragraph.paragraphStyle.indentLeft : levelModel.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
+        const indent = new IndentModel(indentFirstLine, indentHanging, paragraph.paragraphStyle.indentLeft !== null ? paragraph.paragraphStyle.indentLeft : levelModel.indentLeft, paragraph.paragraphStyle.indentRight ?? DEFAULT_PARAGRAPH_STYLE.indentRight);
         return { indent, markerWidth: markerWidth + markerWidth / marker.length };
     }
     getLineInfoFromTextLine(index) {
@@ -12883,7 +13294,7 @@ class DisplayData extends EventEmitting {
         if (displayTokens[0].isTable || (displayTokens[0].breaksLine && displayTokens.length === 1)) {
             return 1;
         }
-        const maxRowWidth = contentWidth - displayTokens[0].indentRight;
+        const maxRowWidth = contentWidth - displayTokens[0].indentRight - displayTokens[0].markerWidth;
         let sum = displayTokens[0].indentLeft + displayTokens[0].indentFirstLine - displayTokens[0].indentHanging || 0;
         let prevTabIndex = null;
         let tabCenter = null;
@@ -13775,10 +14186,11 @@ class EditSession {
     get paragraphInfoChanges$() {
         return this.displayData.ParagraphInfoChanges$;
     }
-    constructor(displayData, sessionId, customContentService, model, selection, generalProperties, editorService, customComponents, type, scrollBar, edgeType) {
+    constructor(displayData, sessionId, customContentService, commentRenderService, model, selection, generalProperties, editorService, customComponents, type, scrollBar, edgeType, pageType) {
         this.displayData = displayData;
         this.sessionId = sessionId;
         this.customContentService = customContentService;
+        this.commentRenderService = commentRenderService;
         this.model = model;
         this.selection = selection;
         this.generalProperties = generalProperties;
@@ -13787,6 +14199,7 @@ class EditSession {
         this.type = type;
         this.scrollBar = scrollBar;
         this.edgeType = edgeType;
+        this.pageType = pageType;
         this.tokenRe = new RegExp('^[' + UnicodeHelper.wordChars + '\\$_]+', 'g');
         this.nonTokenRe = new RegExp('^(?:[^' + UnicodeHelper.wordChars + '\\$_]|\\s])+', 'g');
     }
@@ -14135,6 +14548,17 @@ class EditSession {
         this.selection.placeCursor(endPosition);
         return endPosition;
     }
+    addComment(comment) {
+        OperationsHelper.addComment(this.model, comment);
+        this.commentRenderService.createNewComment(comment.commentId);
+    }
+    removeComment(commentId) {
+        return OperationsHelper.removeComment(this.model, commentId);
+    }
+    getCommentAtCursor() {
+        const index = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, this.selection.cursor);
+        return this.model.comments.find(x => index >= x.startIndex && index <= x.endIndex);
+    }
     insertElement(position, element) {
         const insertIndex = ContentHelper.paragraphPositionToDocumentIndex(this.displayData.paragraphs, position);
         const insertElement = new InsertElementModel({ element: new ElementModel({ insertIndex, ...element }) });
@@ -14605,108 +15029,6 @@ class MainSessionSourceModel {
     }
 }
 
-class CursorLayer {
-    constructor(parentElement, session) {
-        this.session = session;
-        this.blinkInterval = 1000;
-        this.layer = document.createElement('div');
-        this.layer.className = 'noder-layer noder-cursor-layer';
-        parentElement.appendChild(this.layer);
-        this.cursor = document.createElement('div');
-        this.cursor.className = 'noder-cursor';
-        this.layer.appendChild(this.cursor);
-        this.hideCursor();
-    }
-    hideCursor() {
-        this.isVisible = false;
-        DomHelper.addCssClass(this.layer, 'noder-hidden-cursors');
-        this.removeAnimationClass();
-    }
-    showCursor() {
-        this.isVisible = true;
-        DomHelper.removeCssClass(this.layer, 'noder-hidden-cursors');
-        this.addAnimationClass();
-    }
-    showStaticCursor() {
-        this.isVisible = true;
-        DomHelper.removeCssClass(this.layer, 'noder-hidden-cursors');
-        this.removeAnimationClass();
-    }
-    detectVisibility() {
-        const selectionRange = this.session.selection.selectedRange;
-        if (selectionRange.isEmpty) {
-            DomHelper.removeCssClass(this.layer, 'selecting');
-            return;
-        }
-        DomHelper.addCssClass(this.layer, 'selecting');
-    }
-    update(config) {
-        this.cursorPosition = this.getPixelPosition();
-        this.drawCursor(config.maxHeight);
-        this.detectVisibility();
-        this.restartAnimation();
-    }
-    getPixelPosition(position) {
-        if (!position) {
-            position = this.session.selection.cursor;
-        }
-        return PositionHelper.documentToPixel(this.session, position);
-    }
-    addTextStylesToCursor() {
-        const textStyle = this.session.editorService.styles;
-        DomHelper.setStyle(this.cursor.style, 'border-color', textStyle.fontColor);
-        DomHelper.setStyle(this.cursor.style, 'fontSize', `${textStyle.fontSize}px`);
-        if (textStyle.italic) {
-            DomHelper.setStyle(this.cursor.style, '-webkit-transform', 'skewX(-13deg)');
-        }
-        else {
-            DomHelper.setStyle(this.cursor.style, '-webkit-transform', 'skewX(0)');
-        }
-        const metricSize = FontMetrics.measureCharSize('EMPTY_LINE', ContentStyleHelper.getFontStylesString(new TextStyleModel({
-            italic: textStyle.italic,
-            bold: textStyle.bold,
-            fontSize: textStyle.fontSize,
-            fontFamily: textStyle.fontFamily
-        })));
-        const fontMetricHeight = metricSize.ascent + metricSize.descent;
-        const maxHeight = this.cursorPosition.sizeMax.ascent + this.cursorPosition.sizeMax.descent;
-        const fontShoulders = fontMetricHeight - metricSize.font;
-        const offset = metricSize.descent - fontShoulders;
-        let top = this.cursorPosition.pageY + this.cursorPosition.sizeMax.ascent - metricSize.font + offset;
-        if (fontMetricHeight !== maxHeight && maxHeight >= this.cursorPosition.lineHeight) {
-            top -= maxHeight - this.cursorPosition.lineHeight;
-        }
-        DomHelper.setStyle(this.cursor.style, 'top', `${top < 0 ? 0 : top}px`);
-        DomHelper.setStyle(this.cursor.style, 'height', `${fontMetricHeight}px`);
-    }
-    restartAnimation() {
-        this.removeAnimationClass();
-        if (!this.isVisible) {
-            return;
-        }
-        this.addAnimationClass();
-    }
-    drawCursor(maxLayerHeight) {
-        const isCursorInView = this.cursorPosition.pageY >= 0 && this.cursorPosition.pageY < maxLayerHeight;
-        if (!isCursorInView) {
-            DomHelper.setStyle(this.cursor.style, 'display', 'none');
-            return;
-        }
-        DomHelper.setStyle(this.cursor.style, 'display', 'block');
-        const currentSize = this.cursorPosition.sizeCurrent;
-        DomHelper.setStyle(this.cursor.style, 'left', `${this.cursorPosition.pageX}px`);
-        DomHelper.setStyle(this.cursor.style, 'width', `${currentSize.width}px`);
-        this.addTextStylesToCursor();
-    }
-    removeAnimationClass() {
-        DomHelper.removeCssClass(this.layer, 'noder-animate-blinking');
-    }
-    addAnimationClass() {
-        this.cursor.style.animationDuration = `${this.blinkInterval}ms`;
-        DomHelper.addCssClass(this.layer, 'noder-animate-blinking');
-    }
-}
-
 class HighlightLayer {
     constructor(parentEl, cssClass, session) {
         this.session = session;
@@ -14726,6 +15048,7 @@ class HighlightLayer {
         }
         selectionElement.style.cssText = cssPosition;
         selectionElement.className = cssClass;
+        return selectionElement;
     }
     getTop(row) {
         const paragraphs = this.session.displayData.paragraphs;
@@ -14751,6 +15074,7 @@ class HighlightLayer {
             paragraphInfo.lineTopOffset -
             this.session.scrollTop;
         const padding = this.session.displayData.pagesFormat[this.session.displayData.pagesFormat.length - 1].pageFormatModel.marginLeft;
+        const results = [];
         for (let i = 0; i < textLinesInfo.length; i++) {
             const lineInfo = textLinesInfo[i].textLinesInfo;
             const paragraphLineIndex = textLinesInfo[i].paragraphSettings.textLinesInfo.findIndex(x => x === textLinesInfo[i].textLinesInfo);
@@ -14763,9 +15087,10 @@ class HighlightLayer {
                 ? 0
                 : textLinesInfo[i].paragraphSettings.numberingData.width + textLinesInfo[i].paragraphSettings.numberingData.paddingLeft;
             if (paragraphLineIndex === 0 &&
+                lineInfo.isNumbering &&
                 (lineInfo.indentFirstLine ||
-                    (numberingOffsetLeft - lineInfo.indentLeft > 0 && numberingOffsetLeft - lineInfo.indentLeft < lineInfo.markerWidth))) {
-                markerWidth = lineInfo.markerWidth ?? 0;
+                    (numberingOffsetLeft - lineInfo.indentLeft > 0 && numberingOffsetLeft - lineInfo.indentLeft <= lineInfo.markerWidth))) {
+                markerWidth = lineInfo.markerWidth;
             }
             const left = lineInfo.paddingLeft + padding + lineInfo.offsetMargin + markerWidth;
             let style;
@@ -14783,9 +15108,11 @@ class HighlightLayer {
                 let width = lineInfo.width + (lineInfo.wordSpacingWidth ?? 0);
                 style = this.getMarkerStyle(lineInfo.height, width, top, left);
             }
-            this.renderHighlight(style, cssClass);
+            const result = this.renderHighlight(style, cssClass);
             top += lineInfo.height + lineInfo.offsetAfter + lineInfo.endPageOffset;
+            results.push(result);
         }
+        return results;
     }
     // Draws a marker which covers part or whole width of a single screen line
     drawSingleLineMarker(range, cssClass) {
@@ -14795,7 +15122,7 @@ class HighlightLayer {
         const width = rangeInfo.screenWidth;
         const top = this.getTop(range.start.row);
         const left = rangeInfo.leftPos;
-        this.renderHighlight(this.getMarkerStyle(height, width, top, left), cssClass);
+        return this.renderHighlight(this.getMarkerStyle(height, width, top, left), cssClass);
     }
     drawCustomElementHighlight(elementInfo, cssClass, screenParentRange) {
         const elementIndex = this.session.displayData.paragraphs[elementInfo.parentRange.start.row].startIndex + elementInfo.parentRange.start.column;
@@ -14823,6 +15150,167 @@ class HighlightLayer {
     }
 }
 
+class CommentHighlightLayer extends HighlightLayer {
+    constructor(parentEl, cssClass, session, commentService) {
+        super(parentEl, cssClass, session);
+        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;
+        this.selectionIndex = 0;
+        const commentRenderRequests = [];
+        for (const comment of comments) {
+            const startPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.startIndex);
+            const endPosition = ContentHelper.documentIndexToParagraphIndex(this.session.displayData.paragraphs, comment.endIndex);
+            const range = new Range(startPosition, endPosition);
+            const screenRange = range.toScreenRange(this.session);
+            if (config.visibleRange &&
+                (screenRange.end.row < config.visibleRange.startScreenLine || screenRange.start.row > config.visibleRange.endScreenLine)) {
+                this.commentService.removeCommentFromRender(this.session.sessionId, comment.commentId);
+                continue;
+            }
+            if (!screenRange.isEmpty) {
+                const className = comment.commentId === this.selectedCommentId ? this.selectedCommentClassName : this.className;
+                const result = screenRange.isSingleLine
+                    ? this.drawSingleLineMarker(screenRange, className)
+                    : this.drawMultiLineMarker(screenRange, className);
+                commentRenderRequests.push(this.requestCommentRender(result, comment.commentId));
+            }
+        }
+        this.commentService.requestCommentsRender(this.session.sessionId, commentRenderRequests);
+        if (this.selectionIndex !== -1) {
+            while (this.selectionIndex < this.element.childElementCount) {
+                this.element.removeChild(this.element.lastChild);
+            }
+        }
+    }
+    setSelectedComment(id) {
+        if (this.selectedCommentId) {
+            this.commentService.setCommentSelected(this.selectedCommentId, false);
+        }
+        this.selectedCommentId = id;
+        if (id) {
+            this.commentService.setCommentSelected(id);
+        }
+    }
+    requestCommentRender(highlight, id) {
+        const element = Array.isArray(highlight) ? highlight[0] : highlight;
+        const rect = element.getBoundingClientRect();
+        return { commentId: id, top: rect.top, left: rect.left };
+    }
+}
+
+class CursorLayer {
+    constructor(parentElement, session) {
+        this.session = session;
+        this.blinkInterval = 1000;
+        this.layer = document.createElement('div');
+        this.layer.className = 'noder-layer noder-cursor-layer';
+        parentElement.appendChild(this.layer);
+        this.cursor = document.createElement('div');
+        this.cursor.className = 'noder-cursor';
+        this.layer.appendChild(this.cursor);
+        this.hideCursor();
+    }
+    hideCursor() {
+        this.isVisible = false;
+        DomHelper.addCssClass(this.layer, 'noder-hidden-cursors');
+        this.removeAnimationClass();
+    }
+    showCursor() {
+        this.isVisible = true;
+        DomHelper.removeCssClass(this.layer, 'noder-hidden-cursors');
+        this.addAnimationClass();
+    }
+    showStaticCursor() {
+        this.isVisible = true;
+        DomHelper.removeCssClass(this.layer, 'noder-hidden-cursors');
+        this.removeAnimationClass();
+    }
+    detectVisibility() {
+        const selectionRange = this.session.selection.selectedRange;
+        if (selectionRange.isEmpty) {
+            DomHelper.removeCssClass(this.layer, 'selecting');
+            return;
+        }
+        DomHelper.addCssClass(this.layer, 'selecting');
+    }
+    update(config) {
+        this.cursorPosition = this.getPixelPosition();
+        this.drawCursor(config.maxHeight);
+        this.detectVisibility();
+        this.restartAnimation();
+    }
+    getPixelPosition(position) {
+        if (!position) {
+            position = this.session.selection.cursor;
+        }
+        return PositionHelper.documentToPixel(this.session, position);
+    }
+    addTextStylesToCursor() {
+        const textStyle = this.session.editorService.styles;
+        DomHelper.setStyle(this.cursor.style, 'border-color', textStyle.fontColor);
+        DomHelper.setStyle(this.cursor.style, 'fontSize', `${textStyle.fontSize}px`);
+        if (textStyle.italic) {
+            DomHelper.setStyle(this.cursor.style, '-webkit-transform', 'skewX(-13deg)');
+        }
+        else {
+            DomHelper.setStyle(this.cursor.style, '-webkit-transform', 'skewX(0)');
+        }
+        const metricSize = FontMetrics.measureCharSize('EMPTY_LINE', ContentStyleHelper.getFontStylesString(new TextStyleModel({
+            italic: textStyle.italic,
+            bold: textStyle.bold,
+            fontSize: textStyle.fontSize,
+            fontFamily: textStyle.fontFamily
+        })));
+        const fontMetricHeight = metricSize.ascent + metricSize.descent;
+        const maxHeight = this.cursorPosition.sizeMax.ascent + this.cursorPosition.sizeMax.descent;
+        const fontShoulders = fontMetricHeight - metricSize.font;
+        const offset = metricSize.descent - fontShoulders;
+        let top = this.cursorPosition.pageY + this.cursorPosition.sizeMax.ascent - metricSize.font + offset;
+        if (fontMetricHeight !== maxHeight && maxHeight >= this.cursorPosition.lineHeight) {
+            top -= maxHeight - this.cursorPosition.lineHeight;
+        }
+        DomHelper.setStyle(this.cursor.style, 'top', `${top < 0 ? 0 : top}px`);
+        DomHelper.setStyle(this.cursor.style, 'height', `${fontMetricHeight}px`);
+    }
+    restartAnimation() {
+        this.removeAnimationClass();
+        if (!this.isVisible) {
+            return;
+        }
+        this.addAnimationClass();
+    }
+    drawCursor(maxLayerHeight) {
+        const isCursorInView = this.cursorPosition.pageY >= 0 && this.cursorPosition.pageY < maxLayerHeight;
+        if (!isCursorInView) {
+            DomHelper.setStyle(this.cursor.style, 'display', 'none');
+            return;
+        }
+        DomHelper.setStyle(this.cursor.style, 'display', 'block');
+        const currentSize = this.cursorPosition.sizeCurrent;
+        DomHelper.setStyle(this.cursor.style, 'left', `${this.cursorPosition.pageX}px`);
+        DomHelper.setStyle(this.cursor.style, 'width', `${currentSize.width}px`);
+        this.addTextStylesToCursor();
+    }
+    removeAnimationClass() {
+        DomHelper.removeCssClass(this.layer, 'noder-animate-blinking');
+    }
+    addAnimationClass() {
+        this.cursor.style.animationDuration = `${this.blinkInterval}ms`;
+        DomHelper.addCssClass(this.layer, 'noder-animate-blinking');
+    }
+}
+
 class GrammarHighlightLayer extends HighlightLayer {
     constructor(parentEl, cssClass, session) {
         super(parentEl, cssClass, session);
@@ -14880,6 +15368,7 @@ class RenderChangesModel {
             this.selection ||
             this.search ||
             this.grammar ||
+            this.comments ||
             this.scroll ||
             this.size ||
             this.text ||
@@ -14894,6 +15383,7 @@ class RenderChangesModel {
         this.selection = false;
         this.search = false;
         this.grammar = false;
+        this.comments = false;
         this.scroll = false;
         this.size = false;
         this.text = false;
@@ -15119,7 +15609,7 @@ class Renderer extends EventEmitting {
     get ParagraphsAppeared$() {
         return this.ParagraphsAppeared.asObservable();
     }
-    constructor(parentContainer, session) {
+    constructor(parentContainer, commentsService, session) {
         super();
         this.session = session;
         this.layerConfig = {
@@ -15160,6 +15650,7 @@ class Renderer extends EventEmitting {
         this.selectionLayer = new SelectionLayer(this.content, 'text-selection', this.session);
         this.searchHighlightLayer = new SearchHighlightLayer(this.content, 'text-search-highlight', this.session);
         this.grammarHighlightLayer = new GrammarHighlightLayer(this.content, 'grammar-highlight', this.session);
+        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));
@@ -15182,6 +15673,8 @@ class Renderer extends EventEmitting {
             changes.lines ||
             changes.scroll ||
             changes.search ||
+            changes.grammar ||
+            changes.comments ||
             changes.visibilityChanged) {
             changes.apply(this.computeLayerConfig());
             DomHelper.translate(this.content, 0, -this.layerConfig.offset);
@@ -15208,12 +15701,16 @@ class Renderer extends EventEmitting {
         if (changes.grammar) {
             this.renderGrammarHighlights();
         }
+        if (changes.comments) {
+            this.renderComments();
+        }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
         if (changes.visibilityChanged) {
             this.renderSearchHighlights();
             this.renderGrammarHighlights();
+            this.renderComments();
             this.visibilitySubject.next(this.isVisible);
         }
         this.session.onRendered();
@@ -15354,6 +15851,8 @@ class Renderer extends EventEmitting {
         this.textLayer.updateLines(this.layerConfig);
         this.selectionLayer.update(this.layerConfig);
         this.searchHighlightLayer.update(this.layerConfig);
+        this.grammarHighlightLayer.update(this.layerConfig);
+        this.commentsLayer.update(this.layerConfig);
         this.cursorLayer.update(this.layerConfig);
         this.moveTextAreaToCursor();
         this.session.onRendered();
@@ -15376,6 +15875,16 @@ class Renderer extends EventEmitting {
     renderGrammarHighlights() {
         this.grammarHighlightLayer.update(this.layerConfig);
     }
+    renderComments() {
+        this.commentsLayer.update(this.layerConfig);
+    }
+    setSelectedComment(comment) {
+        this.commentsLayer.setSelectedComment(comment);
+        this.commentsLayer.update(this.layerConfig);
+    }
+    setCommentsVisibility(value) {
+        this.commentsLayer.enabled = value;
+    }
     renderDragAndDropSelection() {
         this.dragAndDropSelectionLayer.update(this.layerConfig);
     }
@@ -15467,12 +15976,13 @@ class ScrollBar {
     }
     onScroll() {
         if (!this.skipEvent) {
+            const prevTop = this._scrollTop;
             this._scrollTop = this.element.scrollTop;
             if (this.coeff !== 1) {
                 const height = this.element.clientHeight / this.scrollHeight;
                 this._scrollTop = (this._scrollTop * (1 - height)) / (this.coeff - height);
             }
-            this._scrolled$.next();
+            this._scrolled$.next(this._scrollTop - prevTop);
         }
         this.skipEvent = false;
     }
@@ -15499,6 +16009,127 @@ class ScrollBar {
     }
 }
 
+class RemoveCommentFromDom {
+    constructor(sessionId, id) {
+        this.sessionId = sessionId;
+        this.id = id;
+    }
+}
+
+class RemoveCommentsFromDom {
+    constructor(sessionId) {
+        this.sessionId = sessionId;
+    }
+}
+
+class RenderComments {
+    constructor(sessionId, renderRequests) {
+        this.sessionId = sessionId;
+        this.renderRequests = renderRequests;
+    }
+}
+
+class CommentLayer {
+    constructor(parentEl, commentService) {
+        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();
+    }
+    scrollComments(offsetY) {
+        for (const [sessionId, comments] of this.rendersBySession) {
+            if (sessionId === 1) {
+                continue;
+            }
+            for (const comment of comments) {
+                comment.highlightTop -= offsetY;
+            }
+        }
+    }
+    renderComments() {
+        this.element.innerHTML = '';
+        const topOffset = this.element.getBoundingClientRect().top;
+        const sortedComments = Array.from(this.rendersBySession.values())
+            .reduce((acc, x) => acc.concat(x), [])
+            .toSorted((x, y) => (x.highlightTop !== y.highlightTop ? x.highlightTop - y.highlightTop : x.highlightLeft - y.highlightLeft));
+        const selectedIndex = sortedComments.findIndex(x => x.commentRef.instance.selected);
+        if (selectedIndex >= 0) {
+            const selectedComment = sortedComments[selectedIndex];
+            const selectedCommentRange = this.drawCommentComponent(selectedComment.commentRef, selectedComment.highlightTop - topOffset);
+            let lastCommentBounds = selectedCommentRange;
+            for (let i = selectedIndex - 1; i >= 0; i--) {
+                const comment = sortedComments[i];
+                const height = comment.commentRef.instance.height;
+                let top = comment.highlightTop - topOffset;
+                if (top + height >= lastCommentBounds.from) {
+                    top = lastCommentBounds.from - height;
+                }
+                lastCommentBounds = this.drawCommentComponent(comment.commentRef, top);
+            }
+            lastCommentBounds = selectedCommentRange;
+            for (let i = selectedIndex + 1; i < sortedComments.length; i++) {
+                const comment = sortedComments[i];
+                let top = comment.highlightTop - topOffset;
+                if (top <= lastCommentBounds.to) {
+                    top = lastCommentBounds.to;
+                }
+                lastCommentBounds = this.drawCommentComponent(comment.commentRef, top);
+            }
+            return;
+        }
+        let lastCommentBounds = { from: 0, to: 0 };
+        for (let i = selectedIndex + 1; i < sortedComments.length; i++) {
+            const comment = sortedComments[i];
+            let top = comment.highlightTop - topOffset;
+            if (top <= lastCommentBounds.to) {
+                top = lastCommentBounds.to;
+            }
+            lastCommentBounds = this.drawCommentComponent(comment.commentRef, top);
+        }
+    }
+    applyChanges(changes) {
+        if (changes instanceof RemoveCommentsFromDom) {
+            this.rendersBySession.delete(changes.sessionId);
+            return;
+        }
+        if (changes instanceof RenderComments) {
+            this.rendersBySession.set(changes.sessionId, changes.renderRequests);
+            return;
+        }
+        if (changes instanceof RemoveCommentFromDom) {
+            const requests = this.rendersBySession.get(changes.sessionId);
+            if (!requests) {
+                return;
+            }
+            const index = requests.findIndex(x => x.commentId === changes.id);
+            if (index > -1) {
+                requests.splice(index, 1);
+            }
+            return;
+        }
+    }
+    drawCommentComponent(commentRef, top) {
+        const domElem = commentRef.hostView.rootNodes[0];
+        this.element.appendChild(domElem);
+        const cssPosition = `top:${top}px;left:20px`;
+        domElem.style.cssText = cssPosition;
+        const selected = commentRef.instance.selected ? 'selected' : '';
+        domElem.className = `noder-comment ${selected}`;
+        if (commentRef.instance.editing && commentRef.instance.selected) {
+            commentRef.instance.focusTextArea();
+        }
+        return { from: top - this.commentPadding, to: top + commentRef.instance.height + this.commentPadding };
+    }
+}
+
 class VirtualRenderer {
     get cursorLayer() {
         return this.renderer.cursorLayer;
@@ -15524,7 +16155,7 @@ class VirtualRenderer {
     get ParagraphsAppeared$() {
         return this.renderer.ParagraphsAppeared.asObservable();
     }
-    constructor(parentContainer, mainSession, scrollBar) {
+    constructor(parentContainer, mainSession, commentService, scrollBar) {
         this.scrollBar = scrollBar;
         this.changes = new RenderChangesModel();
         this.size = {
@@ -15537,10 +16168,14 @@ class VirtualRenderer {
         this.paragraphsScrolledIntoViewSubject = new Subject();
         this.container = parentContainer;
         this.createScroller();
-        this.renderer = new Renderer(parentContainer, mainSession);
+        this.renderer = new Renderer(parentContainer, commentService, mainSession);
         this.pagesLayer = new PagesLayer(this.renderer.content, mainSession);
         this.edgesLayer = new EdgesLayer(this.renderer.content, mainSession);
-        this.scrollSubscription = this.scrollBar.scrolled$.subscribe(() => this.loop.schedule({ scroll: true }));
+        this.commentLayer = new CommentLayer(this.renderer.content, commentService);
+        this.scrollSubscription = this.scrollBar.scrolled$.subscribe(x => {
+            this.loop.schedule({ scroll: true });
+            this.commentLayer.scrollComments(x);
+        });
         this.createRenderLoop();
         this.paragraphsScrolledIntoViewSubscription = this.paragraphsScrolledIntoViewSubject
             .pipe(debounceTime(3000))
@@ -15587,6 +16222,7 @@ class VirtualRenderer {
         }
         if (changes.cursor) {
             this.renderCursor();
+            this.renderComments();
         }
         if (changes.marker || changes.selection) {
             this.renderSelection();
@@ -15597,6 +16233,9 @@ class VirtualRenderer {
         if (changes.grammar) {
             this.renderGrammarHighlights();
         }
+        if (changes.comments) {
+            this.renderComments();
+        }
         if (changes.dragAndDrop) {
             this.renderDragAndDropSelection();
         }
@@ -15646,6 +16285,12 @@ class VirtualRenderer {
         this.size.dirty = !width || !height;
         return changes;
     }
+    setSelectedComment(commentId) {
+        this.renderer.setSelectedComment(commentId);
+    }
+    setCommentsVisibility(value) {
+        this.renderer.setCommentsVisibility(value);
+    }
     moveTextAreaToCursor() {
         if (!this.textarea) {
             return;
@@ -15741,6 +16386,7 @@ class VirtualRenderer {
         }
         const scrollTop = this.scrollBar.scrollTop + deltaY;
         this.scrollBar.setScrollTop(scrollTop);
+        this.commentLayer.scrollComments(deltaY);
         this.loop.schedule({ scroll: true });
     }
     screenToTextCoordinatesUsingMidpoint(x, y, rect) {
@@ -15762,6 +16408,7 @@ class VirtualRenderer {
         DomHelper.removeElement(this.scrollBar.element);
         this.pagesLayer.destroy();
         this.renderer.destroy();
+        this.commentLayer.destroy();
         this.scrollSubscription?.unsubscribe();
         this.paragraphsScrolledIntoViewSubscription?.unsubscribe();
     }
@@ -15815,8 +16462,10 @@ class VirtualRenderer {
             this.renderer.textLayer.scrollLines(this.layerConfig);
         }
         this.renderer.selectionLayer.update(this.layerConfig);
+        this.renderer.dragAndDropSelectionLayer.update(this.layerConfig);
         this.renderer.searchHighlightLayer.update(this.layerConfig);
         this.renderer.grammarHighlightLayer.update(this.layerConfig);
+        this.renderer.commentsLayer.update(this.layerConfig);
         if (!this.renderer.cursorLayer.isVisible) {
             return;
         }
@@ -15827,6 +16476,7 @@ class VirtualRenderer {
         this.pagesLayer.update(this.layerConfig);
         this.edgesLayer.update(this.layerConfig);
         this.paragraphsScrolledIntoViewSubject.next();
+        this.commentLayer.renderComments();
         this.renderer.renderFull();
     }
     renderText() {
@@ -15848,6 +16498,9 @@ class VirtualRenderer {
     renderDragAndDropSelection() {
         this.renderer.renderDragAndDropSelection();
     }
+    renderComments() {
+        this.renderer.renderComments();
+    }
     paragraphsScrolledIntoView() {
         const paragraphs = this.renderer.session.displayData.paragraphs.slice(this.layerConfig.visibleRange.startParagraph, this.layerConfig.visibleRange.endParagraph);
         this.renderer.ParagraphsAppeared.next(paragraphs);
@@ -15938,7 +16591,7 @@ class CustomContentService {
             indentRight: lineInfo.indent.right,
             indentBefore: lineInfo.offsetBefore,
             indentAfter: lineInfo.offsetAfter,
-            markerWidth: lineInfo.markerWidth,
+            markerWidth: isFirst && lineInfo.isNumbering ? lineInfo.markerWidth : 0,
             isNumbering: lineInfo.isNumbering,
             isPageBreak: false,
             isLineBreak: false,
@@ -15966,12 +16619,86 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: ComponentService }, { type: i0.Injector }] });
 
+class RenderComment {
+    constructor(comment, sessionId, top, left) {
+        this.commentRef = comment;
+        this.commentId = comment.instance.id;
+        this.sessionId = sessionId;
+        this.highlightTop = top;
+        this.highlightLeft = left;
+    }
+}
+
+class CommentRenderService {
+    get commentRenderRequests$() {
+        return this.commentRenderRequests.asObservable();
+    }
+    constructor(componentType) {
+        this.componentType = componentType;
+        this.componentInstances = [];
+        this.applicationRef = inject(ApplicationRef);
+        this.injector = inject(Injector);
+        this.commentRenderRequests = new Subject();
+    }
+    requestCommentsRender(sessionId, renderRequests) {
+        const requests = [];
+        for (const request of renderRequests) {
+            let componentRef;
+            const existingComponentRef = this.componentInstances.find(x => x.instance.id === request.commentId);
+            if (existingComponentRef) {
+                componentRef = existingComponentRef;
+            }
+            else {
+                componentRef = this.createComponentRef(request.commentId);
+                componentRef.instance.initialize();
+                this.componentInstances.push(componentRef);
+            }
+            requests.push(new RenderComment(componentRef, sessionId, request.top, request.left));
+        }
+        this.commentRenderRequests.next(new RenderComments(sessionId, requests));
+    }
+    createNewComment(id) {
+        const componentRef = this.createComponentRef(id);
+        componentRef.instance.markAsNew();
+        componentRef.instance.initialize();
+        this.componentInstances.push(componentRef);
+    }
+    removeCommentFromRender(sessionId, id) {
+        if (!this.componentInstances.some(x => x.instance.id === id)) {
+            return;
+        }
+        this.commentRenderRequests.next(new RemoveCommentFromDom(sessionId, id));
+    }
+    removeCommentsFromRender(sessionId) {
+        this.commentRenderRequests.next(new RemoveCommentsFromDom(sessionId));
+    }
+    setCommentSelected(id, selected = true) {
+        const componentRef = this.componentInstances.find(x => x.instance.id === id);
+        componentRef?.instance.setSelected(selected);
+    }
+    createComponentRef(id) {
+        const ref = createComponent(this.componentType, {
+            environmentInjector: this.applicationRef.injector,
+            elementInjector: this.injector
+        });
+        this.applicationRef.attachView(ref.hostView);
+        ref.instance.id = id;
+        return ref;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentRenderService, deps: [{ token: i0.Type }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentRenderService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: CommentRenderService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Type }] });
+
 class RegulatorService {
-    constructor(customContentService, editorService, componentService, grammarService) {
+    constructor(customContentService, editorService, componentService, grammarService, commentRenderService) {
         this.customContentService = customContentService;
         this.editorService = editorService;
         this.componentService = componentService;
         this.grammarService = grammarService;
+        this.commentRenderService = commentRenderService;
         this.sessions = [];
         this.sessionIdIncrement = 0;
         this.grammarChecker = new GrammarChecker(this.grammarService);
@@ -16000,8 +16727,8 @@ class RegulatorService {
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: edges };
         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, model, this.selection, properties, this.editorService, customComponents, 'main', scrollBar);
-        const virtualRenderer = new VirtualRenderer(container.nativeElement, mainSession, scrollBar);
+        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.sessions.push(this.mainSession);
@@ -16014,10 +16741,10 @@ class RegulatorService {
         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 sessionType = this.isWithinEdge(component.parentSessionId) ? 'cellWithinEdge' : 'cell';
-        const session = new EditSession(displayData, sessionId, this.customContentService, component.cell, this.selection, properties, this.editorService, customComponents, sessionType);
+        const session = new EditSession(displayData, sessionId, this.customContentService, this.commentRenderService, component.cell, this.selection, properties, 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, session);
+        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);
         this.sessions.push(newSession);
@@ -16030,8 +16757,8 @@ class RegulatorService {
         const sessionId = ++this.sessionIdIncrement;
         const customComponents = { images: [], tables: [], tabs: [], customElements: [], edges: null };
         const displayData = new DisplayData(component.model, component.generalProperties, sessionId, this.getPageFormats(component.margins, component.width), 0, customComponents, this.customContentService, this.editorService);
-        const session = new EditSession(displayData, sessionId, this.customContentService, component.model, this.selection, component.generalProperties, this.editorService, customComponents, 'edge', null, component.type);
-        const renderer = new Renderer(component.container.nativeElement, session);
+        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);
         this.sessions.push(newSession);
@@ -16076,7 +16803,8 @@ class RegulatorService {
         this.selection.clearSelection();
         if (this.currentSession.session.isEdge()) {
             this.sessions.forEach(x => {
-                if (x.session.edgeType === this.currentSession.session.edgeType) {
+                if (x.session.edgeType === this.currentSession.session.edgeType &&
+                    x.session.pageType === this.currentSession.session.pageType) {
                     x.renderer.hideCursor();
                 }
             });
@@ -16088,7 +16816,7 @@ class RegulatorService {
         this.currentSession = session;
         if (session.session.isEdge()) {
             this.sessions.forEach(x => {
-                if (x.session.edgeType === session.session.edgeType) {
+                if (x.session.edgeType === session.session.edgeType && x.session.pageType === this.currentSession.session.pageType) {
                     x.renderer.showCursor();
                     this.arrangeEdgesForSessionChange(previous.session, x.session);
                 }
@@ -16105,7 +16833,8 @@ class RegulatorService {
             return;
         }
         this.sessions.forEach(x => {
-            if (x.session.edgeType === this.currentSession.session.edgeType) {
+            if (x.session.edgeType === this.currentSession.session.edgeType &&
+                x.session.pageType === this.currentSession.session.pageType) {
                 x.renderer.updateSelection(this.selection.selectedRange);
                 if (this.selection.isEmpty) {
                     x.renderer.updateCursor();
@@ -16164,6 +16893,20 @@ class RegulatorService {
         }
         return result;
     }
+    getCommentTarget(commentId) {
+        for (const session of this.sessions) {
+            if (session.session.model.comments.some(x => x.commentId === commentId)) {
+                return { session, target: session.source.getTarget() };
+            }
+        }
+        return null;
+    }
+    setCommentsVisibility(value) {
+        for (const sessionModel of this.sessions) {
+            sessionModel.renderer.setCommentsVisibility(value);
+            sessionModel.renderer.loop.schedule({ comments: true });
+        }
+    }
     isWithinEdge(sessionId) {
         return !!this.getEdgeSessionId(sessionId);
     }
@@ -16177,7 +16920,9 @@ class RegulatorService {
             return;
         }
         this.sessions.forEach(x => {
-            if (x.session.isEdge() && x.session.edgeType === this.currentSession.session.edgeType) {
+            if (x.session.isEdge() &&
+                x.session.edgeType === this.currentSession.session.edgeType &&
+                x.session.pageType === this.currentSession.session.pageType) {
                 x.session.updateDisplayData();
                 x.renderer.updateTextAndCursor();
             }
@@ -16218,12 +16963,12 @@ class RegulatorService {
             })
         ];
     }
-    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 }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: RegulatorService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: CustomContentService }, { type: EditorService }, { type: ComponentService }, { type: GrammarService }] });
+        }], ctorParameters: () => [{ type: CustomContentService }, { type: EditorService }, { type: ComponentService }, { type: GrammarService }, { type: CommentRenderService }] });
 
 class CommandsService {
     constructor() {
@@ -16432,9 +17177,9 @@ class EditorRulerComponent {
         this.editorService.paragraphStyle$.pipe(takeUntilDestroyed()).subscribe(({ paragraphStyle, numberingModel }) => {
             const numberingIndentLeft = numberingModel?.levels[paragraphStyle.numberingLevel].indentLeft ?? 0;
             const numberingIndentHanging = numberingModel?.levels[paragraphStyle.numberingLevel].indentHanging ?? 0;
-            const indentLeft = paragraphStyle.indentLeft === 0 ? numberingIndentLeft : paragraphStyle.indentLeft;
-            const firstLine = paragraphStyle.indentHanging ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
-            this.firstLine.set(firstLine === 0 ? -numberingIndentHanging : firstLine);
+            const indentLeft = paragraphStyle.indentLeft === null ? numberingIndentLeft : paragraphStyle.indentLeft;
+            const firstLine = paragraphStyle.indentHanging !== null ? -paragraphStyle.indentHanging : paragraphStyle.indentFirstLine;
+            this.firstLine.set(firstLine === null ? -numberingIndentHanging : firstLine);
             this.leftIndent.set(indentLeft);
             this.rightIndent.set(paragraphStyle.indentRight);
         });
@@ -16625,11 +17370,11 @@ class EditorRulerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorRulerComponent, isStandalone: true, selector: "app-nod-editor-ruler", inputs: { unit: { classPropertyName: "unit", publicName: "unit", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "rulerContainer", first: true, predicate: ["rulerContainer"], descendants: true, static: true }], ngImport: i0, template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:3;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"], dependencies: [{ kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorRulerComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:10;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-editor-ruler', imports: [MatIconModule, AsyncPipe], template: "<div\n    class=\"ruler-container\"\n    [class.disabled]=\"disabled()\"\n    [style.width.px]=\"pageWidth$ | async\"\n    #rulerContainer>\n    <div\n        class=\"left-area\"\n        [style.width.px]=\"leftMarginPageFormatPx()\"></div>\n    <div\n        class=\"right-area\"\n        [style.width.px]=\"containerWidthPx - rightMarginPageFormatPx()\"></div>\n    <div\n        class=\"separator left-page-format\"\n        [style.left.px]=\"leftMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'leftMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'leftMarginPageFormat')\"></div>\n    <div\n        class=\"separator right-page-format\"\n        [style.left.px]=\"rightMarginPageFormatPx()\"\n        (mousedown)=\"startDrag($event, 'rightMarginPageFormat')\"\n        (touchstart)=\"startDrag($event, 'rightMarginPageFormat')\"></div>\n\n    <div\n        class=\"ruler-track\"\n        (mousedown)=\"addTab($event)\"\n        (touchstart)=\"addTab($event)\"\n        (dblclick)=\"onOpenDialog()\">\n        @for (tick of ticks; track tick) {\n            <div\n                class=\"tick\"\n                [style.left.px]=\"tick.position\"\n                [class.major]=\"tick.major\"\n                [class.half]=\"tick.half\">\n                @if (tick.label !== null) {\n                    <span class=\"label\">\n                        {{ tick.label }}\n                    </span>\n                }\n            </div>\n        }\n    </div>\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"leftIndentPx()\"\n        (mousedown)=\"startDrag($event, 'leftIndent')\"\n        (touchstart)=\"startDrag($event, 'leftIndent')\" />\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-down\"\n        class=\"paragraph-marker\"\n        [style.left.px]=\"firstLinePx()\"\n        (mousedown)=\"startDrag($event, 'first')\"\n        (touchstart)=\"startDrag($event, 'first')\" />\n    @for (tabSetting of tabSettings(); track tabSetting; let index = $index) {\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-field-up\"\n            class=\"page-marker\"\n            [style.left.px]=\"tabSetting.position + this.leftMarginPageFormatPx()\"\n            (mousedown)=\"startDrag($event, 'tabs', index)\"\n            (touchstart)=\"startDrag($event, 'tabs', index)\"\n            (dblclick)=\"onOpenDialog()\" />\n    }\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-field-up\"\n        class=\"page-marker\"\n        [style.left.px]=\"rightIndentPx()\"\n        (mousedown)=\"startDrag($event, 'rightIndent')\"\n        (touchstart)=\"startDrag($event, 'rightIndent')\" />\n    @if (showGuide()) {\n        <div\n            class=\"drag-guide\"\n            [style.left.px]=\"guideX()\"></div>\n    }\n</div>\n", styles: [":host{display:flex;position:relative;z-index:3;width:100%;height:22px;justify-content:center;align-items:center}.disabled{pointer-events:none}.ruler-container{position:relative;height:18px;border-bottom-width:1px;border-bottom-style:solid;border-top-width:1px;border-top-style:solid;-webkit-user-select:none;user-select:none}.ruler-track{position:absolute;left:0;right:0;bottom:0;height:18px;overflow:hidden}.tick{position:absolute;top:50%;transform:translateY(-50%);width:1px;height:4px}.major{height:0}.half{height:8px}.label{position:absolute;top:50%;transform:translate(-50%,-50%);font-size:10px}mat-icon{position:absolute;width:17px;height:17px;font-size:18px;font-weight:700;cursor:grab;z-index:2;transform:translate(-50%)}.drag-guide{position:absolute;height:2000px;top:10px;width:1px;z-index:9999;pointer-events:none;will-change:left}.paragraph-marker{top:-6px;z-index:2}.page-marker{bottom:-6px;z-index:2}.left-area,.right-area,.separator{position:absolute;height:18px}.separator{width:5px;transform:translate(-50%);background-color:transparent;cursor:ew-resize;z-index:2}.left-area{left:0}.right-area{right:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { rulerContainer: [{
                 type: ViewChild,
                 args: ['rulerContainer', { static: true }]
@@ -16728,11 +17473,11 @@ class EditorComponent {
         this.sidenavComponentRef = null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: ComponentService }, { token: EditorService }, { token: OverlayService }, { token: i0.Injector }, { token: RegulatorService }, { token: CommandsService }, { token: i6$1.Clipboard }, { token: InsertOverlays }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: EditorComponent, isStandalone: false, selector: "app-nod-editor", inputs: { isMobile: { classPropertyName: "isMobile", publicName: "isMobile", isSignal: false, isRequired: false, transformFunction: null }, externalElementTagNames: { classPropertyName: "externalElementTagNames", publicName: "externalElementTagNames", isSignal: false, isRequired: false, transformFunction: null }, customPageWidth: { classPropertyName: "customPageWidth", publicName: "customPageWidth", isSignal: false, isRequired: false, transformFunction: null }, content: { classPropertyName: "content", publicName: "content", isSignal: false, isRequired: false, transformFunction: null }, rulerUnit: { classPropertyName: "rulerUnit", publicName: "rulerUnit", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, static: true }, { propertyName: "sidenavContainer", first: true, predicate: ["drawerContainer"], descendants: true, static: true }, { propertyName: "sidenav", first: true, predicate: ["drawer"], descendants: true, static: true }, { propertyName: "searchBar", first: true, predicate: EditorSearchBarComponent, descendants: true }], ngImport: i0, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:3}\n"], dependencies: [{ kind: "component", type: EditorRulerComponent, selector: "app-nod-editor-ruler", inputs: ["unit", "disabled"] }, { kind: "component", type: EditorSearchBarComponent, selector: "app-nod-editor-search-bar" }, { kind: "component", type: i10.MatDrawer, selector: "mat-drawer", inputs: ["position", "mode", "disableClose", "autoFocus", "opened"], outputs: ["openedChange", "opened", "openedStart", "closed", "closedStart", "positionChanged"], exportAs: ["matDrawer"] }, { kind: "component", type: i10.MatDrawerContainer, selector: "mat-drawer-container", inputs: ["autosize", "hasBackdrop"], outputs: ["backdropClick"], exportAs: ["matDrawerContainer"] }, { kind: "component", type: i10.MatDrawerContent, selector: "mat-drawer-content" }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:100%}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:2}\n"] }]
+            args: [{ selector: 'app-nod-editor', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<mat-drawer-container\n    class=\"sidenav-container\"\n    [hasBackdrop]=\"sidenavProperties.hasBackdrop\">\n    <mat-drawer-content>\n        <div class=\"editor\">\n            <app-nod-editor-ruler\n                [unit]=\"rulerUnit()\"\n                [disabled]=\"isViewOnly$ | async\" />\n            @if (showSearchBar) {\n                <app-nod-editor-search-bar />\n            }\n            <div class=\"container\">\n                <div\n                    #container\n                    class=\"edit-container\"></div>\n            </div>\n        </div>\n    </mat-drawer-content>\n    <mat-drawer\n        #drawer\n        [class.drawer-mobile]=\"isMobile\"\n        [autoFocus]=\"sidenavProperties.autoFocus\"\n        [position]=\"sidenavProperties.position\"\n        [mode]=\"sidenavProperties.mode\">\n        <div\n            #drawerContainer\n            class=\"drawer-container\"></div>\n    </mat-drawer>\n</mat-drawer-container>\n", styles: [":host{flex:1;display:flex;position:relative;overflow:hidden}.sidenav-container{width:100%}.mat-drawer-content{overflow:auto hidden;position:initial}.container{display:inline-block;height:calc(100% - 22px)}.editor{display:inline-block;height:100%;min-width:100%;text-align:center}.drawer-container{height:100%}.drawer-mobile{width:100%}app-nod-editor-search-bar{position:absolute;right:15px;top:0;z-index:3}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: ComponentService }, { type: EditorService }, { type: OverlayService }, { type: i0.Injector }, { type: RegulatorService }, { type: CommandsService }, { type: i6$1.Clipboard }, { type: InsertOverlays }], propDecorators: { isMobile: [{
                 type: Input
             }], externalElementTagNames: [{
@@ -16781,12 +17526,17 @@ class EditorModule {
                 { provide: EXTERNAL_ELEMENT_SIDENAV, useValue: new ExternalSidenavModel(options?.sidenav) },
                 { provide: EXTERNAL_ELEMENT_SERVICE, useClass: options?.elementService ?? ExternalElementService },
                 { provide: InsertOverlays, useValue: new InsertOverlays(options?.insertOverlays) },
-                { provide: ImageApiService, useClass: options?.imageApiService ?? DefaultImageApiService }
+                { provide: ImageApiService, useClass: options?.imageApiService ?? DefaultImageApiService },
+                {
+                    provide: CommentRenderService,
+                    useFactory: () => new CommentRenderService(options?.commentComponent)
+                }
             ]
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: EditorModule, declarations: [EditorComponent,
+            CommentPopupComponent,
             NoderEdgeComponent,
             NoderImageComponent,
             NoderTabComponent,
@@ -16796,9 +17546,11 @@ class EditorModule {
             TableOverlayMenuComponent], imports: [CommonModule,
             EditorRulerComponent,
             EditorSearchBarComponent,
+            TextFieldModule,
             MatButtonModule,
             MatDialogModule,
             MatIconModule,
+            MatMenuModule,
             MatSidenavModule,
             MatTooltipModule,
             ReactiveFormsModule,
@@ -16806,9 +17558,11 @@ class EditorModule {
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EditorModule, providers: [ComponentService, CustomContentService, OverlayService, RegulatorService, ExternalElementService, CommandsService], imports: [CommonModule,
             EditorRulerComponent,
             EditorSearchBarComponent,
+            TextFieldModule,
             MatButtonModule,
             MatDialogModule,
             MatIconModule,
+            MatMenuModule,
             MatSidenavModule,
             MatTooltipModule,
             ReactiveFormsModule,
@@ -16819,6 +17573,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
             args: [{
                     declarations: [
                         EditorComponent,
+                        CommentPopupComponent,
                         NoderEdgeComponent,
                         NoderImageComponent,
                         NoderTabComponent,
@@ -16831,9 +17586,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                         CommonModule,
                         EditorRulerComponent,
                         EditorSearchBarComponent,
+                        TextFieldModule,
                         MatButtonModule,
                         MatDialogModule,
                         MatIconModule,
+                        MatMenuModule,
                         MatSidenavModule,
                         MatTooltipModule,
                         ReactiveFormsModule,
@@ -17298,6 +18055,7 @@ class BaseToolbarComponent extends DestroyComponent {
         this.updateTableBorderStyle = new EventEmitter();
         this.updateTableBorderWidth = new EventEmitter();
         this.updateTableBorders = new EventEmitter();
+        this.commentsVisibile = false;
         this.elements = this.injector.get(EXTERNAL_ELEMENT_SERVICE).elements;
         this.customIconService.register();
         this.historyInfoSubscription();
@@ -17315,6 +18073,10 @@ class BaseToolbarComponent extends DestroyComponent {
         const italic = !this.styles.italic;
         this.checkFontLoadedAndApplyStyle(new TextStyleModel({ italic }));
     }
+    onSwitchCommentsVisibility() {
+        this.commentsVisibile = !this.commentsVisibile;
+        this.editorService.setCommentsVisibility(this.commentsVisibile);
+    }
     async onCreateElement(model) {
         const data = await model.factoryMethod();
         const element = new ElementDataModel(data.id, data.guid, data.type);
@@ -17960,11 +18722,11 @@ class ToolbarActionsComponent extends BaseToolbarComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: CustomIconService }, { token: i0.Injector }, { token: EditorService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold()\"\n    (toggleItalic)=\"onApplyItalic()\"\n    (toggleUnderline)=\"onApplyUnderline()\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<app-nod-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n<div class=\"separator\"></div>\n<div class=\"insert-buttons\">\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-image\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-image\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-table\"\n        [class.active-button]=\"showInsertTableMenu\"\n        [disabled]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-table\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-link\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\n<div\n    *ngIf=\"elements.length\"\n    class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableBordersComponent, selector: "app-nod-table-borders", inputs: ["isDisabled"], outputs: ["updateTableBorders"] }, { kind: "component", type: TableBorderStyleComponent, selector: "app-nod-table-border-style", inputs: ["isDisabled"], outputs: ["updateTableBorderStyle"] }, { kind: "component", type: TableBorderWidthComponent, selector: "app-nod-table-border-width", inputs: ["isDisabled"], outputs: ["updateTableBorderWidth"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: ToolbarActionsComponent, isStandalone: false, selector: "app-nod-toolbar-actions", viewQueries: [{ propertyName: "tableInsertMenu", first: true, predicate: ["tableInsert"], descendants: true }], usesInheritance: true, ngImport: i0, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold()\"\n    (toggleItalic)=\"onApplyItalic()\"\n    (toggleUnderline)=\"onApplyUnderline()\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<app-nod-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n<div class=\"separator\"></div>\n<div class=\"insert-buttons\">\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-image\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-image\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-table\"\n        [class.active-button]=\"showInsertTableMenu\"\n        [disabled]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-table\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-link\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\n<div\n    *ngIf=\"elements.length\"\n    class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n<div class=\"separator\"></div>\n<mat-button-toggle\n    (click)=\"onSwitchCommentsVisibility()\"\n    [matTooltip]=\"'NODER.TOOLTIP.COMMENTS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-comment\" />\n</mat-button-toggle>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FontComponent, selector: "app-nod-font", inputs: ["isDisabled", "styles"], outputs: ["selectFont"] }, { kind: "component", type: FontSizeComponent, selector: "app-nod-font-size", inputs: ["isDisabled", "fontSize"], outputs: ["selectFontSize"] }, { kind: "component", type: InsertTableComponent, selector: "app-nod-insert-table", outputs: ["selectSizes"] }, { kind: "component", type: i4.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i3$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i4$1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: i5$2.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: TableBordersComponent, selector: "app-nod-table-borders", inputs: ["isDisabled"], outputs: ["updateTableBorders"] }, { kind: "component", type: TableBorderStyleComponent, selector: "app-nod-table-border-style", inputs: ["isDisabled"], outputs: ["updateTableBorderStyle"] }, { kind: "component", type: TableBorderWidthComponent, selector: "app-nod-table-border-width", inputs: ["isDisabled"], outputs: ["updateTableBorderWidth"] }, { kind: "component", type: FontStyleComponent, selector: "app-nod-font-style", inputs: ["isDisabled", "bold", "italic", "underline", "fontColor", "highlightColor"], outputs: ["toggleBold", "toggleItalic", "toggleUnderline", "selectFontColor", "selectHighlightColor"] }, { kind: "component", type: FormatComponent, selector: "app-nod-format", inputs: ["isDisabled", "alignment"], outputs: ["selectAlignment"] }, { kind: "component", type: NumberingComponent, selector: "app-nod-numbering", inputs: ["isDisabled", "selectedNumberingType", "selectedNumberingTemplate"], outputs: ["selectNumberingTemplate", "removeNumberings"] }, { kind: "component", type: PrintComponent, selector: "app-nod-print", outputs: ["print"] }, { kind: "component", type: UndoRedoComponent, selector: "app-nod-undo-redo", inputs: ["canUndo", "canRedo"], outputs: ["undo", "redo"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: ToolbarActionsComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold()\"\n    (toggleItalic)=\"onApplyItalic()\"\n    (toggleUnderline)=\"onApplyUnderline()\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<app-nod-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n<div class=\"separator\"></div>\n<div class=\"insert-buttons\">\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-image\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-image\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-table\"\n        [class.active-button]=\"showInsertTableMenu\"\n        [disabled]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-table\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-link\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\n<div\n    *ngIf=\"elements.length\"\n    class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'app-nod-toolbar-actions', standalone: false, template: "@let isViewOnly = editorService.isViewOnly$ | async;\n@let isTableSelected = editorService.isTableSelected$ | async;\n<app-nod-undo-redo\n    [canUndo]=\"canUndo\"\n    [canRedo]=\"canRedo\"\n    (undo)=\"undo.emit()\"\n    (redo)=\"redo.emit()\" />\n<app-nod-print\n    class=\"hidden\"\n    (print)=\"print.emit()\" />\n<div class=\"separator\"></div>\n<app-nod-font\n    [isDisabled]=\"isViewOnly\"\n    [styles]=\"styles\"\n    (selectFont)=\"onApplyFontFamily($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-size\n    [isDisabled]=\"isViewOnly\"\n    [fontSize]=\"styles.fontSize\"\n    (selectFontSize)=\"onApplyFontSize($event)\" />\n<div class=\"separator\"></div>\n<app-nod-font-style\n    [isDisabled]=\"isViewOnly\"\n    [bold]=\"styles.bold\"\n    [italic]=\"styles.italic\"\n    [underline]=\"styles.underline\"\n    [fontColor]=\"styles.fontColor\"\n    [highlightColor]=\"styles.highlightColor\"\n    (selectFontColor)=\"onApplyFontColor($event)\"\n    (toggleBold)=\"onApplyBold()\"\n    (toggleItalic)=\"onApplyItalic()\"\n    (toggleUnderline)=\"onApplyUnderline()\"\n    (selectHighlightColor)=\"onApplyHighlightColor($event)\" />\n<div class=\"separator\"></div>\n<app-nod-format\n    [isDisabled]=\"isViewOnly\"\n    [alignment]=\"styles.alignment\"\n    (selectAlignment)=\"onApplyAlignment($event)\" />\n<div class=\"separator\"></div>\n<app-nod-numbering\n    [isDisabled]=\"isViewOnly\"\n    [selectedNumberingType]=\"numberingType\"\n    [selectedNumberingTemplate]=\"numberingTemplateType\"\n    (selectNumberingTemplate)=\"onSetNumberingTemplateType($event)\"\n    (removeNumberings)=\"removeNumberings.emit()\" />\n<div class=\"separator\"></div>\n<div class=\"insert-buttons\">\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-image\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertImage.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_IMAGE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-image\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-table\"\n        [class.active-button]=\"showInsertTableMenu\"\n        [disabled]=\"isViewOnly\"\n        [matMenuTriggerFor]=\"tableInsert\"\n        (menuOpened)=\"showInsertTableMenu = true\"\n        (menuClosed)=\"onTableInsertMenuClosed()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_TABLE' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-table\" />\n    </button>\n    <button\n        mat-button\n        id=\"toolbar-actions-menu-item-insert-link\"\n        [disabled]=\"isViewOnly\"\n        (click)=\"insertLink.emit()\"\n        [matTooltip]=\"'NODER.TOOLTIP.INSERT_LINK' | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"icon-link-on\" />\n    </button>\n</div>\n@if (isTableSelected) {\n    <div class=\"separator\"></div>\n    <app-nod-table-borders\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorders)=\"updateTableBorders.emit($event)\" />\n    <app-nod-table-border-width\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderWidth)=\"updateTableBorderWidth.emit($event)\" />\n    <app-nod-table-border-style\n        [isDisabled]=\"isViewOnly\"\n        (updateTableBorderStyle)=\"updateTableBorderStyle.emit($event)\" />\n}\n<div\n    *ngIf=\"elements.length\"\n    class=\"separator\"></div>\n<div\n    *ngIf=\"elements.length\"\n    class=\"custom-elements\">\n    <button\n        *ngFor=\"let element of elements\"\n        mat-button\n        [disabled]=\"isViewOnly\"\n        (click)=\"onCreateElement(element)\"\n        [matTooltip]=\"element.tooltip | translate\"\n        matTooltipPosition=\"below\">\n        <mat-icon\n            fontSet=\"noder-icon\"\n            fontIcon=\"{{ element.icon }}\"></mat-icon>\n    </button>\n</div>\n<div class=\"separator\"></div>\n<mat-button-toggle\n    (click)=\"onSwitchCommentsVisibility()\"\n    [matTooltip]=\"'NODER.TOOLTIP.COMMENTS' | translate\"\n    matTooltipPosition=\"below\">\n    <mat-icon\n        fontSet=\"noder-icon\"\n        fontIcon=\"icon-comment\" />\n</mat-button-toggle>\n<mat-menu\n    #tableInsert=\"matMenu\"\n    class=\"insert-table noder-modal\">\n    <app-nod-insert-table\n        *ngIf=\"showInsertTableMenu\"\n        (selectSizes)=\"insertTable.emit($event)\" />\n</mat-menu>\n", styles: [":host::ng-deep mat-button-toggle,:host::ng-deep .mat-button-toggle-button{height:32px;width:32px;display:flex;align-items:center;justify-content:center;border-radius:4px}:host::ng-deep mat-button-toggle mat-icon,:host::ng-deep .mat-button-toggle-button mat-icon{font-size:24px;height:24px;width:24px;border-radius:4px}:host::ng-deep mat-button-toggle .mat-button-toggle-label-content,:host::ng-deep .mat-button-toggle-button .mat-button-toggle-label-content{padding:0 2px}.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle{border-left:0}.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:0}.separator{border-left:2px solid;height:24px;margin:0 8px}.mdc-button{width:28px;height:28px;padding:0}.mat-mdc-button>.mat-icon{margin-right:0}.do-action{padding-right:1px;justify-content:center;display:flex}.custom-elements,.insert-buttons{display:flex;align-items:center;height:100%}.custom-elements .mdc-button,.insert-buttons .mdc-button{min-width:32px;min-height:32px;width:32px;height:32px;padding:0}.custom-elements .mdc-button>.mat-icon,.insert-buttons .mdc-button>.mat-icon{margin-right:0;font-size:24px;height:24px;width:24px}.hidden{display:none}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: CustomIconService }, { type: i0.Injector }, { type: EditorService }], propDecorators: { tableInsertMenu: [{
                 type: ViewChild,
                 args: ['tableInsert']
@@ -18999,6 +19761,7 @@ class RevisionHelper {
             tabs: [],
             headers: [],
             footers: [],
+            comments: [],
             defaultTabWidth: DEFAULT_TAB_WIDTH
         });
     }
@@ -19190,5 +19953,5 @@ class OperationModel {
  * Generated bundle index. Do not edit.
  */
 
-export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
+export { AddLinkDialogComponent, AddLinkMobileComponent, Alignment, BaseCommentComponent, BaseNoderComponent, Borders, BreakTypes, CommandModel, CommandType, CommandsService, ConfirmDialogComponent, DEFAULT_BACKGROUND_COLOR, DEFAULT_EDGE_MAX_HEIGHT_MULTIPLIER, DEFAULT_FONT_COLOR, DEFAULT_FONT_FAMILY, DEFAULT_FONT_SIZE, DEFAULT_HEADINGS, DEFAULT_HEADING_STYLE_ID, DEFAULT_OFFSET_AFTER_NUMBERING_MARKER, DEFAULT_PARAGRAPH_STYLE, DEFAULT_TAB_WIDTH, DEFAULT_TEXT_STYLE, DEFAULT_TOOLBAR_STYLES, DefaultImageApiService, DestroyComponent, DocumentInfo, DocumentModel, DocumentNameModel, DocxModel, DomHelper, EditorComponent, EditorMobileToolbarComponent, EditorModule, EditorService, EditorTitleComponent, EditorTitleMobileComponent, EditorToolbarComponent, EditorToolbarMode, EditorToolbarModule, EditorToolbarService, ElementDataModel, ElementModel, ExternalComponent, ExternalElementModel, ExternalElementService, FileSourceModel, FontMetrics, FormatStyleHelper, GrammarService, HYPERLINK_FONT_COLOR, HYPERLINK_HEADING_STYLE_ID, ImageApiService, ImageDataModel, LastDocumentRevisionModel, LineStyles, MenuDropdownsComponent, MenuDropdownsMobileComponent, Mode, NEW_LINE_MARKUP, NoderTranslateLoader, NumberingLevelModel, OperationModel, OperationsHistoryInfoModel, PageSetupComponent, PageType, ParagraphStyleModel, RevisionHelper, RevisionModel, SearchResultLocation, TextFormatMobileComponent, TextStyleModel, ToolbarActionsComponent };
 //# sourceMappingURL=talrace-ngx-noder.mjs.map