@websline/cms-view-utils 0.3.0 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websline/cms-view-utils",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "exports": {
     ".": "./src/index.js"
@@ -11,7 +11,6 @@
   "sideEffects": false,
   "peerDependencies": {
     "astro": "^5.8.0",
-    "svelte": "^5.33.1"
-  },
-  "scripts": {}
+    "svelte": "^5.33.2"
+  }
 }

package/src/components/PageRenderer.astro

@@ -14,10 +14,18 @@ await fetchPageData(Astro.locals, lang, slug);
 
 {
 	isPreviewMode && (
-		<script type="module">
-			import IframeDragHandler from
-			"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
-			new IframeDragHandler();
-		</script>
+		<>
+			<link
+				rel="stylesheet"
+				href="https://unpkg.com/@websline/cms-view-utils@0.3.0/src/styles/dropZone.css"
+			/>
+			<script type="module">
+				import IframeDragHandler from
+				"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/iframeDragHandler.js";
+				import {insertDropZones} from
+				"https://unpkg.com/@websline/cms-view-utils@latest/src/utils/dropZoneUtils.js";
+				new IframeDragHandler(); insertDropZones();
+			</script>
+		</>
 	)
 }

package/src/utils/dropZoneUtils.js

@@ -1,16 +1,23 @@
-export function insertDropZones(blockAreaSelector = "[data-block-area]") {
+const insertDropZones = (blockAreaSelector = "[data-block-area]") => {
 	const blockArea = document.querySelector(blockAreaSelector);
 	if (!blockArea) return;
 
 	const children = Array.from(blockArea.children);
+	let lastIndex = 0;
 
-	children.forEach((child) => {
+	children.forEach((child, index) => {
 		const dropZone = document.createElement("div");
 		dropZone.setAttribute("data-drop-zone", "");
+		dropZone.setAttribute("data-drop-zone-index", lastIndex.toString());
 		blockArea.insertBefore(dropZone, child);
+
+		lastIndex++;
 	});
 
 	const finalDropZone = document.createElement("div");
 	finalDropZone.setAttribute("data-drop-zone", "");
+	finalDropZone.setAttribute("data-drop-zone-index", lastIndex.toString());
 	blockArea.appendChild(finalDropZone);
-}
+};
+
+export { insertDropZones };

package/src/utils/iframeDragHandler.js

@@ -42,6 +42,7 @@ class IframeDragHandler {
 		this.addMouseFollowerToDOM();
 		this.addMouseFollowerHandler();
 		this.highlightDropzone();
+		this.addDropListeners();
 		window.addEventListener("scroll", this.handleScroll, true);
 	}
 
@@ -50,6 +51,7 @@ class IframeDragHandler {
 		this.removeMouseFollowerFromDOM();
 		this.removeMouseFollowerHandler();
 		this.unhighlightDropzone();
+		this.removeDropListeners();
 		window.removeEventListener("scroll", this.handleScroll, true);
 		this.lastMouseEvent = null;
 	}
@@ -161,6 +163,33 @@ class IframeDragHandler {
 		window.parent.postMessage(message, "*");
 	}
 
+	addDropListeners() {
+		const dropzones = document.querySelectorAll("[data-drop-zone]");
+
+		dropzones.forEach((dropzone) => {
+			dropzone.addEventListener("mouseup", this.commitDrop);
+		});
+	}
+
+	removeDropListeners() {
+		const dropzones = document.querySelectorAll("[data-drop-zone]");
+
+		dropzones.forEach((dropzone) => {
+			dropzone.removeEventListener("mouseup", this.commitDrop);
+		});
+	}
+
+	commitDrop = (event) => {
+		event.preventDefault();
+		const dropPosition = event.target.getAttribute("data-drop-zone-index");
+
+		this.sendParentMessage({
+			owner: "iframe",
+			position: dropPosition,
+			type: "commitDrop",
+		});
+	};
+
 	highlightDropzone() {
 		const dropzones = document.querySelectorAll("[data-drop-zone]");