fix: disable comment submit button while the editor is empty

phpstan.neon

@@ -47,7 +47,7 @@ parameters:
             path: src/RenderableComment.php
 
         -
-            message: '#^Call to an undefined method PHPUnit\\Framework\\TestCase::[a-zA-Z0-9_]+\(\)\.$#'
+            message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall::[a-zA-Z0-9_]+\(\)\.$#'
             identifier: method.notFound
             count: 3
             path: tests/**/*.php
@@ -58,13 +58,13 @@ parameters:
             path: tests/Pest.php
 
         -
-            message: '#^Call to an undefined method PHPUnit\\Framework\\TestCase\:\:assertDatabaseHas\(\)\.$#'
+            message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:assertDatabaseHas\(\)\.$#'
             identifier: method.notFound
             count: 2
             path: tests/Livewire/CommentReactionTest.php
 
         -
-            message: '#^Call to an undefined method PHPUnit\\Framework\\TestCase\:\:assertDatabaseMissing\(\)\.$#'
+            message: '#^Call to an undefined method Pest\\PendingCalls\\TestCall\:\:assertDatabaseMissing\(\)\.$#'
             identifier: method.notFound
             count: 3
             path: tests/Livewire/CommentReactionTest.php

resources/js/commentions.js

@@ -25,6 +25,9 @@ document.addEventListener('alpine:init', () => {
         return {
             updatedAt: Date.now(),
 
+            // Reactive: the surrounding form reads this to disable its submit button while empty.
+            isEmpty: ! content,
+
             init() {
                 const _this = this
                 const targetComponent = componentAlias ?? `commentions::${component}`
@@ -57,11 +60,13 @@ document.addEventListener('alpine:init', () => {
 
                     onCreate({ editor }) {
                         _this.updatedAt = Date.now()
+                        _this.isEmpty = editor.isEmpty
                     },
 
                     onUpdate({ editor }) {
                         debouncedUpdate(editor);
                         _this.updatedAt = Date.now()
+                        _this.isEmpty = editor.isEmpty
                     },
 
                     onSelectionUpdate({ editor }) {
@@ -72,6 +77,7 @@ document.addEventListener('alpine:init', () => {
                 // Watch for changes in the content property from Livewire
                 Livewire.on(`${component}:content:cleared`, () => {
                     editor.commands.setContent('');
+                    _this.isEmpty = editor.isEmpty;
                 });
             },
 

resources/views/comment.blade.php

@@ -90,16 +90,19 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
         </div>
 
         @if ($editing)
-            <div class="comm:mt-2">
+            <div
+                class="comm:mt-2"
+                x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comment'))"
+            >
                 <div class="tip-tap-container comm:mb-2" wire:ignore>
-                    <div x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comment'))">
-                        <div x-ref="element"></div>
-                    </div>
+                    <div x-ref="element"></div>
                 </div>
 
                 <div class="comm:flex comm:gap-x-2">
                     <x-filament::button
                         wire:click="updateComment({{ $comment->getId() }})"
+                        x-bind:disabled="isEmpty"
+                        x-bind:class="{ 'comm:opacity-50 comm:cursor-not-allowed': isEmpty }"
                         size="sm"
                     >
                         {{ __('commentions::comments.save') }}

resources/views/comments.blade.php

@@ -4,20 +4,22 @@
     {{-- Main Comments Area --}}
     <div class="comm:flex-1 comm:space-y-2">
         @if (Config::resolveAuthenticatedUser()?->can('create', Config::getCommentModel()))
-            <form wire:submit.prevent="save" x-cloak>
+            <form
+                wire:submit.prevent="save"
+                x-cloak
+                x-data="editor(@js($commentBody), @js($this->mentions), 'comments', @js($this->getPlaceholder()), @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comments'))"
+            >
                 {{-- 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()), @js($commentionsComponentPrefix . 'comments'))"
-                    >
-                        <div x-ref="element"></div>
-                    </div>
+                    <div x-ref="element"></div>
                 </div>
 
             <template x-if="wasFocused">
                 <div>
                     <x-filament::button
                         wire:click="save"
+                        x-bind:disabled="isEmpty"
+                        x-bind:class="{ 'comm:opacity-50 comm:cursor-not-allowed': isEmpty }"
                         size="sm"
                     >{{ __('commentions::comments.comment') }}</x-filament::button>
 

tests/Livewire/CommentTest.php

@@ -97,6 +97,22 @@
     ]);
 });
 
+test('comment edit disables the save button while the editor is empty', function () {
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $comment = CommentModel::factory()->author($user)->commentable($post)->create([
+        'body' => 'Original body',
+    ]);
+
+    livewire(CommentComponent::class, [
+        'comment' => $comment,
+    ])
+        ->set('editing', true)
+        ->assertSeeHtml('x-bind:disabled="isEmpty"');
+});
+
 test('other users cannot update a comment by default', function () {
     $user = User::factory()->create();
     actingAs($user);

tests/Livewire/CommentsTest.php

@@ -63,6 +63,19 @@
     ]);
 });
 
+test('comment creation disables the submit button while the editor is empty', function () {
+    /** @var User $user */
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+
+    livewire(Comments::class, [
+        'record' => $post,
+    ])
+        ->assertSeeHtml('x-bind:disabled="isEmpty"');
+});
+
 test('guests cannot create comments', function () {
     Event::fake();