feat: show first time copy cut toast message

Author: devvaannsh

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -5269,8 +5269,9 @@ function RemoteFunctions(config = {}) {
      * this function is to show a toast notification at the bottom center of the screen
      * this toast message is used when user tries to edit a non-editable element
      * @param {String} message - the message to display in the toast
+     * @param {Number} duration - optional duration in milliseconds (default: 3000)
      */
-    function showToastMessage(message) {
+    function showToastMessage(message, duration = 3000) {
         // clear any existing toast & timer, if there are any
         dismissToastMessage();
 
@@ -5326,13 +5327,13 @@ function RemoteFunctions(config = {}) {
         shadow.innerHTML = `<style>${styles}</style>${content}`;
         window.document.body.appendChild(toast);
 
-        // Auto-dismiss after 3 seconds
+        // Auto-dismiss after the given time
         _toastTimeout = setTimeout(() => {
             if (toast && toast.parentNode) {
                 toast.remove();
             }
             _toastTimeout = null;
-        }, 3000);
+        }, duration);
     }
 
     /**
@@ -5600,6 +5601,7 @@ function RemoteFunctions(config = {}) {
         "resetState"            : resetState,
         "enableHoverListeners" : enableHoverListeners,
         "registerHandlers" : registerHandlers,
-        "handleDownloadEvent" : handleDownloadEvent
+        "handleDownloadEvent" : handleDownloadEvent,
+        "showToastMessage" : showToastMessage
     };
 }

src/LiveDevelopment/LivePreviewEdit.js

@@ -47,6 +47,9 @@ define(function (require, exports, module) {
     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',
@@ -339,6 +342,7 @@ define(function (require, exports, module) {
         const text = editor.getTextBetween(startPos, endPos);
 
         Phoenix.app.copyToClipboard(text);
+        _showCopyToastIfNeeded();
 
         // delete the elements source code
         editor.document.batchOperation(function () {
@@ -368,6 +372,7 @@ define(function (require, exports, module) {
         const text = editor.getTextBetween(startPos, endPos);
 
         Phoenix.app.copyToClipboard(text);
+        _showCopyToastIfNeeded();
     }
 
     /**
@@ -799,6 +804,19 @@ define(function (require, exports, module) {
         }
     }
 
+    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;

src/nls/root/strings.js

@@ -208,6 +208,7 @@ define({
     "LIVE_DEV_IMAGE_GALLERY_SELECT_FROM_COMPUTER": "Select from device",
     "LIVE_DEV_IMAGE_GALLERY_DIALOG_OVERLAY_MESSAGE": "Select image download location in the editor to continue",
     "LIVE_DEV_TOAST_NOT_EDITABLE": "Element not editable - generated by script.",
+    "LIVE_DEV_COPY_TOAST_MESSAGE": "Element copied! Click 'Paste' on any element to insert it above.",
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_TITLE": "Select Folder to Save Image",
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_DESCRIPTION": "Choose where to download the image:",
     "LIVE_DEV_IMAGE_FOLDER_DIALOG_PLACEHOLDER": "Type folder path (e.g., assets/images/)",