feat(checkboxes): Added checkbox support for Markdown.

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

@@ -8,7 +8,7 @@ <h4>GitHubLink Component Example</h4>
   <div class="row">
     <div class="col-sm-12">
       <div class="form-group">
-        <github-link-area [content]="content"></github-link-area>
+        <github-link-area [content]="content" (onInputEvent)="inputEvent($event)"></github-link-area>
       </div>
     </div>
   </div>

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

@@ -20,16 +20,30 @@ import {
 })
 export class GitHubLinkAreaExampleComponent implements OnInit {
 
-  content: string = `There is some text in here
-    <a href="https://github.com/patternfly/patternfly-ng/issues/127">https://github.com/patternfly/patternfly-ng/issues/127</a>. 
+  content: string = `There is some text in here.
+    And some checkboxes:<ul>
+    <li><input type="checkbox" data-checkbox-index="0"></input>An Item.</li>
+    <li><input type="checkbox" checked="" data-checkbox-index="1"></input>Checked Item.</li>
+    </ul>
+    For input events, see the browser console.<br>
+    <a href="https://github.com/patternfly/patternfly-ng/issues/127">
+    https://github.com/patternfly/patternfly-ng/issues/127</a>.
     And some more text. And another issue link:
-    <a href="https://github.com/patternfly/patternfly-ng/issues/111" rel="nofollow">https://github.com/patternfly/patternfly-ng/issues/111</a>.
+    <a href="https://github.com/patternfly/patternfly-ng/issues/111" rel="nofollow">
+    https://github.com/patternfly/patternfly-ng/issues/111</a>.
     And for testing purposes, the same link as the first as a dupe:
-    <a href="https://github.com/patternfly/patternfly-ng/issues/127" rel="nofollow">https://github.com/patternfly/patternfly-ng/issues/127</a>.
-    Note: the link html formatting is following the currently used OSIO server side link markdown formatting. It may need changes
+    <a href="https://github.com/patternfly/patternfly-ng/issues/127" rel="nofollow">
+    https://github.com/patternfly/patternfly-ng/issues/127</a>.
+    Note: the link html formatting is following the currently used OSIO server 
+    side link markdown formatting. It may need changes
     if used with a different markdown compiler`;
 
   constructor() {}
 
   ngOnInit(): void {}
+
+  inputEvent(event: any) {
+    console.log('Input Event detected on input type: ' + event.type + 
+      ' with index ' + event.extraData);
+  }
 }

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

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

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

@@ -5,7 +5,10 @@ import {
   OnChanges,
   SimpleChanges,
   ViewChild,
-  ElementRef
+  ElementRef,
+  AfterViewChecked,
+  Output,
+  EventEmitter
 } from '@angular/core';
 
 import { GitHubLinkService } from './github-link.service';
@@ -26,18 +29,25 @@ import { GitHubLinkService } from './github-link.service';
     `],
   templateUrl: './github-link-area.component.html'
 })
-export class GitHubLinkAreaComponent implements OnChanges {
+export class GitHubLinkAreaComponent implements OnChanges, AfterViewChecked {
 
   @Input('content') content: string;
+  @Output('onInputEvent') onInputEvent = new EventEmitter();
 
-  constructor(private gitHubLinkService: GitHubLinkService) {}
+  constructor(
+    private gitHubLinkService: GitHubLinkService,
+    private elementRef: ElementRef) {}
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes && changes.content) {
       this.updateOnChanges();
     }
   }
 
+  ngAfterViewChecked(): void {
+    this.instrumentInputs();
+  }
+
   /*
    * Because Angular testing is broken, we need to be able to call
    * this from a test. See reason here:
@@ -48,6 +58,52 @@ export class GitHubLinkAreaComponent implements OnChanges {
     this.updateLinks();
   }
 
+  /*
+   * Instruments the input elements in the content. This is used to report
+   * any interaction with inputs back to the parent using Outputs. This feature
+   * is used in the checkbox feature downstream.
+   */
+  instrumentInputs() {
+    // this uses a trick. The problem is that ngAfterViewChecked() is called
+    // multiple times and causes EventListeners added to the inputs multiple
+    // times. Using a dirty bit does not work as Angular is ansychronous and
+    // updates can happen between setting the EventListener and reverting the
+    // dirty bit.
+    // keeping track of the elements with EventListeners is also not working
+    // without a lot of extra work. So we do a trick and add a custom attribute
+    // to the input element when we added the EventListener. The selector
+    // matches only elements without that attribute, so we have a lightweight
+    // way of making sure each input element exactly gets one EventListener
+    // attached.
+    let el = this.elementRef;
+    if (el) {
+      let inputElements = el.nativeElement.querySelectorAll('input:not([data-event-attached])');
+      if (inputElements && inputElements.length > 0) {
+        // we need to use a classic loop instead of forEach here
+        // as forEach on NodeLists is not supported on every browser.
+        // Example: Chrome works, but Protractor not.
+        for (let i = 0; i < inputElements.length; ++i) {
+          inputElements[i].setAttribute('data-event-attached', 'true');
+          inputElements[i].addEventListener('change', (ref: any) => {
+            // we only support checkboxes for now, but the mechanism is generic.
+            // add new interactions here if needed.
+            if (ref.target && ref.target.getAttribute('type') === 'checkbox') {
+              let indexStr = ref.target.getAttribute('data-checkbox-index');
+              this.onInputEvent.emit({
+                'type': 'checkbox',
+                // '+' converts the string to an int.
+                'extraData': {
+                  checkboxIndex: +indexStr,
+                  checked: ref.target.checked
+                }
+              });
+            }
+          }, false);
+        }
+      }
+    }
+  }
+
   /*
    * Replaces the match (which should be the default icon) with an icon that
    * indicates the status contained in linkData.

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

@@ -4,14 +4,15 @@ 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 ],
+  declarations: [ GitHubLinkAreaComponent, SafePipe ],
   providers: [ GitHubLinkService ],
-  exports: [ GitHubLinkAreaComponent ]
+  exports: [ GitHubLinkAreaComponent, SafePipe ]
 })
 export class GitHubLinkAreaModule { }

src/app/github-link-area/safe.pipe.ts

@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import {
+  DomSanitizer,
+  SafeHtml,
+  SafeStyle,
+  SafeScript,
+  SafeUrl,
+  SafeResourceUrl
+} from '@angular/platform-browser';
+
+@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}`);
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Component, ViewEncapsulation, ElementRef } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 const markdownIt = require('markdown-it');
 const markdown = new markdownIt();
@@ -13,16 +14,52 @@ const markdown = new markdownIt();
 
 export class MarkdownExampleComponent {
 
-  private renderedText: string = '<p>hello, markdown!\</p>';
+    private renderedText: string = '<h1>hello, markdown!\</h1><ul>' +
+    // tslint:disable-next-line:max-line-length
+    '<li><input class="markdown-checkbox" type="checkbox" data-checkbox-index="0"></input> Item 0</li>' +
+    // tslint:disable-next-line:max-line-length
+    '<li><input class="markdown-checkbox" type="checkbox" checked="" data-checkbox-index="1"></input> Item 1</li>' +
+    // tslint:disable-next-line:max-line-length
+    '<li><input class="markdown-checkbox" type="checkbox" data-checkbox-index="2"></input> Item 2</li></ul>';
   private renderedTextNoEdit: string = '<p>Edit is not allowed here</p>';
-  private rawText: string = '#hello, markdown!';
+  private rawText: string = '# hello, markdown!\n* [ ] Item 1\n* [x] Item 2\n* [ ] Item 3';
   private allowEdit = false;
 
   onSaveOrPreview(value: any) {
     const rawText = value.rawText;
     const callBack = value.callBack;
+    console.log('MarkdownExampleComponent: Received markdown markup update in client: ' + rawText);
     setTimeout(() => {
-      callBack(rawText, markdown.render(rawText));
+      let text: string = markdown.render(rawText);
+      const regex = /\[[ xX]\]|\[\]/gm;
+      let m;
+      let matchIndex = 0;
+      // tslint:disable-next-line:no-conditional-assignment
+      while ((m = regex.exec(text)) !== null) {
+        // This is necessary to avoid infinite loops with zero-width matches.
+        if (m.index === regex.lastIndex) {
+          regex.lastIndex++;
+        }
+        if (m.length > 0) {
+          // JavaScript does not have a replace by index method.
+          let matchLen = m[0].length;
+          let matchEndIndex = regex.lastIndex;
+          let matchStartIndex = matchEndIndex - matchLen;
+          let replaceStr;
+          if (m[0] === '[]' || m[0] === '[ ]')
+            // tslint:disable-next-line:max-line-length
+            replaceStr = '<input class="markdown-checkbox" type="checkbox" data-checkbox-index="' + matchIndex + '"></input>';
+          else
+            // tslint:disable-next-line:max-line-length
+            replaceStr = '<input class="markdown-checkbox" type="checkbox" checked="" data-checkbox-index="' + matchIndex + '"></input>';
+          // tslint:disable-next-line:max-line-length
+          text = text.substring(0, matchStartIndex) + replaceStr + text.substring(matchEndIndex, text.length);
+        }
+        matchIndex++;
+      }
+      // tslint:disable-next-line:max-line-length
+      console.log('MarkdownExampleComponent: Rendering on service side completed, sending to component: ' + text);
+      callBack(rawText, text);
     }, 2000);
   }
 

src/app/markdown/markdown.component.html

@@ -9,7 +9,7 @@
   </li>
 </ul>
 <div class="editor-container">
-  <div class="editor"
+  <div class="editor" #previewArea
     (click)="enableEditor()"
     [class.active]="editorActive"
     [class.show-less]="!showMore && !editorActive">
@@ -23,10 +23,10 @@
       class="editor-box editor-markdown"
       [innerText]="rawText">
     </p>
-    <div #editorBox
+    <div #editorBox #previewArea
       *ngIf="viewType==='preview' && renderedText.length"
-      class="editor-box editor-preview">
-        <github-link-area [content]="renderedText"></github-link-area>
+      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"

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

@@ -0,0 +1,84 @@
+import {
+  async,
+  ComponentFixture,
+  fakeAsync,
+  inject,
+  TestBed,
+  tick
+} from '@angular/core/testing';
+
+import { DebugElement, SimpleChanges, SimpleChange } from '@angular/core';
+import { FormsModule }  from '@angular/forms';
+import { By }           from '@angular/platform-browser';
+
+import { MarkdownModule } from './markdown.module';
+import { MarkdownComponent } from './markdown.component';
+
+describe('Markdown component - ', () => {
+  let comp: MarkdownComponent;
+  let fixture: ComponentFixture<MarkdownComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [ FormsModule, MarkdownModule ],
+      declarations: [ ]
+    })
+      .compileComponents()
+      .then(() => {
+        fixture = TestBed.createComponent(MarkdownComponent);
+        comp = fixture.componentInstance;
+      });
+  }));
+
+  it('Should render handle Markdown checkboxes correctly.', () => {
+      // tslint:disable-next-line:max-line-length
+      comp.inpRawText = '# hello, markdown!\n* [ ] Item 1\n* [x] Item 2\n* [ ] Item 3';
+      comp.inpRenderedText = '<h1>hello, markdown!\</h1><ul>' +
+      // tslint:disable-next-line:max-line-length
+      '<li><input class="markdown-checkbox" type="checkbox" data-checkbox-index="0"></input> Item 0</li>' +
+      // tslint:disable-next-line:max-line-length
+      '<li><input class="markdown-checkbox" type="checkbox" checked="" data-checkbox-index="1"></input> Item 1</li>' +
+      // tslint:disable-next-line:max-line-length
+      '<li><input class="markdown-checkbox" type="checkbox" data-checkbox-index="2"></input> Item 2</li></ul>';
+      // this first detectChanges() updates the component that one of the @Inputs has changed.
+      fixture.detectChanges();
+      // because of https://github.com/angular/angular/issues/9866, detectChanges() does not
+      // call ngOnChanges() on the component (yeah, it it as broken as it sounds). So
+      // we need to call the component manually to update.
+      comp.ngOnChanges({
+        inpRawText: {} as SimpleChange,
+        inpRenderedText: {} as SimpleChange
+      } as SimpleChanges);
+      // and because the test framework is not even able to detect inner changes to a component,
+      // we need to call detectChanges() again.
+      fixture.detectChanges();
+      // also, using query() is also not working. Maybe due to the dynamic update of innerHTML.
+      // So we need to use the nativeElement to get a selector working.
+      // tslint:disable-next-line:max-line-length
+      let markdownPreview: Element = fixture.debugElement.nativeElement.querySelector('.markdown-rendered');
+      expect(markdownPreview).not.toBeNull();
+      // preview render of the template default
+      let markdownCheckboxElementList = markdownPreview.querySelectorAll('.markdown-checkbox');
+      expect(markdownCheckboxElementList).not.toBeNull();
+      expect(markdownCheckboxElementList.length).toBe(3);
+      expect(markdownCheckboxElementList[0].hasAttribute('checked')).toBeFalsy();
+      expect(markdownCheckboxElementList[1].hasAttribute('checked')).toBeTruthy();
+      expect(markdownCheckboxElementList[2].hasAttribute('checked')).toBeFalsy();
+      // tick a checkbox
+      let checkboxElem = markdownCheckboxElementList[0] as HTMLElement;
+      checkboxElem.click();
+      // see if it ends up in the Markdown
+      expect(comp.rawText.indexOf('[x] Item 1')).toBeGreaterThan(-1);
+      // tick another checkbox
+      checkboxElem = markdownCheckboxElementList[2] as HTMLElement;
+      checkboxElem.click();
+      // see if it ends up in the Markdown
+      expect(comp.rawText.indexOf('[x] Item 3')).toBeGreaterThan(-1);
+      // untick a checkbox
+      checkboxElem = markdownCheckboxElementList[1] as HTMLElement;
+      checkboxElem.click();
+      // see if it ends up in the Markdown
+      expect(comp.rawText.indexOf('[ ] Item 2')).toBeGreaterThan(-1);
+    });
+
+});