enable sidebar nav; fix build error

src/app/app.component.ts

@@ -1,47 +1,43 @@
-import { Component } from "@angular/core";
+import {Component, OnInit} from '@angular/core';
 
-import { Platform } from "@ionic/angular";
-import { SplashScreen } from "@ionic-native/splash-screen/ngx";
-import { StatusBar } from "@ionic-native/status-bar/ngx";
-import { ApiService } from "./service/api.service";
+import { Platform } from '@ionic/angular';
+import { SplashScreen } from '@ionic-native/splash-screen/ngx';
+import { StatusBar } from '@ionic-native/status-bar/ngx';
+import { ApiService } from './service/api.service';
+import {Router} from '@angular/router';
 
 @Component({
-  selector: "app-root",
-  templateUrl: "app.component.html",
-  styleUrls: ["app.component.scss"]
+  selector: 'app-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss']
 })
-export class AppComponent {
-  public appPages = [
-    {
-      title: "Home",
-      url: "/home",
-      icon: "home"
-    },
-    {
-      title: "List",
-      url: "/list",
-      icon: "list"
-    },
-    {
-      title: "Editor",
-      url: "/editor",
-      icon: "edit"
-    }
-  ];
+export class AppComponent implements OnInit {
 
   public nodes = [];
+  public options = {
+    actionMapping: {
+      mouse: {
+        dblClick: (tree, node, $event) => {
+          console.log({tree, node, $event});
+          const id = node.data.id;
+          this.router.navigate(['/editor', {id}]);
+        }
+      }
+    }
+  };
 
   constructor(
     private platform: Platform,
     private splashScreen: SplashScreen,
     private statusBar: StatusBar,
-    private api: ApiService
+    private api: ApiService,
+    protected router: Router,
   ) {
     this.initializeApp();
   }
 
-  ionViewDidEnter() {
-    this.api.get("/menu/items").subscribe(result => {
+  ngOnInit() {
+    this.api.get('/menu/items').subscribe(result => {
       this.nodes = result.data;
     });
   }

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');

src/app/pages/editor/editor.page.html

@@ -15,7 +15,7 @@
   <ng-container>
     <div class="editor-root ion-padding">
       <div class="host-container ion-padding">
-        <editor-host #editorHosts *ngFor="let record of hostRecords" [(record)]="record"
+        <editor-host #editorHosts *ngFor="let record of hostRecords; let i = index" [(record)]="hostRecords[i]"
           (newHostRequested)="onNewHostRequested($event)" (destroyHostRequested)="onDestroyHostRequested($event)">
         </editor-host>
       </div>
@@ -25,4 +25,4 @@
       <ion-button (click)="onSaveClick()" class="ion-padding ion-margin">Save</ion-button>
     </div>
   </ng-container>
-</ion-content>
+</ion-content>

src/app/pages/editor/editor.page.ts

@@ -2,6 +2,7 @@ import {Component, Host, OnInit, ViewChild, ViewChildren} from '@angular/core';
 import HostRecord from '../../structures/HostRecord';
 import PageRecord from '../../structures/PageRecord';
 import {PageService} from '../../service/page.service';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-editor',
@@ -11,26 +12,33 @@ import {PageService} from '../../service/page.service';
 export class EditorPage implements OnInit {
   public hostRecords: Array<HostRecord> = [new HostRecord('Click to edit page...')];
   public pageRecord: PageRecord = new PageRecord();
+  public pageId: string;
 
   @ViewChildren('editorHosts') editorHosts;
   @ViewChild('titleBar', {static: false}) titleBar;
 
   constructor(
     protected pages: PageService,
-  ) { }
+    protected route: ActivatedRoute,
+  ) {
+    this.route.params.subscribe(params => {
+      this.pageId = params.id;
+    });
+  }
 
   ngOnInit() {
     console.log('Editor component: ', this);
   }
 
   ionViewDidEnter() {
-    const pageId = prompt('What is the ID of the page to load?');
-    this.pages.load(pageId).subscribe(pageRecord => {
-      this.pageRecord = pageRecord;
-      this.pages.get_nodes(pageRecord).subscribe((hosts: Array<HostRecord>) => {
-        this.hostRecords = hosts;
+    if ( this.pageId ) {
+      this.pages.load(this.pageId).subscribe(pageRecord => {
+        this.pageRecord = pageRecord;
+        this.pages.get_nodes(pageRecord).subscribe((hosts: Array<HostRecord>) => {
+          this.hostRecords = hosts;
+        });
       });
-    });
+    }
   }
 
   onAddClick() {

src/app/structures/HostRecord.ts

@@ -1,6 +1,6 @@
 export default class HostRecord {
     public value = '';
-    public type: 'paragraph'|'header1'|'header2'|'header3'|'header4'|'block_code'|'click_link' = 'paragraph';
+    public type: 'paragraph'|'header1'|'header2'|'header3'|'header4'|'block_code'|'click_link'|'ul' = 'paragraph';
 
     public CreatedAt: string;
     public PageId: string;