From cd9fce9b89dd8db69a2b6ec0eb7ee54936d90a37 Mon Sep 17 00:00:00 2001
From: Kevin McConnell <kevin@37signals.com>
Date: Thu, 13 Feb 2025 15:16:42 +0000
Subject: [PATCH] Add auto-save to the draft comment field

---
 .../controllers/remote_auto_save_controller.js      | 13 +++++++++++++
 app/views/bubbles/show.html.erb                     |  5 +++--
 2 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/controllers/remote_auto_save_controller.js

diff --git a/app/javascript/controllers/remote_auto_save_controller.js b/app/javascript/controllers/remote_auto_save_controller.js
new file mode 100644
index 000000000..7ba4a6d5e
--- /dev/null
+++ b/app/javascript/controllers/remote_auto_save_controller.js
@@ -0,0 +1,13 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static outlets = [ "auto-save" ]
+
+  change(event) {
+    this.autoSaveOutlet.change(event)
+  }
+
+  submit() {
+    this.autoSaveOutlet.submit()
+  }
+}
diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb
index 184c432e3..ea600e72f 100644
--- a/app/views/bubbles/show.html.erb
+++ b/app/views/bubbles/show.html.erb
@@ -101,8 +101,9 @@
     <% if @bubble.published? %>
       <%= render "bubbles/messages", bubble: @bubble %>
     <% else %>
-      <form>
-      <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", form: "bubble_form", placeholder: new_comment_placeholder(@bubble) %>
+      <form data-controller="remote-auto-save" data-remote-auto-save-auto-save-outlet="#bubble_form">
+        <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", form: "bubble_form", placeholder: new_comment_placeholder(@bubble),
+              data: { action: "house-md:change->remote-auto-save#change focusout->remote-auto-save#submit" } %>
       </form>
     <% end %>
   </div>