Add extensibility to plugins

src/block_manager/view/BlocksView.js

@@ -105,6 +105,7 @@ function(Backbone, BlockView) {
      * Render new model inside the view
      * @param {Model} model
      * @param {Object} fragment Fragment collection
+     * @private
      * */
     add: function(model, fragment){
       var frag = fragment || null;

src/device_manager/main.js

@@ -9,7 +9,7 @@
  * var deviceManager = editor.DeviceManager;
  * ```
  *
- * @module Devices
+ * @module DeviceManager
  * @param {Object} config Configurations
  * @param {Array<Object>} [config.devices=[]] Default devices
  * @example

src/device_manager/view/DevicesView.js

@@ -21,6 +21,7 @@ function(Backbone, devicesTemplate) {
     /**
      * Start adding new device
      * @return {[type]} [description]
+     * @private
      */
     startAdd: function(){},
 

src/editor/main.js

@@ -14,6 +14,9 @@
  * * [stopCommand](#stopcommand)
  * * [store](#store)
  * * [load](#load)
+ * * [getContainer](#getcontainer)
+ * * [on](#on)
+ * * [trigger](#trigger)
  * * [render](#render)
  *
  * Editor class contains the top level API which you'll probably use to custom the editor or extend it with plugins.
@@ -42,6 +45,8 @@
  * @param {Object} [config.panels={}] Panels configuration, see the relative documentation
  * @param {Object} [config.showDevices=true] If true render a select of available devices inside style manager panel
  * @param {string} [config.defaultCommand='select-comp'] Command to execute when no other command is running
+ * @param {Array} [config.plugins=[]] Array of plugins to execute on start
+ * @param {Object} [config.pluginsOpts={}] Custom options for plugins
  * @example
  * var editor = grapesjs.init({
  * 	container : '#gjs',

src/grapesjs/config/config.js

@@ -30,5 +30,8 @@ define(function () {
 
     // Array of plugins to init
     plugins: [],
+
+    // Custom options for plugins
+    pluginsOpts: {}
   };
 });

src/grapesjs/main.js

@@ -60,8 +60,9 @@ define(function (require) {
           if(c.plugins.indexOf(id) < 0)
             continue;
 
+          var opts = c.pluginsOpts[id] || {};
           var plug = plugins.get(id);
-          plug(editor);
+          plug(editor, opts);
         }
 
         if(c.autorender)

styles/css/main.css

@@ -3578,6 +3578,12 @@ ol.example li.placeholder:before {
 .wte-mdl-content {
   border-top: 1px solid rgba(255, 255, 255, 0.1); }
 
+#wte-mdl-c > div::after {
+  content: "";
+  clear: both;
+  display: block;
+  margin-bottom: 10px; }
+
 /********* Assets Manager **********/
 .wte-am-assets {
   height: 290px;

styles/scss/main.scss

@@ -1193,6 +1193,12 @@ $paddElClm: 5px 6px;
 .#{$mdl-prefix}content{
 	border-top: 1px solid $mainLhColor;
 }
+##{$mdl-prefix}c > div::after{
+  content: "";
+  clear: both;
+  display:block;
+  margin-bottom:10px;
+}
 
 /********* Assets Manager **********/
 .#{$am-prefix}assets{

test/specs/grapesjs/main.js

@@ -143,6 +143,19 @@ define(['GrapesJS', 'PluginManager', 'chai'],
         data.html.should.equal(htmlString);
       });
 
+      it('Execute plugins with custom options', function() {
+        var pluginName = storageId + '-plugin-opts';
+        obj.plugins.add(pluginName, function(edt, opts){
+          var opts = opts || {};
+          edt.customValue = opts.cVal || '';
+        });
+        config.plugins = [pluginName];
+        config.pluginsOpts = {};
+        config.pluginsOpts[pluginName] = {cVal: 'TEST'};
+        var editor = obj.init(config);
+        editor.customValue.should.equal('TEST');
+      });
+
       it('Execute custom command', function() {
         var editor = obj.init(config);
         editor.testVal = '';