Skip to content

fix: disable comment submit button while the editor is empty#99

Open
ItsMalikJones wants to merge 2 commits into
mainfrom
fix/90-empty-comment-validation
Open

fix: disable comment submit button while the editor is empty#99
ItsMalikJones wants to merge 2 commits into
mainfrom
fix/90-empty-comment-validation

Conversation

@ItsMalikJones
Copy link
Copy Markdown

Summary

Prevents empty comments from being submitted by disabling the submit/save button while the rich-text editor has no content. Fixes #90.

Problem

The TipTap rich-text editor always emits wrapper markup such as <p></p>, even after a user types text and then deletes it. Because that markup is a non-empty string, the server-side required|string validation rule treats the field as valid, so a visually-empty comment can still be posted.

Solution

The Alpine.js editor component now exposes a reactive isEmpty property derived from TipTap's own editor.isEmpty getter. It is initialized from the starting content and kept in sync on the editor's onCreate and onUpdate callbacks, as well as on the content:cleared Livewire event.

To share Alpine scope with the buttons, the x-data="editor(...)" declaration is hoisted onto the surrounding <form> (create flow) and edit container (inline edit flow). Both buttons then bind disabled — and a dimmed opacity-50 / cursor-not-allowed style — to isEmpty.

Existing server-side validation is intentionally left in place as a backstop; this change improves the client-side UX without weakening the server guarantee.

Changes

  • resources/js/commentions.js — added the reactive isEmpty property to the editor component, synced on create/update/clear.
  • resources/views/comments.blade.php — hoisted x-data="editor(...)" onto the <form>; bound disabled + dimmed style on the Comment button.
  • resources/views/comment.blade.php — hoisted x-data="editor(...)" onto the inline-edit container; bound disabled + dimmed style on the Save button.
  • resources/dist/* — rebuilt compiled assets.

Testing

Added two Livewire feature tests:

  • CommentsTest — asserts the create form renders x-bind:disabled="isEmpty".
  • CommentTest — asserts the inline edit view renders x-bind:disabled="isEmpty" when editing is true.

Existing tests (including comment creation requires body) continue to pass, confirming the server-side validation backstop is unchanged.

A rich-text editor still emits markup such as `<p></p>` after a user
types then deletes their text, so the server-side `required|string`
rule treats the comment as valid and an empty comment gets posted.

The Alpine.js `editor` component now exposes a reactive `isEmpty`
property derived from TipTap's `editor.isEmpty`, kept in sync on
create, update, and content-cleared. The create and edit submit
buttons bind `disabled` (and a dimmed style) to it, so an empty
comment can no longer be submitted.

To share scope with the buttons, `x-data="editor(...)"` is hoisted
onto the surrounding `<form>` / edit container. Existing server-side
validation is left untouched as a backstop.
@ItsMalikJones ItsMalikJones self-assigned this May 17, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Empty comment can be submitted after deleting text

1 participant