Allow to drop elements into the page over the layout

assets/svelte/components/PageAstNode.svelte

@@ -177,11 +177,15 @@
         {#each children as child, childIndex}
           <svelte:self node={child} nodeId="{nodeId}.{childIndex}" />
         {/each}
+        <!-- Using the component definition's example is actually visually confusing. Disabled for now -->
         {#if isDragTarget && $draggedComponentDefinition}
+          <div class="dragged-element-placeholder">Preview</div>
+        {/if}
+        <!-- {#if isDragTarget && $draggedComponentDefinition}
           <div class="dragged-element-placeholder">{@html $draggedComponentDefinition.example}</div>
         {:else if previewDropInside}
           <div class="dragged-element-placeholder">Preview</div>
-        {/if}
+        {/if} -->
       {/if}
     </svelte:element>
   {/if}

assets/svelte/components/PagePreview.svelte

@@ -11,11 +11,25 @@
   let isDraggingOver = false
 
   async function handleDragDrop(e: DragEvent) {
-    let { target } = e
+    let {
+      target,
+      dataTransfer: { layoutZone },
+    } = e
     $currentComponentCategory = null
     if (!$draggedComponentDefinition) return
     let draggedObj = $draggedComponentDefinition
-    if (target.id !== "fake-browser-content" && elementCanBeDroppedInTarget(draggedObj)) {
+    if (layoutZone) {
+      $live.pushEvent(
+        "render_component_in_page",
+        { component_id: draggedObj.id, page_id: $page.id },
+        ({ ast }: { ast: AstNode[] }) => {
+          // If the element was dropped before the main content, it appends it at the top of the page
+          // otherwise it appends it at the bottom of the page
+          const newAst = layoutZone === "preamble" ? [...ast, ...$page.ast] : [...$page.ast, ...ast]
+          $live.pushEvent("update_page_ast", { id: $page.id, ast: newAst })
+        },
+      )
+    } else if (target.id !== "fake-browser-content" && elementCanBeDroppedInTarget(draggedObj)) {
       if (!(target instanceof HTMLElement) || !$slotTargetElement || $slotTargetElement.attrs.selfClose) {
         resetDragDrop()
         return

assets/svelte/components/PageWrapper.svelte

@@ -11,6 +11,7 @@
 
   let wrapper: HTMLElement
   let styleWrapper: HTMLElement
+  let contentWrapper: HTMLElement
   let twConfig = $tailwindConfig
   let configPromise = import(twConfig)
   onMount(async () => {
@@ -39,14 +40,27 @@
       event.preventDefault()
     }
   }
+
+  // Annotates the drop event here to know wether it was fired before the main content
+  // or after it.
+  function handleDragDrop(e: DragEvent) {
+    const target = e.target as Node
+    if (!contentWrapper.contains(target)) {
+      if (target.compareDocumentPosition(contentWrapper) & Node.DOCUMENT_POSITION_PRECEDING) {
+        e.dataTransfer.layoutZone = "epilogue"
+      } else if (target.compareDocumentPosition(contentWrapper) & Node.DOCUMENT_POSITION_FOLLOWING) {
+        e.dataTransfer.layoutZone = "preamble"
+      }
+    }
+  }
 </script>
 
 <span bind:this={styleWrapper}></span>
-<div bind:this={wrapper} on:click={preventLinkNavigation}>
+<div bind:this={wrapper} on:click={preventLinkNavigation} on:drop={handleDragDrop}>
   {#each $page.layout.ast as layoutAstNode}
     <LayoutAstNode node={layoutAstNode}>
       <!-- This seemingly useless wrapper is here just so we are sure that the layout and the page don't share the same parent, which screws the position calculations -->
-      <div class="contents">
+      <div class="contents" bind:this={contentWrapper}>
         {#each $page.ast as astNode, index}
           <PageAstNode node={astNode} nodeId={String(index)} />
         {/each}

assets/svelte/components/SelectedElementFloatingMenu/DragMenuOption.svelte

@@ -156,6 +156,9 @@
       }
       if (node === targetElement) {
         endIndex = i
+        if (startIndex < 0) {
+          startIndex = i
+        }
         break
       }
       startIndex = -1