Fix comment editor updates for prefixed aliases (#88)

* Fix comment editor updates for prefixed aliases

* Make alias assertions respect component prefix

* Fix code style

Author: luisdalmolin

resources/dist/commentions.js

@@ -17,7 +17,7 @@ const debounce = (func, wait) => {
 };
 
 document.addEventListener('alpine:init', () => {
-    Alpine.data('editor', (content, mentions, component, placeholder, editorCssClasses) => {
+    Alpine.data('editor', (content, mentions, component, placeholder, editorCssClasses, componentAlias = null) => {
         let editor
 
         const defaultEditorCssClasses = `comm:prose comm:dark:prose-invert comm:prose-sm comm:sm:prose-base comm:lg:prose-lg comm:xl:prose-2xl comm:focus:outline-none comm:p-4 comm:min-w-full comm:w-full comm:rounded-lg comm:border comm:border-gray-300 comm:dark:border-gray-700`;
@@ -27,11 +27,10 @@ document.addEventListener('alpine:init', () => {
 
             init() {
                 const _this = this
+                const targetComponent = componentAlias ?? `commentions::${component}`
 
                 const debouncedUpdate = debounce((editor) => {
-                    Livewire.dispatchTo(`commentions::${component}`, `body:updated`, {
-                        value: editor.getHTML()
-                    });
+                    Livewire.dispatchTo(targetComponent, `body:updated`, editor.getHTML());
                 }, 300);
 
                 editor = new Editor({

resources/js/commentions.js

@@ -92,7 +92,7 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
         @if ($editing)
             <div class="comm:mt-2">
                 <div class="tip-tap-container comm:mb-2" wire:ignore>
-                    <div x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($this->getTipTapCssClasses()))">
+                    <div x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comment'))">
                         <div x-ref="element"></div>
                     </div>
                 </div>

resources/views/comment.blade.php

@@ -8,7 +8,7 @@
                 {{-- tiptap editor --}}
                 <div class="comm:relative tip-tap-container comm:mb-2" x-on:click="wasFocused = true" wire:ignore>
                     <div
-                        x-data="editor(@js($commentBody), @js($this->mentions), 'comments', @js($this->getPlaceholder()), @js($this->getTipTapCssClasses()))"
+                        x-data="editor(@js($commentBody), @js($this->mentions), 'comments', @js($this->getPlaceholder()), @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comments'))"
                     >
                         <div x-ref="element"></div>
                     </div>

resources/views/comments.blade.php

@@ -2,6 +2,7 @@
 
 use Kirschbaum\Commentions\Comment;
 use Kirschbaum\Commentions\Comment as CommentModel;
+use Kirschbaum\Commentions\Config;
 use Kirschbaum\Commentions\Livewire\Comment as CommentComponent;
 use Kirschbaum\Commentions\RenderableComment;
 use Tests\Models\Post;
@@ -224,6 +225,23 @@
     ]);
 });
 
+test('editing comment editor includes prefixed component alias', function () {
+    /** @var User $user */
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $comment = CommentModel::factory()->author($user)->commentable($post)->create();
+
+    $componentAlias = Config::getComponentPrefix() . 'comment';
+
+    livewire(CommentComponent::class, [
+        'comment' => $comment,
+    ])
+        ->call('edit')
+        ->assertSee($componentAlias, false);
+});
+
 test('can render a custom renderable comment', function () {
     $comment = new RenderableComment(
         id: 1,

tests/Livewire/CommentTest.php

@@ -1,6 +1,7 @@
 <?php
 
 use Illuminate\Support\Facades\Event;
+use Kirschbaum\Commentions\Config;
 use Kirschbaum\Commentions\Events\CommentWasCreatedEvent;
 use Kirschbaum\Commentions\Livewire\Comments;
 use Tests\Models\Post;
@@ -83,3 +84,17 @@
 
     Event::assertNotDispatched(CommentWasCreatedEvent::class);
 });
+
+test('comments editor includes prefixed component alias', function () {
+    /** @var User $user */
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+
+    $componentAlias = Config::getComponentPrefix() . 'comments';
+
+    livewire(Comments::class, [
+        'record' => $post,
+    ])->assertSee($componentAlias, false);
+});