src/app/components/nodes/EditorNode.contract.ts

@@ -40,4 +40,6 @@ export abstract class EditorNodeContract {
     public performSave(): void | Promise<void> {}
 
     public performLoad(): void | Promise<void> {}
+
+    public performDelete(): void | Promise<void> {}
 }

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

@@ -22,6 +22,12 @@
           style="display: flex;"
           *ngFor="let node of editorService.immutableNodes"
         >
+          <div class="host-icons">
+            <i class="type-icon norm fa" [ngClass]="typeIcons.norm" title="WYSIWYG Node"></i>
+            <button (click)="onOptionsClick($event, node)">
+              <i class="fa fa-ellipsis-v" title="Node options"></i>
+            </button>
+          </div>
           <ng-container *ngIf="node.isNorm()">
             <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
           </ng-container>

src/app/pages/editor/editor.page.scss

@@ -6,6 +6,17 @@ ion-icon.invisible {
   opacity: 0;
 }
 
-.title-input {
-  
+.host-icons {
+  padding: 5px;
+  color: #444;
+  display: flex;
+  flex-direction: column;
+}
+
+.type-icon {
+  margin-bottom: 15px;
+
+  &.norm {
+    color: var(--noded-background-node);
+  }
 }

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

@@ -17,6 +17,15 @@ export class EditorPage implements OnInit {
   // @ViewChildren('editorHosts') editorHosts;
   // @ViewChild('titleBar') titleBar;
 
+  public typeIcons = {
+    branch: 'fa fa-folder',
+    node: 'fa fa-quote-left',
+    norm: 'fa fa-quote-left',
+    page: 'fa fa-sticky-note',
+    db: 'fa fa-database',
+    code: 'fa fa-code',
+  };
+
   @Input() pageId: string;
   public pageName = '';
 
@@ -24,6 +33,7 @@ export class EditorPage implements OnInit {
     protected route: ActivatedRoute,
     protected router: Router,
     protected loader: LoadingController,
+    protected popover: PopoverController,
     public readonly editorService: EditorService,
   ) {
     this.route.params.subscribe(params => {
@@ -47,6 +57,31 @@ export class EditorPage implements OnInit {
     this.editorService.save();
   }
 
+  async onOptionsClick(event: MouseEvent, node: HostRecord) {
+    if ( !this.editorService.canEdit() ) {
+      return;
+    }
+
+    const popover = await this.popover.create({
+      component: HostOptionsComponent,
+      event,
+      componentProps: {
+        editor: this,
+        index: this.editorService.immutableNodes.indexOf(node),
+        event,
+        hostRecord: node,
+      }
+    });
+
+    popover.onDidDismiss().then(result => {
+      if ( result.data === 'delete_node' ) {
+        this.editorService.deleteNode(node.UUID);
+      }
+    });
+
+    await popover.present();
+  }
+
   // buttonIsVisible(index) {
   //   return this.visibleButtons.includes(index);
   // }

src/app/service/editor.service.ts

@@ -120,6 +120,26 @@ export class EditorService {
         return dirties.some(Boolean) || needSaves.some(Boolean);
     }
 
+    async deleteNode(nodeId: string) {
+        if ( !this.currentPage ) {
+            throw new NoPageLoadedError();
+        }
+
+        const node = this.currentNodes.find(maybeNode => maybeNode.UUID === nodeId);
+        if ( !node ) {
+            throw new Error('Invalid node ID.');
+        }
+
+        const editor = this.nodeIdToEditorContract[nodeId];
+        if ( editor ) {
+            await editor.performDelete();
+            delete this.nodeIdToEditorContract[nodeId];
+        }
+
+        this.currentNodes = this.currentNodes.filter(x => x.UUID !== nodeId);
+        this.dirtyOverride = true;
+    }
+
     canEdit() {
         if ( !this.currentPage ) {
             throw new NoPageLoadedError();