Add Panels and Style Manager API in docs

docs/.vuepress/config.js

@@ -59,6 +59,7 @@ module.exports = {
         ['/api/commands', 'Commands'],
         ['/api/components', 'DOM Components'],
         ['/api/panels', 'Panels'],
+        ['/api/style_manager', 'Style Manager'],
       ],
       '/': [
         '',

docs/api.js

@@ -10,7 +10,8 @@ const cmds = [
   // ['block_manager/index.js', 'block_manager.md'],
   // ['commands/index.js', 'commands.md'],
   // ['dom_components/index.js', 'components.md'],
-  ['panels/index.js', 'panels.md'],
+  // ['panels/index.js', 'panels.md'],
+  ['style_manager/index.js', 'style_manager.md'],
   /*
   ['style_manager/index.js', 'style_manager.md'],
   ['storage_manager/index.js', 'storage_manager.md'],

docs/api/panels.md

@@ -2,54 +2,32 @@
 
 ## Panels
 
--   [addPanel][1]
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
--   [addButton][2]
--   [removeButton][3]
--   [getButton][4]
--   [getPanel][5]
--   [getPanels][6]
--   [render][7]
-
-This module manages panels and buttons inside the editor.
-You can init the editor with all panels and buttons necessary via configuration
 
 ```js
-var editor = grapesjs.init({
+const editor = grapesjs.init({
-  ...
+ panels: {
- panels: {...} // Check below for the possible properties
+   // options
-  ...
+ }
-});
+})
 ```
 
-Before using methods you should get first the module from the editor instance, in this way:
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
 ```js
-var panelManager = editor.Panels;
+const panelManager = editor.Panels;
 ```
 
-### Parameters
+-   [addPanel][2]
-
+-   [addButton][3]
--   `config` **[Object][8]** Configurations
+-   [removeButton][4]
-    -   `config.defaults` **[Array][9]<[Object][8]>** Array of possible panels (optional, default `[]`)
+-   [getButton][5]
-
+-   [getPanel][6]
-### Examples
+-   [getPanels][7]
-
+-   [getPanelsEl][8]
-```javascript
+-   [removePanel][9]
-...
+-   [removeButton][10]
-panels: {
+-   [render][11]
-   defaults: [{
-     id: 'main-toolbar',
-     buttons: [{
-       id: 'btn-id',
-       className: 'some',
-       attributes: {
-         title: 'MyTitle'
-       }
-     }],
-    }],
-}
-...
-```
 
 ## init
 
@@ -57,7 +35,7 @@ Initialize module. Automatically called with a new instance of the editor
 
 ### Parameters
 
--   `config` **[Object][8]** Configurations
+-   `config` **[Object][12]** Configurations
 
 ## getPanels
 
@@ -69,7 +47,7 @@ Returns **Collection** Collection of panel
 
 Returns panels element
 
-Returns **[HTMLElement][10]** 
+Returns **[HTMLElement][13]** 
 
 ## addPanel
 
@@ -77,7 +55,7 @@ Add new panel to the collection
 
 ### Parameters
 
--   `panel` **([Object][8] | Panel)** Object with right properties or an instance of Panel
+-   `panel` **([Object][12] | Panel)** Object with right properties or an instance of Panel
 
 ### Examples
 
@@ -97,7 +75,7 @@ Remove a panel from the collection
 
 ### Parameters
 
--   `panel` **([Object][8] | Panel | [String][11])** Object with right properties or an instance of Panel or Painel id
+-   `panel` **([Object][12] | Panel | [String][14])** Object with right properties or an instance of Panel or Painel id
 
 ### Examples
 
@@ -119,7 +97,7 @@ Get panel by ID
 
 ### Parameters
 
--   `id` **[string][11]** Id string
+-   `id` **[string][14]** Id string
 
 ### Examples
 
@@ -135,8 +113,8 @@ Add button to the panel
 
 ### Parameters
 
--   `panelId` **[string][11]** Panel's ID
+-   `panelId` **[string][14]** Panel's ID
--   `button` **([Object][8] | Button)** Button object or instance of Button
+-   `button` **([Object][12] | Button)** Button object or instance of Button
 
 ### Examples
 
@@ -174,8 +152,8 @@ Remove button from the panel
 
 ### Parameters
 
--   `panelId` **[string][11]** Panel's ID
+-   `panelId` **[string][14]** Panel's ID
--   `button` **([Object][8] | Button | [String][11])** Button object or instance of Button or button id
+-   `button` **([Object][12] | Button | [String][14])** Button object or instance of Button or button id
 
 ### Examples
 
@@ -200,8 +178,8 @@ Get button from the panel
 
 ### Parameters
 
--   `panelId` **[string][11]** Panel's ID
+-   `panelId` **[string][14]** Panel's ID
--   `id` **[string][11]** Button's ID
+-   `id` **[string][14]** Button's ID
 
 ### Examples
 
@@ -215,26 +193,32 @@ Returns **(Button | null)**
 
 Render panels and buttons
 
-Returns **[HTMLElement][10]** 
+Returns **[HTMLElement][13]** 
+
+[1]: https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js
+
+[2]: #addpanel
+
+[3]: #addbutton
 
-[1]: #addpanel
+[4]: #removebutton
 
-[2]: #addbutton
+[5]: #getbutton
 
-[3]: #removebutton
+[6]: #getpanel
 
-[4]: #getbutton
+[7]: #getpanels
 
-[5]: #getpanel
+[8]: #getpanelsel
 
-[6]: #getpanels
+[9]: #removepanel
 
-[7]: #render
+[10]: #removeButton
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[11]: #render
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[12]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[10]: https://developer.mozilla.org/docs/Web/HTML/Element
+[13]: https://developer.mozilla.org/docs/Web/HTML/Element
 
-[11]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[14]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String

docs/api/style_manager.md

@@ -2,57 +2,44 @@
 
 ## StyleManager
 
-With Style Manager you basically build categories (called sectors) of CSS properties which could
+With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
-be used to custom components and classes.
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
-You can init the editor with all sectors and properties via configuration
 
 ```js
-var editor = grapesjs.init({
+const editor = grapesjs.init({
-  ...
+ styleManager: {
- styleManager: {...} // Check below for the possible properties
+   // options
-  ...
+ }
-});
+})
 ```
 
-Before using methods you should get first the module from the editor instance, in this way:
+Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
 
 ```js
-var styleManager = editor.StyleManager;
+const styleManager = editor.StyleManager;
 ```
 
-### Parameters
+-   [getConfig][2]
-
+-   [addSector][3]
--   `config` **[Object][1]** Configurations
+-   [getSector][4]
-    -   `config.sectors` **[Array][2]<[Object][1]>** Array of possible sectors (optional, default `[]`)
+-   [removeSector][5]
+-   [getSectors][6]
+-   [addProperty][7]
+-   [getProperty][8]
+-   [removeProperty][9]
+-   [getProperties][10]
+-   [getModelToStyle][11]
+-   [getModelToStyle][11]
+-   [addType][12]
+-   [getType][13]
+-   [getTypes][14]
+-   [createType][15]
 
-### Examples
+## getConfig
-
-```javascript
-...
-styleManager: {
-   sectors: [{
-     id: 'dim',
-     name: 'Dimension',
-     properties: [{
-       name: 'Width',
-       property: 'width',
-       type: 'integer',
-       units: ['px', '%'],
-       defaults: 'auto',
-       min: 0,
-}],
-    }],
-}
-...
-```
 
-## init
+Get configuration object
 
-Initialize module. Automatically called with a new instance of the editor
+Returns **[Object][16]** 
-
-### Parameters
-
--   `config` **[Object][1]** Configurations
 
 ## addSector
 
@@ -61,11 +48,11 @@ that one will be returned
 
 ### Parameters
 
--   `id` **[string][3]** Sector id
+-   `id` **[string][17]** Sector id
--   `sector` **[Object][1]** Object representing sector
+-   `sector` **[Object][16]** Object representing sector
-    -   `sector.name` **[string][3]** Sector's label (optional, default `''`)
+    -   `sector.name` **[string][17]** Sector's label (optional, default `''`)
-    -   `sector.open` **[Boolean][4]** Indicates if the sector should be opened (optional, default `true`)
+    -   `sector.open` **[Boolean][18]** Indicates if the sector should be opened (optional, default `true`)
-    -   `sector.properties` **[Array][2]<[Object][1]>** Array of properties (optional, default `[]`)
+    -   `sector.properties` **[Array][19]<[Object][16]>** Array of properties (optional, default `[]`)
 
 ### Examples
 
@@ -85,7 +72,7 @@ Get sector by id
 
 ### Parameters
 
--   `id` **[string][3]** Sector id
+-   `id` **[string][17]** Sector id
 
 ### Examples
 
@@ -101,7 +88,7 @@ Remove a sector by id
 
 ### Parameters
 
--   `id` **[string][3]** Sector id
+-   `id` **[string][17]** Sector id
 
 ### Examples
 
@@ -123,23 +110,23 @@ Add property to the sector identified by id
 
 ### Parameters
 
--   `sectorId` **[string][3]** Sector id
+-   `sectorId` **[string][17]** Sector id
--   `property` **[Object][1]** Property object
+-   `property` **[Object][16]** Property object
-    -   `property.name` **[string][3]** Name of the property (optional, default `''`)
+    -   `property.name` **[string][17]** Name of the property (optional, default `''`)
-    -   `property.property` **[string][3]** CSS property, eg. `min-height` (optional, default `''`)
+    -   `property.property` **[string][17]** CSS property, eg. `min-height` (optional, default `''`)
-    -   `property.type` **[string][3]** Type of the property: integer | radio | select | color | file | composite | stack (optional, default `''`)
+    -   `property.type` **[string][17]** Type of the property: integer | radio | select | color | file | composite | stack (optional, default `''`)
-    -   `property.units` **[Array][2]<[string][3]>** Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default `[]`)
+    -   `property.units` **[Array][19]<[string][17]>** Unit of measure available, eg. ['px','%','em']. Only for integer type (optional, default `[]`)
-    -   `property.unit` **[string][3]** Default selected unit from `units`. Only for integer type (optional, default `''`)
+    -   `property.unit` **[string][17]** Default selected unit from `units`. Only for integer type (optional, default `''`)
-    -   `property.min` **[number][5]** Min possible value. Only for integer type (optional, default `null`)
+    -   `property.min` **[number][20]** Min possible value. Only for integer type (optional, default `null`)
-    -   `property.max` **[number][5]** Max possible value. Only for integer type (optional, default `null`)
+    -   `property.max` **[number][20]** Max possible value. Only for integer type (optional, default `null`)
-    -   `property.defaults` **[string][3]** Default value (optional, default `''`)
+    -   `property.defaults` **[string][17]** Default value (optional, default `''`)
-    -   `property.info` **[string][3]** Some description (optional, default `''`)
+    -   `property.info` **[string][17]** Some description (optional, default `''`)
-    -   `property.icon` **[string][3]** Class name. If exists no text will be displayed (optional, default `''`)
+    -   `property.icon` **[string][17]** Class name. If exists no text will be displayed (optional, default `''`)
-    -   `property.preview` **[Boolean][4]** Show layers preview. Only for stack type (optional, default `false`)
+    -   `property.preview` **[Boolean][18]** Show layers preview. Only for stack type (optional, default `false`)
-    -   `property.functionName` **[string][3]** Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)` (optional, default `''`)
+    -   `property.functionName` **[string][17]** Indicates if value need to be wrapped in some function, for istance `transform: rotate(90deg)` (optional, default `''`)
-    -   `property.properties` **[Array][2]<[Object][1]>** Nested properties for composite and stack type (optional, default `[]`)
+    -   `property.properties` **[Array][19]<[Object][16]>** Nested properties for composite and stack type (optional, default `[]`)
-    -   `property.layers` **[Array][2]<[Object][1]>** Layers for stack properties (optional, default `[]`)
+    -   `property.layers` **[Array][19]<[Object][16]>** Layers for stack properties (optional, default `[]`)
-    -   `property.list` **[Array][2]<[Object][1]>** List of possible options for radio and select types (optional, default `[]`)
+    -   `property.list` **[Array][19]<[Object][16]>** List of possible options for radio and select types (optional, default `[]`)
 
 ### Examples
 
@@ -167,8 +154,8 @@ Get property by its CSS name and sector id
 
 ### Parameters
 
--   `sectorId` **[string][3]** Sector id
+-   `sectorId` **[string][17]** Sector id
--   `name` **[string][3]** CSS property name, eg. 'min-height'
+-   `name` **[string][17]** CSS property name, eg. 'min-height'
 
 ### Examples
 
@@ -184,8 +171,8 @@ Remove a property from the sector
 
 ### Parameters
 
--   `sectorId` **[string][3]** Sector id
+-   `sectorId` **[string][17]** Sector id
--   `name` **[string][3]** CSS property name, eg. 'min-height'
+-   `name` **[string][17]** CSS property name, eg. 'min-height'
 
 ### Examples
 
@@ -201,7 +188,7 @@ Get properties of the sector
 
 ### Parameters
 
--   `sectorId` **[string][3]** Sector id
+-   `sectorId` **[string][17]** Sector id
 
 ### Examples
 
@@ -230,20 +217,25 @@ Add new property type
 
 ### Parameters
 
--   `id` **[string][3]** Type ID
+-   `id` **[string][17]** Type ID
--   `definition` **[Object][1]** Definition of the type. Each definition contains
+-   `definition` **[Object][16]** Definition of the type. Each definition contains
                                `model` (business logic), `view` (presentation logic)
                                and `isType` function which recognize the type of the
                                passed entity
-    addType('my-type', {
+
-     model: {},
+### Examples
-     view: {},
+
-     isType: (value) => {
+```javascript
-       if (value && value.type == 'my-type') {
+styleManager.addType('my-type', {
-         return value;
+ model: {},
-       }
+ view: {},
-     },
+ isType: (value) => {
-    })
+   if (value && value.type == 'my-type') {
+     return value;
+   }
+ },
+})
+```
 
 ## getType
 
@@ -251,15 +243,15 @@ Get type
 
 ### Parameters
 
--   `id` **[string][3]** Type ID
+-   `id` **[string][17]** Type ID
 
-Returns **[Object][1]** Type definition
+Returns **[Object][16]** Type definition
 
 ## getTypes
 
 Get all types
 
-Returns **[Array][2]** 
+Returns **[Array][19]** 
 
 ## createType
 
@@ -267,10 +259,10 @@ Create new property from type
 
 ### Parameters
 
--   `id` **[string][3]** Type ID
+-   `id` **[string][17]** Type ID
--   `options` **[Object][1]** Options (optional, default `{}`)
+-   `options` **[Object][16]** Options (optional, default `{}`)
-    -   `options.model` **[Object][1]** Custom model object (optional, default `{}`)
+    -   `options.model` **[Object][16]** Custom model object (optional, default `{}`)
-    -   `options.view` **[Object][1]** Custom view object (optional, default `{}`)
+    -   `options.view` **[Object][16]** Custom view object (optional, default `{}`)
 
 ### Examples
 
@@ -285,20 +277,42 @@ someContainer.appendChild(propView.el);
 
 Returns **PropertyView** 
 
-## render
+[1]: https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js
+
+[2]: #getconfig
+
+[3]: #addsector
+
+[4]: #getsector
+
+[5]: #removesector
+
+[6]: #getsectors
+
+[7]: #addproperty
+
+[8]: #getproperty
+
+[9]: #removeproperty
+
+[10]: #getproperties
+
+[11]: #getmodeltostyle
+
+[12]: #addtype
 
-Render sectors and properties
+[13]: #gettype
 
-Returns **[HTMLElement][6]** 
+[14]: #gettypes
 
-[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[15]: #createtype
 
-[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
+[16]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
 
-[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[17]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[4]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[18]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number
+[19]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array
 
-[6]: https://developer.mozilla.org/docs/Web/HTML/Element
+[20]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number

src/commands/index.js

@@ -20,6 +20,7 @@
  *
  * @module Commands
  */
+
 import { isFunction } from 'underscore';
 
 module.exports = () => {

src/panels/index.js

@@ -1,4 +1,18 @@
 /**
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/panels/config/config.js)
+ * ```js
+ * const editor = grapesjs.init({
+ *  panels: {
+ *    // options
+ *  }
+ * })
+ * ```
+ *
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
+ *
+ * ```js
+ * const panelManager = editor.Panels;
+ * ```
  *
  * * [addPanel](#addpanel)
  * * [addButton](#addbutton)
@@ -6,45 +20,13 @@
  * * [getButton](#getbutton)
  * * [getPanel](#getpanel)
  * * [getPanels](#getpanels)
- * * [render](#render)
+ * * [getPanelsEl](#getpanelsel)
- *
+ * * [removePanel](#removepanel)
- * This module manages panels and buttons inside the editor.
+ * * [removeButton](#removeButton)
- * You can init the editor with all panels and buttons necessary via configuration
- *
- * ```js
- * var editor = grapesjs.init({
- *   ...
- *  panels: {...} // Check below for the possible properties
- *   ...
- * });
- * ```
- *
- *
- * Before using methods you should get first the module from the editor instance, in this way:
- *
- * ```js
- * var panelManager = editor.Panels;
- * ```
  *
  * @module Panels
- * @param {Object} config Configurations
- * @param {Array<Object>} [config.defaults=[]] Array of possible panels
- * @example
- * ...
- * panels: {
- *    defaults: [{
- *      id: 'main-toolbar',
- *      buttons: [{
- *        id: 'btn-id',
- *        className: 'some',
- *        attributes: {
- *          title: 'MyTitle'
- *        }
- *      }],
- *     }],
- * }
- * ...
  */
+
 module.exports = () => {
   var c = {},
     defaults = require('./config/config'),
@@ -65,6 +47,7 @@ module.exports = () => {
     /**
      * Initialize module. Automatically called with a new instance of the editor
      * @param {Object} config Configurations
+     * @private
      */
     init(config) {
       c = config || {};
@@ -222,6 +205,7 @@ module.exports = () => {
     /**
      * Render panels and buttons
      * @return {HTMLElement}
+     * @private
      */
     render() {
       return PanelsViewObj.render().el;

src/style_manager/index.js

@@ -1,43 +1,39 @@
 /**
- * With Style Manager you basically build categories (called sectors) of CSS properties which could
+ * With Style Manager you build categories (called sectors) of CSS properties which could be used to customize the style of components.
- * be used to custom components and classes.
+ * You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object](https://github.com/artf/grapesjs/blob/master/src/style_manager/config/config.js)
- * You can init the editor with all sectors and properties via configuration
- *
  * ```js
- * var editor = grapesjs.init({
+ * const editor = grapesjs.init({
- *   ...
+ *  styleManager: {
- *  styleManager: {...} // Check below for the possible properties
+ *    // options
- *   ...
+ *  }
- * });
+ * })
  * ```
  *
- * Before using methods you should get first the module from the editor instance, in this way:
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
  *
  * ```js
- * var styleManager = editor.StyleManager;
+ * const styleManager = editor.StyleManager;
  * ```
  *
+ * * [getConfig](#getconfig)
+ * * [addSector](#addsector)
+ * * [getSector](#getsector)
+ * * [removeSector](#removesector)
+ * * [getSectors](#getsectors)
+ * * [addProperty](#addproperty)
+ * * [getProperty](#getproperty)
+ * * [removeProperty](#removeproperty)
+ * * [getProperties](#getproperties)
+ * * [getModelToStyle](#getmodeltostyle)
+ * * [getModelToStyle](#getmodeltostyle)
+ * * [addType](#addtype)
+ * * [getType](#gettype)
+ * * [getTypes](#gettypes)
+ * * [createType](#createtype)
+ *
  * @module StyleManager
- * @param {Object} config Configurations
- * @param {Array<Object>} [config.sectors=[]] Array of possible sectors
- * @example
- * ...
- * styleManager: {
- *    sectors: [{
- *      id: 'dim',
- *      name: 'Dimension',
- *      properties: [{
- *        name: 'Width',
- *        property: 'width',
- *        type: 'integer',
- *        units: ['px', '%'],
- *        defaults: 'auto',
- *        min: 0,
-          }],
- *     }],
- * }
- * ...
  */
+
 import { isElement } from 'underscore';
 
 module.exports = () => {
@@ -60,7 +56,6 @@ module.exports = () => {
     /**
      * Get configuration object
      * @return {Object}
-     * @private
      */
     getConfig() {
       return c;
@@ -69,6 +64,7 @@ module.exports = () => {
     /**
      * Initialize module. Automatically called with a new instance of the editor
      * @param {Object} config Configurations
+     * @private
      */
     init(config) {
       c = config || {};
@@ -304,7 +300,8 @@ module.exports = () => {
      *                            `model` (business logic), `view` (presentation logic)
      *                            and `isType` function which recognize the type of the
      *                            passed entity
-     * addType('my-type', {
+     *@example
+     * styleManager.addType('my-type', {
      *  model: {},
      *  view: {},
      *  isType: (value) => {
@@ -365,6 +362,7 @@ module.exports = () => {
     /**
      * Render sectors and properties
      * @return  {HTMLElement}
+     * @private
      * */
     render() {
       return SectView.render().el;