Live Preview Edit Polishing

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -363,7 +363,7 @@
         ProtocolManager.enable();
     });
 
-    function _getAllInheritedSelectorsInOrder(element) {
+    function getAllInheritedSelectorsInOrder(element) {
         let selectorsFound= new Map();
         const selectorsList = [];
         while (element) {
@@ -383,6 +383,7 @@
         return selectorsList;
     }
 
+    global.getAllInheritedSelectorsInOrder = getAllInheritedSelectorsInOrder;
 
     /**
     * Sends the message containing tagID which is being clicked
@@ -407,7 +408,7 @@
                         "nodeID": element.id,
                         "nodeClassList": element.classList,
                         "nodeName": element.nodeName,
-                        "allSelectors": _getAllInheritedSelectorsInOrder(element),
+                        "allSelectors": getAllInheritedSelectorsInOrder(element),
                         "contentEditable": element.contentEditable === 'true',
                         "clicked": true,
                         "edit": true
@@ -431,7 +432,7 @@
                     "nodeID": element.id,
                     "nodeClassList": element.classList,
                     "nodeName": element.nodeName,
-                    "allSelectors": _getAllInheritedSelectorsInOrder(element),
+                    "allSelectors": getAllInheritedSelectorsInOrder(element),
                     "contentEditable": element.contentEditable === 'true',
                     "clicked": true
                 });

src/LiveDevelopment/LivePreviewEdit.js

@@ -30,6 +30,7 @@
     const LiveDevelopment = require("LiveDevelopment/main");
     const CodeMirror = require("thirdparty/CodeMirror/lib/codemirror");
     const ProjectManager = require("project/ProjectManager");
+    const PreferencesManager = require("preferences/PreferencesManager");
     const CommandManager = require("command/CommandManager");
     const Commands = require("command/Commands");
     const FileSystem = require("filesystem/FileSystem");
@@ -46,7 +47,12 @@
     const IMAGE_DOWNLOAD_FOLDER_KEY = "imageGallery.downloadFolder";
     const IMAGE_DOWNLOAD_PERSIST_FOLDER_KEY = "imageGallery.persistFolder";
 
+    // state manager key for tracking if copy/cut toast has been shown
+    const COPY_CUT_TOAST_SHOWN_KEY = "livePreviewEdit.copyToastShown";
+
     const DOWNLOAD_EVENTS = {
+        DIALOG_OPENED: 'dialogOpened',
+        DIALOG_CLOSED: 'dialogClosed',
         STARTED: 'downloadStarted',
         COMPLETED: 'downloadCompleted',
         CANCELLED: 'downloadCancelled',
@@ -72,7 +78,7 @@
      * we only care about text changes or things like newlines, <br>, or formatting like <b>, <i>, etc.
      *
      * Here's the basic idea:
-     * - Parse both old and new HTML strings into DOM trees
+     * - Parse both old and new HTML strings into document fragments using <template> elements
      * - Then walk both DOMs side by side and sync changes
      *
      * What we handle:
@@ -87,12 +93,14 @@
      * This avoids the browser trying to “fix” broken HTML (which we don’t want)
      */
     function _syncTextContentChanges(oldContent, newContent) {
-        const parser = new DOMParser();
-        const oldDoc = parser.parseFromString(oldContent, "text/html");
-        const newDoc = parser.parseFromString(newContent, "text/html");
+        function parseFragment(html) {
+            const t = document.createElement("template");
+            t.innerHTML = html;
+            return t.content;
+        }
 
-        const oldRoot = oldDoc.body;
-        const newRoot = newDoc.body;
+        const oldRoot = parseFragment(oldContent);
+        const newRoot = parseFragment(newContent);
 
         // this function is to remove the phoenix internal attributes from leaking into the user's source code
         function cleanClonedElement(clonedElement) {
@@ -164,14 +172,16 @@
             }
         }
 
-        const oldEls = Array.from(oldRoot.children);
-        const newEls = Array.from(newRoot.children);
+        const oldEls = Array.from(oldRoot.childNodes);
+        const newEls = Array.from(newRoot.childNodes);
 
         for (let i = 0; i < Math.min(oldEls.length, newEls.length); i++) {
             syncText(oldEls[i], newEls[i]);
         }
 
-        return oldRoot.innerHTML;
+        return Array.from(oldRoot.childNodes).map(node =>
+            node.outerHTML || node.textContent
+        ).join("");
     }
 
     /**
@@ -313,6 +323,88 @@
         });
     }
 
+    /**
+     * this saves the element to clipboard and deletes its source code
+     * @param {Number} tagId
+     */
+    function _cutElementToClipboard(tagId) {
+        const editor = _getEditorAndValidate(tagId);
+        if (!editor) {
+            return;
+        }
+
+        const range = _getElementRange(editor, tagId);
+        if (!range) {
+            return;
+        }
+
+        const { startPos, endPos } = range;
+        const text = editor.getTextBetween(startPos, endPos);
+
+        Phoenix.app.copyToClipboard(text);
+        _showCopyToastIfNeeded();
+
+        // delete the elements source code
+        editor.document.batchOperation(function () {
+            editor.replaceRange("", startPos, endPos);
+
+            // clean up any empty line
+            if(startPos.line !== 0 && !(editor.getLine(startPos.line).trim())) {
+                const prevLineText = editor.getLine(startPos.line - 1);
+                const chPrevLine = prevLineText ? prevLineText.length : 0;
+                editor.replaceRange("", {line: startPos.line - 1, ch: chPrevLine}, startPos);
+            }
+        });
+    }
+
+    function _copyElementToClipboard(tagId) {
+        const editor = _getEditorAndValidate(tagId);
+        if (!editor) {
+            return;
+        }
+
+        const range = _getElementRange(editor, tagId);
+        if (!range) {
+            return;
+        }
+
+        const { startPos, endPos } = range;
+        const text = editor.getTextBetween(startPos, endPos);
+
+        Phoenix.app.copyToClipboard(text);
+        _showCopyToastIfNeeded();
+    }
+
+    /**
+     * this function is to paste the clipboard content above the target element
+     * @param {Number} tagId
+     */
+    function _pasteElementFromClipboard(tagId) {
+        const editor = _getEditorAndValidate(tagId);
+        if (!editor) {
+            return;
+        }
+        const range = _getElementRange(editor, tagId);
+        if (!range) {
+            return;
+        }
+
+        const { startPos } = range;
+
+        Phoenix.app.clipboardReadText().then(text => {
+            if (!text) {
+                return;
+            }
+            // get the indentation in the target line and check if there is any real indentation
+            let indent = editor.getTextBetween({ line: startPos.line, ch: 0 }, startPos);
+            indent = indent.trim() === '' ? indent : '';
+
+            editor.replaceRange(text + '\n' + indent, startPos);
+        }).catch(err => {
+            console.error("Failed to read from clipboard:", err);
+        });
+    }
+
     /**
      * This function is responsible to delete an element from the source code
      * @param {Number} tagId - the data-brackets-id of the DOM element
@@ -696,6 +788,46 @@
         }
     }
 
+    /**
+     * Updates the href attribute of an anchor tag in the src code
+     * @param {number} tagId - The data-brackets-id of the link element
+     * @param {string} newHrefValue - The new href value to set
+     */
+    function _updateHyperlinkHref(tagId, newHrefValue) {
+        const editor = _getEditorAndValidate(tagId);
+        if (!editor) {
+            return;
+        }
+
+        const range = _getElementRange(editor, tagId);
+        if (!range) {
+            return;
+        }
+
+        const { startPos, endPos } = range;
+        const elementText = editor.getTextBetween(startPos, endPos);
+
+        // parse it using DOM parser so that we can update the href attribute
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(elementText, "text/html");
+        const linkElement = doc.querySelector('a');
+
+        if (linkElement) {
+            linkElement.setAttribute('href', newHrefValue);
+            const updatedElementText = linkElement.outerHTML;
+
+            editor.document.batchOperation(function () {
+                editor.replaceRange(updatedElementText, startPos, endPos);
+            });
+
+            // dismiss all UI boxes including the image ribbon gallery
+            const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
+            if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
+                currLiveDoc.protocol.evaluate("_LD.dismissUIAndCleanupState()");
+            }
+        }
+    }
+
     function _sendDownloadStatusToBrowser(eventType, data) {
         const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
         if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
@@ -712,6 +844,19 @@
         }
     }
 
+    function _showCopyToastIfNeeded() {
+        const hasShownToast = StateManager.get(COPY_CUT_TOAST_SHOWN_KEY);
+        if (!hasShownToast) {
+            const currLiveDoc = LiveDevMultiBrowser.getCurrentLiveDoc();
+            if (currLiveDoc && currLiveDoc.protocol && currLiveDoc.protocol.evaluate) {
+                const message = Strings.LIVE_DEV_COPY_TOAST_MESSAGE;
+                const evalString = `_LD.showToastMessage(${JSON.stringify(message)}, 6000)`;
+                currLiveDoc.protocol.evaluate(evalString);
+                StateManager.set(COPY_CUT_TOAST_SHOWN_KEY, true);
+            }
+        }
+    }
+
     function _trackDownload(downloadLocation) {
         if (!downloadLocation) {
             return;
@@ -1156,6 +1301,11 @@
         const $suggestions = $dlg.find("#folder-suggestions");
         const $rememberCheckbox = $dlg.find("#remember-folder-checkbox");
 
+        // notify live preview that dialog is now open
+        if (message && message.downloadId) {
+            _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.DIALOG_OPENED, { downloadId: message.downloadId });
+        }
+
         let folderList = [];
         let rootFolders = [];
         let stringMatcher = null;
@@ -1164,12 +1314,32 @@
         const shouldBeChecked = persistFolder !== false;
         $rememberCheckbox.prop('checked', shouldBeChecked);
 
-        _scanRootDirectoriesOnly(projectRoot, rootFolders).then(() => {
-            stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true });
-            _renderFolderSuggestions(rootFolders.slice(0, 15), $suggestions, $input);
-        });
+        // check if any folder path exists, we pre-fill it
+        const savedFolder = StateManager.get(IMAGE_DOWNLOAD_FOLDER_KEY, StateManager.PROJECT_CONTEXT);
+        if (savedFolder !== null && savedFolder !== undefined) {
+            $input.val(savedFolder);
+        }
 
-        _scanDirectories(projectRoot, '', folderList);
+        // we only scan root directories if we don't have a pre-filled value
+        if (!savedFolder) {
+            _scanRootDirectoriesOnly(projectRoot, rootFolders).then(() => {
+                stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true });
+                _renderFolderSuggestions(rootFolders.slice(0, 15), $suggestions, $input);
+            });
+        }
+
+        // scan all directories, and if we pre-filled a path, trigger autocomplete suggestions
+        _scanDirectories(projectRoot, '', folderList).then(() => {
+            // init stringMatcher if it wasn't created during root scan
+            if (!stringMatcher) {
+                stringMatcher = new StringMatch.StringMatcher({ segmentedSearch: true });
+            }
+            if (savedFolder) {
+                _updateFolderSuggestions(savedFolder, folderList, rootFolders, stringMatcher, $suggestions, $input);
+                // load root directories in background so they're ready when user clears input
+                _scanRootDirectoriesOnly(projectRoot, rootFolders);
+            }
+        });
 
         // input event handler
         $input.on('input', function() {
@@ -1206,6 +1376,12 @@
                     _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.CANCELLED, { downloadId: message.downloadId });
                 }
             }
+
+            // notify live preview that dialog is now closed
+            if (message && message.downloadId) {
+                _sendDownloadStatusToBrowser(DOWNLOAD_EVENTS.DIALOG_CLOSED, { downloadId: message.downloadId });
+            }
+
             dialog.close();
         });
     }
@@ -1254,19 +1430,6 @@
         });
     }
 
-    /**
-     * Handles reset of image folder selection - clears the saved preference and shows the dialog
-     * @private
-     */
-    function _handleResetImageFolderSelection() {
-        // clear the saved folder preference for this project
-        StateManager.set(IMAGE_DOWNLOAD_FOLDER_KEY, null, StateManager.PROJECT_CONTEXT);
-
-        // show the folder selection dialog for the user to choose a new folder
-        // we pass null because we're not downloading an image, just setting the preference
-        _showFolderSelectionDialog(null);
-    }
-
     /**
      * this function is responsible to save the active file (and previewed file, both might be same though)
      * when ctrl/cmd + s is pressed in the live preview
@@ -1332,7 +1495,7 @@
 
         // handle reset image folder selection
         if (message.resetImageFolderSelection) {
-            _handleResetImageFolderSelection();
+            _showFolderSelectionDialog(null);
             return;
         }
 
@@ -1342,6 +1505,12 @@
             return;
         }
 
+        // handle ruler lines toggle message
+        if (message.type === "toggleRulerLines") {
+            PreferencesManager.set("livePreviewShowRulerLines", message.enabled);
+            return;
+        }
+
         // handle move(drag & drop)
         if (message.move && message.sourceId && message.targetId) {
             _moveElementInSource(message.sourceId, message.targetId, message.insertAfter, message.insertInside);
@@ -1367,8 +1536,16 @@
             _deleteElementInSourceByTagId(message.tagId);
         } else if (message.duplicate) {
             _duplicateElementInSourceByTagId(message.tagId);
+        } else if (message.cut) {
+            _cutElementToClipboard(message.tagId);
+        } else if (message.copy) {
+            _copyElementToClipboard(message.tagId);
+        } else if (message.paste) {
+            _pasteElementFromClipboard(message.tagId);
         } else if (message.livePreviewTextEdit) {
             _editTextInSource(message);
+        } else if (message.livePreviewHyperlinkEdit) {
+            _updateHyperlinkHref(message.tagId, message.newHref);
         } else if (message.AISend) {
             _editWithAI(message);
         }