Add escapeName option and method in SelectorManager. Closes #1703

src/selector_manager/config/config.js

@@ -22,5 +22,9 @@ export default {
     { name: 'hover', label: 'Hover' },
     { name: 'active', label: 'Click' },
     { name: 'nth-of-type(2n)', label: 'Even/Odd' }
-  ]
+  ],
+
+  // Custom selector name escaping strategy, eg.
+  // name => name.replace(' ', '_')
+  escapeName: 0
 };

src/selector_manager/index.js

@@ -83,13 +83,11 @@ export default config => {
      * @return {this}
      * @private
      */
-    init(conf) {
-      c = conf || {};
-
-      for (var name in defaults) {
-        if (!(name in c)) c[name] = defaults[name];
-      }
-
+    init(conf = {}) {
+      c = {
+        ...defaults,
+        ...conf
+      };
       const em = c.em;
       const ppfx = c.pStylePrefix;
 
@@ -135,7 +133,7 @@ export default config => {
       }
 
       if (opts.label && !opts.name) {
-        opts.name = Selector.escapeName(opts.label);
+        opts.name = this.escapeName(opts.label);
       }
 
       const cname = opts.name;
@@ -144,7 +142,7 @@ export default config => {
         : selectors.where(opts)[0];
 
       if (!selector) {
-        return selectors.add(opts);
+        return selectors.add(opts, { config: c });
       }
 
       return selector;
@@ -203,7 +201,7 @@ export default config => {
         classes = classes.trim().split(' ');
       }
 
-      classes.forEach(name => added.push(selectors.add({ name })));
+      classes.forEach(name => added.push(this.addSelector(name)));
       return added;
     },
 
@@ -240,6 +238,16 @@ export default config => {
       return selectors;
     },
 
+    /**
+     * Return escaped selector name
+     * @param {String} name Selector name to escape
+     * @returns {String} Escaped name
+     */
+    escapeName(name) {
+      const { escapeName } = c;
+      return escapeName ? escapeName(name) : Selector.escapeName(name);
+    },
+
     /**
      * Render class selectors. If an array of selectors is provided a new instance of the collection will be rendered
      * @param {Array<Object>} selectors

src/selector_manager/model/Selector.js

@@ -26,7 +26,8 @@ const Selector = Backbone.Model.extend(
       protected: false
     },
 
-    initialize() {
+    initialize(props, opts = {}) {
+      const { config = {} } = opts;
       const name = this.get('name');
       const label = this.get('label');
 
@@ -36,7 +37,12 @@ const Selector = Backbone.Model.extend(
         this.set('label', name);
       }
 
-      this.set('name', Selector.escapeName(this.get('name')));
+      const namePreEsc = this.get('name');
+      const { escapeName } = config;
+      const nameEsc = escapeName
+        ? escapeName(namePreEsc)
+        : Selector.escapeName(namePreEsc);
+      this.set('name', nameEsc);
     },
 
     /**

src/selector_manager/view/ClassTagView.js

@@ -1,5 +1,4 @@
 import Backbone from 'backbone';
-import Selector from './../model/Selector';
 
 const inputProp = 'contentEditable';
 
@@ -67,13 +66,14 @@ export default Backbone.View.extend({
     const model = this.model;
     const inputEl = this.getInputEl();
     const label = inputEl.textContent;
-    const name = Selector.escapeName(label);
     const em = this.em;
     const sm = em && em.get('SelectorManager');
     inputEl[inputProp] = false;
     em && em.setEditing(0);
 
     if (sm) {
+      const name = sm.escapeName(label);
+
       if (sm.get(name)) {
         inputEl.innerText = model.get('label');
       } else {