diff --git a/src/app/markdown/markdown.component.spec.ts b/src/app/markdown/markdown.component.spec.ts index 455b498..ebd27e8 100644 --- a/src/app/markdown/markdown.component.spec.ts +++ b/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); + }); }); diff --git a/src/app/markdown/markdown.component.ts b/src/app/markdown/markdown.component.ts index d82e64f..36e19fc 100644 --- a/src/app/markdown/markdown.component.ts +++ b/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;