fix: intel macs opens tabs twice on clicking markdown live preview a tags

Author: abose

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

@@ -435,6 +435,8 @@ define(function (require, exports, module) {
                         markdownContent: markdownHtml,
                         BOOTSTRAP_LIB_CSS: BootstrapCSSText,
                         HIGHLIGHT_JS_CSS: GithubCSSText,
+                        TRUSTED_ORIGINS_EMBED:
+                            `const TRUSTED_ORIGINS_EMBED = ${JSON.stringify(Phoenix.TRUSTED_ORIGINS)};`,
                         HIGHLIGHT_JS: HilightJSText,
                         GFM_CSS: GFMCSSText,
                         PARENT_ORIGIN: location.origin

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

@@ -306,6 +306,8 @@ define(function (require, exports, module) {
                         BOOTSTRAP_LIB_CSS: BootstrapCSSText,
                         HIGHLIGHT_JS_CSS: GithubCSSText,
                         HIGHLIGHT_JS: HilightJSText,
+                        TRUSTED_ORIGINS_EMBED:
+                            `const TRUSTED_ORIGINS_EMBED = ${JSON.stringify(Phoenix.TRUSTED_ORIGINS)};`,
                         GFM_CSS: GFMCSSText,
                         PARENT_ORIGIN: location.origin
                     };

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

@@ -66,6 +66,8 @@ define(function (require, exports, module) {
 
     const StaticServer = Phoenix.browser.isTauri? NodeStaticServer : BrowserStaticServer;
 
+    const EVENT_EMBEDDED_IFRAME_WHO_AM_I = 'whoAmIframePhoenix';
+
     const PREVIEW_TRUSTED_PROJECT_KEY = "preview_trusted";
     const PREVIEW_PROJECT_README_KEY = "preview_readme";
 
@@ -79,6 +81,24 @@ define(function (require, exports, module) {
     </iframe>
     `;
 
+    // jQuery objects
+    let $icon,
+        $iframe,
+        $panel,
+        $pinUrlBtn,
+        $highlightBtn,
+        $livePreviewPopBtn,
+        $reloadBtn;
+
+    StaticServer.on(EVENT_EMBEDDED_IFRAME_WHO_AM_I, function () {
+        if($iframe && $iframe[0]) {
+            const iframeDom = $iframe[0];
+            iframeDom.contentWindow.postMessage({
+                isTauri: Phoenix.browser.isTauri
+            }, "*"); // this is not sensitive info, and is only dispatched if requested by the iframe
+        }
+    });
+
     function _isLiveHighlightEnabled() {
         return CommandManager.get(Commands.FILE_LIVE_HIGHLIGHT).getChecked();
     }
@@ -183,16 +203,6 @@ define(function (require, exports, module) {
         return new StaticServer.StaticServer(config);
     }
 
-    // jQuery objects
-    let $icon,
-        $iframe,
-        $panel,
-        $pinUrlBtn,
-        $highlightBtn,
-        $livePreviewPopBtn,
-        $reloadBtn;
-
-
     // Templates
     ExtensionUtils.loadStyleSheet(module, "live-preview.css");
     // Other vars

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

@@ -17,6 +17,27 @@
     <style>
         {{{GFM_CSS}}}
     </style>
+    <script>
+        {{{TRUSTED_ORIGINS_EMBED}}}
+        // this is for managing who am i context in iframes embedded in phoenix to have special handling.
+        window.addEventListener('message', function(event) {
+            if (!TRUSTED_ORIGINS_EMBED[event.origin]) {
+                return; // Ignore messages from unexpected origins
+            }
+
+            window.__PHOENIX_EMBED_INFO = {
+                isTauri: event.data.isTauri
+            };
+        });
+        if(window.self !== window.parent){
+            // in an iframe
+            window.parent.postMessage({
+                handlerName: "ph-liveServer",
+                eventName: 'whoAmIframePhoenix',
+                href: location.href
+            }, "{{{PARENT_ORIGIN}}}");
+        }
+    </script>
     <script type="text/javascript">
         function inIframe () {
             try {
@@ -31,7 +52,10 @@
             // It will confuse the use seeing the browser save dialog inside phoenix.
             document.savePageCtrlSDisabledByPhoenix = true;
             document.addEventListener("keydown", function(e) {
-                if (e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+                if (window.__PHOENIX_EMBED_INFO &&
+                    e.key === 's' && (navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey)) {
+                    // we only do this in iframes embedded directly inside phoenix, in popped out iframes
+                    // we don't need to capture anything.
                     e.preventDefault();
                 }
             }, false);
@@ -46,13 +70,19 @@
                 return absoluteUrl.href;
             }
             document.addEventListener('click', function(event) {
-                if (event.target.tagName === 'A' && (event.target.target === '_blank')) {
-                    const href = getAbsoluteUrl(event.target.getAttribute('href'));
-                    window.parent.postMessage({
-                        handlerName: "ph-liveServer",
-                        eventName: 'embeddedIframeHrefClick',
-                        href: 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.
+                if (window.__PHOENIX_EMBED_INFO && window.__PHOENIX_EMBED_INFO.isTauri &&
+                    event.target.tagName === 'A' && (event.target.target === '_blank')) {
+                        const href = getAbsoluteUrl(event.target.getAttribute('href'));
+                        window.parent.postMessage({
+                            handlerName: "ph-liveServer",
+                            eventName: 'embeddedIframeHrefClick',
+                            href: href
+                        }, "{{{PARENT_ORIGIN}}}");
+                        event.preventDefault(); // in intel mac desktop, tauri seems to open in browser
+                        // causing 2 tabs to open. in m1 macs its not there. so we prevent default behavior.
                 }
             });
         }