Update highlighting + documentation

README.md

@@ -35,6 +35,7 @@ In version v2.0.0 we released the newly redesigned sidebar panel with improved S
 <details open="open">
   <summary>Table of Contents</summary>
   <ol>
+    <li><a href="#markdown-features">Markdown features</a></li>
     <li><a href="#the-panel">The panel</a></li>
     <li><a href="#custom-actions">Custom actions</a></li>
     <li><a href="#creating-articles-from-templates">Create articles from templates</a></li>
@@ -45,6 +46,20 @@ In version v2.0.0 we released the newly redesigned sidebar panel with improved S
   </ol>
 </details>
 
+## Markdown features
+
+The Front Matter extension tries to make it easy to manage your Markdown pages/content. Within a Markdown page, we allow you to fold the file's Front Matter to be less distracting when writing. Also, do we highlight the Front Matter content to create a visual difference between content and metadata.
+
+### Front Matter folding
+
+![](./assets/v2.4.0/folding.png)
+
+### Front Matter highlighting
+
+![](./assets/v2.4.0/fm-highlight.png)
+
+> **
+
 ## The panel
 
 The Front Matter panel allows you to perform most of the extension actions by just a click on the button and it shows the SEO statuses of your title, description, and more.

assets/icons/close-dark.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" fill="none" viewBox="0 0 24 24" stroke="#F3EFF5">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="#F3EFF5">
+  <path d="M9 9H4v1h5V9z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" />
 </svg>

assets/icons/close-light.svg

@@ -1,3 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32px" height="32px" fill="none" viewBox="0 0 24 24" stroke="currentcolor">
-  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
+<svg width="32px" height="32px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentcolor">
+  <path d="M9 9H4v1h5V9z" />
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M5 3l1-1h7l1 1v7l-1 1h-2v2l-1 1H3l-1-1V6l1-1h2V3zm1 2h4l1 1v4h2V3H6v2zm4 1H3v7h7V6z" />
 </svg>

package.json

@@ -85,6 +85,31 @@
 		"configuration": {
 			"title": "Front Matter: Configuration",
 			"properties": {
+				"frontMatter.content.autoUpdateDate": {
+					"type": "boolean",
+					"default": false,
+					"description": "Specify if you want to automatically update the modified date of your article/page."
+				},
+				"frontMatter.content.fmHighlight": {
+					"type": "boolean",
+					"default": true,
+					"description": "Specify if you want to highlight the Front Matter in the Markdown file."
+				},
+				"frontMatter.content.folders": {
+					"type": "array",
+					"default": [],
+					"markdownDescription": "This array of folders defines where the extension can easily create new content by running the create article command."
+				},
+				"frontMatter.custom.scripts": {
+					"type": "array",
+					"default": [],
+					"markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument."
+				},
+				"frontMatter.panel.freeform": {
+					"type": "boolean",
+					"default": true,
+					"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."
+				},
 				"frontMatter.taxonomy.dateField": {
 					"type": "string",
 					"default": "date",
@@ -95,11 +120,6 @@
 					"default": "lastmod",
 					"description": "Specifies the modified date field name to use in your Front Matter"
 				},
-				"frontMatter.content.autoUpdateDate": {
-					"type": "boolean",
-					"default": false,
-					"description": "Specify if you want to automatically update the modified date of your article/page."
-				},
 				"frontMatter.taxonomy.tags": {
 					"type": "array",
 					"description": "Specifies the tags which can be used in the Front Matter"
@@ -176,21 +196,6 @@
 					"type": "string",
 					"default": "yyyy-MM-dd",
 					"description": "Specify the prefix you want to add for your new article filenames."
-				},
-				"frontMatter.panel.freeform": {
-					"type": "boolean",
-					"default": true,
-					"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."
-				},
-				"frontMatter.custom.scripts": {
-					"type": "array",
-					"default": [],
-					"markdownDescription": "Specify the path to a Node.js script to execute. The current file path will be provided as an argument."
-				},
-				"frontMatter.content.folders": {
-					"type": "array",
-					"default": [],
-					"markdownDescription": "This array of folders defines where the extension can easily create new content by running the create article command."
 				}
 			}
 		},

src/constants/settings.ts

@@ -7,7 +7,6 @@ export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories";
 export const SETTING_DATE_FORMAT = "taxonomy.dateFormat";
 export const SETTING_DATE_FIELD = "taxonomy.dateField";
 export const SETTING_MODIFIED_FIELD = "taxonomy.modifiedField";
-export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
 
 export const SETTING_SLUG_PREFIX = "taxonomy.slugPrefix";
 export const SETTING_SLUG_SUFFIX = "taxonomy.slugSuffix";
@@ -30,4 +29,6 @@ export const SETTING_PANEL_FREEFORM = "panel.freeform";
 
 export const SETTING_CUSTOM_SCRIPTS = "custom.scripts";
 
-export const SETTINGS_CONTENT_FOLDERS = "content.folders";
+export const SETTING_AUTO_UPDATE_DATE = "content.autoUpdateDate";
+export const SETTINGS_CONTENT_FOLDERS = "content.folders";
+export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";

src/extension.ts

@@ -125,6 +125,11 @@ export async function activate({ subscriptions, extensionUri }: vscode.Extension
 	editDebounce = debounceCallback();
 	subscriptions.push(vscode.workspace.onDidChangeTextDocument(triggerFileChange));
 
+	// Listener for setting changes
+	subscriptions.push(vscode.workspace.onDidChangeConfiguration(() => {
+		MarkdownFoldingProvider.triggerHighlighting();
+	}));
+
 	// Subscribe all commands
 	subscriptions.push(
 		insertTags,

src/models/PanelSettings.ts

@@ -10,6 +10,7 @@ export interface PanelSettings {
   modifiedDateUpdate: boolean;
   contentInfo: FolderInfo[] | null;
   writingSettingsEnabled: boolean;
+  fmHighlighting: boolean;
 }
 
 export interface SEO {

src/providers/MarkdownFoldingProvider.ts

@@ -1,7 +1,12 @@
-import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, TextEditorDecorationType, Position } from 'vscode';
+import { workspace } from 'vscode';
+import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, Position } from 'vscode';
+import { CONFIG_KEY, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT } from '../constants';
 import { FrontMatterDecorationProvider } from './FrontMatterDecorationProvider';
 
 export class MarkdownFoldingProvider implements FoldingRangeProvider {
+  private static start: number | null = null;
+  private static end: number | null = null;
+  private static endLine: number | null = null;
 
   public async provideFoldingRanges(document: TextDocument, context: FoldingContext, token: CancellationToken): Promise<FoldingRange[]> {
     const ranges: FoldingRange[] = [];
@@ -10,17 +15,22 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
     let start: number | null = null;
     let end: number | null = null;
 
+    MarkdownFoldingProvider.start = null;
+    MarkdownFoldingProvider.end = null;
+    MarkdownFoldingProvider.endLine = null;
+
     for (let i = 0; i < lines.length; i++) {
       const line = lines[i];
       if (line.startsWith('---')) {
         if (i === 0 && start === null) {
           start = i;
+          MarkdownFoldingProvider.start = start;
         } else if (start !== null && end === null) {
           end = i;
+          MarkdownFoldingProvider.end = end;
+          MarkdownFoldingProvider.endLine = line.length;
 
-          const range = new Range(new Position(start, 0), new Position(end, line.length));
-          const decoration = new FrontMatterDecorationProvider().get();
-          window.activeTextEditor?.setDecorations(decoration, [range]);
+          MarkdownFoldingProvider.triggerHighlighting();
 
           ranges.push(new FoldingRange(start, end, FoldingRangeKind.Region));
           return ranges;
@@ -30,4 +40,17 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
 
     return ranges;
   }
+
+  public static triggerHighlighting() {
+    const config = workspace.getConfiguration(CONFIG_KEY);
+    const fmHighlight = config.get<boolean>(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT);
+    const decoration = new FrontMatterDecorationProvider().get();
+
+    if (fmHighlight && MarkdownFoldingProvider.start !== null && MarkdownFoldingProvider.end !== null && MarkdownFoldingProvider.endLine !== null) {
+      const range = new Range(new Position(MarkdownFoldingProvider.start, 0), new Position(MarkdownFoldingProvider.end, MarkdownFoldingProvider.endLine));
+      window.activeTextEditor?.setDecorations(decoration, [range]);
+    } else {
+      window.activeTextEditor?.setDecorations(decoration, []);
+    }
+  }
 }

src/viewpanel/CommandToCode.ts

@@ -16,6 +16,7 @@ export enum CommandToCode {
   initProject = "init-project",
   createContent = "create-content",
   updateModifiedUpdating = "update-modified-updates",
+  updateFmHighlight = "update-fm-highlight",
   createTemplate = "create-template",
   toggleCenterMode = "toggle-center-mode",
   toggleWritingSettings = "toggle-writing-settings",

src/viewpanel/components/GlobalSettings.tsx

@@ -11,17 +11,24 @@ export interface IGlobalSettingsProps {
 }
 
 export const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings, isBase}: React.PropsWithChildren<IGlobalSettingsProps>) => {
-  const { modifiedDateUpdate } = settings || {};
+  const { modifiedDateUpdate, fmHighlighting } = settings || {};
 
-  const onCheck = () => {
+  const onDateCheck = () => {
     MessageHelper.sendMessage(CommandToCode.updateModifiedUpdating, !modifiedDateUpdate);
   };
+  
+  const onHighlightCheck = () => {
+    MessageHelper.sendMessage(CommandToCode.updateFmHighlight, !fmHighlighting);
+  };
 
   return (
     <>
       <Collapsible id={`${isBase ? "base_" : ""}settings`} title="Global settings">
         <div className={`base__actions`}>
-          <VsCheckbox label="Auto-update modified date" checked={modifiedDateUpdate} onClick={onCheck} />
+          <VsCheckbox label="Auto-update modified date" checked={modifiedDateUpdate} onClick={onDateCheck} />
+        </div>
+        <div className={`base__actions`}>
+          <VsCheckbox label="Highlight Front Matter" checked={fmHighlighting} onClick={onHighlightCheck} />
         </div>
       </Collapsible>
     </>

src/webview/ExplorerView.ts

@@ -1,5 +1,5 @@
 import { Template } from './../commands/Template';
-import { SETTING_AUTO_UPDATE_DATE, SETTING_CUSTOM_SCRIPTS, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SLUG_UPDATE_FILE_NAME } from './../constants/settings';
+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 } from './../constants/settings';
 import * as os from 'os';
 import { PanelSettings, CustomScript } from './../models/PanelSettings';
 import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode";
@@ -155,6 +155,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         case CommandToCode.toggleWritingSettings:
           this.toggleWritingSettings();
           break;
+        case CommandToCode.updateFmHighlight:
+          this.updateFmHighlight((msg.data !== null && msg.data !== undefined) ? msg.data : false);
+          break;
         case CommandToCode.toggleCenterMode:
           await commands.executeCommand(`workbench.action.toggleCenteredLayout`);
           break;
@@ -283,7 +286,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         isInitialized: await Template.isInitialized(),
         contentInfo: await Folders.getInfo() || null,
         modifiedDateUpdate: config.get(SETTING_AUTO_UPDATE_DATE) || false,
-        writingSettingsEnabled: this.isWritingSettingsEnabled() || false
+        writingSettingsEnabled: this.isWritingSettingsEnabled() || false,
+        fmHighlighting: config.get(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT),
       } as PanelSettings
     });
   }
@@ -431,6 +435,15 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     return fontSize && lineHeight && wordWrap && wordWrapColumn && lineNumbers && quickSuggestions !== undefined;
   }
 
+  /**
+   * Toggle the Front Matter highlighting
+   */
+  private async updateFmHighlight(autoUpdate: boolean) {
+    const config = workspace.getConfiguration(CONFIG_KEY);
+    await config.update(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, autoUpdate);
+    this.getSettings();
+  }
+
   /**
    * Toggle the modified auto-update setting
    */