Use controller to disable empty comment submit

app/assets/stylesheets/lexxy.css

@@ -31,12 +31,6 @@
         position: absolute;
         white-space: pre-line;
       }
-
-      /* Disable the submit button when Lexical is empty */
-      + .comment__submit {
-        opacity: 0.5;
-        pointer-events: none;
-      }
     }
   }
 

app/javascript/controllers/form_controller.js

@@ -2,7 +2,7 @@ import { Controller } from "@hotwired/stimulus"
 import { debounce } from "helpers/timing_helpers";
 
 export default class extends Controller {
-  static targets = [ "cancel" ]
+  static targets = [ "cancel", "submit" ]
 
   static values = {
     debounceTimeout: { type: Number, default: 300 }
@@ -37,6 +37,16 @@ export default class extends Controller {
     event.preventDefault()
   }
 
+  disableEmptySubmit(event) {
+    var value = event.target.value.replace(/<\/?[^>]+(>|$)/g, "")
+
+    if (value) {
+      this.submitTarget.removeAttribute("disabled")
+    } else {
+      this.submitTarget.setAttribute("disabled", true)
+    }
+  }
+
   select(event) {
     event.target.select()
   }

app/views/cards/comments/_new.html.erb

@@ -10,10 +10,10 @@
                   local_save_key_value: "comment-#{card.id}",
                   action: "turbo:submit-end->local-save#submit keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop" } do |form| %>
         <%= form.rich_textarea :body, required: true, placeholder: new_comment_placeholder(card),
-              data: { local_save_target: "input", action: "lexxy:change->local-save#save turbo:morph-element->local-save#restoreContent" } do %>
+              data: { local_save_target: "input", action: "lexxy:change->form#disableEmptySubmit lexxy:change->local-save#save turbo:morph-element->local-save#restoreContent" } do %>
           <%= general_prompts(@card.collection) %>
         <% end %>
-        <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start" do %>
+        <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-start", data: { form_target: "submit" }, disabled: true do %>
           <span>Post this comment</span>
         <% end %>
         <span data-form-target="cancel" hidden></span>