feat: implement live preview duplicate option functionality

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -224,11 +224,6 @@ function RemoteFunctions(config) {
         console.log("handle select parent option button was clicked");
     }
 
-    // TODO: need to implement
-    function _handleDuplicateOptionClick(e) {
-        console.log("handle duplicate option button was clicked");
-    }
-
     /**
      * This function gets called when the delete button is clicked
      * it sends a message to the editor using postMessage to delete the element from the source code
@@ -242,12 +237,31 @@ function RemoteFunctions(config) {
                 livePreviewEditEnabled: true,
                 element: element,
                 event: event,
-                tagId: tagId,
+                tagId: Number(tagId),
                 delete: true
             });
         }
     }
 
+    /**
+     * For duplicate button. Read '_handleDeleteOptionClick' jsdoc to understand more on how this works
+     * @param {Event} event
+     * @param {DOMElement} element - the HTML DOM element that was clicked. it is to get the data-brackets-id attribute
+     */
+    function _handleDuplicateOptionClick(event, element) {
+        const tagId = element.getAttribute("data-brackets-id");
+        if (tagId) {
+            window._Brackets_MessageBroker.send({
+                livePreviewEditEnabled: true,
+                element: element,
+                event: event,
+                tagId: Number(tagId),
+                duplicate: true
+            });
+        }
+    }
+
+
     /**
      * 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

src/LiveDevelopment/livePreviewEdit.js

@@ -2,6 +2,41 @@ define(function (require, exports, module) {
     const EditorManager = require("editor/EditorManager");
     const HTMLInstrumentation = require("LiveDevelopment/MultiBrowserImpl/language/HTMLInstrumentation");
 
+    /**
+     * This function is responsible to duplicate an element from the source code
+     * @param {Number} tagId - the data-brackets-id of the DOM element
+     */
+    function _duplicateElementInSourceByTagId(tagId) {
+        const editor = EditorManager.getActiveEditor();
+        if (!editor || !tagId) {
+            return;
+        }
+
+        // this will give us the start pos and end pos of the DOM element in the source code
+        // can be referenced using range.from and range.to
+        const range = HTMLInstrumentation.getPositionFromTagId(editor, tagId);
+        if (!range) {
+            return;
+        }
+
+        // this is the actual source code for the element that we need to duplicate
+        const text = editor.getTextBetween(range.from, range.to);
+        // this is the indentation on the line
+        const indent = editor.getTextBetween({line: range.from.line, ch: 0}, range.from);
+
+        // this is the position where we need to insert
+        // we're giving the char as 0 because since we insert a new line using '\n'
+        // that's why writing any char value will not work, as the line is empty
+        // and codemirror doesn't allow to insert at a column (ch) greater than the length of the line
+        // So, the logic is to just append the indent before the text at this insertPos
+        const insertPos = {
+            line: range.from.line + (range.to.line - range.from.line + 1),
+            ch: 0
+        };
+
+        editor.replaceRange('\n', range.to);
+        editor.replaceRange(indent + text, insertPos);
+    }
 
     /**
      * This function is responsible to delete an element from the source code
@@ -16,7 +51,7 @@ define(function (require, exports, module) {
         // this will give us the start pos and end pos of the DOM element in the source code
         // can be referenced using range.from and range.to
         const range = HTMLInstrumentation.getPositionFromTagId(editor, tagId);
-        if(!range) {
+        if (!range) {
             return;
         }
 
@@ -47,7 +82,9 @@ define(function (require, exports, module) {
 
         // just call the required functions
         if (message.delete) {
-            _deleteElementInSourceByTagId(Number(message.tagId));
+            _deleteElementInSourceByTagId(message.tagId);
+        } else if (message.duplicate) {
+            _duplicateElementInSourceByTagId(message.tagId);
         }
     }