fix: clipboard edit menu>paste not working in tauri

Author: abose

src/editor/EditorCommandHandlers.js

@@ -19,6 +19,8 @@
  *
  */
 
+/*global Phoenix*/
+
 /**
  * Text-editing commands that apply to whichever Editor is currently focused
  */
@@ -1185,24 +1187,34 @@ define(function (require, exports, module) {
     function _execCommandCopy() {
         _execCommand("copy");
     }
+
+    function _applyPaste(text) {
+        var editor = EditorManager.getFocusedEditor();
+        if(editor){
+            var doc = editor._codeMirror.getDoc();
+            var selection = doc.getSelection();
+            var cursor = doc.getCursor();
+            if(selection){
+                doc.replaceSelection(text);
+            } else {
+                doc.replaceRange(text, cursor);
+            }
+        }
+    }
+
     function _execCommandPaste() {
-        if(window.navigator && window.navigator.clipboard){
-            window.navigator.clipboard.readText().then(function (text) {
-                var editor = EditorManager.getFocusedEditor();
-                if(editor){
-                    var doc = editor._codeMirror.getDoc();
-                    var selection = doc.getSelection();
-                    var cursor = doc.getCursor();
-                    if(selection){
-                        doc.replaceSelection(text);
-                    } else {
-                        doc.replaceRange(text, cursor);
-                    }
-                }
+        const result = new $.Deferred();
+        Phoenix.app.clipboardReadText()
+            .then(_applyPaste)
+            .catch(err =>{
+                console.error(err);
+                _execCommand("paste");
+            })
+            .finally(()=>{
+                // always resolve as we don't know if the _execCommand("paste") did its work or not.
+                result.resolve();
             });
-        } else {
-            _execCommand("paste");
-        }
+        return result.promise();
     }
 
     // Register commands

src/phoenix/shell.js

@@ -63,6 +63,26 @@ Phoenix.app = {
         }
         window.__TAURI__.window.appWindow.close();
     },
+    clipboardReadText: function () {
+        if(Phoenix.browser.isTauri){
+            return window.__TAURI__.clipboard.readText();
+        } else if(window.navigator && window.navigator.clipboard){
+            return window.navigator.clipboard.readText();
+        }
+        return Promise.reject(new Error("clipboardReadText: Unable to access clipboard text."));
+    },
+    copyToClipboard: function (textToCopy) {
+        if(Phoenix.browser.isTauri){
+            return window.__TAURI__.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.browser.isTauri) {
             // use browser full screen api in browsers.
@@ -175,14 +195,6 @@ Phoenix.app = {
         nativeWindow.isTauriWindow = false;
         return nativeWindow;
     },
-    copyToClipboard: function (textToCopy) {
-        const textArea = document.createElement("textarea");
-        textArea.value = textToCopy;
-        document.body.appendChild(textArea);
-        textArea.select();
-        document.execCommand("copy");
-        document.body.removeChild(textArea);
-    },
     getApplicationSupportDirectory: Phoenix.VFS.getAppSupportDir,
     getExtensionsDirectory: Phoenix.VFS.getExtensionDir,
     getUserDocumentsDirectory: Phoenix.VFS.getUserDocumentsDirectory,

test/spec/EditorCommandHandlers-integ-test.js

@@ -210,6 +210,53 @@ define(function (require, exports, module) {
             });
         });
 
+        if(window.Phoenix.browser.isTauri) {
+            // unfortunately, browsers don't allow unattended clip board access as its a secure context. Clipboard API
+            // will usually popup a clipboard access popup which the user have to click agree manually. So
+            // we do this test only in tauri.
+            describe("Editor copy paste Commands Test", function () {
+                let savedClipboardText = '';
+                beforeAll(async function () {
+                    try{
+                        // we don't want to nuke the users clipboard text just for running the test runner.
+                        // So save and restore clipboard.
+                        savedClipboardText = await testWindow.Phoenix.app.clipboardReadText();
+                    } catch (e) {
+                        //ignore this error.
+                        console.error("Could not read clipboard text", e);
+                    }
+                });
+
+                afterAll(async function () {
+                    try{
+                        // we don't want to nuke the users clipboard text just for running the test runner.
+                        // So save and restore clipboard.
+                        await testWindow.Phoenix.app.copyToClipboard(savedClipboardText || '');
+                    } catch (e) {
+                        //ignore this error.
+                        console.error("Could not read clipboard text", e);
+                    }
+                });
+
+                it("should copy and paste without selection", async function () {
+                    let promise;
+                    promise = CommandManager.execute(Commands.CMD_ADD_TO_WORKINGSET_AND_OPEN, {fullPath: testPath + "/test.js"});
+                    await awaitsForDone(promise, "Open into working set");
+
+                    myEditor = EditorManager.getCurrentFullEditor();
+                    myEditor.setSelection({line: 5, ch: 8}, {line: 5, ch: 10});
+
+                    const textToCopy = "#Phcode_Copy_test";
+                    await testWindow.Phoenix.app.copyToClipboard(textToCopy);
+
+                    promise = CommandManager.execute(Commands.EDIT_PASTE);
+                    await awaitsForDone(promise, "pasted");
+
+                    myEditor.setSelection({line: 5, ch: 8}, {line: 5, ch: 8 + textToCopy.length});
+                    expect(myEditor.getSelectedText()).toEql(textToCopy);
+                });
+            });
+        }
 
         describe("Open Line Above and Below - inline editor", function () {