enable sidebar nav; fix build error

src/app/components/editor/host/host.component.html

@@ -10,4 +10,17 @@
     [ngClass]="{'paragraph': record.type === 'paragraph', 'header1': record.type === 'header1', 'header2': record.type === 'header2', 'header3': record.type === 'header3', 'header4': record.type === 'header4', 'block_code': record.type === 'block_code', 'click_link': record.type === 'click_link'}"
     [innerHTML]="record.value.replace('\n', '<br>')"
   ></div>
+  <ul
+    *ngIf="record.type === 'ul'"
+    class="host-host ion-padding"
+  >
+    <li
+      contenteditable="true"
+      *ngFor="let line of listLines; let i = index"
+      #liItems
+      (keyup)="onLIKeyUp($event, i)"
+      (blur)="listLines[i]=liItems.innerHTML"
+      [innerHTML]="listLines[i]"
+    ></li>
+  </ul>
 </ng-container>

src/app/components/editor/host/host.component.ts

@@ -1,4 +1,4 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewChildren} from '@angular/core';
 import HostRecord from '../../../structures/HostRecord';
 
 @Component({
@@ -12,6 +12,9 @@ export class HostComponent implements OnInit {
   @Output() newHostRequested = new EventEmitter<HostComponent>();
   @Output() destroyHostRequested = new EventEmitter<HostComponent>();
   @ViewChild('hostContainer', {static: false}) hostContainer: ElementRef;
+  @ViewChildren('liItems') liItems;
+
+  public listLines: Array<string> = [];
 
   constructor() { }
 
@@ -42,11 +45,59 @@ export class HostComponent implements OnInit {
       this.record.type = 'block_code';
     } else if ( innerText.startsWith('http') ) {
       this.record.type = 'click_link';
+    } else if ( innerText.startsWith('-') || innerText.startsWith(' -') ) {
+      this.record.type = 'ul';
+      this.listLines = [this.record.value];
+      setTimeout(() => {
+        const item = this.liItems.toArray()[0].nativeElement;
+        const s = window.getSelection();
+        const r = document.createRange();
+        r.setStart(item, 0);
+        r.setEnd(item, 0);
+        s.removeAllRanges();
+        s.addRange(r);
+      }, 0);
     } else {
       this.record.type = 'paragraph';
     }
   }
 
+  onLIKeyUp($event, i) {
+    console.log({$event});
+    if ( $event.code === 'Enter' ) {
+      const newListLines = [];
+      this.liItems.forEach((li, index) => {
+        newListLines.push(li.nativeElement.innerText.trim());
+        if ( index === i ) {
+          newListLines.push('');
+        }
+      });
+
+      this.listLines = newListLines;
+      // this.listLines[i] = this.liItems[i].innerText.trim()
+      // const newLines = []
+      // this.listLines.forEach((rec, x) => {
+      //   newLines.push(rec.trim());
+      //   if ( i === x ) {
+      //     newLines.push('');
+      //   }
+      // })
+
+
+      // this.listLines = newLines;
+
+      // setTimeout(() => {
+      //   const item = this.liItems.toArray()[i + 1].nativeElement;
+      //   const s = window.getSelection();
+      //   const r = document.createRange();
+      //   r.setStart(item, 0);
+      //   r.setEnd(item, 0);
+      //   s.removeAllRanges();
+      //   s.addRange(r);
+      // }, 10);
+    }
+  }
+
   onHostDblClick() {
     if ( this.record.type === 'click_link' ) {
       window.open(this.record.value.trim(), '_blank');