Add getSelectedTargets method to Selectors

docs/modules/Assets.md

@@ -316,7 +316,7 @@ am.open({
 
 ## Customization
 
-The default Asset Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex things like a search input, filters, etc. requires a replace of the defualt UI.
+The default Asset Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex things like a search input, filters, etc. requires a replace of the default UI.
 
 All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the `asset:custom` event that will give you all the information on any requested change.
 

docs/modules/Blocks.md

@@ -299,7 +299,7 @@ To know more about the available block properties, check the [Block API Referenc
 
 
 ## Customization
-The default Block Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex elements requires a replace of the defualt UI.
+The default Block Manager UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex elements requires a replace of the default UI.
 
 All you have to do is to indicate the editor your intent to use a custom UI and then subscribe to the `block:custom` event that will give you all the information on any requested change.
 

docs/modules/Selectors.md

@@ -76,20 +76,33 @@ You can also disable specific selectors and change the state (eg. Hover) in orde
 
 
 
-## Component-first styling
+## Component-first selectors
 
+By default, selecting components with classes will indicate their selectors as target style. That means that any change in Style Manager will be applied to all components containing those **Selected** classes.
 
+In case you need to select single components as style targets, you can enable `componentFirst` option.
 
+```js
+const editor = grapesjs.init({
+  // ...
+  selectorManager: {
+    componentFirst: true,
+  },
+});
+```
 
+This option enables also the possibility to style multiple components and the ability to sync common selectors with the current component styles (the refresh icon).
 
-## Programmatic usage
-If you need to manage your selectors programmatically you can use its [APIs][Selector API].
+<img :src="$withBase('/sm-component-first.jpg')" alt="Component First" style="display: block; margin: auto"/>
 
+::: warning
+With multiple selection, the Style Manager shows always styles of the last selected component.
+:::
 
-Below an example of commonly used methods.
-```js
-// ...
-```
+
+
+## Programmatic usage
+If you need to manage your selectors programmatically you can use its [APIs][Selector API].
 
 
 
@@ -97,7 +110,7 @@ Below an example of commonly used methods.
 
 ## Customization
 
-The default UI is great for simple things, but except the possibility to tweak some CSS style, adding more complex elements requires a replace of the defualt UI.
+The default UI can handle most of the common tasks but in case you need a more advanced logic/elements, that requires a replace of the default UI.
 
 
 

src/selector_manager/index.js

@@ -198,10 +198,6 @@ export default () => {
       return this;
     },
 
-    getSelected() {
-      return this.em.get('StyleManager').getTargets();
-    },
-
     addSelector(name, opts = {}, cOpts = {}) {
       let props = { ...opts };
 
@@ -412,6 +408,17 @@ export default () => {
       });
     },
 
+    /**
+     * Get the array of currently selected targets.
+     * @returns {Array<[Component]|[CssRule]>}
+     * @example
+     * const targetsToStyle = selectorManager.getSelectedTargets();
+     * console.log(targetsToStyle.map(target => target.getSelectors().map(slc => slc.toString()).join('')))
+     */
+    getSelectedTargets() {
+      return this.em.get('StyleManager').getTargets();
+    },
+
     /**
      * Update component-first option.
      * If the component-first is enabled, all the style changes will be applied on selected components (ID rules) instead