From 859cd3484ce73d731bb1725b20f7c48db22f3389 Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Tue, 20 Nov 2018 22:34:49 +0100
Subject: [PATCH] refactor(notes): refactor inline markdown to use viewChild

---
 .../inline-markdown.component.html            |  5 ++-
 .../inline-markdown.component.ts              | 39 ++++++++++---------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/app/ui/inline-markdown/inline-markdown.component.html b/src/app/ui/inline-markdown/inline-markdown.component.html
index 3a620d9541..2a5bb694a7 100644
--- a/src/app/ui/inline-markdown/inline-markdown.component.html
+++ b/src/app/ui/inline-markdown/inline-markdown.component.html
@@ -1,5 +1,7 @@
-<div class="markdown-wrapper">
+<div class="markdown-wrapper"
+     #wrapperEl>
   <textarea *ngIf="isShowEdit"
+            #textareaEl
             tabindex="1"
             [@fade]
             (focus)="setFocus($event)"
@@ -9,6 +11,7 @@
             rows="5"></textarea>
 
   <div markdown
+       #previewEl
        tabindex="1"
        [data]="model"
        [hidden]="isShowEdit"
diff --git a/src/app/ui/inline-markdown/inline-markdown.component.ts b/src/app/ui/inline-markdown/inline-markdown.component.ts
index 6d87fbe677..8f53865202 100644
--- a/src/app/ui/inline-markdown/inline-markdown.component.ts
+++ b/src/app/ui/inline-markdown/inline-markdown.component.ts
@@ -1,5 +1,6 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { fadeAnimation } from '../animations/fade.ani';
+import { MarkdownComponent } from 'ngx-markdown';
 
 
 @Component({
@@ -15,10 +16,19 @@ export class InlineMarkdownComponent implements OnInit {
   @Output() onChanged: EventEmitter<any> = new EventEmitter();
   @Output() focus: EventEmitter<Event> = new EventEmitter();
   @Output() blur: EventEmitter<Event> = new EventEmitter();
+  @ViewChild('wrapperEl') wrapperEl: ElementRef;
+  @ViewChild('textareaEl') textareaEl: ElementRef;
+  @ViewChild('previewEl') previewEl: MarkdownComponent;
+
   isShowEdit = false;
   modelCopy: string;
   el: HTMLElement;
-  textareaEl: HTMLTextAreaElement;
+
+  @Input() set isFocus(val: boolean) {
+    if (!this.isShowEdit && val) {
+      this.toggleShowEdit();
+    }
+  }
 
   constructor(el: ElementRef) {
     this.el = el.nativeElement;
@@ -50,11 +60,8 @@ export class InlineMarkdownComponent implements OnInit {
       this.modelCopy = this.model || '';
 
       setTimeout(() => {
-        const textareaEls = this.el.querySelectorAll('textarea');
-        this.textareaEl = textareaEls[0];
-
-        this.textareaEl.value = this.modelCopy;
-        this.textareaEl.focus();
+        this.textareaEl.nativeElement.value = this.modelCopy;
+        this.textareaEl.nativeElement.focus();
         this.resizeTextareaToFit();
       });
     }
@@ -66,7 +73,7 @@ export class InlineMarkdownComponent implements OnInit {
       this.resizeParsedToFit();
       this.isShowEdit = false;
     }
-    this.modelCopy = this.textareaEl.value;
+    this.modelCopy = this.textareaEl.nativeElement.value;
 
     if (this.modelCopy !== this.model) {
       this.model = this.modelCopy;
@@ -77,21 +84,17 @@ export class InlineMarkdownComponent implements OnInit {
 
 
   resizeTextareaToFit() {
-    const wrapperEl: HTMLElement = this.el.querySelectorAll('div')[0];
-    this.textareaEl.style.height = 'auto';
-    this.textareaEl.style.height = this.textareaEl.scrollHeight + 'px';
-    wrapperEl.style.height = this.textareaEl.offsetHeight + 'px';
+    this.textareaEl.nativeElement.style.height = 'auto';
+    this.textareaEl.nativeElement.style.height = this.textareaEl.nativeElement.scrollHeight + 'px';
+    this.wrapperEl.nativeElement.style.height = this.textareaEl.nativeElement.offsetHeight + 'px';
   }
 
 
   resizeParsedToFit() {
     setTimeout(() => {
-      const previewEl: any = this.el.querySelectorAll('.markdown-parsed')[0];
-      const wrapperEl: HTMLElement = this.el.querySelectorAll('div')[0];
-
-      previewEl.style.height = 'auto';
-      wrapperEl.style.height = previewEl.offsetHeight + 'px';
-      previewEl.style.height = '';
+      this.previewEl.element.nativeElement.style.height = 'auto';
+      this.wrapperEl.nativeElement.style.height = this.previewEl.element.nativeElement.offsetHeight + 'px';
+      this.previewEl.element.nativeElement.style.height = '';
     });
   }