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

---
 docs/.vuepress/config.js  |  1 +
 docs/api.js               |  5 ++--
 docs/api/modal_dialog.md  | 60 +++++++++++++++++++++++----------------
 src/modal_dialog/index.js | 21 ++++++++++----
 4 files changed, 55 insertions(+), 32 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index cd5072c04..117cfdfa1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -64,6 +64,7 @@ module.exports = {
         ['/api/device_manager', 'Device Manager'],
         ['/api/selector_manager', 'Selector Manager'],
         ['/api/css_composer', 'CSS Composer'],
+        ['/api/modal_dialog', 'Modal'],
       ],
       '/': [
         '',
diff --git a/docs/api.js b/docs/api.js
index 528f2d1a5..5437b542c 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -15,10 +15,9 @@ const cmds = [
   // ['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'],
-  /*
-  ['css_composer/index.js', 'css_composer.md'],
+  // ['css_composer/index.js', 'css_composer.md'],
   ['modal_dialog/index.js', 'modal_dialog.md'],
+  /*
   ['rich_text_editor/index.js', 'rich_text_editor.md'],
   ['keymaps/index.js', 'keymaps.md'],
   ['undo_manager/index.js', 'undo_manager.md'],*/
diff --git a/docs/api/modal_dialog.md b/docs/api/modal_dialog.md
index c286a76eb..f187f6189 100644
--- a/docs/api/modal_dialog.md
+++ b/docs/api/modal_dialog.md
@@ -2,20 +2,30 @@
 
 ## Modal
 
--   [open][1]
--   [close][2]
--   [isOpen][3]
--   [setTitle][4]
--   [getTitle][5]
--   [setContent][6]
--   [getContent][7]
+You can customize the initial state of the module from the editor initialization, by passing the following [Configuration Object][1]
 
-Before using the methods you should get first the module from the editor instance, in this way:
+```js
+const editor = grapesjs.init({
+ modal: {
+   // 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 modal = editor.Modal;
+const modal = editor.Modal;
 ```
 
+-   [open][2]
+-   [close][3]
+-   [isOpen][4]
+-   [setTitle][5]
+-   [getTitle][6]
+-   [setContent][7]
+-   [getContent][8]
+
 ## open
 
 Open the modal window
@@ -32,7 +42,7 @@ Returns **this**
 
 Checks if the modal window is open
 
-Returns **[Boolean][8]** 
+Returns **[Boolean][9]** 
 
 ## setTitle
 
@@ -40,7 +50,7 @@ Set the title to the modal window
 
 ### Parameters
 
--   `title` **[string][9]** Title
+-   `title` **[string][10]** Title
 
 ### Examples
 
@@ -54,7 +64,7 @@ Returns **this**
 
 Returns the title of the modal window
 
-Returns **[string][9]** 
+Returns **[string][10]** 
 
 ## setContent
 
@@ -62,7 +72,7 @@ Set the content of the modal window
 
 ### Parameters
 
--   `content` **([string][9] \| [HTMLElement][10])** Content
+-   `content` **([string][10] \| [HTMLElement][11])** Content
 
 ### Examples
 
@@ -76,24 +86,26 @@ Returns **this**
 
 Get the content of the modal window
 
-Returns **[string][9]** 
+Returns **[string][10]** 
+
+[1]: https://github.com/artf/grapesjs/blob/master/src/modal_dialog/config/config.js
 
-[1]: #open
+[2]: #open
 
-[2]: #close
+[3]: #close
 
-[3]: #isopen
+[4]: #isopen
 
-[4]: #settitle
+[5]: #settitle
 
-[5]: #gettitle
+[6]: #gettitle
 
-[6]: #setcontent
+[7]: #setcontent
 
-[7]: #getcontent
+[8]: #getcontent
 
-[8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
 
-[9]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+[10]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[10]: https://developer.mozilla.org/docs/Web/HTML/Element
+[11]: https://developer.mozilla.org/docs/Web/HTML/Element
diff --git a/src/modal_dialog/index.js b/src/modal_dialog/index.js
index 3df6dcacd..efcbcbf30 100644
--- a/src/modal_dialog/index.js
+++ b/src/modal_dialog/index.js
@@ -1,4 +1,19 @@
 /**
+ * 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/modal_dialog/config/config.js)
+ * ```js
+ * const editor = grapesjs.init({
+ *  modal: {
+ *    // 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 modal = editor.Modal;
+ * ```
+ *
  * * [open](#open)
  * * [close](#close)
  * * [isOpen](#isopen)
@@ -7,13 +22,9 @@
  * * [setContent](#setcontent)
  * * [getContent](#getcontent)
  *
- * Before using the methods you should get first the module from the editor instance, in this way:
- *
- * ```js
- * var modal = editor.Modal;
- * ```
  * @module Modal
  */
+
 module.exports = () => {
   var c = {},
     defaults = require('./config/config'),