fix(markdown): emit event on outside-click if no data changed (#157)

* fix(markdown): add emit event on outside-click

* fix(test): add test for outside-click event

Author: divyanshiGupta

src/app/markdown/markdown.component.spec.ts

@@ -20,8 +20,7 @@ describe('Markdown component - ', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [ FormsModule, MarkdownModule, BrowserModule ],
-      declarations: [ ]
+      imports: [ FormsModule, MarkdownModule, BrowserModule ]
     })
       .compileComponents()
       .then(() => {
@@ -116,4 +115,11 @@ describe('Markdown component - ', () => {
     comp.saveClick();
     expect(comp.onSaveClick.emit).toHaveBeenCalled();
   });
+
+  it('should emit onClickOut when clicked outside', () => {
+    spyOn(comp.onClickOut, 'emit');
+    comp.onClick(fixture.nativeElement);
+    comp.onClick(document.body);
+    expect(comp.onClickOut.emit).toHaveBeenCalledTimes(1);
+  });
 });

src/app/markdown/markdown.component.ts

@@ -4,6 +4,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  HostListener,
   Input,
   OnChanges,
   OnInit,
@@ -45,6 +46,23 @@ export class MarkdownComponent implements OnChanges, OnInit, AfterViewChecked {
   @Output() onSaveClick = new EventEmitter();
   @Output() showPreview = new EventEmitter();
   @Output() onCloseClick = new EventEmitter();
+  @Output() onClickOut = new EventEmitter();
+
+  @HostListener('document:click', ['$event.target'])
+  onClick(target: HTMLElement): void {
+    if (!target) {
+      return;
+    }
+    const clickedInside = this.elementRef.nativeElement.contains(target);
+
+    if (this.editorInput) {
+      this.isNoDataChanged = this.editorInput.nativeElement.innerText.trim() === this.rawText;
+    }
+
+    if (!clickedInside) {
+      this.onClickOut.emit(this.isNoDataChanged);
+    }
+  }
 
   @ViewChild('editorInput') editorInput: ElementRef;
   @ViewChild('editorBox') editorBox: ElementRef;
@@ -57,6 +75,7 @@ export class MarkdownComponent implements OnChanges, OnInit, AfterViewChecked {
   rawText = '';
   fieldEmpty: boolean = true;
   previousRawText = '';
+  isNoDataChanged: boolean = false;
 
   private markdownViewExpanded: boolean = false;
   private tabBarVisible: boolean = true;