improve styling

examples/Components/Routes/Mentions/index.vue

@@ -13,8 +13,8 @@
 
 		</editor>
 
-		<div class="suggestions">
-			<div v-if="query && !filteredUsers.length">
+		<div class="suggestion-list" v-if="query || filteredUsers.length">
+			<div class="suggestion-list__no-results" v-if="query && !filteredUsers.length">
 				No users found.
 			</div>
 			<div
@@ -22,7 +22,7 @@
 				v-for="(user, index) in filteredUsers"
 				:key="user.id"
 				@click="selectUser(user)"
-				class="suggestions__item"
+				class="suggestion-list__item"
 				:class="{ 'is-selected': navigatedUserIndex === index }"
 			>
 				{{ user.name }}
@@ -158,13 +158,34 @@ export default {
   font-weight: bold;
   border-radius: 5px;
   padding: 0.2rem 0.5rem;
+	white-space: nowrap;
 }
 
-.suggestions {
+.mention-suggestion {
+	color: rgba($color-black, 0.6);
+}
+
+.suggestion-list {
 	max-width: 30rem;
 	margin: 0 auto 2rem auto;
+	padding: 0.2rem;
+	border-radius: 5px;
+	border: 2px solid rgba($color-black, 0.1);
+	color: rgba($color-black, 0.6);
+	font-size: 0.8rem;
+	font-weight: bold;
+
+	&__no-results {
+		padding: 0.2rem 0.5rem;
+	}
 
 	&__item {
+		color: rgba($color-black, 0.6);
+		font-size: 0.8rem;
+		font-weight: bold;
+		border-radius: 5px;
+		padding: 0.2rem 0.5rem;
+
 		&.is-selected {
 			background-color: rgba($color-black, 0.1);
 		}

packages/tiptap-extensions/src/nodes/Mention.js

@@ -45,7 +45,7 @@ export default class MentionNode extends Node {
 	get plugins() {
 		return [
 			suggestionsPlugin({
-				debug: true,
+				suggestionClass: 'mention-suggestion',
 				matcher: triggerCharacter('@', {
 					allowSpaces: false,
 					startOfLine: false,

packages/tiptap-extensions/src/plugins/suggestions.js

@@ -66,7 +66,7 @@ export function triggerCharacter(char, { allowSpaces = false, startOfLine = fals
  */
 export function suggestionsPlugin({
   matcher = triggerCharacter('#'),
-  suggestionClass = 'ProseMirror-suggestion',
+  suggestionClass = 'suggestion',
   command = () => false,
   items = [],
   onEnter = () => false,
@@ -81,7 +81,6 @@ export function suggestionsPlugin({
     return searchItems
       .filter(item => JSON.stringify(item).toLowerCase().includes(query.toLowerCase()))
   },
-  debug = false,
 }) {
   return new Plugin({
     key: new PluginKey('suggestions'),
@@ -241,7 +240,6 @@ export function suggestionsPlugin({
             nodeName: 'span',
             class: suggestionClass,
             'data-decoration-id': decorationId,
-            style: debug ? 'background: rgba(0, 0, 255, 0.05); color: blue; border: 2px solid blue;' : null,
           }),
         ])
       },