Locally initialize SortableElements

We have two places where we need to initialize SortableJS
for elements.

1) The ElementsWindow and its top level elements
2) The nested elements inside of each element-editor

Instead of using the global Alchemy object to initialize
them we can import the file locally and init it where it needs
to be. This makes it possible to remove another global
call from the `create.js.erb` file.

app/javascript/alchemy_admin.js

@@ -15,7 +15,6 @@ import { LinkDialog } from "alchemy_admin/link_dialog"
 import pictureSelector from "alchemy_admin/picture_selector"
 import pleaseWaitOverlay from "alchemy_admin/please_wait_overlay"
 import Sitemap from "alchemy_admin/sitemap"
-import SortableElements from "alchemy_admin/sortable_elements"
 import Spinner from "alchemy_admin/spinner"
 import PagePublicationFields from "alchemy_admin/page_publication_fields"
 import { reloadPreview } from "alchemy_admin/components/preview_window"
@@ -64,7 +63,6 @@ Object.assign(Alchemy, {
   pictureSelector,
   pleaseWaitOverlay,
   Sitemap,
-  SortableElements,
   Spinner,
   PagePublicationFields,
   reloadPreview

app/javascript/alchemy_admin/components/element_editor.js

@@ -1,6 +1,7 @@
 import ImageLoader from "alchemy_admin/image_loader"
 import fileEditors from "alchemy_admin/file_editors"
 import pictureEditors from "alchemy_admin/picture_editors"
+import SortableElements from "alchemy_admin/sortable_elements"
 import IngredientAnchorLink from "alchemy_admin/ingredient_anchor_link"
 import { post } from "alchemy_admin/utils/ajax"
 import { createHtmlElement } from "alchemy_admin/utils/dom_helpers"
@@ -43,6 +44,7 @@ export class ElementEditor extends HTMLElement {
       `#${this.id} .ingredient-editor.file, #${this.id} .ingredient-editor.audio, #${this.id} .ingredient-editor.video`
     )
     pictureEditors(`#${this.id} .ingredient-editor.picture`)
+    SortableElements(`#${this.id} .nested-elements`)
   }
 
   handleEvent(event) {

app/javascript/alchemy_admin/components/elements_window.js

@@ -1,3 +1,5 @@
+import SortableElements from "alchemy_admin/sortable_elements"
+
 class ElementsWindow extends HTMLElement {
   #visible = true
 
@@ -16,7 +18,7 @@ class ElementsWindow extends HTMLElement {
         .querySelector(window.location.hash)
         ?.trigger("FocusElementEditor.Alchemy")
     }
-    Alchemy.SortableElements()
+    SortableElements()
   }
 
   collapseAllElements() {

app/javascript/alchemy_admin/sortable_elements.js

@@ -77,8 +77,4 @@ export default function SortableElements(selector) {
   })
 
   sortable_areas.forEach((element) => createSortable(element))
-
-  document.querySelectorAll(".nested-elements").forEach((nestedElement) => {
-    createSortable(nestedElement)
-  })
 }

app/views/alchemy/admin/elements/create.js.erb

@@ -24,8 +24,6 @@
   $element_area.append(element_html);
 <%- end -%>
 
-  Alchemy.SortableElements('[data-element-id="<%= @element.id %>"] .nested-elements');
-
   Alchemy.growl('<%= Alchemy.t(:successfully_added_element) %>');
   Alchemy.closeCurrentDialog();