Add CssRule documentation

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'],

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'],

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

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