XWIKI-22154: "aria-labelledby" for navigation panel entries and corresponding ids contain illegal whitespaces

* Escaped jsTree node ids when received from the server and unescaped them when sent back
* Added $.fn.xtree.unescapeNodeId() and $.fn.xtree.escapeNodeId() helpers
* Unescaped the selected node id in the location picker
* Unescaped the selected node id when moving an attachment
* Unescaped and escaped node ids in the WYSIWYG entity resource picker
* Unescaped node ids collected in the extension and class breaking question dialogs

Author: Sereza5

xwiki-platform-core/xwiki-platform-attachment/xwiki-platform-attachment-api/src/main/resources/js/attachment/move.js

@@ -70,7 +70,7 @@ require(['jquery', config.treeWebjar], function ($) {
 
   selectButton.on('click', function() {
     modal.modal('hide');
-    var docReference = $.jstree.reference(tree).get_selected(false)[0]
+    var docReference = $.fn.xtree.unescapeNodeId($.jstree.reference(tree).get_selected(false)[0])
     const idx = docReference.indexOf(':')
     docReference = docReference.substring(idx + 1);
     if (docReference) {

xwiki-platform-core/xwiki-platform-tree/xwiki-platform-tree-webjar/src/main/webjar/tree.js

@@ -48,6 +48,32 @@ define([
     };
   }
 
+  // jsTree node identifiers are used, without any escaping, both as the HTML id attribute of the rendered nodes and
+  // as the value sent back to the server (e.g. to look up children, to move or copy a node to a new parent, etc.).
+  // Entity references can contain spaces, but HTML ids must not contain any whitespace, so we escape the ids of the
+  // nodes received from the server before handing them to jsTree, and we unescape them back before sending them to
+  // the server, in order to keep both usages happy. Other scripts that read a node id from the tree's public API
+  // (e.g. get_selected()) and need the original, unescaped, entity reference should use $.fn.xtree.unescapeNodeId().
+  var escapeId = function(id) {
+    return String(id).replaceAll('%', '%25').replaceAll(' ', '%20');
+  };
+
+  var unescapeId = function(id) {
+    return String(id).replaceAll('%20', ' ').replaceAll('%25', '%');
+  };
+
+  // Escapes the id of the given node, and of all its nested children (in case the node was received with its
+  // children already inlined), so that the id can be safely used as an HTML id attribute.
+  var escapeNodeId = function(node) {
+    if (node && typeof node.id === 'string') {
+      node.id = escapeId(node.id);
+    }
+    if (node && Array.isArray(node.children)) {
+      node.children.forEach(escapeNodeId);
+    }
+    return node;
+  };
+
   var formToken = $('meta[name=form_token]').attr('content');
 
   var getNodeTypes = function(nodes) {
@@ -116,11 +142,11 @@ define([
       childrenURL = this.element.attr('data-url');
       parameters = $.extend({
         data: 'children',
-        id: node.id
+        id: unescapeId(node.id)
       }, parameters);
     }
     if (childrenURL) {
-      post(childrenURL, parameters).then(callback, () => callback([]));
+      post(childrenURL, parameters).then(children => children.map(escapeNodeId)).then(callback, () => callback([]));
     } else {
       callback([]);
     }
@@ -363,7 +389,8 @@ define([
       // We need to retrieve the node path from the server.
       var url = this.element.attr('data-url');
       if (url) {
-        return Promise.resolve(post(url, {data: 'path', 'id': nodeId}));
+        return Promise.resolve(
+          post(url, {data: 'path', 'id': unescapeId(nodeId)}).then(nodes => nodes.map(escapeNodeId)));
       } else {
         return Promise.reject();
       }
@@ -519,7 +546,11 @@ define([
       if (!url) {
         url = this.element.attr('data-url');
         params.action = action;
-        params.id = node.id;
+        params.id = unescapeId(node.id);
+      }
+      if (params.parent) {
+        // The parent is specified, as a node id, when moving or copying a node to a new parent.
+        params.parent = unescapeId(params.parent);
       }
       params.form_token = formToken;
       var promise = this.jobRunner.run(url, params);
@@ -759,5 +790,15 @@ define([
     });
   };
 
+  // Turns a node id read from the tree's public API (e.g. get_selected()) back into the original, unescaped, entity
+  // reference. Node ids are escaped so they can be safely used as HTML id attributes (see #escapeNodeId), so scripts
+  // that need to resolve a node id into an entity reference, rather than pass it back to the tree itself, must
+  // unescape it first.
+  $.fn.xtree.unescapeNodeId = unescapeId;
+
+  // Escapes the id of a node built outside of this module (e.g. the response of a job triggered through #execute)
+  // before inserting it into the tree, so that the tree's ids stay consistently escaped.
+  $.fn.xtree.escapeNodeId = escapeNodeId;
+
   return $;
 });

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/job/question/ExtensionBreakingQuestion.js

@@ -44,9 +44,9 @@ require(['jquery', 'xwiki-meta', 'xwiki-tree'], function($, xm) {
         for (var i = 0; i < selectedNodes.length; ++i) {
           var node = selectedNodes[i];
           if (node.data.type == 'extension') {
-            answerProperties.selectedExtensions.push(node.id);
+            answerProperties.selectedExtensions.push($.fn.xtree.unescapeNodeId(node.id));
           } else if (node.data.type == 'page') {
-            answerProperties.selectedDocuments.push(node.id);
+            answerProperties.selectedDocuments.push($.fn.xtree.unescapeNodeId(node.id));
           } else if (node.id == 'freePages') {
             // For free pages, we can rely on the state of the "freePage" node
             answerProperties.selectAllFreePages = true;

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/job/question/XClassBreakingQuestion.js

@@ -46,7 +46,7 @@ require(['jquery', 'xwiki-meta', 'xwiki-tree'], function($, xm) {
             // For free pages, we can rely on the state of the "freePage" node
             answerProperties.selectAllFreePages = true;
           } else {
-            answerProperties.selectedDocuments.push(node.id);
+            answerProperties.selectedDocuments.push($.fn.xtree.unescapeNodeId(node.id));
           }
         }
 

xwiki-platform-core/xwiki-platform-web/xwiki-platform-web-war/src/main/webapp/resources/uicomponents/widgets/locationPicker.js

@@ -87,7 +87,7 @@ require(['xwiki-tree'], function($) {
 });
 
 // Document Tree Picker
-require(['jquery', 'xwiki-meta'], function($, xm) {
+require(['jquery', 'xwiki-meta', 'xwiki-tree'], function($, xm) {
   $('.location-picker').each(function() {
     var picker = $(this);
     // The wiki field can be either a select (drop down) or an input (text or hidden).
@@ -109,7 +109,7 @@ require(['jquery', 'xwiki-meta'], function($, xm) {
     });
 
     picker.find('.modal').on('xwiki:locationTreePicker:select', function(event, data) {
-      var selectedNodeId = data.tree.get_selected()[0];
+      var selectedNodeId = $.fn.xtree.unescapeNodeId(data.tree.get_selected()[0]);
       var separatorIndex = selectedNodeId.indexOf(':');
       var nodeType = selectedNodeId.substr(0, separatorIndex);
       var nodeStringReference = selectedNodeId.substr(separatorIndex + 1);

xwiki-platform-core/xwiki-platform-wysiwyg/xwiki-platform-wysiwyg-webjar/src/main/webjar/resource/entityResourcePicker.js

@@ -98,12 +98,17 @@ define('xwiki-wysiwyg-entity-resource-picker', [
         }).on('xtree.runJob', function (event, promise, action, node, params) {
           if (action === 'create') {
             promise.then(function (promiseData) {
-              if (createdNodes[params.id] === undefined) {
-                createdNodes[params.id] = {};
+              // The parent node id is already escaped (it comes from the tree's own model), but params.id was
+              // unescaped by #execute() before being sent to the server, so we use the parent node id instead in
+              // order to match what #refresh_node.jstree reads later from data.node.id.
+              if (createdNodes[node.id] === undefined) {
+                createdNodes[node.id] = {};
               }
               if (promiseData instanceof Array) {
-                let newNode = promiseData[0];
-                createdNodes[params.id][newNode.id] = newNode;
+                // The job response carries the raw, unescaped, id of the newly created node, so we need to escape it
+                // before it can be inserted into the tree.
+                let newNode = $.fn.xtree.escapeNodeId(promiseData[0]);
+                createdNodes[node.id][newNode.id] = newNode;
               }
             });
           }
@@ -159,9 +164,10 @@ define('xwiki-wysiwyg-entity-resource-picker', [
   };
 
   var getEntityReference = function(node) {
-    var separatorIndex = node.id.indexOf(':');
-    var nodeType = node.id.substr(0, separatorIndex);
-    var nodeStringReference = node.id.substr(separatorIndex + 1);
+    var nodeId = $.fn.xtree.unescapeNodeId(node.id);
+    var separatorIndex = nodeId.indexOf(':');
+    var nodeType = nodeId.substr(0, separatorIndex);
+    var nodeStringReference = nodeId.substr(separatorIndex + 1);
     return XWiki.Model.resolve(nodeStringReference, XWiki.EntityType.byName(nodeType));
   };