chore: paste should paste to end of current tag and refactor to pro plugin

Author: abose

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -360,27 +360,6 @@ function RemoteFunctions(config = {}) {
         });
     }
 
-    /**
-     * this is for paste button, this inserts the saved content from clipboard just above this element
-     * @param {Event} event
-     * @param {DOMElement} targetElement
-     */
-    function _handlePasteOptionClick(event, targetElement) {
-        if (LivePreviewView.isElementEditable(targetElement)) {
-            const targetTagId = targetElement.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
-
-            window._Brackets_MessageBroker.send({
-                livePreviewEditEnabled: true,
-                element: targetElement,
-                event: event,
-                tagId: Number(targetTagId),
-                paste: true
-            });
-        } else {
-            console.error("The TagID might be unavailable or the element tag is directly body or html");
-        }
-    }
-
     /**
      * This function will get triggered when from the multiple advance DOM buttons, one is clicked
      * this function just checks which exact button was clicked and call the required function
@@ -391,8 +370,6 @@ function RemoteFunctions(config = {}) {
     function handleOptionClick(e, action, element) {
         if (action === "edit-text") {
             startEditing(element);
-        } else if (action === "paste") {
-            _handlePasteOptionClick(e, element);
         } else if (action === "ai") {
             _handleAIOptionClick(e, element);
         } else if (action === "image-gallery") {
@@ -1008,10 +985,6 @@ function RemoteFunctions(config = {}) {
 
             let content = `
                 <div class="more-options-dropdown">
-                    <div class="dropdown-item" data-action="paste">
-                        <span class="item-icon">${icons.paste}</span>
-                        <span class="item-label">${strings.paste}</span>
-                    </div>
                     ${handlerItems}
                 </div>
             `;

src/extensionsIntegrated/phoenix-pro/LivePreviewEdit.js

@@ -645,17 +645,18 @@ define(function (require, exports, module) {
             return;
         }
 
-        const { startPos } = range;
+        const { startPos, endPos } = 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 : '';
+            indent = indent.trim() === '' ? `\n${indent}` : '';
 
-            editor.replaceRange(text + '\n' + indent, startPos);
+            editor.replaceRange(indent + text, endPos);
+            editor.setCursorPos(endPos.line + 1, indent.length);
         }).catch(err => {
             console.error("Failed to read from clipboard:", err);
         });

src/extensionsIntegrated/phoenix-pro/browser-context/generic-tools.js

@@ -231,6 +231,42 @@ LivePreviewView.registerNodeMoreOptionsHandler("copy", {
     handleDropdownClick: _handleCopyOptionClick
 });
 
+function _renderPasteDropdown() {
+    return {
+        listOrder: proConstants.DROPDOWN_ORDERING.PASTE,
+        htmlContent: `<div class="dropdown-item" data-action="paste">
+                        <span class="item-icon">${icons.paste}</span>
+                        <span class="item-label">${strings.paste}</span>
+                    </div>`
+    };
+}
+
+/**
+ * this is for paste button, this inserts the saved content from clipboard just above this element
+ * @param {Event} event
+ * @param {DOMElement} targetElement
+ */
+function _handlePasteOptionClick(event, targetElement) {
+    if (LivePreviewView.isElementEditable(targetElement)) {
+        const targetTagId = targetElement.getAttribute(GLOBALS.DATA_BRACKETS_ID_ATTR);
+
+        window._Brackets_MessageBroker.send({
+            livePreviewEditEnabled: true,
+            element: targetElement,
+            event: event,
+            tagId: Number(targetTagId),
+            paste: true
+        });
+    } else {
+        console.error("The TagID might be unavailable or the element tag is directly body or html");
+    }
+}
+
+LivePreviewView.registerNodeMoreOptionsHandler("paste", {
+    renderDropdownItems: _renderPasteDropdown,
+    handleDropdownClick: _handlePasteOptionClick
+});
+
 
 LivePreviewView.registerNodeMoreOptionsHandler("cutPasteSeparator", {
     renderDropdownItems: ()=>{