Updated documentation

README.md

@@ -52,13 +52,17 @@ The Front Matter extension tries to make it easy to manage your Markdown pages/c
 
 ### Front Matter folding
 
-![](./assets/v2.4.0/folding.png)
+<p align="center">
+  <img src="./assets/v2.4.0/folding.png" alt="Front Matter folding" style="display: inline-block" />
+</p>
 
 ### Front Matter highlighting
 
-![](./assets/v2.4.0/fm-highlight.png)
+<p align="center">
+  <img src="./assets/v2.4.0/fm-highlight.png" alt="Front Matter highlighting" style="display: inline-block" />
+</p>
 
-> **
+> **Info**: If you do not want this feature, you can disable it in the extension settings -> `Highlight Front Matter` or by setting the `frontMatter.content.fmHighlight` setting to `false`.
 
 ## The panel
 
@@ -71,7 +75,7 @@ To leverage most of the capabilities of the extension. SEO information and every
 When you open the panel and the current file is not a Markdown file, it will contain the following sections:
 
 <p align="center">
-  <img src="./assets/v2.3.0/baseview.png" alt="Base view" style="display: inline-block" />
+  <img src="./assets/v2.4.0/baseview.png" alt="Base view" style="display: inline-block" />
 </p>
 
 > **Info**: both **Global Settings** and **Other Actions** sections are shown for the base view as when a Markdown file is openend.
@@ -81,7 +85,7 @@ When you open the Front Matter panel on a Markdown file, you get to see the foll
 **Global Settings**
 
 <p align="center">
-  <img src="./assets/v2.3.0/global-settings.png" alt="Global settings" style="display: inline-block" />
+  <img src="./assets/v2.4.0/global-settings.png" alt="Global settings" style="display: inline-block" />
 </p>
 
 **SEO Status**
@@ -93,7 +97,7 @@ When you open the Front Matter panel on a Markdown file, you get to see the foll
 **Actions**
 
 <p align="center">
-  <img src="./assets/v2.0.0/actions.png" alt="Actions" style="display: inline-block" />
+  <img src="./assets/v2.4.0/actions.png" alt="Actions" style="display: inline-block" />
 </p>
 
 **Metadata: Keywords, Tags, Categories**
@@ -107,9 +111,11 @@ When you open the Front Matter panel on a Markdown file, you get to see the foll
 **Other actions**
 
 <p align="center">
-  <img src="./assets/v2.3.0/other-actions.png" alt="Other actions" style="display: inline-block" />
+  <img src="./assets/v2.4.0/other-actions.png" alt="Other actions" style="display: inline-block" />
 </p>
 
+**Info**: The `Enable write settings` action allow you to make Markdown specific changes to optimize the writing of your articles. It will change settings like the `fontSize`, `lineHeight`, `wordWrap`, `lineNumbers` and more.
+
 ## Custom actions
 
 Since version `1.15.0`, the extension allows you to create your own custom actions, by running Node.js scripts from your project. In order to use this functionality, you will need to configure the [`frontMatter.custom.scripts`](#frontmattercustomscripts) setting for your project.
@@ -388,6 +394,16 @@ Specify if you want to automatically update the modification date of your markdo
 }
 ```
 
+### `frontMatter.content.fmHighlight`
+
+Specify if you want to highlight the Front Matter in the Markdown file. Default: `true`.
+
+```json
+{
+  "frontMatter.content.fmHighlight": true
+}
+```
+
 ## Feedback / issues / ideas
 
 Please submit them via creating an issue in the project repository: [issue list](https://github.com/estruyf/vscode-front-matter/issues).

src/extension.ts

@@ -125,11 +125,6 @@ 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/providers/FrontMatterDecorationProvider.ts

@@ -1,6 +1,5 @@
 import { TextEditorDecorationType, window, ColorThemeKind } from "vscode";
 
-
 export class FrontMatterDecorationProvider {
 
   get(): TextEditorDecorationType {

src/providers/MarkdownFoldingProvider.ts

@@ -44,13 +44,14 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
   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) {
+    if (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, []);
+
+      if (fmHighlight) {
+        const decoration = new FrontMatterDecorationProvider().get();
+        window.activeTextEditor?.setDecorations(decoration, [range]);
+      }
     }
   }
 }

src/webview/ExplorerView.ts

@@ -442,6 +442,11 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     const config = workspace.getConfiguration(CONFIG_KEY);
     await config.update(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, autoUpdate);
     this.getSettings();
+
+    if (ArticleHelper.isMarkdownFile()) {
+      // To unset the decorations, we need to reload the whole document/instance
+      commands.executeCommand(`workbench.action.reloadWindow`);
+    }
   }
 
   /**