From 5d31088be1791684f61e7eb8e9a875528443a2cc Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Tue, 4 Apr 2023 20:29:23 +0200
Subject: [PATCH] Fix the styling of mentions

See #5382
---
 ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts        | 2 +-
 .../js/WoltLabSuite/Core/Component/Ckeditor/Mention.js    | 2 +-
 wcfsetup/install/files/style/ui/ckeditor.scss             | 8 ++++++++
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
index e6f3793e7e..39ac17cedb 100644
--- 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 00d22952b1..dc6e5f020a 100644
--- 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 043321a4a2..47ad1c4056 100644
--- 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;
+}
-- 
2.20.1