diff --git a/app/javascript/controllers/local_save_controller.js b/app/javascript/controllers/local_save_controller.js new file mode 100644 index 000000000..aaea8fa87 --- /dev/null +++ b/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 + } + })) + } + } +} diff --git a/app/javascript/controllers/remote_auto_save_controller.js b/app/javascript/controllers/outlet_auto_save_controller.js similarity index 100% rename from app/javascript/controllers/remote_auto_save_controller.js rename to app/javascript/controllers/outlet_auto_save_controller.js diff --git a/app/views/bubbles/show.html.erb b/app/views/bubbles/show.html.erb index 0b61270da..9c618e4d5 100644 --- a/app/views/bubbles/show.html.erb +++ b/app/views/bubbles/show.html.erb @@ -103,9 +103,9 @@ <% else %>
-
+ <%= 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") } %>
diff --git a/app/views/comments/_new.html.erb b/app/views/comments/_new.html.erb index 136db289e..98b8a4968 100644 --- a/app/views/comments/_new.html.erb +++ b/app/views/comments/_new.html.erb @@ -1,10 +1,12 @@
- <%= 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 %> Save