fix(color-picker): attempt to fix nondeterministic color-picker bug l…

…ogic rewriting

projects/ngx-simple-text-editor/src/lib/components/editor-color-picker/editor-color-picker.component.html

@@ -1,6 +1,6 @@
 <button class="st-button st-toolbar-item" [title]="button?.title || ''" (stAction)="colorPicker.showPicker()">
   {{rgbStringToHex(state)}}
   <input #colorPicker class="st-color-picker" type="color" [ngModel]="rgbStringToHex(state)" tabindex="-1"
-         (change)="onCommand(button?.command, $event.target.value)" onmousedown='return false;' onselectstart='return false;'>
+         (stNgModelChangeDebounced)="onCommand(button?.command, $event)">
   <i [class]="button?.icon" [style.color]="state"></i>
 </button>

projects/ngx-simple-text-editor/src/lib/directives/ng-model-change-debounced.directive.spec.ts

@@ -0,0 +1,38 @@
+import { NgModelChangeDebouncedDirective } from './ng-model-change-debounced.directive';
+import {from, of} from "rxjs";
+import {NgModel} from "@angular/forms";
+import {fakeAsync, flush} from "@angular/core/testing";
+
+describe('NgModelChangeDebouncedDirective', () => {
+
+  it('should create an instance', () => {
+    const ngModel = {control: {valueChanges: of()}} as NgModel;
+
+    const directive = new NgModelChangeDebouncedDirective(ngModel);
+
+    expect(directive).toBeTruthy();
+  });
+
+  it('should emit debounced ngChange event', fakeAsync(() => {
+    const ngModel = {control: {valueChanges: from([null, '1', '2'])}} as NgModel;
+    const directive = new NgModelChangeDebouncedDirective(ngModel);
+    directive.stNgModelChangeDebounced.emit = jasmine.createSpy();
+
+    directive.ngOnInit();
+
+    expect(directive.stNgModelChangeDebounced.emit).toHaveBeenCalledWith('2');
+    flush();
+  }));
+
+  it('should unsubscribe from ngModel', () => {
+    const unsubscribe = jasmine.createSpy();
+    const observable = {subscribe: () => ({unsubscribe})};
+    const ngModel = {control: {valueChanges: {pipe: () =>  observable}}} as unknown as NgModel;
+    const directive = new NgModelChangeDebouncedDirective(ngModel);
+    directive.ngOnInit();
+
+    directive.ngOnDestroy();
+
+    expect(unsubscribe).toHaveBeenCalled();
+  });
+});

projects/ngx-simple-text-editor/src/lib/directives/ng-model-change-debounced.directive.ts

@@ -0,0 +1,31 @@
+import {Directive, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
+import {NgModel} from "@angular/forms";
+import {Subscription} from "rxjs";
+import {debounceTime, distinctUntilChanged, skip} from "rxjs/operators";
+
+const DEBOUNCE_TIME_MS = 100;
+
+@Directive({
+  selector: '[stNgModelChangeDebounced]',
+})
+export class NgModelChangeDebouncedDirective implements OnInit, OnDestroy {
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Output() stNgModelChangeDebounced = new EventEmitter<any>();
+  private subscription: Subscription;
+
+  constructor(private readonly ngModel: NgModel) {}
+
+  ngOnInit(): void {
+    this.subscription = this.ngModel.control.valueChanges.pipe(
+      skip(1),
+      distinctUntilChanged(),
+      debounceTime(DEBOUNCE_TIME_MS)
+    ).subscribe((value) => this.stNgModelChangeDebounced.emit(value));
+  }
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+}

projects/ngx-simple-text-editor/src/lib/ngx-simple-text-editor.module.ts

@@ -11,6 +11,7 @@ import { DomModifyDirective } from './directives/dom-modify.directive';
 import { SelectionChangeDirective } from './directives/selection-change.directive';
 import { EditorDropdownComponent } from './components/editor-dropdown/editor-dropdown.component';
 import {ActionDirective} from "./directives/action.directive";
+import {NgModelChangeDebouncedDirective} from "./directives/ng-model-change-debounced.directive";
 
 
 
@@ -26,6 +27,7 @@ import {ActionDirective} from "./directives/action.directive";
     SelectionChangeDirective,
     EditorDropdownComponent,
     ActionDirective,
+    NgModelChangeDebouncedDirective,
   ],
   imports: [
     CommonModule,