From 1db11d2a66496932ca2ceb480221ce1e544ca5d9 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 3 Oct 2021 15:00:40 +0200
Subject: [PATCH] Add the doc about Component-first styling

---
 docs/modules/Components.md            | 12 +++++++++++-
 src/css_composer/model/CssRule.js     |  2 +-
 src/dom_components/model/Component.js |  4 +++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/docs/modules/Components.md b/docs/modules/Components.md
index 2ed028fcf..25bf8ba10 100644
--- a/docs/modules/Components.md
+++ b/docs/modules/Components.md
@@ -838,7 +838,17 @@ domc.addType('component-css', {
   },
 });
 ```
-
+::: tip Component-first styling
+By default, when you select a component in the canvas and apply styles on it, changes will be applied on its existent classes. This will result on changing of all the components with those applied classes. If you need the style to be applied only on the specific selected component you have to select componentFirst strategy in this way.
+```js
+grapesjs.init({
+  ...
+  selectorManager: {
+    componentFirst: true,
+  },
+})
+```
+:::
 
 
 
diff --git a/src/css_composer/model/CssRule.js b/src/css_composer/model/CssRule.js
index 9f69f525c..4941a2ca6 100644
--- a/src/css_composer/model/CssRule.js
+++ b/src/css_composer/model/CssRule.js
@@ -79,7 +79,7 @@ export default class CssRule extends Model.extend(Styleable) {
   }
 
   /**
-   * Return the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
+   * Returns the at-rule statement when exists, eg. `@media (...)`, `@keyframes`
    * @returns {String}
    * @example
    * const cssRule = editor.Css.setRule('.class1', { color: 'red' }, {
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 54c7b5acd..9b04a0d96 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -79,6 +79,7 @@ export const keyUpdateInside = `${keyUpdate}-inside`;
  * @property {Boolean} [selectable=true] Allow component to be selected when clicked. Default: `true`
  * @property {Boolean} [hoverable=true] Shows a highlight outline when hovering on the element if `true`. Default: `true`
  * @property {Boolean} [void=false] This property is used by the HTML exporter as void elements don't have closing tags, eg. `<br/>`, `<hr/>`, etc. Default: `false`
+ * @property {String} [styles=''] Component related styles, eg. `.my-component-class { color: red }`
  * @property {String} [content=''] Content of the component (not escaped) which will be appended before children rendering. Default: `''`
  * @property {String} [icon=''] Component's icon, this string will be inserted before the name (in Layers and badge), eg. it can be an HTML string '<i class="fa fa-square-o"></i>'. Default: `''`
  * @property {String|Function} [script=''] Component's javascript. More about it [here](/modules/Components-js.html). Default: `''`
@@ -1894,7 +1895,8 @@ Component.prototype.defaults = {
   status: '', // State, eg. 'selected'
   content: '',
   icon: '',
-  style: '', // Component related style
+  style: '',
+  styles: '', // Component related styles
   classes: '', // Array of classes
   script: '',
   'script-props': '',