fix: disable comment submit button while the editor is empty#99
Open
ItsMalikJones wants to merge 2 commits into
Open
fix: disable comment submit button while the editor is empty#99ItsMalikJones wants to merge 2 commits into
ItsMalikJones wants to merge 2 commits into
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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-siderequired|stringvalidation rule treats the field as valid, so a visually-empty comment can still be posted.Solution
The Alpine.js
editorcomponent now exposes a reactiveisEmptyproperty derived from TipTap's owneditor.isEmptygetter. It is initialized from the starting content and kept in sync on the editor'sonCreateandonUpdatecallbacks, as well as on thecontent:clearedLivewire 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 binddisabled— and a dimmedopacity-50/cursor-not-allowedstyle — toisEmpty.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 reactiveisEmptyproperty to theeditorcomponent, synced on create/update/clear.resources/views/comments.blade.php— hoistedx-data="editor(...)"onto the<form>; bounddisabled+ dimmed style on the Comment button.resources/views/comment.blade.php— hoistedx-data="editor(...)"onto the inline-edit container; bounddisabled+ dimmed style on the Save button.resources/dist/*— rebuilt compiled assets.Testing
Added two Livewire feature tests:
CommentsTest— asserts the create form rendersx-bind:disabled="isEmpty".CommentTest— asserts the inline edit view rendersx-bind:disabled="isEmpty"wheneditingis true.Existing tests (including
comment creation requires body) continue to pass, confirming the server-side validation backstop is unchanged.