Cleanup the ACE editor before loading another resource details

Signed-off-by: tdruez <[email protected]>

Author: tdruez

scanpipe/templates/scanpipe/resource_detail.html

@@ -25,6 +25,15 @@
   {{ detected_values|json_script:"detected_values" }}
   <script>
   {
+    document.addEventListener('htmx:beforeSwap', function(evt) {
+      // Clean up editor before HTMX swaps content
+      if (window.editor) {
+        window.editor.destroy();
+        window.editor.container.remove();
+        window.editor = null;
+      }
+    });
+
     let editor = ace.edit("editor", {
       mode: "ace/mode/text",
       autoScrollEditorIntoView: true,
@@ -38,6 +47,9 @@
       fontFamily: "SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace",
     });
 
+    // Store globally for cleanup
+    window.editor = editor;
+
     function removeAllMarkers() {
       let session = editor.getSession();
       let markers = session.getMarkers();

scanpipe/templates/scanpipe/tree/resource_path_breadcrumb.html

@@ -23,7 +23,7 @@
     {% endfor %}
   </ul>
   {% if path_segments %}
-    <button class="button is-white copy-to-clipboard ml-1 p-2" aria-label="Copy path" data-copy="{{ path }}" data-copy-feedback="Path copied!">
+    <button class="button is-white copy-to-clipboard p-2" aria-label="Copy path" data-copy="{{ path }}" data-copy-feedback="Path copied!">
       <i class="fa-regular fa-clone"></i>
     </button>
   {% endif %}