update some livewire code

README.md

@@ -90,14 +90,14 @@ php artisan vendor:publish --tag="tall-views"
         </x-slot>
     </x-tall::table>
 
-    $emit('openDialog', 'tall-confirmation-dialog', [
+    $dispatch('openModal', {component: 'tall-confirmation-dialog', arguments: [
             'message' => 'Are you sure you want to delete?',
             'title' => 'Warning',
             'data' => $someId,
             'confirmText' => 'Delete',
             'style' => 'danger',
             'event' = 'someEventToListenFor'
-        ]);
+        ]});
 
     <livewire:tall-markdown-x :content="$application->faq ?? ''" :style="[
         'toolbar'=> 'flex items-center justify-between',

resources/views/components/modal.blade.php

@@ -1,7 +1,7 @@
 @props(['showClose' => true])
 <div {{$attributes->merge(['class' => 'relative'])}}>
     @if($showClose)
-    <button type="button" wire:click="$emit('closeModal')" class="absolute p-2 text-secondary-500 rounded-full cursor-pointer ring-0 focus:ring-0 top-3 right-3 hover:bg-secondary-200 hover:text-secondary-700 focus:outline-none">
+    <button type="button" wire:click="$dispatch('closeModal')" class="absolute p-2 text-secondary-500 rounded-full cursor-pointer ring-0 focus:ring-0 top-3 right-3 hover:bg-secondary-200 hover:text-secondary-700 focus:outline-none">
         <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
         </svg>

src/MarkdownX.php

@@ -5,12 +5,12 @@
 use Exception;
 use Livewire\Component;
 use Illuminate\Support\Str;
+use Livewire\Attributes\On;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Facades\Storage;
 
 class MarkdownX extends Component
 {
-
     public $content;
     public $contentPreview;
     public $name;
@@ -23,11 +23,6 @@ class MarkdownX extends Component
      *
      * 'markdown-x-image-upload' => uploads image files from the editor
      */
-    protected $listeners = [
-        'markdown-x-image-upload' => 'upload',
-        'markdown-x-giphy-load' => 'getGiphyTrendingImages',
-        'markdown-x-giphy-search' => 'getGiphySearchImages'
-    ];
 
     /**
      * Mount the MarkdownX component, you can pass the current content, the name for the textarea field,
@@ -97,6 +92,7 @@ public function updateContentPreview()
      * @param array $payload
      * @return void
      */
+    #[On('markdown-x-image-upload')]
     public function upload($payload)
     {
 
@@ -169,6 +165,7 @@ public function getGiphyImages($payload)
         }
     }
 
+    #[On('markdown-x-giphy-load')]
     public function getGiphyTrendingImages($payload)
     {
         $api_key = config('markdownx.integrations.giphy.api_key');
@@ -184,6 +181,7 @@ public function getGiphyTrendingImages($payload)
         }
     }
 
+    #[On('markdown-x-giphy-search')]
     public function getGiphySearchImages($payload)
     {
         $api_key = config('markdownx.integrations.giphy.api_key');