Refactor the loading of configurations and `em` inside components

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({

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:

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);
     },
 
     /**

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');

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

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

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');
 

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,
 

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();