Merge pull request #276 from basecamp/autosave-comments

Autosave comments

app/javascript/controllers/local_save_controller.js

@@ -0,0 +1,56 @@
+import { Controller } from "@hotwired/stimulus"
+import { debounce } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = ["input"]
+  static values = { key: String }
+
+  initialize() {
+    this.save = debounce(this.save.bind(this), 300)
+  }
+
+  connect() {
+    this.#restoreContent()
+  }
+
+  submit({ detail: { success } }) {
+    if (success) {
+      this.#clear()
+    }
+  }
+
+  save() {
+    const content = this.inputTarget.value
+    if (content) {
+      localStorage.setItem(this.keyValue, content)
+    } else {
+      this.#clear()
+    }
+  }
+
+  // Private
+
+  #clear() {
+    localStorage.removeItem(this.keyValue)
+  }
+
+  #restoreContent() {
+    const savedContent = localStorage.getItem(this.keyValue)
+    if (savedContent) {
+      this.inputTarget.value = savedContent
+      this.#triggerChangeEvent(savedContent)
+    }
+  }
+
+  #triggerChangeEvent(newValue) {
+    if (this.inputTarget.tagName === "HOUSE-MD") {
+      this.inputTarget.dispatchEvent(new CustomEvent('house-md:change', {
+        bubbles: true,
+        detail: {
+          previousContent: '',
+          newContent: newValue
+        }
+      }))
+    }
+  }
+}

app/views/bubbles/show.html.erb

@@ -103,9 +103,9 @@
     <% else %>
       <div class="comments">
         <div class="comment comment--new border-radius flex align-start full-width margin-block-double">
-          <form data-controller="remote-auto-save paste" data-remote-auto-save-auto-save-outlet="#bubble_form" class="flex flex-column gap full-width" data-action="paste->paste#pasteFiles">
+          <form data-controller="outlet-auto-save paste" data-outlet-auto-save-auto-save-outlet="#bubble_form" class="flex flex-column gap full-width" data-action="paste->paste#pasteFiles">
             <%= tag.house_md @bubble.draft_comment, name: "bubble[draft_comment]", class: "input comment__input", form: "bubble_form", placeholder: new_comment_placeholder(@bubble),
-                  data: { action: "house-md:change->remote-auto-save#change focusout->remote-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
+                  data: { action: "house-md:change->outlet-auto-save#change focusout->outlet-auto-save#submit", uploads_url: uploads_url(format: "json") } %>
           </form>
         </div>
       </div>

app/views/comments/_new.html.erb

@@ -1,10 +1,12 @@
 <div class="comment comment--new border-radius flex align-start full-width margin-block-end-double">
   <div class="flex flex-column full-width">
     <div class="position-relative">
-      <%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width", 
-            data: { controller: "form paste", 
-                   action: "keydown.ctrl+enter->form#submit:prevent keydown.meta+enter->form#submit:prevent keydown.esc->form#cancel:stop paste->paste#pasteFiles" } do |form| %>
-        <%= form.markdown_area :body, class: "input comment__input", required: true, placeholder: new_comment_placeholder(bubble) %>
+      <%= form_with model: Comment.new, url: bucket_bubble_comments_path(bubble.bucket, bubble), class: "flex flex-column gap full-width",
+            data: { controller: "form paste local-save",
+                   local_save_key_value: "comment-#{bubble.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 paste->paste#pasteFiles" } do |form| %>
+        <%= form.markdown_area :body, class: "input comment__input", required: true, placeholder: new_comment_placeholder(bubble),
+              data: { local_save_target: "input", action: "house-md:change->local-save#save" } %>
         <%= form.button class: "comment__submit btn btn--reversed flex-item-justify-end txt-small" do %>
           <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24 %>
           <span class="for-screen-reader">Save</span>