Panel aware media selection

assets/media/styles.css

@@ -50,6 +50,15 @@
   height: 100%;
 }
 
+.frontmatter.media_selection {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0.8;
+  text-align: center;
+	padding: 1rem 1.25rem;
+}
+
 .spinner,
 .spinner:before,
 .spinner:after {

src/commands/Dashboard.ts

@@ -6,23 +6,23 @@ import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, en
 import { SettingsHelper } from '../helpers';
 import { TaxonomyType } from '../models';
 import { Folders } from './Folders';
-import { DashboardCommand } from '../pagesView/DashboardCommand';
-import { DashboardMessage } from '../pagesView/DashboardMessage';
-import { Page } from '../pagesView/models/Page';
+import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
+import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
+import { Page } from '../dashboardWebView/models/Page';
 import { openFileInEditor } from '../helpers/openFileInEditor';
 import { COMMAND_NAME, EXTENSION_STATE_PAGES_VIEW } from '../constants/Extension';
 import { Template } from './Template';
 import { Notifications } from '../helpers/Notifications';
-import { Settings } from '../pagesView/models/Settings';
+import { Settings } from '../dashboardWebView/models/Settings';
 import { Extension } from '../helpers/Extension';
 import { parseJSON } from 'date-fns';
-import { ViewType } from '../pagesView/state';
+import { ViewType } from '../dashboardWebView/state';
 import { EditorHelper, WebviewHelper } from '@estruyf/vscode';
 import { MediaInfo, MediaPaths } from './../models/MediaPaths';
 import { decodeBase64Image } from '../helpers/decodeBase64Image';
 import { DefaultFields } from '../constants';
 import { DashboardData } from '../models/DashboardData';
-import { ExplorerView } from '../webview/ExplorerView';
+import { ExplorerView } from '../explorerView/ExplorerView';
 
 
 export class Dashboard {
@@ -30,7 +30,11 @@ export class Dashboard {
   private static isDisposed: boolean = true;
   private static media: MediaInfo[] = [];
   private static timers: { [folder: string]: any } = {};
-  private static viewData: DashboardData | undefined;
+  private static _viewData: DashboardData | undefined;
+
+  public static get viewData(): DashboardData | undefined {
+    return Dashboard._viewData;
+  }
 
   /** 
    * Init the dashboard
@@ -47,7 +51,7 @@ export class Dashboard {
    * Open or reveal the dashboard
    */
   public static async open(data?: DashboardData) {
-    Dashboard.viewData = data;
+    Dashboard._viewData = data;
 
     if (Dashboard.isOpen) {
 			Dashboard.reveal();
@@ -99,7 +103,9 @@ export class Dashboard {
 
     Dashboard.webview.onDidChangeViewState(() => {
       if (!this.webview?.visible) {
-        Dashboard.viewData = undefined;
+        Dashboard._viewData = undefined;
+        const panel = ExplorerView.getInstance(extensionUri);
+        panel.getMediaSelection();
       }
     });
 
@@ -114,8 +120,8 @@ export class Dashboard {
     Dashboard.webview.webview.onDidReceiveMessage(async (msg) => {
       switch(msg.command) {
         case DashboardMessage.getViewType:
-          if (Dashboard.viewData) {
-            Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: Dashboard.viewData });
+          if (Dashboard._viewData) {
+            Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: Dashboard._viewData });
           }
           break;
         case DashboardMessage.getData:
@@ -165,7 +171,10 @@ export class Dashboard {
           if (msg.data?.file && msg.data?.image) {
             await commands.executeCommand(`workbench.view.extension.frontmatter-explorer`);
             await EditorHelper.showFile(msg.data.file);
-            ExplorerView.getInstance(extensionUri).updateMetadata({field: msg.data.fieldName, value: msg.data.image});
+            Dashboard._viewData = undefined;
+            const panel = ExplorerView.getInstance(extensionUri);
+            panel.getMediaSelection();
+            panel.updateMetadata({field: msg.data.fieldName, value: msg.data.image});
           }
           break;
       }

src/commands/StatusListener.ts

@@ -1,7 +1,7 @@
 import { SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH } from './../constants/settings';
 import * as vscode from 'vscode';
 import { ArticleHelper, SeoHelper, SettingsHelper } from '../helpers';
-import { ExplorerView } from '../webview/ExplorerView';
+import { ExplorerView } from '../explorerView/ExplorerView';
 import { DefaultFields } from '../constants';
 
 export class StatusListener {

src/dashboardWebView/components/Contents/Item.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import { MarkdownIcon } from '../../../viewpanel/components/Icons/MarkdownIcon';
+import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
 import { ViewSelector, ViewType } from '../../state';

src/dashboardWebView/components/Contents/Overview.tsx

@@ -3,7 +3,7 @@ import { ChevronRightIcon } from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';
-import { FrontMatterIcon } from '../../../viewpanel/components/Icons/FrontMatterIcon';
+import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { GroupOption } from '../../constants/GroupOption';
 import { Page } from '../../models/Page';
 import { Settings } from '../../models/Settings';

src/dashboardWebView/components/Header/Header.tsx

@@ -14,7 +14,7 @@ import { useRecoilState } from 'recoil';
 import { CategoryAtom, DashboardViewAtom, TagAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
-import { MarkdownIcon } from '../../../viewpanel/components/Icons/MarkdownIcon';
+import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { PhotographIcon } from '@heroicons/react/outline';
 import { Pagination } from '../Media/Pagination';
 

src/dashboardWebView/components/WelcomeScreen.tsx

@@ -2,8 +2,8 @@ import { HeartIcon, StarIcon } from '@heroicons/react/outline';
 import * as React from 'react';
 import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants/Links';
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { FrontMatterIcon } from '../../viewpanel/components/Icons/FrontMatterIcon';
-import { GitHubIcon } from '../../viewpanel/components/Icons/GitHubIcon';
+import { FrontMatterIcon } from '../../panelWebView/components/Icons/FrontMatterIcon';
+import { GitHubIcon } from '../../panelWebView/components/Icons/GitHubIcon';
 import { DashboardMessage } from '../DashboardMessage';
 import { Settings } from '../models/Settings';
 import { StepsToGetStarted } from './Steps/StepsToGetStarted';

src/dashboardWebView/models/Settings.ts

@@ -1,6 +1,6 @@
 import { VersionInfo } from '../../models/VersionInfo';
 import { ViewType } from '../state';
-import { ContentFolder } from './../../models/ContentFolder';
+import { ContentFolder } from '../../models/ContentFolder';
 
 export interface Settings { 
   beta: boolean;

src/explorerView/ExplorerView.ts

@@ -1,15 +1,14 @@
-import { DashboardData } from './../models/DashboardData';
-import { Template } from './../commands/Template';
-import { SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_PREVIEW_HOST, SETTING_DATE_FORMAT, SETTING_DATE_FIELD, SETTING_MODIFIED_FIELD, SETTING_COMMA_SEPARATED_FIELDS, SETTINGS_CONTENT_STATIC_FOLDERS, SETTING_TAXONOMY_CONTENT_TYPES } from './../constants/settings';
+import { DashboardData } from '../models/DashboardData';
+import { Template } from '../commands/Template';
+import { DefaultFields, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_PREVIEW_HOST, SETTING_DATE_FORMAT, SETTING_COMMA_SEPARATED_FIELDS, SETTINGS_CONTENT_STATIC_FOLDERS, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_PANEL_FREEFORM, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS } from '../constants';
 import * as os from 'os';
-import { PanelSettings, CustomScript } from './../models/PanelSettings';
+import { PanelSettings, CustomScript } from '../models/PanelSettings';
 import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode";
-import { DefaultFields, SETTING_PANEL_FREEFORM, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS } from "../constants";
 import { ArticleHelper, SettingsHelper } from "../helpers";
-import { Command } from "../viewpanel/Command";
-import { CommandToCode } from '../viewpanel/CommandToCode';
+import { Command } from "../panelWebView/Command";
+import { CommandToCode } from '../panelWebView/CommandToCode';
 import { Article } from '../commands';
-import { TagType } from '../viewpanel/TagType';
+import { TagType } from '../panelWebView/TagType';
 import { TaxonomyType } from '../models';
 import { exec } from 'child_process';
 import * as path from 'path';
@@ -24,6 +23,7 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { Extension } from '../helpers/Extension';
 import { dirname, join } from 'path';
 import { existsSync } from 'fs';
+import { Dashboard } from '../commands/Dashboard';
 
 const FILE_LIMIT = 10;
 
@@ -182,10 +182,11 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
           this.updateMetadata(msg.data);
           break;
         case CommandToCode.selectImage:
-          await commands.executeCommand(`frontMatter.dashboard`, {
+          await commands.executeCommand(COMMAND_NAME.dashboard, {
             type: "media",
             data: msg.data
           } as DashboardData);
+          this.getMediaSelection();
           break;
       }
     });
@@ -246,22 +247,24 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
       if (contentType) {
         const imageFields = contentType.fields.filter((field) => field.type === "image");
         for (const field of imageFields) {
-          const staticPath = join(wsFolder.fsPath, staticFolder || "", updatedMetadata[field.name]);
-          const contentFolderPath = filePath ? join(dirname(filePath), updatedMetadata[field.name]) : null;
+          if (updatedMetadata[field.name]) {
+            const staticPath = join(wsFolder.fsPath, staticFolder || "", updatedMetadata[field.name]);
+            const contentFolderPath = filePath ? join(dirname(filePath), updatedMetadata[field.name]) : null;
 
-          let previewUri = null;
-          if (existsSync(staticPath)) {
-            previewUri = Uri.file(staticPath);
-          } else if (contentFolderPath && existsSync(contentFolderPath)) {
-            previewUri = Uri.file(contentFolderPath);
-          }
+            let previewUri = null;
+            if (existsSync(staticPath)) {
+              previewUri = Uri.file(staticPath);
+            } else if (contentFolderPath && existsSync(contentFolderPath)) {
+              previewUri = Uri.file(contentFolderPath);
+            }
 
-          if (previewUri) {
-            const preview = this.panel?.webview.asWebviewUri(previewUri);
-            updatedMetadata[field.name]= preview?.toString() || "";
-          } else {
-            updatedMetadata[field.name] = "";
-          }
+            if (previewUri) {
+              const preview = this.panel?.webview.asWebviewUri(previewUri);
+              updatedMetadata[field.name]= preview?.toString() || "";
+            } else {
+              updatedMetadata[field.name] = "";
+            }
+          }          
         }
       }
     }
@@ -365,6 +368,16 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     }
   }
 
+  /**
+   * Return the media selection
+   */
+  public async getMediaSelection() {
+    this.postWebviewMessage({
+      command: Command.mediaSelectionData,
+      data: Dashboard.viewData
+    });
+  }
+
   /**
    * Retrieve the extension settings
    */
@@ -399,6 +412,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         preview: Preview.getSettings(),
         commaSeparatedFields: config.get(SETTING_COMMA_SEPARATED_FIELDS) || [],
         contentTypes: config.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
+        dashboardViewData: Dashboard.viewData
       } as PanelSettings
     });
   }

src/extension.ts

@@ -8,8 +8,8 @@ import { Template } from './commands/Template';
 import { COMMAND_NAME } from './constants/Extension';
 import { TaxonomyType } from './models';
 import { MarkdownFoldingProvider } from './providers/MarkdownFoldingProvider';
-import { TagType } from './viewpanel/TagType';
-import { ExplorerView } from './webview/ExplorerView';
+import { TagType } from './panelWebView/TagType';
+import { ExplorerView } from './explorerView/ExplorerView';
 import { Extension } from './helpers/Extension';
 import { DashboardData } from './models/DashboardData';
 

src/helpers/Extension.ts

@@ -89,6 +89,7 @@ export class Extension {
     const contentTypes = config.get<ContentType[]>(SETTING_TAXONOMY_CONTENT_TYPES);
 
     if (contentTypes) {
+      let needsUpdate = false;
       let defaultContentType = contentTypes.find(ct => ct.name === DEFAULT_CONTENT_TYPE_NAME);
 
       if (defaultContentType) {
@@ -98,6 +99,7 @@ export class Extension {
             name: dateField,
             type: "datetime"
           });
+          needsUpdate = true;
         }
   
         if (lastModField && lastModField !== "lastmod") {
@@ -106,6 +108,7 @@ export class Extension {
             name: lastModField,
             type: "datetime"
           });
+          needsUpdate = true;
         }
   
         if (description && description !== "description") {
@@ -114,9 +117,12 @@ export class Extension {
             name: description,
             type: "string"
           });
+          needsUpdate = true;
         }
   
-        await config.update(SETTING_TAXONOMY_CONTENT_TYPES, contentTypes);
+        if (needsUpdate) {
+          await config.update(SETTING_TAXONOMY_CONTENT_TYPES, contentTypes);
+        }
       }
     }
   }

src/helpers/MessageHelper.ts

@@ -1,5 +1,5 @@
-import { DashboardMessage } from './../pagesView/DashboardMessage';
-import { CommandToCode } from "../viewpanel/CommandToCode";
+import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
+import { CommandToCode } from "../panelWebView/CommandToCode";
 
 
 interface ClientVsCode<T> {

src/models/PanelSettings.ts

@@ -1,4 +1,5 @@
 import { FileType } from "vscode";
+import { DashboardData } from "./DashboardData";
 
 export interface PanelSettings {
   seo: SEO;
@@ -14,6 +15,7 @@ export interface PanelSettings {
   fmHighlighting: boolean;
   preview: PreviewSettings;
   contentTypes: ContentType[];
+  dashboardViewData: DashboardData | undefined;
 }
 
 export interface ContentType {

src/panelWebView/Command.ts

@@ -6,4 +6,5 @@ export enum Command {
   focusOnCategories = "focusOnCategories",
   closeSections = "closeSections",
   folderInfo = "folderInfo",
+  mediaSelectionData = "mediaSelectionData"
 }

src/panelWebView/ViewPanel.tsx

@@ -14,7 +14,15 @@ export interface IViewPanelProps {
 }
 
 export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React.PropsWithChildren<IViewPanelProps>) => {
-  const { loading, metadata, settings, folderAndFiles, focusElm, unsetFocus } = useMessages();
+  const { loading, mediaSelecting, metadata, settings, folderAndFiles, focusElm, unsetFocus } = useMessages();
+
+  if (mediaSelecting) {
+    return (
+      <div className="frontmatter media_selection">
+        <h1>Continue in the media dashboard to select the image you want to insert.</h1>
+      </div>
+    );
+  }
 
   if (loading) {
     return (