Merge pull request #224 from estruyf/dev

Prefers `onWillSaveTextDocument` over `onDidChangeTextDocument` for the triggering event.

.github/workflows/release-beta.yml

@@ -11,9 +11,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
           registry-url: https://registry.npmjs.org/
 
       - name: Install the dependencies

.github/workflows/release.yml

@@ -12,9 +12,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v2
         with:
-          node-version: 14
+          node-version: 16
           registry-url: https://registry.npmjs.org/
 
       - name: Install the dependencies

.vscodeignore

@@ -17,4 +17,9 @@ postcss.config.js
 .templates
 .github
 scripts
-.all-contributorsrc
+.all-contributorsrc
+assets/v2.*
+assets/v3.*
+assets/v4.*
+assets/sponsors
+dist/*.html

CHANGELOG.md

@@ -1,5 +1,78 @@
 # Change Log
 
+## [5.10.0] - 2022-01-10
+
+### 🎨 Enhancements
+
+- [#218](https://github.com/estruyf/vscode-front-matter/issues/218): Add support for creating `mdx` files from templates and content types. This introduced a new setting: `frontMatter.content.defaultFileType`.
+- [#220](https://github.com/estruyf/vscode-front-matter/issues/220): Add support DateTime updates in `mdx` files when the `mdx extension` is not installed.
+
+### 🐞 Fixes
+
+- [#221](https://github.com/estruyf/vscode-front-matter/issues/221): Automatic DateTime switch from on text change to on save to prevent multiple updates.
+
+## [5.9.0] - 2022-01-01 - 🎇🎆
+
+### 🎨 Enhancements
+
+- Fixing the spinner which overlaps the global navigation bar
+- Quick actions added for media files (edit, delete, insert markdown, insert snippet)
+- [#199](https://github.com/estruyf/vscode-front-matter/issues/199): Search media files in the currently selected folder
+- [#211](https://github.com/estruyf/vscode-front-matter/issues/211): Replace text selection on media inserts
+- [#212](https://github.com/estruyf/vscode-front-matter/issues/212): Create folder watchers for content folders. When new content gets created, the dashboard updates.
+- [#213](https://github.com/estruyf/vscode-front-matter/issues/213): New media folder overview design
+
+### 🐞 Fixes
+
+- [#210](https://github.com/estruyf/vscode-front-matter/issues/210): Fix for adding media files with uppercase file extensions
+- [#214](https://github.com/estruyf/vscode-front-matter/issues/214): Fix for opening markdown file after creating it for the specified content type
+
+## [5.8.0] - 2021-12-21 - 🎄
+
+### 🎨 Enhancements
+
+- Refactoring of the WebView logic to new message handlers
+- Optimized the `getMedia` call from the webview
+- Keep the dashboard its context when switching tabs
+- [#205](https://github.com/estruyf/vscode-front-matter/issues/205): Define a logging level setting
+- [#206](https://github.com/estruyf/vscode-front-matter/issues/206): Add front matter issues to the diagnostic tab
+
+### 🐞 Fixes
+
+- [#207](https://github.com/estruyf/vscode-front-matter/issues/207): Fix the quick picks for content creation
+- [#208](https://github.com/estruyf/vscode-front-matter/issues/208): Fix for the collapse sections action so that it is not available everywhere, but only on the Front Matter panel
+
+## [5.7.0] - 2021-12-07 - [Release Notes](https://beta.frontmatter.codes/updates/v5.7.0)
+
+### 🎨 Enhancements
+
+- [#188](https://github.com/estruyf/vscode-front-matter/issues/188): Support for `.markdown` files added to the dashboard
+- [#190](https://github.com/estruyf/vscode-front-matter/issues/190): Diagnostic output for the extension
+- [#194](https://github.com/estruyf/vscode-front-matter/issues/194): WYSIWYG controls added for markdown files + configuration to enable/disable the functionality
+
+### 🐞 Fixes
+
+- [#191](https://github.com/estruyf/vscode-front-matter/issues/191): Fix beta settings page
+- [#200](https://github.com/estruyf/vscode-front-matter/issues/200): Fix last modified date sorting for media files
+- [#201](https://github.com/estruyf/vscode-front-matter/issues/201): Fix overflow issue with the media filename
+- [#202](https://github.com/estruyf/vscode-front-matter/issues/202): Fix checkbox label color for light themes
+
+## [5.6.0] - 2021-11-23
+
+### 🎨 Enhancements
+
+- Updated camera icon from VS Code to media icon
+- Updated the media card actions to show it within a menu. This will give a better experience with custom scripts.
+- [#97](https://github.com/estruyf/vscode-front-matter/issues/97): Custom Script support for media files and folders
+- [#178](https://github.com/estruyf/vscode-front-matter/issues/178): Sorting added to the media dashboard
+- [#179](https://github.com/estruyf/vscode-front-matter/issues/179): Updated the `open dashboard` icon to make it easier to spot it
+- [#180](https://github.com/estruyf/vscode-front-matter/issues/180): Added `{filename}` as placeholder for media snippets
+- [#181](https://github.com/estruyf/vscode-front-matter/issues/181): Support for custom taxonomy fields added
+
+### 🐞 Fixes
+
+- [#183](https://github.com/estruyf/vscode-front-matter/issues/183): Fix type error on the `frontMatter.content.sorting` setting
+
 ## [5.5.0] - 2021-11-15
 
 As from this version onwards, the extension will be published to [open-vsx.org](https://open-vsx.org/).

README.beta.md

@@ -106,12 +106,15 @@ If you have the courage to test out the beta features, we made available a beta
   </a>
 </p>
 
-## 🖤 Sponsors 👇 🤘
+## 🖤 Backers & Sponsors 👇 🤘
 
 <p align="center">
   <a href="https://github.com/timschps" title="Tim Schaeps">
     <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
-   </a>
+  </a>
+  <a href="https://github.com/zivbk1" title="Bryan Klein">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/6154767" />
+  </a>
   <a href="https://github.com/flikteoh" title="FlikTeoh">
     <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
   </a>

README.md

@@ -104,12 +104,15 @@ If you have the courage to test out the beta features, we made available a beta
   </a>
 </p>
 
-## 🖤 Sponsors 👇 🤘
+## 🖤 Backers & Sponsors 👇 🤘
 
 <p align="center">
   <a href="https://github.com/timschps" title="Tim Schaeps">
     <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/13098307" />
-   </a>
+  </a>
+  <a href="https://github.com/zivbk1" title="Bryan Klein">
+    <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/6154767" />
+  </a>
   <a href="https://github.com/flikteoh" title="FlikTeoh">
     <img height="64px" style="border-radius:50%" src="https://avatars.githubusercontent.com/u/1472065" />
   </a>

assets/icons/blockquote-dark.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M6 15h15" />
+  <path d="M21 19h-15" />
+  <path d="M15 11h6" />
+  <path d="M21 7h-6" />
+  <path d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2" />
+  <path d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2" />
+</svg>

assets/icons/blockquote-light.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M6 15h15" />
+  <path d="M21 19h-15" />
+  <path d="M15 11h6" />
+  <path d="M21 7h-6" />
+  <path d="M9 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2" />
+  <path d="M3 9h1a1 1 0 1 1 -1 1v-2.5a2 2 0 0 1 2 -2" />
+</svg>

assets/icons/bold-dark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+  <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+</svg>

assets/icons/bold-light.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+  <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+</svg>

assets/icons/code-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <polyline points="7 8 3 12 7 16" />
+  <polyline points="17 8 21 12 17 16" />
+  <line x1="14" y1="4" x2="10" y2="20" />
+</svg>

assets/icons/code-light.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <polyline points="7 8 3 12 7 16" />
+  <polyline points="17 8 21 12 17 16" />
+  <line x1="14" y1="4" x2="10" y2="20" />
+</svg>

assets/icons/codeblock-dark.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 12h6" />
+  <path d="M12 9v6" />
+  <path d="M6 19a2 2 0 0 1 -2 -2v-4l-1 -1l1 -1v-4a2 2 0 0 1 2 -2" />
+  <path d="M18 19a2 2 0 0 0 2 -2v-4l1 -1l-1 -1v-4a2 2 0 0 0 -2 -2" />
+</svg>

assets/icons/codeblock-light.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M9 12h6" />
+  <path d="M12 9v6" />
+  <path d="M6 19a2 2 0 0 1 -2 -2v-4l-1 -1l1 -1v-4a2 2 0 0 1 2 -2" />
+  <path d="M18 19a2 2 0 0 0 2 -2v-4l1 -1l-1 -1v-4a2 2 0 0 0 -2 -2" />
+</svg>

assets/icons/frontmatter-small-dark.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve" width="16" height="16">
+<path fill="#C5C5C5" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#C5C5C5" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/frontmatter-small-light.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve" width="16" height="16">
+<path fill="#424242" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#424242" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/frontmatter-small-teal.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 1250 1250" style="enable-background:new 0 0 1250 1250;" xml:space="preserve" width="16" height="16">
+<path fill="#02aeb7" d="M316,1082.3H119.4V151.2h347.5v218.9H316v135.7h140.5v210.5H316V1082.3z"/>
+<path fill="#02aeb7" d="M602.2,151.2H704l77.7,379.9c9.5,47.4,18.1,95,26,142.6c7.9,47.6,15,97.6,21.4,149.8c0.7-6.8,1.3-12.1,1.7-16
+	c0.2-2.7,0.6-5.5,1.1-8.2l16.6-106.7l14.9-101.3l13.2-66.9l69.2-373.3h102.9l81.2,931.1h-113.6l-19.9-316c-0.8-16.1-1.4-29.9-2-41.6
+	c-0.6-11.7-0.9-21.3-0.9-29L988.3,571l-2.8-114.6c0-0.8,0-2.5-0.3-5.1s-0.5-6.1-0.9-10.6l-2.8,18.7c-3,22.1-5.8,41.4-8.3,57.9
+	c-2.5,16.5-4.7,30.3-6.6,41.6l-15.1,84.9l-5.7,32l-74.3,406.4h-80.1l-69.7-351c-9.5-46.2-17.9-93.1-25.4-140.8
+	c-7.5-47.7-14.2-97.6-20.3-149.9l-34.3,641.6H529.6L602.2,151.2z"/>
+</svg>

assets/icons/heading-dark.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 12h10" />
+  <path d="M7 4v16" />
+  <path d="M17 4v16" />
+  <path d="M15 20h4" />
+  <path d="M15 4h4" />
+  <path d="M5 20h4" />
+  <path d="M5 4h4" />
+</svg>

assets/icons/heading-light.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 12h10" />
+  <path d="M7 4v16" />
+  <path d="M17 4v16" />
+  <path d="M15 20h4" />
+  <path d="M15 4h4" />
+  <path d="M5 20h4" />
+  <path d="M5 4h4" />
+</svg>

assets/icons/italic-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="11" y1="5" x2="17" y2="5" />
+  <line x1="7" y1="19" x2="13" y2="19" />
+  <line x1="14" y1="5" x2="10" y2="19" />
+</svg>

assets/icons/italic-light.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="11" y1="5" x2="17" y2="5" />
+  <line x1="7" y1="19" x2="13" y2="19" />
+  <line x1="14" y1="5" x2="10" y2="19" />
+</svg>

assets/icons/media-dark.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#C5C5C5" width="24" height="24">
+  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+</svg>

assets/icons/media-light.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" viewBox="0 0 20 20" fill="#424242" width="24" height="24">
+  <path fillRule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clipRule="evenodd" />
+</svg>

assets/icons/options-dark.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="9" />
+  <line x1="8" y1="12" x2="8" y2="12.01" />
+  <line x1="12" y1="12" x2="12" y2="12.01" />
+  <line x1="16" y1="12" x2="16" y2="12.01" />
+</svg>

assets/icons/options-light.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <circle cx="12" cy="12" r="9" />
+  <line x1="8" y1="12" x2="8" y2="12.01" />
+  <line x1="12" y1="12" x2="12" y2="12.01" />
+  <line x1="16" y1="12" x2="16" y2="12.01" />
+</svg>

assets/icons/ordered-list-dark.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-numbers" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M11 6h9" />
+  <path d="M11 12h9" />
+  <path d="M12 18h8" />
+  <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
+  <path d="M6 10v-6l-2 2" />
+</svg>

assets/icons/ordered-list-light.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list-numbers" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M11 6h9" />
+  <path d="M11 12h9" />
+  <path d="M12 18h8" />
+  <path d="M4 16a2 2 0 1 1 4 0c0 .591 -.5 1 -1 1.5l-3 2.5h4" />
+  <path d="M6 10v-6l-2 2" />
+</svg>

assets/icons/strikethrough-dark.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 5v9a5 5 0 0 0 10 0v-9" />
+  <path d="M4 12h16" />
+</svg>

assets/icons/strikethrough-light.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <path d="M7 5v9a5 5 0 0 0 10 0v-9" />
+  <path d="M4 12h16" />
+</svg>

assets/icons/unordered-list-dark.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#C5C5C5" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="9" y1="6" x2="20" y2="6" />
+  <line x1="9" y1="12" x2="20" y2="12" />
+  <line x1="9" y1="18" x2="20" y2="18" />
+  <line x1="5" y1="6" x2="5" y2="6.01" />
+  <line x1="5" y1="12" x2="5" y2="12.01" />
+  <line x1="5" y1="18" x2="5" y2="18.01" />
+</svg>

assets/icons/unordered-list-light.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list" width="44" height="44" viewBox="0 0 24 24" stroke-width="2" stroke="#424242" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="9" y1="6" x2="20" y2="6" />
+  <line x1="9" y1="12" x2="20" y2="12" />
+  <line x1="9" y1="18" x2="20" y2="18" />
+  <line x1="5" y1="6" x2="5" y2="6.01" />
+  <line x1="5" y1="12" x2="5" y2="12.01" />
+  <line x1="5" y1="18" x2="5" y2="18.01" />
+</svg>

package.json

@@ -1,9 +1,9 @@
 {
   "name": "vscode-front-matter-beta",
   "displayName": "Front Matter",
-  "description": "An essential Visual Studio Code extension when you want to manage the markdown pages of your static site like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
+  "description": "Front Matter is a CMS that runs within Visual Studio Code. It gives you the power and control of a full-blown CMS while also providing you the flexibility and speed of the static site generator of your choice like: Hugo, Jekyll, Hexo, NextJs, Gatsby, and many more...",
   "icon": "assets/frontmatter-teal-128x128.png",
-  "version": "5.5.0",
+  "version": "5.10.0",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {
@@ -23,7 +23,7 @@
     }
   ],
   "engines": {
-    "vscode": "^1.51.0"
+    "vscode": "^1.63.0"
   },
   "categories": [
     "Other"
@@ -66,7 +66,7 @@
     "onCommand:frontMatter.insertImage",
     "onView:frontMatter.explorer"
   ],
-  "main": "./dist/extension",
+  "main": "./dist/extension.js",
   "contributes": {
     "viewsContainers": {
       "activitybar": [
@@ -97,9 +97,38 @@
           "markdownDescription": "Specify if you want to automatically update the modified date of your article/page. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.autoupdatedate)",
           "scope": "Content"
         },
+        "frontMatter.content.defaultFileType": {
+          "type": "string",
+          "default": "md",
+          "enum": [
+            "md",
+            "mdx"
+          ],
+          "markdownDescription": "Specify the default file type for the content to create. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.defaultfiletype)",
+          "scope": "Content"
+        },
+        "frontMatter.content.defaultSorting": {
+          "type": "string",
+          "default": "",
+          "oneOf": [
+            {
+              "enum": [
+                "LastModifiedAsc",
+                "LastModifiedDesc",
+                "FileNameAsc",
+                "FileNameDesc"
+              ]
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "markdownDescription": "Specify the default sorting option for the content dashboard. You can use one of the values from the enum or define your own ID. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.defaultSorting)",
+          "scope": "Content"
+        },
         "frontMatter.content.draftField": {
           "type": "object",
-          "markdownDescription": "Define the draft field you want to use to manage your content. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.draftField)",
+          "markdownDescription": "Define the draft field you want to use to manage your content. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.draftfield)",
           "default": {
             "name": "draft",
             "type": "boolean"
@@ -111,7 +140,7 @@
                 "boolean",
                 "choice"
               ],
-              "description": ""
+              "description": "Type of the draft field you want to use"
             },
             "name": {
               "type": "string",
@@ -137,7 +166,7 @@
         "frontMatter.content.fmHighlight": {
           "type": "boolean",
           "default": true,
-          "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)",
+          "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.pageFolders": {
@@ -176,12 +205,16 @@
           "scope": "Content"
         },
         "frontMatter.content.sorting": {
-          "type": "object",
+          "type": "array",
           "default": [],
-          "markdownDescription": "Define the sorting options for your dashboard content. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.content.sorting)",
+          "markdownDescription": "Define the sorting options for your dashboard content. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.sorting)",
           "items": {
             "type": "object",
             "properties": {
+              "id": {
+                "type": "string",
+                "description": "The ID of the sorting option. This will be used for the storing the last used sorting option or the default option."
+              },
               "title": {
                 "type": "string",
                 "description": "Name of the sorting label"
@@ -217,6 +250,12 @@
           },
           "scope": "Content"
         },
+        "frontMatter.content.wysiwyg": {
+          "type": "boolean",
+          "default": true,
+          "markdownDescription": "Specifies if you want to enable/disable the What You See, Is What You Get (WYSIWYG) markdown controls. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.content.wysiwyg)",
+          "scope": "Content"
+        },
         "frontMatter.custom.scripts": {
           "type": "array",
           "default": [],
@@ -251,6 +290,16 @@
               "outputType": {
                 "type": "string",
                 "description": "The type of output for the editor panel. Can be used to change it to 'markdown' for example"
+              },
+              "type": {
+                "type": "string",
+                "default": "content",
+                "enum": [
+                  "content",
+                  "mediaFolder",
+                  "mediaFile"
+                ],
+                "description": "The type for which the script will be used."
               }
             },
             "additionalProperties": false,
@@ -264,7 +313,7 @@
         "frontMatter.dashboard.mediaSnippet": {
           "type": "array",
           "default": [],
-          "markdownDescription": "Specify the a snippet for your custom media insert markup. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.dashboard.mediaSnippet)",
+          "markdownDescription": "Specify the a snippet for your custom media insert markup. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.dashboard.mediasnippet)",
           "items": {
             "type": "string",
             "description": "The parts of your snippet. Use `{mediaUrl}` as placeholder where the path of the image needs to be inserted."
@@ -283,7 +332,19 @@
         "frontMatter.framework.id": {
           "type": "string",
           "default": "",
-          "markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.framework.id)"
+          "markdownDescription": "Specify the ID of your static site generator or framework you are using for your website. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.framework.id)"
+        },
+        "frontMatter.media.defaultSorting": {
+          "type": "string",
+          "default": "",
+          "enum": [
+            "LastModifiedAsc",
+            "LastModifiedDesc",
+            "FileNameAsc",
+            "FileNameDesc"
+          ],
+          "markdownDescription": "Specify the default sorting option for the media dashboard. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.media.defaultsorting)",
+          "scope": "Content"
         },
         "frontMatter.panel.freeform": {
           "type": "boolean",
@@ -306,7 +367,7 @@
         "frontMatter.site.baseURL": {
           "type": "string",
           "default": "",
-          "markdownDescription": "Specify the base URL of your site, this will be used for SEO checks. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.site.baseURL)",
+          "markdownDescription": "Specify the base URL of your site, this will be used for SEO checks. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.site.baseurl)",
           "scope": "Site"
         },
         "frontMatter.taxonomy.alignFilename": {
@@ -325,7 +386,7 @@
         },
         "frontMatter.taxonomy.commaSeparatedFields": {
           "type": "array",
-          "markdownDescription": "Specify the fields names that Front Matter should treat as a comma-separated array. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.commaSeparatedFields)",
+          "markdownDescription": "Specify the fields names that Front Matter should treat as a comma-separated array. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.commaSeparatedFields)",
           "items": {
             "type": "string",
             "description": "Name of the fields you want to use as comma-separated arrays."
@@ -337,7 +398,7 @@
             "array",
             "null"
           ],
-          "markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.contentTypes)",
+          "markdownDescription": "Specify the type of contents you want to use for your articles/pages/etc. Make sure the `type` is correctly set in your front matter. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.contentTypes)",
           "items": {
             "type": "object",
             "description": "Define the content types you want to use in Front Matter.",
@@ -346,6 +407,15 @@
                 "type": "string",
                 "description": "Define the type of field"
               },
+              "fileType": {
+                "type": "string",
+                "default": "",
+                "enum": [
+                  "md",
+                  "mdx"
+                ],
+                "description": "Specifies the type of content you want to create."
+              },
               "fields": {
                 "type": "array",
                 "description": "Define the fields of the content type",
@@ -362,6 +432,7 @@
                         "boolean",
                         "image",
                         "choice",
+                        "taxonomy",
                         "tags",
                         "categories",
                         "draft"
@@ -418,12 +489,47 @@
                       "type": "boolean",
                       "default": false,
                       "description": "Do you want to hide the field from the metadata section?"
+                    },
+                    "taxonomyId": {
+                      "type": "string",
+                      "default": "",
+                      "description": "The ID of your taxonomy field"
                     }
                   },
                   "additionalProperties": false,
                   "required": [
                     "type",
                     "name"
+                  ],
+                  "allOf": [
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "taxonomy"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "taxonomyId"
+                        ]
+                      }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "choice"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "choices"
+                        ]
+                      }
+                    }
                   ]
                 }
               },
@@ -492,6 +598,32 @@
           ],
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.customTaxonomy": {
+          "type": "array",
+          "markdownDescription": "Specify the custom taxonomy field data. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.tags)",
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "ID for your taxonomy field"
+              },
+              "options": {
+                "type": "array",
+                "description": "Options from which you can pick",
+                "items": {
+                  "type": "string"
+                }
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "id",
+              "options"
+            ]
+          },
+          "scope": "Taxonomy"
+        },
         "frontMatter.taxonomy.dateField": {
           "type": "string",
           "default": "date",
@@ -596,6 +728,24 @@
           "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.global.notifications": {
+          "type": "array",
+          "items": {
+            "type": "string",
+            "enum": [
+              "info",
+              "warning",
+              "error"
+            ]
+          },
+          "default": [
+            "info",
+            "warning",
+            "error"
+          ],
+          "markdownDescription": "Specifies the notifications you want to see. By default, all notifications types will be shown. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.global.notifications)",
+          "scope": "Templates"
         }
       }
     },
@@ -660,7 +810,10 @@
         "command": "frontMatter.insertImage",
         "title": "Insert image into your content",
         "category": "Front matter",
-        "icon": "$(device-camera)"
+        "icon": {
+          "dark": "/assets/icons/media-dark.svg",
+          "light": "/assets/icons/media-light.svg"
+        }
       },
       {
         "command": "frontMatter.insertTags",
@@ -676,7 +829,28 @@
         "command": "frontMatter.dashboard",
         "title": "Open dashboard",
         "category": "Front matter",
-        "icon": "$(preview)"
+        "icon": {
+          "dark": "/assets/icons/frontmatter-small-dark.svg",
+          "light": "/assets/icons/frontmatter-small-light.svg"
+        }
+      },
+      {
+        "command": "frontMatter.dashboard.media",
+        "title": "Open media dashboard",
+        "category": "Front matter",
+        "icon": {
+          "dark": "/assets/icons/frontmatter-small-dark.svg",
+          "light": "/assets/icons/frontmatter-small-light.svg"
+        }
+      },
+      {
+        "command": "frontMatter.dashboard.close",
+        "title": "Close dashboard",
+        "category": "Front matter",
+        "icon": {
+          "dark": "/assets/icons/frontmatter-small-teal.svg",
+          "light": "/assets/icons/frontmatter-small-teal.svg"
+        }
       },
       {
         "command": "frontMatter.preview",
@@ -697,19 +871,179 @@
         "command": "frontMatter.setLastModifiedDate",
         "title": "Set lastmod date",
         "category": "Front matter"
+      },
+      {
+        "command": "frontMatter.markup.bold",
+        "title": "Bold",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/bold-light.svg",
+          "dark": "assets/icons/bold-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.italic",
+        "title": "Italic",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/italic-light.svg",
+          "dark": "assets/icons/italic-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.strikethrough",
+        "title": "Strikethrough",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/strikethrough-light.svg",
+          "dark": "assets/icons/strikethrough-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.code",
+        "title": "Code",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/code-light.svg",
+          "dark": "assets/icons/code-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.codeblock",
+        "title": "Codeblock",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/codeblock-light.svg",
+          "dark": "assets/icons/codeblock-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.blockquote",
+        "title": "Codeblock",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/blockquote-light.svg",
+          "dark": "assets/icons/blockquote-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.heading",
+        "title": "Heading",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/heading-light.svg",
+          "dark": "assets/icons/heading-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.unorderedlist",
+        "title": "Unordered list",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/unordered-list-light.svg",
+          "dark": "assets/icons/unordered-list-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.orderedlist",
+        "title": "Ordered list",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/ordered-list-light.svg",
+          "dark": "assets/icons/ordered-list-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.markup.tasklist",
+        "title": "Task list",
+        "category": "Front matter"
+      },
+      {
+        "command": "frontMatter.markup.options",
+        "title": "Other markup options",
+        "category": "Front matter",
+        "icon": {
+          "light": "assets/icons/options-light.svg",
+          "dark": "assets/icons/options-dark.svg"
+        }
+      },
+      {
+        "command": "frontMatter.diagnostics",
+        "title": "Diagnostic logging",
+        "category": "Front matter"
       }
     ],
     "menus": {
       "editor/title": [
+        {
+          "command": "frontMatter.markup.heading",
+          "group": "navigation@-132",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.bold",
+          "group": "navigation@-131",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.italic",
+          "group": "navigation@-130",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.strikethrough",
+          "group": "navigation@-129",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.blockquote",
+          "group": "navigation@-128",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
         {
           "command": "frontMatter.insertImage",
-          "group": "navigation@-99",
+          "group": "navigation@-127",
           "when": "resourceLangId == markdown"
         },
+        {
+          "command": "frontMatter.markup.options",
+          "group": "navigation@-126",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.orderedlist",
+          "group": "1_markup@1",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.unorderedlist",
+          "group": "1_markup@2",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.tasklist",
+          "group": "1_markup@3",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.code",
+          "group": "1_markup@4",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
+        {
+          "command": "frontMatter.markup.codeblock",
+          "group": "1_markup@5",
+          "when": "resourceLangId == markdown && frontMatter:markdown:wysiwyg"
+        },
         {
           "command": "frontMatter.dashboard",
           "group": "navigation@-98",
-          "when": "frontMatter:enabled == true"
+          "when": "frontMatter:enabled == true && frontMatter:dashboard:open == false"
+        },
+        {
+          "command": "frontMatter.dashboard.close",
+          "group": "navigation@-98",
+          "when": "frontMatter:enabled == true && frontMatter:dashboard:open == true"
         }
       ],
       "explorer/context": [
@@ -757,12 +1091,60 @@
         {
           "command": "frontMatter.createFromTemplate",
           "when": "false"
+        },
+        {
+          "command": "frontMatter.dashboard.close",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.bold",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.italic",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.strikethrough",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.code",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.codeblock",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.blockquote",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.heading",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.unorderedlist",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.orderedlist",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.tasklist",
+          "when": "false"
+        },
+        {
+          "command": "frontMatter.markup.options",
+          "when": "false"
         }
       ],
       "view/title": [
         {
           "command": "frontMatter.collapseSections",
-          "group": "navigation"
+          "group": "frontmatter-explorer"
         }
       ]
     },
@@ -777,9 +1159,15 @@
     ]
   },
   "scripts": {
-    "vscode:prepublish": "npm run clean && webpack --mode production",
-    "build:ext": "npm run clean && webpack --mode development",
-    "dev:ext": "npm run clean && webpack --mode development --watch",
+    "dev:ext": "npm run clean && npm-run-all --parallel watch:*",
+    "vscode:prepublish": "npm run clean && npm-run-all --parallel prod:*",
+    "build:ext": "npm run clean && npm-run-all --parallel dev:build:*",
+    "watch:ext": "webpack --mode development --watch --config ./webpack/extension.config.js",
+    "watch:dashboard": "webpack serve --mode development --config ./webpack/dashboard.config.js",
+    "dev:build:ext": "webpack --mode development --config ./webpack/extension.config.js",
+    "dev:build:dashboard": "webpack --mode development --config ./webpack/dashboard.config.js",
+    "prod:ext": "webpack --mode production --config ./webpack/extension.config.js",
+    "prod:dashboard": "webpack --mode production --config ./webpack/dashboard.config.js",
     "test-compile": "tsc -p ./",
     "clean": "rimraf dist",
     "start:site": "cd ./docs && npm run dev"
@@ -801,9 +1189,10 @@
     "@types/react": "17.0.0",
     "@types/react-datepicker": "^4.1.7",
     "@types/react-dom": "17.0.0",
-    "@types/vscode": "1.51.0",
+    "@types/vscode": "^1.63.0",
     "@vscode/codicons": "0.0.20",
     "@vscode/webview-ui-toolkit": "^0.8.1",
+    "@webpack-cli/serve": "^1.6.0",
     "autoprefixer": "^10.3.2",
     "css-loader": "5.2.7",
     "date-fns": "2.23.0",
@@ -818,6 +1207,8 @@
     "lodash.uniqby": "4.7.0",
     "mdast-util-from-markdown": "1.0.0",
     "node-json-db": "^1.3.0",
+    "npm-run-all": "^4.1.5",
+    "path-browserify": "^1.0.1",
     "postcss": "^8.3.6",
     "postcss-loader": "4.3.0",
     "react": "17.0.1",
@@ -833,10 +1224,9 @@
     "typescript": "4.0.2",
     "url-join-ts": "^1.0.5",
     "wc-react": "github:estruyf/wc-react",
-    "webpack": "4.44.2",
-    "webpack-cli": "3.3.12"
-  },
-  "dependencies": {
-    "@docsearch/js": "^3.0.0-alpha.40"
+    "webpack": "^5.65.0",
+    "webpack-bundle-analyzer": "^4.5.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
   }
-}
+}

src/commands/Article.ts

@@ -1,3 +1,4 @@
+import { isValidFile } from './../helpers/isValidFile';
 import { SETTING_AUTO_UPDATE_DATE, SETTING_MODIFIED_FIELD, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TEMPLATES_PREFIX, CONFIG_KEY, SETTING_DATE_FORMAT, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX } from './../constants';
 import * as vscode from 'vscode';
 import { TaxonomyType } from "../models";
@@ -14,9 +15,6 @@ import { parseWinPath } from '../helpers/parseWinPath';
 
 
 export class Article {
-	
-  private static prevContent = "";
-
   /**
   * Insert taxonomy
   *
@@ -118,7 +116,37 @@ export class Article {
       return;
     }
 
-    const article = ArticleHelper.getFrontMatter(editor);
+    const updatedArticle = this.setLastModifiedDateInner(editor.document);
+
+    if (typeof updatedArticle === "undefined") {
+      return;
+    }
+
+    ArticleHelper.update(
+      editor,
+      updatedArticle as matter.GrayMatterFile<string>
+    );
+  }
+
+  public static async setLastModifiedDateOnSave(
+    document: vscode.TextDocument
+  ): Promise<vscode.TextEdit[]> {
+    const updatedArticle = this.setLastModifiedDateInner(document);
+
+    if (typeof updatedArticle === "undefined") {
+      return [];
+    }
+
+    const update = ArticleHelper.generateUpdate(document, updatedArticle);
+
+    return [update];
+  }
+
+  private static setLastModifiedDateInner(
+    document: vscode.TextDocument
+  ): matter.GrayMatterFile<string> | undefined {
+    const article = ArticleHelper.getFrontMatterFromDocument(document);
+
     if (!article) {
       return;
     }
@@ -127,8 +155,7 @@ export class Article {
     const dateField = Settings.get(SETTING_MODIFIED_FIELD) as string || DefaultFields.LastModified;
     try {
       cloneArticle.data[dateField] = Article.formatDate(new Date());
-
-      ArticleHelper.update(editor, cloneArticle);
+      return cloneArticle;
     } catch (e: any) {
       Notifications.error(`Something failed while parsing the date format. Check your "${CONFIG_KEY}${SETTING_DATE_FORMAT}" setting.`);
     }
@@ -203,7 +230,7 @@ export class Article {
 
     const file = parseWinPath(editor.document.fileName);
 
-    if (!file.endsWith(`.md`) && !file.endsWith(`.mdx`)) {
+    if (!isValidFile(file)) {
       return;
     }
 
@@ -237,30 +264,17 @@ export class Article {
 
   /**
    * Article auto updater
-   * @param fileChanges
+   * @param event
    */
-  public static async autoUpdate(fileChanges: vscode.TextDocumentChangeEvent) {
-    const txtChanges = fileChanges.contentChanges.map(c => c.text);
-    const editor = vscode.window.activeTextEditor;
+  public static async autoUpdate(event: vscode.TextDocumentWillSaveEvent) {
+    const document = event.document;
+    if (document && ArticleHelper.isMarkdownFile(document)) {
+      const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE);
 
-		if (txtChanges.length > 0 && editor && ArticleHelper.isMarkdownFile()) {
-			const autoUpdate = Settings.get(SETTING_AUTO_UPDATE_DATE);
-
-			if (autoUpdate) {  
-        const article = ArticleHelper.getFrontMatter(editor);
-        if (!article) {
-          return;
-        }
-
-        if (article.content === Article.prevContent) {
-          return;
-        }
-
-        Article.prevContent = article.content;
-
-        Article.setLastModifiedDate();
+      if (autoUpdate) {
+        event.waitUntil(Article.setLastModifiedDateOnSave(document));
       }
-		}
+    }
   }
 
   /**

src/commands/Dashboard.ts

@@ -1,39 +1,21 @@
-import { SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD, SETTINGS_DASHBOARD_OPENONSTART, SETTINGS_DASHBOARD_MEDIA_SNIPPET, SETTING_TAXONOMY_CONTENT_TYPES, DefaultFields, HOME_PAGE_NAVIGATION_ID, ExtensionState, COMMAND_NAME, SETTINGS_FRAMEWORK_ID, SETTINGS_CONTENT_DRAFT_FIELD, SETTINGS_CONTENT_SORTING } from '../constants';
-import { ArticleHelper } from './../helpers/ArticleHelper';
-import { basename, dirname, extname, join, parse } from "path";
-import { existsSync, readdirSync, statSync, unlinkSync, writeFileSync } from "fs";
-import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, env, Position } from "vscode";
-import { Settings as SettingsHelper } from '../helpers';
-import { DraftField, Framework, SortingSetting, TaxonomyType } from '../models';
-import { Folders } from './Folders';
+import { PagesListener } from './../listeners/PagesListener';
+import { ExtensionListener } from './../listeners/ExtensionListener';
+import { SETTINGS_DASHBOARD_OPENONSTART, CONTEXT } from '../constants';
+import { join } from "path";
+import { commands, Uri, ViewColumn, Webview, WebviewPanel, window } from "vscode";
+import { Logger, Settings as SettingsHelper } from '../helpers';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
-import { DashboardMessage } from '../dashboardWebView/DashboardMessage';
-import { Page } from '../dashboardWebView/models/Page';
-import { openFileInEditor } from '../helpers/openFileInEditor';
-import { Template } from './Template';
-import { Notifications } from '../helpers/Notifications';
-import { Settings } from '../dashboardWebView/models/Settings';
 import { Extension } from '../helpers/Extension';
-import { ViewType } from '../dashboardWebView/state';
-import { EditorHelper, WebviewHelper } from '@estruyf/vscode';
-import { MediaInfo, MediaPaths } from './../models/MediaPaths';
-import { decodeBase64Image } from '../helpers/decodeBase64Image';
+import { WebviewHelper } from '@estruyf/vscode';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { MediaLibrary } from '../helpers/MediaLibrary';
-import imageSize from 'image-size';
-import { parseWinPath } from '../helpers/parseWinPath';
-import { DateHelper } from '../helpers/DateHelper';
-import { FrameworkDetector } from '../helpers/FrameworkDetector';
-import { ContentType } from '../helpers/ContentType';
+import { DashboardListener, MediaListener, SettingsListener } from '../listeners';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
-  private static isDisposed: boolean = true;
-  private static media: MediaInfo[] = [];
-  private static timers: { [folder: string]: any } = {};
   private static _viewData: DashboardData | undefined;
-  private static mediaLib: MediaLibrary;
+  private static isDisposed: boolean = true;
 
   public static get viewData(): DashboardData | undefined {
     return Dashboard._viewData;
@@ -53,15 +35,17 @@ export class Dashboard {
    * Open or reveal the dashboard
    */
   public static async open(data?: DashboardData) {
-    this.mediaLib = MediaLibrary.getInstance();
+    MediaLibrary.getInstance();
     
     Dashboard._viewData = data;
 
     if (Dashboard.isOpen) {
-			Dashboard.reveal();
+			Dashboard.reveal(!!data);
 		} else {
 			Dashboard.create();
 		}
+
+    await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, true);
   }
 
   /**
@@ -74,11 +58,33 @@ export class Dashboard {
   /**
    * Reveal the dashboard if it is open
    */
-  public static reveal() {
+  public static reveal(hasData: boolean = false) {
     if (Dashboard.webview) {
       Dashboard.webview.reveal();
+
+      if (hasData) {
+        Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: Dashboard.viewData });
+      }
     }
   }
+
+  public static close() {
+    Dashboard.webview?.dispose();
+  }
+
+  public static reload() {
+    if (Dashboard.isOpen) {
+      Dashboard.webview?.dispose();
+
+      setTimeout(() => {
+        Dashboard.open();
+      }, 100);
+    }
+  }
+
+  public static resetViewData() {
+    Dashboard._viewData = undefined;
+  }
   
   /**
    * Create the dashboard webview
@@ -92,7 +98,8 @@ export class Dashboard {
       'FrontMatter Dashboard',
       ViewColumn.One,
       {
-        enableScripts: true
+        enableScripts: true,
+        retainContextWhenHidden: true
       }
     );
 
@@ -105,549 +112,54 @@ export class Dashboard {
 
     Dashboard.webview.webview.html = Dashboard.getWebviewContent(Dashboard.webview.webview, extensionUri);
 
-    Dashboard.webview.onDidChangeViewState(() => {
+    Dashboard.webview.onDidChangeViewState(async () => {
       if (!this.webview?.visible) {
         Dashboard._viewData = undefined;
         const panel = ExplorerView.getInstance(extensionUri);
         panel.getMediaSelection();
+
+        Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: null });
       }
+
+      await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, this.webview?.visible);
     });
 
-    Dashboard.webview.onDidDispose(() => {
+    Dashboard.webview.onDidDispose(async () => {
       Dashboard.isDisposed = true;
       Dashboard._viewData = undefined;
       const panel = ExplorerView.getInstance(extensionUri);
       panel.getMediaSelection();
+      await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, false);
     });
 
     SettingsHelper.onConfigChange((global?: any) => {
-      Dashboard.getSettings();
+      SettingsListener.getSettings();
     });
 
     Dashboard.webview.webview.onDidReceiveMessage(async (msg) => {
-      switch(msg.command) {
-        case DashboardMessage.getViewType:
-          if (Dashboard._viewData) {
-            Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: Dashboard._viewData });
-          }
-          break;
-        case DashboardMessage.getData:
-          Dashboard.getSettings();
-          Dashboard.getPages();
-          break;
-        case DashboardMessage.openFile:
-          openFileInEditor(msg.data);
-          break;
-        case DashboardMessage.createContent:
-          await commands.executeCommand(COMMAND_NAME.createContent);
-          break;
-        case DashboardMessage.createByContentType:
-          await commands.executeCommand(COMMAND_NAME.createByContentType);
-          break;
-        case DashboardMessage.createByTemplate:
-          await commands.executeCommand(COMMAND_NAME.createByTemplate);
-          break;
-        case DashboardMessage.updateSetting:
-          Dashboard.updateSetting(msg.data);
-          break;
-        case DashboardMessage.initializeProject:
-          await commands.executeCommand(COMMAND_NAME.init, Dashboard.getSettings);
-          break;
-        case DashboardMessage.reload:
-          if (!Dashboard.isDisposed) {
-            Dashboard.webview?.dispose();
-            setTimeout(() => {
-              Dashboard.open();
-            }, 100);
-          }
-          break;
-        case DashboardMessage.setPageViewType:
-          Extension.getInstance().setState(ExtensionState.PagesView, msg.data, "workspace");
-          break;
-        case DashboardMessage.getMedia:
-          Dashboard.getMedia(msg?.data?.page, msg?.data?.folder);
-          break;
-        case DashboardMessage.copyToClipboard:
-          env.clipboard.writeText(msg.data);
-          break;
-        case DashboardMessage.refreshMedia:
-          Dashboard.resetMedia();
-          Dashboard.getMedia(0, msg?.data?.folder);
-          break;
-        case DashboardMessage.uploadMedia:
-          Dashboard.saveFile(msg?.data);
-          break;
-        case DashboardMessage.deleteMedia:
-          Dashboard.deleteFile(msg?.data);
-          break;
-        case DashboardMessage.insertPreviewImage:
-          Dashboard.insertImage(msg?.data);
-          break;
-        case DashboardMessage.updateMediaMetadata:
-          Dashboard.updateMediaMetadata(msg?.data);
-          break;
-        case DashboardMessage.createMediaFolder:
-          await commands.executeCommand(COMMAND_NAME.createFolder, msg?.data);
-          break;
-        case DashboardMessage.setFramework:
-          Dashboard.setFramework(msg?.data);
-          break;
-        case DashboardMessage.setState:
-          if (msg?.data?.key && msg?.data?.value) {
-            Extension.getInstance().setState(msg?.data?.key, msg?.data?.value, "workspace");
-          }
-          break;
-      }
-    });
-  }
-
-  /**
-   * Reset media array
-   */
-  public static resetMedia() {
-    Dashboard.media = [];
-  }
-
-  public static switchFolder(folderPath: string) {
-    Dashboard.resetMedia();
-    Dashboard.getMedia(0, folderPath);
-  }
-  
-  /**
-   * Insert an image into the front matter or contents
-   * @param data 
-   */
-  private static async insertImage(data: any) {
-    if (data?.file && data?.image) {
-      if (!data?.position) {
-        await commands.executeCommand(`workbench.view.extension.frontmatter-explorer`);
-      }
-
-      await EditorHelper.showFile(data.file);
-      Dashboard._viewData = undefined;
+      Logger.info(`Receiving message from webview: ${msg.command}`);
       
-      const extensionUri = Extension.getInstance().extensionPath;
-      const panel = ExplorerView.getInstance(extensionUri);
-
-      if (data?.position) {
-        const wsFolder = Folders.getWorkspaceFolder();
-        const editor = window.activeTextEditor;
-        const line = data.position.line;
-        const character = data.position.character;
-        if (line) {
-          let imgPath = data.image;
-          const filePath = data.file;
-          const absImgPath = join(parseWinPath(wsFolder?.fsPath || ""), imgPath);
-
-          const imgDir = dirname(absImgPath);
-          const fileDir = dirname(filePath);
-
-          if (imgDir === fileDir) {
-            imgPath = join('/', basename(imgPath));
-
-            // Snippets are already parsed, so update the URL of the image
-            if (data.snippet) {
-              data.snippet = data.snippet.replace(data.image, imgPath);
-            }
-          }
-
-          await editor?.edit(builder => builder.insert(new Position(line, character), data.snippet || `![${data.alt || data.caption || ""}](${imgPath})`));
-        }
-        panel.getMediaSelection();
-      } else {
-        panel.getMediaSelection();
-        panel.updateMetadata({field: data.fieldName, value: data.image });
-      }
-    }
-  }
-
-  /**
-   * Retrieve the settings for the dashboard
-   */
-  private static async getSettings() { 
-    const ext = Extension.getInstance();
-    const wsFolder = Folders.getWorkspaceFolder();
-    const isInitialized = await Template.isInitialized();
-    
-    Dashboard.postWebviewMessage({
-      command: DashboardCommand.settings,
-      data: {
-        beta: ext.isBetaVersion(),
-        wsFolder: wsFolder ? wsFolder.fsPath : '',
-        staticFolder: SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER),
-        folders: Folders.get(),
-        initialized: isInitialized,
-        tags: SettingsHelper.getTaxonomy(TaxonomyType.Tag),
-        categories: SettingsHelper.getTaxonomy(TaxonomyType.Category),
-        openOnStart: SettingsHelper.get(SETTINGS_DASHBOARD_OPENONSTART),
-        versionInfo: ext.getVersion(),
-        pageViewType: await ext.getState<ViewType | undefined>(ExtensionState.PagesView, "workspace"),
-        mediaSnippet: SettingsHelper.get<string[]>(SETTINGS_DASHBOARD_MEDIA_SNIPPET) || [],
-        contentTypes: SettingsHelper.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
-        draftField: SettingsHelper.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
-        customSorting: SettingsHelper.get<SortingSetting[]>(SETTINGS_CONTENT_SORTING),
-        contentFolders: Folders.get(),
-        crntFramework: SettingsHelper.get<string>(SETTINGS_FRAMEWORK_ID),
-        framework: (!isInitialized && wsFolder) ? FrameworkDetector.get(wsFolder.fsPath) : null,
-        dashboardState: {
-          sorting: await ext.getState<ViewType | undefined>(ExtensionState.Dashboard.Sorting, "workspace")
-        }
-      } as Settings
+      DashboardListener.process(msg);
+      ExtensionListener.process(msg);
+      MediaListener.process(msg);
+      PagesListener.process(msg);
+      SettingsListener.process(msg);
     });
   }
 
   /**
-   * Set the current site-generator or framework + related settings
-   * @param frameworkId 
+   * Return the webview
+   * @returns The webview
    */
-  private static setFramework(frameworkId: string | null) {
-    SettingsHelper.update(SETTINGS_FRAMEWORK_ID, frameworkId, true);
-
-    if (frameworkId) {
-      const allFrameworks = FrameworkDetector.getAll();
-      const framework = allFrameworks.find((f: Framework) => f.name === frameworkId);
-      if (framework) {
-        SettingsHelper.update(SETTINGS_CONTENT_STATIC_FOLDER, framework.static, true);
-      } else {
-        SettingsHelper.update(SETTINGS_CONTENT_STATIC_FOLDER, "", true);
-      }
-    }
-  }
-
-  /**
-   * Update a setting from the dashboard
-   */
-  private static async updateSetting(data: { name: string, value: any }) {
-    await SettingsHelper.update(data.name, data.value);
-    Dashboard.getSettings();
-  }
-
-  /**
-   * Retrieve all media files
-   */
-  private static async getMedia(page: number = 0, requestedFolder: string = '') {
-    const wsFolder = Folders.getWorkspaceFolder();
-    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
-    const contentFolders = Folders.get();
-    const viewData = Dashboard.viewData;
-    let selectedFolder = requestedFolder;
-
-    // If the static folder is not set, retreive the last opened location
-    if (!selectedFolder) {
-      const stateValue = await Extension.getInstance().getState<string | undefined>(ExtensionState.SelectedFolder, "workspace");
-
-      if (stateValue !== HOME_PAGE_NAVIGATION_ID) {
-        // Support for page bundles
-        if (viewData?.data?.filePath && viewData?.data?.filePath.endsWith('index.md')) {
-          const folderPath = parse(viewData.data.filePath).dir;
-          selectedFolder = folderPath;
-        } else if (stateValue && existsSync(stateValue)) {
-          selectedFolder = stateValue;
-        }
-      }
-    }
-
-    // Go to the home folder
-    if (selectedFolder === HOME_PAGE_NAVIGATION_ID) {
-      selectedFolder = '';
-    }
-
-    let relSelectedFolderPath = selectedFolder;
-    const parsedPath = parseWinPath(wsFolder?.fsPath || "");
-    if (selectedFolder && selectedFolder.startsWith(parsedPath)) {
-      relSelectedFolderPath = selectedFolder.replace(parsedPath, '');
-    }
-
-    if (relSelectedFolderPath.startsWith('/')) {
-      relSelectedFolderPath = relSelectedFolderPath.substring(1);
-    }
-
-    let allMedia: MediaInfo[] = [];
-
-    if (relSelectedFolderPath) {
-      const files = await workspace.findFiles(join(relSelectedFolderPath, '/*'));
-      const media = Dashboard.filterMedia(files);
-      allMedia = [...media];
-    } else {
-      if (staticFolder) {
-        const folderSearch = join(staticFolder || "", '/*');
-        const files = await workspace.findFiles(folderSearch);
-        const media = Dashboard.filterMedia(files);
-
-        allMedia = [...media];
-      }
-
-      if (contentFolders && wsFolder) {
-        for (let i = 0; i < contentFolders.length; i++) {
-          const contentFolder = contentFolders[i];
-          const relFolderPath = contentFolder.path.substring(wsFolder.fsPath.length + 1);
-          const folderSearch = relSelectedFolderPath ? join(relSelectedFolderPath, '/*') : join(relFolderPath, '/*');
-          const files = await workspace.findFiles(folderSearch);
-          const media = Dashboard.filterMedia(files);
-    
-          allMedia = [...allMedia, ...media];
-        }
-      }
-    }
-
-    allMedia = allMedia.sort((a, b) => {
-      if (b.fsPath < a.fsPath) {
-        return -1;
-      }
-      if (b.fsPath > a.fsPath) {
-        return 1;
-      }
-      return 0;
-    });
-
-    Dashboard.media = Object.assign([], allMedia);
-
-    let files: MediaInfo[] = Dashboard.media;
-
-    // Retrieve the total after filtering and before the slicing happens
-    const total = files.length;
-
-    // Get media set
-    files = files.slice(page * 16, ((page + 1) * 16));
-    files = files.map((file) => {
-      try {
-        const metadata = Dashboard.mediaLib.get(file.fsPath);
-
-        return {
-          ...file,
-          stats: statSync(file.fsPath),
-          dimensions: imageSize(file.fsPath),
-          ...metadata
-        };
-      } catch (e) {
-        return {...file, stats: undefined};
-      }
-    });
-    files = files.filter(f => f.stats !== undefined);
-
-    // Retrieve all the folders
-    let allContentFolders: string[] = [];
-    let allFolders: string[] = [];
-
-    if (selectedFolder) {
-      if (existsSync(selectedFolder)) {
-        allFolders = readdirSync(selectedFolder, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(selectedFolder, dir.name)));
-      }
-    } else {
-      for (const contentFolder of contentFolders) {
-        const contentPath = contentFolder.path;
-        if (contentPath && existsSync(contentPath)) {
-          const subFolders = readdirSync(contentPath, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(contentPath, dir.name)));
-          allContentFolders = [...allContentFolders, ...subFolders];
-        }
-      }
-  
-      const staticPath = join(parseWinPath(wsFolder?.fsPath || ""), staticFolder || "");
-      if (staticPath && existsSync(staticPath)) {
-        allFolders = readdirSync(staticPath, { withFileTypes: true }).filter(dir => dir.isDirectory()).map(dir => parseWinPath(join(staticPath, dir.name)));
-      }
-    }
-
-    // Store the last opened folder
-    await Extension.getInstance().setState(ExtensionState.SelectedFolder, requestedFolder === HOME_PAGE_NAVIGATION_ID ? HOME_PAGE_NAVIGATION_ID : selectedFolder, "workspace");
-
-    Dashboard.postWebviewMessage({
-      command: DashboardCommand.media,
-      data: {
-        media: files,
-        total: total,
-        folders: [...allContentFolders, ...allFolders],
-        selectedFolder
-      } as MediaPaths
-    });
-  }
-
-  /**
-   * Retrieve all the markdown pages
-   */
-  private static async getPages() {
-    const wsFolder = Folders.getWorkspaceFolder();
-
-    const descriptionField = SettingsHelper.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description;
-    const dateField = SettingsHelper.get(SETTING_DATE_FIELD) as string || DefaultFields.PublishingDate;
-    const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
-
-    const folderInfo = await Folders.getInfo();
-    const pages: Page[] = [];
-
-    if (folderInfo) {
-      for (const folder of folderInfo) {
-        for (const file of folder.lastModified) {
-          if (file.fileName.endsWith(`.md`) || file.fileName.endsWith(`.mdx`)) {
-            try {
-              const article = ArticleHelper.getFrontMatterByPath(file.filePath);
-
-              if (article?.data.title) {
-                const page: Page = {
-                  ...article.data,
-                  // FrontMatter properties
-                  fmFolder: folder.title,
-                  fmModified: file.mtime,
-                  fmFilePath: file.filePath,
-                  fmFileName: file.fileName,
-                  fmDraft: ContentType.getDraftStatus(article?.data),
-                  fmYear: article?.data[dateField] ? DateHelper.tryParse(article?.data[dateField])?.getFullYear() : null,
-                  // Make sure these are always set
-                  title: article?.data.title,
-                  slug: article?.data.slug,
-                  date: article?.data[dateField] || "",
-                  draft: article?.data.draft,
-                  description: article?.data[descriptionField] || "",
-                };
-
-                const contentType = ArticleHelper.getContentType(article.data);
-                const previewField = contentType.fields.find(field => field.isPreviewImage && field.type === "image")?.name || "preview";
-
-                if (article?.data[previewField] && wsFolder) {
-                  let fieldValue = article?.data[previewField];
-                  if (fieldValue && Array.isArray(fieldValue)) {
-                    if (fieldValue.length > 0) {
-                      fieldValue = fieldValue[0];
-                    } else {
-                      fieldValue = undefined;
-                    }
-                  }
-
-                  // Revalidate as the array could have been empty
-                  if (fieldValue) {
-                    const staticPath = join(wsFolder.fsPath, staticFolder || "", fieldValue);
-                    const contentFolderPath = join(dirname(file.filePath), fieldValue);
-
-                    let previewUri = null;
-                    if (existsSync(staticPath)) {
-                      previewUri = Uri.file(staticPath);
-                    } else if (existsSync(contentFolderPath)) {
-                      previewUri = Uri.file(contentFolderPath);
-                    }
-
-                    if (previewUri) {
-                      const preview = Dashboard.webview?.webview.asWebviewUri(previewUri);
-                      page[previewField] = preview?.toString() || "";
-                    } else {
-                      page[previewField] = "";
-                    }
-                  }
-                }
-      
-                pages.push(page);
-              }
-            } catch (error: any) {
-              Notifications.error(`File error: ${file.filePath} - ${error?.message || error}`);
-            }
-          }
-        }
-      }
-    }
-
-    Dashboard.postWebviewMessage({
-      command: DashboardCommand.pages,
-      data: pages
-    });
-  }
-
-  /**
-   * Filter the media files
-   */
-  private static filterMedia(files: Uri[]) {
-    return files.filter(file => {
-      const ext = extname(file.fsPath);
-      return ['.jpg', '.jpeg', '.png', '.gif', '.svg'].includes(ext);
-    }).map((file) => ({
-      fsPath: file.fsPath,
-      vsPath: Dashboard.webview?.webview.asWebviewUri(file).toString(),
-      stats: undefined
-    } as MediaInfo));
-  }
-
-  /**
-   * Save the dropped file in the current folder
-   * @param fileData 
-   */
-  private static async saveFile({fileName, contents, folder}: { fileName: string; contents: string; folder: string | null }) {
-    if (fileName && contents) {
-      const wsFolder = Folders.getWorkspaceFolder();
-      const staticFolder = SettingsHelper.get<string>(SETTINGS_CONTENT_STATIC_FOLDER);
-      const wsPath = wsFolder ? wsFolder.fsPath : "";
-      let absFolderPath = join(wsPath, staticFolder || "");
-
-      if (folder) {
-        absFolderPath = folder;
-      }
-
-      if (!existsSync(absFolderPath)) {
-        absFolderPath = join(wsPath, folder || "");
-      }
-
-      if (!existsSync(absFolderPath)) {
-        Notifications.error(`We couldn't find your selected folder.`);
-        return;
-      }
-
-      const staticPath = join(absFolderPath, fileName);
-      const imgData = decodeBase64Image(contents);
-
-      if (imgData) {
-        writeFileSync(staticPath, imgData.data);
-        Notifications.info(`File ${fileName} uploaded to: ${folder}`);
-        
-        const folderPath = `${folder}`;
-        if (Dashboard.timers[folderPath]) {
-          clearTimeout(Dashboard.timers[folderPath]);
-          delete Dashboard.timers[folderPath];
-        }
-        
-        Dashboard.timers[folderPath] = setTimeout(() => {
-          Dashboard.media = [];
-          Dashboard.getMedia(0, folder || "");
-          delete Dashboard.timers[folderPath];
-        }, 500);
-      } else {
-        Notifications.error(`Something went wrong uploading ${fileName}`);
-      }
-    }
-  }
-
-  /**
-   * Delete the selected file
-   * @param fileData 
-   */
-  private static async deleteFile({ file, page, folder }: { file: string; page: number; folder: string | null; }) {
-    if (!file) {
-      return;
-    }
-
-    try {
-      unlinkSync(file);
-
-      Dashboard.media = [];
-      Dashboard.getMedia(page || 0, folder || "");
-    } catch(err) {
-      Notifications.error(`Something went wrong deleting ${basename(file)}`);
-    }
-  }
-
-  /**
-   * Update the metadata of the selected file
-   */
-  private static async updateMediaMetadata({ file, filename, page, folder, ...metadata }: { file:string; filename:string; page: number; folder: string | null; metadata: any; }) {
-    Dashboard.mediaLib.set(file, metadata);
-
-    // Check if filename needs to be updated
-    Dashboard.mediaLib.updateFilename(file, filename);
-
-    Dashboard.getMedia(page || 0, folder || "");
+  public static getWebview() {
+    return Dashboard.webview?.webview;
   }
 
   /**
    * Post data to the dashboard
    * @param msg 
    */
-  private static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) {
+  public static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) {
     if (Dashboard.isDisposed) {
       return;
     }
@@ -662,7 +174,16 @@ export class Dashboard {
    * @param webView 
    */
   private static getWebviewContent(webView: Webview, extensionPath: Uri): string {
-    const scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', 'pages.js'));
+    const dashboardFile = "dashboardWebView.js";
+    const localServerUrl = "http://localhost:9000";
+
+    let scriptUri = "";
+    const isProd = Extension.getInstance().isProductionMode;
+    if (isProd) {
+      scriptUri = webView.asWebviewUri(Uri.joinPath(extensionPath, 'dist', dashboardFile)).toString();
+    } else {
+      scriptUri = `${localServerUrl}/${dashboardFile}`; 
+    }
 
     const nonce = WebviewHelper.getNonce();
 
@@ -670,21 +191,31 @@ export class Dashboard {
     const version = ext.getVersion();
     const isBeta = ext.isBetaVersion();
 
+    const csp = [
+      `default-src 'none';`,
+      `img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'`,
+      `script-src ${isProd ? `'nonce-${nonce}'` : "http://localhost:9000 http://0.0.0.0:9000"}`,
+      `style-src ${webView.cspSource} 'self' 'unsafe-inline'`,
+      `font-src ${webView.cspSource}`,
+      `connect-src https://o1022172.ingest.sentry.io ${isProd ? `` : "ws://localhost:9000 ws://0.0.0.0:9000 http://localhost:9000 http://0.0.0.0:9000"}`
+    ];
+
     return `
       <!DOCTYPE html>
       <html lang="en" style="width:100%;height:100%;margin:0;padding:0;">
       <head>
-        <meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src ${`vscode-file://vscode-app`} ${webView.cspSource} https://api.visitorbadge.io 'self' 'unsafe-inline'; script-src 'nonce-${nonce}'; style-src ${webView.cspSource} 'self' 'unsafe-inline'; font-src ${webView.cspSource}; connect-src https://o1022172.ingest.sentry.io">
+			  <meta charset="UTF-8">
+        <meta http-equiv="Content-Security-Policy" content="${csp.join('; ')}">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
         <title>Front Matter Dashboard</title>
       </head>
       <body style="width:100%;height:100%;margin:0;padding:0;overflow:hidden" class="bg-gray-100 text-vulcan-500 dark:bg-vulcan-500 dark:text-whisper-500">
-        <div id="app" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
+        <div id="app" data-isProd="${isProd}" data-environment="${isBeta ? "BETA" : "main"}" data-version="${version.usedVersion}" style="width:100%;height:100%;margin:0;padding:0;" ${version.usedVersion ? "" : `data-showWelcome="true"`}></div>
 
         <img style="display:none" src="https://api.visitorbadge.io/api/combined?user=estruyf&repo=frontmatter-usage&countColor=%23263759&slug=${`dashboard-${version.installedVersion}`}" alt="Daily usage" />
 
-        <script nonce="${nonce}" src="${scriptUri}"></script>
+        <script ${isProd ? `nonce="${nonce}"` : ""} src="${scriptUri}"></script>
       </body>
       </html>
     `;

src/commands/Diagnostics.ts

@@ -0,0 +1,63 @@
+import { Folders } from "./Folders";
+import { ViewColumn, workspace } from "vscode";
+import ContentProvider from "../providers/ContentProvider";
+import { join } from "path";
+import { ContentFolder } from "../models";
+
+
+export class Diagnostics {
+
+  public static async show() {
+    const folders = Folders.get();
+    const projectName = Folders.getProjectFolderName();
+    const wsFolder = Folders.getWorkspaceFolder();
+
+    const folderData = [];
+    for (const folder of folders) {
+      folderData.push(await Diagnostics.processFolder(folder, projectName));
+    }
+
+    const all = await Diagnostics.allProjectFiles();
+
+    const logging = `# Project name
+
+${projectName}
+
+# Folders
+
+${folders.map(f => `- ${f.title}: "${f.path}"`).join("\n")}
+
+# Workspace folder
+
+${wsFolder ? wsFolder.fsPath : "No workspace folder"}
+
+# Total files
+
+${all}
+
+# Folders to search files
+
+${folderData.join("\n")}
+    `;
+
+    ContentProvider.show(logging, `${projectName} diagnostics`, "markdown", ViewColumn.One);
+  }
+
+  private static async allProjectFiles() {
+    const allFiles = await workspace.findFiles(`**/*.*`);
+    return `Total files found: ${allFiles.length}`;
+  }
+
+  private static async processFolder(folder: ContentFolder, projectName: string) {
+    let projectStart = folder.path.split(projectName).pop();
+    projectStart = projectStart || "";
+    projectStart = projectStart?.replace(/\\/g, '/');
+    projectStart = projectStart?.startsWith('/') ? projectStart.substr(1) : projectStart;
+
+    const mdFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.md'));
+    const mdxFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.mdx'));
+    const markdownFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.markdown'));
+
+    return `- Project start length: ${projectStart.length} | Search in: "${join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.*')}" | mdFiles: ${mdFiles.length} | mdxFiles: ${mdxFiles.length} | markdownFiles: ${markdownFiles.length}`;
+  }
+}

src/commands/Folders.ts

@@ -11,6 +11,8 @@ import { existsSync, mkdirSync } from 'fs';
 import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
 import { parseWinPath } from '../helpers/parseWinPath';
+import { MediaHelpers } from '../helpers/MediaHelpers';
+import { MediaListener, PagesListener } from '../listeners';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
@@ -62,7 +64,8 @@ export class Folders {
     }
 
     if (Dashboard.isOpen) {
-      Dashboard.switchFolder(folderName);
+      MediaHelpers.resetMedia();
+      MediaListener.sendMediaFiles(0, folderName);
     }
   }
 
@@ -207,19 +210,23 @@ export class Folders {
         try {
           const projectName = Folders.getProjectFolderName();
           let projectStart = folder.path.split(projectName).pop();
+          
           if (projectStart) {
             projectStart = projectStart.replace(/\\/g, '/');
             projectStart = projectStart.startsWith('/') ? projectStart.substr(1) : projectStart;
             const mdFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.md'));
+            const markdownFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.markdown'));
             const mdxFiles = await workspace.findFiles(join(projectStart, folder.excludeSubdir ? '/' : '**/', '*.mdx'));
-            let files = [...mdFiles, ...mdxFiles];
+            let files = [...mdFiles, ...markdownFiles, ...mdxFiles];
             if (files) {
               let fileStats: FileInfo[] = [];
 
               for (const file of files) {
                 try {
                   const fileName = basename(file.fsPath);
+                  
                   const stats = await workspace.fs.stat(file);
+
                   fileStats.push({
                     filePath: file.fsPath,
                     fileName,
@@ -281,6 +288,9 @@ export class Folders {
     }));
 
     await Settings.update(SETTINGS_CONTENT_PAGE_FOLDERS, folderDetails, true);
+
+    // Reinitialize the folder listeners
+    PagesListener.startWatchers();
   }
 
   /**

src/commands/Project.ts

@@ -5,6 +5,7 @@ import { Notifications } from "../helpers/Notifications";
 import { Template } from "./Template";
 import { Folders } from "./Folders";
 import { Settings } from "../helpers";
+import { SETTINGS_CONTENT_DEFAULT_FILETYPE } from "../constants";
 
 export class Project {
 
@@ -27,6 +28,7 @@ categories: []
   public static async init(sampleTemplate: boolean = true) {
     try {
       Settings.createTeamSettings();
+      const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
 
       const folder = Template.getSettings();
       const templatePath = Project.templatePath();
@@ -35,7 +37,7 @@ categories: []
         return;
       }
       
-      const article = Uri.file(join(templatePath.fsPath, "article.md"));
+      const article = Uri.file(join(templatePath.fsPath, `article.${fileType}`));
 
       if (!fs.existsSync(templatePath.fsPath)) {
         await workspace.fs.createDirectory(templatePath);

src/commands/Template.ts

@@ -2,7 +2,7 @@ import { Questions } from './../helpers/Questions';
 import * as vscode from 'vscode';
 import * as path from 'path';
 import * as fs from 'fs';
-import { SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
@@ -11,6 +11,8 @@ import { Project } from './Project';
 import { Folders } from './Folders';
 import { ContentType } from '../helpers/ContentType';
 import { ContentType as IContentType } from '../models';
+import { PagesListener } from '../listeners';
+import { extname } from 'path';
 
 export class Template {
 
@@ -49,6 +51,7 @@ export class Template {
   public static async generate() {
     const folder = Template.getSettings();
     const editor = vscode.window.activeTextEditor;
+    const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
 
     if (folder && editor && ArticleHelper.isMarkdownFile()) {
       const article = ArticleHelper.getFrontMatter(editor);
@@ -82,7 +85,7 @@ export class Template {
       if (templatePath) {
         let fileContents = ArticleHelper.stringifyFrontMatter(keepContents === "no" ? "" : clonedArticle.content, clonedArticle.data);
 
-        const templateFile = path.join(templatePath.fsPath, `${titleValue}.md`);
+        const templateFile = path.join(templatePath.fsPath, `${titleValue}.${fileType}`);
         fs.writeFileSync(templateFile, fileContents, { encoding: "utf-8" });
 
         Notifications.info(`Template created and is now available in your ${folder} folder.`);
@@ -139,7 +142,8 @@ export class Template {
       contentType = contentTypes?.find(t => t.name === templateData.data.type);
     }
 
-    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue);
+    const fileExtension = extname(template.fsPath).replace(".", "");
+    let newFilePath: string | undefined = ArticleHelper.createContent(contentType, folderPath, titleValue, fileExtension);
     if (!newFilePath) {
       return;
     }
@@ -176,6 +180,9 @@ export class Template {
     }
 
     Notifications.info(`Your new content has been created.`);
+
+    // Trigger a refresh for the dashboard
+    PagesListener.refresh();
   }
 
   /**

src/commands/Wysiwyg.ts

@@ -0,0 +1,230 @@
+import { commands, window, Selection, QuickPickItem } from "vscode";
+import { COMMAND_NAME, CONTEXT, SETTINGS_CONTENT_WYSIWYG } from "../constants";
+import { Settings } from "../helpers";
+
+enum MarkupType {
+  bold = 1,
+  italic,
+  strikethrough,
+  code,
+  codeblock,
+  blockquote,
+  heading,
+  unorderedList,
+  orderedList,
+  taskList
+}
+
+export class Wysiwyg {
+
+  /**
+   * Registers the markup commands for the WYSIWYG controls
+   * @param subscriptions 
+   * @returns 
+   */
+  public static async registerCommands(subscriptions: any) {
+
+    const wysiwygEnabled = Settings.get(SETTINGS_CONTENT_WYSIWYG);
+
+    if (!wysiwygEnabled) {
+      return;
+    }
+
+    await commands.executeCommand('setContext', CONTEXT.wysiwyg, true);
+
+    // Surrounding markup
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.bold, () => this.addMarkup(MarkupType.bold)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.italic, () => this.addMarkup(MarkupType.italic)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.strikethrough, () => this.addMarkup(MarkupType.strikethrough)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.code, () => this.addMarkup(MarkupType.code)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.codeblock, () => this.addMarkup(MarkupType.codeblock)));
+
+    // Prefix markup
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.heading, () => this.addMarkup(MarkupType.heading)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.blockquote, () => this.addMarkup(MarkupType.blockquote)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.unorderedlist, () => this.addMarkup(MarkupType.unorderedList)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.orderedlist, () => this.addMarkup(MarkupType.orderedList)));
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.taskList, () => this.addMarkup(MarkupType.taskList)));
+
+    // Options
+    subscriptions.push(commands.registerCommand(COMMAND_NAME.options, async () => {
+      const qpItems: QuickPickItem[] = [
+        { label: "$(list-unordered) Unordered list", detail: "Add an unordered list", alwaysShow: true,  },
+        { label: "$(list-ordered) Ordered list", detail: "Add an ordered list", alwaysShow: true },
+        { label: "$(tasklist) Task list", detail: "Add a task list", alwaysShow: true },
+        { label: "$(code) Code", detail: "Add inline code snippet", alwaysShow: true },
+        { label: "$(symbol-namespace) Code block", detail: "Add a code block", alwaysShow: true },
+      ]
+
+      const option = await window.showQuickPick([ ...qpItems ], {  
+        placeHolder: "Which type of markup would you like to insert?", 
+        canPickMany: false, 
+        ignoreFocusOut: false,
+      });
+
+      if (option) {
+        if (option.label === qpItems[0].label) {
+          await this.addMarkup(MarkupType.unorderedList);
+        } else if (option.label === qpItems[1].label) {
+          await this.addMarkup(MarkupType.orderedList);
+        } else if (option.label === qpItems[2].label) {
+          await this.addMarkup(MarkupType.taskList);
+        } else if (option.label === qpItems[3].label) {
+          await this.addMarkup(MarkupType.code);
+        } else if (option.label === qpItems[4].label) {
+          await this.addMarkup(MarkupType.codeblock);
+        }
+      }
+    }));
+  }
+
+  /**
+   * Add the markup to the content
+   * @param type 
+   * @returns 
+   */
+  private static async addMarkup(type: MarkupType) {
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const selection = editor.selection;
+    const hasTextSelection = !selection.isEmpty;
+
+    const markers = this.getMarkers(type);
+    if (!markers) {
+      return;
+    }
+
+    const crntSelection = selection.active;
+
+    if (hasTextSelection) {
+      // Replace the selection and surround with the markup
+      const selectionText = editor.document.getText(selection);
+      const txt = await this.insertText(markers, type, selectionText);
+      
+      editor.edit(builder => {
+        builder.replace(selection, txt);
+      });
+    } else {
+      const txt = await this.insertText(markers, type);
+        
+      // Insert the markers where cursor is located.
+      const markerLength = this.isMarkupWrapping(type) ? txt.length + 1 : markers.length;
+      let newPosition = crntSelection.with(crntSelection.line, crntSelection.character + markerLength);
+
+      await editor.edit(builder => {
+        builder.insert(newPosition, txt);
+      });
+
+      if (type === MarkupType.codeblock) {
+        newPosition = crntSelection.with(crntSelection.line + 1, 0);
+      }
+
+      editor.selection = new Selection(newPosition, newPosition);
+    }
+  }
+
+  /**
+   * Check if the text will be wrapped
+   * @param type 
+   * @returns 
+   */
+  private static isMarkupWrapping(type: MarkupType) { 
+    return (
+      type === MarkupType.blockquote || 
+      type === MarkupType.heading ||
+      type === MarkupType.unorderedList ||
+      type === MarkupType.orderedList ||
+      type === MarkupType.taskList
+    );
+  }
+
+  /**
+   * Insert text at the current cursor position
+   */
+  private static async insertText(marker: string | undefined, type: MarkupType, text: string | null = null) {
+    const crntText = text || this.lineBreak(type);
+
+    if (this.isMarkupWrapping(type)) {
+      if (type === MarkupType.heading) {
+        const headingLvl = await window.showQuickPick([
+          "Heading 1", 
+          "Heading 2", 
+          "Heading 3", 
+          "Heading 4", 
+          "Heading 5", 
+          "Heading 6"
+        ], {  
+          canPickMany: false, 
+          placeHolder: "Which heading level do you want to insert?", 
+          ignoreFocusOut: false 
+        });
+
+        if (headingLvl) {
+          const headingNr = parseInt(headingLvl.replace("Heading ", ""));
+          return `${Array(headingNr + 1).join(marker)} ${crntText}`;
+        }
+      }
+
+      if (type === MarkupType.unorderedList || type === MarkupType.taskList) {
+        const lines = crntText.split("\n").map(line => `${marker} ${line}`);
+        return lines.join("\n");
+      }
+
+      if (type === MarkupType.orderedList) {
+        const lines = crntText.split("\n").map((line, idx) => `${idx+1}. ${line}`);
+        return lines.join("\n");
+      }
+
+      return `${marker} ${crntText}`;
+    } else {
+      return `${marker}${crntText}${marker}`;
+    }
+  }
+
+  /**
+   * Check if linebreak needs to be added
+   * @param type 
+   * @returns 
+   */
+  private static lineBreak(type: MarkupType) {
+    if (type === MarkupType.codeblock) {
+      return `\n\n`;
+    }
+    return "";
+  }
+
+  /**
+   * Retrieve the type of markers
+   * @param type 
+   * @returns 
+   */
+  private static getMarkers(type: MarkupType) {
+    switch(type) {
+      case MarkupType.bold:
+        return `**`;
+      case MarkupType.italic:
+        return `*`;
+      case MarkupType.strikethrough:
+        return `~~`;
+      case MarkupType.code:
+        return "`";
+      case MarkupType.codeblock:
+        return "```";
+      case MarkupType.blockquote:
+        return ">";
+      case MarkupType.heading:
+        return "#";
+      case MarkupType.unorderedList:
+        return "-";
+      case MarkupType.orderedList:
+        return "1.";
+      case MarkupType.taskList:
+        return "- [ ]";
+      default:
+        return;
+    }
+  }
+}

src/components/icons/CompressIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface ICompressIconProps {
+  className?: string;
+}
+
+export const CompressIcon: React.FunctionComponent<ICompressIconProps> = ({className}: React.PropsWithChildren<ICompressIconProps>) => {
+  return (
+    <svg className={className || ""} aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path fill="currentColor" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path>
+    </svg>
+  );
+};

src/constants/ContentType.ts

@@ -23,7 +23,7 @@ export const DEFAULT_CONTENT_TYPE: ContentType = {
       "type": "datetime"
     },
     {
-      "title": "Article preview",
+      "title": "Content preview",
       "name": "preview",
       "type": "image"
     },

src/constants/Extension.ts

@@ -28,7 +28,23 @@ export const COMMAND_NAME = {
   collapseSections: getCommandName("collapseSections"),
   preview: getCommandName("preview"),
   dashboard: getCommandName("dashboard"),
+  dashboardMedia: getCommandName("dashboard.media"),
+  dashboardClose: getCommandName("dashboard.close"),
   promote: getCommandName("promoteSettings"),
   insertImage: getCommandName("insertImage"),
   createFolder: getCommandName("createFolder"),
+  diagnostics: getCommandName("diagnostics"),
+
+  // WYSIWYG
+  bold: getCommandName("markup.bold"),
+  italic: getCommandName("markup.italic"),
+  strikethrough: getCommandName("markup.strikethrough"),
+  code: getCommandName("markup.code"),
+  codeblock: getCommandName("markup.codeblock"),
+  heading: getCommandName("markup.heading"),
+  blockquote: getCommandName("markup.blockquote"),
+  unorderedlist: getCommandName("markup.unorderedlist"),
+  orderedlist: getCommandName("markup.orderedlist"),
+  taskList: getCommandName("markup.tasklist"),
+  options: getCommandName("markup.options"),
 };

src/constants/ExtensionState.ts

@@ -7,6 +7,11 @@ export const ExtensionState = {
   MoveTemplatesFolder: `frontMatter:Templates:Move`,
 
   Dashboard: {
-    Sorting: `frontMatter:Dashboard:Sorting`,
+    Contents: {
+      Sorting: `frontMatter:Dashboard:Contents:Sorting`,
+    },
+    Media: {
+      Sorting: `frontMatter:Dashboard:Media:Sorting`,
+    }
   }
 };

src/constants/context.ts

@@ -2,5 +2,7 @@ export const CONTEXT = {
   canInit: "frontMatterCanInit",
   canOpenPreview: "frontMatterCanOpenPreview",
   canOpenDashboard: "frontMatterCanOpenDashboard",
-  isEnabled: "frontMatter:enabled"
+  isEnabled: "frontMatter:enabled",
+  isDashboardOpen: "frontMatter:dashboard:open",
+  wysiwyg: "frontMatter:markdown:wysiwyg",
 };

src/constants/settings.ts

@@ -2,8 +2,12 @@ export const EXTENSION_NAME = "Front Matter";
 
 export const CONFIG_KEY = "frontMatter";
 
+export const SETTING_GLOBAL_NOTIFICATIONS = "global.notifications";
+
 export const SETTING_TAXONOMY_TAGS = "taxonomy.tags";
 export const SETTING_TAXONOMY_CATEGORIES = "taxonomy.categories";
+export const SETTING_TAXONOMY_CUSTOM = "taxonomy.customTaxonomy";
+
 export const SETTING_DATE_FORMAT = "taxonomy.dateFormat";
 export const SETTING_COMMA_SEPARATED_FIELDS = "taxonomy.commaSeparatedFields";
 export const SETTING_TAXONOMY_CONTENT_TYPES = "taxonomy.contentTypes";
@@ -41,6 +45,12 @@ export const SETTINGS_CONTENT_STATIC_FOLDER = "content.publicFolder";
 export const SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT = "content.fmHighlight";
 export const SETTINGS_CONTENT_DRAFT_FIELD = "content.draftField";
 export const SETTINGS_CONTENT_SORTING = "content.sorting";
+export const SETTINGS_CONTENT_WYSIWYG = "content.wysiwyg";
+
+export const SETTINGS_CONTENT_SORTING_DEFAULT = "content.defaultSorting";
+export const SETTINGS_MEDIA_SORTING_DEFAULT = "content.defaultSorting";
+
+export const SETTINGS_CONTENT_DEFAULT_FILETYPE = "content.defaultFileType";
 
 export const SETTINGS_DASHBOARD_OPENONSTART = "dashboard.openOnStart";
 export const SETTINGS_DASHBOARD_MEDIA_SNIPPET = "dashboard.mediaSnippet";

src/dashboardWebView/DashboardCommand.ts

@@ -3,5 +3,6 @@ export enum DashboardCommand {
   pages = "pages",
   settings = "settings",
   media = "media",
-  viewData = "viewData"
+  viewData = "viewData",
+  mediaUpdate = "mediaUpdate"
 }

src/dashboardWebView/DashboardMessage.ts

@@ -20,4 +20,5 @@ export enum DashboardMessage {
   createMediaFolder = 'createMediaFolder',
   setFramework = 'setFramework',
   setState = 'setState',
+  runCustomScript = 'runCustomScript',
 }

src/dashboardWebView/components/ChoiceButton.tsx

@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/outline';
+import {ChevronDownIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { MenuItem, MenuItems } from './Menu';
 
@@ -28,7 +28,7 @@ export const ChoiceButton: React.FunctionComponent<IChoiceButtonProps> = ({onCli
 
       <Menu as="span" className="-ml-px relative block">
         <Menu.Button 
-          className="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
+          className="h-full inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-700 hover:bg-teal-800 focus:outline-none disabled:bg-gray-500"
           disabled={disabled}>
           <span className="sr-only">Open options</span>
           <ChevronDownIcon className="h-5 w-5" aria-hidden="true" />

src/dashboardWebView/components/Contents/Contents.tsx

@@ -6,6 +6,7 @@ import { Header } from '../Header';
 import { Overview } from './Overview';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
+import usePages from '../../hooks/usePages';
 
 export interface IContentsProps {
   pages: Page[];
@@ -14,23 +15,22 @@ export interface IContentsProps {
 
 export const Contents: React.FunctionComponent<IContentsProps> = ({pages, loading}: React.PropsWithChildren<IContentsProps>) => {
   const settings = useRecoilValue(SettingsSelector);
+  const { pageItems } = usePages(pages);
 
-  const pageFolders = [...new Set(pages.map(page => page.fmFolder))];
+  const pageFolders = [...new Set(pageItems.map(page => page.fmFolder))];
 
   return (
-    <main className={`h-full w-full`}>
-      <div className="flex flex-col h-full overflow-auto">
-        <Header 
-          folders={pageFolders}
-          totalPages={pages.length}
-          settings={settings} />
+    <div className="flex flex-col h-full overflow-auto">
+      <Header 
+        folders={pageFolders}
+        totalPages={pageItems.length}
+        settings={settings} />
 
-        <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
-          { loading ? <Spinner /> : <Overview pages={pages} settings={settings} /> }
-        </div>
-
-        <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+      <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4">
+        { loading ? <Spinner /> : <Overview pages={pageItems} settings={settings} /> }
       </div>
-    </main>
+
+      <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+    </div>
   );
 };

src/dashboardWebView/components/Contents/Item.tsx

@@ -3,11 +3,12 @@ import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
-import { SettingsSelector, ViewSelector, ViewType } from '../../state';
+import { SettingsSelector, ViewSelector } from '../../state';
 import { DateField } from '../DateField';
 import { Status } from '../Status';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import useContentType from '../../../hooks/useContentType';
+import { DashboardViewType } from '../../models';
 
 export interface IItemProps extends Page {}
 
@@ -22,10 +23,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
     Messenger.send(DashboardMessage.openFile, fmFilePath);
   };
 
-  if (view === ViewType.Grid) {
+  if (view === DashboardViewType.Grid) {
     return (
       <li className="relative">
-        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left overflow-hidden shadow-md hover:shadow-xl dark:hover:bg-vulcan-100`}
+        <button className={`group cursor-pointer flex flex-wrap items-start content-start h-full w-full bg-gray-50 dark:bg-vulcan-200 text-vulcan-500 dark:text-whisper-500 text-left overflow-hidden shadow-md hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-100 dark:border-vulcan-50`}
                 onClick={openFile}>
           <div className="relative h-36 w-full overflow-hidden border-b border-gray-100 dark:border-vulcan-100 dark:group-hover:border-vulcan-200">
             {
@@ -53,7 +54,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
         </button>
       </li>
     );
-  } else if (view === ViewType.List) {
+  } else if (view === DashboardViewType.List) {
     return (
       <li className="relative">
         <button className={`px-5 cursor-pointer w-full text-left grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8 py-2 border-b border-gray-300 hover:bg-gray-200 dark:border-vulcan-50 dark:hover:bg-vulcan-50 hover:bg-opacity-70`} onClick={openFile}>

src/dashboardWebView/components/Contents/List.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
-import { ViewSelector, ViewType } from '../../state';
+import { DashboardViewType } from '../../models';
+import { ViewSelector } from '../../state';
 
 export interface IListProps {}
 
@@ -8,15 +9,15 @@ export const List: React.FunctionComponent<IListProps> = ({children}: React.Prop
   const view = useRecoilValue(ViewSelector);
 
   let className = '';
-  if (view === ViewType.Grid) {
+  if (view === DashboardViewType.Grid) {
     className = `grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`;
-  } else if (view === ViewType.List) {
+  } else if (view === DashboardViewType.List) {
     className = `-mx-4`;
   }
 
   return (
     <ul role="list" className={className}>
-      {view === ViewType.List && (
+      {view === DashboardViewType.List && (
         <li className="px-5 relative uppercase text-vulcan-100 dark:text-whisper-900 py-2 border-b border-vulcan-50">
           <div className={`grid grid-cols-12 gap-x-4 sm:gap-x-6 xl:gap-x-8`}>
             <div className="col-span-8">

src/dashboardWebView/components/Contents/Overview.tsx

@@ -1,5 +1,5 @@
 import { Disclosure } from '@headlessui/react';
-import { ChevronRightIcon } from '@heroicons/react/solid';
+import {ChevronRightIcon} from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilValue } from 'recoil';
 import { groupBy } from '../../../helpers/GroupBy';

src/dashboardWebView/components/Dashboard.tsx

@@ -2,12 +2,12 @@ import * as React from 'react';
 import { Spinner } from './Spinner';
 import useMessages from '../hooks/useMessages';
 import useDarkMode from '../../hooks/useDarkMode';
-import usePages from '../hooks/usePages';
 import { WelcomeScreen } from './WelcomeScreen';
 import { useRecoilValue } from 'recoil';
 import { DashboardViewSelector } from '../state';
 import { Contents } from './Contents/Contents';
 import { Media } from './Media/Media';
+import { NavigationType } from '../models';
 
 export interface IDashboardProps {
   showWelcome: boolean;
@@ -15,7 +15,6 @@ export interface IDashboardProps {
 
 export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome}: React.PropsWithChildren<IDashboardProps>) => {
   const { loading, pages, settings } = useMessages();
-  const { pageItems } = usePages(pages);
   const view = useRecoilValue(DashboardViewSelector);
   useDarkMode();
 
@@ -31,9 +30,15 @@ export const Dashboard: React.FunctionComponent<IDashboardProps> = ({showWelcome
     return <WelcomeScreen settings={settings} />;
   }
 
-  if (view === 'media') {
-    return <Media />;
-  }
-
-  return <Contents pages={pageItems} loading={loading} />;
+  return (
+    <main className={`h-full w-full`}>
+      {
+        view === NavigationType.Media ? (
+          <Media />
+        ) : (
+          <Contents pages={pages} loading={loading} />
+        )
+      }
+    </main>
+  );
 };

src/dashboardWebView/components/Header/Breadcrumb.tsx

@@ -4,23 +4,29 @@ import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { HOME_PAGE_NAVIGATION_ID } from '../../../constants';
 import { parseWinPath } from '../../../helpers/parseWinPath';
-import { SelectedMediaFolderAtom, SettingsAtom } from '../../state';
+import { SearchAtom, SelectedMediaFolderAtom, SettingsAtom } from '../../state';
 
 export interface IBreadcrumbProps {}
 
 export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: React.PropsWithChildren<IBreadcrumbProps>) => {
   const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
-  const settings = useRecoilValue(SettingsAtom);
+  const [ , setSearchValue ] = useRecoilState(SearchAtom);
   const [ folders, setFolders ] = React.useState<string[]>([]);
+  const settings = useRecoilValue(SettingsAtom);
 
-  if (!settings?.wsFolder) {
-    return null;
+  const updateFolder = (folder: string) => {
+    setSearchValue('');
+    setSelectedFolder(folder);
   }
 
   React.useEffect(() => {
+    if (!settings) {
+      return;
+    }
+
     const { wsFolder, staticFolder, contentFolders } = settings;
 
-    const isValid = (folderPath: string) => {      
+    const isValid = (folderPath: string) => {
       if (staticFolder) {
         const staticPath = parseWinPath(join(wsFolder, staticFolder)) as string;
         const relPath = folderPath.replace(staticPath, '') as string;
@@ -31,7 +37,7 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
           return false;
         }
       }
-1
+
       for (let i = 0; i < contentFolders.length; i++) {
         const folder = contentFolders[i];
         const contentFolder = parseWinPath(folder.path) as string;
@@ -60,41 +66,40 @@ export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = (props: Rea
   
       setFolders(allFolders);
     }
-  }, [selectedFolder]);
-
+  }, [selectedFolder, settings]);
+  
   return (
-    <nav className="bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex py-2" aria-label="Breadcrumb">
-      <ol role="list" className="w-full mx-auto flex space-x-4 px-5">
-        <li className="flex">
+    <ol role="list" className="flex space-x-4 px-5 flex-1">
+      <li className="flex">
+        <div className="flex items-center">
+          <button onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)} className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500">
+            <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
+            <span className="sr-only">Home</span>
+          </button>
+        </div>
+      </li>
+
+      {folders.map((folder) => (
+        <li key={folder} className="flex">
           <div className="flex items-center">
-            <button onClick={() => setSelectedFolder(HOME_PAGE_NAVIGATION_ID)} className="text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500">
-              <CollectionIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
-              <span className="sr-only">Home</span>
+            <svg
+              className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
+              xmlns="http://www.w3.org/2000/svg"
+              fill="currentColor"
+              viewBox="0 0 20 20"
+              aria-hidden="true"
+            >
+              <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
+            </svg>
+            <button
+              onClick={() => updateFolder(folder)}
+              className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
+            >
+              {basename(folder)}
             </button>
           </div>
         </li>
-        {folders.map((folder) => (
-          <li key={folder} className="flex">
-            <div className="flex items-center">
-              <svg
-                className="flex-shrink-0 h-5 w-5 text-gray-300 dark:text-whisper-900"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-                aria-hidden="true"
-              >
-                <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
-              </svg>
-              <button
-                onClick={() => setSelectedFolder(folder)}
-                className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500"
-              >
-                {basename(folder)}
-              </button>
-            </div>
-          </li>
-        ))}
-      </ol>
-    </nav>
+      ))}
+    </ol>
   );
 };

src/dashboardWebView/components/Header/ClearFilters.tsx

@@ -1,4 +1,4 @@
-import { XCircleIcon } from '@heroicons/react/solid';
+import {XCircleIcon} from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilValue, useResetRecoilState } from 'recoil';
 import { FolderSelector, TagSelector, CategorySelector, SortingAtom, FolderAtom, DEFAULT_FOLDER_STATE, TagAtom, CategoryAtom, DEFAULT_TAG_STATE, DEFAULT_CATEGORY_STATE } from '../../state';

src/dashboardWebView/components/Header/Filter.tsx

@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react';
-import { FilterIcon } from '@heroicons/react/solid';
+import {FilterIcon} from '@heroicons/react/solid';
 import * as React from 'react';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 

src/dashboardWebView/components/Header/Header.tsx

@@ -3,21 +3,21 @@ import { Sorting } from './Sorting';
 import { Searchbox } from './Searchbox';
 import { Filter } from './Filter';
 import { Folders } from './Folders';
-import { Settings } from '../../models';
+import { Settings, NavigationType } from '../../models';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Startup } from '../Startup';
 import { Navigation } from '../Navigation';
 import { Grouping } from '.';
 import { ViewSwitch } from './ViewSwitch';
-import { useRecoilState } from 'recoil';
-import { CategoryAtom, DashboardViewAtom, TagAtom } from '../../state';
+import { useRecoilState, useResetRecoilState } from 'recoil';
+import { CategoryAtom, DashboardViewAtom, SortingAtom, TagAtom } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { ClearFilters } from './ClearFilters';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
-import { PhotographIcon } from '@heroicons/react/outline';
-import { Pagination } from '../Media/Pagination';
+import {PhotographIcon} from '@heroicons/react/outline';
+import { MediaHeaderTop } from '../Media/MediaHeaderTop';
 import { ChoiceButton } from '../ChoiceButton';
-import { Breadcrumb } from './Breadcrumb';
+import { MediaHeaderBottom } from '../Media/MediaHeaderBottom';
 
 export interface IHeaderProps {
   settings: Settings | null;
@@ -33,6 +33,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
   const [ crntTag, setCrntTag ] = useRecoilState(TagAtom);
   const [ crntCategory, setCrntCategory ] = useRecoilState(CategoryAtom);
   const [ view, setView ] = useRecoilState(DashboardViewAtom);
+  const resetSorting = useResetRecoilState(SortingAtom)
 
   const createContent = () => {
     Messenger.send(DashboardMessage.createContent);
@@ -46,22 +47,31 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
     Messenger.send(DashboardMessage.createByTemplate);
   };
 
+  const updateView = (view: NavigationType) => {
+    setView(view);
+    resetSorting();
+  }
+
   return (
     <div className={`w-full sticky top-0 z-40 bg-gray-100 dark:bg-vulcan-500`}>
-      
-      <div className={`px-4 bg-gray-50 dark:bg-vulcan-50 border-b-2 border-gray-200 dark:border-vulcan-200`}>
-        <div className={`flex items-center justify-start`}>
-          <button className={`p-2 flex items-center ${view === "contents" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => setView("contents")}>
-            <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
-          </button>
-          <button className={`p-2 flex items-center ${view === "media" ? "bg-gray-200 dark:bg-vulcan-200" : ""} hover:bg-gray-100 dark:hover:bg-vulcan-100`} onClick={() => setView("media")}>
-            <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
-          </button>
-        </div>
+
+      <div className="mb-0 border-b bg-gray-100 dark:bg-vulcan-500 border-gray-200 dark:border-vulcan-300 h-12">
+        <ul className="flex items-center justify-start h-full -mb-px" data-tabs-toggle="#myTabContent" role="tablist">
+          <li className="mr-2" role="presentation">
+            <button className={`flex items-center py-2 px-4 text-sm font-medium text-center border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300  dark:hover:text-gray-300 ${view === NavigationType.Contents ? "border-vulcan-500 text-vulcan-500  dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} type="button" role="tab" aria-controls="profile" aria-selected="false" onClick={() => updateView(NavigationType.Contents)}>
+              <MarkdownIcon className={`h-6 w-auto mr-2`} /><span>Contents</span>
+            </button>
+          </li>
+          <li className="mr-2" role="presentation">
+            <button className={`flex items-center py-2 px-4 text-sm font-medium text-center text-gray-500 border-b-2 border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300 ${view === NavigationType.Media ? "border-vulcan-500 text-vulcan-500 dark:border-whisper-500 dark:text-whisper-500" : "text-gray-500 dark:text-gray-400"}`} type="button" role="tab" aria-controls="dashboard" aria-selected="true" onClick={() => updateView(NavigationType.Media)}>
+              <PhotographIcon className={`h-6 w-auto mr-2`} /><span>Media</span>
+            </button>
+          </li>
+        </ul>
       </div>
 
       {
-        view === "contents" && (
+        view === NavigationType.Contents && (
           <>
             <div className={`px-4 mt-3 mb-2 flex items-center justify-between`}>
               <Searchbox />
@@ -95,7 +105,7 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
               </div>
             </div>
 
-            <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end space-x-4 lg:space-x-6 xl:space-x-8 bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100`}>
+            <div className={`py-4 px-5 w-full flex items-center justify-between lg:justify-end bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100 space-x-4 lg:space-x-6 xl:space-x-8`}>
               <ClearFilters />
 
               <Folders />
@@ -106,17 +116,18 @@ export const Header: React.FunctionComponent<IHeaderProps> = ({totalPages, folde
 
               <Grouping />
 
-              <Sorting />
+              <Sorting view={NavigationType.Contents} />
             </div>
           </>
         )
       }
 
       {
-        view === "media" && (
+        view === NavigationType.Media && (
           <>
-            <Pagination />
-            <Breadcrumb />
+            <MediaHeaderTop />
+            
+            <MediaHeaderBottom />
           </>
         )
       }

src/dashboardWebView/components/Header/Pagination.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { LIMIT } from '../../hooks/useMedia';
+import { MediaTotalSelector, PageAtom } from '../../state';
+import { PaginationButton } from './PaginationButton';
+
+export interface IPaginationProps {}
+
+export const Pagination: React.FunctionComponent<IPaginationProps> = (props: React.PropsWithChildren<IPaginationProps>) => {
+  const [ page, setPage ] = useRecoilState(PageAtom);
+  const totalMedia = useRecoilValue(MediaTotalSelector);
+
+  const totalPages = Math.ceil(totalMedia / LIMIT) - 1;
+
+  const getButtons = (): number[] => {
+    const maxButtons = 5;
+    const buttons: number[] = [];
+    const start = page - maxButtons;
+    const end = page + maxButtons;
+
+    for (let i = start; i <= end; i++) {
+      if (i >= 0 && i <= totalPages) {
+        buttons.push(i);
+      }
+    }
+    return buttons;
+  };
+  
+  return (
+    <div className="flex justify-between items-center sm:justify-end space-x-2 text-sm">
+      <PaginationButton
+        title="First"
+        disabled={page === 0}
+        onClick={() => {
+          if (page > 0) {
+            setPage(0)
+          }
+        }} />
+
+      <PaginationButton
+        title="Previous"
+        disabled={page === 0}
+        onClick={() => {
+          if (page > 0) {
+            setPage(page - 1)
+          }
+        }} />
+      
+      {getButtons().map((button) => (
+        <button
+          key={button}
+          disabled={button === page}
+          onClick={() => {
+            setPage(button)
+          }
+          }
+          className={`${page === button ? 'bg-gray-200 px-2 text-vulcan-500' : 'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500'} max-h-8`}
+        >{button + 1}</button>
+      ))}
+
+      <PaginationButton
+        title="Next"
+        disabled={page >= totalPages}
+        onClick={() => setPage(page + 1)} />
+
+      <PaginationButton
+        title="Last"
+        disabled={page >= totalPages}
+        onClick={() => setPage(totalPages)} />
+    </div>
+  );
+};

src/dashboardWebView/components/Header/PaginationStatus.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { MediaTotalSelector, PageAtom, SearchAtom, SelectedMediaFolderSelector } from '../../state';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { RefreshIcon } from '@heroicons/react/outline';
+import { LIMIT } from '../../hooks/useMedia';
+
+export interface IPaginationStatusProps {}
+
+export const PaginationStatus: React.FunctionComponent<IPaginationStatusProps> = (props: React.PropsWithChildren<IPaginationStatusProps>) => {
+  const totalMedia = useRecoilValue(MediaTotalSelector);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const [ page, setPage ] = useRecoilState(PageAtom);
+  const [ , setSearch ] = useRecoilState(SearchAtom);
+
+  const getTotalPage = () => {
+    const mediaItems = ((page + 1) * LIMIT);
+    if (totalMedia < mediaItems) {
+      return totalMedia;
+    }
+    return mediaItems;
+  };
+
+  const refresh = () => {
+    setPage(0);
+    setSearch('');
+    Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
+  }
+
+  return (
+    <div className="hidden sm:flex">
+      <button className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
+              title="Refresh media"
+              onClick={refresh}>
+        <RefreshIcon className={`h-5 w-5`} />
+        <span className="sr-only">Refresh media</span>
+      </button>
+      
+      <p className="text-sm text-gray-500 dark:text-whisper-900">
+        Showing <span className="font-medium">{(page * LIMIT) + 1}</span> to <span className="font-medium">{getTotalPage()}</span> of{' '}
+        <span className="font-medium">{totalMedia}</span> results
+      </p>
+    </div>
+  );
+};

src/dashboardWebView/components/Header/Searchbox.tsx

@@ -1,37 +1,46 @@
-import { FilterIcon, SearchIcon } from '@heroicons/react/solid';
+import {SearchIcon} from '@heroicons/react/solid';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
 import { useDebounce } from '../../../hooks/useDebounce';
 import { SearchAtom } from '../../state';
 
-export interface ISearchboxProps {}
+export interface ISearchboxProps {
+  placeholder?: string;
+}
 
-export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({}: React.PropsWithChildren<ISearchboxProps>) => {
+export const Searchbox: React.FunctionComponent<ISearchboxProps> = ({placeholder}: React.PropsWithChildren<ISearchboxProps>) => {
   const [ value, setValue ] = React.useState('');
-  const [ , setDebounceValue ] = useRecoilState(SearchAtom);
+  const [ debounceSearchValue, setDebounceValue ] = useRecoilState(SearchAtom);
   const debounceSearch = useDebounce<string>(value, 500);
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
   };
 
+  React.useEffect(() => {    
+    if (!debounceSearchValue && value) {
+      setValue('');
+    }
+  } , [debounceSearchValue]);
+
   React.useEffect(() => {
     setDebounceValue(debounceSearch);
   }, [debounceSearch]);
 
   return (
-    <div className="flex space-x-4">
-      <div className="flex-1 min-w-0">
+    <div className="flex space-x-4  flex-1">
+      <div className="min-w-0">
         <label htmlFor="search" className="sr-only">Search</label>
         <div className="relative flex justify-center">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <SearchIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
           </div>
+
           <input
             type="search"
             name="search"
             className={`block w-full py-2 pl-10 pr-3 sm:text-sm bg-white dark:bg-vulcan-300 border border-gray-300 dark:border-vulcan-100 text-vulcan-500 dark:text-whisper-500 placeholder-gray-400 dark:placeholder-whisper-800 focus:outline-none`}
-            placeholder="Search"
+            placeholder={placeholder || "Search"}
             value={value}
             onChange={handleChange}
           />

src/dashboardWebView/components/Header/Sorting.tsx

@@ -6,45 +6,66 @@ import { ExtensionState } from '../../../constants';
 import { SortOrder, SortType } from '../../../models';
 import { SortOption } from '../../constants/SortOption';
 import { DashboardMessage } from '../../DashboardMessage';
+import { NavigationType } from '../../models';
 import { SortingOption } from '../../models/SortingOption';
 import { SearchSelector, SettingsSelector, SortingAtom } from '../../state';
 import { MenuButton, MenuItem, MenuItems } from '../Menu';
 
-export interface ISortingProps {}
+export interface ISortingProps {
+  disableCustomSorting?: boolean;
+  view: NavigationType;
+}
 
 export const sortOptions: SortingOption[] = [
-  { name: "Last modified", id: SortOption.LastModified, order: SortOrder.desc, type: SortType.string },
+  { name: "Last modified (asc)", id: SortOption.LastModifiedAsc, order: SortOrder.asc, type: SortType.date },
+  { name: "Last modified (desc)", id: SortOption.LastModifiedDesc, order: SortOrder.desc, type: SortType.date },
   { name: "By filename (asc)", id: SortOption.FileNameAsc, order: SortOrder.asc, type: SortType.string },
   { name: "By filename (desc)", id: SortOption.FileNameDesc, order: SortOrder.desc, type: SortType.string },
 ];
 
-export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsWithChildren<ISortingProps>) => {
+export const Sorting: React.FunctionComponent<ISortingProps> = ({disableCustomSorting, view}: React.PropsWithChildren<ISortingProps>) => {
   const [ crntSorting, setCrntSorting ] = useRecoilState(SortingAtom);
   const searchValue = useRecoilValue(SearchSelector);
   const settings = useRecoilValue(SettingsSelector);
 
   const updateSorting = (value: SortingOption) => {
-
     Messenger.send(DashboardMessage.setState, {
-      key: ExtensionState.Dashboard.Sorting,
+      key: `${view === NavigationType.Contents ? ExtensionState.Dashboard.Contents.Sorting : ExtensionState.Dashboard.Media.Sorting}`,
       value: value
-    })
+    });
 
     setCrntSorting(value)
   };
 
   let allOptions = [...sortOptions];
-  if (settings?.customSorting) {
+  if (settings?.customSorting && !disableCustomSorting) {
     allOptions = [...allOptions, ...settings.customSorting.map((s) => ({ 
       title: s.title || s.name, 
       name: s.name, 
-      id: `${s.name}-${s.order}`, 
+      id: s.id || `${s.name}-${s.order}`, 
       order: s.order, 
       type: s.type 
     }))];
   }
 
-  let crntSort = allOptions.find(x => x.id === crntSorting?.id) || sortOptions[0];
+  let crntSortingOption = crntSorting;
+  if (!crntSortingOption) {
+    if (view === NavigationType.Contents) {
+      crntSortingOption = settings?.dashboardState?.contents?.sorting || null;
+    } else if (view === NavigationType.Media) {
+      crntSortingOption = settings?.dashboardState?.media?.sorting || null;
+    }
+
+    if (crntSortingOption === null) {
+      if (view === NavigationType.Contents && settings?.dashboardState.contents.defaultSorting) {
+        crntSortingOption = allOptions.find(f => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+      } else if (view === NavigationType.Media && settings?.dashboardState.contents.defaultSorting) {
+        crntSortingOption = allOptions.find(f => f.id === settings?.dashboardState.contents.defaultSorting) || null;
+      }
+    }
+  }
+
+  let crntSort = allOptions.find(x => x.id === crntSortingOption?.id) || sortOptions[0];
 
   return (
     <div className="flex items-center">
@@ -57,7 +78,7 @@ export const Sorting: React.FunctionComponent<ISortingProps> = ({}: React.PropsW
               key={option.id}
               title={option.title || option.name}
               value={option}
-              isCurrent={option.id === crntSorting?.id}
+              isCurrent={option.id === crntSort.id}
               onClick={(value) => updateSorting(value)} />
           ))}
         </MenuItems>

src/dashboardWebView/components/Header/ViewSwitch.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { ViewAtom, ViewType, SettingsSelector } from '../../state';
-import { ViewGridIcon, ViewListIcon } from '@heroicons/react/solid';
+import { ViewAtom, SettingsSelector } from '../../state';
+import {ViewListIcon, ViewGridIcon} from '@heroicons/react/solid';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
+import { DashboardViewType } from '../../models';
 
 export interface IViewSwitchProps {}
 
@@ -12,7 +13,7 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (props: Rea
   const settings = useRecoilValue(SettingsSelector);
   
   const toggleView = () => {
-    const newView = view === ViewType.Grid ? ViewType.List : ViewType.Grid;
+    const newView = view === DashboardViewType.Grid ? DashboardViewType.List : DashboardViewType.Grid;
     setView(newView);
     Messenger.send(DashboardMessage.setPageViewType, newView);
   };
@@ -25,11 +26,11 @@ export const ViewSwitch: React.FunctionComponent<IViewSwitchProps> = (props: Rea
 
   return (
     <div className={`flex rounded-sm bg-vulcan-50 lg:mb-1`}>
-      <button className={`flex items-center px-2 py-1 rounded-l-sm ${view === ViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
+      <button className={`flex items-center px-2 py-1 rounded-l-sm ${view === DashboardViewType.Grid ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
         <ViewGridIcon className={`w-4 h-4`} />
         <span className={`sr-only`}>Change to grid</span>
       </button>
-      <button className={`flex items-center px-2 py-1 rounded-r-sm ${view === ViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
+      <button className={`flex items-center px-2 py-1 rounded-r-sm ${view === DashboardViewType.List ? 'bg-teal-500 text-vulcan-500' : 'text-whisper-500'}`} onClick={toggleView}>
         <ViewListIcon className={`w-4 h-4`} />
         <span className={`sr-only`}>Change to list</span>
       </button>

src/dashboardWebView/components/Media/FolderCreation.tsx

@@ -1,14 +1,17 @@
 import * as React from 'react';
-import { FolderAddIcon } from '@heroicons/react/outline';
+import {FolderAddIcon} from '@heroicons/react/outline';
 import { useRecoilValue } from 'recoil';
 import { DashboardMessage } from '../../DashboardMessage';
-import { SelectedMediaFolderAtom } from '../../state';
+import { SelectedMediaFolderAtom, SettingsSelector } from '../../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
+import { ChoiceButton } from '../ChoiceButton';
+import { CustomScript, ScriptType } from '../../../models';
 
 export interface IFolderCreationProps {}
 
 export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (props: React.PropsWithChildren<IFolderCreationProps>) => {
   const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
+  const settings = useRecoilValue(SettingsSelector);
 
   const onFolderCreation = () => {
     Messenger.send(DashboardMessage.createMediaFolder, {
@@ -16,13 +19,35 @@ export const FolderCreation: React.FunctionComponent<IFolderCreationProps> = (pr
     });
   };
 
+  const runCustomScript = (script: CustomScript) => {
+    Messenger.send(DashboardMessage.runCustomScript, {script, path: selectedFolder});
+  };
+
+  const scripts = (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFolder);
+  if (scripts.length > 0) {
+    return (
+      <div className="flex flex-1 justify-end">
+        <ChoiceButton 
+          title={`Create new folder`} 
+          choices={scripts.map(s => ({
+            title: s.title,
+            onClick: () => runCustomScript(s)
+          }))} 
+          onClick={onFolderCreation} 
+          disabled={!settings?.initialized} />
+      </div>
+    )
+  }
+
   return (
-    <button 
-      className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
-      title={`Create new folder`}
-      onClick={onFolderCreation}>
-      <FolderAddIcon className={`mr-2 h-6 w-6`} />
-      <span className={``}>Create new folder</span>
-    </button>
+    <div className="flex flex-1 justify-end">
+      <button 
+        className={`inline-flex items-center px-3 py-1 border border-transparent text-xs leading-4 font-medium text-white dark:text-vulcan-500 bg-teal-600 hover:bg-teal-700 focus:outline-none disabled:bg-gray-500`}
+        title={`Create new folder`}
+        onClick={onFolderCreation}>
+        <FolderAddIcon className={`mr-2 h-6 w-6`} />
+        <span className={``}>Create new folder</span>
+      </button>
+    </div>
   );
 };

src/dashboardWebView/components/Media/FolderItem.tsx

@@ -1,4 +1,4 @@
-import { FolderIcon } from '@heroicons/react/solid';
+import {FolderIcon} from '@heroicons/react/solid';
 import { basename } from 'path';
 import * as React from 'react';
 import { useRecoilState } from 'recoil';
@@ -16,11 +16,13 @@ export const FolderItem: React.FunctionComponent<IFolderItemProps> = ({ folder,
   const relFolderPath = wsFolder ? folder.replace(wsFolder, '') : folder;
   
   return (
-    <li className={`group relative bg-gray-200 dark:bg-vulcan-300 hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
-      <button className={`w-full flex flex-col items-center`} onClick={() => setSelectedFolder(folder)}>
-        <FolderIcon className={`h-auto w-1/2`} />
+    <li className={`group relative hover:shadow-xl dark:hover:bg-vulcan-100 text-gray-600 hover:text-gray-700 dark:text-whisper-900 dark:hover:text-whisper-800 p-4`}>
+      <button className={`w-full flex flex-row items-center h-full`} onClick={() => setSelectedFolder(folder)}>
+        <div>
+          <FolderIcon className={`h-12 w-12 mr-4`} />
+        </div>
 
-        <p className="text-sm font-bold pointer-events-none flex items-center">
+        <p className="text-sm font-bold pointer-events-none flex items-center text-left overflow-hidden break-words">
           {basename(relFolderPath)}
         </p>
       </button>

src/dashboardWebView/components/Media/Item.tsx

@@ -1,16 +1,22 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { CheckCircleIcon, ClipboardCopyIcon, CodeIcon, PencilIcon, PhotographIcon, TrashIcon } from '@heroicons/react/outline';
+import { Menu } from '@headlessui/react';
+import { ClipboardIcon, CodeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
 import { basename, dirname } from 'path';
 import * as React from 'react';
 import { useEffect } from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
+import { CustomScript } from '../../../helpers/CustomScript';
 import { parseWinPath } from '../../../helpers/parseWinPath';
+import { ScriptType } from '../../../models';
 import { MediaInfo } from '../../../models/MediaPaths';
 import { DashboardMessage } from '../../DashboardMessage';
 import { LightboxAtom, PageSelector, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state';
+import { MenuItem, MenuItems } from '../Menu';
 import { Alert } from '../Modals/Alert';
 import { Metadata } from '../Modals/Metadata';
-
+import { MenuButton } from './MenuButton'
+import { QuickAction } from './QuickAction';
+ 
 export interface IItemProps {
   media: MediaInfo;
 }
@@ -61,6 +67,10 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || "");
   };
 
+  const runCustomScript = (script: CustomScript) => {
+    Messenger.send(DashboardMessage.runCustomScript, {script, path: media.fsPath});
+  };
+
   const insertToArticle = () => {
     const relPath = getRelPath();
     Messenger.send(DashboardMessage.insertPreviewImage, {
@@ -78,9 +88,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
   const insertSnippet = () => {
     const relPath = getRelPath();
     let snippet = settings?.mediaSnippet.join("\n");
+
     snippet = snippet?.replace("{mediaUrl}", parseWinPath(relPath) || "");
     snippet = snippet?.replace("{alt}", alt || "");
     snippet = snippet?.replace("{caption}", caption || "");
+    snippet = snippet?.replace("{filename}", basename(relPath || ""));
 
     Messenger.send(DashboardMessage.insertPreviewImage, {
       image: parseWinPath(relPath) || "",
@@ -111,8 +123,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
       }
     }
 
-    if (media?.stats?.size) {
-      const size = media.stats.size / (1024*1024);
+    if (media?.size) {
+      const size = media.size / (1024*1024);
       if (size > 1) {
         sizeDetails.push(`${size.toFixed(2)} MB`);
       } else {
@@ -149,6 +161,15 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     setFilename(getFileName());
   };
 
+  const customScriptActions = () => {
+    return (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFile).map(script => (
+      <MenuItem 
+        key={script.title}
+        title={script.title} 
+        onClick={() => runCustomScript(script)} />
+    ))
+  }
+
   useEffect(() => {
     if (media.alt !== alt) {
       setAlt(media.alt);
@@ -174,7 +195,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
 
   return (
     <>
-      <li className="group relative bg-gray-50 dark:bg-vulcan-200 hover:shadow-xl dark:hover:bg-vulcan-100">
+      <li className="group relative bg-gray-50 dark:bg-vulcan-200 hover:shadow-xl dark:hover:bg-vulcan-100 border border-gray-100 dark:border-vulcan-50">
         <button className="relative bg-gray-200 dark:bg-vulcan-300 block w-full aspect-w-10 aspect-h-7 overflow-hidden cursor-pointer h-48" onClick={openLightbox}>
           <div className={`absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center`}>
             <PhotographIcon className={`h-1/2 text-gray-300 dark:text-vulcan-200`} />
@@ -185,54 +206,99 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
         </button>
         <div className={`relative py-4 pl-4 pr-12`}>
           <div className={`absolute top-4 right-4 flex flex-col space-y-4`}>
-            <button title={`Edit metadata`} 
-                    className={`hover:text-teal-900 focus:outline-none`} 
-                    onClick={updateMetadata}>
-              <PencilIcon className={`h-5 w-5`} />
-              <span className={`sr-only`}>Edit metadata</span>
-            </button>
 
-            {
-              viewData?.data?.filePath ? (
-                <>
-                  <button 
-                    title={`Insert into your content`} 
-                    className={`hover:text-teal-900 focus:outline-none`} 
-                    onClick={insertToArticle}>
-                    <CheckCircleIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Insert into your content</span>
-                  </button>
+            <div className="flex items-center border border-transparent group-hover:bg-gray-50 dark:group-hover:bg-vulcan-200 group-hover:border-gray-100 dark:group-hover:border-vulcan-50 rounded-full p-2 -mr-2 -mt-2">
+
+              <div className='hidden group-hover:inline-block h-5'>
+                <QuickAction 
+                  title='Edit metadata'
+                  onClick={updateMetadata}>
+                  <PencilIcon className={`h-5 w-5`} aria-hidden="true" />
+                </QuickAction>
+
+                {
+                  viewData?.data?.filePath ? (
+                    <>
+                      <QuickAction 
+                        title='Insert image with markdown markup'
+                        onClick={insertToArticle}>
+                        <PlusIcon className={`h-5 w-5`} aria-hidden="true" />
+                      </QuickAction>
+
+                      {
+                        (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                          <QuickAction 
+                            title='Insert snippet'
+                            onClick={insertSnippet}>
+                            <CodeIcon className={`h-5 w-5`} aria-hidden="true" />
+                          </QuickAction>
+                        )
+                      }
+                    </>
+                  ) : (
+                    <>
+                      <QuickAction 
+                        title='Copy media path'
+                        onClick={copyToClipboard}>
+                        <ClipboardIcon className={`h-5 w-5`} aria-hidden="true" />
+                      </QuickAction>
+
+                      <QuickAction 
+                        title='Delete media file'
+                        onClick={deleteMedia}>
+                        <TrashIcon className={`h-5 w-5`} aria-hidden="true" />
+                      </QuickAction>
+                    </>
+                  )
+                }
+              </div>
+
+              <Menu as="div" className="relative z-10 inline-block text-left  h-5">
+                <MenuButton title={`Menu`} />
+
+                <MenuItems widthClass='w-40'>
+                  <MenuItem 
+                    title={`Edit metadata`}
+                    onClick={updateMetadata}
+                    />
+
                   {
-                    (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
-                      <button 
-                        title={`Insert your media snippet`} 
-                        className={`hover:text-teal-900 focus:outline-none`} 
-                        onClick={insertSnippet}>
-                        <CodeIcon className={`h-5 w-5`} />
-                        <span className={`sr-only`}>Insert your media snippet</span>
-                      </button>
+                    viewData?.data?.filePath ? (
+                      <>
+                        <MenuItem 
+                          title={`Insert image markdown`}
+                          onClick={insertToArticle} />
+
+                        {
+                          (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && (
+                            <MenuItem 
+                              title={`Insert snippet`}
+                              onClick={insertSnippet} />
+                          )
+                        }
+
+                        { customScriptActions() }
+                      </>
+                    ) : (
+                      <>
+                        <MenuItem 
+                          title={`Copy media path`}
+                          onClick={copyToClipboard} />
+
+                        { customScriptActions() }
+
+                        <MenuItem 
+                          title={`Delete`}
+                          onClick={deleteMedia} />
+                      </>
                     )
                   }
-                </>
-              ) : (
-                <>
-                  <button title={`Copy media path`} 
-                          className={`hover:text-teal-900 focus:outline-none`} 
-                          onClick={copyToClipboard}>
-                    <ClipboardCopyIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Copy media path</span>
-                  </button>
-                  <button title={`Delete media`} 
-                          className={`hover:text-teal-900 focus:outline-none`} 
-                          onClick={deleteMedia}>
-                    <TrashIcon className={`h-5 w-5`} />
-                    <span className={`sr-only`}>Delete media</span>
-                  </button>
-                </>
-              )
-            }
+                </MenuItems>
+              </Menu>
+            </div>
+
           </div>
-          <p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center">
+          <p className="text-sm dark:text-whisper-900 font-bold pointer-events-none flex items-center break-all">
             {basename(parseWinPath(media.fsPath) || "")}
           </p>
           {
@@ -256,7 +322,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
             <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{getFolder()}</span>
           </p>
           {
-            (media?.stats?.size || media?.dimensions) && (
+            (media?.size || media?.dimensions) && (
               <p className="mt-2 text-xs dark:text-whisper-900 font-medium pointer-events-none flex flex-col items-start">
                 <b className={`mr-1`}>Size:</b>
                 <span className={`block mt-1 dark:text-whisper-500 text-xs`}>{calculateSize()}</span>

src/dashboardWebView/components/Media/List.tsx

@@ -1,10 +1,14 @@
 import * as React from 'react';
 
-export interface IListProps {}
+export interface IListProps {
+  gap?: number;
+}
+
+export const List: React.FunctionComponent<IListProps> = ({gap, children}: React.PropsWithChildren<IListProps>) => {
+  const gapClass = gap !== undefined ? `gap-y-${gap}` : `gap-y-8`;
 
-export const List: React.FunctionComponent<IListProps> = ({children}: React.PropsWithChildren<IListProps>) => {
   return (
-    <ul role="list" className="grid grid-cols-2 gap-x-4 gap-y-8 sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8">
+    <ul role="list" className={`grid grid-cols-2 gap-x-4 ${gapClass} sm:grid-cols-3 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8`}>
       {children}
     </ul>
   );

src/dashboardWebView/components/Media/Media.tsx

@@ -1,6 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
-import { UploadIcon } from '@heroicons/react/outline';
+import {UploadIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { MediaInfo, MediaPaths } from '../../../models/MediaPaths';
@@ -17,19 +17,17 @@ import { useCallback } from 'react';
 import { DashboardMessage } from '../../DashboardMessage';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { FolderItem } from './FolderItem';
+import useMedia from '../../hooks/useMedia';
 
 export interface IMediaProps {}
 
-export const LIMIT = 16;
-
 export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWithChildren<IMediaProps>) => {
+  const { media } = useMedia();
   const settings = useRecoilValue(SettingsSelector);
-  const [ selectedFolder, setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
-  const [ media, setMedia ] = React.useState<MediaInfo[]>([]);
-  const [ , setTotal ] = useRecoilState(MediaTotalAtom);
-  const [ folders, setFolders ] = useRecoilState(MediaFoldersAtom);
-  const [ loading, setLoading ] = useRecoilState(LoadingAtom);
   const viewData = useRecoilValue(ViewDataSelector);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderAtom);
+  const folders = useRecoilValue(MediaFoldersAtom);
+  const loading = useRecoilValue(LoadingAtom);
 
   const onDrop = useCallback((acceptedFiles: File[]) => {
     acceptedFiles.forEach((file) => {
@@ -52,96 +50,75 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
     onDrop,
     accept: 'image/*'
   });
-
-  const messageListener = (message: MessageEvent<EventData<MediaPaths | { key: string, value: any }>>) => {
-    if (message.data.command === DashboardCommand.media) {
-      const data: MediaPaths = message.data.data as MediaPaths;
-      setLoading(false);
-      setMedia(data.media);
-      setTotal(data.total);
-      setFolders(data.folders);
-      setSelectedFolder(data.selectedFolder);
-    }
-  };
-
-  React.useEffect(() => {
-    Messenger.listen<MediaPaths>(messageListener);
-
-    return () => {
-      Messenger.unlisten(messageListener);
-    }
-  }, ['']);
   
   return (
-    <main className={`h-full w-full`}>
-      <div className="flex flex-col h-full overflow-auto">
-        <Header settings={settings} />
+    <div className="flex flex-col h-full overflow-auto">
+      <Header settings={settings} />
 
-        <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4" {...getRootProps()}>
-
-          {
-            viewData?.data?.filePath && (
-              <div className={`text-lg text-center mb-6`}>
-                <p>Select the image you want to use for your article.</p>
-                <p className={`opacity-80 text-base`}>You can also drag and drop images from your desktop and select that once uploaded.</p>
-              </div>
-            )
-          }
-          
-          {
-            isDragActive && (
-              <div className="absolute top-0 left-0 w-full h-full text-whisper-500 bg-gray-900 bg-opacity-70 flex flex-col justify-center items-center z-50">
-                <UploadIcon className={`h-32`} />
-                <p className={`text-xl max-w-md text-center`}>
-                  {selectedFolder ? `Upload to ${selectedFolder}` : `No folder selected, files you drop will be added to the ${settings?.staticFolder || "public"} folder.`}
-                </p>
-              </div>
-            )
-          }
-
-          {
-            (media.length === 0 && folders.length === 0 && !loading) && (
-              <div className={`flex items-center justify-center h-full`}>
-                <div className={`max-w-xl text-center`}>
-                  <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
-                  
-                  <p className={`text-xl font-medium`}>No media files to show. You can drag &amp; drop new files.</p>
-                </div>
-              </div>
-            )
-          }
-
-          {
-            folders && folders.length > 0 && (
-              <div className={`mb-8`}>
-                <List>
-                  {
-                    folders && folders.map((folder) => (
-                      <FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />
-                    ))
-                  }
-                </List>
-              </div>
-            )
-          }
-
-          <List>
-            {
-              media.map((file) => (
-                <Item key={file.fsPath} media={file} />
-              ))
-            }
-          </List>
-        </div>
+      <div className="w-full flex-grow max-w-7xl mx-auto py-6 px-4" {...getRootProps()}>
 
         {
-          loading && ( <Spinner /> )
+          viewData?.data?.filePath && (
+            <div className={`text-lg text-center mb-6`}>
+              <p>Select the image you want to use for your article.</p>
+              <p className={`opacity-80 text-base`}>You can also drag and drop images from your desktop and select that once uploaded.</p>
+            </div>
+          )
+        }
+        
+        {
+          isDragActive && (
+            <div className="absolute top-0 left-0 w-full h-full text-whisper-500 bg-gray-900 bg-opacity-70 flex flex-col justify-center items-center z-50">
+              <UploadIcon className={`h-32`} />
+              <p className={`text-xl max-w-md text-center`}>
+                {selectedFolder ? `Upload to ${selectedFolder}` : `No folder selected, files you drop will be added to the ${settings?.staticFolder || "public"} folder.`}
+              </p>
+            </div>
+          )
         }
 
-        <Lightbox />
+        {
+          (media.length === 0 && folders.length === 0 && !loading) && (
+            <div className={`flex items-center justify-center h-full`}>
+              <div className={`max-w-xl text-center`}>
+                <FrontMatterIcon className={`text-vulcan-300 dark:text-whisper-800 h-32 mx-auto opacity-90 mb-8`} />
+                
+                <p className={`text-xl font-medium`}>No media files to show. You can drag &amp; drop new files.</p>
+              </div>
+            </div>
+          )
+        }
 
-        <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+        {
+          folders && folders.length > 0 && (
+            <div className={`mb-8`}>
+              <List gap={0}>
+                {
+                  folders && folders.map((folder) => (
+                    <FolderItem key={folder} folder={folder} staticFolder={settings?.staticFolder} wsFolder={settings?.wsFolder} />
+                  ))
+                }
+              </List>
+            </div>
+          )
+        }
+
+        <List>
+          {
+            media.map((file) => (
+              <Item key={file.fsPath} media={file} />
+            ))
+          }
+        </List>
       </div>
-    </main>
+
+      {
+        loading && ( <Spinner /> )
+      }
+
+      <Lightbox />
+
+      <SponsorMsg beta={settings?.beta} version={settings?.versionInfo} />
+    </div>
   );
 };

src/dashboardWebView/components/Media/MediaHeaderBottom.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useRecoilValue } from 'recoil';
+import { NavigationType } from '../../models/NavigationType';
+import { SettingsAtom } from '../../state';
+import { Sorting } from '../Header';
+import { Breadcrumb } from '../Header/Breadcrumb';
+import { Pagination } from '../Header/Pagination';
+
+export interface IMediaHeaderBottomProps {}
+
+export const MediaHeaderBottom: React.FunctionComponent<IMediaHeaderBottomProps> = (props: React.PropsWithChildren<IMediaHeaderBottomProps>) => {
+  const settings = useRecoilValue(SettingsAtom);
+
+  if (!settings?.wsFolder) {
+    return null;
+  }
+
+  return (
+    <nav className="w-full bg-gray-200 text-vulcan-300 dark:bg-vulcan-400 dark:text-whisper-600 border-b border-gray-300 dark:border-vulcan-100 flex justify-between py-2" aria-label="Breadcrumb">
+
+      <Breadcrumb />
+
+      <Pagination />
+
+      <div className={`flex px-5 flex-1 justify-end`}>
+        <Sorting view={NavigationType.Media} disableCustomSorting />
+      </div>
+    </nav>
+  );
+};

src/dashboardWebView/components/Media/MediaHeaderTop.tsx

@@ -0,0 +1,81 @@
+import { EventData } from '@estruyf/vscode';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import * as React from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { useDebounce } from '../../../hooks/useDebounce';
+import { usePrevious } from '../../../panelWebView/hooks/usePrevious';
+import { DashboardCommand } from '../../DashboardCommand';
+import { DashboardMessage } from '../../DashboardMessage';
+import { LoadingAtom, PageAtom, SelectedMediaFolderSelector, SettingsSelector, SortingSelector } from '../../state';
+import { Searchbox } from '../Header';
+import { PaginationStatus } from '../Header/PaginationStatus';
+import { FolderCreation } from './FolderCreation';
+
+export interface IMediaHeaderTopProps {}
+
+export const MediaHeaderTop: React.FunctionComponent<IMediaHeaderTopProps> = ({}: React.PropsWithChildren<IMediaHeaderTopProps>) => {
+  const [ lastUpdated, setLastUpdated ] = React.useState<string | null>(null);
+  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+  const crntSorting = useRecoilValue(SortingSelector);
+  const [ , setLoading ] = useRecoilState(LoadingAtom);
+  const [ page, setPage ] = useRecoilState(PageAtom);
+  const settings = useRecoilValue(SettingsSelector);
+  const debounceGetMedia = useDebounce<string | null>(lastUpdated, 200);
+  const prevSelectedFolder = usePrevious<string | null>(selectedFolder);
+
+  const mediaUpdate = (message: MessageEvent<EventData<{ key: string, value: any }>>) => {
+    if (message.data.command === DashboardCommand.mediaUpdate) {
+      setLoading(true);
+      Messenger.send(DashboardMessage.getMedia, {
+        page,
+        folder: selectedFolder || '',
+        sorting: crntSorting
+      });
+    }
+  }
+
+  React.useEffect(() => {
+    if (prevSelectedFolder !== null || settings?.dashboardState?.media.selectedFolder !== selectedFolder) {
+      setLoading(true);
+      setPage(0);
+      setLastUpdated(new Date().getTime().toString());
+    }
+  }, [selectedFolder]);
+
+  React.useEffect(() => {
+    setLastUpdated(new Date().getTime().toString());
+  }, [crntSorting]);
+
+  React.useEffect(() => {
+    if (debounceGetMedia) {
+      setLoading(true);
+
+      Messenger.send(DashboardMessage.getMedia, {
+        page,
+        folder: selectedFolder || '',
+        sorting: crntSorting
+      });
+    }
+  }, [debounceGetMedia]);
+
+  React.useEffect(() => {
+    Messenger.listen(mediaUpdate);
+
+    return () => {
+      Messenger.unlisten(mediaUpdate);
+    }
+  }, []);
+
+  return (
+    <nav
+      className="py-3 px-4 flex items-center justify-between border-b border-gray-300 dark:border-vulcan-100"
+      aria-label="Pagination"
+    >
+      <Searchbox placeholder={`Search in folder`} />
+
+      <PaginationStatus />
+
+      <FolderCreation />
+    </nav>
+  );
+};

src/dashboardWebView/components/Media/MenuButton.tsx

@@ -0,0 +1,20 @@
+import { Menu } from '@headlessui/react';
+import {DotsVerticalIcon} from '@heroicons/react/outline';
+import * as React from 'react';
+
+export interface IMenuButtonProps {
+    title: string;
+    disabled?: boolean;
+}
+
+export const MenuButton: React.FunctionComponent<IMenuButtonProps> = ({ title, disabled }: React.PropsWithChildren<IMenuButtonProps>) => {
+  return (
+    <div className={`inline-flex items-center ${disabled ? 'opacity-50' : ''}`}>      
+      <Menu.Button disabled={disabled} className="group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600">
+        <span className="sr-only">{title}</span>
+        <DotsVerticalIcon className="h-5 w-5" aria-hidden="true" />
+      </Menu.Button>
+    </div>
+  );
+};
+

src/dashboardWebView/components/Media/Pagination.tsx

@@ -1,130 +0,0 @@
-import { Messenger } from '@estruyf/vscode/dist/client';
-import { RefreshIcon } from '@heroicons/react/outline';
-import * as React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { DashboardMessage } from '../../DashboardMessage';
-import { LoadingAtom, MediaTotalSelector, PageAtom, SelectedMediaFolderSelector } from '../../state';
-import { FolderCreation } from './FolderCreation';
-import { LIMIT } from './Media';
-import { PaginationButton } from './PaginationButton';
-
-export interface IPaginationProps {}
-
-export const Pagination: React.FunctionComponent<IPaginationProps> = ({}: React.PropsWithChildren<IPaginationProps>) => {
-  const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
-  const totalMedia = useRecoilValue(MediaTotalSelector);
-  const [ , setLoading ] = useRecoilState(LoadingAtom);
-  const [ page, setPage ] = useRecoilState(PageAtom);
-  
-  const totalPages = Math.ceil(totalMedia / LIMIT) - 1;
-
-  const getTotalPage = () => {
-    const mediaItems = ((page + 1) * LIMIT);
-    if (totalMedia < mediaItems) {
-      return totalMedia;
-    }
-    return mediaItems;
-  };
-
-  // Write me function to retrieve buttons before and after current page
-  const getButtons = (): number[] => {
-    const maxButtons = 5;
-    const buttons: number[] = [];
-    const start = page - maxButtons;
-    const end = page + maxButtons;
-
-    for (let i = start; i <= end; i++) {
-      if (i >= 0 && i <= totalPages) {
-        buttons.push(i);
-      }
-    }
-    return buttons;
-  };
-
-  const refresh = () => {
-    setPage(0);
-    Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
-  }
-
-  React.useEffect(() => {
-    setLoading(true);
-    Messenger.send(DashboardMessage.getMedia, {
-      page,
-      folder: selectedFolder || ''
-    });
-  }, [page]);
-
-  React.useEffect(() => {
-    setLoading(true);
-    Messenger.send(DashboardMessage.getMedia, {
-      page: 0,
-      folder: selectedFolder || ''
-    });
-    setPage(0);
-  }, [selectedFolder]);
-
-  return (
-    <nav
-      className="py-4 px-5 flex items-center justify-between bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400  dark:border-vulcan-100"
-      aria-label="Pagination"
-    >
-      <div className="hidden sm:flex">
-        <button className={`mr-2 text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500`}
-                title="Refresh media"
-                onClick={refresh}>
-          <RefreshIcon className={`h-5 w-5`} />
-          <span className="sr-only">Refresh media</span>
-        </button>
-        
-        <p className="text-sm text-gray-500 dark:text-whisper-900">
-          Showing <span className="font-medium">{(page * LIMIT) + 1}</span> to <span className="font-medium">{getTotalPage()}</span> of{' '}
-          <span className="font-medium">{totalMedia}</span> results
-        </p>
-      </div>
-
-      <FolderCreation />
-
-      <div className="flex justify-between sm:justify-end space-x-2 text-sm">
-        <PaginationButton
-          title="First"
-          disabled={page === 0}
-          onClick={() => {
-            if (page > 0) {
-              setPage(0)
-            }
-          }} />
-
-        <PaginationButton
-          title="Previous"
-          disabled={page === 0}
-          onClick={() => {
-            if (page > 0) {
-              setPage(page - 1)
-            }
-          }} />
-        
-        {getButtons().map((button) => (
-          <button
-            key={button}
-            disabled={button === page}
-            onClick={() => {
-              setPage(button)
-            }
-            }
-            className={`${page === button ? 'bg-gray-200 px-2 text-vulcan-500' : 'text-gray-500 hover:text-gray-600 dark:text-whisper-900 dark:hover:text-whisper-500'}`}
-          >{button + 1}</button>
-        ))}
-
-        <PaginationButton
-          title="Next"
-          disabled={page >= totalPages}
-          onClick={() => setPage(page + 1)} />
-
-        <PaginationButton
-          title="Last"
-          disabled={page >= totalPages}
-          onClick={() => setPage(totalPages)} />
-      </div>
-    </nav>
-  );
-};

src/dashboardWebView/components/Media/QuickAction.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface IQuickActionProps {
+  title: string;
+  onClick: () => void;
+}
+
+export const QuickAction: React.FunctionComponent<IQuickActionProps> = ({title, onClick, children}: React.PropsWithChildren<IQuickActionProps>) => {
+  return (    
+    <button
+      type='button'
+      title={title}
+      onClick={onClick}
+      className={`px-2 group inline-flex justify-center text-sm font-medium text-vulcan-400 hover:text-vulcan-600 dark:text-gray-400 dark:hover:text-whisper-600`}>
+      {children}
+      <span className='sr-only'>{title}</span>
+    </button>
+  );
+};

src/dashboardWebView/components/Menu/MenuButton.tsx

@@ -1,5 +1,5 @@
 import { Menu } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/solid';
+import {ChevronDownIcon} from '@heroicons/react/solid';
 import * as React from 'react';
 
 export interface IMenuButtonProps {

src/dashboardWebView/components/Menu/MenuItem.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 export interface IMenuItemProps {
   title: string;
-  value: any;
+  value?: any;
   isCurrent?: boolean;
   disabled?: boolean;
   onClick: (value: any) => void;
@@ -15,7 +15,7 @@ export const MenuItem: React.FunctionComponent<IMenuItemProps> = ({title, value,
       <button
         disabled={disabled}
         onClick={() => onClick(value)}
-        className={`${!isCurrent ? `text-vulcan-500 dark:text-whisper-500` : `text-gray-500 dark:text-whisper-900`} block px-4 py-2 text-sm font-medium w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
+        className={`${!isCurrent ? `font-normal` : `font-bold`} text-gray-500 dark:text-whisper-900 block px-4 py-2 text-sm w-full text-left hover:bg-gray-100 hover:text-gray-700 dark:hover:text-whisper-600 dark:hover:bg-vulcan-100 disabled:bg-gray-500`}
       >
         {title}
       </button>

src/dashboardWebView/components/Menu/MenuItems.tsx

@@ -17,7 +17,7 @@ export const MenuItems: React.FunctionComponent<IMenuItemsProps> = ({widthClass,
       leaveFrom="transform opacity-100 scale-100"
       leaveTo="transform opacity-0 scale-95"
     >
-      <Menu.Items className={`${widthClass || "w-40"} origin-top-right absolute right-0 z-10 mt-2 rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
+      <Menu.Items className={`${widthClass || ""} origin-top-right absolute right-0 z-10 mt-2 rounded-md shadow-2xl bg-white dark:bg-vulcan-500 ring-1 ring-vulcan-400 dark:ring-white ring-opacity-5 focus:outline-none text-sm max-h-96 overflow-auto`}>
         <div className="py-1">
           {children}
         </div>

src/dashboardWebView/components/Modals/Alert.tsx

@@ -1,5 +1,5 @@
 import { Dialog, Transition, } from '@headlessui/react';
-import { ExclamationIcon } from '@heroicons/react/outline';
+import {ExclamationIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { Fragment, useRef } from 'react';
 

src/dashboardWebView/components/Spinner.tsx

@@ -4,7 +4,7 @@ export interface ISpinnerProps {}
 
 export const Spinner: React.FunctionComponent<ISpinnerProps> = (props: React.PropsWithChildren<ISpinnerProps>) => {
   return (
-    <div className={`fixed top-0 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}>
+    <div className={`fixed top-12 left-0 right-0 bottom-0 w-full h-full flex flex-wrap items-center justify-center bg-white bg-opacity-10 z-50`}>
       <div className="loader ease-linear rounded-full border-8 border-t-8 border-gray-50 h-32 w-32" />
     </div>
   );

src/dashboardWebView/components/SponsorMsg.tsx

@@ -11,8 +11,8 @@ export interface ISponsorMsgProps {
 export const SponsorMsg: React.FunctionComponent<ISponsorMsgProps> = ({beta, version}: React.PropsWithChildren<ISponsorMsgProps>) => {
   return (
     <p className={`w-full max-w-7xl mx-auto px-4 text-vulcan-50 dark:text-whisper-900 py-2 text-center space-x-8 flex items-center justify-between`}>
-      <a className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`} href={SPONSOR_LINK} title="Sponsor Front Matter">
-        <span>Sponsor</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} /> 
+      <a className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`} href={SPONSOR_LINK} title="Support Front Matter">
+        <span>Support</span> <HeartIcon className={`h-5 w-5 group-hover:fill-current`} /> 
       </a>
       <span>Front Matter{version ? ` (v${version.installedVersion}${!!beta ? ` BETA` : ''})` : ''}</span>
       <a className={`group inline-flex justify-center items-center space-x-2 text-vulcan-500 dark:text-whisper-500 hover:text-vulcan-600 dark:hover:text-whisper-300 opacity-50 hover:opacity-100`} href={REVIEW_LINK} title="Review Front Matter">

src/dashboardWebView/components/Startup.tsx

@@ -21,7 +21,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({settings}: Reac
   }, [settings?.openOnStart]);
 
   return (
-    <div className={`relative flex items-start`}>
+    <div className={`relative flex items-start ml-4`}>
       <div className="flex items-center h-5">
         <input
           id="startup"

src/dashboardWebView/components/Steps/Step.tsx

@@ -1,4 +1,4 @@
-import { CheckIcon } from '@heroicons/react/outline';
+import {CheckIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { Status } from '../../models/Status';
 

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -8,7 +8,7 @@ import { useState } from 'react';
 import { Menu } from '@headlessui/react';
 import { MenuItem } from '../Menu';
 import { Framework } from '../../../models';
-import { ChevronDownIcon } from '@heroicons/react/outline';
+import {ChevronDownIcon} from '@heroicons/react/outline';
 import { FrameworkDetectors } from '../../../constants/FrameworkDetectors';
 
 export interface IStepsToGetStartedProps {

src/dashboardWebView/components/WelcomeScreen.tsx

@@ -1,4 +1,4 @@
-import { HeartIcon, StarIcon } from '@heroicons/react/outline';
+import {HeartIcon, StarIcon} from '@heroicons/react/outline';
 import * as React from 'react';
 import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';

src/dashboardWebView/constants/SortOption.ts

@@ -1,5 +1,6 @@
 export enum SortOption {
-  LastModified = "LastModified",
+  LastModifiedAsc = "LastModifiedAsc",
+  LastModifiedDesc = "LastModifiedDesc",
   FileNameAsc = "FileNameAsc",
   FileNameDesc = "FileNameDesc"
 }

src/dashboardWebView/hooks/useMedia.tsx

@@ -0,0 +1,75 @@
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { EventData } from '@estruyf/vscode/dist/models';
+import { useState, useEffect, useCallback } from 'react';
+import { useRecoilState, useRecoilValue } from 'recoil';
+import { MediaInfo, MediaPaths } from '../../models';
+import { DashboardCommand } from '../DashboardCommand';
+import { LoadingAtom, MediaFoldersAtom, MediaTotalAtom, PageAtom, SearchAtom, SearchSelector, SelectedMediaFolderAtom } from '../state';
+import Fuse from 'fuse.js';
+
+const fuseOptions: Fuse.IFuseOptions<MediaInfo> = {
+  keys: [
+    { name: 'filename', weight: 0.8 },
+    { name: 'fsPath', weight: 0.5 },
+    { name: 'caption', weight: 0.5 },
+    { name: 'alt', weight: 0.5 }
+  ],
+  threshold: 0.2,
+  includeScore: true
+};
+
+export const LIMIT = 16;
+
+export default function useMedia() {
+  const [ media, setMedia ] = useState<MediaInfo[]>([]);
+  const [ page, setPage ] = useRecoilState(PageAtom);
+  const [ searchedMedia, setSearchedMedia ] = useState<MediaInfo[]>([]);
+  const [ , setSelectedFolder ] = useRecoilState(SelectedMediaFolderAtom);
+  const [ , setTotal ] = useRecoilState(MediaTotalAtom);
+  const [ , setFolders ] = useRecoilState(MediaFoldersAtom);
+  const [ , setLoading ] = useRecoilState(LoadingAtom);
+  const search = useRecoilValue(SearchAtom);
+
+  const getMedia = useCallback(() => {
+    return searchedMedia.slice(page * LIMIT, ((page + 1) * LIMIT));
+  }, [searchedMedia, page]);
+
+  const messageListener = (message: MessageEvent<EventData<MediaPaths | { key: string, value: any }>>) => {
+    if (message.data.command === DashboardCommand.media) {
+      const data: MediaPaths = message.data.data as MediaPaths;
+      setLoading(false);
+      setMedia(data.media);
+      setTotal(data.total);
+      setFolders(data.folders);
+      setSelectedFolder(data.selectedFolder);
+      setSearchedMedia(data.media);
+    }
+  };
+
+  useEffect(() => {
+    if (search) {
+      const fuse = new Fuse(media, fuseOptions);
+      const results = fuse.search(search);
+      const newSearchedMedia = results.map(page => page.item);
+
+      setSearchedMedia(newSearchedMedia);
+      setTotal(results.length);
+
+      return;
+    }
+    
+    setSearchedMedia(media);
+  }, [search]);
+
+  useEffect(() => {
+    Messenger.listen<MediaPaths>(messageListener);
+
+    return () => {
+      Messenger.unlisten(messageListener);
+    }
+  }, []);
+
+  return {
+    media: getMedia()
+  };
+}

src/dashboardWebView/hooks/useMessages.tsx

@@ -6,6 +6,7 @@ import { Page } from '../models/Page';
 import { DashboardViewAtom, SettingsAtom, ViewDataAtom } from '../state';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { EventData } from '@estruyf/vscode/dist/models';
+import { NavigationType } from '../models';
 
 export default function useMessages() {
   const [loading, setLoading] = useState<boolean>(false);
@@ -21,8 +22,10 @@ export default function useMessages() {
         break;
       case DashboardCommand.viewData:
         setViewData(message.data.data);
-        if (message.data.data?.type === 'media') {
-          setView('media');
+        if (message.data.data?.type === NavigationType.Media) {
+          setView(NavigationType.Media);
+        } else if (message.data.data?.type === NavigationType.Contents) {
+          setView(NavigationType.Contents);
         }
         break;
       case DashboardCommand.settings:

src/dashboardWebView/hooks/usePages.tsx

@@ -6,7 +6,7 @@ import Fuse from 'fuse.js';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { CategorySelector, FolderSelector, SearchSelector, SettingsSelector, SortingAtom, TabSelector, TagSelector } from '../state';
 import { SortOrder, SortType } from '../../models';
-import { DateHelper } from '../../helpers/DateHelper';
+import { Sorting } from '../../helpers/Sorting';
 
 const fuseOptions: Fuse.IFuseOptions<Page> = {
   keys: [
@@ -26,35 +26,12 @@ export default function usePages(pages: Page[]) {
   const tag = useRecoilValue(TagSelector);
   const category = useRecoilValue(CategorySelector);
 
-  // Sort field value alphabetically
-  const sortAlphabetically = (property: string) => {
-    return (a: Page, b: Page) => {
-      if (a[property] < b[property]) {
-        return -1;
-      }
-      if (a[property] > b[property]) {
-        return 1;
-      }
-      return 0;
-    };
-  };
-
-  // Sort by date
-  const sortByDate = (property: string) => {
-    return (a: Page, b: Page) => {
-      const dateA = DateHelper.tryParse(a[property]);
-      const dateB = DateHelper.tryParse(b[property]);
-
-      return (dateA || new Date(0)).getTime() - (dateB || new Date(0)).getTime();
-    };
-  };
-
   useEffect(() => {
     const draftField = settings?.draftField;
     let usedSorting = sorting;
 
     if (!usedSorting) {
-      const lastSort = settings?.dashboardState.sorting;      
+      const lastSort = settings?.dashboardState.contents.sorting;      
       if (lastSort) {
         setSorting(lastSort);
         return;
@@ -93,25 +70,27 @@ export default function usePages(pages: Page[]) {
     let pagesSorted: Page[] = Object.assign([], pagesToShow);
     if (!search) {
       if (sorting && sorting.id === SortOption.FileNameAsc) {
-        pagesSorted = pagesSorted.sort(sortAlphabetically("fmFileName"));
+        pagesSorted = pagesSorted.sort(Sorting.alphabetically("fmFileName"));
       } else if (sorting && sorting.id === SortOption.FileNameDesc) {
-        pagesSorted = pagesSorted.sort(sortAlphabetically("fmFileName")).reverse();
-      } else if (sorting && sorting.id === SortOption.LastModified) {
-        pagesSorted = pagesSorted.sort((a, b) => b.fmModified - a.fmModified);
+        pagesSorted = pagesSorted.sort(Sorting.alphabetically("fmFileName")).reverse();
+      } else if (sorting && sorting.id === SortOption.LastModifiedAsc) {
+        pagesSorted = pagesSorted.sort(Sorting.number("fmModified"));
+      } else if (sorting && sorting.id === SortOption.LastModifiedDesc) {
+        pagesSorted = pagesSorted.sort(Sorting.number("fmModified")).reverse();
       } else if (sorting && sorting.id && sorting.name) {
         const { order, name, type } = sorting;
 
         if (type === SortType.string) {
-          pagesSorted = pagesSorted.sort(sortAlphabetically(name));
+          pagesSorted = pagesSorted.sort(Sorting.alphabetically(name));
         } else if (type === SortType.date) {
-          pagesSorted = pagesSorted.sort(sortByDate(name));
+          pagesSorted = pagesSorted.sort(Sorting.date(name));
         }
 
         if (order === SortOrder.desc) {
           pagesSorted = pagesSorted.reverse();
         }
       } else {
-        pagesSorted = pagesSorted.sort((a, b) => b.fmModified - a.fmModified);
+        pagesSorted = pagesSorted.sort(Sorting.number("fmModified")).reverse();
       }
     }
 

src/dashboardWebView/index.tsx

@@ -7,22 +7,32 @@ import { Integrations } from "@sentry/tracing";
 import { SENTRY_LINK } from "../constants";
 import './styles.css';
 
-const elm = document.querySelector("#app");
-const welcome = elm?.getAttribute("data-showWelcome");
-const version = elm?.getAttribute("data-version");
-const environment = elm?.getAttribute("data-environment");
-
-Sentry.init({
-  dsn: SENTRY_LINK,
-  integrations: [new Integrations.BrowserTracing()],
-  tracesSampleRate: 0, // No performance tracing required
-  release: version || "",
-  environment: environment || ""
-});
-
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
   setState: (data: T) => void;
   postMessage: (msg: unknown) => void;
 };
-render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
+
+const elm = document.querySelector("#app");
+if (elm) {
+  const welcome = elm?.getAttribute("data-showWelcome");
+  const version = elm?.getAttribute("data-version");
+  const environment = elm?.getAttribute("data-environment");
+  const isProd = elm?.getAttribute("data-isProd");
+
+  if (isProd === "true") {
+    Sentry.init({
+      dsn: SENTRY_LINK,
+      integrations: [new Integrations.BrowserTracing()],
+      tracesSampleRate: 0, // No performance tracing required
+      release: version || "",
+      environment: environment || "",
+      ignoreErrors: ['ResizeObserver loop limit exceeded']
+    });
+  }
+  
+  render(<RecoilRoot><Dashboard showWelcome={!!welcome} /></RecoilRoot>, elm);
+}
+
+// Webpack HMR
+if ((module as any).hot) (module as any).hot.accept();

src/dashboardWebView/models/DashboardViewType.ts

@@ -0,0 +1,4 @@
+export enum DashboardViewType {
+  Grid = 1,
+  List
+}

src/dashboardWebView/models/NavigationType.ts

@@ -0,0 +1,4 @@
+export enum NavigationType {
+  Contents = "contents",
+  Media = "media"
+}

src/dashboardWebView/models/Settings.ts

@@ -1,8 +1,8 @@
 import { VersionInfo } from '../../models/VersionInfo';
-import { ViewType } from '../state';
 import { ContentFolder } from '../../models/ContentFolder';
-import { ContentType, DraftField, Framework, SortingSetting } from '../../models';
+import { ContentType, CustomScript, DraftField, Framework, SortingSetting } from '../../models';
 import { SortingOption } from './SortingOption';
+import { DashboardViewType } from '.';
 
 export interface Settings { 
   beta: boolean;
@@ -14,7 +14,7 @@ export interface Settings {
   categories: string[];
   openOnStart: boolean | null;
   versionInfo: VersionInfo;
-  pageViewType: ViewType | undefined;
+  pageViewType: DashboardViewType | undefined;
   mediaSnippet: string[];
   contentTypes: ContentType[];
   contentFolders: ContentFolder[];
@@ -23,8 +23,19 @@ export interface Settings {
   draftField: DraftField | null | undefined;
   customSorting: SortingSetting[] | undefined;
   dashboardState: DashboardState;
+  scripts: CustomScript[];
 }
 
 export interface DashboardState {
+  contents: ViewState;
+  media: MediaViewState;
+}
+
+export interface ViewState {
   sorting: SortingOption | null | undefined;
+  defaultSorting: string | null | undefined;
+}
+
+export interface MediaViewState extends ViewState {
+  selectedFolder: string | null | undefined;
 }

src/dashboardWebView/models/index.ts

@@ -1,3 +1,6 @@
+export * from './DashboardViewType';
+export * from './NavigationType';
 export * from './Page';
 export * from './Settings';
+export * from './SortingOption';
 export * from './Status';

src/dashboardWebView/state/atom/DashboardViewAtom.ts

@@ -1,6 +1,7 @@
 import { atom } from 'recoil';
+import { NavigationType } from '../../models';
 
-export const DashboardViewAtom = atom<"contents" | "media">({
+export const DashboardViewAtom = atom<NavigationType>({
   key: 'DashboardViewAtom',
-  default: "contents"
+  default: NavigationType.Contents
 });

src/dashboardWebView/state/atom/SortingAtom.ts

@@ -2,7 +2,7 @@ import { atom } from 'recoil';
 import { SortOption } from '../../constants/SortOption';
 import { SortingOption } from '../../models/SortingOption';
 
-export const DEFAULT_SORTING_OPTION = SortOption.LastModified;
+export const DEFAULT_SORTING_OPTION = SortOption.LastModifiedDesc;
 
 export const SortingAtom = atom<SortingOption | null>({
   key: 'SortingAtom',

src/dashboardWebView/state/atom/ViewAtom.ts

@@ -1,11 +1,7 @@
 import { atom } from 'recoil';
+import { DashboardViewType } from '../../models';
 
-export enum ViewType {
-  Grid = 1,
-  List
-}
-
-export const ViewAtom = atom<ViewType>({
+export const ViewAtom = atom<DashboardViewType>({
   key: 'ViewAtom',
-  default: ViewType.Grid
+  default: DashboardViewType.Grid
 });

src/explorerView/ExplorerView.ts

@@ -1,6 +1,6 @@
 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, 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, SETTINGS_CONTENT_DRAFT_FIELD, SETTING_SEO_SLUG_LENGTH, SETTING_SITE_BASEURL } from '../constants';
+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, 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, SETTINGS_CONTENT_DRAFT_FIELD, SETTING_SEO_SLUG_LENGTH, SETTING_SITE_BASEURL, SETTING_TAXONOMY_CUSTOM } from '../constants';
 import * as os from 'os';
 import { PanelSettings, CustomScript as ICustomScript } from '../models/PanelSettings';
 import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window, workspace, commands, env as vscodeEnv } from "vscode";
@@ -9,11 +9,11 @@ import { Command } from "../panelWebView/Command";
 import { CommandToCode } from '../panelWebView/CommandToCode';
 import { Article } from '../commands';
 import { TagType } from '../panelWebView/TagType';
-import { DraftField, TaxonomyType } from '../models';
+import { CustomTaxonomyData, DraftField, ScriptType, TaxonomyType } from '../models';
 import { exec } from 'child_process';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { Content } from 'mdast';
-import { COMMAND_NAME } from '../constants/Extension';
+import { COMMAND_NAME, EXTENSION_BETA_ID, EXTENSION_ID } from '../constants/Extension';
 import { Folders } from '../commands/Folders';
 import { Preview } from '../commands/Preview';
 import { openFileInEditor } from '../helpers/openFileInEditor';
@@ -109,14 +109,21 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         case CommandToCode.updateKeywords:
           this.updateTags(TagType.keywords, msg.data || []);
           break;
+        case CommandToCode.updateCustomTaxonomy:
+          this.updateCustomTaxonomy(msg.data);
+          break;
         case CommandToCode.addTagToSettings:
           this.addTags(TagType.tags, msg.data);
           break;
         case CommandToCode.addCategoryToSettings:
           this.addTags(TagType.categories, msg.data);
           break;
+        case CommandToCode.addToCustomTaxonomy:
+          this.addCustomTaxonomy(msg.data);
+          break;
         case CommandToCode.openSettings:
-          commands.executeCommand('workbench.action.openSettings', '@ext:eliostruyf.vscode-front-matter');
+          const isBeta = Extension.getInstance().isBetaVersion();
+          commands.executeCommand('workbench.action.openSettings', `@ext:${isBeta ? EXTENSION_BETA_ID : EXTENSION_ID}`);
           break;
         case CommandToCode.openFile:
           if (os.type() === "Linux" && vscodeEnv.remoteName?.toLowerCase() === "wsl") {
@@ -405,8 +412,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         },
         tags: Settings.get(SETTING_TAXONOMY_TAGS, true) || [],
         categories: Settings.get(SETTING_TAXONOMY_CATEGORIES, true) || [],
+        customTaxonomy: Settings.get(SETTING_TAXONOMY_CUSTOM, true) || [],
         freeform: Settings.get(SETTING_PANEL_FREEFORM),
-        scripts: Settings.get(SETTING_CUSTOM_SCRIPTS),
+        scripts: (Settings.get<ICustomScript[]>(SETTING_CUSTOM_SCRIPTS) || []).filter(s => s.type === ScriptType.Content || !s.type),
         isInitialized: await Template.isInitialized(),
         modifiedDateUpdate: Settings.get(SETTING_AUTO_UPDATE_DATE) || false,
         writingSettingsEnabled: this.isWritingSettingsEnabled() || false,
@@ -464,6 +472,40 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     }
   }
 
+  /**
+   * Update the tags in the current document
+   * @param data 
+   */
+  private updateCustomTaxonomy(data: CustomTaxonomyData) {
+    if (!data?.id || !data?.name) {
+      return;
+    }
+
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return "";
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (article && article.data) {
+      article.data[data.name] = data.options || [];
+      ArticleHelper.update(editor, article);
+      this.pushMetadata(article!.data);
+    }
+  }
+
+  /**
+   * Add tag to the settings
+   * @param data 
+   */
+  private async addCustomTaxonomy(data: CustomTaxonomyData) {
+    if (!data?.id || !data?.option) {
+      return;
+    }
+
+    await Settings.updateCustomTaxonomy(data.id, data.option);
+  }
+
   /**
    * Add tag to the settings
    * @param tagType 
@@ -653,7 +695,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     const styleVSCodeUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'vscode.css'));
     const styleResetUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'reset.css'));
     const stylesUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'assets/media', 'styles.css'));
-    const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'viewpanel.js'));
+    const scriptUri = webView.asWebviewUri(Uri.joinPath(this.extPath, 'dist', 'panelWebView.js'));
 
     const nonce = WebviewHelper.getNonce();
 

src/extension.ts

@@ -16,6 +16,9 @@ import { DashboardData } from './models/DashboardData';
 import { Settings as SettingsHelper } from './helpers';
 import { Content } from './commands/Content';
 import ContentProvider from './providers/ContentProvider';
+import { Wysiwyg } from './commands/Wysiwyg';
+import { Diagnostics } from './commands/Diagnostics';
+import { PagesListener } from './listeners';
 
 let frontMatterStatusBar: vscode.StatusBarItem;
 let statusDebouncer: { (fnc: any, time: number): void; };
@@ -38,12 +41,28 @@ export async function activate(context: vscode.ExtensionContext) {
 	
 	SettingsHelper.checkToPromote();
 
+	// Start listening to the folders for content changes.
+	// This will make sure the dashboard is up to date
+	PagesListener.startWatchers();
+
 	collection = vscode.languages.createDiagnosticCollection('frontMatter');
 
 	// Pages dashboard
 	Dashboard.init();
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboard, (data?: DashboardData) => {
-		Dashboard.open(data);
+		if (!data) {
+			Dashboard.open({ type: "contents" });
+		} else {
+			Dashboard.open(data);
+		}
+	}));
+	
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardMedia, (data?: DashboardData) => {
+		Dashboard.open({ type: "media" });
+	}));
+	
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardClose, (data?: DashboardData) => {
+		Dashboard.close();
 	}));
 
 	if (!extension.getVersion().usedVersion) {
@@ -52,7 +71,7 @@ export async function activate(context: vscode.ExtensionContext) {
 
 	// Register the explorer view
 	const explorerSidebar = ExplorerView.getInstance(extensionUri);
-	let explorerView = vscode.window.registerWebviewViewProvider(ExplorerView.viewType, explorerSidebar, {
+	const explorerView = vscode.window.registerWebviewViewProvider(ExplorerView.viewType, explorerSidebar, {
 		webviewOptions: {
 			retainContextWhenHidden: true
 		}
@@ -61,35 +80,35 @@ export async function activate(context: vscode.ExtensionContext) {
 	// Folding the front matter of markdown files
 	vscode.languages.registerFoldingRangeProvider(mdSelector, new MarkdownFoldingProvider());
 
-	let insertTags = vscode.commands.registerCommand(COMMAND_NAME.insertTags, async () => {
+	const insertTags = vscode.commands.registerCommand(COMMAND_NAME.insertTags, async () => {
 		await vscode.commands.executeCommand('workbench.view.extension.frontmatter-explorer');
 		await vscode.commands.executeCommand('workbench.action.focusSideBar');
 		explorerSidebar.triggerInputFocus(TagType.tags);
 	});
 
-	let insertCategories = vscode.commands.registerCommand(COMMAND_NAME.insertCategories, async () => {
+	const insertCategories = vscode.commands.registerCommand(COMMAND_NAME.insertCategories, async () => {
 		await vscode.commands.executeCommand('workbench.view.extension.frontmatter-explorer');
 		await vscode.commands.executeCommand('workbench.action.focusSideBar');
 		explorerSidebar.triggerInputFocus(TagType.categories);
 	});
 
-	let createTag = vscode.commands.registerCommand(COMMAND_NAME.createTag, () => {
+	const createTag = vscode.commands.registerCommand(COMMAND_NAME.createTag, () => {
 		Settings.create(TaxonomyType.Tag);
 	});
 
-	let createCategory = vscode.commands.registerCommand(COMMAND_NAME.createCategory, () => {
+	const createCategory = vscode.commands.registerCommand(COMMAND_NAME.createCategory, () => {
 		Settings.create(TaxonomyType.Category);
 	});
 
-	let exportTaxonomy = vscode.commands.registerCommand(COMMAND_NAME.exportTaxonomy, Settings.export);
+	const exportTaxonomy = vscode.commands.registerCommand(COMMAND_NAME.exportTaxonomy, Settings.export);
 
-	let remap = vscode.commands.registerCommand(COMMAND_NAME.remap, Settings.remap);
+	const remap = vscode.commands.registerCommand(COMMAND_NAME.remap, Settings.remap);
 
-	let setLastModifiedDate = vscode.commands.registerCommand(COMMAND_NAME.setLastModifiedDate, Article.setLastModifiedDate);
+	const setLastModifiedDate = vscode.commands.registerCommand(COMMAND_NAME.setLastModifiedDate, Article.setLastModifiedDate);
 
-	let generateSlug = vscode.commands.registerCommand(COMMAND_NAME.generateSlug, Article.generateSlug);
+	const generateSlug = vscode.commands.registerCommand(COMMAND_NAME.generateSlug, Article.generateSlug);
 
-	let createFromTemplate = vscode.commands.registerCommand(COMMAND_NAME.createFromTemplate, (folder: vscode.Uri) => {
+	const createFromTemplate = vscode.commands.registerCommand(COMMAND_NAME.createFromTemplate, (folder: vscode.Uri) => {
 		const folderPath = Folders.getFolderPath(folder);
     if (folderPath) {
       Template.create(folderPath);
@@ -158,8 +177,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	triggerShowDraftStatus();
 
 	// Listener for file edit changes
-	editDebounce = debounceCallback();
-	subscriptions.push(vscode.workspace.onDidChangeTextDocument(triggerFileChange));
+	subscriptions.push(vscode.workspace.onWillSaveTextDocument(handleAutoDateUpdate));
 
 	// Listener for file saves
 	subscriptions.push(vscode.workspace.onDidSaveTextDocument((doc: vscode.TextDocument) => {
@@ -179,6 +197,12 @@ export async function activate(context: vscode.ExtensionContext) {
 	// Create the editor experience for bulk scripts
 	subscriptions.push(vscode.workspace.registerTextDocumentContentProvider(ContentProvider.scheme, new ContentProvider()));
 
+	// What you see, is what you get
+	Wysiwyg.registerCommands(subscriptions);
+	
+	// Diagnostics
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.diagnostics, Diagnostics.show));
+
 	// Subscribe all commands
 	subscriptions.push(
 		insertTags,
@@ -206,8 +230,8 @@ export async function activate(context: vscode.ExtensionContext) {
 
 export function deactivate() {}
 
-const triggerFileChange = (e: vscode.TextDocumentChangeEvent) => {
-	editDebounce(() => Article.autoUpdate(e), 1000);
+const handleAutoDateUpdate = (e: vscode.TextDocumentWillSaveEvent) => {
+	Article.autoUpdate(e);
 };
 
 const triggerShowDraftStatus = () => {

src/helpers/ArticleHelper.ts

@@ -1,11 +1,12 @@
+import { MarkdownFoldingProvider } from './../providers/MarkdownFoldingProvider';
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ContentType';
 import * as vscode from 'vscode';
 import * as matter from "gray-matter";
 import * as fs from "fs";
-import { DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { DumpOptions } from 'js-yaml';
 import { TomlEngine, getFmLanguage, getFormatOpts } from './TomlEngine';
-import { Settings } from '.';
+import { Extension, Settings } from '.';
 import { format, parse } from 'date-fns';
 import { Notifications } from './Notifications';
 import { Article } from '../commands';
@@ -15,8 +16,10 @@ import sanitize from '../helpers/Sanitize';
 import { existsSync, mkdirSync } from 'fs';
 import { ContentType } from '../models';
 import { DateHelper } from './DateHelper';
+import { Diagnostic, DiagnosticSeverity, Position, window, Range } from 'vscode';
 
 export class ArticleHelper {
+  private static notifiedFiles: string[] = [];
   
   /**
    * Get the contents of the current article
@@ -24,17 +27,26 @@ export class ArticleHelper {
    * @param editor 
    */
   public static getFrontMatter(editor: vscode.TextEditor) {
-    const fileContents = editor.document.getText();  
-    return ArticleHelper.parseFile(fileContents, editor.document.fileName);
+    return ArticleHelper.getFrontMatterFromDocument(editor.document);
+  }
+
+  /**
+   * Get the contents of the specified document
+   * 
+   * @param document The document to parse.
+   */
+  public static getFrontMatterFromDocument(document: vscode.TextDocument) {
+    const fileContents = document.getText();
+    return ArticleHelper.parseFile(fileContents, document.fileName);
   }
 
   /**
    * Retrieve the file's front matter by its path
    * @param filePath 
    */
-  public static getFrontMatterByPath(filePath: string, surpressNotification: boolean = false) {   
+  public static getFrontMatterByPath(filePath: string) {   
     const file = fs.readFileSync(filePath, { encoding: "utf-8" });
-    return ArticleHelper.parseFile(file, filePath, surpressNotification);
+    return ArticleHelper.parseFile(file, filePath);
   }
 
   /**
@@ -44,11 +56,37 @@ export class ArticleHelper {
    * @param article 
    */
   public static async update(editor: vscode.TextEditor, article: matter.GrayMatterFile<string>) {
+    const update = this.generateUpdate(editor.document, article);
+
+    await editor.edit(builder => builder.replace(update.range, update.newText));
+  }
+
+  /**
+   * Generate the update to be applied to the article.
+   * @param article 
+   */
+  public static generateUpdate(document: vscode.TextDocument, article: matter.GrayMatterFile<string>): vscode.TextEdit {
+    const nrOfLines = document.lineCount as number;
+    const range = new vscode.Range(new vscode.Position(0, 0), new vscode.Position(nrOfLines, 0));
     const removeQuotes = Settings.get(SETTING_REMOVE_QUOTES) as string[];
     const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
+
+    // Check if there is a line ending
+    const lines = article.content.split("\n");
+    const lastLine = lines.pop();
+    const endsWithNewLine = lastLine !== undefined && lastLine.trim() === "";
     
     let newMarkdown = this.stringifyFrontMatter(article.content, Object.assign({}, article.data));
 
+    // Logic to not include a new line at the end of the file
+    if (!endsWithNewLine) {
+      const lines = newMarkdown.split("\n");
+      const lastLine = lines.pop();
+      if (lastLine !== undefined && lastLine?.trim() === "") {
+        newMarkdown = lines.join("\n");
+      }
+    }
+
     // Check for field where quotes need to be removed
     if (removeQuotes && removeQuotes.length) {
       for (const toRemove of removeQuotes) {
@@ -65,8 +103,7 @@ export class ArticleHelper {
       }
     }
 
-    const nrOfLines = editor.document.lineCount as number;
-    await editor.edit(builder => builder.replace(new vscode.Range(new vscode.Position(0, 0), new vscode.Position(nrOfLines, 0)), newMarkdown));
+    return vscode.TextEdit.replace(range, newMarkdown);
   }
 
   /**
@@ -106,9 +143,25 @@ export class ArticleHelper {
   /**
    * Checks if the current file is a markdown file
    */ 
-  public static isMarkdownFile() {
-    const editor = vscode.window.activeTextEditor;
-    return (editor && editor.document && (editor.document.languageId.toLowerCase() === "markdown" || editor.document.languageId.toLowerCase() === "mdx"));
+  public static isMarkdownFile(document: vscode.TextDocument | undefined | null = null) {
+    const supportedLanguages = ["markdown", "mdx"];
+    const supportedFileExtensions = [".md", ".mdx"];
+    const languageId = document?.languageId?.toLowerCase();
+    const isSupportedLanguage =  languageId && supportedLanguages.includes(languageId);
+    document ??= vscode.window.activeTextEditor?.document;
+
+    /**
+     * It's possible that the file is a file type we support but the user hasn't installed
+     * language support for. In that case, we'll manually check the extension as a proxy
+     * for whether or not we support the file.
+     */
+    if (!isSupportedLanguage) {
+      const fileName = document?.fileName?.toLowerCase();
+
+      return fileName && supportedFileExtensions.findIndex(fileExtension => fileName.endsWith(fileExtension)) > -1;
+    }
+    
+    return isSupportedLanguage;
   }
 
   /**
@@ -185,8 +238,9 @@ export class ArticleHelper {
    * @param titleValue 
    * @returns The new file path
    */
-  public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string): string | undefined {
+  public static createContent(contentType: ContentType | undefined, folderPath: string, titleValue: string, fileExtension?: string): string | undefined {
     const prefix = Settings.get<string>(SETTING_TEMPLATES_PREFIX);
+    const fileType = Settings.get<string>(SETTINGS_CONTENT_DEFAULT_FILETYPE);
     
     // Name of the file or folder to create
     const sanitizedName = ArticleHelper.sanitize(titleValue);
@@ -200,10 +254,10 @@ export class ArticleHelper {
         return;
       } else {
         mkdirSync(newFolder);
-        newFilePath = join(newFolder, `index.md`);
+        newFilePath = join(newFolder, `index.${fileExtension || contentType.fileType || fileType}`);
       }
     } else {
-      let newFileName = `${sanitizedName}.md`;
+      let newFileName = `${sanitizedName}.${fileExtension || contentType?.fileType || fileType}`;
 
       if (prefix && typeof prefix === "string") {
         newFileName = `${format(new Date(), DateHelper.formatUpdate(prefix) as string)}-${newFileName}`;
@@ -225,7 +279,7 @@ export class ArticleHelper {
    * @param fileContents 
    * @returns 
    */
-  private static parseFile(fileContents: string, fileName: string, surpressNotification: boolean = false): matter.GrayMatterFile<string> | null {
+  private static parseFile(fileContents: string, fileName: string): matter.GrayMatterFile<string> | null {
     try {
       const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
       
@@ -246,6 +300,12 @@ export class ArticleHelper {
             }
           }
 
+          this.notifiedFiles = this.notifiedFiles.filter(n => n !== fileName);
+
+          if (window.activeTextEditor?.document.uri) {
+            Extension.getInstance().diagnosticCollection.delete(window.activeTextEditor.document.uri);
+          }
+
           return article;
         }
       }
@@ -257,15 +317,26 @@ export class ArticleHelper {
         } 
       }];
 
-      if (!surpressNotification) {
-        Notifications.error(`There seems to be an issue parsing the content its front matter. FileName: ${basename(fileName)}. ERROR: ${error.message || error}`, ...items).then((result: any) => {
-          if (result?.title) {
-            const item = items.find(i => i.title === result.title);
-            if (item) {
-              item.action();
-            }
-          }
-        });
+      const editor = window.activeTextEditor;
+      if (editor?.document.uri) {
+        let fmRange = null;
+
+        if (error?.mark && typeof error.mark.line !== "undefined") {
+          const curLineText = editor.document.lineAt(error.mark.line - 1);
+          const lastCharPos = new Position(error.mark.line - 1, Math.max(curLineText.text.length, 0));
+          fmRange = new Range(new Position(error.mark.line - 1, 0), lastCharPos);
+        } else {
+          fmRange = MarkdownFoldingProvider.getFrontMatterRange(editor.document);
+        }
+
+
+        if (fmRange) {
+          Extension.getInstance().diagnosticCollection.set(editor.document.uri, [{
+            severity: DiagnosticSeverity.Error,
+            message: `${error.name ? `${error.name}: ` : ""}Error parsing the front matter of ${fileName}`,
+            range: fmRange
+          }]);
+        }
       }
     }
     return null;

src/helpers/ContentType.ts

@@ -1,7 +1,8 @@
+import { PagesListener } from './../listeners/PagesListener';
 import { ArticleHelper, Settings } from ".";
 import { SETTINGS_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES } from "../constants";
 import { ContentType as IContentType, DraftField } from '../models';
-import { Uri, workspace, window } from 'vscode'; 
+import { Uri, workspace, window, commands } from 'vscode'; 
 import { Folders } from "../commands/Folders";
 import { Questions } from "./Questions";
 import { writeFileSync } from "fs";
@@ -90,6 +91,12 @@ export class ContentType {
     return Settings.get<IContentType[]>(SETTING_TAXONOMY_CONTENT_TYPES);
   }
 
+  /**
+   * Create a new file with the specified content type
+   * @param contentType 
+   * @param folderPath 
+   * @returns 
+   */
   private static async create(contentType: IContentType, folderPath: string) {
 
     const titleValue = await Questions.ContentTitle();
@@ -122,11 +129,11 @@ export class ContentType {
 
     writeFileSync(newFilePath, content, { encoding: "utf8" });
 
-    const txtDoc = await workspace.openTextDocument(Uri.parse(newFilePath));
-    if (txtDoc) {
-      window.showTextDocument(txtDoc);
-    }
+    await commands.executeCommand('vscode.open', Uri.file(newFilePath));
 
     Notifications.info(`Your new content has been created.`);
+
+    // Trigger a refresh for the dashboard
+    PagesListener.refresh();
   }
 }