MDL-68722 atto_equation: fix for form elements with special characters

Element id's containing characters such as ':' would break the tab
selector in bootstrap.

This specifically affects the essay question type.

lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button-debug.js

@@ -76,6 +76,7 @@ var COMPONENTNAME = 'atto_equation',
                     '{{#each library}}' +
                         '<li  class="nav-item">' +
                             '<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
+                                ' data-target="#{{../elementidescaped}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"' +
                                 ' role="tab" data-toggle="tab">' +
                                 '{{get_string groupname ../component}}' +
                             '</a>' +
@@ -688,6 +689,7 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
         });
         content = template({
             elementid: this.get('host').get('elementid'),
+            elementidescaped: this._escapeQuerySelector(this.get('host').get('elementid')),
             component: COMPONENTNAME,
             library: library,
             CSS: CSS,
@@ -712,7 +714,23 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
             content = preview.responseText;
         }
         return content;
+    },
+
+    /**
+     * Escape special characters in string used as a JS query selector
+     *
+     * @method _excapeQuerySelector
+     * @param {string} selector
+     * @returns {string}
+     */
+    _escapeQuerySelector: function(selector) {
+
+        // Bootstrap requires that query selectors have special chars excaped.
+        // See: https://getbootstrap.com/docs/4.2/getting-started/javascript/#selectors
+
+        return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
     }
+
 }, {
     ATTRS: {
         /**

lib/editor/atto/plugins/equation/yui/build/moodle-atto_equation-button/moodle-atto_equation-button.js

@@ -76,6 +76,7 @@ var COMPONENTNAME = 'atto_equation',
                     '{{#each library}}' +
                         '<li  class="nav-item">' +
                             '<a class="nav-link" href="#{{../elementid}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}" ' +
+                                ' data-target="#{{../elementidescaped}}_{{../CSS.LIBRARY_GROUP_PREFIX}}_{{@key}}"' +
                                 ' role="tab" data-toggle="tab">' +
                                 '{{get_string groupname ../component}}' +
                             '</a>' +
@@ -686,6 +687,7 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
         });
         content = template({
             elementid: this.get('host').get('elementid'),
+            elementidescaped: this._escapeQuerySelector(this.get('host').get('elementid')),
             component: COMPONENTNAME,
             library: library,
             CSS: CSS,
@@ -710,7 +712,23 @@ Y.namespace('M.atto_equation').Button = Y.Base.create('button', Y.M.editor_atto.
             content = preview.responseText;
         }
         return content;
+    },
+
+    /**
+     * Escape special characters in string used as a JS query selector
+     *
+     * @method _excapeQuerySelector
+     * @param {string} selector
+     * @returns {string}
+     */
+    _escapeQuerySelector: function(selector) {
+
+        // Bootstrap requires that query selectors have special chars excaped.
+        // See: https://getbootstrap.com/docs/4.2/getting-started/javascript/#selectors
+
+        return selector.replace(/(:|\.|\[|\]|,|=|@)/g, '\\$1');
     }
+
 }, {
     ATTRS: {
         /**