fix: in popped out live preview cut/copy/paste doenst work

Author: abose

src/LiveDevelopment/BrowserScripts/LivePreviewTransportRemote.js

@@ -440,6 +440,7 @@
 
     let alertQueue = [], confirmCalled = false, promptCalled = false;
     let addToQueue = true;
+    window.__PHOENIX_APP_INFO = {isTauri, platform};
     if(!isExternalBrowser){
         // this is an embedded iframe we always take hold of the alert api for better ux within the live preivew frame.
         window.__PHOENIX_EMBED_INFO = {isTauri, platform};

src/extensionsIntegrated/phoenix-pro/LivePreviewEdit.js

@@ -584,6 +584,8 @@ define(function (require, exports, module) {
         });
     }
 
+    let clipboardTextCopiedFallback = null;
+
     /**
      * this saves the element to clipboard and deletes its source code
      * @param {Number} tagId
@@ -601,9 +603,7 @@ define(function (require, exports, module) {
 
         const { startPos, endPos } = range;
         const text = editor.getTextBetween(startPos, endPos);
-
-        Phoenix.app.copyToClipboard(text);
-        _showCopyToastIfNeeded();
+        clipboardTextCopiedFallback = text;
 
         // delete the elements source code
         editor.document.batchOperation(function () {
@@ -616,6 +616,10 @@ define(function (require, exports, module) {
                 editor.replaceRange("", {line: startPos.line - 1, ch: chPrevLine}, startPos);
             }
         });
+        _showCopyToastIfNeeded();
+        Phoenix.app.copyToClipboard(text)
+            .catch(console.error); // silently fail as in browser popped out live preview case, this will fail
+        // and since its expected failure with browser security there is litttle we can do.
     }
 
     function _copyElementToClipboard(tagId) {
@@ -631,9 +635,12 @@ define(function (require, exports, module) {
 
         const { startPos, endPos } = range;
         const text = editor.getTextBetween(startPos, endPos);
+        clipboardTextCopiedFallback = text;
 
-        Phoenix.app.copyToClipboard(text);
         _showCopyToastIfNeeded();
+        Phoenix.app.copyToClipboard(text)
+            .catch(console.error); // silently fail as in browser popped out live preview case, this will fail
+        // and since its expected failure with browser security there is litttle we can do.
     }
 
     /**
@@ -652,7 +659,7 @@ define(function (require, exports, module) {
 
         const { startPos, endPos } = range;
 
-        Phoenix.app.clipboardReadText().then(text => {
+        function replaceText(text) {
             if (!text) {
                 return;
             }
@@ -668,9 +675,17 @@ define(function (require, exports, module) {
             // and we will exit live preview context. So when a user repeatedly presses ctrl+v, we will exit the context
             // if we dont set it to true here.
             _isInLivePreviewSelectionContext = true;
-        }).catch(err => {
-            console.error("Failed to read from clipboard:", err);
-        });
+        }
+
+        Phoenix.app.clipboardReadText()
+            .then(replaceText)
+            .catch(err => {
+                console.error("Failed to read from clipboard:", err);
+                // this can fail if the paste is initiated in popped out live preview in browser app and then
+                // if we try to access clipboard in Phoenix which isn't focused, the browser wont allow that.
+                // in which case we will use the fallback text passed in from the live preview.
+                replaceText(clipboardTextCopiedFallback);
+            });
     }
 
     /**

src/phoenix/shell.js

@@ -48,11 +48,6 @@ 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');
@@ -275,20 +270,13 @@ 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);
+    clipboardReadText: function () {
+        if(Phoenix.isNativeApp){
+            return window.__TAURI__.clipboard.readText();
+        } else if(window.navigator && window.navigator.clipboard){
+            return window.navigator.clipboard.readText();
         }
-        return copiedClipboardText;
+        return Promise.reject(new Error("clipboardReadText: Not supported."));
     },
     clipboardReadFiles: function () {
         return new Promise((resolve, reject)=>{
@@ -310,30 +298,19 @@ Phoenix.app = {
             }
         });
     },
-    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);
-        }
+    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();
     },
     isFullscreen: function () {
         if(!Phoenix.isNativeApp) {