fix: drag & drop logic breaks when target is after source

Author: devvaannsh

src/LiveDevelopment/LivePreviewEdit.js

@@ -181,41 +181,111 @@ define(function (require, exports, module) {
         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);
+        // Check if source is before target to determine order of operations
+        // check if the source is before target or after the target
+        // we need this because
+        // If source is before target → we need to insert first, then remove
+        // If target is before source → remove first, then insert
+        const sourceBeforeTarget =
+            sourceRange.from.line < targetRange.from.line ||
+            (sourceRange.from.line === targetRange.from.line && sourceRange.from.ch < targetRange.from.ch);
+
+        // this function is to clean up the empty lines after an element is removed
+        function cleanupAfterRemoval(range) {
+            const lineToCheck = range.from.line;
+
+            // check if the line where element was removed is now empty
+            if (lineToCheck < editor.lineCount()) {
+                const currentLineText = editor.getLine(lineToCheck);
+                if (currentLineText && currentLineText.trim() === "") {
+                    // remove the empty line
+                    const lineStart = { line: lineToCheck, ch: 0 };
+                    const lineEnd = { line: lineToCheck + 1, ch: 0 };
+                    editor.replaceRange("", lineStart, lineEnd);
+                }
+            }
 
-            // since we remove content from the source, we want to clear the extra line
-            if(sourceRange.from.line !== 0) {
-                const prevLineText = editor.getLine(sourceRange.from.line - 1);
-                const chPrevLine = prevLineText ? prevLineText.length : 0;
-                editor.replaceRange("", {line: sourceRange.from.line - 1, ch: chPrevLine}, sourceRange.from);
+            // also we need to check the previous line if it became empty
+            if (lineToCheck > 0) {
+                const prevLineText = editor.getLine(lineToCheck - 1);
+                if (prevLineText && prevLineText.trim() === "") {
+                    const lineStart = { line: lineToCheck - 1, ch: 0 };
+                    const lineEnd = { line: lineToCheck, ch: 0 };
+                    editor.replaceRange("", lineStart, lineEnd);
+                }
             }
+        }
+
+        // this function is to make sure that we insert elements with proper indentation
+        function insertElementWithIndentation(insertPos, insertAfterMode, useTargetIndent) {
+            const indent = useTargetIndent ? targetIndent : targetIndent;
+
+            if (insertAfterMode) {
+                // Insert after the target element
+                editor.replaceRange("\n" + indent + sourceText, insertPos);
+            } else {
+                // Insert before the target element
+                const insertLine = insertPos.line;
+                const lineStart = { line: insertLine, ch: 0 };
+
+                // Get current line content to preserve any existing indentation structure
+                const currentLine = editor.getLine(insertLine);
 
-            // recalculate the target range, as the source text is not removed
-            const updatedTargetRange = HTMLInstrumentation.getPositionFromTagId(editor, targetId);
-            if (!updatedTargetRange) {
-                return;
+                if (currentLine && currentLine.trim() === "") {
+                    // the line is empty, replace it entirely
+                    editor.replaceRange(indent + sourceText, lineStart, { line: insertLine, ch: currentLine.length });
+                } else {
+                    // the line has content, insert before it
+                    editor.replaceRange(indent + sourceText + "\n", lineStart);
+                }
             }
+        }
 
-            if (insertAfter) {
-                const insertPos = {
-                    line: updatedTargetRange.to.line,
-                    ch: updatedTargetRange.to.ch
-                };
+        // creating a batch operation so that undo in live preview works fine
+        editor.document.batchOperation(function () {
+            if (sourceBeforeTarget) {
+                // this handles the case when source is before target: insert first, then remove
+                if (insertAfter) {
+                    const insertPos = {
+                        line: targetRange.to.line,
+                        ch: targetRange.to.ch
+                    };
+                    insertElementWithIndentation(insertPos, true, true);
+                } else {
+                    // insert before target
+                    insertElementWithIndentation(targetRange.from, false, true);
+                }
 
-                editor.replaceRange("\n" + targetIndent + sourceText, insertPos);
+                // Now remove the source element (NOTE: the positions have shifted)
+                const updatedSourceRange = HTMLInstrumentation.getPositionFromTagId(editor, sourceId);
+                if (updatedSourceRange) {
+                    editor.replaceRange("", updatedSourceRange.from, updatedSourceRange.to);
+                    cleanupAfterRemoval(updatedSourceRange);
+                }
             } else {
-                // insert before
-                const targetText = editor.getTextBetween(updatedTargetRange.from, updatedTargetRange.to);
+                // This handles the case when target is before source: remove first, then insert
+                // Store source range before removal
+                const originalSourceRange = { ...sourceRange };
+
+                // Remove the source element first
+                editor.replaceRange("", sourceRange.from, sourceRange.to);
+                cleanupAfterRemoval(originalSourceRange);
+
+                // Recalculate target range after source removal as the positions have shifted
+                const updatedTargetRange = HTMLInstrumentation.getPositionFromTagId(editor, targetId);
+                if (!updatedTargetRange) {
+                    return;
+                }
 
-                // 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);
+                if (insertAfter) {
+                    const insertPos = {
+                        line: updatedTargetRange.to.line,
+                        ch: updatedTargetRange.to.ch
+                    };
+                    insertElementWithIndentation(insertPos, true, true);
                 } else {
-                    editor.replaceRange(sourceText + targetText, updatedTargetRange.from, updatedTargetRange.to);
+                    // Insert before target
+                    insertElementWithIndentation(updatedTargetRange.from, false, true);
                 }
             }
         });