fix: disable comment submit button while the editor is empty

README.md

@@ -25,7 +25,12 @@ composer require kirschbaum-development/commentions
 php artisan vendor:publish --tag="commentions-migrations"
 ```
 
-2. In your `User` model implement the `Commenter` interface.
+2. Get the assets
+```bash
+php artisan filament:assets
+```
+
+3. In your `User` model implement the `Commenter` interface.
 
 ```php
 use Kirschbaum\Commentions\Contracts\Commenter;
@@ -36,7 +41,7 @@ class User extends Model implements Commenter
 }
 ```
 
-3. In the model you want to add comments, implement the `Commentable` interface and the `HasComments` trait.
+4. In the model you want to add comments, implement the `Commentable` interface and the `HasComments` trait.
 
 ```php
 use Kirschbaum\Commentions\HasComments;
@@ -174,6 +179,15 @@ Examples:
 <livewire:commentions::comments :record="$record" :show-subscribers="false" />
 ```
 
+For Livewire 4+:
+```php
+// Hide the sidebar entirely
+<livewire:commentions.comments :record="$record" :sidebar-enabled="false" />
+
+// Keep the sidebar, but hide the subscribers list (uses config default if omitted)
+<livewire:commentions.comments :record="$record" :show-subscribers="false" />
+```
+
 Inside the component/template you can also rely on these computed properties:
 
 - `canSubscribe`: whether the current user can subscribe
@@ -607,6 +621,12 @@ public function getComments(?int $limit = null): Collection
 
 ***
 
+## Upgrading
+
+See [UPGRADE.md](UPGRADE.md) for upgrade instructions.
+
+***
+
 ## Security
 
 If you discover any security related issues, please email security@kirschbaumdevelopment.com instead of using the issue tracker.

UPGRADE.md

@@ -0,0 +1,23 @@
+![](screenshots/commentions-logo.png)
+
+![Laravel Supported Versions](https://img.shields.io/badge/laravel-10.x/11.x/12.x/13.x-green.svg)
+![Filament Supported Versions](https://img.shields.io/badge/filament-3.x/4.x/5.x-green.svg)
+[![CI](https://github.com/kirschbaum-development/commentions/actions/workflows/ci.yml/badge.svg)](https://github.com/kirschbaum-development/commentions/actions/workflows/ci.yml)
+[![MIT Licensed](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat-square)](LICENSE.md)
+[![Latest Version on Packagist](https://img.shields.io/packagist/v/kirschbaum-development/commentions.svg?style=flat-square)](https://packagist.org/packages/kirschbaum-development/commentions)
+[![Total Downloads](https://img.shields.io/packagist/dt/kirschbaum-development/commentions.svg?style=flat-square)](https://packagist.org/packages/kirschbaum-development/commentions)
+
+## Upgrading
+
+Run Migrations:
+
+```bash
+php artisan vendor:publish --tag="commentions-migrations"
+php artisan migrate
+```
+
+Update Filament Assets:
+```bash
+php artisan filament:upgrade
+php artisan filament:assets
+```

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,28 +90,36 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
         </div>
 
         @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()), @js($commentionsComponentPrefix . 'comment'))">
+            <div class="comm:flex-1 comm:space-y-2">
+                <div
+                    class="comm:mt-2"
+                    x-cloak
+                    role="form"
+                    x-data="editor(@js($commentBody), @js($mentionables), 'comment', null, @js($this->getTipTapCssClasses()), @js($commentionsComponentPrefix . 'comment'))"
+                >
+                    {{-- tiptap editor --}}
+                    <div class="comm:relative tip-tap-container comm:mb-2" wire:ignore>
                         <div x-ref="element"></div>
                     </div>
-                </div>
 
-                <div class="comm:flex comm:gap-x-2">
-                    <x-filament::button
-                        wire:click="updateComment({{ $comment->getId() }})"
-                        size="sm"
-                    >
-                        {{ __('commentions::comments.save') }}
-                    </x-filament::button>
+                    <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') }}
+                        </x-filament::button>
 
-                    <x-filament::button
-                        wire:click="cancelEditing"
-                        size="sm"
-                        color="gray"
-                    >
-                        {{ __('commentions::comments.cancel') }}
-                    </x-filament::button>
+                        <x-filament::button
+                            wire:click="cancelEditing"
+                            size="sm"
+                            color="gray"
+                        >
+                            {{ __('commentions::comments.cancel') }}
+                        </x-filament::button>
+                    </div>
                 </div>
             </div>
         @else

resources/views/comments.blade.php

@@ -4,20 +4,24 @@
     {{-- Main Comments Area --}}
     <div class="comm:flex-1 comm:space-y-2">
         @if (Config::resolveAuthenticatedUser()?->can('create', Config::getCommentModel()))
-            <div x-cloak role="form" aria-label="{{ __('commentions::comments.add_comment') }}">
+            <div
+                wire:submit.prevent="save"
+                x-cloak
+                role="form"
+                aria-label="{{ __('commentions::comments.add_comment') }}"
+                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();