From bda98071496988f3d9f85b852d288bc5549cf16a Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 10 Aug 2021 19:02:19 +0200
Subject: [PATCH] Add CssRule documentation

---
 docs/.vuepress/config.js |  1 +
 docs/api.js              |  1 +
 docs/api/css_rule.md     | 83 ++++++++++++++++++++++++++++++++++++++++
 docs/api/parser.md       | 16 +++++---
 4 files changed, 96 insertions(+), 5 deletions(-)
 create mode 100644 docs/api/css_rule.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index a64f4bf47..e4bb0c66b 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -73,6 +73,7 @@ module.exports = {
         ['/api/device_manager', 'Device Manager'],
         ['/api/selector_manager', 'Selector Manager'],
         ['/api/css_composer', 'CSS Composer'],
+        ['/api/css_rule', `${subDivider}CssRule`],
         ['/api/modal_dialog', 'Modal'],
         ['/api/rich_text_editor', 'Rich Text Editor'],
         ['/api/keymaps', 'Keymaps'],
diff --git a/docs/api.js b/docs/api.js
index bebb6008f..ab7c48df5 100644
--- a/docs/api.js
+++ b/docs/api.js
@@ -17,6 +17,7 @@ const cmds = [
   ['device_manager/index.js', 'device_manager.md'],
   ['selector_manager/index.js', 'selector_manager.md'],
   ['css_composer/index.js', 'css_composer.md'],
+  ['css_composer/model/CssRule.js', 'css_rule.md'],
   ['modal_dialog/index.js', 'modal_dialog.md'],
   ['rich_text_editor/index.js', 'rich_text_editor.md'],
   ['keymaps/index.js', 'keymaps.md'],
diff --git a/docs/api/css_rule.md b/docs/api/css_rule.md
new file mode 100644
index 000000000..d7ca0daf4
--- /dev/null
+++ b/docs/api/css_rule.md
@@ -0,0 +1,83 @@
+<!-- Generated by documentation.js. Update this documentation by updating the source code. -->
+
+## getAtRule
+
+Return the at-rule statement when exists, eg. '@media (...)', '@keyframes'
+
+### Examples
+
+```javascript
+const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+ atRuleType: 'media',
+ atRuleParams: '(min-width: 500px)'
+});
+cssRule.getAtRule(); // "@media (min-width: 500px)"
+```
+
+Returns **[String][1]** 
+
+## selectorsToString
+
+Return selectors of the rule as a string
+
+### Parameters
+
+*   `opts` **[Object][2]?** Options (optional, default `{}`)
+
+    *   `opts.skipState` **[Boolean][3]?** Skip state from the result
+
+### Examples
+
+```javascript
+const cssRule = editor.Css.setRule('.class1:hover', { color: 'red' });
+cssRule.selectorsToString(); // ".class1:hover"
+cssRule.selectorsToString({ skipState: true }); // ".class1"
+```
+
+Returns **[String][1]** 
+
+## getDeclaration
+
+Get declaration block (without the at-rule statement)
+
+### Parameters
+
+*   `opts` **[Object][2]** Options (same as in `selectorsToString`) (optional, default `{}`)
+
+### Examples
+
+```javascript
+const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+ atRuleType: 'media',
+ atRuleParams: '(min-width: 500px)'
+});
+cssRule.getDeclaration() // ".class1{color:red;}"
+```
+
+Returns **[String][1]** 
+
+## toCSS
+
+Return the CSS string of the rule
+
+### Parameters
+
+*   `opts` **[Object][2]** Options (same as in `getDeclaration`) (optional, default `{}`)
+
+### Examples
+
+```javascript
+const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
+ atRuleType: 'media',
+ atRuleParams: '(min-width: 500px)'
+});
+cssRule.toCSS() // "@media (min-width: 500px){.class1{color:red;}}"
+```
+
+Returns **[String][1]** CSS string
+
+[1]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
+
+[2]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object
+
+[3]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean
diff --git a/docs/api/parser.md b/docs/api/parser.md
index a80044206..20ef335d1 100644
--- a/docs/api/parser.md
+++ b/docs/api/parser.md
@@ -36,7 +36,7 @@ Get the configuration object
 ### Examples
 
 ```javascript
-console.log(parser.getConfig())
+console.log(Parser.getConfig())
 ```
 
 Returns **[Object][5]** Configuration object
@@ -48,8 +48,7 @@ Parse HTML string and return the object containing the Component Definition
 ### Parameters
 
 *   `input` **[String][6]** HTML string to parse
-*   `opts`   (optional, default `{}`)
-*   `options` **[Object][5]?** Options
+*   `options` **[Object][5]?** Options (optional, default `{}`)
 
     *   `options.htmlType` **[String][6]?** [HTML mime type][7] to parse
 
@@ -60,7 +59,7 @@ const resHtml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
   htmlType: 'text/html', // default
 });
 // By using the `text/html`, this will fix automatically all the HTML syntax issues
-// Indeed the final rappresetnation, in this case, will be `<div>Hi</div><table></table>`
+// Indeed the final representation, in this case, will be `<div>Hi</div><table></table>`
 const resXml = Parser.parseHtml(`<table><div>Hi</div></table>`, {
   htmlType: 'application/xml',
 });
@@ -77,6 +76,13 @@ Parse CSS string and return an array of valid definition objects for CSSRules
 
 *   `input` **[String][6]** CSS string to parse
 
+### Examples
+
+```javascript
+const res = Parser.parseCss('.cls { color: red }');
+// [{ ... }]
+```
+
 Returns **[Array][8]<[Object][5]>** Array containing the result
 
 [1]: https://github.com/artf/grapesjs/blob/master/src/parser/config/config.js
@@ -91,6 +97,6 @@ Returns **[Array][8]<[Object][5]>** Array containing the result
 
 [6]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String
 
-[7]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString
+[7]: https://developer.mozilla.org/en-US/docs/Web/API/DOMParser/parseFromString#Argument02
 
 [8]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array