Enhancement: auto switch to editor panel when opening a markdown file #915

CHANGELOG.md

@@ -6,6 +6,8 @@
 
 ### 🎨 Enhancements
 
+- [#915](https://github.com/estruyf/vscode-front-matter/issues/915): Added a new setting `frontMatter.panel.openOnSupportedFile` which allows you to open the panel view on supported files
+
 ### ⚡️ Optimizations
 
 ### 🐞 Fixes

l10n/bundle.l10n.json

@@ -56,6 +56,8 @@
   "settings.view.integration": "Integration",
 
   "settings.openOnStartup": "Open dashboard on startup",
+  "settings.openPanelForSupportedFiles": "Open panel for supported files",
+  "settings.openPanelForSupportedFiles.label": "Do you want to open the panel for supported files?",
   "settings.contentTypes": "Content types",
   "settings.contentFolders": "Content folders",
   "settings.diagnostic": "Diagnostic",
@@ -799,7 +801,6 @@
   "listeners.panel.dataListener.createDataFile.error": "No data file id or path defined.",
   "listeners.panel.dataListener.createDataFile.noFileName": "No filename provided.",
 
-
   "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noEditor.error": "No active editor",
   "listeners.panel.taxonomyListener.aiSuggestTaxonomy.noData.error": "No article data",
 

package.json

@@ -1214,6 +1214,12 @@
           },
           "scope": "Media"
         },
+        "frontMatter.panel.openOnSupportedFile": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "%setting.frontMatter.panel.openOnSupportedFile.markdownDescription%",
+          "scope": "Dashboard"
+        },
         "frontMatter.panel.freeform": {
           "type": "boolean",
           "default": true,

package.nls.json

@@ -184,6 +184,7 @@
   "setting.frontMatter.media.contentTypes.items.properties.fields.properties.type.description": "Define the type of field",
   "setting.frontMatter.media.contentTypes.items.properties.fields.properties.single.description": "Is a single line field",
 
+  "setting.frontMatter.panel.openOnSupportedFile.markdownDescription": "Specifies if you want to open the panel when opening a supported file. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.openonsupportedfile) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.panel.openonsupportedfile%22%5D)",
   "setting.frontMatter.panel.freeform.markdownDescription": "Specifies if you want to allow yourself from entering unknown tags/categories in the tag picker (when enabled, you will have the option to store them afterwards). Default: true. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.freeform) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.panel.freeform%22%5D)",
   "setting.frontMatter.panel.actions.disabled.markdownDescription": "Specify the actions you want to disable in the panel. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.panel.actions.disabled) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.panel.actions.disabled%22%5D)",
   "setting.frontMatter.preview.host.markdownDescription": "Specify the host URL (example: http://localhost:1313) to be used when opening the preview. [Docs](https://frontmatter.codes/docs/settings/overview#frontmatter.preview.host) - [View in VS Code](command:simpleBrowser.show?%5B%22https://frontmatter.codes/docs/settings/overview%23frontmatter.preview.host%22%5D)",

src/constants/settings.ts

@@ -46,6 +46,7 @@ export const SETTING_TEMPLATES_FOLDER = 'templates.folder';
 export const SETTING_TEMPLATES_PREFIX = 'templates.prefix';
 export const SETTING_TEMPLATES_ENABLED = 'templates.enabled';
 
+export const SETTING_PANEL_OPEN_ON_SUPPORTED_FILE = 'panel.openOnSupportedFile';
 export const SETTING_PANEL_FREEFORM = 'panel.freeform';
 export const SETTING_PANEL_ACTIONS_DISABLED = 'panel.actions.disabled';
 

src/dashboardWebView/components/Header/BooleanOption.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
+
+export interface IBooleanOptionProps {
+  value: boolean | undefined | null;
+  name: string;
+  label: string;
+}
+
+export const BooleanOption: React.FunctionComponent<IBooleanOptionProps> = ({
+  value,
+  name,
+  label
+}: React.PropsWithChildren<IBooleanOptionProps>) => {
+  const [isChecked, setIsChecked] = React.useState(false);
+
+  const onChange = React.useCallback((newValue: boolean) => {
+    setIsChecked(newValue);
+    Messenger.send(DashboardMessage.updateSetting, {
+      name: name,
+      value: newValue
+    });
+  }, [name]);
+
+  React.useEffect(() => {
+    setIsChecked(!!value);
+  }, [value]);
+
+  return (
+    <VSCodeCheckbox
+      onChange={onChange}
+      checked={isChecked}>
+      {label}
+    </VSCodeCheckbox>
+  );
+};

src/dashboardWebView/components/SettingsView/CommonSettings.tsx

@@ -6,11 +6,12 @@ import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
 import { SettingsInput } from './SettingsInput';
 import { Button as VSCodeButton } from 'vscrui';
-import { DOCS_SUBMODULES, FrameworkDetectors, GIT_CONFIG, SETTING_FRAMEWORK_START, SETTING_GIT_COMMIT_MSG, SETTING_GIT_ENABLED, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
+import { DOCS_SUBMODULES, FrameworkDetectors, GIT_CONFIG, SETTING_FRAMEWORK_START, SETTING_GIT_COMMIT_MSG, SETTING_GIT_ENABLED, SETTING_PANEL_OPEN_ON_SUPPORTED_FILE, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { SettingsCheckbox } from './SettingsCheckbox';
 import { ChevronRightIcon } from '@heroicons/react/24/outline';
+import { BooleanOption } from '../Header/BooleanOption';
 
 export interface ICommonSettingsProps { }
 
@@ -73,6 +74,15 @@ export const CommonSettings: React.FunctionComponent<ICommonSettingsProps> = (pr
         <Startup settings={settings} />
       </div>
 
+      <div className='py-4'>
+        <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsOpenPanelForSupportedFiles)}</h2>
+
+        <BooleanOption
+          label={l10n.t(LocalizationKey.settingsOpenPanelForSupportedFilesLabel)}
+          name={SETTING_PANEL_OPEN_ON_SUPPORTED_FILE}
+          value={settings?.openPanelForSupportedFiles} />
+      </div>
+
       <div className='py-4'>
         <h2 className='text-xl mb-2'>{l10n.t(LocalizationKey.settingsGit)}</h2>
 

src/dashboardWebView/models/Settings.ts

@@ -31,6 +31,7 @@ export interface Settings {
   categories: string[];
   customTaxonomy: CustomTaxonomy[];
   openOnStart: boolean | null;
+  openPanelForSupportedFiles: boolean | null;
   versionInfo: VersionInfo;
   pageViewType: DashboardViewType | undefined;
   contentTypes: ContentType[];

src/extension.ts

@@ -245,13 +245,14 @@ export async function activate(context: vscode.ExtensionContext) {
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 export function deactivate() {}
 
-const triggerPageUpdate = (location: string) => {
+const triggerPageUpdate = async (location: string) => {
   Logger.verbose(`Trigger page update: ${location}`);
   pageUpdateDebouncer(() => {
     StatusListener.verify(collection);
   }, 1000);
 
   if (location === 'onDidChangeActiveTextEditor') {
+    await PanelProvider.openOnSupportedFile();
     PanelProvider.getInstance()?.updateCurrentFile();
   }
 };

src/helpers/DashboardSettings.ts

@@ -31,7 +31,8 @@ import {
   SETTING_DASHBOARD_CONTENT_CARD_STATE,
   SETTING_DASHBOARD_CONTENT_CARD_DESCRIPTION,
   SETTING_WEBSITE_URL,
-  SETTING_MEDIA_CONTENTTYPES
+  SETTING_MEDIA_CONTENTTYPES,
+  SETTING_PANEL_OPEN_ON_SUPPORTED_FILE
 } from '../constants';
 import {
   DashboardViewType,
@@ -108,6 +109,7 @@ export class DashboardSettings {
         categories: (await TaxonomyHelper.get(TaxonomyType.Category)) || [],
         customTaxonomy: Settings.get(SETTING_TAXONOMY_CUSTOM, true) || [],
         openOnStart: Settings.get(SETTING_DASHBOARD_OPENONSTART),
+        openPanelForSupportedFiles: Settings.get(SETTING_PANEL_OPEN_ON_SUPPORTED_FILE),
         versionInfo: ext.getVersion(),
         pageViewType: await ext.getState<DashboardViewType | undefined>(
           ExtensionState.PagesView,
@@ -119,8 +121,7 @@ export class DashboardSettings {
         contentFolders: await Folders.get(),
         filters:
           Settings.get<(FilterType | { title: string; name: string })[]>(SETTING_CONTENT_FILTERS),
-        grouping:
-          Settings.get<{ title: string; name: string }[]>(SETTING_CONTENT_GROUPING),
+        grouping: Settings.get<{ title: string; name: string }[]>(SETTING_CONTENT_GROUPING),
         crntFramework: Settings.get<string>(SETTING_FRAMEWORK_ID),
         framework: !isInitialized && wsFolder ? await FrameworkDetector.get(wsFolder.fsPath) : null,
         scripts: Settings.get<CustomScript[]>(SETTING_CUSTOM_SCRIPTS) || [],

src/localization/localization.enum.ts

@@ -211,6 +211,14 @@ export enum LocalizationKey {
    * Open dashboard on startup
    */
   settingsOpenOnStartup = 'settings.openOnStartup',
+  /**
+   * Open panel for supported files
+   */
+  settingsOpenPanelForSupportedFiles = 'settings.openPanelForSupportedFiles',
+  /**
+   * Do you want to open the panel for supported files?
+   */
+  settingsOpenPanelForSupportedFilesLabel = 'settings.openPanelForSupportedFiles.label',
   /**
    * Content types
    */

src/panelWebView/PanelProvider.ts

@@ -9,9 +9,10 @@ import {
   FieldsListener,
   LocalizationListener
 } from './../listeners/panel';
-import { SETTING_EXPERIMENTAL } from '../constants';
+import { SETTING_EXPERIMENTAL, SETTING_PANEL_OPEN_ON_SUPPORTED_FILE } from '../constants';
 import {
   CancellationToken,
+  commands,
   Disposable,
   Uri,
   Webview,
@@ -136,6 +137,21 @@ export class PanelProvider implements WebviewViewProvider, Disposable {
     });
   }
 
+  /**
+   * Opens the panel if the active file is supported.
+   *
+   * @returns {Promise<void>} A promise that resolves when the command execution is complete.
+   */
+  public static async openOnSupportedFile(): Promise<void> {
+    const openPanel = Settings.get<boolean>(SETTING_PANEL_OPEN_ON_SUPPORTED_FILE);
+    if (openPanel) {
+      const activeFile = ArticleHelper.getActiveFile();
+      if (activeFile) {
+        await commands.executeCommand('frontMatter.explorer.focus');
+      }
+    }
+  }
+
   /**
    * Post data to the panel
    * @param msg