Remove `config.wrapperIsBody` and `config.exportWrapper` options.

src/code_manager/model/CssGenerator.js

@@ -27,17 +27,13 @@ export default Backbone.Model.extend({
     const avoidInline = em && em.getConfig('avoidInlineStyle');
     const style = model.styleToString();
     const classes = model.get('classes');
-    const wrapperIsBody = opts.wrapperIsBody;
-    const isWrapper = model.get('wrapper');
     this.ids.push(`#${model.getId()}`);
 
     // Let's know what classes I've found
     classes.each(model => this.compCls.push(model.getFullName()));
 
     if (!avoidInline && style) {
-      let selector = `#${model.getId()}`;
-      selector = wrapperIsBody && isWrapper ? 'body' : selector;
-      code = `${selector}{${style}}`;
+      code = `#${model.getId()}{${style}}`;
     }
 
     const components = model.components();

src/code_manager/model/HtmlGenerator.js

@@ -2,7 +2,6 @@ import { Model } from 'backbone';
 
 export default class HTMLGenerator extends Model {
   build(model, opts = {}) {
-    const models = model.components();
     const htmlOpts = {};
     const { em } = opts;
 
@@ -33,19 +32,6 @@ export default class HTMLGenerator extends Model {
       };
     }
 
-    if (opts.exportWrapper) {
-      return model.toHTML({
-        ...htmlOpts,
-        ...(opts.wrapperIsBody && model.is('wrapper') && { tag: 'body' })
-      });
-    }
-
-    return this.buildModels(models, htmlOpts);
-  }
-
-  buildModels(models, opts = {}) {
-    let code = '';
-    models.forEach(mod => (code += mod.toHTML(opts)));
-    return code;
+    return model.toHTML(htmlOpts);
   }
 }

src/css_composer/model/CssRule.js

@@ -36,7 +36,7 @@ export default class CssRule extends Model.extend(Styleable) {
       singleAtRule: false,
       important: false,
       group: '',
-      _undo: true
+      _undo: true,
     };
   }
 
@@ -115,15 +115,11 @@ export default class CssRule extends Model.extend(Styleable) {
   selectorsToString(opts = {}) {
     const result = [];
     const state = this.get('state');
-    const wrapper = this.get('wrapper');
     const addSelector = this.get('selectorsAdd');
-    const isBody = wrapper && opts.body;
     const selOpts = {
-      escape: str => (CSS && CSS.escape ? CSS.escape(str) : str)
+      escape: str => (CSS && CSS.escape ? CSS.escape(str) : str),
     };
-    const selectors = isBody
-      ? 'body'
-      : this.get('selectors').getFullString(0, selOpts);
+    const selectors = this.get('selectors').getFullString(0, selOpts);
     const stateStr = state && !opts.skipState ? `:${state}` : '';
     selectors && result.push(`${selectors}${stateStr}`);
     addSelector && !opts.skipAdd && result.push(addSelector);
@@ -169,10 +165,7 @@ export default class CssRule extends Model.extend(Styleable) {
     if (atRuleType !== 'media' || !mediaText) {
       return deviceDefault || null;
     }
-    return (
-      devices.filter(d => d.getWidthMedia() === getMediaLength(mediaText))[0] ||
-      null
-    );
+    return devices.filter(d => d.getWidthMedia() === getMediaLength(mediaText))[0] || null;
   }
 
   /**
@@ -262,10 +255,7 @@ export default class CssRule extends Model.extend(Styleable) {
     const wd = width || '';
     const selAdd = ruleProps.selectorsAdd || '';
     let atRule = ruleProps.atRuleType || '';
-    const sel =
-      !isArray(selectors) && !selectors.models
-        ? [selectors]
-        : selectors.models || selectors;
+    const sel = !isArray(selectors) && !selectors.models ? [selectors] : selectors.models || selectors;
 
     // Fix atRuleType in case is not specified with width
     if (wd && !atRule) atRule = 'media';

src/dom_components/index.js

@@ -58,6 +58,7 @@ import defaults from './config/config';
 import Component, { keyUpdate, keyUpdateInside } from './model/Component';
 import Components from './model/Components';
 import ComponentView from './view/ComponentView';
+import ComponentWrapperView from './view/ComponentWrapperView';
 import ComponentsView from './view/ComponentsView';
 import ComponentTableCell from './model/ComponentTableCell';
 import ComponentTableCellView from './view/ComponentTableCellView';
@@ -196,7 +197,7 @@ export default () => {
     {
       id: 'wrapper',
       model: ComponentWrapper,
-      view: ComponentView,
+      view: ComponentWrapperView,
     },
     {
       id: 'default',

src/dom_components/model/ComponentWrapper.js

@@ -4,6 +4,7 @@ export default class ComponentWrapper extends Component {
   defaults() {
     return {
       ...Component.getDefaults(),
+      tagName: 'body',
       removable: false,
       copyable: false,
       draggable: false,

src/dom_components/view/ComponentWrapperView.js

@@ -0,0 +1,7 @@
+import ComponentView from './ComponentView';
+
+export default class ComponentWrapperView extends ComponentView {
+  tagName() {
+    return 'div';
+  }
+}

src/editor/config/config.js

@@ -114,12 +114,6 @@ export default {
   // Enable multiple selection
   multipleSelection: 1,
 
-  // Show the wrapper component in the final code, eg. in editor.getHtml()
-  exportWrapper: 0,
-
-  // The wrapper, if visible, will be shown as a `<body>`
-  wrapperIsBody: 1,
-
   // Pass default available options wherever `editor.getHtml()` is called
   optsHtml: {},
 

src/editor/model/Editor.js

@@ -557,13 +557,11 @@ export default class EditorModel extends Model {
    */
   getHtml(opts = {}) {
     const { config } = this;
-    const { optsHtml, exportWrapper, wrapperIsBody } = config;
+    const { optsHtml } = config;
     const js = config.jsInHtml ? this.getJs(opts) : '';
     const cmp = opts.component || this.get('DomComponents').getComponent();
     let html = cmp
       ? this.get('CodeManager').getCode(cmp, 'html', {
-          exportWrapper,
-          wrapperIsBody,
           ...optsHtml,
           ...opts,
         })
@@ -580,7 +578,7 @@ export default class EditorModel extends Model {
    */
   getCss(opts = {}) {
     const config = this.config;
-    const { optsCss, wrapperIsBody } = config;
+    const { optsCss } = config;
     const avoidProt = opts.avoidProtected;
     const keepUnusedStyles = !isUndefined(opts.keepUnusedStyles) ? opts.keepUnusedStyles : config.keepUnusedStyles;
     const cssc = this.get('CssComposer');
@@ -590,7 +588,6 @@ export default class EditorModel extends Model {
       wrp &&
       this.get('CodeManager').getCode(wrp, 'css', {
         cssc,
-        wrapperIsBody,
         keepUnusedStyles,
         ...optsCss,
         ...opts,