Initial editor functionality

src/app/pages/editor/editor-routing.module.ts

@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { EditorPage } from './editor.page';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: EditorPage
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class EditorPageRoutingModule {}

src/app/pages/editor/editor.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+import { IonicModule } from '@ionic/angular';
+
+import { EditorPageRoutingModule } from './editor-routing.module';
+
+import { EditorPage } from './editor.page';
+import {ComponentsModule} from '../../components/components.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    IonicModule,
+    EditorPageRoutingModule,
+    ComponentsModule
+  ],
+  declarations: [EditorPage]
+})
+export class EditorPageModule {}

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

@@ -0,0 +1,26 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-title>Note Editor</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ng-container>
+    <div class="editor-buttons">
+      <ion-button class="ion-padding ion-margin">Save</ion-button>
+    </div>
+    <div class="editor-root ion-padding">
+      Hello, world!
+
+      <div class="host-container ion-padding">
+        <editor-host
+          #editorHosts
+          *ngFor="let record of hostRecords"
+          [(record)]="record"
+          (newHostRequested)="onNewHostRequested($event)"
+          (destroyHostRequested)="onDestroyHostRequested($event)"
+        ></editor-host>
+      </div>
+    </div>
+  </ng-container>
+</ion-content>

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

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { EditorPage } from './editor.page';
+
+describe('EditorPage', () => {
+  let component: EditorPage;
+  let fixture: ComponentFixture<EditorPage>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditorPage ],
+      imports: [IonicModule.forRoot()]
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(EditorPage);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,90 @@
+import {Component, OnInit, ViewChildren} from '@angular/core';
+import HostRecord from '../../structures/HostRecord';
+
+@Component({
+  selector: 'app-editor',
+  templateUrl: './editor.page.html',
+  styleUrls: ['./editor.page.scss'],
+})
+export class EditorPage implements OnInit {
+  public hostRecords: Array<HostRecord> = [new HostRecord('I am a record.')];
+
+  @ViewChildren('editorHosts') editorHosts;
+
+  constructor() { }
+
+  ngOnInit() {
+    console.log('Editor component: ', this);
+  }
+
+  onNewHostRequested($event) {
+    const insertAfter = this.getIndexFromRecord($event.record);
+    const record = new HostRecord('');
+    const newHosts = []
+    this.hostRecords.forEach((rec, i) => {
+      newHosts.push(rec);
+      if ( i === insertAfter ) {
+        newHosts.push(record);
+      }
+    })
+
+    this.hostRecords = newHosts;
+
+    setTimeout(() => {
+      const host = this.editorHosts.toArray()[insertAfter + 1].hostContainer.nativeElement;
+      const s = window.getSelection();
+      const r = document.createRange();
+      r.setStart(host, 0);
+      r.setEnd(host, 0);
+      s.removeAllRanges();
+      s.addRange(r);
+    }, 0);
+
+  }
+
+  onDestroyHostRequested($event) {
+    let removedIndex = 0;
+    const newHostRecords = this.editorHosts.filter((host, i) => {
+      if ( $event.record === host.record ) {
+        removedIndex = i;
+      }
+      return host.record !== $event.record;
+    });
+
+    const removedHost = this.editorHosts[removedIndex];
+
+    const hostRecords = newHostRecords.map(host => host.record);
+    this.hostRecords = hostRecords;
+
+    setTimeout(() => {
+      let focusIndex;
+      if ( removedIndex === 0 && this.editorHosts.toArray().length ) {
+        focusIndex = 0;
+      } else if ( removedIndex !== 0 ) {
+        focusIndex = removedIndex - 1;
+      }
+
+      if ( focusIndex >= 0 ) {
+        const host = this.editorHosts.toArray()[focusIndex].hostContainer.nativeElement;
+        const s = window.getSelection();
+        const r = document.createRange();
+        r.setStart(host, 0);
+        r.setEnd(host, 0);
+        s.removeAllRanges();
+        s.addRange(r);
+      }
+    }, 0);
+  }
+
+  protected getIndexFromRecord(record) {
+    let index;
+    this.editorHosts.toArray().forEach((host, i) => {
+      if ( host.record === record ) {
+        index = i;
+      }
+    });
+
+    return index;
+  }
+
+}