@talrace/ngx-noder 0.0.45 → 0.0.46

package/lib/editor/components/editor.component.d.ts

@@ -9,6 +9,7 @@ import { Editor } from '../execution/editor';
 import { EditorSearchBarComponent } from '../../apart-components/editor-search-bar/editor-search-bar.component';
 import { EditorService } from '../interaction/editor.service';
 import { ExternalSidenavModel } from './external-element/models/external-sidenav.model';
+import { OverlayService } from './shared/services/overlay.service';
 import { RegulatorService } from '../execution/regulator.service';
 import { RulerUnit } from '../../apart-components/editor-ruler/editor-ruler.component';
 import * as i0 from "@angular/core";
@@ -16,6 +17,7 @@ export declare class EditorComponent implements OnDestroy {
     private cdr;
     private componentService;
     private editorService;
+    private overlayService;
     private injector;
     private regulatorService;
     private commandsService;
@@ -38,11 +40,12 @@ export declare class EditorComponent implements OnDestroy {
     sidenavProperties: ExternalSidenavModel;
     readonly subscriptions: Subscription[];
     private sidenavComponentRef;
-    constructor(cdr: ChangeDetectorRef, componentService: ComponentService, editorService: EditorService, injector: Injector, regulatorService: RegulatorService, commandsService: CommandsService, clipboard: Clipboard);
+    constructor(cdr: ChangeDetectorRef, componentService: ComponentService, editorService: EditorService, overlayService: OverlayService, injector: Injector, regulatorService: RegulatorService, commandsService: CommandsService, clipboard: Clipboard);
     ngOnDestroy(): void;
     initEditor(content: DocxModel): void;
     toggleSidenavSubscription(): Subscription;
     searchBarSubscription(): Subscription;
+    displayGrammarErrorPopupSubscription(): Subscription;
     removeSidenavComponent(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<EditorComponent, "app-nod-editor", never, { "isMobile": { "alias": "isMobile"; "required": false; }; "externalElementTagNames": { "alias": "externalElementTagNames"; "required": false; }; "customPageWidth": { "alias": "customPageWidth"; "required": false; }; "content": { "alias": "content"; "required": false; }; "rulerUnit": { "alias": "rulerUnit"; "required": true; "isSignal": true; }; }, {}, never, never, false, never>;

package/lib/editor/content/display-data/display-data.d.ts

@@ -14,7 +14,11 @@ import { NumberingDataModel } from '../../gadgets/numbering/numbering-data.model
 import { PageFormat } from './page-format';
 import { PageFormatModel } from '../../../models/generated/page-format.model';
 import { Paragraph } from './paragraph';
+import { ParagraphInfoAdded } from './models/paragraph-info-added.model';
+import { ParagraphInfoContentChanged } from './models/paragraph-info-content-changed.model';
+import { ParagraphInfoContentInserted } from './models/paragraph-info-content-inserted.model';
 import { ParagraphInfoModel } from './models/paragraph-info.model';
+import { ParagraphInfosRemoved } from './models/paragraphs-infos-removed.model';
 import { Range } from '../../positioning/range';
 import { VisibleRange } from '../../display/visible-range.interface';
 export declare class DisplayData extends EventEmitting {
@@ -31,8 +35,12 @@ export declare class DisplayData extends EventEmitting {
     allPagesHeight: number;
     tabTokens: DisplayToken[];
     get maxPageWidth(): number;
+    private readonly ParagraphInfoChanges;
+    get ParagraphInfoChanges$(): import("rxjs").Observable<ParagraphInfoAdded | ParagraphInfoContentChanged | ParagraphInfoContentInserted | ParagraphInfosRemoved>;
+    private lastParagraphId;
     constructor(model: ContentType, generalProperties: GeneralPropertiesModel, sessionId: number, pageFormatModels: PageFormatModel[], pagesSpace: number, customComponents: ICustomComponents, customContentService: CustomContentService, editorService: EditorService);
     updateDataForModel(): void;
+    emitAllParagraphs(): void;
     insertText(position: CursorParagraph, text: string): CursorParagraph;
     removeRange(range: Range): void;
     getParagraphContent(index: number): string;

package/lib/editor/content/display-data/models/paragraph-info-added.model.d.ts

@@ -0,0 +1,5 @@
+import { ParagraphInfoModel } from './paragraph-info.model';
+export declare class ParagraphInfoAdded {
+    paragraph: ParagraphInfoModel;
+    constructor(paragraph: ParagraphInfoModel);
+}

package/lib/editor/content/display-data/models/paragraph-info-content-changed.model.d.ts

@@ -0,0 +1,7 @@
+import { ParagraphInfoModel } from './paragraph-info.model';
+export declare class ParagraphInfoContentChanged {
+    paragraph: ParagraphInfoModel;
+    index: number;
+    length: number;
+    constructor(paragraph: ParagraphInfoModel, index: number, length: number);
+}

package/lib/editor/content/display-data/models/paragraph-info-content-inserted.model.d.ts

@@ -0,0 +1,7 @@
+import { ParagraphInfoModel } from './paragraph-info.model';
+export declare class ParagraphInfoContentInserted {
+    paragraph: ParagraphInfoModel;
+    index: number;
+    length: number;
+    constructor(paragraph: ParagraphInfoModel, index: number, length: number);
+}

package/lib/editor/content/display-data/models/paragraph-info.model.d.ts

@@ -5,5 +5,6 @@ export declare class ParagraphInfoModel {
     paragraphSettings: Paragraph;
     startIndex: number;
     lineNumber: number;
+    id: number;
     constructor(fields?: Partial<ParagraphInfoModel>);
 }

package/lib/editor/content/display-data/models/paragraphs-infos-removed.model.d.ts

@@ -0,0 +1,4 @@
+export declare class ParagraphInfosRemoved {
+    ids: number[];
+    constructor(id: number[]);
+}

package/lib/editor/display/layers/grammar-highlight.layer.d.ts

@@ -0,0 +1,12 @@
+import { EditSession } from '../../execution/edit.session';
+import { GrammarError } from '../../../models/generated/grammar-error';
+import { HighlightLayer } from './highlight.layer';
+import { ILayerConfig } from './layer.config';
+export declare class GrammarHighlightLayer extends HighlightLayer {
+    private readonly className;
+    private readonly errorsByParagraph;
+    constructor(parentEl: HTMLElement, cssClass: string, session: EditSession);
+    update(config: ILayerConfig): void;
+    setErrors(paragraphId: number, errors: GrammarError[]): void;
+    removeParagraphHighlights(paragraphId: number): void;
+}

package/lib/editor/display/render-changes.interface.d.ts

@@ -9,5 +9,6 @@ export interface IRenderChanges {
     text?: boolean;
     dragAndDrop?: boolean;
     search?: boolean;
+    grammar?: boolean;
     visibilityChanged?: boolean;
 }

package/lib/editor/display/render-changes.model.d.ts

@@ -6,6 +6,7 @@ export declare class RenderChangesModel implements IRenderChanges {
     marker: boolean;
     selection: boolean;
     search: boolean;
+    grammar: boolean;
     scroll: boolean;
     size: boolean;
     text: boolean;

package/lib/editor/display/renderer.d.ts

@@ -3,6 +3,8 @@ import { CursorParagraph } from '../positioning/cursor-paragraph';
 import { CustomElementInfo } from './custom-element-info.model';
 import { EditSession } from '../execution/edit.session';
 import { EventEmitting } from '../core/event-emitting';
+import { GrammarError } from '../../models/generated/grammar-error';
+import { GrammarHighlightLayer } from './layers/grammar-highlight.layer';
 import { ILayerConfig } from './layers/layer.config';
 import { Range } from '../positioning/range';
 import { RenderChangesModel } from './render-changes.model';
@@ -19,6 +21,7 @@ export declare class Renderer extends EventEmitting {
     selectionLayer: SelectionLayer;
     dragAndDropSelectionLayer: SelectionLayer;
     searchHighlightLayer: SearchHighlightLayer;
+    grammarHighlightLayer: GrammarHighlightLayer;
     loop: RenderLoop;
     textarea: HTMLElement;
     layerConfig: ILayerConfig;
@@ -39,6 +42,8 @@ export declare class Renderer extends EventEmitting {
     updateSearchHighlights(ranges: Range[]): void;
     updateCustomElementHighlights(ranges: CustomElementInfo[]): void;
     updateActiveSearchHighlight(active: Range | CustomElementInfo): void;
+    updateGrammarHighlights(paragraphId: number, errors: GrammarError[]): void;
+    removeGrammarHighlights(paragraphId: number): void;
     updateDragAndDropSelection(range: Range | null): void;
     clearDragAndDropSelection(): void;
     setVisibility(isVisible: boolean): void;
@@ -66,6 +71,7 @@ export declare class Renderer extends EventEmitting {
     renderCursor(): void;
     renderSelection(): void;
     renderSearchHighlights(): void;
+    renderGrammarHighlights(): void;
     renderDragAndDropSelection(): void;
     private computeLayerConfig;
     private pagesCountChangedHandler;

package/lib/editor/display/virtual.renderer.d.ts

@@ -3,6 +3,7 @@ import { CursorParagraph } from '../positioning/cursor-paragraph';
 import { CustomElementInfo } from './custom-element-info.model';
 import { EdgesLayer } from './layers/edges.layer';
 import { EditSession } from '../execution/edit.session';
+import { GrammarError } from '../../models/generated/grammar-error';
 import { ILayerConfig } from './layers/layer.config';
 import { PagesLayer } from './layers/pages.layer';
 import { Range } from '../positioning/range';
@@ -50,6 +51,8 @@ export declare class VirtualRenderer {
     updateSearchHighlights(ranges: Range[]): void;
     updateCustomElementHighlights(ranges: CustomElementInfo[]): void;
     updateActiveSearchHighlight(active: Range | CustomElementInfo): void;
+    updateGrammarHighlights(paragraphIndex: number, errors: GrammarError[]): void;
+    removeGrammarHighlights(paragraphIndex: number): void;
     updateDragAndDropSelection(range: Range): void;
     clearDragAndDropSelection(): void;
     /**
@@ -81,5 +84,6 @@ export declare class VirtualRenderer {
     private renderCursor;
     private renderSelection;
     private renderSearchHighlights;
+    private renderGrammarHighlights;
     private renderDragAndDropSelection;
 }

package/lib/editor/execution/edit.session.d.ts

@@ -55,6 +55,7 @@ export declare class EditSession {
     nonTokenRe: RegExp;
     get scrollTop(): number;
     get scrollBarHeight(): number;
+    get paragraphInfoChanges$(): import("rxjs").Observable<import("../content/display-data/models/paragraph-info-added.model").ParagraphInfoAdded | import("../content/display-data/models/paragraph-info-content-changed.model").ParagraphInfoContentChanged | import("../content/display-data/models/paragraph-info-content-inserted.model").ParagraphInfoContentInserted | import("../content/display-data/models/paragraphs-infos-removed.model").ParagraphInfosRemoved>;
     constructor(displayData: DisplayData, sessionId: number, customContentService: CustomContentService, model: ContentType, selection: Selection, generalProperties: GeneralPropertiesModel, editorService: EditorService, customComponents: ICustomComponents, type: 'cell' | 'edge' | 'main' | 'cellWithinEdge', scrollBar?: ScrollBar, edgeType?: EdgeType);
     destroy(): void;
     getRowLength(row: number): number;

package/lib/editor/execution/editor.d.ts

@@ -12,6 +12,8 @@ import { EdgeType } from '../components/edges/edge-type.enum';
 import { EditorService } from '../interaction/editor.service';
 import { EditSession } from './edit.session';
 import { ElementDataModel } from '../components/external-element/models/element-data.model';
+import { GrammarChecker } from '../gadgets/grammar/grammar-checker';
+import { GrammarError } from '../../models/generated/grammar-error';
 import { ImageDataModel } from '../../models/generated/image-data.model';
 import { ImageModel } from '../../models/generated/image.model';
 import { InputHandler } from '../interaction/input.handler';
@@ -28,6 +30,7 @@ import { MoveRangeModel } from '../../models/generated/move-range.model';
 import { NumberingLevelModel } from '../../models/generated/numbering-level.model';
 import { Operation } from '../gadgets/history/operation.type';
 import { OperationHistory } from '../gadgets/history/operation-history';
+import { OverlayService } from '../components/shared/services/overlay.service';
 import { PageFormatModel } from '../../models/generated/page-format.model';
 import { PageType } from '../components/edges/page-type.enum';
 import { ParagraphModel } from '../../models/generated/paragraph.model';
@@ -49,6 +52,7 @@ export declare class Editor {
     private model;
     private container;
     private editorService;
+    private overlayService;
     private regulatorService;
     private commandsService;
     private clipboard;
@@ -67,6 +71,7 @@ export declare class Editor {
     get renderer(): Renderer | VirtualRenderer;
     get isViewOnly(): boolean;
     get targets(): TargetModel[];
+    get grammarChecker(): GrammarChecker;
     selection: Selection;
     mouseHandler: MouseHandler;
     touchHandler: TouchHandler;
@@ -80,7 +85,7 @@ export declare class Editor {
     private textInput;
     private clipboardData;
     private isRerenderSubscriptionOpen;
-    constructor(model: DocxModel, container: ElementRef<HTMLElement>, editorService: EditorService, regulatorService: RegulatorService, commandsService: CommandsService, clipboard: Clipboard, externalElementTagNames: string[], customPageWidth?: number);
+    constructor(model: DocxModel, container: ElementRef<HTMLElement>, editorService: EditorService, overlayService: OverlayService, regulatorService: RegulatorService, commandsService: CommandsService, clipboard: Clipboard, externalElementTagNames: string[], customPageWidth?: number);
     destroy(): void;
     selectPageDown(): void;
     selectPageUp(): void;
@@ -205,6 +210,7 @@ export declare class Editor {
     applyPageFormat(model: PageFormatModel): void;
     insertPageFormat(model: PageFormatModel): void;
     applyDocumentPageFormat(model: PageFormatModel): void;
+    applyGrammarSuggestion(error: GrammarError, paragraphIndex: number, suggestionIndex: number): void;
     receiveTextStyleSubscription(): Subscription;
     viewOnlyModeSubscription(): Subscription;
     applyLeftMarginPageFormatSubscription(): Subscription;
@@ -214,6 +220,8 @@ export declare class Editor {
     applyDocumentPageFormatSubscription(): Subscription;
     searchOptionSubscriptions(): Subscription[];
     replaceSubscription(): Subscription[];
+    grammarReplaceSubscription(): Subscription;
+    ignoreGrammarErrorSubscription(): Subscription;
     setTextStylesSubscription(): Subscription;
     setParagraphStylesSubscription(): Subscription;
     setNumberingTemplateTypeSubscription(): Subscription;

package/lib/editor/execution/regulator.service.d.ts

@@ -5,6 +5,8 @@ import { DocxModel } from '../../models/generated/docx.model';
 import { EditorService } from '../interaction/editor.service';
 import { EditSession } from './edit.session';
 import { GeneralPropertiesModel } from '../content/display-data/general-properties.model';
+import { GrammarChecker } from '../gadgets/grammar/grammar-checker';
+import { GrammarService } from '../gadgets/grammar/grammar.service';
 import { MarginModel } from '../content/margin.model';
 import { NoderEdgeComponent } from '../components/edges/edge.component';
 import { NoderTableCellComponent } from '../components/table/components/table-cell.component';
@@ -17,12 +19,14 @@ export declare class RegulatorService {
     private customContentService;
     private editorService;
     private componentService;
+    private grammarService;
     mainSession: SessionModel;
     sessions: SessionModel[];
     currentSession: SessionModel;
     selection: Selection;
     sessionIdIncrement: number;
-    constructor(customContentService: CustomContentService, editorService: EditorService, componentService: ComponentService);
+    readonly grammarChecker: GrammarChecker;
+    constructor(customContentService: CustomContentService, editorService: EditorService, componentService: ComponentService, grammarService: GrammarService);
     addMainSession(model: DocxModel, scalingRatio: number, container: ElementRef<HTMLElement>): void;
     addCellSession(table: TableModel, margins: MarginModel, component: NoderTableCellComponent, properties: GeneralPropertiesModel): SessionModel;
     addEdgeSession(component: NoderEdgeComponent): SessionModel;

package/lib/editor/gadgets/grammar/grammar-checker.d.ts

@@ -0,0 +1,21 @@
+import { GrammarError } from '../../../models/generated/grammar-error';
+import { GrammarService } from './grammar.service';
+import { SessionModel } from '../../../editor/execution/targeting/session.model';
+export declare class GrammarChecker {
+    private readonly grammarService;
+    private readonly ignoreKey;
+    private readonly paragraphSessionMap;
+    private readonly paragraphErrorMap;
+    private readonly sessionSubscriptions;
+    private readonly sessions;
+    private readonly ignoreList;
+    private readonly checkResultsSubscription;
+    constructor(grammarService: GrammarService);
+    registerSession(session: SessionModel): void;
+    unregisterSession(sessionId: number): void;
+    getError(sessionId: number, paragraphId: number, cursorIndex: number): GrammarError | null;
+    addErrorToIgnoreList(grammarError: GrammarError): void;
+    filterErrors(grammarErrors: GrammarError[]): GrammarError[];
+    destroy(): void;
+    private adjustHighlights;
+}

package/lib/editor/gadgets/grammar/grammar-popup/grammar-popup.component.d.ts

@@ -0,0 +1,16 @@
+import { EditorService } from '../../../interaction/editor.service';
+import { GrammarError } from '../../../../models/generated/grammar-error';
+import { OverlayService } from '../../../components/shared/services/overlay.service';
+import * as i0 from "@angular/core";
+export declare class GrammarPopupComponent {
+    private readonly editorService;
+    private readonly overlayService;
+    hostHeight: string;
+    error: GrammarError;
+    paragraphIndex: number;
+    constructor(editorService: EditorService, overlayService: OverlayService);
+    onSuggestionClick(index: number): void;
+    onIgnoreClick(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GrammarPopupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GrammarPopupComponent, "app-nod-grammar-popup", never, { "error": { "alias": "error"; "required": false; }; "paragraphIndex": { "alias": "paragraphIndex"; "required": false; }; }, {}, never, never, true, never>;
+}

package/lib/editor/gadgets/grammar/grammar.const.d.ts

@@ -0,0 +1 @@
+export declare const POPUP_HEIGHT = 150;

package/lib/editor/gadgets/grammar/grammar.service.d.ts

@@ -0,0 +1,25 @@
+import { GrammarError } from '../../../models/generated/grammar-error';
+import { ParagraphInfoModel } from '../../../editor/content/display-data/models/paragraph-info.model';
+import * as i0 from "@angular/core";
+export declare class GrammarService {
+    private readonly debounceTime;
+    private readonly paragraphSubjects;
+    private readonly debounceSubscriptions;
+    private readonly grammarCheckRequests;
+    get grammarCheckRequests$(): import("rxjs").Observable<{
+        id: string;
+        paragraph: string;
+    }>;
+    private readonly grammarCheckResults;
+    get grammarCheckResults$(): import("rxjs").Observable<{
+        paragraphId: string;
+        errors: GrammarError[];
+    }>;
+    updateParagraphContent(sessionId: number, paragraph: ParagraphInfoModel): void;
+    removeParagraph(sessionId: number, paragraphId: number): void;
+    publishGrammarCheckResults(paragraphId: string, errors: GrammarError[]): void;
+    destroy(): void;
+    private registerParagraph;
+    static ɵfac: i0.ɵɵFactoryDeclaration<GrammarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<GrammarService>;
+}

package/lib/editor/interaction/editor.service.d.ts

@@ -6,6 +6,7 @@ import { EdgeType } from '../components/edges/edge-type.enum';
 import { ElementDataModel } from '../components/external-element/models/element-data.model';
 import { ElementModel } from '../../models/generated/element.model';
 import { ExternalSidenavInterface } from '../components/external-element/external-sidenav.interface';
+import { GrammarError } from '../../models/generated/grammar-error';
 import { ImageDataModel } from '../../models/generated/image-data.model';
 import { ImageModel } from '../../models/generated/image.model';
 import { IToolbarStyles } from '../content/display-data/toolbar-styles.interface';
@@ -43,6 +44,16 @@ export declare class EditorService {
         data?: object;
     }>;
     private readonly _toggleSidenav$;
+    get displayGrammarError$(): Observable<GrammarError>;
+    private readonly _displayGrammarError$;
+    get applyGrammarSuggestion$(): Observable<{
+        error: GrammarError;
+        suggestionIndex: number;
+        paragraphIndex: number;
+    }>;
+    private readonly _applyGrammarSuggestion$;
+    get ignoreGrammarError$(): Observable<GrammarError>;
+    private readonly _ignoreGrammarError$;
     get displaySearchBar$(): Observable<boolean>;
     private readonly _displaySearchBar$;
     get searchTerm$(): Observable<string>;
@@ -276,6 +287,9 @@ export declare class EditorService {
     setDisplaySearchBar(show: boolean): void;
     setSearchResultCount(count: number): void;
     setCurrentSearchResultIndex(index: number): void;
+    showGrammarError(error: GrammarError): void;
+    applyGrammarSuggestion(error: GrammarError, suggestionIndex: number, paragraphIndex: number): void;
+    ignoreGrammarSuggestion(error: GrammarError): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<EditorService>;
 }

package/lib/models/generated/grammar-error.d.ts

@@ -0,0 +1,9 @@
+export declare class GrammarError {
+    length: number;
+    message: string;
+    offset: number;
+    replacements: string[];
+    text: string;
+    type: string;
+    constructor(fields?: Partial<GrammarError>);
+}

package/package.json

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

package/public-api.d.ts

@@ -16,6 +16,7 @@ export * from './lib/editor/components/shared/abstract/base.component';
 export * from './lib/editor/components/shared/abstract/destroy.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';
 export * from './lib/editor/operations/enums/command-type.enum';
 export * from './lib/editor/components/editor.component';
 export * from './lib/editor/editor.module';

package/src/_ngx-noder.theme.scss

@@ -4,11 +4,12 @@
 @use 'lib/apart-components/editor-title-mobile/editor-title-mobile.theme' as *;
 @use 'lib/apart-components/editor-title/editor-title.theme' as *;
 @use 'lib/apart-components/editor-toolbar/theme' as *;
-@use 'lib/apart-components//editor-search-bar/theme' as *;
+@use 'lib/apart-components/editor-search-bar/theme' as *;
 @use 'lib/apart-components/editor-ruler/theme' as *;
 @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/gadgets/grammar/grammar-popup/theme' as *;
 @use 'lib/editor/theme' as *;
 
 @mixin ngx-noder-theme($theme) {
@@ -19,6 +20,7 @@
     @include ngx-noder-toolbar-theme($theme);
     @include ngx-noder-insert-table-theme($theme);
     @include ngx-noder-editor-theme($theme);
+    @include ngx-noder-grammar-theme($theme);
 }
 
 @mixin ngx-noder-editor-theme($theme) {
@@ -39,6 +41,10 @@
     @include confirm-dialog-theme($theme);
 }
 
+@mixin ngx-noder-grammar-theme($theme) {
+    @include grammar-popup-theme($theme);
+}
+
 @mixin ngx-noder-title-theme($theme) {
     @include editor-title-component-theme($theme);
     @include editor-title-mobile-component-theme($theme);

package/src/lib/editor/gadgets/grammar/grammar-popup/_theme.scss

@@ -0,0 +1,26 @@
+@use '@angular/material' as mat;
+@use 'sass:map';
+
+@mixin grammar-popup-theme($theme) {
+    app-nod-grammar-popup {
+        background: map.get($theme, background-palette, dialog);
+
+        .message {
+            color: map.get($theme, foreground-palette, text);
+            border-bottom-color: map.get($theme, foreground-palette, noder-divider);
+        }
+
+        .suggestion {
+            color: map.get($theme, foreground-palette, grammar-suggestion);
+        }
+
+        .ignore {
+            color: map.get($theme, foreground-palette, secondary-text);
+
+            &:hover {
+                background-color: map.get($theme, foreground-palette, secondary-text);
+                color: map.get($theme, foreground-palette, noder-editor-header-text);
+            }
+        }
+    }
+}

package/src/scss/base-editor.scss

@@ -282,6 +282,12 @@ div.ngx-colors-overlay.noder-color-picker-overlay .opened .colors {
             }
         }
 
+        &.grammar-highlight {
+            >.noder-highlight {
+                border-bottom: dashed rgb(255, 18, 18) 1px;
+            }
+        }
+
         &.text-search-highlight {
             >.noder-highlight {
                 background-color: rgb(255, 255, 0, 0.4);