From 026d3d0466af864a26619b1fb274cd599a30ba40 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 8 Jul 2018 23:31:47 +0200
Subject: [PATCH] Add DeviceManager API in docs

---
 docs/.vuepress/config.js     |  1 +
 docs/.vuepress/override.styl |  2 +-
 docs/api.js                  |  4 ++--
 docs/api/device_manager.md   | 38 ++++++++++++++++++++++++++++--------
 src/device_manager/index.js  | 18 +++++++++++++++--
 5 files changed, 50 insertions(+), 13 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index be1c5b848..40d0f489d 100644
--- a/docs/.vuepress/config.js
+++ b/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'],
       ],
       '/': [
         '',
diff --git a/docs/.vuepress/override.styl b/docs/.vuepress/override.styl
index dd4e4c8a4..1bd3650ef 100644
--- a/docs/.vuepress/override.styl
+++ b/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);
diff --git a/docs/api.js b/docs/api.js
index 522397104..5190be280 100644
--- a/docs/api.js
+++ b/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'],
diff --git a/docs/api/device_manager.md b/docs/api/device_manager.md
index d7e9d00a3..6b03576f4 100644
--- a/docs/api/device_manager.md
+++ b/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
diff --git a/src/device_manager/index.js b/src/device_manager/index.js
index 46190c2fa..c93abf7dd 100644
--- a/src/device_manager/index.js
+++ b/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'),