Modifications pour le document MentionsMacro

Modifié par DecalogExploitation le 2026/05/13 16:19

Depuis la version 3.1
modifié par DecalogExploitation
sur 2026/05/13 16:19
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/17.10.8]
À la version 1.1
modifié par superadmin
sur 2026/01/29 15:37
Commentaire de modification : Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/17.10.2]

Résumé

Détails

Propriétés de la Page
Auteur du document
... ... @@ -1,1 +1,1 @@
1 -xwiki:XWiki.DecalogExploitation
1 +XWiki.superadmin
XWiki.JavaScriptExtension[0]
Code
... ... @@ -1,15 +1,15 @@
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) {
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,35 +56,33 @@
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 - 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);
65 + feed: function (opts, callback) {
66 + search(opts.query, callback);
69 69   },
70 70   marker: '@',
71 71   minChars: 0,
72 72   itemsLimit: 6,
73 - itemTemplate: '<li data-id="{id}" class="ckeditor-autocomplete-item">'+
74 - '<div>'+
75 - '<span class="ckeditor-autocomplete-item-icon-wrapper">'+
76 - '<span class="{cssClass}"></span>'+
77 - '<img src="{imgUrl}" class="{imgClass}"/>'+
78 - '</span>'+
79 - '<span class="ckeditor-autocomplete-item-label">{label}</span>'+
80 - '</div>'+
81 - '</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>`,
82 82   outputTemplate: function (param) {
83 - var editor = ckeditor.instances[name];
84 - editor.once('afterInsertHtml', function () {
82 + editor.once('afterInsertHtml', function() {
85 85   editor.execCommand('xwiki-macro-insert', {
86 86   name: 'mention',
87 - inline: true,
85 + inline: 'enforce',
88 88   parameters: {
89 89   reference: param.id,
90 90   style: 'FULL_NAME',
... ... @@ -99,21 +99,35 @@
99 99   };
100 100   }
101 101  
102 - function updateConf(config, name) {
103 - const newConf = config;
104 - newConf.mentions = newConf.mentions || [];
105 - newConf.mentions.push(confMentions(name));
106 - return newConf;
100 + // Enable the user mentions for the CKEditor instances that have been already created.
101 + Object.values(ckeditor.instances).forEach(maybeEnableUserMentions);
102 + // Enable the user mentions for the CKEditor instances that are going to be created from now on.
103 + ckeditor.on('instanceCreated', (event) => {
104 + maybeEnableUserMentions(event.editor);
105 + });
106 +
107 + function maybeEnableUserMentions(editor) {
108 + return waitForEditorReady(editor).then((editor) => {
109 + // Check if the Mentions plugin is enabled for the given editor instance.
110 + // TODO: Add support for disabling the user mentions for a particular editor instance (without disabling all
111 + // types of mentions).
112 + if (editor.plugins.mentions) {
113 + editor.plugins.mentions.instances.push(new ckeditor.plugins.mentions(editor, getUserMentionsConfig(editor)));
114 + }
115 + return editor;
116 + });
107 107   }
108 108  
109 - var oldReplace = ckeditor.replace;
110 - ckeditor.replace = function (element, config) {
111 - return oldReplace.call(this, element, updateConf(config, element.id));
112 - };
113 -
114 - var oldInline = ckeditor.inline;
115 - ckeditor.inline = function (element, config) {
116 - return oldInline.call(this, element, updateConf(config, element.id));
117 - };
119 + function waitForEditorReady(editor) {
120 + return new Promise((resolve, reject) => {
121 + if (editor.status === 'ready') {
122 + resolve(editor);
123 + } else {
124 + editor.once('instanceReady', (event) => {
125 + resolve(event.editor);
126 + });
127 + }
128 + });
129 + }
118 118   });
119 119  });
XWiki.StyleSheetExtension[0]
Code
... ... @@ -1,14 +1,11 @@
1 1  .xwiki-mention {
2 2   background-color: $services.mentions.mentionsColor;
3 - border-radius: 8px;
4 - padding: 1px 5px 1px 5px;
5 - border: 1px solid var(--dropdown-divider-bg);
3 + border-radius: 10px;
4 + padding: 2px 5px 2px 5px;
6 6  }
7 7  
8 8  .xwiki-mention.user.self {
9 - background-color: var(--mentions-self-bg);
10 - color: var(--mentions-self-color);
11 - border: 0;
8 + background-color: $services.mentions.selfMentionsColor;
12 12  }
13 13  
14 14  .xwiki-mention.removed {
XWiki.WikiMacroClass[0]
Code de la macro
... ... @@ -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
Description de la macro
... ... @@ -1,1 +1,1 @@
1 -Insert a user mention.
1 +Inserts a user mention.