feat: allow dropping before as well as after the element

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -329,29 +329,36 @@ function RemoteFunctions(config) {
     /**
      * This function creates a marker to indicate a valid drop position
      * @param {DOMElement} element - The element where the drop is possible
+     * @param {Boolean} showAtBottom - Whether to show the marker at the bottom of the element
      */
-    function _createDropMarker(element) {
+    function _createDropMarker(element, showAtBottom) {
         // clean any existing marker from that element
         _removeDropMarkerFromElement(element);
 
         // create the marker element
         let marker = window.document.createElement("div");
         marker.className = DROP_MARKER_CLASSNAME;
 
-        // position the marker at the top of the element
+        // position the marker at the top or bottom of the element
         let rect = element.getBoundingClientRect();
         let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
         let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
 
         // marker styling
         marker.style.position = "absolute";
-        marker.style.top = (rect.top + scrollTop - 5) + "px";
         marker.style.left = (rect.left + scrollLeft) + "px";
         marker.style.width = rect.width + "px";
         marker.style.height = "2px";
         marker.style.backgroundColor = "#4285F4";
         marker.style.zIndex = "2147483646";
 
+        // position the marker at the top or at the bottom of the element
+        if (showAtBottom) {
+            marker.style.top = (rect.bottom + scrollTop + 3) + "px";
+        } else {
+            marker.style.top = (rect.top + scrollTop - 5) + "px";
+        }
+
         element._dropMarker = marker; // we need this in the _removeDropMarkerFromElement function
         window.document.body.appendChild(marker);
     }
@@ -419,9 +426,14 @@ function RemoteFunctions(config) {
             return;
         }
 
+        // check if the cursor is in the top half or bottom half of the target element
+        const rect = target.getBoundingClientRect();
+        const middleY = rect.top + (rect.height / 2);
+        const showAtBottom = event.clientY > middleY;
+
         // before creating a drop marker, make sure that we clear all the drop markers
         _clearDropMarkers();
-        _createDropMarker(target);
+        _createDropMarker(target, showAtBottom);
     }
 
     /**
@@ -455,6 +467,11 @@ function RemoteFunctions(config) {
             return;
         }
 
+        // check if the cursor is in the top half or bottom half of the target element
+        const rect = target.getBoundingClientRect();
+        const middleY = rect.top + (rect.height / 2);
+        const insertAfter = event.clientY > middleY;
+
         // IDs of the source and target elements
         const sourceId = window._currentDraggedElement.getAttribute("data-brackets-id");
         const targetId = target.getAttribute("data-brackets-id");
@@ -466,6 +483,7 @@ function RemoteFunctions(config) {
             targetElement: target,
             sourceId: Number(sourceId),
             targetId: Number(targetId),
+            insertAfter: insertAfter,
             move: true
         });
 

src/LiveDevelopment/LivePreviewEdit.js

@@ -145,8 +145,9 @@ define(function (require, exports, module) {
      * it is called when there is drag-drop in the live preview
      * @param {Number} sourceId - the data-brackets-id of the element being moved
      * @param {Number} targetId - the data-brackets-id of the target element where to move
+     * @param {Boolean} insertAfter - whether to insert the source element after the target element
      */
-    function _moveElementInSource(sourceId, targetId) {
+    function _moveElementInSource(sourceId, targetId, insertAfter) {
         // this is to get the currently live document that is being served in the live preview
         const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
         if (!currLiveDoc) {
@@ -160,32 +161,44 @@ define(function (require, exports, module) {
 
         // position of source and target elements in the editor
         const sourceRange = HTMLInstrumentation.getPositionFromTagId(editor, sourceId);
+        const targetRange = HTMLInstrumentation.getPositionFromTagId(editor, targetId);
 
-        if (!sourceRange) {
+        if (!sourceRange || !targetRange) {
             return;
         }
 
         const sourceText = editor.getTextBetween(sourceRange.from, sourceRange.to);
+        const targetIndent = editor.getTextBetween({ line: targetRange.from.line, ch: 0 }, targetRange.from);
 
         // creating a batch operation so that undo in live preview works fine
         editor.document.batchOperation(function () {
             // first, we need to remove the source code from its initial position
             editor.replaceRange("", sourceRange.from, sourceRange.to);
 
-            // get the target range, this is where we want to insert the text
-            const targetRange = HTMLInstrumentation.getPositionFromTagId(editor, targetId);
-            if(!targetRange) {
+            // recalculate the target range, as the source text is not removed
+            const updatedTargetRange = HTMLInstrumentation.getPositionFromTagId(editor, targetId);
+            if (!updatedTargetRange) {
                 return;
             }
-            const targetText = editor.getTextBetween(targetRange.from, targetRange.to);
-            const targetIndent = editor.getTextBetween({ line: targetRange.from.line, ch: 0 }, targetRange.from);
 
-            // to check if there is only indentation and no text before it
-            if (targetIndent.trim() === "") {
-                const finalText = sourceText + '\n' + targetIndent + targetText;
-                editor.replaceRange(finalText, targetRange.from, targetRange.to);
+            if (insertAfter) {
+                const insertPos = {
+                    line: updatedTargetRange.to.line,
+                    ch: updatedTargetRange.to.ch
+                };
+
+                editor.replaceRange("\n" + targetIndent + sourceText, insertPos);
             } else {
-                editor.replaceRange(sourceText + targetText, targetRange.from, targetRange.to);
+                // insert before
+                const targetText = editor.getTextBetween(updatedTargetRange.from, updatedTargetRange.to);
+
+                // to check if there is only indentation and no text before it
+                if (targetIndent.trim() === "") {
+                    const finalText = sourceText + '\n' + targetIndent + targetText;
+                    editor.replaceRange(finalText, updatedTargetRange.from, updatedTargetRange.to);
+                } else {
+                    editor.replaceRange(sourceText + targetText, updatedTargetRange.from, updatedTargetRange.to);
+                }
             }
         });
     }
@@ -206,14 +219,15 @@ define(function (require, exports, module) {
 
                 sourceId: sourceId, (these are for move (drag & drop))
                 targetId: targetId,
+                insertAfter: boolean, (whether to insert after the target element)
                 move: true
         }
     * these are the main properties that are passed through the message
      */
     function handleLivePreviewEditOperation(message) {
         // handle move(drag & drop)
         if (message.move && message.sourceId && message.targetId) {
-            _moveElementInSource(message.sourceId, message.targetId);
+            _moveElementInSource(message.sourceId, message.targetId, message.insertAfter);
             return;
         }