Move the bridge form controller to the outer container so a cancel target button can be included

app/javascript/controllers/bridge/form_controller.js

@@ -3,31 +3,38 @@ import { BridgeElement } from "@hotwired/hotwire-native-bridge"
 
 export default class extends BridgeComponent {
   static component = "form"
-  static targets = [ "submit" ]
+  static targets = [ "submit", "cancel" ]
   static values = { submitTitle: String }
 
-  connect() {
-    super.connect()
-
-    if (this.hasSubmitTarget) {
-      this.notifyBridgeOfConnect()
-      this.observeSubmitTarget()
-    }
+  submitTargetConnected() {
+    this.notifyBridgeOfConnect()
+    this.observeSubmitTarget()
   }
 
-  disconnect() {
-    super.disconnect()
+  submitTargetDisconnected() {
     this.notifyBridgeOfDisonnect()
     this.submitObserver?.disconnect()
   }
 
   notifyBridgeOfConnect() {
-    const element = new BridgeElement(this.submitTarget)
-    const submitButton = { title: element.title }
+    const submitElement = new BridgeElement(this.submitTarget)
+    const cancelElement = this.hasCancelTarget ? new BridgeElement(this.cancelTarget) : null
 
-    this.send("connect", { submitButton }, () => {
-      this.submitTarget.click()
-    })
+    const submitButton = { title: submitElement.title }
+    const cancelButton = cancelElement ? { title: cancelElement.title } : null
+
+    this.send("connect", { submitButton, cancelButton }, message => this.receive(message))
+  }
+
+  receive(message) {
+    switch (message.event) {
+      case "submit":
+        this.submitTarget.click()
+        break
+      case "cancel":
+        this.cancelTarget.click()
+        break
+    }
   }
 
   notifyBridgeOfDisonnect() {

app/views/cards/_container.html.erb

@@ -1,4 +1,4 @@
-<section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;">
+<section id="<%= dom_id(card, :card_container) %>" class="card-perma" style="--card-color: <%= card.color %>;" data-controller="bridge--form">
   <% cache card do %>
     <div class="card-perma__actions card-perma__actions--left">
       <%= render "cards/container/gild", card: card if card.published? && !card.closed? %>

app/views/cards/container/_save_button.html.erb

@@ -1,4 +1,4 @@
-<div class="card-perma__notch card-perma__notch--bottom flex-column" data-controller="bridge--form">
+<div class="card-perma__notch card-perma__notch--bottom flex-column">
   <%= button_tag type: :submit, form: dom_id(card, :edit_form), class: "btn borderless",
         title: "Save changes (#{ hotkey_label(["ctrl", "enter"]) })",
         data: { controller: "hotkey", bridge__form_target: "submit", action: "keydown.ctrl+enter@document->hotkey#click keydown.meta+enter@document->hotkey#click" } do %>

app/views/cards/edit.html.erb

@@ -22,6 +22,7 @@
       <%= general_prompts(@card.board) %>
     <% end %>
 
-    <%= link_to "Close editor and discard changes", @card, data: { form_target: "cancel" }, hidden: true %>
+    <%= link_to "Close editor and discard changes", @card,
+          data: { form_target: "cancel", bridge__form_target: "cancel", bridge_title: "Cancel" }, hidden: true %>
   <% end %>
 <% end %>