Merge branch 'dev' of github.com:estruyf/vscode-front-matter into dev

src/commands/Dashboard.ts

@@ -121,7 +121,8 @@ export class Dashboard {
       ViewColumn.One,
       {
         enableScripts: true,
-        retainContextWhenHidden: true
+        retainContextWhenHidden: true,
+        enableCommandUris: true
       }
     );
 

src/dashboardWebView/components/App.tsx

@@ -14,7 +14,7 @@ import { Messenger } from '@estruyf/vscode/dist/client';
 import { TaxonomyView } from './TaxonomyView';
 import { Route, Routes, useNavigate } from 'react-router-dom';
 import { routePaths } from '..';
-import { useEffect, useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { UnknownView } from './UnknownView';
 import { ErrorBoundary } from '@sentry/react';
 import { ErrorView } from './ErrorView';
@@ -30,6 +30,7 @@ export const App: React.FunctionComponent<IAppProps> = ({
   const { loading, pages, settings } = useMessages();
   const view = useRecoilValue(DashboardViewSelector);
   const mode = useRecoilValue(ModeAtom);
+  const [isDevMode, setIsDevMode] = useState(false);
   const navigate = useNavigate();
   useDarkMode();
 
@@ -60,6 +61,12 @@ export const App: React.FunctionComponent<IAppProps> = ({
     navigate(routePaths[view]);
   }, [view]);
 
+  useEffect(() => {
+    if (window.fmExternal && window.fmExternal.isDevelopment) {
+      setIsDevMode(true);
+    }
+  }, []);
+
   if (!settings) {
     return <Spinner />;
   }
@@ -86,6 +93,27 @@ Stack: ${componentStack}`
       }}
     >
       <main className={`h-full w-full`}>
+        {
+          isDevMode && (
+            <div className="relative p-2 flex justify-center items-center bg-[var(--vscode-statusBar-debuggingBackground)] text-[var(--vscode-statusBar-debuggingForeground)]">
+              <span className='absolute left-2'>Development mode</span>
+
+              <a
+                className="ml-2 px-2 hover:text-[var(--vscode-statusBar-debuggingForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
+                href={`command:workbench.action.webview.reloadWebviewAction`}
+                title="Reload the dashboard">
+                Reload
+              </a>
+              <a
+                className="ml-2 px-2 hover:text-[var(--vscode-statusBar-debuggingForeground)] hover:bg-[var(--vscode-statusBarItem-hoverBackground)] hover:outline-none focus:outline-none"
+                href={`command:workbench.action.webview.openDeveloperTools`}
+                title="Open DevTools">
+                DevTools
+              </a>
+            </div>
+          )
+        }
+
         <Routes>
           <Route path={routePaths.welcome} element={<WelcomeScreen settings={settings} />} />
           <Route
@@ -104,6 +132,6 @@ Stack: ${componentStack}`
           <Route path={`*`} element={<UnknownView />} />
         </Routes>
       </main>
-    </ErrorBoundary>
+    </ErrorBoundary >
   );
 };

src/dashboardWebView/index.tsx

@@ -20,6 +20,7 @@ declare const acquireVsCodeApi: <T = unknown>() => {
 declare global {
   interface Window {
     fmExternal: {
+      isDevelopment: boolean;
       getCustomFields: {
         name: string,
         html: (data: any, change: (value: any) => void) => Promise<CustomPanelViewResult | undefined>

src/panelWebView/ViewPanel.tsx

@@ -13,12 +13,14 @@ import { FeatureFlag } from '../components/features/FeatureFlag';
 import { FEATURE_FLAG } from '../constants/Features';
 import { GitAction } from './components/Git/GitAction';
 import { CustomView } from './components/CustomView';
+import { useEffect, useState } from 'react';
 
 export interface IViewPanelProps { }
 
 export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
   { }: React.PropsWithChildren<IViewPanelProps>
 ) => {
+  const [isDevMode, setIsDevMode] = useState(false);
   const {
     loading,
     mediaSelecting,
@@ -30,6 +32,12 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
     mode
   } = useMessages();
 
+  useEffect(() => {
+    if (window.fmExternal && window.fmExternal.isDevelopment) {
+      setIsDevMode(true);
+    }
+  }, []);
+
   if (mediaSelecting) {
     return (
       <div className="frontmatter media_selection">
@@ -48,6 +56,25 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (
 
   return (
     <div className="frontmatter">
+      {
+        isDevMode && (
+          <div className="developer__bar">
+            <a
+              className="developer__bar__link"
+              href={`command:workbench.action.webview.reloadWebviewAction`}
+              title="Reload the dashboard">
+              Reload
+            </a>
+            <a
+              className="developer__bar__link"
+              href={`command:workbench.action.webview.openDeveloperTools`}
+              title="Open DevTools">
+              DevTools
+            </a>
+          </div>
+        )
+      }
+
       <div className={`ext_actions`}>
         <GitAction settings={settings} />
 

src/panelWebView/styles.css

@@ -1010,3 +1010,27 @@ vscode-divider {
 .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
   fill: var(--vscode-button-background) !important;
 }
+
+/* Extensibility Developer Bar */
+.developer__bar {
+  background: var(--vscode-statusBar-debuggingBackground);
+  position: relative;
+  padding: 5px 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  a {
+    color: var(--vscode-statusBar-debuggingForeground);
+    margin: 0 0.25em;
+    padding: 0 0.25em;
+    text-decoration: none;
+
+    &:hover,
+    &:focus {
+      color: var(--vscode-statusBar-debuggingForeground);
+      background: var(--vscode-statusBarItem-hoverBackground);
+      outline: none;
+    }
+  }
+}