From a366616198d7eea790f26f7dfc383fe5f51902ce Mon Sep 17 00:00:00 2001
From: Kevin Chappell <kevin.b.chappell@gmail.com>
Date: Sat, 29 Feb 2020 20:39:31 -0800
Subject: [PATCH] fix: control container option

---
 src/js/components/controls/index.js |  6 ++++--
 src/js/editor.js                    | 17 +++++++++--------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/src/js/components/controls/index.js b/src/js/components/controls/index.js
index 6a8b0f61..b8c09844 100644
--- a/src/js/components/controls/index.js
+++ b/src/js/components/controls/index.js
@@ -289,7 +289,8 @@ export class Controls {
 
     this.dom = element
     this.groups = groups
-    this.currentGroup = groups[0]
+    const [firstGroup] = groups
+    this.currentGroup = firstGroup
 
     this.actions = {
       filter: term => {
@@ -396,7 +397,8 @@ export class Controls {
 
   applyOptions = (controlOptions = {}) => {
     this.options = {}
-    const { groupOrder = [], elements = [] } = controlOptions
+    const { groupOrder = [], elements = [], container } = controlOptions
+    this.container = container
     this.groupOrder = unique(groupOrder.concat(['common', 'html', 'layout']))
     this.options = merge(this.defaults, controlOptions)
     this.options.elements = elements.concat(defaultElements)
diff --git a/src/js/editor.js b/src/js/editor.js
index 5809d7a3..47a2e910 100644
--- a/src/js/editor.js
+++ b/src/js/editor.js
@@ -116,15 +116,13 @@ export class FormeoEditor {
    * @return {void}
    */
   render() {
-    const _this = this
-    const controls = this.controls.dom
     this.stages = Object.values(Components.get('stages'))
     const elemConfig = {
       attrs: {
         className: 'formeo formeo-editor',
-        id: _this.formId,
+        id: this.formId,
       },
-      content: [this.stages.map(({ dom }) => dom), controls],
+      content: [this.stages.map(({ dom }) => dom)],
     }
 
     if (i18n.current.dir) {
@@ -134,14 +132,17 @@ export class FormeoEditor {
 
     this.editor = dom.create(elemConfig)
 
-    if (_this.editorContainer) {
-      dom.empty(_this.editorContainer)
-      _this.editorContainer.appendChild(this.editor)
+    const controlsContainer = this.controls.container || this.editor
+    controlsContainer.appendChild(this.controls.dom)
+
+    if (this.editorContainer) {
+      dom.empty(this.editorContainer)
+      this.editorContainer.appendChild(this.editor)
     }
 
     Events.formeoLoaded = new window.CustomEvent('formeoLoaded', {
       detail: {
-        formeo: _this,
+        formeo: this,
       },
     })