Export body/wrapper in HTML code

src/code_manager/index.js

@@ -187,7 +187,7 @@ module.exports = () => {
      * @example
      * var codeStr = codeManager.getCode(model, 'html');
      * */
-    getCode(model, genId, opt) {
+    getCode(model, genId, opt = {}) {
       var generator  = this.getGenerator(genId);
       return generator ? generator.build(model, opt) : '';
     },

src/code_manager/model/HtmlGenerator.js

@@ -2,18 +2,23 @@ var Backbone = require('backbone');
 
 module.exports = Backbone.Model.extend({
 
-  /** @inheritdoc */
-  build(model, cssc) {
-    var coll = model.get('components') || model,
-      code = '';
+  build(model, opts = {}) {
+    const models = model.get('components');
 
-    coll.each(m => {
-      code += m.toHTML({
-        cssc
-      });
-    }, this);
+    if (opts.exportWrapper) {
+      return opts.wrappesIsBody ?
+        `<body>${this.buildModels(models)}</body>` : model.toHTML();
+    }
 
-    return code;
+    return this.buildModels(models);
   },
 
+  buildModels(models) {
+    let code = '';
+    models.each(model => {
+      code += model.toHTML();
+    });
+    return code;
+  }
+
 });

src/dom_components/config/config.js

@@ -7,6 +7,8 @@ module.exports = {
 
   // Default wrapper configuration
   wrapper: {
+    wrapper: 1,
+    style: {margin: 0},
     removable: false,
     copyable: false,
     draggable: false,

src/editor/config/config.js

@@ -23,9 +23,6 @@ module.exports = {
   // Clear the canvas when editor.render() is called
   clearOnRender: false,
 
-  // Return JS of components inside HTML from 'editor.getHtml()'
-  jsInHtml: true,
-
   // On creation of a new Component (via object), if the 'style' attribute is not
   // empty, all those roles will be moved in its new class
   forceClass: true,
@@ -37,7 +34,7 @@ module.exports = {
   width: '100%',
 
   // CSS that could only be seen (for instance, inside the code viewer)
-  protectedCss: '*{box-sizing: border-box;} body{margin: 0;}',
+  protectedCss: '*{box-sizing: border-box;}',
 
   // CSS for the iframe which containing the canvas, useful if you need to custom something inside
   // (eg. the style of the selected component)
@@ -72,6 +69,15 @@ module.exports = {
   // elements inside canvas
   loadCompsOnRender: 1,
 
+  // Return JS of components inside HTML from 'editor.getHtml()'
+  jsInHtml: true,
+
+  // Show the wrapper component in the final code, eg. in editor.getHtml()
+  exportWrapper: 0,
+
+  // The wrapper, if visible, will be shown as a `<body>`
+  wrappesIsBody: 1,
+
   // Dom element
   el: '',
 

src/editor/model/Editor.js

@@ -406,10 +406,15 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   getHtml() {
-    var js = this.config.jsInHtml ? this.getJs() : '';
+    const config = this.config;
+    const exportWrapper = config.exportWrapper;
+    const wrappesIsBody = config.wrappesIsBody;
+    const js = config.jsInHtml ? this.getJs() : '';
     var wrp  = this.get('DomComponents').getComponent();
-    var html = this.get('CodeManager').getCode(wrp, 'html');
-    html += js ? '<script>'+ js +'</script>' : '';
+    var html = this.get('CodeManager').getCode(wrp, 'html', {
+      exportWrapper, wrappesIsBody
+    });
+    html += js ? `<script>${js}</script>` : '';
     return html;
   },