fix(markdown): Fixed markdown component with undefined values. OSIO i…

…ssue #1443
fabric8-ui · Aug 18, 2017 · 0669dc5 · 0669dc5
1 parent 6005924
commit 0669dc5
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 18 deletions.
diff --git a/src/app/markdown/examples/markdown-example.component.html b/src/app/markdown/examples/markdown-example.component.html
@@ -11,8 +11,8 @@
       <f8-markdown
         [rawText]="rawText"
         [renderedText]="renderedText"
-        (onSaveClick)="onSave($event)"
-        (showPreview)="showPreview($event)">
+        (onSaveClick)="onSaveOrPreview($event)"
+        (showPreview)="onSaveOrPreview($event)">
       </f8-markdown>
     </div>
   </div>
@@ -24,23 +24,37 @@
         [rawText]="''"
         [renderedText]="''"
         [placeholder]="'This is placeholder text'"
-        (onSaveClick)="onSave($event)"
-        (showPreview)="showPreview($event)">
+        (onSaveClick)="onSaveOrPreview($event)"
+        (showPreview)="onSaveOrPreview($event)">
       </f8-markdown>
     </div>
   </div>
 
   <label> Edit is not allowed </label>
   <div class="row">
-    <div class="col-xs-12">
+    <div class="col-xs-10">
       <f8-markdown
         [rawText]="rawText"
         [editAllow]="allowEdit"
         [renderedText]="renderedTextNoEdit"
-        (onSaveClick)="onSave($event)"
-        (showPreview)="showPreview($event)">
+        (onSaveClick)="onSaveOrPreview($event)"
+        (showPreview)="onSaveOrPreview($event)">
+      </f8-markdown>
+    </div>
+    <div class="col-xs-2">
+      <button (click)="allowEdit=!allowEdit">Allow edit</button>
+    </div>
+  </div>
+
+  <label> Undefined value </label>
+  <div class="row">
+    <div class="col-xs-12">
+      <f8-markdown
+        [rawText]="undefined"
+        [renderedText]="undefined"
+        (onSaveClick)="onSaveOrPreviewUndefined($event)"
+        (showPreview)="onSaveOrPreviewUndefined($event)">
       </f8-markdown>
     </div>
   </div>
-  <button (click)="allowEdit=!allowEdit">Allow edit</button>
 </div>
diff --git a/src/app/markdown/examples/markdown-example.component.ts b/src/app/markdown/examples/markdown-example.component.ts
@@ -17,19 +17,20 @@ export class MarkdownExampleComponent {
   private rawText: string = '#hello, markdown!';
   private allowEdit = false;
 
-  onSave(value: any) {
+  onSaveOrPreview(value: any) {
     const rawText = value.rawText;
     const callBack = value.callBack;
     setTimeout(() => {
       callBack(rawText, markdown.toHTML(rawText));
     }, 2000);
   }
 
-  showPreview(value: any) {
+  onSaveOrPreviewUndefined(value: any) {
     const rawText = value.rawText;
     const callBack = value.callBack;
     setTimeout(() => {
-      callBack(rawText, markdown.toHTML(rawText));
+      callBack(undefined, undefined);
     }, 2000);
   }
+
 }
diff --git a/src/app/markdown/markdown.component.ts b/src/app/markdown/markdown.component.ts
@@ -5,6 +5,7 @@ import {
   Input,
   Output,
   OnChanges,
+  OnInit,
   ViewChild,
   EventEmitter,
   SimpleChanges
@@ -18,11 +19,11 @@ import {
   templateUrl: './markdown.component.html'
 })
 
-export class MarkdownComponent implements OnChanges {
+export class MarkdownComponent implements OnChanges, OnInit {
 
   @Input() fieldName: string = 'Description';
-  @Input() renderedText: string = '';
-  @Input() rawText: string = '';
+  @Input('renderedText') inpRenderedText: string = '';
+  @Input('rawText') inpRawText: string = '';
   @Input() rendering: boolean = false;
   @Input() saving: boolean = false;
   @Input() placeholder: string = 'This is place holder';
@@ -38,6 +39,8 @@ export class MarkdownComponent implements OnChanges {
   private tabBarVisible: boolean = true;
   private viewType: string = 'preview'; // markdown
   private editorActive: boolean = false;
+  private renderedText = '';
+  private rawText = '';
   private showMore = false;
 
   private previousRawText = '';
@@ -49,6 +52,31 @@ export class MarkdownComponent implements OnChanges {
       !changes.editAllow.isFirstChange) {
       this.closeClick();
     }
+    if (Object.keys(changes).indexOf('inpRenderedText') > -1
+      && typeof(this.inpRenderedText) === 'undefined') {
+        console.warn('Markdown component change :: renderedText is passed undefined');
+        this.renderedText = '';
+    } else {
+      this.renderedText = this.inpRenderedText;
+    }
+    if (Object.keys(changes).indexOf('inpRawText') > -1
+      && typeof(this.inpRawText) === 'undefined') {
+        console.warn('Markdown component change :: rawText is passed undefined');
+        this.rawText = '';
+    } else {
+      this.rawText = this.inpRawText;
+    }
+  }
+
+  ngOnInit() {
+    if (typeof(this.renderedText) === 'undefined') {
+      console.warn('Markdown component init :: renderedText is passed undefined');
+      this.renderedText = '';
+    }
+    if (typeof(this.rawText) === 'undefined') {
+      console.warn('Markdown component init :: rawText is passed undefined');
+      this.rawText = '';
+    }
   }
 
   onClickMarkdownTab() {
@@ -126,15 +154,35 @@ export class MarkdownComponent implements OnChanges {
 
   renderPreview(rawText: string, renderedText: string) {
     this.rendering = false;
-    this.rawText = rawText;
-    this.renderedText = renderedText;
+    if (typeof(rawText) === 'undefined') {
+      console.warn('Markdown component preview callback :: rawText is passed undefined');
+      this.rawText = '';
+    } else {
+      this.rawText = rawText;
+    }
+    if (typeof(renderedText) === 'undefined') {
+      console.warn('Markdown component preview callback :: renderedText is passed undefined');
+      this.renderedText = '';
+    } else {
+      this.renderedText = renderedText;
+    }
     this.viewType = 'preview';
   }
 
   saveUpdate(rawText: string, renderedText: string) {
     this.saving = false;
-    this.rawText = rawText;
-    this.renderedText = renderedText;
+    if (typeof(rawText) === 'undefined') {
+      console.warn('Markdown component save callback :: rawText is passed undefined');
+      this.rawText = '';
+    } else {
+      this.rawText = rawText;
+    }
+    if (typeof(renderedText) === 'undefined') {
+      console.warn('Markdown component save callback :: renderedText is passed undefined');
+      this.renderedText = '';
+    } else {
+      this.renderedText = renderedText;
+    }
     this.deactivateEditor();
   }