@talrace/ngx-noder 19.0.33 → 19.0.34

package/lib/editor/operations/helpers/range-element-operations.helper.d.ts

@@ -0,0 +1,9 @@
+import { IRange } from '../../positioning/range.interface';
+export declare class RangeElementHelper {
+    static removeContent<T extends IRange>(elements: T[], startIndex: number, endIndex: number): void;
+    static insertContent<T extends IRange>(elements: T[], index: number, length: number): void;
+    static restore<T extends IRange>(elements: T[], index: number, contentLength: number, newElements: T[]): void;
+    static replaceContent<T extends IRange>(elements: T[], startIndex: number, endIndex: number, length: number): void;
+    static shiftIndexes<T extends IRange>(elements: T[], offset: number): void;
+    static sliceSection<T extends IRange>(elements: T[], startIndex: number, endIndex: number): T[];
+}

package/lib/editor/operations/operations-helper.helper.d.ts

@@ -2,6 +2,7 @@ import { ApplyImageStyleModel } from '../../models/generated/apply-image-style.m
 import { ApplyTableCellsStylesModel } from '../../models/generated/apply-table-cells-styles.model';
 import { BreakTypes } from '../gadgets/page-break/break-types.enum';
 import { CommandModel } from '../../models/generated/command.model';
+import { CommentModel } from '../../models/generated/comment.model';
 import { ContentType } from '../content/contents.interface';
 import { DocxModel } from '../../models/generated/docx.model';
 import { EdgeModel } from '../../models/generated/edge.model';
@@ -25,7 +26,7 @@ export declare class OperationsHelper {
     static moveRange(document: DocxModel, model: MoveRangeModel): void;
     static removeMoveRange(sourceContents: ContentType, model: MoveRangeModel): RestoreModel;
     static restoreMoveRange(targetContents: ContentType, model: MoveRangeModel, restore: RestoreModel): number;
-    static getContentWidth(document: DocxModel, contents: ContentType): number;
+    static getContentWidth(document: DocxModel, contents: ContentType, insertIndex?: number): number;
     static insertText(document: ContentType, text: string, index: number): void;
     static insertElement(document: ContentType, element: InsertElementModel): void;
     static insertBreak(document: ContentType, text: string, index: number, breakType: BreakTypes): void;
@@ -43,7 +44,9 @@ export declare class OperationsHelper {
     static restore(document: ContentType, model: RestoreModel): void;
     static delete(document: ContentType, startIndex: number, count: number): void;
     static replaceByText(document: ContentType, startIndex: number, endIndex: number, text: string): void;
-    static replace(document: ContentType, model: ReplaceModel, contentWidth: number): void;
+    static addComment(document: ContentType, comment: CommentModel): void;
+    static removeComment(document: ContentType, commentId: number): CommentModel;
+    static replace(document: DocxModel, contents: ContentType, model: ReplaceModel): void;
     static applyTextStyle(document: ContentType, startIndex: number, endIndex: number, style: TextStyleModel): void;
     static restoreTextStyles(document: ContentType, textFormats: FormatModel[], linkFormats: FormatModel[]): void;
     static restoreParagraphStyles(document: ContentType, paragraphs: ParagraphModel[]): void;

package/lib/editor/operations/save-commands.helper.d.ts

@@ -1,6 +1,7 @@
 import { ApplyDocumentPageFormatModel } from '../../models/generated/apply-document-page-format.model';
 import { ApplyPageFormatModel } from '../../models/generated/apply-page-format.model';
 import { ApplyTableCellsStylesModel } from '../../models/generated/apply-table-cells-styles.model';
+import { AttachCommentModel } from '../../models/generated/attach-comment.model';
 import { CommandModel } from '../../models/generated/command.model';
 import { CreateEdgesModel } from '../../models/generated/create-edges.model';
 import { FormatModel } from '../../models/generated/format.model';
@@ -15,6 +16,7 @@ import { MoveRangeModel } from '../../models/generated/move-range.model';
 import { NumberingLevelModel } from '../../models/generated/numbering-level.model';
 import { ParagraphModel } from '../../models/generated/paragraph.model';
 import { ParagraphStyleModel } from '../../models/generated/paragraph-style.model';
+import { RemoveCommentModel } from '../../models/generated/remove-comment.model';
 import { RemoveEdgesModel } from '../../models/generated/remove-edges.model';
 import { RemoveInsertedPageFormatModel } from '../../models/generated/remove-inserted-page-format.model';
 import { RemoveWithParagraphModel } from '../../models/generated/remove-with-paragraph.model';
@@ -63,6 +65,8 @@ export declare class SaveCommandsHelper {
     static getInsertPageFormatCommand(insertPageFormat: InsertPageFormatModel, targets: TargetModel[]): CommandModel;
     static getRemoveInsertedPageFormatCommand(removeInsertedPageFormat: RemoveInsertedPageFormatModel, targets: TargetModel[]): CommandModel;
     static getRestorePageFormatsCommand(restorePageFormats: RestorePageFormatsModel, targets: TargetModel[]): CommandModel;
+    static getAttachCommentCommand(attachComment: AttachCommentModel, targets: TargetModel[]): CommandModel;
+    static getRemoveCommentCommand(removeComment: RemoveCommentModel, targets: TargetModel[]): CommandModel;
     static getApplyDocumentPageFormatCommand(applyDocumentPageFormat: ApplyDocumentPageFormatModel, targets: TargetModel[]): CommandModel;
     static getApplyPageFormatCommand(applyPageFormat: ApplyPageFormatModel, targets: TargetModel[]): CommandModel;
 }

package/lib/editor/positioning/content.helper.d.ts

@@ -1,3 +1,4 @@
+import { CommentModel } from '../../models/generated/comment.model';
 import { CursorParagraph } from './cursor-paragraph';
 import { InsertIndexInterface } from './insert-index.interface';
 import { ParagraphInfoModel } from '../content/display-data/models/paragraph-info.model';
@@ -12,4 +13,5 @@ export declare class ContentHelper {
     };
     static paragraphToDocumentIndex(paragraphs: ParagraphInfoModel[], paragraph: number, index: number): number;
     static setIndexesElementsInInterval<T extends InsertIndexInterface>(elements: T[], elementIndexes: number[], startIndex: number, endIndex: number): void;
+    static getCommentsInRange(comments: CommentModel[], startIndex: number, endIndex: number): CommentModel[];
 }

package/lib/editor/positioning/range.interface.d.ts

@@ -0,0 +1,4 @@
+export interface IRange {
+    startIndex: number;
+    endIndex: number;
+}

package/lib/models/generated/attach-comment.model.d.ts

@@ -0,0 +1,5 @@
+import { CommentModel } from './comment.model';
+export declare class AttachCommentModel {
+    comment: CommentModel;
+    constructor(fields?: Partial<AttachCommentModel>);
+}

package/lib/models/generated/cell.model.d.ts

@@ -1,6 +1,7 @@
 import { BordersStyleModel } from './borders-style.model';
 import { BreakModel } from './break.model';
 import { ColumnSectionModel } from './column-section.model';
+import { CommentModel } from './comment.model';
 import { ElementModel } from './element.model';
 import { FormatModel } from './format.model';
 import { ImageModel } from './image.model';
@@ -14,6 +15,7 @@ export declare class CellModel {
     borders: BordersStyleModel[];
     breaks: BreakModel[];
     columnSections: ColumnSectionModel[];
+    comments: CommentModel[];
     content: string;
     elements: ElementModel[];
     formats: FormatModel[];

package/lib/models/generated/command.model.d.ts

@@ -6,6 +6,7 @@ import { ApplyParagraphsModel } from './apply-paragraphs.model';
 import { ApplyParagraphStyleModel } from './apply-paragraph-style.model';
 import { ApplyTableCellsStylesModel } from './apply-table-cells-styles.model';
 import { ApplyTextStyleModel } from './apply-text-style.model';
+import { AttachCommentModel } from './attach-comment.model';
 import { CreateEdgesModel } from './create-edges.model';
 import { DeleteModel } from './delete.model';
 import { InsertBreakModel } from './insert-break.model';
@@ -20,6 +21,7 @@ import { InsertTableRowsModel } from './insert-table-rows.model';
 import { InsertTabModel } from './insert-tab.model';
 import { InsertTextModel } from './insert-text.model';
 import { MoveRangeModel } from './move-range.model';
+import { RemoveCommentModel } from './remove-comment.model';
 import { RemoveEdgesModel } from './remove-edges.model';
 import { RemoveInsertedPageFormatModel } from './remove-inserted-page-format.model';
 import { RemoveNumberingsModel } from './remove-numberings.model';
@@ -46,6 +48,7 @@ export declare class CommandModel {
     applyParagraphStyle: ApplyParagraphStyleModel;
     applyTableCellsStyles: ApplyTableCellsStylesModel;
     applyTextStyle: ApplyTextStyleModel;
+    attachComment: AttachCommentModel;
     binding: number;
     commandType: any;
     createEdges: CreateEdgesModel;
@@ -63,6 +66,7 @@ export declare class CommandModel {
     insertText: InsertTextModel;
     invalid: boolean;
     moveRange: MoveRangeModel;
+    removeComment: RemoveCommentModel;
     removeEdges: RemoveEdgesModel;
     removeInsertedPageFormat: RemoveInsertedPageFormatModel;
     removeNumberings: RemoveNumberingsModel;

package/lib/models/generated/comment.model.d.ts

@@ -0,0 +1,6 @@
+export declare class CommentModel {
+    commentId: number;
+    endIndex: number;
+    startIndex: number;
+    constructor(fields?: Partial<CommentModel>);
+}

package/lib/models/generated/docx.model.d.ts

@@ -1,5 +1,6 @@
 import { BreakModel } from './break.model';
 import { ColumnSectionModel } from './column-section.model';
+import { CommentModel } from './comment.model';
 import { EdgeModel } from './edge.model';
 import { ElementModel } from './element.model';
 import { FormatModel } from './format.model';
@@ -15,6 +16,7 @@ import { TabModel } from './tab.model';
 export declare class DocxModel {
     breaks: BreakModel[];
     columnSections: ColumnSectionModel[];
+    comments: CommentModel[];
     content: string;
     defaultTabWidth: number;
     elements: ElementModel[];

package/lib/models/generated/edge.model.d.ts

@@ -1,5 +1,6 @@
 import { BreakModel } from './break.model';
 import { ColumnSectionModel } from './column-section.model';
+import { CommentModel } from './comment.model';
 import { ElementModel } from './element.model';
 import { FormatModel } from './format.model';
 import { ImageModel } from './image.model';
@@ -10,6 +11,7 @@ import { TabModel } from './tab.model';
 export declare class EdgeModel {
     breaks: BreakModel[];
     columnSections: ColumnSectionModel[];
+    comments: CommentModel[];
     content: string;
     elements: ElementModel[];
     formats: FormatModel[];

package/lib/models/generated/remove-comment.model.d.ts

@@ -0,0 +1,4 @@
+export declare class RemoveCommentModel {
+    commentId: number;
+    constructor(fields?: Partial<RemoveCommentModel>);
+}

package/lib/models/generated/restore.model.d.ts

@@ -1,4 +1,5 @@
 import { BreakModel } from './break.model';
+import { CommentModel } from './comment.model';
 import { ElementModel } from './element.model';
 import { FormatModel } from './format.model';
 import { ImageModel } from './image.model';
@@ -9,6 +10,7 @@ import { TableModel } from './table.model';
 import { TabModel } from './tab.model';
 export declare class RestoreModel {
     breaks: BreakModel[];
+    comments: CommentModel[];
     elements: ElementModel[];
     formats: FormatModel[];
     images: ImageModel[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@talrace/ngx-noder",
-  "version": "19.0.33",
+  "version": "19.0.34",
   "license": "MIT",
   "peerDependencies": {
     "@angular/common": "^19.0.5",

package/public-api.d.ts

@@ -17,6 +17,7 @@ export * from './lib/editor/components/external-element/external-sidenav.interfa
 export * from './lib/editor/components/image/image-api.service';
 export * from './lib/editor/components/shared/abstract/base.component';
 export * from './lib/editor/components/shared/abstract/destroy.component';
+export * from './lib/editor/gadgets/comment/base-comment.component';
 export * from './lib/editor/interaction/editor.service';
 export * from './lib/editor/gadgets/history/operations-history-info.model';
 export * from './lib/editor/gadgets/grammar/grammar.service';

package/src/_ngx-noder.theme.scss

@@ -9,6 +9,7 @@
 @use 'lib/apart-components/insert-table-mobile/insert-table-mobile.theme' as *;
 @use 'lib/apart-components/insert-table/insert-table.theme' as *;
 @use 'lib/apart-components/text-format-mobile/text-format-mobile.theme' as *;
+@use 'lib/editor/components/comment-popup/theme' as *;
 @use 'lib/editor/gadgets/grammar/grammar-popup/theme' as *;
 @use 'lib/editor/theme' as *;
 
@@ -52,7 +53,8 @@
 
 @mixin ngx-noder-toolbar-theme($theme) {
     @include editor-toolbar-theme($theme);
-    @include editor-search-bar-component-theme($theme)
+    @include editor-search-bar-component-theme($theme);
+    @include comment-popup-theme($theme);
 }
 
 @mixin ngx-noder-insert-table-theme($theme) {

package/src/assets/fonts/nc-iconfont.scss

@@ -237,4 +237,16 @@
     &.icon-view:before {
         content: '\e946';
     }
+    &.icon-magic:before {
+        content: '\e90d';
+    }
+    &.icon-more:before {
+        content: '\e931';
+    }
+    &.icon-edit-pen:before {
+        content: '\e92f';
+    }
+    &.icon-comment:before {
+        content: '\e933';
+    }
 }

package/src/assets/fonts/nc-iconfont.svg

@@ -3,7 +3,7 @@
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>Generated by IcoMoon</metadata>
 <defs>
-<font id="Noder-iconfont-v56" horiz-adv-x="1024">
+<font id="Noder-iconfont-v58" horiz-adv-x="1024">
 <font-face units-per-em="1024" ascent="960" descent="-64" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" horiz-adv-x="512" d="" />
@@ -20,6 +20,7 @@
 <glyph unicode="&#xe90a;" glyph-name="field-up" d="M512 768c5.905 0 11.55-2.44 15.582-6.75l341.333-365.252c3.686-3.947 5.747-9.139 5.751-14.541v-232.124c0-11.78-9.553-21.333-21.333-21.333h-682.667c-11.782 0-21.333 9.553-21.333 21.333v232.124c0.002 5.402 2.063 10.594 5.75 14.541l341.335 365.252 3.29 2.875c3.567 2.511 7.859 3.875 12.292 3.875zM192 373.043v-202.377h640v202.377l-320 342.374-320-342.374z" />
 <glyph unicode="&#xe90b;" glyph-name="cancel-thin" d="M313.266 204.128c-8.005-8.004-20.983-8.004-28.987 0-8.005 8.008-8.005 20.984 0 28.987l214.88 214.884-214.88 214.882c-8.005 8.005-8.005 20.983 0 28.987s20.983 8.005 28.987 0l214.88-214.882 214.884 214.882c8.004 8.005 20.984 8.005 28.987 0s8.004-20.983 0-28.987l-214.884-214.882 214.884-214.884c8.004-8.004 8.004-20.98 0-28.987-8.004-8.004-20.984-8.004-28.987 0l-214.884 214.884-214.88-214.884z" />
 <glyph unicode="&#xe90c;" glyph-name="field-down" d="M512 128c5.905 0 11.55 2.441 15.582 6.75l341.333 365.252c3.686 3.947 5.747 9.139 5.751 14.541v232.124c0 11.782-9.553 21.333-21.333 21.333h-682.667c-11.782 0-21.333-9.551-21.333-21.333v-232.124c0.002-5.402 2.063-10.594 5.75-14.541l341.335-365.252 3.29-2.876c3.567-2.509 7.859-3.874 12.292-3.874zM192 522.957v202.377h640v-202.377l-320-342.374-320 342.374z" />
+<glyph unicode="&#xe90d;" glyph-name="ai" d="M661.333 251.75c-7.386 0-13.918-4.77-16.209-11.793-6.093-18.688-11.806-29.013-18.748-35.959-6.822-6.818-16.452-11.959-33.754-16.913-7.317-2.099-12.373-8.806-12.373-16.418s5.056-14.319 12.373-16.418c17.301-4.954 26.931-10.095 33.754-16.913 6.942-6.946 12.655-17.271 18.748-35.959 2.291-7.023 8.823-11.793 16.209-11.793s13.918 4.77 16.209 11.793c6.093 18.688 11.806 29.013 18.748 35.959 6.822 6.818 16.452 11.959 33.754 16.913 7.317 2.099 12.373 8.806 12.373 16.418s-5.056 14.319-12.373 16.418c-17.301 4.954-26.931 10.095-33.754 16.913-6.942 6.946-12.655 17.271-18.748 35.959l-1.041 2.543c-2.893 5.602-8.713 9.25-15.168 9.25zM384 678.417c-7.385 0-13.917-4.771-16.208-11.792-25.294-77.526-51.205-127.907-87.459-164.165-36.13-36.134-84.175-59.84-157.041-80.708-7.318-2.099-12.375-8.806-12.375-16.418s5.057-14.319 12.375-16.418c72.867-20.868 120.911-44.574 157.041-80.708 36.254-36.258 62.164-86.639 87.459-164.164 2.292-7.023 8.823-11.793 16.208-11.793s13.917 4.77 16.208 11.793c25.294 77.525 51.205 127.906 87.459 164.164 36.13 36.134 84.173 59.84 157.043 80.708 7.317 2.099 12.373 8.806 12.373 16.418s-5.056 14.319-12.373 16.418c-72.87 20.868-120.913 44.574-157.043 80.708-36.254 36.258-62.165 86.639-87.459 164.165l-1.041 2.542c-2.892 5.604-8.71 9.25-15.167 9.25zM661.333 193.374c3.2-4.902 6.746-9.408 10.833-13.5 3.456-3.456 7.172-6.485 11.123-9.207-3.951-2.722-7.667-5.751-11.123-9.207-4.087-4.092-7.633-8.597-10.833-13.5-3.2 4.902-6.746 9.408-10.833 13.5-3.447 3.447-7.142 6.49-11.085 9.207 3.942 2.718 7.637 5.76 11.085 9.207 4.087 4.092 7.633 8.597 10.833 13.5zM384 610.625c21.717-56.177 46.131-98.877 79.543-132.293 31.97-31.974 71.121-54.515 121.207-72.998-50.086-18.483-89.237-41.024-121.207-72.998-33.404-33.408-57.83-76.092-79.543-132.25-21.713 56.158-46.141 98.842-79.542 132.25-31.962 31.966-71.098 54.519-121.167 72.998 50.068 18.479 89.204 41.033 121.167 72.998 33.408 33.417 57.825 76.116 79.542 132.293zM725.333 806.417c-7.386 0-13.918-4.772-16.209-11.792-12.493-38.315-24.951-61.992-41.664-78.708-16.593-16.592-39.023-27.92-74.837-38.167-7.317-2.099-12.373-8.803-12.373-16.417s5.056-14.318 12.373-16.417c35.814-10.246 58.244-21.575 74.837-38.167 16.713-16.716 29.171-40.393 41.664-78.707 2.291-7.023 8.823-11.793 16.209-11.793s13.918 4.77 16.209 11.793c12.493 38.314 24.951 61.991 41.664 78.707 16.593 16.592 39.023 27.92 74.837 38.167 7.317 2.099 12.373 8.803 12.373 16.417s-5.056 14.318-12.373 16.417c-35.814 10.246-58.244 21.575-74.837 38.167-16.713 16.716-29.171 40.393-41.664 78.708l-1.041 2.542c-2.893 5.604-8.713 9.25-15.168 9.25zM725.333 742c9.297-19.986 20.032-36.488 33.749-50.208 12.659-12.66 27.354-22.369 44.582-30.458-17.229-8.090-31.923-17.798-44.582-30.458-13.713-13.712-24.457-30.196-33.749-50.167-9.293 19.971-20.036 36.454-33.749 50.167-12.651 12.652-27.324 22.372-44.544 30.458 17.22 8.087 31.893 17.807 44.544 30.458 13.717 13.72 24.452 30.222 33.749 50.208z" />
 <glyph unicode="&#xe90e;" glyph-name="content-cut" d="M830.624 98.263l-299.323 299.323-127.765-127.762c5.986-10.24 10.399-21.033 13.233-32.375s4.256-23.081 4.256-35.209c0-37.257-13.26-69.153-39.776-95.687-26.515-26.53-58.391-39.797-95.625-39.797s-69.139 13.259-95.71 39.772c-26.572 26.518-39.857 58.393-39.857 95.625 0 37.237 13.266 69.14 39.798 95.711s58.428 39.858 95.685 39.858c12.13 0 23.867-1.417 35.21-4.256 11.342-2.834 22.134-7.246 32.374-13.23l127.764 127.762-127.764 127.763c-10.24-5.986-21.031-10.397-32.374-13.233s-23.080-4.254-35.21-4.254c-37.258 0-69.153 13.258-95.685 39.774s-39.798 58.391-39.798 95.625c0 37.236 13.258 69.139 39.773 95.71s58.391 39.857 95.626 39.857c37.236 0 69.139-13.266 95.71-39.799s39.859-58.427 39.859-95.685c0-12.13-1.421-23.867-4.256-35.21s-7.247-22.134-13.233-32.374l502.705-502.706v-25.207h-75.616zM635.273 501.563l-50.409 50.412 245.76 245.76h75.616v-25.207l-270.967-270.966zM285.538 599.236c25.994 0 48.246 9.256 66.757 27.767s27.767 40.763 27.767 66.757-9.255 48.246-27.767 66.757c-18.51 18.511-40.763 27.767-66.757 27.767s-48.246-9.255-66.757-27.767c-18.511-18.51-27.767-40.763-27.767-66.757s9.256-48.246 27.767-66.757c18.511-18.511 40.763-27.767 66.757-27.767zM285.538 107.717c25.994 0 48.246 9.257 66.757 27.767s27.767 40.763 27.767 66.757-9.255 48.247-27.767 66.757c-18.51 18.51-40.763 27.767-66.757 27.767s-48.246-9.257-66.757-27.767c-18.511-18.51-27.767-40.763-27.767-66.757s9.256-48.247 27.767-66.757c18.511-18.51 40.763-27.767 66.757-27.767z" />
 <glyph unicode="&#xe90f;" glyph-name="content-paste" d="M266.633 120.32c-18.327 0-33.936 6.447-46.828 19.337-12.892 12.894-19.337 28.5-19.337 46.83v523.028c0 18.327 6.445 33.936 19.337 46.828s28.502 19.337 46.828 19.337h189.915c3.83 16.017 12.337 29.473 25.518 40.369s28.541 16.345 46.080 16.345c17.854 0 33.333-5.448 46.436-16.345s21.57-24.352 25.403-40.369h189.678c18.326 0 33.935-6.445 46.825-19.337 12.894-12.892 19.337-28.502 19.337-46.828v-523.028c0-18.33-6.443-33.935-19.337-46.83-12.89-12.89-28.5-19.337-46.825-19.337h-523.031zM266.633 161.28h523.031c6.3 0 12.075 2.626 17.326 7.877s7.877 11.026 7.877 17.33v523.028c0 6.301-2.626 12.077-7.877 17.329s-11.026 7.877-17.326 7.877h-97.677v-91.372h-327.679v91.372h-97.674c-6.301 0-12.077-2.626-17.329-7.877s-7.877-11.028-7.877-17.329v-523.028c0-6.304 2.626-12.079 7.877-17.33s11.028-7.877 17.329-7.877zM528.146 725.268c9.507 0 17.396 3.138 23.671 9.413s9.413 14.165 9.413 23.67c0 9.505-3.138 17.394-9.413 23.67s-14.164 9.414-23.671 9.414c-9.503 0-17.392-3.138-23.667-9.414-6.279-6.275-9.417-14.165-9.417-23.67s3.138-17.395 9.417-23.67c6.275-6.275 14.164-9.413 23.667-9.413z" />
 <glyph unicode="&#xe910;" glyph-name="datepicker" d="M360.172 370.807c-8.455 0-15.82 3.138-22.095 9.413s-9.413 13.64-9.413 22.094c0 8.454 3.138 15.819 9.413 22.094s13.64 9.413 22.095 9.413c8.455 0 15.82-3.138 22.095-9.413s9.413-13.64 9.413-22.094c0-8.454-3.138-15.819-9.413-22.094s-13.64-9.413-22.095-9.413zM524.014 370.807c-8.454 0-15.823 3.138-22.098 9.413s-9.413 13.64-9.413 22.094c0 8.454 3.138 15.819 9.413 22.094s13.644 9.413 22.098 9.413c8.454 0 15.819-3.138 22.094-9.413s9.413-13.64 9.413-22.094c0-8.454-3.138-15.819-9.413-22.094s-13.64-9.413-22.094-9.413zM687.854 370.807c-8.454 0-15.823 3.138-22.098 9.413s-9.413 13.64-9.413 22.094c0 8.454 3.138 15.819 9.413 22.094s13.644 9.413 22.098 9.413c8.454 0 15.819-3.138 22.094-9.413s9.413-13.64 9.413-22.094c0-8.454-3.138-15.819-9.413-22.094s-13.64-9.413-22.094-9.413zM262.498 79.36c-18.852 0-34.592 6.316-47.222 18.944s-18.944 28.369-18.944 47.223v523.027c0 18.852 6.315 34.593 18.944 47.222s28.37 18.944 47.222 18.944h72.467v91.372h44.111v-91.372h293.020v91.372h40.964v-91.372h72.466c18.85 0 34.591-6.315 47.223-18.944 12.628-12.629 18.944-28.37 18.944-47.222v-523.027c0-18.854-6.316-34.595-18.944-47.223-12.632-12.628-28.373-18.944-47.223-18.944h-523.028zM262.498 120.32h523.028c6.3 0 12.079 2.626 17.33 7.877s7.877 11.026 7.877 17.33v359.186h-573.441v-359.186c0-6.304 2.626-12.079 7.877-17.33s11.028-7.877 17.329-7.877zM237.292 545.674h573.441v122.88c0 6.301-2.626 12.077-7.877 17.329s-11.031 7.877-17.33 7.877h-523.028c-6.301 0-12.077-2.626-17.329-7.877s-7.877-11.028-7.877-17.329v-122.88z" />
@@ -53,8 +54,11 @@
 <glyph unicode="&#xe92c;" glyph-name="border-outside" d="M128 789.344h725.333v-725.331h-725.333v725.331zM170.667 746.676v-298.668h42.667v-42.667h-42.667v-298.662h298.667v42.667h42.667v-42.667h298.667v298.662h-42.667v42.667h42.667v298.668h-298.667v-42.666h-42.667v42.666h-298.667zM298.666 448.009h85.334v-42.667h-85.334v42.667zM469.333 448.009h42.667v-42.667h-42.667v42.667zM469.333 320.009h42.667v-85.329h-42.667v85.329zM597.333 448.009h85.333v-42.667h-85.333v42.667zM469.333 533.344v85.333h42.667v-85.333h-42.667z" />
 <glyph unicode="&#xe92d;" glyph-name="border-all" d="M127.999 789.333h725.335v-725.333h-725.335v725.333zM170.665 746.667v-298.667h298.668v298.667h-298.668zM810.667 448v298.667h-298.667v-298.667h298.667zM170.665 106.667h298.668v298.667h-298.668v-298.667zM810.667 106.667v298.667h-298.667v-298.667h298.667z" />
 <glyph unicode="&#xe92e;" glyph-name="border-none" d="M853.333 192.013h-42.667v85.333h42.667v-85.333zM170.667 362.679h-42.667v128h42.667v-42.667h42.667v-42.667h-42.667v-42.667zM810.667 448.013v42.667h42.667v-128h-42.667v42.667h-42.667v42.667h42.667zM597.333 405.346v42.667h85.333v-42.667h-85.333zM469.333 405.346v42.667h42.667v-42.667h-42.667zM298.667 405.346v42.667h85.333v-42.667h-85.333zM170.667 192.013h-42.667v85.333h42.667v-85.333zM128 746.676v42.667h42.667v-42.667h-42.667zM128 661.343h42.667v-85.333h-42.667v85.333zM640 746.676v42.667h85.333v-42.667h-85.333zM256 746.676v42.667h85.333v-42.667h-85.333zM426.667 746.677v42.667h128v-42.667h-42.667v-42.667h-42.667v42.667h-42.667zM853.333 576.010h-42.667v85.333h42.667v-85.333zM810.667 746.677v42.667h42.667v-42.667h-42.667zM512 234.679h-42.667v85.333h42.667v-85.333zM512 533.344h-42.667v85.333h42.667v-85.333zM128 106.679h42.667v-42.667h-42.667v42.667zM640 106.679h85.333v-42.667h-85.333v42.667zM256 106.679h85.333v-42.667h-85.333v42.667zM426.667 106.679h42.667v42.667h42.667v-42.667h42.667v-42.667h-128v42.667zM810.667 106.679h42.667v-42.667h-42.667v42.667z" />
+<glyph unicode="&#xe92f;" glyph-name="edit" d="M743.842 832c-25.98 0-50.65-10.25-68.817-28.167l-0.055-0.057-397.743-401.711c-11.374-12.463-20.836-28.058-22.262-46.724l-23.985-172.676v-0.508c0-5.026 1.674-10.65 5.811-14.729 1.645-1.626 3.59-3.136 6.022-4.203 2.465-1.079 5.037-1.532 7.717-1.532h1.751l171.821 24.887c16.893 2.56 34.121 10.266 46.277 23.518l397.449 400.229c37.564 38.321 37.564 99.595 0 137.916l-55.168 55.589c-18.167 17.917-42.837 28.167-68.817 28.167zM689.711 765.543c12.796 13.786 33.335 26.866 51.43 26.659 18.615-0.213 32.55-6.948 45.611-19.187l0.299-0.28 50.167-52.851c26.701-27.549 27.358-61.876 0-88.796l-41.395-39.74-139.691 141.079 33.579 33.117zM631.718 705.382l138.483-139.446-329.826-331.018c-8.077-9.156-19.715-14.063-30.961-15.219l-139.924-18.206 20.408 143.761c1.683 13.457 5.5 21.82 15.619 30.626l326.202 329.501zM147.2 101.939c-10.604 0-19.2-8.495-19.2-18.97 0-10.479 8.596-18.97 19.2-18.97h332.22c10.607 0 19.2 8.491 19.2 18.97 0 10.475-8.593 18.97-19.2 18.97h-332.22z" />
 <glyph unicode="&#xe930;" glyph-name="link-highlighter" d="M159.508-43.52c-22.622 0-40.96 18.338-40.96 40.96s18.338 40.96 40.96 40.96h737.279c22.622 0 40.96-18.338 40.96-40.96s-18.338-40.96-40.96-40.96h-737.279zM610.226 436.183l-106.496 106.498-159.115-159.115c-4.726-4.727-7.089-10.502-7.089-17.33 0-6.824 2.363-12.599 7.089-17.326l71.604-71.84c4.723-4.727 10.502-7.090 17.326-7.090 6.828 0 12.603 2.363 17.33 7.090l159.351 159.113zM489.472 586.398l164.471-164.473-173.842-174.080c-13.234-13.23-28.713-19.849-46.436-19.849s-33.201 6.619-46.434 19.849l-7.877 7.881-47.34-46.395h-113.428l103.818 103.58-6.302 6.304c-13.233 13.23-19.929 28.787-20.086 46.67-0.158 17.879 6.38 33.436 19.612 46.67l173.844 173.844zM489.472 586.398l200.942 200.94c13.23 13.234 28.709 19.85 46.432 19.85s33.202-6.617 46.436-19.85l71.836-71.601c13.234-13.234 19.853-28.712 19.853-46.436s-6.619-33.201-19.853-46.434l-201.175-200.942-164.471 164.473z" />
+<glyph unicode="&#xe931;" glyph-name="more" d="M501.047 74.3c-14.588 0-27.076 5.193-37.466 15.582s-15.582 22.874-15.582 37.466c0 14.588 5.193 27.076 15.582 37.466s22.878 15.582 37.466 15.582c14.588 0 27.076-5.193 37.466-15.582s15.582-22.878 15.582-37.466c0-14.592-5.193-27.076-15.582-37.466s-22.878-15.582-37.466-15.582zM501.047 368.102c-14.588 0-27.076 5.193-37.466 15.582s-15.582 22.878-15.582 37.466c0 14.588 5.193 27.076 15.582 37.466 10.389 10.385 22.878 15.582 37.466 15.582s27.076-5.197 37.466-15.582c10.389-10.389 15.582-22.878 15.582-37.466s-5.193-27.076-15.582-37.466c-10.389-10.389-22.878-15.582-37.466-15.582zM501.047 661.903c-14.588 0-27.076 5.194-37.466 15.583s-15.582 22.877-15.582 37.466c0 14.588 5.193 27.077 15.582 37.465s22.878 15.583 37.466 15.583c14.588 0 27.076-5.194 37.466-15.583s15.582-22.877 15.582-37.465c0-14.589-5.193-27.078-15.582-37.466s-22.878-15.583-37.466-15.583z" />
 <glyph unicode="&#xe932;" glyph-name="link-on" d="M654.742 659.238c22.68 22.678 53.436 35.418 85.508 35.418s62.829-12.741 85.504-35.418c22.68-22.678 35.418-53.436 35.418-85.507s-12.739-62.828-35.418-85.508l-149.991-149.996c-21.508-21.541-50.352-34.181-80.769-35.389-30.417-1.212-60.174 9.097-83.325 28.86-23.151 19.767-37.999 47.538-41.57 77.771-3.576 30.228 4.383 60.699 22.286 85.316 6.652 9.15 4.633 21.959-4.518 28.611-9.146 6.651-21.955 4.628-28.606-4.518-23.97-32.961-34.623-73.748-29.839-114.221 4.784-40.468 24.658-77.648 55.652-104.108s70.828-40.26 111.55-38.638c40.718 1.618 79.331 18.538 108.122 47.378l149.971 149.971c30.36 30.36 47.415 71.536 47.415 114.471s-17.056 84.111-47.415 114.47c-30.36 30.36-71.533 47.415-114.467 47.415s-84.111-17.056-114.471-47.415l-23.568-23.567c-7.995-7.998-7.995-20.965 0-28.963 7.999-7.998 20.967-7.998 28.963 0l23.568 23.568zM461.3 585.429c30.421 1.218 60.183-9.084 83.341-28.849 23.155-19.764 38.007-47.537 41.583-77.77 3.576-30.237-4.383-60.707-22.286-85.328-6.652-9.15-4.628-21.959 4.518-28.611s21.955-4.628 28.606 4.518c23.974 32.965 34.628 73.757 29.839 114.233-4.788 40.473-24.67 77.654-55.673 104.113-30.999 26.459-70.84 40.251-111.567 38.62-40.718-1.63-79.328-18.559-108.114-47.406l-149.976-150.008c-30.358-30.36-47.414-71.533-47.414-114.467s17.056-84.111 47.415-114.471c30.36-30.36 71.535-47.415 114.47-47.415s84.111 17.056 114.472 47.415l29.286 29.286c7.995 7.999 7.995 20.963 0 28.963-7.999 7.999-20.967 7.999-28.963 0l-29.288-29.286c-22.678-22.68-53.436-35.418-85.507-35.418s-62.829 12.739-85.507 35.418c-22.678 22.68-35.418 53.436-35.418 85.508s12.74 62.829 35.418 85.504l0.002 0.004 149.998 150.028c21.504 21.552 50.344 34.2 80.765 35.418z" />
+<glyph unicode="&#xe933;" glyph-name="comment" d="M277.333 384h469.333v42.667h-469.333v-42.667zM277.333 512h469.333v42.667h-469.333v-42.667zM277.333 640h469.333v42.667h-469.333v-42.667zM896 103.381l-131.285 131.285h-567.765c-19.655 0-36.067 6.571-49.237 19.712s-19.74 29.538-19.712 49.195v459.52c0 19.627 6.585 36.025 19.755 49.195s29.554 19.74 49.152 19.712h630.187c19.627 0 36.011-6.571 49.152-19.712s19.725-29.54 19.755-49.195v-659.712zM196.949 277.333h585.984l70.4-70.144v555.861c0 6.571-2.731 12.601-8.192 18.091s-11.477 8.22-18.048 8.192h-630.187c-6.542 0-12.558-2.731-18.048-8.192s-8.22-11.477-8.192-18.048v-459.52c0-6.541 2.731-12.557 8.192-18.048s11.477-8.222 18.048-8.192z" />
 <glyph unicode="&#xe935;" glyph-name="open-from" d="M225.673 161.28c-18.852 0-34.592 6.316-47.222 18.944s-18.944 28.369-18.944 47.223v441.108c0 18.852 6.314 34.592 18.944 47.222s28.37 18.944 47.222 18.944h204.014l81.92-81.92h319.017c18.85 0 34.591-6.315 47.219-18.944 12.632-12.629 18.944-28.37 18.944-47.222v-359.188c0-18.854-6.312-34.595-18.944-47.223-12.628-12.628-28.369-18.944-47.219-18.944h-604.951zM225.673 202.24h604.951c7.348 0 13.39 2.363 18.117 7.090 4.723 4.727 7.086 10.764 7.086 18.117v359.188c0 7.352-2.363 13.39-7.086 18.117-4.727 4.726-10.768 7.089-18.117 7.089h-335.479l-81.92 81.92h-187.552c-7.352 0-13.391-2.363-18.117-7.089s-7.089-10.765-7.089-18.117v-441.108c0-7.352 2.363-13.39 7.089-18.117s10.765-7.090 18.117-7.090z" />
 <glyph unicode="&#xe936;" glyph-name="page-break" d="M307.592 79.36c-18.196 0-33.772 6.48-46.729 19.436-12.958 12.96-19.436 28.533-19.436 46.731v97.673c0 11.309 9.169 20.48 20.48 20.48s20.48-9.171 20.48-20.48v-97.673c0-7.352 2.363-13.39 7.089-18.117s10.765-7.090 18.117-7.090h441.107c7.352 0 13.39 2.363 18.117 7.090s7.090 10.764 7.090 18.117v97.673c0 11.309 9.171 20.48 20.48 20.48s20.48-9.171 20.48-20.48v-97.673c0-18.199-6.48-33.772-19.436-46.731-12.96-12.956-28.533-19.436-46.731-19.436h-441.107zM261.907 468.48c-11.311 0-20.48 9.171-20.48 20.48v261.514c0 18.196 6.479 33.772 19.436 46.729s28.534 19.437 46.729 19.437h322.954l184.32-184.32v-143.36c0-11.309-9.171-20.48-20.48-20.48s-20.48 9.171-20.48 20.48v122.88h-163.84v163.84h-302.474c-7.352 0-13.391-2.363-18.117-7.089s-7.089-10.765-7.089-18.117v-261.514c0-11.309-9.169-20.48-20.48-20.48zM433.623 345.6c-11.309 0-20.48 9.171-20.48 20.48s9.171 20.48 20.48 20.48h189.047c11.309 0 20.48-9.171 20.48-20.48s-9.171-20.48-20.48-20.48h-189.047zM745.55 345.6c-11.309 0-20.48 9.171-20.48 20.48s9.171 20.48 20.48 20.48h189.047c11.309 0 20.48-9.171 20.48-20.48s-9.171-20.48-20.48-20.48h-189.047zM121.697 345.6c-11.311 0-20.48 9.171-20.48 20.48s9.169 20.48 20.48 20.48h189.046c11.311 0 20.48-9.171 20.48-20.48s-9.169-20.48-20.48-20.48h-189.046z" />
 <glyph unicode="&#xe937;" glyph-name="print" d="M691.986 586.634v122.88h-327.68v-122.88h-40.96v122.88c0 22.622 18.338 40.96 40.96 40.96h327.68c22.622 0 40.96-18.338 40.96-40.96v-122.88h-40.96zM758.153 443.273c11.604 0 21.332 3.924 29.184 11.776 7.848 7.852 11.776 17.58 11.776 29.184s-3.928 21.332-11.776 29.184c-7.852 7.852-17.58 11.776-29.184 11.776-11.608 0-21.336-3.924-29.184-11.776-7.852-7.852-11.776-17.58-11.776-29.184s3.924-21.332 11.776-29.184c7.848-7.852 17.576-11.776 29.184-11.776zM691.986 161.28v185.893h-327.68v-185.893h327.68zM732.946 161.28c0-22.622-18.338-40.96-40.96-40.96h-327.68c-22.622 0-40.96 18.338-40.96 40.96v122.88h-140.209v220.553c0 23.212 7.877 42.667 23.631 58.368s35.183 23.552 58.289 23.552h526.179c23.208 0 42.664-7.85 58.368-23.552 15.7-15.701 23.552-35.156 23.552-58.368v-220.553h-140.21v-122.88zM832.197 325.12v179.593c0 11.604-3.928 21.332-11.776 29.184-7.852 7.851-17.58 11.776-29.184 11.776h-526.179c-11.605 0-21.333-3.925-29.184-11.776s-11.776-17.58-11.776-29.184v-179.593h99.249v63.017h409.6v-63.017h99.25z" />

package/src/lib/apart-components/editor-toolbar/components/toolbar-actions/_toolbar-actions.theme.scss

@@ -15,5 +15,17 @@
         button:hover {
             background-color: map.get($theme, background-palette, noder-editor-toolbar-button-hover);
         }
+
+        mat-button-toggle {
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-transparent);
+        }
+
+        .mat-button-toggle-checked mat-icon {
+            color: map.get($theme, foreground-palette, noder-editor-toolbar-button-selected);
+        }
+
+        .mat-button-toggle-appearance-standard.mat-button-toggle-checked {
+            background-color: map.get($theme, background-palette, noder-editor-toolbar-button-checked);
+        }
     }
 }

package/src/lib/editor/components/comment-popup/_theme.scss

@@ -0,0 +1,9 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin comment-popup-theme($theme) {
+    app-nod-comment-popup {
+        background: map.get($theme, background-palette, dialog);
+        box-shadow: 2px 2px 8px 0 #21212129;
+    }
+}

package/src/scss/base-editor.scss

@@ -24,6 +24,20 @@ div.ngx-colors-overlay.noder-color-picker-overlay .opened .colors {
     border-radius: 8px;
 }
 
+.mat-mdc-menu-panel.icon-only-menu {
+    width: 52px;
+    min-width: 0;
+    border-radius: 8px;
+
+    .mat-mdc-menu-content {
+        padding: 0;
+    }
+
+    .mat-mdc-menu-item:not(:last-child) {
+        border-bottom: 1px dashed #E5EBF0;
+    }
+}
+
 .base-editor,
 .noder-modal {
     * {
@@ -120,6 +134,22 @@ div.ngx-colors-overlay.noder-color-picker-overlay .opened .colors {
         pointer-events: none;
     }
 
+    .noder-comments-layer {
+        z-index: 1;
+        position: absolute;
+        word-wrap: normal;
+        white-space: pre;
+        height: 100%;
+        width: 100%;
+        left: 100%;
+        box-sizing: border-box;
+
+        .noder-comment {
+            z-index: 5;
+            position: absolute;
+        }
+    }
+
     .noder-text-layer {
         font: inherit !important;
         position: absolute;
@@ -295,6 +325,16 @@ div.ngx-colors-overlay.noder-color-picker-overlay .opened .colors {
                 background-color: rgb(255, 150, 50, 0.4);
             }
         }
+        
+        &.comments-highlight {
+            > .noder-highlight {
+                background: #E0A74A66;
+            }
+
+            > .noder-selected-highlight {
+                background-color: #E69A1DB2
+            }
+        }
     }
 
     .noder-highlight-layer.notes-highlight .noder-selection {