Add DeviceManager API in docs

docs/.vuepress/config.js

@@ -61,6 +61,7 @@ module.exports = {
         ['/api/panels', 'Panels'],
         ['/api/style_manager', 'Style Manager'],
         ['/api/storage_manager', 'Storage Manager'],
+        ['/api/device_manager', 'Device Manager'],
       ],
       '/': [
         '',

docs/.vuepress/override.styl

@@ -2,7 +2,7 @@ $accentColor = #e2627f
 $accentColor = #e67891
 $navBarColor = white
 $scrollBarSize = 8px
-$pageWidth = 940px
+$pageWidth = 900px
 
 .navbar {
   background-color: rgb(111, 41, 67);

docs/api.js

@@ -12,9 +12,9 @@ const cmds = [
   // ['dom_components/index.js', 'components.md'],
   // ['panels/index.js', 'panels.md'],
   // ['style_manager/index.js', 'style_manager.md'],
-  ['storage_manager/index.js', 'storage_manager.md'],
+  // ['storage_manager/index.js', 'storage_manager.md'],
+  ['device_manager/index.js', 'device_manager.md'],
   /*
-  ['storage_manager/index.js', 'storage_manager.md'],
   ['device_manager/index.js', 'device_manager.md'],
   ['selector_manager/index.js', 'selector_manager.md'],
   ['css_composer/index.js', 'css_composer.md'],

docs/api/device_manager.md

@@ -2,21 +2,35 @@
 
 ## DeviceManager
 
-Before using methods you should get first the module from the editor instance, in this way:
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
 ```js
-var deviceManager = editor.DeviceManager;
+const editor = grapesjs.init({
+ deviceManager: {
+   // 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 deviceManager = editor.DeviceManager;
+```
+
+-   [add][2]
+-   [get][3]
+-   [getAll][4]
+
 ## add
 
 Add new device to the collection. URLs are supposed to be unique
 
 ### Parameters
 
--   `name` **[string][1]** Device name
--   `width` **[string][1]** Width of the device
--   `opts` **[Object][2]** Custom options
+-   `name` **[string][5]** Device name
+-   `width` **[string][5]** Width of the device
+-   `opts` **[Object][6]** Custom options
 
 ### Examples
 
@@ -36,7 +50,7 @@ Return device by name
 
 ### Parameters
 
--   `name` **[string][1]** Name of the device
+-   `name` **[string][5]** Name of the device
 
 ### Examples
 
@@ -60,6 +74,14 @@ console.log(JSON.stringify(devices));
 
 Returns **Collection** 
 
-[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[1]: https://github.com/artf/grapesjs/blob/master/src/device_manager/config/config.js
+
+[2]: #add
+
+[3]: #get
+
+[4]: #getAll
+
+[5]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+[6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object

src/device_manager/index.js

@@ -1,12 +1,26 @@
 /**
- * Before using methods you should get first the module from the editor instance, in this way:
+ * 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/device_manager/config/config.js)
+ * ```js
+ * const editor = grapesjs.init({
+ *  deviceManager: {
+ *    // options
+ *  }
+ * })
+ * ```
+ *
+ * Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance
  *
  * ```js
- * var deviceManager = editor.DeviceManager;
+ * const deviceManager = editor.DeviceManager;
  * ```
  *
+ * * [add](#add)
+ * * [get](#get)
+ * * [getAll](#getAll)
+ *
  * @module DeviceManager
  */
+
 module.exports = () => {
   var c = {},
     defaults = require('./config/config'),