Add inline host options button and implement horizontal row

src/app/components/components.module.ts

@@ -11,11 +11,45 @@ import {CodeComponent} from './editor/code/code.component';
 import {MonacoEditorModule} from 'ngx-monaco-editor';
 import {FilesComponent} from './editor/files/files.component';
 import {OptionPickerComponent} from './option-picker/option-picker.component';
+import {HostOptionsComponent} from './editor/host-options/host-options.component';
 
 @NgModule({
-  declarations: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent],
-  imports: [CommonModule, IonicModule, AgGridModule, FormsModule, MonacoEditorModule],
-  entryComponents: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent],
-  exports: [HostComponent, NodePickerComponent, DatabaseComponent, ColumnsComponent, CodeComponent, FilesComponent, OptionPickerComponent]
+  declarations: [
+    HostComponent,
+    NodePickerComponent,
+    DatabaseComponent,
+    ColumnsComponent,
+    CodeComponent,
+    FilesComponent,
+    OptionPickerComponent,
+    HostOptionsComponent
+  ],
+  imports: [
+    CommonModule,
+    IonicModule,
+    AgGridModule,
+    FormsModule,
+    MonacoEditorModule
+  ],
+  entryComponents: [
+    HostComponent,
+    NodePickerComponent,
+    DatabaseComponent,
+    ColumnsComponent,
+    CodeComponent,
+    FilesComponent,
+    OptionPickerComponent,
+    HostOptionsComponent
+  ],
+  exports: [
+    HostComponent,
+    NodePickerComponent,
+    DatabaseComponent,
+    ColumnsComponent,
+    CodeComponent,
+    FilesComponent,
+    OptionPickerComponent,
+    HostOptionsComponent
+  ]
 })
 export class ComponentsModule {}

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

@@ -0,0 +1,6 @@
+<ion-list>
+  <ion-item *ngFor="let menuItem of menuItems; let i = index" button (click)="onSelect(menuItems[i].value)">
+    <ion-icon slot="start" [name]="menuItems[i].icon"></ion-icon>
+    <ion-label>{{ menuItems[i].name }}</ion-label>
+  </ion-item>
+</ion-list>

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

@@ -0,0 +1,43 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {PopoverController} from '@ionic/angular';
+import {EditorPage} from '../../../pages/editor/editor.page';
+import HostRecord from '../../../structures/HostRecord';
+
+@Component({
+  selector: 'editor-host-options',
+  templateUrl: './host-options.component.html',
+  styleUrls: ['./host-options.component.scss'],
+})
+export class HostOptionsComponent implements OnInit {
+  @Input() editor: EditorPage;
+  @Input() index: number;
+  @Input() event: Event;
+  @Input() hostRecord: HostRecord;
+
+  public menuItems: Array<{name: string, icon: string, value: string, type?: string}> = [];
+  protected possibleMenuItems: Array<{name: string, icon: string, value: string, type?: string}> = [
+    {
+      name: 'Delete Node',
+      icon: 'trash',
+      value: 'delete_node',
+    },
+  ];
+
+  constructor(
+      protected popover: PopoverController,
+  ) { }
+
+  ngOnInit() {
+    for ( const item of this.possibleMenuItems ) {
+      if ( !item.type ) {
+        this.menuItems.push(item);
+      } else if ( item.type === this.hostRecord.type ) {
+        this.menuItems.push(item);
+      }
+    }
+  }
+
+  async onSelect(value) {
+    await this.popover.dismiss(value);
+  }
+}

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

@@ -61,7 +61,7 @@ export class HostComponent implements OnInit {
       this.record.type = 'block_code';
     } else if ( innerText.startsWith('http') ) {
       this.record.type = 'click_link';
-    } else if ( innerText === '---' ) {
+    } else if ( innerText === '===' ) {
       this.record.type = 'page_sep';
     } else if ( innerText.startsWith('-') || innerText.startsWith(' -') ) {
       this.record.type = 'ul';