diff --git a/src/css_composer/index.js b/src/css_composer/index.js index d56683cc7..4911c64e2 100644 --- a/src/css_composer/index.js +++ b/src/css_composer/index.js @@ -68,7 +68,6 @@ module.exports = () => { var elStyle = (c.em && c.em.config.style) || ''; c.rules = elStyle || c.rules; - c.sm = c.em; em = c.em; rules = new CssRules([], c); rulesView = new CssRulesView({ diff --git a/src/css_composer/model/CssRules.js b/src/css_composer/model/CssRules.js index 158761d94..2d7ba138c 100644 --- a/src/css_composer/model/CssRules.js +++ b/src/css_composer/model/CssRules.js @@ -4,13 +4,13 @@ var CssRule = require('./CssRule'); module.exports = Backbone.Collection.extend({ initialize(models, opt) { // Inject editor - if (opt && opt.sm) this.editor = opt.sm; + if (opt && opt.em) this.editor = opt.em; // Not used this.model = (attrs, options) => { var model; - if (!options.sm && opt && opt.sm) options.sm = opt.sm; + if (!options.em && opt && opt.em) options.em = opt.em; switch (1) { default: diff --git a/src/dom_components/index.js b/src/dom_components/index.js index d8e5a5668..019f6d0d2 100644 --- a/src/dom_components/index.js +++ b/src/dom_components/index.js @@ -211,7 +211,7 @@ module.exports = () => { } component = new Component(wrapper, { - sm: em, + em, config: c, componentTypes }); @@ -230,7 +230,7 @@ module.exports = () => { * @private */ onLoad() { - this.getComponents().reset(c.components); + this.setComponents(c.components); }, /** diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index c11994d34..5e2506bf6 100644 --- a/src/dom_components/model/Component.js +++ b/src/dom_components/model/Component.js @@ -141,7 +141,7 @@ const Component = Backbone.Model.extend(Styleable).extend( }, initialize(props = {}, opt = {}) { - const em = opt.sm || opt.em || ''; + const em = opt.em; // Propagate properties from parent if indicated const parent = this.parent(); @@ -171,7 +171,6 @@ const Component = Backbone.Model.extend(Styleable).extend( opt.em = em; this.opt = opt; - this.sm = em; this.em = em; this.config = opt.config || {}; this.ccid = Component.createId(this); @@ -555,10 +554,11 @@ const Component = Backbone.Model.extend(Styleable).extend( */ normalizeClasses(arr) { var res = []; + const em = this.em; - if (!this.sm.get) return; + if (!em) return; - var clm = this.sm.get('SelectorManager'); + var clm = em.get('SelectorManager'); if (!clm) return; arr.forEach(val => { @@ -734,7 +734,7 @@ const Component = Backbone.Model.extend(Styleable).extend( scr = scrStr.trim(); } - var config = this.sm.config || {}; + var config = this.em.getConfig(); var tagVarStart = escapeRegExp(config.tagVarStart || '{[ '); var tagVarEnd = escapeRegExp(config.tagVarEnd || ' ]}'); var reg = new RegExp(`${tagVarStart}([\\w\\d-]*)${tagVarEnd}`, 'g'); diff --git a/src/dom_components/model/ComponentImage.js b/src/dom_components/model/ComponentImage.js index 21cf03600..e27227899 100644 --- a/src/dom_components/model/ComponentImage.js +++ b/src/dom_components/model/ComponentImage.js @@ -26,9 +26,10 @@ module.exports = Component.extend( initToolbar(...args) { Component.prototype.initToolbar.apply(this, args); + const em = this.em; - if (this.sm && this.sm.get) { - var cmd = this.sm.get('Commands'); + if (em) { + var cmd = em.get('Commands'); var cmdName = 'image-editor'; // Add Image Editor button only if the default command exists diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js index f7ef96f41..5c357d437 100644 --- a/src/dom_components/model/ComponentVideo.js +++ b/src/dom_components/model/ComponentVideo.js @@ -125,7 +125,7 @@ module.exports = Component.extend( this.set('tagName', 'video'); } this.loadTraits(traits); - this.sm.trigger('change:selectedComponent'); + this.em.trigger('change:selectedComponent'); }, // Listen provider change and switch traits, in TraitView listen traits change diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index f7a7a67f6..c21c7b69a 100644 --- a/src/dom_components/model/Components.js +++ b/src/dom_components/model/Components.js @@ -3,27 +3,17 @@ import { isEmpty } from 'underscore'; const Backbone = require('backbone'); module.exports = Backbone.Collection.extend({ - initialize(models, opt) { - this.on('add', this.onAdd); - - this.config = opt && opt.config ? opt.config : null; - - // Inject editor - if (opt && (opt.sm || opt.em)) this.editor = opt.sm || opt.em; + initialize(models, opt = {}) { + this.listenTo(this, 'add', this.onAdd); + this.config = opt.config; + this.em = opt.em; this.model = (attrs, options) => { var model; - - if (!options.sm && opt && opt.sm) options.sm = opt.sm; - - if (!options.em && opt && opt.em) options.em = opt.em; - - if (opt && opt.config) options.config = opt.config; - - if (opt && opt.componentTypes) - options.componentTypes = opt.componentTypes; - var df = opt.componentTypes; + options.em = opt.em; + options.config = opt.config; + options.componentTypes = df; for (var it = 0; it < df.length; it++) { var dfId = df[it].id; @@ -44,10 +34,10 @@ module.exports = Backbone.Collection.extend({ add(models, opt = {}) { if (typeof models === 'string') { - var parsed = this.editor.get('Parser').parseHtml(models); + var parsed = this.em.get('Parser').parseHtml(models); models = parsed.html; - var cssc = this.editor.get('CssComposer'); + var cssc = this.em.get('CssComposer'); if (parsed.css && cssc) { var { avoidUpdateStyle } = opt; @@ -62,7 +52,7 @@ module.exports = Backbone.Collection.extend({ }, onAdd(model, c, opts) { - const em = this.editor; + const em = this.em; const style = model.getStyle(); const avoidInline = em && em.getConfig('avoidInlineStyle'); diff --git a/src/editor/config/config.js b/src/editor/config/config.js index a36f1ced6..751d8fd54 100644 --- a/src/editor/config/config.js +++ b/src/editor/config/config.js @@ -8,6 +8,9 @@ module.exports = { // CSS string or object of rules style: '', + // If true, will fetch HTML and CSS from selected container + fromElement: 0, + // Show an alert before unload the page with unsaved changes noticeOnUnload: true, diff --git a/src/index.js b/src/index.js index c6b41ce8d..2a28522ac 100644 --- a/src/index.js +++ b/src/index.js @@ -12,9 +12,6 @@ module.exports = (() => { // If true renders editor on init autorender: 1, - // If true, will fetch HTML and CSS from selected container - fromElement: 0, - // Array of plugins to init plugins: [], @@ -36,12 +33,10 @@ module.exports = (() => { * Initializes an editor based on passed options * @param {Object} config Configuration object * @param {string|HTMLElement} config.container Selector which indicates where render the editor - * @param {Object|string} config.components='' HTML string or Component model in JSON format - * @param {Object|string} config.style='' CSS string or CSS model in JSON format - * @param {Boolean} [config.fromElement=false] If true, will fetch HTML and CSS from the selected container + * @param {Boolean} [config.autorender=true] If true, auto-render the content * @param {Array} [config.plugins=[]] Array of plugins to execute on start * @param {Object} [config.pluginsOpts={}] Custom options for plugins - * @return {grapesjs.Editor} GrapesJS editor instance + * @return {Editor} Editor instance * @example * var editor = grapesjs.init({ * container: '#myeditor', @@ -52,7 +47,7 @@ module.exports = (() => { init(config = {}) { const els = config.container; if (!els) throw new Error("'container' is required"); - config = { ...config, ...defaultConfig }; + config = { ...defaultConfig, ...config }; const ilEl = els instanceof window.HTMLElement; config.el = ilEl ? els : document.querySelector(els); const editor = new Editor(config).init();