Multiple spots transclusion for flo-editor

src/demo/app/app.component.html

@@ -8,6 +8,7 @@
 </div>
 <div id="flo-container">
   <flo-editor (floApi)="editorContext = $event" [metamodel]="metamodel" [renderer]="renderer" [editor]="editor" [paletteSize]="paletteSize" [paletteEntryPadding]="{width: 4, height: 4}" [(dsl)]="dsl" [paperPadding]="20" (validationMarkers)="markersChanged($event)">
+    <div flo-editor-header>
       <div id="controls" class="controls">
         <button class="button" id="clearGraph" (click)="editorContext.clearGraph()">Create New Flow</button>
         <!-- let's use the 'x' control on the nodes themselves when they are selected
@@ -34,8 +35,9 @@
       <div class="flow-definition-container">
         <dsl-editor *ngIf="dslEditor" [(dsl)]="dsl" line-numbers="true" line-wrapping="true" (blur)="editorContext.graphToTextSync=true" (focus)="editorContext.graphToTextSync=false" placeholder="Enter stream definition..."></dsl-editor>
         <textarea *ngIf="!dslEditor" id="flow-definition" class="flow-definition" placeholder="Enter stream definition..."
-                [value]="dsl" (keyup)="dsl=$event.target.value" (blur)="editorContext.graphToTextSync=true" (focus)="editorContext.graphToTextSync=false"></textarea>
+                  [value]="dsl" (keyup)="dsl=$event.target.value" (blur)="editorContext.graphToTextSync=true" (focus)="editorContext.graphToTextSync=false"></textarea>
       </div>
+    </div>
   </flo-editor>
 </div>
 

src/lib/editor/editor.component.html

@@ -1,4 +1,4 @@
-<ng-content></ng-content>
+<ng-content select="[flo-editor-header]"></ng-content>
 <div id="flow-view" class="flow-view" style="position:relative">
   <div id="canvas" class="canvas" style="position:relative; display: block; width: 100%; height: 100%;">
     <div *ngIf="!noPalette" id="palette-container" class="palette-container" style="overflow:hidden;">
@@ -47,6 +47,10 @@
         </table>
       </span>
 
+      <ng-content select="[flo-canvas-actions]"></ng-content>
+
     </div>
   </div>
 </div>
+<ng-content select="[flo-editor-footer]"></ng-content>
+

src/lib/palette/palette.component.scss

@@ -35,11 +35,13 @@
 
 .palette-filter {
   border: 3px solid #6db33f;
+  font-size:24px;
+  background-color: white;
 }
 
 .palette-filter-textfield {
   width: 100%;
-  font-size:24px;
+  border: none;
   /* border: 3px solid #6db33f;
  */	font-family: "Varela Round",sans-serif;
   /* 	padding: 2px; */