Checkboxes Fix for SafeValue content

src/app/github-link-area/github-link-area.component.html

@@ -1 +1 @@
-<div [innerHTML]="content | safe: 'html'"></div>
+<div [innerHTML]="content"></div>

src/app/github-link-area/github-link-area.component.ts

@@ -10,7 +10,7 @@ import {
   Output,
   EventEmitter
 } from '@angular/core';
-
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { GitHubLinkService } from './github-link.service';
 
 /**
@@ -31,12 +31,13 @@ import { GitHubLinkService } from './github-link.service';
 })
 export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
 
-  @Input('content') content: string;
+  @Input('content') content: string | SafeHtml;
   @Output('onInputEvent') onInputEvent = new EventEmitter();
 
   constructor(
     private gitHubLinkService: GitHubLinkService,
-    private elementRef: ElementRef) {}
+    private elementRef: ElementRef,
+    private sanitizer: DomSanitizer) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes && changes.content) {
@@ -104,18 +105,35 @@ export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
     }
   }
 
+  wrapStringSafeValue(input: string | SafeHtml): SafeHtml {
+    if (typeof input === 'string')
+      return this.sanitizer.bypassSecurityTrustHtml(input);
+    else
+      return input;
+  }
+
+  unwrapStringSafeValue(input: any): any {
+    if (typeof input === 'string')
+      return input;
+    else
+      return input['changingThisBreaksApplicationSecurity'];
+  }
+
   /*
    * Replaces the match (which should be the default icon) with an icon that
    * indicates the status contained in linkData.
    */
   replaceLink(linkData: any): void {
-    this.content = this.content.split(linkData.match).join(
-      // tslint:disable-next-line:max-line-length
-      (linkData.state === 'open' ? '<span class="fa fa-clock-o gh-link-open" tooltip="Issue Open"></span>' : '') +
-      (linkData.state === 'closed' ? '<span class="fa fa-check gh-link-closed" tooltip="Issue Closed"></span>' : '') +
-      ((linkData.state !== 'open' && linkData.state !== 'closed') ?
-      // tslint:disable-next-line:max-line-length
-      '<span class="fa pficon-warning-triangle-o gh-link-error" tooltip="Issue State Unknown"></span>' : '')
+    this.content = this.wrapStringSafeValue(
+      this.unwrapStringSafeValue(this.content).split(linkData.match).join(
+        // tslint:disable-next-line:max-line-length
+        (linkData.state === 'open' ? '<span class="fa fa-clock-o gh-link-open" tooltip="Issue Open"></span>' : '') +
+        // tslint:disable-next-line:max-line-length
+        (linkData.state === 'closed' ? '<span class="fa fa-check gh-link-closed" tooltip="Issue Closed"></span>' : '') +
+        ((linkData.state !== 'open' && linkData.state !== 'closed') ?
+        // tslint:disable-next-line:max-line-length
+        '<span class="fa pficon-warning-triangle-o gh-link-error" tooltip="Issue State Unknown"></span>' : '')
+      )
     );
   }
 
@@ -131,12 +149,13 @@ export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
     // additional classes etc.; if a markdown compiler (or some other content source)
     // creates different links to GitHub, this regexp needs to be extended to match
     // those formats.
+    let thisContent = this.unwrapStringSafeValue(this.content);
     let regexp: RegExp = new RegExp(
       '<a href="https:\/\/github.com\/([^\/]+)\/([^\/]+)\/issues\/([^"]+)[^<]*">([^<]+)<\/a>', 'gi'
     );
-    let result = regexp.exec(this.content);
+    let result = regexp.exec(thisContent);
     while (result) {
-      this.content = this.content.split(result[0])
+      thisContent = thisContent.split(result[0])
         .join('<a class="gh-link" href="https://github.com/' +
           result[1] + '/' +
           result[2] + '/' +
@@ -149,8 +168,9 @@ export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
             'data-gh-issue="' + result[3] + '" ' +
           'class="pficon pficon-warning-triangle-o gh-link-error"></span>' +
           '</a>');
-      result = regexp.exec(this.content);
+      result = regexp.exec(thisContent);
     }
+    this.content = this.wrapStringSafeValue(thisContent);
   }
 
   /*
@@ -159,11 +179,12 @@ export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
    * GitHubLinkService to use caching.
    */
   updateLinks(): void {
+    let thisContent = this.unwrapStringSafeValue(this.content);
     let regexp: RegExp = new RegExp(
       // tslint:disable-next-line:max-line-length
       '<span data-gh-org="([^"]+)" data-gh-repo="([^"]+)" data-gh-issue="([^"]+)" class="pficon pficon-warning-triangle-o gh-link-error"></span>', 'gi'
     );
-    let result = regexp.exec(this.content);
+    let result = regexp.exec(thisContent);
     while (result) {
       let thisLinkData = {
         match: result[0],
@@ -177,7 +198,7 @@ export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
           thisLinkData.state = data['state'];
           this.replaceLink(thisLinkData);
         });
-      result = regexp.exec(this.content);
+      result = regexp.exec(thisContent);
     }
   }
 

src/app/github-link-area/github-link-area.module.ts

@@ -4,15 +4,14 @@ import { HttpClientModule } from '@angular/common/http';
 
 import { GitHubLinkService } from './github-link.service';
 import { GitHubLinkAreaComponent } from './github-link-area.component';
-import { SafePipe } from './safe.pipe';
 
 /**
  * A module containing objects associated with the GitHubLinkArea component
  */
 @NgModule({
   imports: [ CommonModule, HttpClientModule ],
-  declarations: [ GitHubLinkAreaComponent, SafePipe ],
+  declarations: [ GitHubLinkAreaComponent ],
   providers: [ GitHubLinkService ],
-  exports: [ GitHubLinkAreaComponent, SafePipe ]
+  exports: [ GitHubLinkAreaComponent ]
 })
 export class GitHubLinkAreaModule { }

src/app/markdown/examples/markdown-example.component.html

@@ -10,7 +10,7 @@
     <div class="col-xs-12">
       <f8-markdown
         [rawText]="rawText"
-        [renderedText]="renderedText"
+        [renderedText]="renderedText | safe: 'html'"
         (onSaveClick)="onSaveOrPreview($event)"
         (showPreview)="onSaveOrPreview($event)">
       </f8-markdown>

src/app/markdown/examples/markdown-example.component.ts

@@ -1,17 +1,42 @@
-import { Component, ViewEncapsulation, ElementRef } from '@angular/core';
-import { DomSanitizer } from '@angular/platform-browser';
+import { Component, ViewEncapsulation, ElementRef, Pipe, PipeTransform } from '@angular/core';
+import {
+  DomSanitizer,
+  SafeHtml,
+  SafeStyle,
+  SafeScript,
+  SafeUrl,
+  SafeResourceUrl
+} from '@angular/platform-browser';
 
 const markdownIt = require('markdown-it');
 const markdown = new markdownIt();
 
+@Pipe({
+  name: 'safe'
+})
+export class SafePipe implements PipeTransform {
+
+ constructor(protected sanitizer: DomSanitizer) {}
+
+ public transform(value: any, type: string):
+  SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
+    switch (type) {
+      case 'html': return this.sanitizer.bypassSecurityTrustHtml(value);
+      case 'style': return this.sanitizer.bypassSecurityTrustStyle(value);
+      case 'script': return this.sanitizer.bypassSecurityTrustScript(value);
+      case 'url': return this.sanitizer.bypassSecurityTrustUrl(value);
+      case 'resourceUrl': return this.sanitizer.bypassSecurityTrustResourceUrl(value);
+      default: throw new Error(`Invalid safe type specified: ${type}`);
+    }
+  }
+}
+
 @Component({
   encapsulation: ViewEncapsulation.None,
   selector: 'markdown-example',
   styleUrls: ['./markdown-example.component.less'],
   templateUrl: './markdown-example.component.html'
 })
-
-
 export class MarkdownExampleComponent {
 
     private renderedText: string = '<h1>hello, markdown!\</h1><ul>' +
@@ -25,6 +50,8 @@ export class MarkdownExampleComponent {
   private rawText: string = '# hello, markdown!\n* [ ] Item 1\n* [x] Item 2\n* [ ] Item 3';
   private allowEdit = false;
 
+  constructor(private sanitizer: DomSanitizer) {}
+
   onSaveOrPreview(value: any) {
     const rawText = value.rawText;
     const callBack = value.callBack;
@@ -59,7 +86,7 @@ export class MarkdownExampleComponent {
       }
       // tslint:disable-next-line:max-line-length
       console.log('MarkdownExampleComponent: Rendering on service side completed, sending to component: ' + text);
-      callBack(rawText, text);
+      callBack(rawText, this.sanitizer.bypassSecurityTrustHtml(text));
     }, 2000);
   }
 

src/app/markdown/examples/markdown-example.module.ts

@@ -1,12 +1,13 @@
 import { NgModule }  from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterModule } from '@angular/router';
-import { MarkdownExampleComponent } from './markdown-example.component';
+import { MarkdownExampleComponent, SafePipe } from './markdown-example.component';
 import { MarkdownModule } from './../markdown.module';
+import { GitHubLinkAreaModule } from '../../github-link-area/github-link-area.module';
 
 @NgModule({
-  declarations: [ MarkdownExampleComponent ],
-  imports: [ CommonModule, RouterModule, MarkdownModule ]
+  declarations: [ MarkdownExampleComponent, SafePipe ],
+  imports: [ CommonModule, RouterModule, MarkdownModule, GitHubLinkAreaModule ]
 })
 export class MarkdownExampleModule {
   constructor() {}

src/app/markdown/markdown.component.html

@@ -24,12 +24,12 @@
       [innerText]="rawText">
     </p>
     <div #editorBox #previewArea
-      *ngIf="viewType==='preview' && renderedText.length"
+      *ngIf="viewType==='preview' && ( renderedText.length || ( renderedText.changingThisBreaksApplicationSecurity && renderedText.changingThisBreaksApplicationSecurity.length ) )"
       class="editor-box editor-preview markdown-rendered">
         <github-link-area [content]="renderedText" (onInputEvent)="onInputEvent($event)"></github-link-area>
     </div>
     <div #editorBox
-      *ngIf="viewType==='preview' && !renderedText.length"
+      *ngIf="viewType==='preview' && !renderedText.length && (!renderedText.changingThisBreaksApplicationSecurity || !renderedText.changingThisBreaksApplicationSecurity.length)"
       class="editor-box editor-preview placeholder">
       {{placeholder}}
     </div>