adam/vscode-front-matter
1
0
Fork 0
mirror of https://github.com/estruyf/vscode-front-matter.git synced 2026-08-07 01:13:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

#647 - Fix open in browser

Browse Source
This commit is contained in:
Elio Struyf
2023-09-04 17:18:18 +02:00
parent c6cfc02e5d
commit ab3988e253
3 changed files with 60 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
CHANGELOG.md
+1
View File
@@ -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
src/commands/Preview.ts
+20 -4
View File
@@ -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;
}
});
src/dashboardWebView/components/Preview/Preview.tsx
+39 -25
View File
@@ -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