Changes for page MentionsMacro

Last modified by Sebastian Marsching on 2024/01/08 23:13

From version 1.1
edited by Sebastian Marsching
on 2022/01/09 00:05
Change comment: Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/13.10.2]
To version 2.1
edited by Sebastian Marsching
on 2022/05/29 22:42
Change comment: Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/14.4]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -4,12 +4,12 @@
4 4   }
5 5  });
6 6  require(['deferred!ckeditor', 'xwiki-suggestUsers', 'jquery', 'xwiki-meta'], function (ckeditorPromise, suggestUsers, $, xm) {
7 -
7 +
8 8   /**
9 9   * Get the current wiki scope for displaying global, local or global and local users
10 10   */
11 11   const userScope = "$!services.wiki.user.userScope";
12 -
12 +
13 13   // see https://stackoverflow.com/a/6248722/657524
14 14   function random6chars() {
15 15   // I generate the UID from two parts here
... ... @@ -20,7 +20,7 @@
20 20   secondPart = ("000" + secondPart.toString(36)).slice(-3);
21 21   return firstPart + secondPart;
22 22   }
23 -
23 +
24 24   /**
25 25   * Compute a new unique anchor for the given reference.
26 26   * The unique anchor is based on the mentionned user id, concatenaed with a random string of 6 alphanumeric
... ... @@ -39,8 +39,8 @@
39 39   'input': text,
40 40   'limit': 6,
41 41   };
42 - $.when(suggestUsers.loadUsers(userScope, params)).then(function (user) {
43 - const cct = user.map(function (x) {
42 + suggestUsers.loadUsers(userScope, params).then(users => {
43 + const cct = users.map(function (x) {
44 44   // insert an id because that's required by the mentions plugins.
45 45   x.id = x.value;
46 46   // Make sure to display the icon avatar or the image one.
... ... @@ -56,11 +56,11 @@
56 56   return x;
57 57   });
58 58   callback(cct);
59 - })
59 + });
60 60   }
61 61  
62 - ckeditorPromise.done(function (ckeditor) {
63 - function confMentions(name) {
62 + ckeditorPromise.then(ckeditor => {
63 + function getUserMentionsConfig(editor) {
64 64   return {
65 65   feed: function (opts, callback) {
66 66   search(opts.query, callback);
... ... @@ -68,18 +68,18 @@
68 68   marker: '@',
69 69   minChars: 0,
70 70   itemsLimit: 6,
71 - itemTemplate: '<li data-id="{id}" class="ckeditor-autocomplete-item">'+
72 - '<div>'+
73 - '<span class="ckeditor-autocomplete-item-icon-wrapper">'+
74 - '<span class="{cssClass}"></span>'+
75 - '<img src="{imgUrl}" class="{imgClass}"/>'+
76 - '</span>'+
77 - '<span class="ckeditor-autocomplete-item-label">{label}</span>'+
78 - '</div>'+
79 - '</li>',
71 + itemTemplate:
72 + `<li data-id="{id}" class="ckeditor-autocomplete-item">
73 + <div>
74 + <span class="ckeditor-autocomplete-item-icon-wrapper">
75 + <span class="{cssClass}"></span>
76 + <img src="{imgUrl}" class="{imgClass}"/>
77 + </span>
78 + <span class="ckeditor-autocomplete-item-label">{label}</span>
79 + </div>
80 + </li>`,
80 80   outputTemplate: function (param) {
81 - var editor = ckeditor.instances[name];
82 - editor.once('afterInsertHtml', function () {
82 + editor.once('afterInsertHtml', function() {
83 83   editor.execCommand('xwiki-macro-insert', {
84 84   name: 'mention',
85 85   inline: 'enforce',
... ... @@ -97,21 +97,19 @@
97 97   };
98 98   }
99 99  
100 - function updateConf(config, name) {
101 - const newConf = config || {};
102 - newConf.mentions = newConf.mentions || [];
103 - newConf.mentions.push(confMentions(name));
104 - return newConf;
100 + function updateConfig(editor) {
101 + editor.config.mentions = editor.config.mentions || [];
102 + editor.config.mentions.push(getUserMentionsConfig(editor));
105 105   }
106 106  
107 - var oldReplace = ckeditor.replace;
108 - ckeditor.replace = function (element, config) {
109 - return oldReplace.call(this, element, updateConf(config, element.id));
110 - };
111 -
112 - var oldInline = ckeditor.inline;
113 - ckeditor.inline = function (element, config) {
114 - return oldInline.call(this, element, updateConf(config, element.id));
115 - };
105 + ckeditor.on('instanceCreated', function(event) {
106 + // The editor instance was created but it not yet initialized. Unfortunately the configuration object passed when
107 + // the instance was created has not been merged with the global configuration yet.
108 + event.editor.once('configLoaded', function(event) {
109 + // The editor configuration has been loaded (the instance configuration has been merged with the global
110 + // configuration) but the editor has not been fully initialized yet so we can modify the configuration.
111 + updateConfig(event.editor);
112 + });
113 + });
116 116   });
117 117  });
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -11,6 +11,8 @@
11 11  #end
12 12  #set ($link = $xwiki.getURL($reference.reference, 'view'))
13 13  {{html}}
14 -<a id="$anchor" class="$stringtool.join($cssClasses, ' ')" data-reference="$services.model.serialize($reference.reference, 'default')" href="$link">$content</a>
14 +<a id="$escapetool.xml($anchor)" class="$stringtool.join($cssClasses, ' ')" data-reference="$escapetool.xml($services.model.serialize($reference.reference, 'default'))" href="$escapetool.xml($link)">
15 + $escapetool.xml($content)
16 +</a>
15 15  {{/html}}
16 16  {{/velocity}}