diff --git a/src/code_manager/model/CssGenerator.js b/src/code_manager/model/CssGenerator.js index 0e96315e1..46a3f8cb0 100644 --- a/src/code_manager/model/CssGenerator.js +++ b/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(); diff --git a/src/code_manager/model/HtmlGenerator.js b/src/code_manager/model/HtmlGenerator.js index 7df04e637..83bf63cef 100644 --- a/src/code_manager/model/HtmlGenerator.js +++ b/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); } } diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js index b0e9f6fb3..0ec25000b 100644 --- a/src/css_composer/model/CssRule.js +++ b/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'; diff --git a/src/dom_components/index.js b/src/dom_components/index.js index 82a1f1b1d..d508b20dc 100644 --- a/src/dom_components/index.js +++ b/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', diff --git a/src/dom_components/model/ComponentWrapper.js b/src/dom_components/model/ComponentWrapper.js index 4788ee4ee..6e4a17f51 100644 --- a/src/dom_components/model/ComponentWrapper.js +++ b/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, diff --git a/src/dom_components/view/ComponentWrapperView.js b/src/dom_components/view/ComponentWrapperView.js new file mode 100644 index 000000000..ead11cd99 --- /dev/null +++ b/src/dom_components/view/ComponentWrapperView.js @@ -0,0 +1,7 @@ +import ComponentView from './ComponentView'; + +export default class ComponentWrapperView extends ComponentView { + tagName() { + return 'div'; + } +} diff --git a/src/editor/config/config.js b/src/editor/config/config.js index 71c2fc1bc..4725de1c5 100644 --- a/src/editor/config/config.js +++ b/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 `` - wrapperIsBody: 1, - // Pass default available options wherever `editor.getHtml()` is called optsHtml: {}, diff --git a/src/editor/model/Editor.js b/src/editor/model/Editor.js index e3099f842..ca3029d09 100644 --- a/src/editor/model/Editor.js +++ b/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,