Merge pull request #27 from fsegurai/development

fix/improved markdown rendering component
fix/unit tests

demo/src/app/get-started/get-started.component.html

@@ -1,5 +1,5 @@
 <app-scrollspy-nav-layout [headings]="headings">
   <h1 id="getting-started">Get Started</h1>
-  <markdown (load)="onLoad()" emoji
+  <markdown (load)="onLoad()" [emoji]="true"
             src="https://raw.githubusercontent.com/fsegurai/ngx-markdown/main/README.md"></markdown>
 </app-scrollspy-nav-layout>

demo/src/app/playground/playground.component.html

@@ -2,25 +2,24 @@
   <h1>Playground</h1>
 
   <section>
-    <h2>Markdown</h2>
-
     <div class="playground">
       <mat-form-field class="editor">
         <mat-label>Textarea</mat-label>
         <textarea matInput [(ngModel)]="markdownContent"></textarea>
       </mat-form-field>
 
       <markdown
+        (ready)="onLoad()"
         class="markdown"
         [disableSanitizer]="true"
-        lineNumbers
+        [lineNumbers]="true"
         [start]="1"
-        emoji
-        katex
+        [emoji]="true"
+        [katex]="true"
         [katexOptions]="katexOptions"
-        mermaid
+        [mermaid]="true"
         [mermaidOptions]="mermaidOptions"
-        clipboard
+        [clipboard]="true"
         [clipboardLanguageButton]="true"
         [data]="markdownRendering"
         [routerLinkOptions]="{

demo/src/app/playground/playground.component.ts

@@ -1,10 +1,4 @@
-import {
-  ChangeDetectionStrategy, ChangeDetectorRef,
-  Component,
-  ElementRef,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit } from '@angular/core';
 import { FlexModule } from '@angular/flex-layout/flex';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -74,23 +68,35 @@ export default class PlaygroundComponent implements OnInit, OnDestroy {
   }
 
   ngOnInit(): void {
-    this.setHeadings();
-
     this.updateMarkdownRendering();
   }
 
   ngOnDestroy(): void {
     this.headings = undefined;
   }
 
+  onLoad(): void {
+    this.stripContent();
+    this.setHeadings();
+  }
+
   private setHeadings(): void {
     const headings: Element[] = [];
     this.elementRef.nativeElement
       .querySelectorAll('h2')
-      .forEach(x => headings.push(x));
+      .forEach((x) => headings.push(x));
     this.headings = headings;
   }
 
+  private stripContent(): void {
+    this.elementRef.nativeElement
+      .querySelector('markdown')!
+      .querySelectorAll(
+        'markdown > p:nth-child(-n + 2), #ngx-markdown, #table-of-contents + ul, #table-of-contents',
+      )
+      .forEach((x) => x.remove());
+  }
+
   private updateMarkdownRendering(): void {
     this.markdownRendering = this.markdownContent;