Skip to Content

Changes for page MentionsMacro

Last modified by Drunk Monkey on 2026-04-03 15:20
From version 10.1
edited by Drunk Monkey
on 2022-03-20 10:03
Change comment: Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/14.1]
To version 25.1
edited by Drunk Monkey
on 2026-04-03 15:20
Change comment: Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/18.2.0]

Summary

Details

XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,6 +1,6 @@
1 1  require.config({
2 2   paths: {
3 - 'xwiki-suggestUsers': $jsontool.serialize($xwiki.getSkinFile('uicomponents/suggest/suggestUsersAndGroups.js', true))
3 + 'xwiki-suggestUsers': $jsontool.serialize($xwiki.getSkinFile('uicomponents/suggest/suggestUsersAndGroups.js'))
4 4   }
5 5  });
6 6  require(['deferred!ckeditor', 'xwiki-suggestUsers', 'jquery', 'xwiki-meta'], function (ckeditorPromise, suggestUsers, $, xm) {
... ... @@ -60,26 +60,28 @@
60 60   }
61 61  
62 62   ckeditorPromise.then(ckeditor => {
63 - function confMentions(name) {
63 + function getUserMentionsConfig(editor) {
64 64   return {
65 - feed: function (opts, callback) {
66 - search(opts.query, callback);
65 + dataCallback: function (options, callback) {
66 + // Remove the marker prefix and replace non-breaking space.
67 + const text = options.query.substring(1).replaceAll('\u00A0', ' ');
68 + search(text, callback);
67 67   },
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>',
73 + itemTemplate:
74 + `<li data-id="{id}" class="ckeditor-autocomplete-item">
75 + <div>
76 + <span class="ckeditor-autocomplete-item-icon-wrapper">
77 + <span class="{cssClass}"></span>
78 + <img src="{imgUrl}" class="{imgClass}"/>
79 + </span>
80 + <span class="ckeditor-autocomplete-item-label">{label}</span>
81 + </div>
82 + </li>`,
80 80   outputTemplate: function (param) {
81 - var editor = ckeditor.instances[name];
82 - editor.once('afterInsertHtml', function () {
84 + editor.once('afterInsertHtml', function() {
83 83   editor.execCommand('xwiki-macro-insert', {
84 84   name: 'mention',
85 85   inline: 'enforce',
... ... @@ -97,21 +97,30 @@
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;
102 + // Enable the user mentions for the CKEditor instances that have been already created.
103 + Object.values(ckeditor.instances).forEach(maybeEnableUserMentions);
104 + // Enable the user mentions for the CKEditor instances that are going to be created from now on.
105 + ckeditor.on('instanceCreated', (event) => {
106 + maybeEnableUserMentions(event.editor);
107 + });
108 +
109 + function maybeEnableUserMentions(editor) {
110 + return waitForEditorReady(editor).then(editor => {
111 + new CKEDITOR.plugins.AdvancedAutoComplete(editor, getUserMentionsConfig(editor));
112 + return editor;
113 + });
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 - };
116 + function waitForEditorReady(editor) {
117 + return new Promise((resolve, reject) => {
118 + if (editor.status === 'ready') {
119 + resolve(editor);
120 + } else {
121 + editor.once('instanceReady', (event) => {
122 + resolve(event.editor);
123 + });
124 + }
125 + });
126 + }
116 116   });
117 117  });
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,11 +1,17 @@
1 1  .xwiki-mention {
2 - background-color: $services.mentions.mentionsColor;
3 - border-radius: 8px;
4 - padding: 2px 5px 2px 5px;
2 + --mentions-color: $services.mentions.mentionsColor;
3 + --mentions-self-color: $services.mentions.selfMentionsForeground;
4 + --mentions-self-bg: $services.mentions.selfMentionsColor;
5 + background-color: var(--mentions-color);
6 + border-radius: 10px;
7 + padding: 1px 5px 1px 5px;
8 + border: 1px solid var(--dropdown-divider-bg);
5 5  }
6 6  
7 7  .xwiki-mention.user.self {
8 - background-color: $services.mentions.selfMentionsColor;
12 + background-color: var(--mentions-self-bg);
13 + color: var(--mentions-self-color);
14 + border: 0;
9 9  }
10 10  
11 11  .xwiki-mention.removed {
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)## Do not remove this comment as it ensures that the spacing after mention is not broken.
16 +</a>
15 15  {{/html}}
16 16  {{/velocity}}
Default categories
... ... @@ -1,0 +1,1 @@
1 +Notifications
Default category
... ... @@ -1,1 +1,0 @@
1 -Notifications