Few updates in docs

docs/.vuepress/components/demos/utils.js

@@ -85,6 +85,7 @@ var styleManager = {
 };
 
 var layerManager = { scrollLayers: 0 };
+var selectorManager = {};
 var traitManager = {};
 var deviceManager = {
   devices: [{
@@ -320,6 +321,7 @@ var gjsConfigStyle = Object.assign({}, gjsConfigBlocks, {
   blockManager: Object.assign({}, blockManager, { appendTo: '#blocks5' }),
   layerManager: { appendTo: '#layers-container5', scrollLayers: 0 },
   styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container5' }),
+  selectorManager: Object.assign({}, selectorManager, { appendTo: '#styles-container5' }),
 });
 
 var gjsConfigTraits = Object.assign({}, gjsConfigBlocks, {
@@ -328,6 +330,7 @@ var gjsConfigTraits = Object.assign({}, gjsConfigBlocks, {
   layerManager: Object.assign({}, layerManager, { appendTo: '#layers-container6' }),
   styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container6' }),
   traitManager: Object.assign({}, traitManager, { appendTo: '#traits-container6' }),
+  selectorManager: Object.assign({}, selectorManager, { appendTo: '#styles-container6' }),
 });
 
 var gjsConfigDevices = Object.assign({}, gjsConfigBlocks, {
@@ -336,6 +339,7 @@ var gjsConfigDevices = Object.assign({}, gjsConfigBlocks, {
   layerManager: Object.assign({}, layerManager, { appendTo: '#layers-container7' }),
   styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container7' }),
   traitManager: Object.assign({}, traitManager, { appendTo: '#traits-container7' }),
+  selectorManager: Object.assign({}, selectorManager, { appendTo: '#styles-container7' }),
   deviceManager,
 });
 
@@ -345,6 +349,7 @@ var gjsConfigTheme = Object.assign({}, gjsConfigBlocks, {
   layerManager: Object.assign({}, layerManager, { appendTo: '#layers-container8' }),
   styleManager: Object.assign({}, styleManager, { appendTo: '#styles-container8' }),
   traitManager: Object.assign({}, traitManager, { appendTo: '#traits-container8' }),
+  selectorManager: Object.assign({}, selectorManager, { appendTo: '#styles-container8' }),
   deviceManager,
 });
 

docs/README.md

@@ -3,8 +3,8 @@
 [[toc]]
 
 ## What is GrapesJS?
-At first look you might probably think it's just yet another kind of page/HTML builder, but actually is something more. GrapesJS is the first, multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. [MJML](https://mjml.io/)), Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `<tag some="attribute">... other nested elements ...</tag>` you can create easily a GrapesJS builder around it and then use it independently in some of your applications.
-GrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML templates without any knowledge of coding.
+At first look you might probably think it's just another kind of page/HTML builder, but actually is something more. GrapesJS is a multi-purpose, Web Builder Framework, which means it allows you easily create your, drag & drop enabled, builder of "THINGS". For "THINGS" we consider anything web structure related, so HTML at first, but don't just think about web pages, we use HTML-like structure basically everywhere: Newsletters (eg. [MJML](https://mjml.io/)), Native Mobile Applications (eg. [React Native](https://github.com/facebook/react-native)), Native Desktop Applications (eg. [Vuido](https://vuido.mimec.org)), PDFs (eg. [React PDF](https://github.com/diegomura/react-pdf)), etc. So, for everything you can imagine as a set of elements like `<tag some="attribute">... other nested elements ...</tag>` you can create easily a GrapesJS builder around it and then use it independently in some of your applications.
+GrapesJS comes along with different features and tools which enable you to craft easy to use builders, which will allow your users to create complex HTML-like templates without any knowledge of coding.
 
 
 
@@ -24,7 +24,7 @@ To show up of what GrapesJS is capable of we have created some presets.
 * [grapesjs-preset-newsletter](https://github.com/artf/grapesjs-preset-newsletter) - [Newsletter Builder](http://artf.github.io/grapesjs/demo-newsletter-editor.html)
 * [grapesjs-mjml](https://github.com/artf/grapesjs-mjml) - [Newsletter Builder with MJML](http://artf.github.io/grapesjs/demo-mjml.html)
 
-You can actually use them as a starting point for your editors, so, just follow the instructions on the repository to get a quick start for your builder.
+You can actually use them as a starting point for your editors, so, just follow the instructions on their repositories to get a quick start for your builder.
 
 
 

docs/getting-started.md

@@ -343,6 +343,13 @@ const editor = grapesjs.init({
       }
     ]
   },
+  // The Selector Manager allows to assign classes and
+  // different states (eg. :hover) on components.
+  // Generally, it's used in conjunction with Style Manager
+  // but it's not mandatory
+  selectorManager: {
+    appendTo: '.styles-container'
+  },
   styleManager: {
     appendTo: '.styles-container',
     sectors: [{