feat: display correct username and use ISearch to search users

Signed-off-by: Luka Trovic <luka@nextcloud.com>

Author: luka-nextcloud

lib/Controller/UserApiController.php

@@ -3,31 +3,35 @@
 namespace OCA\Text\Controller;
 
 use \OCP\AppFramework\ApiController;
+use OCP\Collaboration\Collaborators\ISearch;
 use \OCP\IRequest;
-use \OCP\IUserManager;
+use OCP\Share\IShare;
 
 class UserApiController extends ApiController {
 
-    protected IUserManager $userManager;
+	protected ISearch $collaboratorSearch;
 
-    public function __construct($appName, IRequest $request, IUserManager $userManager) {
+    public function __construct($appName, IRequest $request, ISearch $ISearch) {
         parent::__construct($appName, $request);
 
-        $this->userManager = $userManager;
+        $this->collaboratorSearch = $ISearch;
     }
 
     /**
      * @param string $filter
      */
-    public function index(string $filter) {
-		$result = [];
-
-        $users = $this->userManager->search($filter, 5);
-        foreach ($users as $user) {
-            $result[$user->getUID()] = $user->getDisplayName();
+    public function index(string $filter, int $limit = 5) {
+		$users = [];
+		[$result] = $this->collaboratorSearch->search($filter, [IShare::TYPE_USER], false, $limit, 0);
+
+        foreach ($result['users'] as ['label' => $label, 'value' => $value]) {
+			if (isset($value['shareWith'])) {
+				$id = $value['shareWith'];
+            	$users[$id] = $label;
+			}
         }
 
-		return $result;
+		return $users;
 	}
 
 }

src/extensions/Mention.js

@@ -21,7 +21,7 @@ export default TipTapMention.extend({
 
 	toMarkdown(state, node) {
 		state.write(' ')
-		state.write(`@[${node.attrs.id}](mention://user/${node.attrs.id})`)
+		state.write(`@[${node.attrs.id}](mention://user/${node.attrs.label})`)
 		state.write(' ')
 	},
 })

src/extensions/Mention.vue

@@ -1,7 +1,7 @@
 <template>
 	<NodeViewWrapper as="span" class="mention" contenteditable="false">
-		<UserBubble :user="node.attrs.id" :display-name="node.attrs.id.trim()">
-			@{{ node.attrs.id.trim() }}
+		<UserBubble :user="node.attrs.id" :display-name="username" class="mention-user-bubble">
+			@{{ username }}
 		</UserBubble>
 	</NodeViewWrapper>
 </template>
@@ -27,11 +27,23 @@ export default {
 			required: true,
 		},
 	},
+	data() {
+		return {
+			username: this.node.attrs.label
+		}
+	}
 }
 </script>
 <style scoped>
 /* This is required to properly render the bubble text (which seems linke a browser bug) */
 .text-editor__wrapper div.ProseMirror .mention[contenteditable=false] :deep(*) {
     -webkit-user-modify: read-only !important;
 }
+
+.mention-user-bubble /deep/ .user-bubble__content .user-bubble__title {
+	position: relative !important;
+    top: -20px !important;
+    left: -60px !important;
+	height: 40px;
+}
 </style>