MDL-80246 tiny_equation: Escape elementid in the data-target attribute

Tabs use the value of the data-target attribute of the active tab link
to find and display the appropriate tab content. In some situations the
elementid value that is used to generate the data-target may contain
certain characters that have a special meaning in the selector context
(e.g. ".", ",", "#") and because of that the target element cannot be
correctly identified. To fix this problem the elementid value needs to
be escaped prior to generating the data-target attribute.

lib/editor/tiny/plugins/equation/amd/src/ui.js

@@ -121,6 +121,7 @@ const getTemplateContext = (editor, data) => {
 
     return Object.assign({}, {
         elementid: editor.id,
+        elementidescaped: CSS.escape(editor.id),
         libraries: libraries,
         texdocsurl: texDocsUrl,
         delimiters: Selectors.delimiters,

lib/editor/tiny/plugins/equation/templates/modal.mustache

@@ -29,7 +29,8 @@
 
     Example context (json):
     {
-        "elementid": "exampleId",
+        "elementid": "exampleId:1",
+        "elementidescaped": "exampleId\\:1",
         "texdocsurl": "http://abc.com",
         "equation": "\\Downarrow ",
         "delimiters": {

lib/editor/tiny/plugins/equation/templates/modal_library.mustache

@@ -29,7 +29,8 @@
 
     Example context (json):
     {
-        "elementid": "exampleId"
+        "elementid": "exampleId:1",
+        "elementidescaped": "exampleId\\:1"
     }
 }}
 <div class="tiny_equation_library">
@@ -40,7 +41,7 @@
                    }}{{#active}} aria-selected="true"{{/active}}{{!
                    }}{{^active}} aria-selected="false" tabindex="-1"{{/active}}{{!
                    }} href="#{{elementid}}_tiny_equation_group_{{key}}"{{!
-                   }} data-target="#{{elementid}}_tiny_equation_group_{{key}}"
+                   }} data-target="#{{elementidescaped}}_tiny_equation_group_{{key}}"
                    role="tab" data-toggle="tab"
                 >
                     {{groupname}}