From 2fca455b920d70beef9e93980c9b3cda19cbd75e Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 13 Jul 2019 20:34:28 +0200
Subject: [PATCH] Add escapeName option and method in SelectorManager. Closes
 #1703

---
 src/selector_manager/config/config.js     |  6 ++++-
 src/selector_manager/index.js             | 28 +++++++++++++++--------
 src/selector_manager/model/Selector.js    | 10 ++++++--
 src/selector_manager/view/ClassTagView.js |  4 ++--
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/selector_manager/config/config.js b/src/selector_manager/config/config.js
index 27c7120a3..8ea14c16a 100644
--- a/src/selector_manager/config/config.js
+++ b/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
 };
diff --git a/src/selector_manager/index.js b/src/selector_manager/index.js
index 1b483274d..dc7bfbc0d 100644
--- a/src/selector_manager/index.js
+++ b/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
diff --git a/src/selector_manager/model/Selector.js b/src/selector_manager/model/Selector.js
index 2312b02f8..d541407ec 100644
--- a/src/selector_manager/model/Selector.js
+++ b/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);
     },
 
     /**
diff --git a/src/selector_manager/view/ClassTagView.js b/src/selector_manager/view/ClassTagView.js
index 12b16ecca..870f07eec 100644
--- a/src/selector_manager/view/ClassTagView.js
+++ b/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 {