fix: it should be possible to select text in live preview and copy it

Author: abose

src/LiveDevelopment/BrowserScripts/LiveDevProtocolRemote.js

@@ -367,6 +367,16 @@
     * the HTML tag corresponding to the clicked element.
     */
     function onDocumentClick(event) {
+        // Get the user's current selection
+        const selection = window.getSelection();
+
+        // Check if there is a selection
+        if (selection.toString().length > 0) {
+            // if there is any selection like text or others, we don't see it as a live selection event
+            // Eg: user may selects ome text in live preview to copy, in which case we should nt treat it
+            // as a live select.
+            return;
+        }
         var element = event.target;
         if (element && element.hasAttribute('data-brackets-id')) {
             MessageBroker.send({

src/LiveDevelopment/BrowserScripts/RemoteFunctions.js

@@ -28,7 +28,7 @@
  * modules should define a single function that returns an object of all
  * exported functions.
  */
-function RemoteFunctions(config, remoteWSPort) {
+function RemoteFunctions(config) {
 
 
     var experimental;
@@ -997,42 +997,7 @@ function RemoteFunctions(config, remoteWSPort) {
     if (experimental) {
         window.document.addEventListener("keydown", onKeyDown);
     }
-    
-    var _ws = null;
-
-    function onDocumentClick(event) {
-        var element = event.target,
-            currentDataId,
-            newDataId;
-        
-        if (_ws && element && element.hasAttribute('data-brackets-id')) {
-            _ws.send(JSON.stringify({
-                type: "message",
-                message: element.getAttribute('data-brackets-id')
-            }));
-        }
-    }
-    
-    
-    function createWebSocket() {
-        _ws = new WebSocket("ws://localhost:" + remoteWSPort);
-        _ws.onopen = function () {
-            window.document.addEventListener("click", onDocumentClick);
-        };
-                
-        _ws.onmessage = function (evt) {
-        };
-                
-        _ws.onclose = function () {
-            // websocket is closed
-            window.document.removeEventListener("click", onDocumentClick);
-        };
-    }
-    
-    if (remoteWSPort) {
-        createWebSocket();
-    }
-    
+
     return {
         "DOMEditHandler"        : DOMEditHandler,
         "showGoto"              : showGoto,

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -67,6 +67,7 @@ define(function (require, exports, module) {
     const StaticServer = Phoenix.browser.isTauri? NodeStaticServer : BrowserStaticServer;
 
     const EVENT_EMBEDDED_IFRAME_WHO_AM_I = 'whoAmIframePhoenix';
+    const EVENT_EMBEDDED_IFRAME_FOCUS_EDITOR = 'embeddedIframeFocusEditor';
 
     const PREVIEW_TRUSTED_PROJECT_KEY = "preview_trusted";
     const PREVIEW_PROJECT_README_KEY = "preview_readme";
@@ -98,27 +99,15 @@ define(function (require, exports, module) {
             }, "*"); // this is not sensitive info, and is only dispatched if requested by the iframe
         }
     });
+    StaticServer.on(EVENT_EMBEDDED_IFRAME_FOCUS_EDITOR, function () {
+        const editor  = EditorManager.getActiveEditor();
+        editor.focus();
+    });
 
     function _isLiveHighlightEnabled() {
         return CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).getChecked();
     }
 
-    window.addEventListener('blur', function() {
-        setTimeout(function() {
-            const editor  = EditorManager.getActiveEditor();
-            if(!_isLiveHighlightEnabled() || !editor){
-                return;
-            }
-            if (document.activeElement === document.getElementById(LIVE_PREVIEW_IFRAME_ID)
-                && !utils.isHTMLFile(editor.document.file.fullPath)) {
-                // Editor focus is never lost to live preview if live highlights is enabled.
-                // For html files, they have special handling to set focus so that live preview can take inputs in
-                // text fields and text area for user to be able to type in live preview html text areas.
-                editor.focus();
-            }
-        }, 100);
-    });
-
     function _getTrustProjectPage() {
         const trustProjectMessage = StringUtils.format(Strings.TRUST_PROJECT,
             path.basename(ProjectManager.getProjectRoot().fullPath));

src/extensionsIntegrated/Phoenix-live-preview/markdown.html

@@ -70,6 +70,20 @@
                 return absoluteUrl.href;
             }
             document.addEventListener('click', function(event) {
+                // Get the user's current selection
+                const selection = window.getSelection();
+
+                // Check if there is a selection
+                if (selection.toString().length === 0) {
+                    // there may be selection like text or others Eg: user may select some text
+                    // in live preview to copy, in which case we should not treat it as a live select.
+                    // if there is no selection, then we have set the focus to the editor
+                    window.parent.postMessage({
+                        handlerName: "ph-liveServer",
+                        eventName: 'embeddedIframeFocusEditor',
+                        href: location.href
+                    }, "{{{PARENT_ORIGIN}}}");
+                }
                 // in desktop phoenix builds, tauri will not open anchor tags in browser if it is in
                 // an iframe(except for the intel mac bug)
                 // in normal browsers, we dont need to do this.