Fix the styling of mentions

See #5382

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
index e6f3793e7e5b1b6fb0d6e7b9ce7d6f898b4d9873..39ac17cedbb7e5de2b94809ca47fd4ca56c431c9 100644 (file)
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
@@ -58,7 +58,7 @@ function getMentionConfiguration(): MentionConfig {
         itemRenderer: (item: Awaited<ReturnType<typeof getPossibleMentions>>[0]) => {
           // TODO: This is ugly.
           return createFragmentFromHtml(`
-            <span>${item.icon} ${item.text}</span>
+            <span class="ckeditor5__mention">${item.icon} ${item.text}</span>
           `).firstElementChild as HTMLElement;
         },
         marker: "@",

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js
index 00d22952b17c286cae18fafb9b7f8d970bc9fb59..dc6e5f020aa2fa5a59c7545364be2050aa2747da 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js
@@ -38,7 +38,7 @@ define(["require", "exports", "../../Ajax/Backend", "../../Dom/Util", "./Event"]
                     itemRenderer: (item) => {
                         // TODO: This is ugly.
                         return (0, Util_1.createFragmentFromHtml)(`
-            <span>${item.icon} ${item.text}</span>
+            <span class="ckeditor5__mention">${item.icon} ${item.text}</span>
           `).firstElementChild;
                     },
                     marker: "@",

diff --git a/wcfsetup/install/files/style/ui/ckeditor.scss b/wcfsetup/install/files/style/ui/ckeditor.scss
index 043321a4a228d8ddc4d46ecc90990d02345291dd..47ad1c405691a53bbe542f164290499c994be24a 100644 (file)
--- a/wcfsetup/install/files/style/ui/ckeditor.scss
+++ b/wcfsetup/install/files/style/ui/ckeditor.scss
@@ -181,3 +181,11 @@ html[data-color-scheme="dark"] {
                display: none;
        }
 }
+
+.ck.ck-list__item .ck-button.ckeditor5__mention {
+       display: block;
+}
+.ck.ck-list__item .ck-button.ckeditor5__mention .userAvatarImage {
+       height: 16px;
+       width: 16px;
+}