fix: indentation breaking for multiline elements or complex elements with many children

Author: devvaannsh

src/extensionsIntegrated/phoenix-pro/LivePreviewEdit.js

@@ -719,6 +719,56 @@ define(function (require, exports, module) {
         }
     }
 
+    /**
+     * This function reindents multiline text so that after the drag-drop operation the target indentation is matched
+     * note: it preserves the relative indentation
+     *
+     * @param {String} sourceText - the text to re-indent
+     * @param {String} targetIndent - the target indentation string
+     * @returns {String} - the re-indented text
+     */
+    function _reindentMultilineText(sourceText, targetIndent) {
+        const lines = sourceText.split('\n');
+        // for single lines no reindentation is needed
+        if (lines.length <= 1) {
+            return sourceText;
+        }
+
+        // find the source indent from last non-empty line (normally its the closing tag)
+        // this will represent the original indentation level of the element
+        let sourceIndentLen = 0;
+        for (let j = lines.length - 1; j >= 0; j--) {
+            if (lines[j].trim() !== '') {
+                let len = 0;
+                while (len < lines[j].length && (lines[j][len] === ' ' || lines[j][len] === '\t')) {
+                    len++;
+                }
+                sourceIndentLen = len;
+                break;
+            }
+        }
+
+        // calculate the indentation delta
+        const delta = targetIndent.length - sourceIndentLen;
+
+        // adjust all lines by the delta to maintain relative indentation
+        for (let j = 0; j < lines.length; j++) {
+            if (lines[j].trim() === '') { continue; } // preserve empty lines
+
+            let currentIndent = 0;
+            while (currentIndent < lines[j].length &&
+                   (lines[j][currentIndent] === ' ' || lines[j][currentIndent] === '\t')) {
+                currentIndent++;
+            }
+
+            const newIndent = Math.max(0, currentIndent + delta);
+            const indentChar = targetIndent.length > 0 ? targetIndent[0] : ' ';
+            lines[j] = indentChar.repeat(newIndent) + lines[j].substring(currentIndent);
+        }
+
+        return lines.join('\n');
+    }
+
     /**
      * this function is to make sure that we insert elements with proper indentation
      *
@@ -729,6 +779,8 @@ define(function (require, exports, module) {
      * @param {String} sourceText - the text to insert
      */
     function _insertElementWithIndentation(editor, insertPos, insertAfterMode, targetIndent, sourceText) {
+        sourceText = _reindentMultilineText(sourceText, targetIndent);
+
         if (insertAfterMode) {
             // Insert after the target element
             editor.replaceRange("\n" + targetIndent + sourceText, insertPos);