Convert code editor to new format

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

@@ -19,11 +19,11 @@
       <div class="editor-root ion-padding">
         <div
           class="host-container"
-          style="display: flex;"
+          style="display: flex; margin-bottom: 20px;"
           *ngFor="let node of editorService.immutableNodes"
         >
           <div class="host-icons">
-            <i class="type-icon norm fa" [ngClass]="typeIcons.norm" title="WYSIWYG Node"></i>
+            <i class="type-icon fa" [ngClass]="typeIcons[(node.isNorm() ? 'node' : node.type)] + ' ' + (node.isNorm() ? 'node' : node.type)" title="WYSIWYG Node"></i>
             <button (click)="onOptionsClick($event, node)">
               <i class="fa fa-ellipsis-v" title="Node options"></i>
             </button>
@@ -31,6 +31,9 @@
           <ng-container *ngIf="node.isNorm()">
             <editor-norm style="flex: 1;" [nodeId]="node.UUID"></editor-norm>
           </ng-container>
+          <ng-container *ngIf="node.type === 'code_ref'">
+            <editor-code style="flex: 1;" [nodeId]="node.UUID"></editor-code>
+          </ng-container>
         </div>
         <button class="host-add-button" (click)="onAddClick($event)">
           <i class="fa fa-plus"></i> Add Node

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

@@ -15,10 +15,19 @@ ion-icon.invisible {
 
 .type-icon {
   margin-bottom: 15px;
+  margin-top: 15px;
 
-  &.norm {
+  &.node {
     color: var(--noded-background-node);
   }
+
+  &.code_ref {
+    color: var(--noded-background-code);
+  }
+
+  &.db {
+    color: var(--noded-background-db);
+  }
 }
 
 .host-add-button {

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

@@ -24,6 +24,7 @@ export class EditorPage implements OnInit {
     page: 'fa fa-sticky-note',
     db: 'fa fa-database',
     code: 'fa fa-code',
+    code_ref: 'fa fa-code',
   };
 
   @Input() pageId: string;