Add append and components methods to Component model

package.json

@@ -1,7 +1,7 @@
 {
   "name": "grapesjs",
   "description": "Free and Open Source Web Builder Framework",
-  "version": "0.12.8",
+  "version": "0.12.9",
   "author": "Artur Arseniev",
   "license": "BSD-3-Clause",
   "homepage": "http://grapesjs.com",

src/dom_components/model/Component.js

@@ -1,3 +1,4 @@
+import { isUndefined, isArray } from 'underscore';
 import Styleable from 'domain_abstract/model/Styleable';
 
 var Backbone = require('backbone');
@@ -216,6 +217,49 @@ module.exports = Backbone.Model.extend(Styleable).extend({
    */
   init() {},
 
+
+  /**
+   * Add new component children
+   * @param  {Component|string} components Component to add
+   * @param {Object} [opts={}] Options, same as in `model.add()`(from backbone)
+   * @return {Array} Array of appended components
+   * @example
+   * someModel.get('components').lenght // -> 0
+   * const videoComponent = someModel.append('<video></video><div></div>')[0];
+   * // This will add 2 components (`video` and `div`) to your `someModel`
+   * someModel.get('components').lenght // -> 2
+   * // You can pass components directly
+   * otherModel.append(otherModel2);
+   * otherModel.append([otherModel3, otherModel4]);
+   */
+  append(components, opts = {}) {
+    const result = this.components().add(components, opts);
+    return isArray(result) ? result : [result];
+  },
+
+
+  /**
+   * Set new collection if `components` are provided, otherwise the
+   * current collection is returned
+   * @param  {Component|string} [components] Components to set
+   * @return {Collection|undefined}
+   * @example
+   * // Get current collection
+   * const collection = model.components();
+   * // Set new collection
+   * model.components('<span></span><div></div>');
+   */
+  components(components) {
+    const coll = this.get('components');
+
+    if (isUndefined(components)) {
+      return coll;
+    } else {
+      coll.reset();
+      components && this.append(components);
+    }
+  },
+
   /**
    * Script updated
    */

src/dom_components/model/Components.js

@@ -9,8 +9,8 @@ module.exports = Backbone.Collection.extend({
     this.config = opt && opt.config ? opt.config : null;
 
     // Inject editor
-    if(opt && opt.sm)
-      this.editor = opt.sm;
+    if(opt && (opt.sm || opt.em))
+      this.editor = opt.sm || opt.em;
 
     this.model  = (attrs, options) => {
       var model;

test/specs/dom_components/model/Component.js

@@ -17,15 +17,16 @@ module.exports = {
       let compOpts;
       let em;
 
-      describe('Component', () => {
+      describe.only('Component', () => {
 
         beforeEach(() => {
           em = new Editor({});
-          obj = new Component({}, {em});
           dcomp = new DomComponents();
           compOpts = {
+            em,
             componentTypes: dcomp.componentTypes,
           };
+          obj = new Component({}, compOpts);
         });
 
         afterEach(() => {
@@ -182,6 +183,37 @@ module.exports = {
           obj.setAttributes({'data-test': 'value2'});
           expect(obj.getAttributes()).toEqual({'data-test': 'value2'});
         });
+
+        it('append() returns always an array', () => {
+          let result = obj.append('<span>text1</span>');
+          expect(result.length).toEqual(1);
+          result = obj.append('<span>text1</span><div>text2</div>');
+          expect(result.length).toEqual(2);
+        });
+
+        it('append() new components as string', () => {
+          obj.append('<span>text1</span><div>text2</div>');
+          const comps = obj.components();
+          expect(comps.length).toEqual(2);
+          expect(comps.models[0].get('tagName')).toEqual('span');
+          expect(comps.models[1].get('tagName')).toEqual('div');
+        });
+
+        it('append() new components as Objects', () => {
+          obj.append([{}, {}]);
+          const comps = obj.components();
+          expect(comps.length).toEqual(2);
+          obj.append({});
+          expect(comps.length).toEqual(3);
+        });
+
+        it('components() set new collection', () => {
+          obj.append([{}, {}]);
+          obj.components('<span>test</div>');
+          const result = obj.components();
+          expect(result.length).toEqual(1);
+          expect(result.models[0].get('tagName')).toEqual('span');
+        });
     });
 
     describe('Image Component', () => {