Fix MarkdownPipe rendering

jfcere · Jun 21, 2018 · 977afd1 · 977afd1
1 parent 7735bba
commit 977afd1
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 26 deletions.
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { Component, HostListener, OnInit } from '@angular/core';
 import { MarkdownService } from 'ngx-markdown';
-import { Observable, of } from 'rxjs';
+import { of } from 'rxjs';
 import { delay, first, tap } from 'rxjs/operators';
 
 

diff --git a/lib/src/markdown.component.spec.ts b/lib/src/markdown.component.spec.ts
@@ -15,7 +15,6 @@ class MockMarkdownService {
 describe('MarkdownComponent', () => {
   let fixture: ComponentFixture<MarkdownComponent>;
   let component: MarkdownComponent;
-  let nativeElement: any;
   let markdownService: MarkdownService;
 
   beforeEach(async(() => {
@@ -33,7 +32,6 @@ describe('MarkdownComponent', () => {
     markdownService = TestBed.get(MarkdownService);
     fixture = TestBed.createComponent(MarkdownComponent);
     component = fixture.componentInstance;
-    nativeElement = fixture.nativeElement;
     fixture.detectChanges();
   });
 

diff --git a/lib/src/markdown.module.spec.ts b/lib/src/markdown.module.spec.ts
@@ -1,15 +1,9 @@
 import { CommonModule } from '@angular/common';
-import {
-  HttpClientTestingModule,
-  HttpTestingController,
-} from '@angular/common/http/testing';
-import { Component, DebugElement } from '@angular/core';
+import { Component } from '@angular/core';
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 
 import { MarkdownModule } from './markdown.module';
-import { errorSrcWithoutHttpClient, MarkdownService } from './markdown.service';
-import { MarkedOptions } from './marked-options';
+import { errorSrcWithoutHttpClient } from './markdown.service';
 
 @Component({
   // tslint:disable-next-line:component-selector

diff --git a/lib/src/markdown.module.ts b/lib/src/markdown.module.ts
@@ -1,4 +1,3 @@
-import { HttpClientModule } from '@angular/common/http';
 import { ModuleWithProviders, NgModule, Provider } from '@angular/core';
 
 import { LanguagePipe } from './language.pipe';

diff --git a/lib/src/markdown.pipe.spec.ts b/lib/src/markdown.pipe.spec.ts
@@ -41,19 +41,17 @@ describe('MarkdownPipe', () => {
     });
   });
 
-  it('should apply synthax highlight', fakeAsync(() => {
+  it('should apply synthax highlight when zone is stable', fakeAsync(() => {
 
     const markdown = '# Markdown';
 
     spyOn(markdownService, 'highlight');
-    spyOn(zone, 'runOutsideAngular').and.callFake(func => func());
 
-    const result = pipe.transform(markdown);
+    pipe.transform(markdown);
 
-    expect(zone.runOutsideAngular).toHaveBeenCalled();
     expect(markdownService.highlight).not.toHaveBeenCalled();
 
-    tick();
+    zone.onStable.emit(null);
 
     expect(markdownService.highlight).toHaveBeenCalled();
   }));
@@ -64,7 +62,6 @@ describe('MarkdownPipe', () => {
     const mockCompiled = 'compiled-x';
 
     spyOn(markdownService, 'compile').and.returnValue(mockCompiled);
-    spyOn(zone, 'runOutsideAngular');
 
     const result = pipe.transform(markdown);
 

diff --git a/lib/src/markdown.pipe.ts b/lib/src/markdown.pipe.ts
@@ -1,4 +1,5 @@
 import { NgZone, Pipe, PipeTransform } from '@angular/core';
+import { first } from 'rxjs/operators';
 
 import { MarkdownService } from './markdown.service';
 
@@ -20,10 +21,9 @@ export class MarkdownPipe implements PipeTransform {
 
     const markdown = this.markdownService.compile(value);
 
-    this.zone.runOutsideAngular(() => {
-      // glitch in the UI... need a better way to handle this!
-      setTimeout(() => this.markdownService.highlight());
-    });
+    this.zone.onStable
+      .pipe(first())
+      .subscribe(() => this.markdownService.highlight());
 
     return markdown;
   }

diff --git a/lib/src/markdown.service.ts b/lib/src/markdown.service.ts
@@ -1,11 +1,9 @@
 import { HttpClient } from '@angular/common/http';
-import { Inject, Injectable, Optional } from '@angular/core';
+import { Injectable, Optional } from '@angular/core';
 import { parse, Renderer } from 'marked';
-import { Observable, throwError } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 
 import { MarkedOptions } from './marked-options';
-import { MarkedRenderer } from './marked-renderer';
 
 declare var Prism: {
   highlightAll: (async: boolean) => void;