Add `appendTo` option to TraitManager

src/editor/config/config.js

@@ -230,9 +230,12 @@ module.exports = {
     ]
   },
 
-  //Configurations for Block Manager
+  // Configurations for Block Manager
   blockManager: {},
 
+  // Configurations for Trait Manager
+  traitManager: {},
+
   // Texts
 
   textViewCode: 'Code'

src/trait_manager/config/config.js

@@ -1,6 +1,10 @@
 module.exports = {
   stylePrefix: 'trt-',
 
+  // Specify the element to use as a container, string (query) or HTMLElement
+  // With the empty value, nothing will be rendered
+  appendTo: '',
+
   labelContainer: 'Component settings',
 
   // Placeholder label for text input types

src/trait_manager/index.js

@@ -1,4 +1,4 @@
-import { defaults } from 'underscore';
+import { defaults, isElement } from 'underscore';
 
 module.exports = () => {
   let c = {};
@@ -42,6 +42,15 @@ module.exports = () => {
       return this;
     },
 
+    postRender() {
+      const elTo = this.getConfig().appendTo;
+
+      if (elTo) {
+        const el = isElement(elTo) ? elTo : document.querySelector(elTo);
+        el.appendChild(this.render());
+      }
+    },
+
     /**
      *
      * Get Traits viewer
@@ -68,6 +77,10 @@ module.exports = () => {
      */
     getType(name) {
       return TraitsViewer.itemsView[name];
+    },
+
+    render() {
+      return TraitsViewer.render().el;
     }
   };
 };