#374 - Auto-fold the front matter section

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - [#370](https://github.com/estruyf/vscode-front-matter/issues/370): Define the tags and categories as reserved keywords for custom taxonomy
 - [#372](https://github.com/estruyf/vscode-front-matter/issues/372): Rename Taxonomy tab to Taxonomies
+- [#374](https://github.com/estruyf/vscode-front-matter/issues/374): Hide the front matter section to use the panel instead
 
 ### ⚡️ Optimizations
 

package.json

@@ -167,6 +167,17 @@
           "markdownDescription": "Specify if you want to highlight the Front Matter in the Markdown file. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.fmhighlight)",
           "scope": "Content"
         },
+        "frontMatter.content.hideFm": {
+          "type": "boolean",
+          "markdownDescription": "Specify if you want to hide the Front Matter in the Markdown file. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.hidefrontmatter)",
+          "scope": "Content"
+        },
+        "frontMatter.content.hideFmMessage": {
+          "type": "string",
+          "default": "Use the editor panel to make front matter changes",
+          "markdownDescription": "Specify the message to display when the Front Matter is hidden. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.hidefrontmatter.message)",
+          "scope": "Content"
+        },
         "frontMatter.content.pageFolders": {
           "type": "array",
           "default": [],
@@ -1323,6 +1334,12 @@
           "default": false,
           "markdownDescription": "Specify if you want to disable the telemetry. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.telemetry.disable)"
         },
+        "frontMatter.templates.enabled": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Specify if you want to use templates. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.enabled)",
+          "scope": "Templates"
+        },
         "frontMatter.templates.folder": {
           "type": "string",
           "default": ".frontmatter/templates",
@@ -1334,12 +1351,6 @@
           "default": "yyyy-MM-dd",
           "markdownDescription": "Specify the prefix you want to add for your new article filenames. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.prefix)",
           "scope": "Templates"
-        },
-        "frontMatter.templates.enabled": {
-          "type": "boolean",
-          "default": false,
-          "markdownDescription": "Specify if you want to use templates. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.enabled)",
-          "scope": "Templates"
         }
       }
     },
@@ -2049,4 +2060,4 @@
   "dependencies": {
     "node-fetch": "^2.6.7"
   }
-}
+}

src/constants/settings.ts

@@ -59,6 +59,9 @@ export const SETTING_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
 export const SETTING_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType";
 export const SETTING_CONTENT_SUPPORTED_FILETYPES = "content.supportedFileTypes";
 
+export const SETTING_CONTENT_HIDE_FRONTMATTER = "content.hideFm";
+export const SETTING_CONTENT_HIDE_FRONTMATTER_MESSAGE = "content.hideFmMessage";
+
 export const SETTING_MEDIA_SUPPORTED_MIMETYPES = "media.supportedMimeTypes";
 
 export const SETTING_DASHBOARD_OPENONSTART = "dashboard.openOnStart";

src/extension.ts

@@ -205,7 +205,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
 		SettingsListener.getSettings();
 		DataListener.getFoldersAndFiles();	
-		MarkdownFoldingProvider.triggerHighlighting();
+		MarkdownFoldingProvider.triggerHighlighting(true);
 		ModeSwitch.register();
 	});
 

src/helpers/Extension.ts

@@ -260,6 +260,10 @@ export class Extension {
     return true;
   }
 
+  public asAbsolutePath(path: string) {
+    return this.ctx.asAbsolutePath(path);
+  }
+
   public get packageJson() {
     const frontMatter = extensions.getExtension(this.isBetaVersion() ? EXTENSION_BETA_ID : EXTENSION_ID)!;
     return frontMatter.packageJSON;

src/providers/MarkdownFoldingProvider.ts

@@ -1,5 +1,7 @@
+import { SETTING_CONTENT_HIDE_FRONTMATTER, SETTING_CONTENT_HIDE_FRONTMATTER_MESSAGE } from './../constants/settings';
+import { ThemeColor } from 'vscode';
 import { ArticleHelper } from '../helpers';
-import { languages, TextEditorDecorationType } from 'vscode';
+import { commands, DecorationOptions, languages, TextEditorDecorationType } from 'vscode';
 import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, Position } from 'vscode';
 import { SETTING_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_CONTENT_SUPPORTED_FILETYPES, SETTING_FRONTMATTER_TYPE } from '../constants';
 import { Settings } from '../helpers';
@@ -11,6 +13,7 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
   private static end: number | null = null;
   private static endLine: number | null = null;
   private static decType: TextEditorDecorationType | null = null;
+  private static crntDecoration: TextEditorDecorationType | null = null;
 
   public static register() {
     const supportedFiles = Settings.get<string[]>(SETTING_CONTENT_SUPPORTED_FILETYPES);
@@ -37,15 +40,19 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
     return ranges;
   }
 
-  public static triggerHighlighting() {
+  public static triggerHighlighting(configChange: boolean = false) {
     const activeDoc = window.activeTextEditor?.document;
 
+    if (configChange && this.crntDecoration) {
+      this.resetDecoration();
+    }
+
     const isSupported = ArticleHelper.isSupportedFile(activeDoc);
     if (isSupported) {
       const fmHighlight = Settings.get<boolean>(SETTING_CONTENT_FRONTMATTER_HIGHLIGHT);
 
       const range = MarkdownFoldingProvider.getFrontMatterRange();
-
+      
       if (range) {
         if (MarkdownFoldingProvider.decType !== null) {
           MarkdownFoldingProvider.decType.dispose();
@@ -56,6 +63,11 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
           window.activeTextEditor?.setDecorations(MarkdownFoldingProvider.decType, [range]);
         }
       }
+
+      const hideFrontMatter = Settings.get<boolean>(SETTING_CONTENT_HIDE_FRONTMATTER);
+      if (hideFrontMatter) {
+        this.hideFrontMatterFromDocument(range);
+      }
     }
   }
 
@@ -119,4 +131,75 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
 
     return null;
   }
+
+  /**
+   * Hide the front matter on the page
+   * @param range 
+   * @returns 
+   */
+  private static hideFrontMatterFromDocument = async (range: Range| null) => {
+  
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+  
+    const decorators: DecorationOptions[] = [];
+    
+    if (range) {
+      decorators.push({
+        range: range
+      });
+    }
+
+    if (!this.crntDecoration) {
+      this.crntDecoration = this.getHiddenDecoration();
+    }
+
+    editor.setDecorations(
+      this.crntDecoration,
+      decorators
+    );
+  
+    commands.executeCommand('editor.fold', {selectionLines: [range?.start.line],direction: "up"});
+  }
+
+  /**
+   * Resets the decoration in the document
+   * @returns 
+   */
+  private static resetDecoration() {
+    if (!this.crntDecoration) {
+      return;
+    }
+
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    editor.setDecorations(
+      this.crntDecoration,
+      []
+    );
+
+    this.crntDecoration = null;
+  }
+
+  /**
+   * Retrieve the hidden decoration for the text to hide
+   * @returns 
+   */
+  private static getHiddenDecoration(): TextEditorDecorationType {
+    const contentText = Settings.get<string>(SETTING_CONTENT_HIDE_FRONTMATTER_MESSAGE);
+
+    return window.createTextEditorDecorationType({
+      after: {
+        contentText,
+        fontStyle: 'italic',
+        color: new ThemeColor('editorInfo.foreground'),
+      },
+      textDecoration: "none; display: none;"
+    });
+  }
 }