From a8935f6f2b5379622d5df62134f5cc5bbd35113a Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 5 Apr 2023 19:20:44 +0200
Subject: [PATCH] Synchronize the implementation of mentions in CKEditor

---
 ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts           | 5 +++--
 .../files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js | 3 ++-
 .../lib/action/EditorGetMentionSuggestionsAction.class.php   | 1 +
 wcfsetup/install/files/style/bbcode/userMention.scss         | 1 +
 wcfsetup/install/files/style/ui/wsc31.scss                   | 1 +
 5 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts b/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
index 39ac17cedb..44ee0eed43 100644
--- a/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
+++ b/ts/WoltLabSuite/Core/Component/Ckeditor/Mention.ts
@@ -17,7 +17,7 @@ type SearchResultItem = {
   avatarTag: string;
   username: string;
   userID: number;
-  //  type: "group" | "user";
+  type: "user";
 };
 type ResultGetSearchResultList = SearchResultItem[];
 
@@ -43,6 +43,8 @@ async function getPossibleMentions(query: string): Promise<UserMention[]> {
       id: `@${item.username}`,
       text: item.username,
       icon: item.avatarTag,
+      objectId: item.userID,
+      type: item.type,
     };
   });
 }
@@ -56,7 +58,6 @@ function getMentionConfiguration(): MentionConfig {
           return getPossibleMentions(query) as any;
         },
         itemRenderer: (item: Awaited<ReturnType<typeof getPossibleMentions>>[0]) => {
-          // TODO: This is ugly.
           return createFragmentFromHtml(`
             <span class="ckeditor5__mention">${item.icon} ${item.text}</span>
           `).firstElementChild as HTMLElement;
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 dc6e5f020a..0ee189c1f3 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Component/Ckeditor/Mention.js
@@ -24,6 +24,8 @@ define(["require", "exports", "../../Ajax/Backend", "../../Dom/Util", "./Event"]
                 id: `@${item.username}`,
                 text: item.username,
                 icon: item.avatarTag,
+                objectId: item.userID,
+                type: item.type,
             };
         });
     }
@@ -36,7 +38,6 @@ define(["require", "exports", "../../Ajax/Backend", "../../Dom/Util", "./Event"]
                         return getPossibleMentions(query);
                     },
                     itemRenderer: (item) => {
-                        // TODO: This is ugly.
                         return (0, Util_1.createFragmentFromHtml)(`
             <span class="ckeditor5__mention">${item.icon} ${item.text}</span>
           `).firstElementChild;
diff --git a/wcfsetup/install/files/lib/action/EditorGetMentionSuggestionsAction.class.php b/wcfsetup/install/files/lib/action/EditorGetMentionSuggestionsAction.class.php
index eac1eae742..a2b50c6045 100644
--- a/wcfsetup/install/files/lib/action/EditorGetMentionSuggestionsAction.class.php
+++ b/wcfsetup/install/files/lib/action/EditorGetMentionSuggestionsAction.class.php
@@ -42,6 +42,7 @@ final class EditorGetMentionSuggestionsAction implements RequestHandlerInterface
                     'avatarTag' => $userProfile->getAvatar()->getImageTag(16),
                     'username' => $userProfile->getUsername(),
                     'userID' => $userProfile->getObjectID(),
+                    'type' => 'user',
                 ],
                 $users
             ),
diff --git a/wcfsetup/install/files/style/bbcode/userMention.scss b/wcfsetup/install/files/style/bbcode/userMention.scss
index dfb34a524f..84424f5f42 100644
--- a/wcfsetup/install/files/style/bbcode/userMention.scss
+++ b/wcfsetup/install/files/style/bbcode/userMention.scss
@@ -1,3 +1,4 @@
+.ck.ck-content .mention,
 .userMention {
 	background-color: var(--wcfSidebarBackground);
 	border-radius: 2px;
diff --git a/wcfsetup/install/files/style/ui/wsc31.scss b/wcfsetup/install/files/style/ui/wsc31.scss
index f5c30b21ad..6db4da897e 100644
--- a/wcfsetup/install/files/style/ui/wsc31.scss
+++ b/wcfsetup/install/files/style/ui/wsc31.scss
@@ -174,6 +174,7 @@
 			}
 		}
 	}
+	.ck.ck-content .mention,
 	.userMention {
 		color: var(--wcfSidebarLink);
 
-- 
2.20.1