From 45d6ca6166f744ba35af169d18a93eca6ef39656 Mon Sep 17 00:00:00 2001
From: Dan Percic <dan@devplant.ro>
Date: Fri, 26 May 2023 00:27:53 +0300
Subject: [PATCH] RED-6786: faster text editor

---
 .../dictionary-manager.component.html         |  1 +
 .../dictionary-manager.component.ts           |  2 +-
 .../components/editor/editor.component.html   |  4 +-
 .../components/editor/editor.component.ts     | 57 ++++++++++++-------
 4 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
index 2d2e5c915..949b9c22a 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.html
@@ -94,6 +94,7 @@
     <div *ngIf="withFloatingActions && !!editor?.hasChanges && canEdit && !isLeavingPage" [class.offset]="compare" class="changes-box">
         <iqser-icon-button
             (action)="saveDictionary.emit()"
+            [disabled]="!!(_loadingService.isLoading$ | async)"
             [label]="'dictionary-overview.save-changes' | translate"
             [type]="iconButtonTypes.primary"
             icon="iqser:check"
diff --git a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
index 400505810..70f098cc1 100644
--- a/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/dictionary-manager/dictionary-manager.component.ts
@@ -56,7 +56,7 @@ export class DictionaryManagerComponent implements OnChanges {
     constructor(
         private readonly _dictionaryService: DictionaryService,
         private readonly _dictionariesMapService: DictionariesMapService,
-        private readonly _loadingService: LoadingService,
+        protected readonly _loadingService: LoadingService,
         private readonly _changeRef: ChangeDetectorRef,
         readonly activeDossiersService: ActiveDossiersService,
         readonly dossierTemplatesService: DossierTemplatesService,
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
index 0a113be28..10abee1e3 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.html
@@ -1,10 +1,10 @@
 <ngx-monaco-editor
     (init)="onCodeEditorInit($event)"
-    (ngModelChange)="codeEditorTextChanged()"
+    (ngModelChange)="_editorTextChanged$.next($event)"
+    (paste)="onPaste()"
     *ngIf="!showDiffEditor"
     [(ngModel)]="value"
     [options]="editorOptions"
-    (paste)="onPaste()"
 ></ngx-monaco-editor>
 
 <ngx-monaco-diff-editor
diff --git a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
index 614474f8c..2fe8dbf3d 100644
--- a/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
+++ b/apps/red-ui/src/app/modules/shared/components/editor/editor.component.ts
@@ -1,6 +1,8 @@
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
-import { Debounce, List, LoadingService, OnChange } from '@iqser/common-ui';
+import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { List, LoadingService, OnChange } from '@iqser/common-ui';
 import { EditorThemeService } from '@services/editor-theme.service';
+import { debounceTime, filter, tap } from 'rxjs/operators';
+import { Subject, Subscription } from 'rxjs';
 import IStandaloneEditorConstructionOptions = monaco.editor.IStandaloneEditorConstructionOptions;
 import ICodeEditor = monaco.editor.ICodeEditor;
 import IDiffEditor = monaco.editor.IDiffEditor;
@@ -25,7 +27,7 @@ const notZero = (lineChange: ILineChange) => lineChange.originalEndLineNumber !=
     templateUrl: './editor.component.html',
     styleUrls: ['./editor.component.scss'],
 })
-export class EditorComponent implements OnInit, OnChanges {
+export class EditorComponent implements OnInit, OnChanges, OnDestroy {
     @Input() showDiffEditor = false;
     @Input() diffEditorText: string;
     @Input() @OnChange<List, EditorComponent>('revert') initialEntries: List;
@@ -39,10 +41,25 @@ export class EditorComponent implements OnInit, OnChanges {
     editorOptions: IStandaloneEditorConstructionOptions = {};
     codeEditor: ICodeEditor;
     value: string;
+    protected readonly _editorTextChanged$ = new Subject<string>();
     private _diffEditor: IDiffEditor;
     private _decorations: string[] = [];
+    private readonly _sub$ = new Subscription();
+    private _initialEntriesSet = new Set<string>();
 
-    constructor(private readonly _loadingService: LoadingService, private readonly _editorThemeService: EditorThemeService) {}
+    constructor(private readonly _loadingService: LoadingService, private readonly _editorThemeService: EditorThemeService) {
+        const textChanged$ = this._editorTextChanged$.pipe(
+            debounceTime(300), // prevent race condition with onPaste event
+            filter(text => text.length > 0),
+            tap(newText => {
+                const newDecorations = this._getDecorations(newText);
+                this._decorations = this.codeEditor.deltaDecorations(this._decorations, newDecorations);
+                this.diffValue = this.value;
+                this._loadingService.stop();
+            }),
+        );
+        this._sub$.add(textChanged$.subscribe());
+    }
 
     get currentEntries(): string[] {
         return this.value.split('\n');
@@ -56,6 +73,10 @@ export class EditorComponent implements OnInit, OnChanges {
         return this.currentEntries.length;
     }
 
+    ngOnDestroy() {
+        this._sub$.unsubscribe();
+    }
+
     ngOnChanges(changes: SimpleChanges) {
         if (changes.diffEditorText) {
             this._diffEditor?.getOriginalEditor().setValue(this.diffEditorText);
@@ -91,21 +112,17 @@ export class EditorComponent implements OnInit, OnChanges {
         this._setTheme();
     }
 
-    @Debounce()
-    codeEditorTextChanged() {
-        const newDecorations = this._getDecorations();
-        this._decorations = this.codeEditor.deltaDecorations(this._decorations, newDecorations);
-        this.diffValue = this.value;
-        this._loadingService.stop();
-    }
-
-    _getDecorations() {
-        const currentEntries = this.currentEntries;
+    _getDecorations(text: string) {
+        const currentEntries = text.split('\n');
         const newDecorations: IModelDeltaDecoration[] = [];
 
-        for (let index = 0; index < currentEntries.length; ++index) {
-            const entry = currentEntries.at(index);
-            if (!this._isNew(entry)) {
+        for (let index = 0; index < currentEntries.length; index++) {
+            const entry = currentEntries.at(index)?.trim();
+            if (!entry || entry.length === 0) {
+                continue;
+            }
+
+            if (this._initialEntriesSet.has(entry)) {
                 continue;
             }
 
@@ -118,8 +135,10 @@ export class EditorComponent implements OnInit, OnChanges {
 
     revert() {
         this.value = this.initialEntries.join('\n');
+        this._initialEntriesSet = new Set<string>(this.initialEntries);
         this.diffValue = this.value;
         this._diffEditor?.getModifiedEditor().setValue(this.diffValue);
+        this._editorTextChanged$.next(this.value);
     }
 
     onPaste() {
@@ -178,10 +197,6 @@ export class EditorComponent implements OnInit, OnChanges {
         });
     }
 
-    private _isNew(entry: string): boolean {
-        return this.initialEntries.indexOf(entry) < 0 && entry?.trim().length > 0;
-    }
-
     private _getDecoration(entry: string, line: number): IModelDeltaDecoration {
         const cssClass = entry.length < MIN_WORD_LENGTH ? 'too-short-marker' : 'changed-row-marker';
         const range = new monaco.Range(line, 1, line, 1);