From ab3988e253d2c69a37cef47f75acd18035536c27 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 4 Sep 2023 17:18:18 +0200
Subject: [PATCH] #647 - Fix open in browser

---
 CHANGELOG.md                                  |  1 +
 src/commands/Preview.ts                       | 24 +++++--
 .../components/Preview/Preview.tsx            | 64 +++++++++++--------
 3 files changed, 60 insertions(+), 29 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index daf9ced1..b68ef32e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@
 ### 🐞 Fixes
 
 - [#646](https://github.com/estruyf/vscode-front-matter/issues/646): Update the Astro `3000` port to `4321`
+- [#647](https://github.com/estruyf/vscode-front-matter/issues/647): Fix the open in browser action on the preview
 
 ## [9.1.0] - 2023-08-31
 
diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts
index 59053fa7..1016e46f 100644
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -8,7 +8,8 @@ import {
   TelemetryEvent,
   PreviewCommands,
   SETTING_EXPERIMENTAL,
-  SETTING_DATE_FORMAT
+  SETTING_DATE_FORMAT,
+  GeneralCommands
 } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join, parse } from 'path';
@@ -23,6 +24,7 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { Folders } from './Folders';
 import { DataListener } from '../listeners/panel';
 import { ParsedFrontMatter } from '../parsers';
+import { getLocalizationFile } from '../utils/getLocalizationFile';
 
 export class Preview {
   public static filePath: string | undefined = undefined;
@@ -103,13 +105,27 @@ export class Preview {
       }
     });
 
-    webView.webview.onDidReceiveMessage((message) => {
+    webView.webview.onDidReceiveMessage(async (message) => {
       switch (message.command) {
         case PreviewCommands.toVSCode.open:
-          if (message.data) {
-            commands.executeCommand('vscode.open', message.data);
+          if (message.payload) {
+            commands.executeCommand('vscode.open', message.payload);
           }
           return;
+        case GeneralCommands.toVSCode.getLocalization:
+          const { requestId } = message;
+          if (!requestId) {
+            return;
+          }
+
+          const fileContents = await getLocalizationFile();
+
+          webView.webview.postMessage({
+            command: GeneralCommands.toVSCode.getLocalization,
+            requestId,
+            payload: fileContents
+          });
+          return;
       }
     });
 
diff --git a/src/dashboardWebView/components/Preview/Preview.tsx b/src/dashboardWebView/components/Preview/Preview.tsx
index 7805c08d..44451983 100644
--- a/src/dashboardWebView/components/Preview/Preview.tsx
+++ b/src/dashboardWebView/components/Preview/Preview.tsx
@@ -1,8 +1,8 @@
-import { Messenger } from '@estruyf/vscode/dist/client';
+import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
 import { ArrowRightIcon, ExternalLinkIcon, RefreshIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
-import { PreviewCommands } from '../../../constants';
+import { GeneralCommands, PreviewCommands } from '../../../constants';
 import useThemeColors from '../../hooks/useThemeColors';
 import { EventData } from '@estruyf/vscode/dist/models';
 import * as l10n from '@vscode/l10n';
@@ -18,6 +18,7 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [crntUrl, setCrntUrl] = useState<string | null>(null);
   const { getColors } = useThemeColors();
+  const [localeReady, setLocaleReady] = useState<boolean>(false);
 
   const onRefresh = () => {
     if (iframeRef.current?.src) {
@@ -51,6 +52,15 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
   useEffect(() => {
     Messenger.listen(msgListener);
 
+    messageHandler.request<any>(GeneralCommands.toVSCode.getLocalization).then((data) => {
+      if (data) {
+        l10n.config({
+          contents: data
+        });
+      }
+      setLocaleReady(true);
+    });
+
     return () => {
       Messenger.unlisten(msgListener);
     };
@@ -74,31 +84,35 @@ export const Preview: React.FunctionComponent<IPreviewProps> = ({
           className="w-full m-[1px] h-full border-1 border-transparent text-xs py-1 px-2 focus:border-color-blue-500 bg-[var(--vscode-tab-activeBackground)] text-[var(--vscode-tab-inactiveForeground)] hover:text-[var(--vscode-tab-activeForeground)] focus:text-[var(--vscode-tab-activeForeground)] placeholder-[var(--vscode-input-placeholderForeground)] focus:outline-[var(--vscode-focusBorder)] focus:outline-1 focus:outline-offset-0 focus:shadow-none focus:border-[var(--vscode-focusBorder)"
         />
 
-        <div
-          className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
-            }`}
-        >
-          <button
-            title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
-            onClick={navigateToUrl}
-            className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
-            <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
-          </button>
+        {
+          localeReady && (
+            <div
+              className={`actions flex items-center space-x-2 px-2 ${getColors('text-vulcan-500 dark:text-whisper-100', 'text-[var(--vscode-list-activeSelectionForeground)]')
+                }`}
+            >
+              <button
+                title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
+                onClick={navigateToUrl}
+                className={getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}>
+                <ArrowRightIcon className="w-4 h-4" aria-hidden="true" />
+              </button>
 
-          <button
-            title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
-            onClick={onRefresh}
-            className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
-            <RefreshIcon className="w-4 h-4" aria-hidden="true" />
-          </button>
+              <button
+                title={l10n.t(LocalizationKey.dashboardPreviewButtonRefreshTitle)}
+                onClick={onRefresh}
+                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                <RefreshIcon className="w-4 h-4" aria-hidden="true" />
+              </button>
 
-          <button
-            title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
-            onClick={openInBrowser}
-            className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
-            <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
-          </button>
-        </div>
+              <button
+                title={l10n.t(LocalizationKey.dashboardPreviewButtonOpenTitle)}
+                onClick={openInBrowser}
+                className={`mr-2 ${getColors(`hover:text-vulcan-500 dark:hover:text-whisper-100`, `hover:text-[var(--vscode-textLink-activeForeground)]`)}`}>
+                <ExternalLinkIcon className="w-4 h-4" aria-hidden="true" />
+              </button>
+            </div>
+          )
+        }
       </div>
 
       <iframe