Mentions allow custom loading message (#601)

* Add custom loading message to mentions

* update readme

Author: neverything

README.md

@@ -645,6 +645,9 @@ TiptapEditor::make(name: 'content')
     // Set a custom placeholder message. Note: if you set a placeholder, then it will ONLY show suggestions when the query is not empty.
     ->mentionItemsPlaceholder("Search for users...")
 
+    // Set a custom loading message. This will be displayed instead of a loading spinner.
+    ->mentionItemsLoading("Loading...")
+    
     // Customize how many mention items should be shown at once, 8 by default. Is nullable and only works with static suggestions.
     ->maxMentionItems()
 

resources/dist/filament-tiptap-editor.js

@@ -156,6 +156,7 @@ export const CustomMention = Mention.extend({
                 props,
                 this.options.emptyMentionItemsMessage,
                 this.options.mentionItemsPlaceholder,
+                this.options.mentionItemsLoading,
                 _query
               )
               if (!props.clientRect) {

resources/js/extensions/Mention/Mention.js

@@ -1,10 +1,11 @@
-export default (props, emptyMentionItemsMessage, mentionItemsPlaceholder, initialQuery) => {
+export default (props, emptyMentionItemsMessage, mentionItemsPlaceholder, mentionItemsLoading, initialQuery) => {
     Alpine.data('suggestions', () => ({
         items: props.items,
         query: initialQuery,
         selectedIndex: 0,
         emptyMentionItemsMessage: emptyMentionItemsMessage,
         mentionItemsPlaceholder: mentionItemsPlaceholder,
+        mentionItemsLoading: mentionItemsLoading,
         isLoading: !mentionItemsPlaceholder,
         init() {
             this.$watch('items', () => {
@@ -55,14 +56,16 @@ export default (props, emptyMentionItemsMessage, mentionItemsPlaceholder, initia
     }));
     return `
 <div class="mention-dropdown" x-data=suggestions x-bind="rootEvents">
-  
     <!-- Loading spinner -->
-    <template x-if="isLoading && !(mentionItemsPlaceholder && !query.length)">
-        <div class="px-2 py-1">
+    <template x-if="isLoading && ! (mentionItemsPlaceholder && !query.length)">
+      <div>
+        <div class="px-2 py-1" x-show="!mentionItemsLoading">
           <svg class="animate-spin size-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-        </svg>
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          </svg>
+        </div>
+        <p x-text="mentionItemsLoading"></p>
       </div>
     </template>
 

resources/js/extensions/Mention/get-content.js

@@ -168,6 +168,7 @@ export default function tiptap({
    mentionItems = null,
    emptyMentionItemsMessage = '',
    mentionItemsPlaceholder = null,
+   mentionItemsLoading = null,
    maxMentionItems = null,
    mentionTrigger = '@',
    livewireId,
@@ -227,6 +228,7 @@ export default function tiptap({
                     mentionItems,
                     emptyMentionItemsMessage,
                     mentionItemsPlaceholder,
+                    mentionItemsLoading,
                     maxMentionItems,
                     mentionTrigger,
                     livewireId,

resources/js/plugin.js

@@ -15,6 +15,7 @@
     $mentionItems = $getMentionItems();
     $emptyMentionItemsMessage = $getEmptyMentionItemsMessage();
     $mentionItemsPlaceholder = $getMentionItemsPlaceholder();
+    $mentionItemsLoading = $getMentionItemsLoading();
     $getMentionItemsUsingEnabled = $getMentionItemsUsingEnabled();
     $maxMentionItems = $getMaxMentionItems();
     $mentionTrigger = $getMentionTrigger();
@@ -63,6 +64,7 @@ class="relative z-0 tiptap-wrapper rounded-md bg-white dark:bg-gray-900 focus-wi
                         mentionItems: @js($mentionItems),
                         emptyMentionItemsMessage: @js($emptyMentionItemsMessage),
                         mentionItemsPlaceholder: @js($mentionItemsPlaceholder),
+                        mentionItemsLoading: @js($mentionItemsLoading),
                         maxMentionItems: @js($maxMentionItems),
                         mentionTrigger: @js($mentionTrigger),
                         livewireId: @js($this->getId()),

resources/views/tiptap-editor.blade.php

@@ -15,6 +15,8 @@ trait HasMentions
 
     protected string | Closure | null $mentionItemsPlaceholder = null;
 
+    protected string | Closure | null $mentionItemsLoading = null;
+
     protected int | Closure | null $maxMentionItems = 8;
 
     protected ?Closure $getMentionItemsUsing = null;
@@ -139,6 +141,21 @@ public function getMentionItemsPlaceholder(): ?string
         return $this->evaluate($this->mentionItemsPlaceholder);
     }
 
+    /**
+     * Set the message to display in the loading suggestions state when the trigger character is typed and input is provided.
+     */
+    public function mentionItemsLoading(string | Closure | null $message): static
+    {
+        $this->mentionItemsLoading = $message;
+
+        return $this;
+    }
+
+    public function getMentionItemsLoading(): ?string
+    {
+        return $this->evaluate($this->mentionItemsLoading);
+    }
+
     public function getMentionItemsUsing(?Closure $callback): static
     {
         $this->getMentionItemsUsing = $callback;