@radioactive-labs/plutonium 0.4.8 → 0.4.10

package/src/js/controllers/attachment_input_controller.js

@@ -10,6 +10,7 @@ import DomElement from "../support/dom_element"
 export default class extends Controller {
   static values = {
     identifier: String,
+    endpoint: String,
 
     maxFileSize: { type: Number, default: null },
     minFileSize: { type: Number, default: null },
@@ -25,6 +26,8 @@ export default class extends Controller {
   //======= Lifecycle
 
   connect() {
+    if (this.uppy) return;
+
     // initialize
     this.uploadedFiles = []
 
@@ -37,10 +40,48 @@ export default class extends Controller {
     this.#buildTriggers()
     // init state
     this.#onAttachmentsChanged()
+
+    // Just recreate Uppy after morphing - preserve existing attachments
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
+      }
+    });
   }
 
   disconnect() {
-    this.uppy = null
+    this.#cleanupUppy();
+  }
+
+  #handleMorph() {
+    if (!this.element.isConnected) return;
+
+    // Clean up the old instance
+    this.#cleanupUppy();
+
+    // Recreate everything - Uppy, triggers, etc.
+    this.uploadedFiles = []
+    this.element.style["display"] = "none"
+    this.configureUppy()
+    this.#buildTriggers()
+    this.#onAttachmentsChanged()
+  }
+
+  #cleanupUppy() {
+    if (this.uppy) {
+      this.uppy.destroy();
+      this.uppy = null;
+    }
+    
+    // Clean up triggers
+    if (this.triggerContainer && this.triggerContainer.parentNode) {
+      this.triggerContainer.parentNode.removeChild(this.triggerContainer);
+      this.triggerContainer = null;
+    }
   }
 
   attachmentPreviewOutletConnected(outlet, element) {
@@ -75,7 +116,7 @@ export default class extends Controller {
   #configureUploader() {
     this.uppy
       .use(XHRUpload, {
-        endpoint: '/upload', // path to the upload endpoint
+        endpoint: this.endpointValue, // path to the upload endpoint
       })
   }
 

package/src/js/controllers/easymde_controller.js

@@ -4,21 +4,60 @@ import { marked } from 'marked';
 
 // Connects to data-controller="easymde"
 export default class extends Controller {
+  static targets = ["textarea"]
+  
   connect() {
+    if (this.easyMDE) return
+    
+    this.originalValue = this.element.value
     this.easyMDE = new EasyMDE(this.#buildOptions())
-    this.element.setAttribute("data-action", "turbo:morph-element->easymde#reconnect")
+    
+    // Store the editor content before morphing
+    this.element.addEventListener("turbo:before-morph-element", (event) => {
+      if (event.target === this.element && this.easyMDE) {
+        this.storedValue = this.easyMDE.value()
+      }
+    })
+    
+    // Restore after morphing
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element) {
+        requestAnimationFrame(() => this.#handleMorph())
+      }
+    })
   }
 
   disconnect() {
     if (this.easyMDE) {
-      this.easyMDE.toTextArea()
+      try {
+        // Only call toTextArea if the element is still in the DOM
+        if (this.element.isConnected && this.element.parentNode) {
+          this.easyMDE.toTextArea()
+        }
+      } catch (error) {
+        console.warn('EasyMDE cleanup error:', error)
+      }
       this.easyMDE = null
     }
   }
-
-  reconnect() {
-    this.disconnect()
-    this.connect()
+  
+  #handleMorph() {
+    if (!this.element.isConnected) return
+    
+    // Don't call toTextArea during morph - just clean up references
+    if (this.easyMDE) {
+      // Skip toTextArea cleanup - it causes DOM errors during morphing
+      this.easyMDE = null
+    }
+    
+    // Recreate the editor
+    this.easyMDE = new EasyMDE(this.#buildOptions())
+    
+    // Restore the stored value if we have it
+    if (this.storedValue !== undefined) {
+      this.easyMDE.value(this.storedValue)
+      this.storedValue = undefined
+    }
   }
 
   #buildOptions() {

package/src/js/controllers/flatpickr_controller.js

@@ -1,35 +1,62 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
 
 // Connects to data-controller="flatpickr"
 export default class extends Controller {
   connect() {
-    this.picker = new flatpickr(this.element, this.#buildOptions())
-    this.element.setAttribute("data-action", "turbo:morph-element->flatpickr#reconnect")
+    if (this.picker) return;
+
+    this.modal = document.querySelector("[data-controller=remote-modal]");
+    this.picker = new flatpickr(this.element, this.#buildOptions());
+
+    // Just recreate Flatpickr after morphing - the DOM will have correct value
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
+      }
+    });
   }
 
   disconnect() {
     if (this.picker) {
-      this.picker.destroy()
-      this.picker = null
+      this.picker.destroy();
+      this.picker = null;
     }
   }
 
-  reconnect() {
-    this.disconnect()
-    this.connect()
+  #handleMorph() {
+    if (!this.element.isConnected) return;
+
+    // Clean up the old instance
+    if (this.picker) {
+      this.picker.destroy();
+      this.picker = null;
+    }
+
+    // Recreate the picker - it will pick up the current DOM value
+    this.modal = document.querySelector("[data-controller=remote-modal]");
+    this.picker = new flatpickr(this.element, this.#buildOptions());
   }
 
   #buildOptions() {
-    let options = { altInput: true }
+    let options = { altInput: true };
+
     if (this.element.attributes.type.value == "datetime-local") {
-      options.enableTime = true
-    }
-    else if (this.element.attributes.type.value == "time") {
-      options.enableTime = true
-      options.noCalendar = true
+      options.enableTime = true;
+    } else if (this.element.attributes.type.value == "time") {
+      options.enableTime = true;
+      options.noCalendar = true;
       // options.time_24hr = true
       // options.altFormat = "H:i"
     }
-    return options
+
+    if (this.modal) {
+      options.appendTo = this.modal;
+    }
+
+    return options;
   }
 }

package/src/js/controllers/intl_tel_input_controller.js

@@ -12,10 +12,20 @@ export default class extends Controller {
   }
 
   inputTargetConnected() {
-    if (!this.hasInputTarget) return;
+    if (!this.hasInputTarget || this.iti) return;
 
     this.iti = window.intlTelInput(this.inputTarget, this.#buildOptions())
-    this.inputTarget.setAttribute("data-action", "turbo:morph-element->intl-tel-input#reconnect")
+
+    // Just recreate IntlTelInput after morphing - the DOM will have correct value
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element && !this.morphing) {
+        this.morphing = true;
+        requestAnimationFrame(() => {
+          this.#handleMorph();
+          this.morphing = false;
+        });
+      }
+    });
   }
 
   inputTargetDisconnected() {
@@ -25,9 +35,17 @@ export default class extends Controller {
     }
   }
 
-  reconnect() {
-    this.inputTargetDisconnected()
-    this.inputTargetConnected()
+  #handleMorph() {
+    if (!this.inputTarget || !this.inputTarget.isConnected) return;
+
+    // Clean up the old instance
+    if (this.iti) {
+      this.iti.destroy();
+      this.iti = null;
+    }
+
+    // Recreate the intl tel input - it will pick up the current DOM value
+    this.iti = window.intlTelInput(this.inputTarget, this.#buildOptions());
   }
 
   #buildOptions() {

package/src/js/controllers/slim_select_controller.js

@@ -3,6 +3,19 @@ import { Controller } from "@hotwired/stimulus";
 // Connects to data-controller="slim-select"
 export default class extends Controller {
   connect() {
+    if (this.slimSelect) return;
+
+    this.#setupSlimSelect();
+
+    // Just recreate SlimSelect after morphing - the DOM will have correct selections
+    this.element.addEventListener("turbo:morph-element", (event) => {
+      if (event.target === this.element) {
+        requestAnimationFrame(() => this.#handleMorph());
+      }
+    });
+  }
+
+  #setupSlimSelect() {
     const settings = {};
     const modal = document.querySelector('[data-controller="remote-modal"]');
 
@@ -48,11 +61,6 @@ export default class extends Controller {
 
     // Add mutation observer to track aria-expanded attribute
     this.setupAriaObserver();
-
-    this.element.setAttribute(
-      "data-action",
-      "turbo:morph-element->slim-select#reconnect"
-    );
   }
 
   handleDropdownPosition() {
@@ -162,6 +170,20 @@ export default class extends Controller {
   }
 
   disconnect() {
+    this.#cleanupSlimSelect();
+  }
+
+  #handleMorph() {
+    if (!this.element.isConnected) return;
+
+    // Clean up the old instance without DOM manipulation
+    this.#cleanupSlimSelect();
+
+    // Recreate the select - it will automatically pick up the current DOM selections
+    this.#setupSlimSelect();
+  }
+
+  #cleanupSlimSelect() {
     // Clean up event listeners
     if (this.element) {
       if (this.boundHandleDropdownOpen) {
@@ -208,11 +230,4 @@ export default class extends Controller {
       this.modifiedSelectWrapper = null;
     }
   }
-
-  reconnect() {
-    this.disconnect();
-    // dispatch this on the next frame.
-    // there's some funny issue where my elements get removed from the DOM
-    setTimeout(() => this.connect(), 10);
-  }
 }