Add custom selected name strategy

src/selector_manager/config/config.js

@@ -16,6 +16,12 @@ export default {
   // name => name.replace(' ', '_')
   escapeName: 0,
 
+  // Custom selected name strategy (the string you see after 'Selected')
+  // ({ result, state, target }) => {
+  //  return `${result} - ID: ${target.getId()}`
+  // }
+  selectedName: 0,
+
   // When you select a component in the canvas the selected Model (Component or CSS Rule)
   // is passed to the StyleManager which will be then able to be styled, these are the cases:
   // * Selected component doesn't have any classes: Component will be passed

src/selector_manager/view/ClassTagsView.js

@@ -71,11 +71,11 @@ export default Backbone.View.extend({
     return emitter || {};
   },
 
-  getSelectedModel() {
-    const { em, config } = this;
-    const sm = em && em.get('StyleManager');
-    return sm && sm.getModelToStyle(em.getSelected());
-  },
+  // getSelectedModel() {
+  //   const { em, config } = this;
+  //   const sm = em && em.get('StyleManager');
+  //   return sm && sm.getModelToStyle(em.getSelected());
+  // },
 
   /**
    * Triggered when a tag is removed from collection
@@ -192,18 +192,20 @@ export default Backbone.View.extend({
    */
   updateSelector(target) {
     const { pfx, collection, el, config } = this;
+    const { selectedName, componentFirst } = config;
     const selected = target || this.getTarget();
     this.compTarget = selected;
     if (!selected || !selected.get) return;
-
     const state = selected.get('state');
     const coll = collection;
+    const idRes = selected.getId ? `#${selected.getId()}` : '';
     let result = coll.getFullString(selected.getSelectors().getStyleable());
-    result =
-      result ||
-      selected.get('selectorsAdd') ||
-      (selected.getId ? `#${selected.getId()}` : '');
+    result = result || selected.get('selectorsAdd') || idRes;
+    result = componentFirst ? idRes : result;
     result += state ? `:${state}` : '';
+    result = selectedName
+      ? selectedName({ result, state, target: selected })
+      : result;
     const elSel = el.querySelector(`#${pfx}sel`);
     elSel && (elSel.innerHTML = result);
   },