src/app/components/editor/node-picker/node-picker.component.html

@@ -1,17 +1,17 @@
 <ion-list>
-  <ion-item button (click)="onSelect('node')" class="node">
+  <ion-item button (click)="onSelect('paragraph')" class="node">
     <i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
     <ion-label>Paragraph</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('db')" class="db">
+  <ion-item button (click)="onSelect('database_ref')" class="db">
     <i class="fa" slot="start" [ngClass]="typeIcons.db"></i>
     <ion-label>Database</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('code')" class="code">
+  <ion-item button (click)="onSelect('code_ref')" class="code">
     <i class="fa" slot="start" [ngClass]="typeIcons.code"></i>
     <ion-label>Code Editor</ion-label>
   </ion-item>
-  <ion-item button (click)="onSelect('files')" class="files">
+  <ion-item button (click)="onSelect('file_ref')" class="files">
     <i class="fa" slot="start" [ngClass]="typeIcons.node"></i>
     <ion-label>Upload Files</ion-label>
   </ion-item>

src/app/components/nodes/norm/norm.component.ts

@@ -34,7 +34,13 @@ export class NormComponent extends EditorNodeContract implements OnInit {
 
     ngOnInit() {
         this.editorService.registerNodeEditor(this.nodeId, this).then(() => {
-            this.initialValue = this.node.Value.Value;
+            if ( !this.node.Value ) {
+                this.node.Value = {};
+            }
+
+            if ( this.node.Value.Value ) {
+                this.initialValue = this.node.Value.Value;
+            }
             this.contents = this.initialValue;
         });
     }

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

@@ -86,6 +86,11 @@ export class EditorPage implements OnInit {
       event,
     });
 
+    popover.onDidDismiss().then(result => {
+      console.log('adding node', result.data);
+      this.editorService.addNode(result.data);
+    });
+
     // popover.onDidDismiss().then(arg => {
     //   const defValue = this.getDefaultValue(arg.data);
     //   const hostRec = new HostRecord(defValue);

src/app/service/editor.service.ts

@@ -93,8 +93,8 @@ export class EditorService {
         await this.saveNodesAsPage(this.currentPage, this.currentNodes);
     }
 
-    async saveNodesAsPage(page: PageRecord, nodes: HostRecord[]) {
+    async saveNodesAsPage(page: PageRecord, nodes: HostRecord[]): Promise<HostRecord[]> {
-        await new Promise((res, rej) => {
+        return new Promise((res, rej) => {
             const saveNodes = nodes.map(x => {
                 x.PageId = page.UUID;
                 return x.toSave();
@@ -102,7 +102,27 @@ export class EditorService {
 
             this.api.post(`/page/${page.UUID}/nodes/save`, saveNodes).subscribe({
                 next: result => {
-                    res(); // TODO load in returned data!!
+                    res(result.data.map(rec => {
+                        const host = new HostRecord(rec.Value.Value);
+                        host.load(rec);
+                        return host;
+                    }));
+                },
+                error: rej,
+            });
+        });
+    }
+
+    async saveNodeToPage(page: PageRecord, node: HostRecord): Promise<HostRecord> {
+        return new Promise((res, rej) => {
+            node.PageId = page.UUID;
+            const nodeData = node.toSave();
+
+            this.api.post(`/page/${page.UUID}/nodes/save_one`, { nodeData }).subscribe({
+                next: result => {
+                    const host = new HostRecord(result.data.Value.Value);
+                    host.load(result.data);
+                    res(host);
                 },
                 error: rej,
             });
@@ -140,6 +160,40 @@ export class EditorService {
         this.dirtyOverride = true;
     }
 
+    async addNode(type: 'paragraph' | 'code_ref' | 'database_ref' | 'file_ref', position?: 'before' | 'after', positionNodeId?: string) {
+        if ( !this.currentPage ) {
+            throw new NoPageLoadedError();
+        }
+
+        const baseHost = new HostRecord();
+        baseHost.type = type;
+        baseHost.PageId = this.currentPage.UUID;
+
+        const host = await this.saveNodeToPage(this.currentPage, baseHost);
+
+        let placed = false;
+        if ( position === 'before' && positionNodeId ) {
+            const index = this.currentNodes.findIndex(node => node.UUID === positionNodeId);
+            if ( index > -1 ) {
+                this.currentNodes.splice(index, 0, host);
+                placed = true;
+            }
+        } else if ( position === 'after' && positionNodeId ) {
+            const index = this.currentNodes.findIndex(node => node.UUID === positionNodeId);
+            if ( index > -1 ) {
+                this.currentNodes.splice(index + 1, 0, host);
+                placed = true;
+            }
+        }
+
+        if ( !placed ) {
+            this.currentNodes.push(host);
+        }
+
+        this.dirtyOverride = true;
+        return host;
+    }
+
     canEdit() {
         if ( !this.currentPage ) {
             throw new NoPageLoadedError();

src/app/structures/HostRecord.ts

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