Changes for page MentionsMacro
Last modified by Ludovic Dubost on 2024/07/22 15:59
From version 2.1
edited by Ludovic Dubost
on 2021/11/08 18:28
on 2021/11/08 18:28
Change comment:
Migrated property [priority] from class [XWiki.WikiMacroClass]
To version 6.1
edited by Ludovic Dubost
on 2024/07/22 15:59
on 2024/07/22 15:59
Change comment:
Install extension [org.xwiki.platform:xwiki-platform-mentions-ui/16.5.0]
Summary
-
Objects (3 modified, 0 added, 0 removed)
Details
- XWiki.JavaScriptExtension[0]
-
- Code
-
... ... @@ -1,16 +1,15 @@ 1 1 require.config({ 2 2 paths: { 3 - 'xwiki-suggestUsers': "$xwiki.getSkinFile('uicomponents/suggest/suggestUsersAndGroups.js', true))" + 4 - "?v=$escapetool.url($xwiki.version)" 3 + 'xwiki-suggestUsers': $jsontool.serialize($xwiki.getSkinFile('uicomponents/suggest/suggestUsersAndGroups.js')) 5 5 } 6 6 }); 7 7 require(['deferred!ckeditor', 'xwiki-suggestUsers', 'jquery', 'xwiki-meta'], function (ckeditorPromise, suggestUsers, $, xm) { 8 - 7 + 9 9 /** 10 10 * Get the current wiki scope for displaying global, local or global and local users 11 11 */ 12 12 const userScope = "$!services.wiki.user.userScope"; 13 - 12 + 14 14 // see https://stackoverflow.com/a/6248722/657524 15 15 function random6chars() { 16 16 // I generate the UID from two parts here ... ... @@ -21,7 +21,7 @@ 21 21 secondPart = ("000" + secondPart.toString(36)).slice(-3); 22 22 return firstPart + secondPart; 23 23 } 24 - 23 + 25 25 /** 26 26 * Compute a new unique anchor for the given reference. 27 27 * The unique anchor is based on the mentionned user id, concatenaed with a random string of 6 alphanumeric ... ... @@ -40,8 +40,8 @@ 40 40 'input': text, 41 41 'limit': 6, 42 42 }; 43 - $.when(suggestUsers.loadUsers(userScope, params)).then(function (user){44 - const cct = user.map(function (x) { 42 + suggestUsers.loadUsers(userScope, params).then(users => { 43 + const cct = users.map(function (x) { 45 45 // insert an id because that's required by the mentions plugins. 46 46 x.id = x.value; 47 47 // Make sure to display the icon avatar or the image one. ... ... @@ -57,11 +57,11 @@ 57 57 return x; 58 58 }); 59 59 callback(cct); 60 - }) 59 + }); 61 61 } 62 62 63 - ckeditorPromise. done(function(ckeditor){64 - function confMentions(name) {62 + ckeditorPromise.then(ckeditor => { 63 + function getUserMentionsConfig(editor) { 65 65 return { 66 66 feed: function (opts, callback) { 67 67 search(opts.query, callback); ... ... @@ -69,21 +69,21 @@ 69 69 marker: '@', 70 70 minChars: 0, 71 71 itemsLimit: 6, 72 - itemTemplate: '<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>', 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>`, 81 81 outputTemplate: function (param) { 82 - var editor = ckeditor.instances[name]; 83 - editor.once('afterInsertHtml', function () { 82 + editor.once('afterInsertHtml', function() { 84 84 editor.execCommand('xwiki-macro-insert', { 85 85 name: 'mention', 86 - inline: true,85 + inline: 'enforce', 87 87 parameters: { 88 88 reference: param.id, 89 89 style: 'FULL_NAME', ... ... @@ -98,21 +98,35 @@ 98 98 }; 99 99 } 100 100 101 - function updateConf(config, name) { 102 - const newConf = config; 103 - newConf.mentions = newConf.mentions || []; 104 - newConf.mentions.push(confMentions(name)); 105 - 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 + }); 106 106 } 107 107 108 - var oldReplace = ckeditor.replace; 109 - ckeditor.replace = function (element, config) { 110 - return oldReplace.call(this, element, updateConf(config, element.id)); 111 - }; 112 - 113 - var oldInline = ckeditor.inline; 114 - ckeditor.inline = function (element, config) { 115 - return oldInline.call(this, element, updateConf(config, element.id)); 116 - }; 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 + } 117 117 }); 118 118 });
- XWiki.StyleSheetExtension[0]
-
- Code
-
... ... @@ -1,6 +1,6 @@ 1 1 .xwiki-mention { 2 2 background-color: $services.mentions.mentionsColor; 3 - border-radius: 8px;3 + border-radius: 10px; 4 4 padding: 2px 5px 2px 5px; 5 5 } 6 6
- 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}} - Macro description
-
... ... @@ -1,1 +1,1 @@ 1 -Insert a user mention. 1 +Inserts a user mention. - Default categories
-
... ... @@ -1,0 +1,1 @@ 1 +Notifications