chore: cut copy paste works in popped out live preview and clipboard reliability in browser

Author: abose

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -461,6 +461,63 @@
             });
         }
 
+        // Cut: Ctrl+X / Cmd+X - operates on selected element
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "x") {
+            // Check if user is editing text content - if so, allow normal text cut
+            const activeElement = document.activeElement;
+            const isEditingText = activeElement &&
+                                  activeElement.hasAttribute("contenteditable") &&
+                                  activeElement.hasAttribute("data-brackets-id");
+
+            // Only handle element cut if not editing text and in edit mode
+            if (!isEditingText &&
+                window._LD &&
+                window._LD.handleCutElement &&
+                window._LD.getMode &&
+                window._LD.getMode() === 'edit') {
+                e.preventDefault();
+                window._LD.handleCutElement();
+            }
+        }
+
+        // Copy: Ctrl+C / Cmd+C - operates on selected element
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
+            // Check if user is editing text content - if so, allow normal text copy
+            const activeElement = document.activeElement;
+            const isEditingText = activeElement &&
+                                  activeElement.hasAttribute("contenteditable") &&
+                                  activeElement.hasAttribute("data-brackets-id");
+
+            // Only handle element copy if not editing text and in edit mode
+            if (!isEditingText &&
+                window._LD &&
+                window._LD.handleCopyElement &&
+                window._LD.getMode &&
+                window._LD.getMode() === 'edit') {
+                e.preventDefault();
+                window._LD.handleCopyElement();
+            }
+        }
+
+        // Paste: Ctrl+V / Cmd+V - operates on selected element
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
+            // Check if user is editing text content - if so, allow normal text paste
+            const activeElement = document.activeElement;
+            const isEditingText = activeElement &&
+                                  activeElement.hasAttribute("contenteditable") &&
+                                  activeElement.hasAttribute("data-brackets-id");
+
+            // Only handle element paste if not editing text and in edit mode
+            if (!isEditingText &&
+                window._LD &&
+                window._LD.handlePasteElement &&
+                window._LD.getMode &&
+                window._LD.getMode() === 'edit') {
+                e.preventDefault();
+                window._LD.handlePasteElement();
+            }
+        }
+
         // for save
         if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "s") {
             e.preventDefault();

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -2313,7 +2313,8 @@ function RemoteFunctions(config = {}) {
         "updateConfig": updateConfig,
         "dismissUIAndCleanupState": dismissUIAndCleanupState,
         "showToastMessage": showToastMessage,
-        "escapeKeyPressInEditor": _escapeKeyPressInEditor
+        "escapeKeyPressInEditor": _escapeKeyPressInEditor,
+        "getMode": function() { return config.mode; }
     };
 
     // the below code comment is replaced by added scripts for extensibility

src/phoenix/shell.js

@@ -48,6 +48,11 @@ let cliArgs, cliCWD, singleInstanceCLIHandler, quitTimeAppUpdateHandler;
 const PHOENIX_WINDOW_PREFIX = 'phcode-';
 const PHOENIX_EXTENSION_WINDOW_PREFIX = 'extn-';
 
+// this shared a copy of the text that was most recently copied to clipboard. This is used as a fallback for
+// clipboardReadText when clipboardReadText fails in the browser(browser disables clipboard
+// apis when page is not in focus)
+let copiedClipboardText = "";
+
 async function _getTauriWindowLabel(prefix) {
     // cannot use tauri sync api here as it returns stale window list window.__TAURI__.window.getAll();
     const tauriWindowLabels = await window.__TAURI__.invoke('_get_window_labels');
@@ -177,14 +182,6 @@ Phoenix.app = {
         window.__TAURI__.window.getCurrent().setFocus();
         window.__TAURI__.window.getCurrent().setAlwaysOnTop(false);
     },
-    clipboardReadText: function () {
-        if(Phoenix.isNativeApp){
-            return window.__TAURI__.clipboard.readText();
-        } else if(window.navigator && window.navigator.clipboard){
-            return window.navigator.clipboard.readText();
-        }
-        return Promise.reject(new Error("clipboardReadText: Not supported."));
-    },
     /**
      * Gets the commandline argument in desktop builds and null in browser builds.
      * Will always return CLI of the current process only.
@@ -278,6 +275,21 @@ Phoenix.app = {
             });
         }
     },
+    clipboardReadText: async function () {
+        try{
+            let textRead;
+            if(Phoenix.isNativeApp){
+                textRead = await window.__TAURI__.clipboard.readText();
+            } else if(window.navigator && window.navigator.clipboard){
+                textRead = await window.navigator.clipboard.readText();
+            }
+            return textRead;
+        } catch (e) {
+            // we silently bail out with fallback text. see `copyToClipboard` on why we do this.
+            console.error("Error while reading clipboard: ", e);
+        }
+        return copiedClipboardText;
+    },
     clipboardReadFiles: function () {
         return new Promise((resolve, reject)=>{
             if(Phoenix.isNativeApp){
@@ -298,19 +310,30 @@ Phoenix.app = {
             }
         });
     },
-    copyToClipboard: function (textToCopy) {
-        if(Phoenix.isNativeApp){
-            return window.__TAURI__.clipboard.writeText(textToCopy);
-        } else if(window.navigator && window.navigator.clipboard){
-            return window.navigator.clipboard.writeText(textToCopy);
-        }
-        const textArea = document.createElement("textarea");
-        textArea.value = textToCopy;
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textArea);
-        return Promise.resolve();
+    copyToClipboard: async function (textToCopy) {
+        try{
+            copiedClipboardText = textToCopy;
+            if(Phoenix.isNativeApp){
+                await window.__TAURI__.clipboard.writeText(textToCopy);
+                return;
+            } else if(window.navigator && window.navigator.clipboard){
+                await window.navigator.clipboard.writeText(textToCopy);
+                return;
+            }
+            const textArea = document.createElement("textarea");
+            textArea.value = textToCopy;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textArea);
+        } catch (e) {
+            // we silently bail out as we will fallback to copiedClipboardText local variable.
+            // in browsers, when tab is not in focus, the clipboard apis can fail as its expected browser behavior.
+            // in popped out live previews, it may edit the clipboard for copy-paste operations which is normal
+            // behavior which should work with fallback text. Since this is normal behavior, we dont want to
+            // report the errors upstream but just log for now.
+            console.error("Error while copying to clipboard: ", e);
+        }
     },
     isFullscreen: function () {
         if(!Phoenix.isNativeApp) {