From 72c8bab8822522a512eac36baf6c3ff800e16a1f Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Wed, 29 Dec 2021 21:03:45 +0100
Subject: [PATCH] Update styleManager docs

---
 docs/modules/Style-manager.md |  7 +++++++
 src/style_manager/index.js    | 29 +++++++++++++++++++++--------
 2 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/docs/modules/Style-manager.md b/docs/modules/Style-manager.md
index 1fa0a7c5c..4aeee09f5 100644
--- a/docs/modules/Style-manager.md
+++ b/docs/modules/Style-manager.md
@@ -443,7 +443,14 @@ For a more advanced usage you can rely on the [Style Manager API] to perform dif
 
   // Set as a target the CSS selector (the relative CSSRule will be created if doesn't exist yet)
   sm.select('.btn > span');
+  // Get the last selected target
+  const lastTarget = sm.getLastSelected();
+  lastTarget?.toCSS && console.log(lastTarget.toCSS());
+
+  // Update selected targets with a custom style
+  sm.addStyleTargets({ color: 'red' });
   ```
+* Adding new types.
 
 
 
diff --git a/src/style_manager/index.js b/src/style_manager/index.js
index 059d2ae85..b1b00921c 100644
--- a/src/style_manager/index.js
+++ b/src/style_manager/index.js
@@ -31,6 +31,8 @@
  * * [select](#select)
  * * [getSelected](#getselected)
  * * [getLastSelected](#getlastselected)
+ * * [getSelectedParents](#getselectedparents)
+ * * [addStyleTargets](#addstyletargets)
  * * [addType](#addtype)
  * * [getType](#gettype)
  * * [getTypes](#gettypes)
@@ -349,6 +351,25 @@ export default () => {
       return this.model.get('lastTarget') || null;
     },
 
+    /**
+     * Get parent rules of the last selected target.
+     * @returns {Array<[CSSRule]>}
+     */
+    getSelectedParents() {
+      return this.model.get('lastTargetParents') || [];
+    },
+
+    /**
+     * Update selected targets with a custom style.
+     * @param {Object} style Style object
+     * @param {Object} [opts={}] Options
+     * @example
+     * styleManager.addStyleTargets({ color: 'red' });
+     */
+    addStyleTargets(style, opts) {
+      this.getSelected().map(t => t.addStyle(style, opts));
+    },
+
     /**
      * Get what to style inside Style Manager. If you select the component
      * without classes the entity is the Component itself and all changes will
@@ -531,14 +552,6 @@ export default () => {
       return (propTarget && propTarget.targets) || [];
     },
 
-    addStyleTargets(style, opts) {
-      this.getSelected().map(t => t.addStyle(style, opts));
-    },
-
-    getSelectedParents() {
-      return this.model.get('lastTargetParents') || [];
-    },
-
     getEmitter() {
       return SectView.propTarget;
     },