From 61e9fc0308719588a56ce174d0ed8e14a52e29e9 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 30 Jan 2022 17:33:25 +0100
Subject: [PATCH 01/62] start preping 6.1.0

---
 CHANGELOG.md                     |  7 ++++
 package-lock.json                | 16 +++++++++
 package.json                     |  3 +-
 src/commands/Article.ts          |  3 ++
 src/commands/Folders.ts          |  7 ++++
 src/commands/Preview.ts          |  3 ++
 src/commands/Project.ts          |  3 ++
 src/commands/Template.ts         |  3 ++
 src/explorerView/ExplorerView.ts |  2 ++
 src/extension.ts                 | 14 ++++++--
 src/helpers/ContentType.ts       |  3 ++
 src/helpers/Extension.ts         |  7 ++++
 src/helpers/SettingsHelper.ts    |  3 ++
 src/helpers/Telemetry.ts         | 59 ++++++++++++++++++++++++++++++++
 src/listeners/MediaListener.ts   |  6 ++++
 15 files changed, 136 insertions(+), 3 deletions(-)
 create mode 100644 src/helpers/Telemetry.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18d2e0cc..763b037c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Change Log
 
+## [6.1.0] - 2022-02-xx
+
+### 🎨 Enhancements
+
+### 🐞 Fixes
+
+
 ## [6.0.0] - 2022-01-25 - [Release Notes](https://beta.frontmatter.codes/updates/v6.0.0)
 
 ### ✨ New features
diff --git a/package-lock.json b/package-lock.json
index e50bb758..cf028408 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "@types/react-dom": "17.0.0",
         "@types/vscode": "^1.63.0",
         "@vscode/codicons": "0.0.20",
+        "@vscode/extension-telemetry": "^0.4.7",
         "@vscode/webview-ui-toolkit": "^0.8.1",
         "@webpack-cli/serve": "^1.6.0",
         "ajv": "^8.8.2",
@@ -903,6 +904,15 @@
       "integrity": "sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw==",
       "dev": true
     },
+    "node_modules/@vscode/extension-telemetry": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@vscode/extension-telemetry/-/extension-telemetry-0.4.7.tgz",
+      "integrity": "sha512-tXjChgxFN6EAfa6LIy/PE3fIbIvj0BnELUmGAG+8tUpsLY3g2iACcVM/UJJXtsU6db29tMqCLITUX2Dd3N06GA==",
+      "dev": true,
+      "engines": {
+        "vscode": "^1.60.0"
+      }
+    },
     "node_modules/@vscode/webview-ui-toolkit": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
@@ -9936,6 +9946,12 @@
       "integrity": "sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw==",
       "dev": true
     },
+    "@vscode/extension-telemetry": {
+      "version": "0.4.7",
+      "resolved": "https://registry.npmjs.org/@vscode/extension-telemetry/-/extension-telemetry-0.4.7.tgz",
+      "integrity": "sha512-tXjChgxFN6EAfa6LIy/PE3fIbIvj0BnELUmGAG+8tUpsLY3g2iACcVM/UJJXtsU6db29tMqCLITUX2Dd3N06GA==",
+      "dev": true
+    },
     "@vscode/webview-ui-toolkit": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
diff --git a/package.json b/package.json
index 17232b2e..b5b50495 100644
--- a/package.json
+++ b/package.json
@@ -1431,6 +1431,7 @@
     "@types/react-dom": "17.0.0",
     "@types/vscode": "^1.63.0",
     "@vscode/codicons": "0.0.20",
+    "@vscode/extension-telemetry": "^0.4.7",
     "@vscode/webview-ui-toolkit": "^0.8.1",
     "@webpack-cli/serve": "^1.6.0",
     "ajv": "^8.8.2",
@@ -1481,4 +1482,4 @@
   "dependencies": {
     "node-fetch": "^2.6.7"
   }
-}
\ No newline at end of file
+}
diff --git a/src/commands/Article.ts b/src/commands/Article.ts
index cfd5e11f..c0299311 100644
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -12,6 +12,7 @@ import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
+import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
 
 
 export class Article {
@@ -165,6 +166,8 @@ export class Article {
    * Generate the slug based on the article title
    */
 	public static async generateSlug() {
+		Telemetry.send(TelemetryEvent.generateSlug);
+    
     const prefix = Settings.get(SETTING_SLUG_PREFIX) as string;
     const suffix = Settings.get(SETTING_SLUG_SUFFIX) as string;
     const updateFileName = Settings.get(SETTING_SLUG_UPDATE_FILE_NAME) as string;
diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts
index 99116690..c2ebdd78 100644
--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -14,6 +14,7 @@ import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
 import { MediaListener, PagesListener } from '../listeners';
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
+import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
@@ -68,6 +69,8 @@ export class Folders {
       MediaHelpers.resetMedia();
       MediaListener.sendMediaFiles(0, folderName);
     }
+
+    Telemetry.send(TelemetryEvent.addMediaFolder);
   }
 
   /**
@@ -122,6 +125,8 @@ export class Folders {
       await Folders.update(folders);
 
       Notifications.info(`Folder registered`);
+
+		  Telemetry.send(TelemetryEvent.registerFolder);
     }
   }
 
@@ -134,6 +139,8 @@ export class Folders {
       let folders = Folders.get();
       folders = folders.filter(f => f.path !== folder.fsPath);
       await Folders.update(folders);
+
+		  Telemetry.send(TelemetryEvent.unregisterFolder);
     }
   }
 
diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts
index 4b559335..c4372101 100644
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -1,3 +1,4 @@
+import { Telemetry, TelemetryEvent } from './../helpers/Telemetry';
 import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join } from "path";
@@ -133,6 +134,8 @@ export class Preview {
     <iframe src="${urlJoin(localhostUrl.toString(), slug || '')}" >
   </body>
 </html>`;
+
+    Telemetry.send(TelemetryEvent.openPreview);
   }
 
   /**
diff --git a/src/commands/Project.ts b/src/commands/Project.ts
index e46cfc9c..509266ec 100644
--- a/src/commands/Project.ts
+++ b/src/commands/Project.ts
@@ -1,3 +1,4 @@
+import { Telemetry, TelemetryEvent } from './../helpers/Telemetry';
 import { workspace, Uri } from "vscode";
 import { join } from "path";
 import * as fs from "fs";
@@ -47,6 +48,8 @@ categories: []
         fs.writeFileSync(article.fsPath, Project.content, { encoding: "utf-8" });
         Notifications.info("Project initialized successfully.");
       }
+
+      Telemetry.send(TelemetryEvent.initialization)
     } catch (err: any) {
       Notifications.error(`Sorry, something went wrong - ${err?.message || err}`);
     }
diff --git a/src/commands/Template.ts b/src/commands/Template.ts
index c63045c8..120cc778 100644
--- a/src/commands/Template.ts
+++ b/src/commands/Template.ts
@@ -13,6 +13,7 @@ import { ContentType } from '../helpers/ContentType';
 import { ContentType as IContentType } from '../models';
 import { PagesListener } from '../listeners';
 import { extname } from 'path';
+import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
 
 export class Template {
 
@@ -175,6 +176,8 @@ export class Template {
 
     Notifications.info(`Your new content has been created.`);
 
+    Telemetry.send(TelemetryEvent.createContentFromTemplate);
+
     // Trigger a refresh for the dashboard
     PagesListener.refresh();
   }
diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts
index 7cb73195..4a9b4c48 100644
--- a/src/explorerView/ExplorerView.ts
+++ b/src/explorerView/ExplorerView.ts
@@ -23,6 +23,7 @@ import { Dashboard } from '../commands/Dashboard';
 import { ImageHelper } from '../helpers/ImageHelper';
 import { CustomScript } from '../helpers/CustomScript';
 import { Link, Parent } from 'mdast-util-from-markdown/lib';
+import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
 
 const FILE_LIMIT = 10;
 
@@ -205,6 +206,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
 
     webviewView.onDidChangeVisibility(() => {
       if (this.visible) {
+        Telemetry.send(TelemetryEvent.openExplorerView);
         // this.getFileData();
       }
     });
diff --git a/src/extension.ts b/src/extension.ts
index 102070bb..c38f1beb 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,3 +1,4 @@
+import { Telemetry, TelemetryEvent } from './helpers/Telemetry';
 import { ContentType } from './helpers/ContentType';
 import { Dashboard } from './commands/Dashboard';
 import * as vscode from 'vscode';
@@ -43,6 +44,9 @@ export async function activate(context: vscode.ExtensionContext) {
 	
 	SettingsHelper.checkToPromote();
 
+	// Sends the activation event
+	Telemetry.send(TelemetryEvent.activate);
+
 	// Start listening to the folders for content changes.
 	// This will make sure the dashboard is up to date
 	PagesListener.startWatchers();
@@ -52,6 +56,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	// Pages dashboard
 	Dashboard.init();
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboard, (data?: DashboardData) => {
+		Telemetry.send(TelemetryEvent.openContentDashboard);
 		if (!data) {
 			Dashboard.open({ type: "contents" });
 		} else {
@@ -60,14 +65,17 @@ export async function activate(context: vscode.ExtensionContext) {
 	}));
 	
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardMedia, (data?: DashboardData) => {
+		Telemetry.send(TelemetryEvent.openMediaDashboard);
 		Dashboard.open({ type: "media" });
 	}));
 	
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardData, (data?: DashboardData) => {
+		Telemetry.send(TelemetryEvent.openDataDashboard);
 		Dashboard.open({ type: "data" });
 	}));
 	
 	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.dashboardClose, (data?: DashboardData) => {
+		Telemetry.send(TelemetryEvent.closeDashboard);
 		Dashboard.close();
 	}));
 
@@ -151,7 +159,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	});
 
 	// Settings promotion command
-	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.promote, SettingsHelper.promote ));
+	subscriptions.push(vscode.commands.registerCommand(COMMAND_NAME.promote, SettingsHelper.promote));
 
 	// Collapse all sections in the webview
 	const collapseAll = vscode.commands.registerCommand(COMMAND_NAME.collapseSections, () => {
@@ -234,7 +242,9 @@ export async function activate(context: vscode.ExtensionContext) {
 	);
 }
 
-export function deactivate() {}
+export function deactivate() {
+	Telemetry.dispose();
+}
 
 const handleAutoDateUpdate = (e: vscode.TextDocumentWillSaveEvent) => {
 	Article.autoUpdate(e);
diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts
index c54e3e9e..e240b946 100644
--- a/src/helpers/ContentType.ts
+++ b/src/helpers/ContentType.ts
@@ -8,6 +8,7 @@ import { Questions } from "./Questions";
 import { writeFileSync } from "fs";
 import { Notifications } from "./Notifications";
 import { DEFAULT_CONTENT_TYPE_NAME } from "../constants/ContentType";
+import { Telemetry, TelemetryEvent } from './Telemetry';
 
 
 export class ContentType {
@@ -125,6 +126,8 @@ export class ContentType {
 
     Notifications.info(`Your new content has been created.`);
 
+    Telemetry.send(TelemetryEvent.createContentFromContentType);
+
     // Trigger a refresh for the dashboard
     PagesListener.refresh();
   }
diff --git a/src/helpers/Extension.ts b/src/helpers/Extension.ts
index 0900ed54..eba367b0 100644
--- a/src/helpers/Extension.ts
+++ b/src/helpers/Extension.ts
@@ -84,6 +84,13 @@ export class Extension {
     return this.ctx.extension.packageJSON.name;
   }
 
+  /**
+   * Returns the extension's version
+   */
+  public get version(): string {
+    return this.ctx.extension.packageJSON.version;
+  }
+
   /**
    * Check if the extension is in production/development mode
    */
diff --git a/src/helpers/SettingsHelper.ts b/src/helpers/SettingsHelper.ts
index b65cfcf4..56a0284f 100644
--- a/src/helpers/SettingsHelper.ts
+++ b/src/helpers/SettingsHelper.ts
@@ -1,3 +1,4 @@
+import { Telemetry, TelemetryEvent } from './Telemetry';
 import { Notifications } from './Notifications';
 import { commands, Uri, workspace, window } from 'vscode';
 import * as vscode from 'vscode';
@@ -249,6 +250,8 @@ export class Settings {
     }
 
     Notifications.info(`All settings promoted to team level.`);
+
+    Telemetry.send(TelemetryEvent.promoteSettings);
   }
 
   /**
diff --git a/src/helpers/Telemetry.ts b/src/helpers/Telemetry.ts
new file mode 100644
index 00000000..88ad5099
--- /dev/null
+++ b/src/helpers/Telemetry.ts
@@ -0,0 +1,59 @@
+import TelemetryReporter, { TelemetryEventMeasurements, TelemetryEventProperties } from '@vscode/extension-telemetry';
+import { Extension } from '.';
+import { EXTENSION_BETA_ID, EXTENSION_ID } from '../constants';
+
+export const TelemetryEvent = {
+  activate: 'activate',
+  initialization: 'initialization',
+  openContentDashboard: 'openContentDashboard',
+  openMediaDashboard: 'openMediaDashboard',
+  openDataDashboard: 'openDataDashboard',
+  closeDashboard: 'closeDashboard',
+  generateSlug: 'generateSlug',
+  createContentFromTemplate: 'createContentFromTemplate',
+  createContentFromContentType: 'createContentFromContentType',
+  registerFolder: 'registerFolder',
+  unregisterFolder: 'unregisterFolder',
+  addMediaFolder: 'addMediaFolder',
+  promoteSettings: 'promoteSettings',
+  openPreview: 'openPreview',
+  uploadMedia: 'uploadMedia',
+  refreshMedia: 'refreshMedia',
+  deleteMedia: 'deleteMedia',
+  insertMediaToContent: 'insertMediaToContent',
+  updateMediaMetadata: 'updateMediaMetadata',
+  openExplorerView: 'openExplorerView',
+};
+
+export class Telemetry {
+  private static instance: Telemetry;
+  private static reporter: TelemetryReporter | null = null;
+
+  private constructor() {
+    const extension = Extension.getInstance();
+    const extTitle = extension.isBetaVersion() ? EXTENSION_BETA_ID : EXTENSION_ID;
+    const extVersion = extension.version;
+    const appKey = `525037e5-70ff-4620-8e52-30e1aef8deee`;
+
+    Telemetry.reporter = new TelemetryReporter(extTitle, extVersion, appKey);
+  }
+
+  public static getInstance(): Telemetry {
+    if (!Telemetry.instance) {
+      Telemetry.instance = new Telemetry();
+    }
+    return Telemetry.instance;
+  }
+
+  public static send(eventName: string, properties?: TelemetryEventProperties, measurements?: TelemetryEventMeasurements) {
+    if (!Telemetry.reporter) {
+      Telemetry.getInstance();
+    }
+    
+    Telemetry.reporter?.sendTelemetryEvent(eventName, properties, measurements);
+  }
+
+  public static dispose() {
+    Telemetry.reporter?.dispose();
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/MediaListener.ts b/src/listeners/MediaListener.ts
index f85dcaa8..1d33db21 100644
--- a/src/listeners/MediaListener.ts
+++ b/src/listeners/MediaListener.ts
@@ -1,3 +1,4 @@
+import { Telemetry, TelemetryEvent } from './../helpers/Telemetry';
 import { MediaHelpers } from './../helpers/MediaHelpers';
 import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
@@ -20,22 +21,27 @@ export class MediaListener extends BaseListener {
         this.sendMediaFiles(page, folder, sorting);
         break;
       case DashboardMessage.refreshMedia:
+        Telemetry.send(TelemetryEvent.refreshMedia);
         MediaHelpers.resetMedia();
         this.sendMediaFiles(0, msg?.data?.folder);
         break;
       case DashboardMessage.uploadMedia:
+        Telemetry.send(TelemetryEvent.uploadMedia);
         this.store(msg?.data);
         break;
       case DashboardMessage.deleteMedia:
+        Telemetry.send(TelemetryEvent.deleteMedia);
         this.delete(msg?.data);
         break;
       case DashboardMessage.revealMedia:
         this.openFileInFinder(msg?.data?.file);
         break;
       case DashboardMessage.insertPreviewImage:
+        Telemetry.send(TelemetryEvent.insertMediaToContent);
         MediaHelpers.insertMediaToMarkdown(msg?.data);
         break;
       case DashboardMessage.updateMediaMetadata:
+        Telemetry.send(TelemetryEvent.updateMediaMetadata);
         this.update(msg.data);
         break;
       case DashboardMessage.createMediaFolder:

From 936916acf82a7728b363c5c0e429a39a82d5c51d Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 30 Jan 2022 17:33:30 +0100
Subject: [PATCH 02/62] 6.1.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index cf028408..0aac2346 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "vscode-front-matter-beta",
-  "version": "6.0.0",
+  "version": "6.1.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "vscode-front-matter-beta",
-      "version": "6.0.0",
+      "version": "6.1.0",
       "license": "MIT",
       "dependencies": {
         "node-fetch": "^2.6.7"
diff --git a/package.json b/package.json
index b5b50495..6bdead9b 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "displayName": "Front Matter",
   "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": "6.0.0",
+  "version": "6.1.0",
   "preview": false,
   "publisher": "eliostruyf",
   "galleryBanner": {

From fca0528a7ea7ccd1409215ecda06d75c2aee0896 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 30 Jan 2022 19:56:13 +0100
Subject: [PATCH 03/62] application insight fixes

---
 src/commands/Article.ts                       |  4 +--
 src/commands/Dashboard.ts                     |  4 +--
 src/commands/Folders.ts                       |  4 +--
 src/commands/Preview.ts                       |  4 +--
 src/commands/Project.ts                       |  4 +--
 src/commands/Template.ts                      |  4 +--
 src/constants/TelemetryEvent.ts               | 28 +++++++++++++++++++
 src/constants/index.ts                        |  3 ++
 src/dashboardWebView/DashboardMessage.ts      |  1 +
 .../components/Contents/Contents.tsx          | 10 +++++++
 .../components/DataView/DataView.tsx          |  5 ++++
 .../components/Media/Media.tsx                |  9 +++++-
 .../components/WelcomeScreen.tsx              |  9 ++++--
 src/explorerView/ExplorerView.ts              |  4 +--
 src/extension.ts                              |  4 +--
 src/helpers/ContentType.ts                    |  6 ++--
 src/helpers/SettingsHelper.ts                 |  4 +--
 src/helpers/Telemetry.ts                      | 23 ---------------
 src/listeners/MediaListener.ts                |  4 +--
 src/listeners/TelemetryListener.ts            | 21 ++++++++++++++
 src/listeners/index.ts                        |  3 ++
 webpack/extension.config.js                   |  3 +-
 22 files changed, 111 insertions(+), 50 deletions(-)
 create mode 100644 src/constants/TelemetryEvent.ts
 create mode 100644 src/listeners/TelemetryListener.ts

diff --git a/src/commands/Article.ts b/src/commands/Article.ts
index c0299311..bbac62a3 100644
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -1,5 +1,5 @@
 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, SETTINGS_CONTENT_PLACEHOLDERS } from './../constants';
+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, SETTINGS_CONTENT_PLACEHOLDERS, TelemetryEvent } from './../constants';
 import * as vscode from 'vscode';
 import { Field, TaxonomyType } from "../models";
 import { format } from "date-fns";
@@ -12,7 +12,7 @@ import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
-import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
+import { Telemetry } from '../helpers/Telemetry';
 
 
 export class Article {
diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
index 23e4900c..ac2f8a5b 100644
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -10,8 +10,7 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { MediaLibrary } from '../helpers/MediaLibrary';
-import { DashboardListener, MediaListener, SettingsListener } from '../listeners';
-import { DataListener } from '../listeners/DataListener';
+import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener } from '../listeners';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -146,6 +145,7 @@ export class Dashboard {
       PagesListener.process(msg);
       SettingsListener.process(msg);
       DataListener.process(msg);
+      TelemetryListener.process(msg);
     });
   }
 
diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts
index c2ebdd78..47546262 100644
--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -1,5 +1,5 @@
 import { Questions } from './../helpers/Questions';
-import { SETTINGS_CONTENT_PAGE_FOLDERS, SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_CONTENT_SUPPORTED_FILETYPES } from './../constants';
+import { SETTINGS_CONTENT_PAGE_FOLDERS, SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_CONTENT_SUPPORTED_FILETYPES, TelemetryEvent } from './../constants';
 import { commands, Uri, workspace, window } from "vscode";
 import { basename, join } from "path";
 import { ContentFolder, FileInfo, FolderInfo } from "../models";
@@ -14,7 +14,7 @@ import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
 import { MediaListener, PagesListener } from '../listeners';
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
-import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
+import { Telemetry } from '../helpers/Telemetry';
 
 export const WORKSPACE_PLACEHOLDER = `[[workspace]]`;
 
diff --git a/src/commands/Preview.ts b/src/commands/Preview.ts
index c4372101..c7ae7132 100644
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -1,5 +1,5 @@
-import { Telemetry, TelemetryEvent } from './../helpers/Telemetry';
-import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT } from './../constants';
+import { Telemetry } from './../helpers/Telemetry';
+import { SETTING_PREVIEW_HOST, SETTING_PREVIEW_PATHNAME, CONTEXT, TelemetryEvent } from './../constants';
 import { ArticleHelper } from './../helpers/ArticleHelper';
 import { join } from "path";
 import { commands, env, Uri, ViewColumn, window } from "vscode";
diff --git a/src/commands/Project.ts b/src/commands/Project.ts
index 509266ec..b6dddbd2 100644
--- a/src/commands/Project.ts
+++ b/src/commands/Project.ts
@@ -1,4 +1,4 @@
-import { Telemetry, TelemetryEvent } from './../helpers/Telemetry';
+import { Telemetry } from './../helpers/Telemetry';
 import { workspace, Uri } from "vscode";
 import { join } from "path";
 import * as fs from "fs";
@@ -6,7 +6,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";
+import { SETTINGS_CONTENT_DEFAULT_FILETYPE, TelemetryEvent } from "../constants";
 
 export class Project {
 
diff --git a/src/commands/Template.ts b/src/commands/Template.ts
index 120cc778..1e38c4f0 100644
--- a/src/commands/Template.ts
+++ b/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 { SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTING_TEMPLATES_FOLDER, TelemetryEvent } from '../constants';
 import { ArticleHelper, Settings } from '../helpers';
 import { Article } from '.';
 import { Notifications } from '../helpers/Notifications';
@@ -13,7 +13,7 @@ import { ContentType } from '../helpers/ContentType';
 import { ContentType as IContentType } from '../models';
 import { PagesListener } from '../listeners';
 import { extname } from 'path';
-import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
+import { Telemetry } from '../helpers/Telemetry';
 
 export class Template {
 
diff --git a/src/constants/TelemetryEvent.ts b/src/constants/TelemetryEvent.ts
new file mode 100644
index 00000000..dfca5182
--- /dev/null
+++ b/src/constants/TelemetryEvent.ts
@@ -0,0 +1,28 @@
+export const TelemetryEvent = {
+  activate: 'activate',
+  initialization: 'initialization',
+  openContentDashboard: 'openContentDashboard',
+  openMediaDashboard: 'openMediaDashboard',
+  openDataDashboard: 'openDataDashboard',
+  closeDashboard: 'closeDashboard',
+  generateSlug: 'generateSlug',
+  createContentFromTemplate: 'createContentFromTemplate',
+  createContentFromContentType: 'createContentFromContentType',
+  registerFolder: 'registerFolder',
+  unregisterFolder: 'unregisterFolder',
+  addMediaFolder: 'addMediaFolder',
+  promoteSettings: 'promoteSettings',
+  openPreview: 'openPreview',
+  uploadMedia: 'uploadMedia',
+  refreshMedia: 'refreshMedia',
+  deleteMedia: 'deleteMedia',
+  insertMediaToContent: 'insertMediaToContent',
+  updateMediaMetadata: 'updateMediaMetadata',
+  openExplorerView: 'openExplorerView',
+
+  // Webviews
+  webviewWelcomeScreen: 'webviewWelcomeScreen',
+  webviewMediaView: 'webviewMediaView',
+  webviewDataView: 'webviewDataView',
+  webviewContentsView: 'webviewContentsView',
+};
\ No newline at end of file
diff --git a/src/constants/index.ts b/src/constants/index.ts
index fad8cc87..9ae33331 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -1,10 +1,13 @@
 export * from './ContentType';
 export * from './DefaultFields';
+export * from './DefaultFileTypes';
 export * from './Extension';
 export * from './ExtensionState';
+export * from './FrameworkDetectors';
 export * from './Links';
 export * from './LocalStore';
 export * from './Navigation';
+export * from './TelemetryEvent';
 export * from './charMap';
 export * from './context';
 export * from './settings';
diff --git a/src/dashboardWebView/DashboardMessage.ts b/src/dashboardWebView/DashboardMessage.ts
index f7e4cab3..c64974a0 100644
--- a/src/dashboardWebView/DashboardMessage.ts
+++ b/src/dashboardWebView/DashboardMessage.ts
@@ -24,4 +24,5 @@ export enum DashboardMessage {
   runCustomScript = 'runCustomScript',
   getDataEntries = 'getDataEntries',
   putDataEntries = 'putDataEntries',
+  sendTelemetry = 'sendTelemetry',
 }
\ No newline at end of file
diff --git a/src/dashboardWebView/components/Contents/Contents.tsx b/src/dashboardWebView/components/Contents/Contents.tsx
index f3f90357..25c2718e 100644
--- a/src/dashboardWebView/components/Contents/Contents.tsx
+++ b/src/dashboardWebView/components/Contents/Contents.tsx
@@ -7,6 +7,10 @@ import { Overview } from './Overview';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
 import usePages from '../../hooks/usePages';
+import { useEffect } from 'react';
+import { Messenger } from '@estruyf/vscode/dist/client';
+import { DashboardMessage } from '../../DashboardMessage';
+import { TelemetryEvent } from '../../../constants';
 
 export interface IContentsProps {
   pages: Page[];
@@ -19,6 +23,12 @@ export const Contents: React.FunctionComponent<IContentsProps> = ({pages, loadin
 
   const pageFolders = [...new Set(pageItems.map(page => page.fmFolder))];
 
+  useEffect(() => {
+    Messenger.send(DashboardMessage.sendTelemetry, {
+      event: TelemetryEvent.webviewContentsView
+    });
+  }, []);
+
   return (
     <div className="flex flex-col h-full overflow-auto">
       <Header 
diff --git a/src/dashboardWebView/components/DataView/DataView.tsx b/src/dashboardWebView/components/DataView/DataView.tsx
index 52cbe75f..02173f25 100644
--- a/src/dashboardWebView/components/DataView/DataView.tsx
+++ b/src/dashboardWebView/components/DataView/DataView.tsx
@@ -19,6 +19,7 @@ import { ChevronRightIcon } from '@heroicons/react/outline';
 import { ToastContainer, toast, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { DataType } from '../../../models/DataType';
+import { TelemetryEvent } from '../../../constants';
 
 export interface IDataViewProps {}
 
@@ -102,6 +103,10 @@ export const DataView: React.FunctionComponent<IDataViewProps> = (props: React.P
 
   useEffect(() => {
     Messenger.listen(messageListener);
+    
+    Messenger.send(DashboardMessage.sendTelemetry, {
+      event: TelemetryEvent.webviewDataView
+    });
 
     return () => {
       Messenger.unlisten(messageListener);
diff --git a/src/dashboardWebView/components/Media/Media.tsx b/src/dashboardWebView/components/Media/Media.tsx
index 9b68ddf9..7263ac25 100644
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -13,11 +13,12 @@ import { Item } from './Item';
 import { Lightbox } from './Lightbox';
 import { List } from './List';
 import { useDropzone } from 'react-dropzone'
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { DashboardMessage } from '../../DashboardMessage';
 import { FrontMatterIcon } from '../../../panelWebView/components/Icons/FrontMatterIcon';
 import { FolderItem } from './FolderItem';
 import useMedia from '../../hooks/useMedia';
+import { TelemetryEvent } from '../../../constants';
 
 export interface IMediaProps {}
 
@@ -46,6 +47,12 @@ export const Media: React.FunctionComponent<IMediaProps> = (props: React.PropsWi
     });
   }, [selectedFolder]);
 
+  useEffect(() => {
+    Messenger.send(DashboardMessage.sendTelemetry, {
+      event: TelemetryEvent.webviewMediaView
+    });
+  }, []);
+
   const {getRootProps, isDragActive} = useDropzone({
     onDrop,
     accept: 'image/*'
diff --git a/src/dashboardWebView/components/WelcomeScreen.tsx b/src/dashboardWebView/components/WelcomeScreen.tsx
index 467521cb..985920f6 100644
--- a/src/dashboardWebView/components/WelcomeScreen.tsx
+++ b/src/dashboardWebView/components/WelcomeScreen.tsx
@@ -1,6 +1,6 @@
 import {HeartIcon, StarIcon} from '@heroicons/react/outline';
 import * as React from 'react';
-import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK } from '../../constants';
+import { GITHUB_LINK, REVIEW_LINK, SPONSOR_LINK, TelemetryEvent } from '../../constants';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { FrontMatterIcon } from '../../panelWebView/components/Icons/FrontMatterIcon';
 import { GitHubIcon } from '../../panelWebView/components/Icons/GitHubIcon';
@@ -15,10 +15,15 @@ export interface IWelcomeScreenProps {
 export const WelcomeScreen: React.FunctionComponent<IWelcomeScreenProps> = ({settings}: React.PropsWithChildren<IWelcomeScreenProps>) => {
 
   React.useEffect(() => {
+
+    Messenger.send(DashboardMessage.sendTelemetry, {
+      event: TelemetryEvent.webviewWelcomeScreen
+    });
+
     return () => {
       Messenger.send(DashboardMessage.reload)
     };
-  }, ['']);
+  }, []);
   
   return (
     <div className={`h-full overflow-auto py-24`}>
diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts
index 4a9b4c48..1e8f3650 100644
--- a/src/explorerView/ExplorerView.ts
+++ b/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, SETTING_TAXONOMY_CUSTOM, CONTEXT, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START } 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, CONTEXT, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, TelemetryEvent } 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, ThemeIcon } from "vscode";
@@ -23,7 +23,7 @@ import { Dashboard } from '../commands/Dashboard';
 import { ImageHelper } from '../helpers/ImageHelper';
 import { CustomScript } from '../helpers/CustomScript';
 import { Link, Parent } from 'mdast-util-from-markdown/lib';
-import { Telemetry, TelemetryEvent } from '../helpers/Telemetry';
+import { Telemetry } from '../helpers/Telemetry';
 
 const FILE_LIMIT = 10;
 
diff --git a/src/extension.ts b/src/extension.ts
index c38f1beb..0381b7af 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,4 +1,4 @@
-import { Telemetry, TelemetryEvent } from './helpers/Telemetry';
+import { Telemetry } from './helpers/Telemetry';
 import { ContentType } from './helpers/ContentType';
 import { Dashboard } from './commands/Dashboard';
 import * as vscode from 'vscode';
@@ -7,7 +7,7 @@ import { Folders } from './commands/Folders';
 import { Preview } from './commands/Preview';
 import { Project } from './commands/Project';
 import { Template } from './commands/Template';
-import { COMMAND_NAME } from './constants';
+import { COMMAND_NAME, TelemetryEvent } from './constants';
 import { TaxonomyType } from './models';
 import { MarkdownFoldingProvider } from './providers/MarkdownFoldingProvider';
 import { TagType } from './panelWebView/TagType';
diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts
index e240b946..6fbfd6ee 100644
--- a/src/helpers/ContentType.ts
+++ b/src/helpers/ContentType.ts
@@ -1,14 +1,14 @@
 import { PagesListener } from './../listeners/PagesListener';
 import { ArticleHelper, Settings } from ".";
-import { SETTINGS_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES } from "../constants";
+import { SETTINGS_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
 import { ContentType as IContentType, DraftField, Field } from '../models';
-import { Uri, workspace, window, commands } from 'vscode'; 
+import { Uri, commands } from 'vscode'; 
 import { Folders } from "../commands/Folders";
 import { Questions } from "./Questions";
 import { writeFileSync } from "fs";
 import { Notifications } from "./Notifications";
 import { DEFAULT_CONTENT_TYPE_NAME } from "../constants/ContentType";
-import { Telemetry, TelemetryEvent } from './Telemetry';
+import { Telemetry } from './Telemetry';
 
 
 export class ContentType {
diff --git a/src/helpers/SettingsHelper.ts b/src/helpers/SettingsHelper.ts
index 56a0284f..f3902211 100644
--- a/src/helpers/SettingsHelper.ts
+++ b/src/helpers/SettingsHelper.ts
@@ -1,9 +1,9 @@
-import { Telemetry, TelemetryEvent } from './Telemetry';
+import { Telemetry } from './Telemetry';
 import { Notifications } from './Notifications';
 import { commands, Uri, workspace, window } from 'vscode';
 import * as vscode from 'vscode';
 import { ContentType, CustomTaxonomy, TaxonomyType } from '../models';
-import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, CONFIG_KEY, CONTEXT, ExtensionState, SETTING_TAXONOMY_CUSTOM } from '../constants';
+import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, CONFIG_KEY, CONTEXT, ExtensionState, SETTING_TAXONOMY_CUSTOM, TelemetryEvent } from '../constants';
 import { Folders } from '../commands/Folders';
 import { join, basename } from 'path';
 import { existsSync, readFileSync, watch, writeFileSync } from 'fs';
diff --git a/src/helpers/Telemetry.ts b/src/helpers/Telemetry.ts
index 88ad5099..4c45b9cd 100644
--- a/src/helpers/Telemetry.ts
+++ b/src/helpers/Telemetry.ts
@@ -2,29 +2,6 @@ import TelemetryReporter, { TelemetryEventMeasurements, TelemetryEventProperties
 import { Extension } from '.';
 import { EXTENSION_BETA_ID, EXTENSION_ID } from '../constants';
 
-export const TelemetryEvent = {
-  activate: 'activate',
-  initialization: 'initialization',
-  openContentDashboard: 'openContentDashboard',
-  openMediaDashboard: 'openMediaDashboard',
-  openDataDashboard: 'openDataDashboard',
-  closeDashboard: 'closeDashboard',
-  generateSlug: 'generateSlug',
-  createContentFromTemplate: 'createContentFromTemplate',
-  createContentFromContentType: 'createContentFromContentType',
-  registerFolder: 'registerFolder',
-  unregisterFolder: 'unregisterFolder',
-  addMediaFolder: 'addMediaFolder',
-  promoteSettings: 'promoteSettings',
-  openPreview: 'openPreview',
-  uploadMedia: 'uploadMedia',
-  refreshMedia: 'refreshMedia',
-  deleteMedia: 'deleteMedia',
-  insertMediaToContent: 'insertMediaToContent',
-  updateMediaMetadata: 'updateMediaMetadata',
-  openExplorerView: 'openExplorerView',
-};
-
 export class Telemetry {
   private static instance: Telemetry;
   private static reporter: TelemetryReporter | null = null;
diff --git a/src/listeners/MediaListener.ts b/src/listeners/MediaListener.ts
index 1d33db21..42874088 100644
--- a/src/listeners/MediaListener.ts
+++ b/src/listeners/MediaListener.ts
@@ -1,11 +1,11 @@
-import { Telemetry, TelemetryEvent } from './../helpers/Telemetry';
+import { Telemetry } from './../helpers/Telemetry';
 import { MediaHelpers } from './../helpers/MediaHelpers';
 import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
 import { SortingOption } from '../dashboardWebView/models';
 import { commands, env, Uri } from 'vscode';
-import { COMMAND_NAME } from '../constants';
+import { COMMAND_NAME, TelemetryEvent } from '../constants';
 import * as os from 'os';
 
 
diff --git a/src/listeners/TelemetryListener.ts b/src/listeners/TelemetryListener.ts
new file mode 100644
index 00000000..c603d16a
--- /dev/null
+++ b/src/listeners/TelemetryListener.ts
@@ -0,0 +1,21 @@
+import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
+import { Telemetry } from "../helpers/Telemetry";
+import { BaseListener } from "./BaseListener";
+
+
+export class TelemetryListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: DashboardMessage, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case DashboardMessage.sendTelemetry:
+        Telemetry.send(msg.data.event, msg.data.properties, msg.data.metrics);
+        break;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/index.ts b/src/listeners/index.ts
index a1799860..6a61ba18 100644
--- a/src/listeners/index.ts
+++ b/src/listeners/index.ts
@@ -1,5 +1,8 @@
+export * from './BaseListener';
 export * from './DashboardListener';
+export * from './DataListener';
 export * from './ExtensionListener';
 export * from './MediaListener';
 export * from './PagesListener';
 export * from './SettingsListener';
+export * from './TelemetryListener';
diff --git a/webpack/extension.config.js b/webpack/extension.config.js
index 80b7b250..6fa06a1b 100644
--- a/webpack/extension.config.js
+++ b/webpack/extension.config.js
@@ -18,7 +18,8 @@ const config = [
     },
     devtool: 'nosources-source-map',
     externals: {
-      vscode: 'commonjs vscode'
+      vscode: 'commonjs vscode',
+      'applicationinsights-native-metrics': 'commonjs applicationinsights-native-metrics'
     },
     resolve: {
       extensions: ['.ts', '.js']

From 64a38e56b9262c8734cb1606b76793a8b01d1913 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 31 Jan 2022 20:33:05 +0100
Subject: [PATCH 04/62] Update activation events

---
 package.json | 21 +--------------------
 1 file changed, 1 insertion(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 6bdead9b..ff540981 100644
--- a/package.json
+++ b/package.json
@@ -45,26 +45,7 @@
     "url": "https://github.com/estruyf/vscode-front-matter"
   },
   "activationEvents": [
-    "*",
-    "onCommand:frontMatter.insertTags",
-    "onCommand:frontMatter.insertCategories",
-    "onCommand:frontMatter.createTag",
-    "onCommand:frontMatter.createCategory",
-    "onCommand:frontMatter.exportTaxonomy",
-    "onCommand:frontMatter.remap",
-    "onCommand:frontMatter.setLastModifiedDate",
-    "onCommand:frontMatter.generateSlug",
-    "onCommand:frontMatter.createFromTemplate",
-    "onCommand:frontMatter.registerFolder",
-    "onCommand:frontMatter.unregisterFolder",
-    "onCommand:frontMatter.createContent",
-    "onCommand:frontMatter.init",
-    "onCommand:frontMatter.collapseSections",
-    "onCommand:frontMatter.preview",
-    "onCommand:frontMatter.dashboard",
-    "onCommand:frontMatter.promoteSettings",
-    "onCommand:frontMatter.insertImage",
-    "onView:frontMatter.explorer"
+    "*"
   ],
   "main": "./dist/extension.js",
   "contributes": {

From 5a81ea19b8c9273c4961c9d44e0fadcf3c17e9e4 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 31 Jan 2022 22:15:18 +0100
Subject: [PATCH 05/62] Add telemetry property

---
 package.json              | 7 ++++++-
 src/constants/settings.ts | 2 ++
 src/helpers/Telemetry.ts  | 8 +++++++-
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index ff540981..8f5c8fea 100644
--- a/package.json
+++ b/package.json
@@ -948,6 +948,11 @@
           "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.telemetry.disable": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Specify if you want to disable the telemetry. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.telemetry.disable)"
         }
       }
     },
@@ -1463,4 +1468,4 @@
   "dependencies": {
     "node-fetch": "^2.6.7"
   }
-}
+}
\ No newline at end of file
diff --git a/src/constants/settings.ts b/src/constants/settings.ts
index 31e2b535..b35bb22e 100644
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@@ -32,6 +32,8 @@ export const SETTING_SEO_DESCRIPTION_FIELD = "taxonomy.seoDescriptionField";
 export const SETTING_TEMPLATES_FOLDER = "templates.folder";
 export const SETTING_TEMPLATES_PREFIX = "templates.prefix";
 
+export const SETTING_TELEMETRY_DISABLE = "telemetry.disable";
+
 export const SETTING_PANEL_FREEFORM = "panel.freeform";
 
 export const SETTING_PREVIEW_HOST = "preview.host";
diff --git a/src/helpers/Telemetry.ts b/src/helpers/Telemetry.ts
index 4c45b9cd..7df7c312 100644
--- a/src/helpers/Telemetry.ts
+++ b/src/helpers/Telemetry.ts
@@ -1,6 +1,7 @@
+import { Settings } from './SettingsHelper';
 import TelemetryReporter, { TelemetryEventMeasurements, TelemetryEventProperties } from '@vscode/extension-telemetry';
 import { Extension } from '.';
-import { EXTENSION_BETA_ID, EXTENSION_ID } from '../constants';
+import { EXTENSION_BETA_ID, EXTENSION_ID, SETTING_TELEMETRY_DISABLE } from '../constants';
 
 export class Telemetry {
   private static instance: Telemetry;
@@ -26,6 +27,11 @@ export class Telemetry {
     if (!Telemetry.reporter) {
       Telemetry.getInstance();
     }
+
+    const isDisabled = Settings.get(SETTING_TELEMETRY_DISABLE);
+    if (isDisabled) {
+      return;
+    }
     
     Telemetry.reporter?.sendTelemetryEvent(eventName, properties, measurements);
   }

From 19e468c908b8670b760313dea3fed121662aaa8a Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 1 Feb 2022 14:31:57 +0100
Subject: [PATCH 06/62] Fix reference

---
 src/helpers/Telemetry.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/helpers/Telemetry.ts b/src/helpers/Telemetry.ts
index 7df7c312..526adce1 100644
--- a/src/helpers/Telemetry.ts
+++ b/src/helpers/Telemetry.ts
@@ -1,6 +1,5 @@
-import { Settings } from './SettingsHelper';
 import TelemetryReporter, { TelemetryEventMeasurements, TelemetryEventProperties } from '@vscode/extension-telemetry';
-import { Extension } from '.';
+import { Extension, Settings } from '.';
 import { EXTENSION_BETA_ID, EXTENSION_ID, SETTING_TELEMETRY_DISABLE } from '../constants';
 
 export class Telemetry {
@@ -28,7 +27,7 @@ export class Telemetry {
       Telemetry.getInstance();
     }
 
-    const isDisabled = Settings.get(SETTING_TELEMETRY_DISABLE);
+    const isDisabled = Settings.get<boolean>(SETTING_TELEMETRY_DISABLE);
     if (isDisabled) {
       return;
     }

From df86d02e8b302e97fdfb07ee7212a48882e9f381 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 2 Feb 2022 12:03:41 +0100
Subject: [PATCH 07/62] Update activity bar icon

---
 CHANGELOG.md | 2 ++
 package.json | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 763b037c..95f8cc40 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,8 @@
 
 ### 🎨 Enhancements
 
+- Updated the activity bar icon for better visibility
+
 ### 🐞 Fixes
 
 
diff --git a/package.json b/package.json
index 8f5c8fea..aee0f9bd 100644
--- a/package.json
+++ b/package.json
@@ -54,7 +54,7 @@
         {
           "id": "frontmatter-explorer",
           "title": "FrontMatter",
-          "icon": "assets/frontmatter.svg"
+          "icon": "assets/frontmatter-short-min.svg"
         }
       ]
     },
@@ -63,7 +63,7 @@
         {
           "id": "frontMatter.explorer",
           "name": "FrontMatter",
-          "icon": "assets/frontmatter.svg",
+          "icon": "assets/frontmatter-short-min.svg",
           "contextualTitle": "FrontMatter",
           "type": "webview"
         }

From 781ab6ac403f1eeede5efa24eaf433c19cb75dfd Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 8 Feb 2022 13:17:56 +0100
Subject: [PATCH 08/62] #243 - Refactoring front matter parsing

---
 CHANGELOG.md                     |  4 +++
 package.json                     |  2 +-
 src/commands/Article.ts          | 12 ++++----
 src/commands/Settings.ts         | 23 +++-----------
 src/helpers/ArticleHelper.ts     | 25 +++++-----------
 src/helpers/CustomScript.ts      |  4 +--
 src/helpers/SeoHelper.ts         |  4 +--
 src/helpers/TomlEngine.ts        | 31 -------------------
 src/helpers/index.ts             |  3 +-
 src/parsers/FrontMatterParser.ts | 51 ++++++++++++++++++++++++++++++++
 src/parsers/ParserEngines.ts     | 25 ++++++++++++++++
 src/parsers/index.ts             |  2 ++
 12 files changed, 106 insertions(+), 80 deletions(-)
 delete mode 100644 src/helpers/TomlEngine.ts
 create mode 100644 src/parsers/FrontMatterParser.ts
 create mode 100644 src/parsers/ParserEngines.ts
 create mode 100644 src/parsers/index.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 95f8cc40..2b684141 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@
 
 - Updated the activity bar icon for better visibility
 
+### ⚡️ Optimizations
+
+- [#243](https://github.com/estruyf/vscode-front-matter/issues/243): Refactoring front matter parsing
+
 ### 🐞 Fixes
 
 
diff --git a/package.json b/package.json
index aee0f9bd..f247d802 100644
--- a/package.json
+++ b/package.json
@@ -1468,4 +1468,4 @@
   "dependencies": {
     "node-fetch": "^2.6.7"
   }
-}
\ No newline at end of file
+}
diff --git a/src/commands/Article.ts b/src/commands/Article.ts
index bbac62a3..3fe20014 100644
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -4,7 +4,6 @@ import * as vscode from 'vscode';
 import { Field, TaxonomyType } from "../models";
 import { format } from "date-fns";
 import { ArticleHelper, Settings, SlugHelper } from '../helpers';
-import matter = require('gray-matter');
 import { Notifications } from '../helpers/Notifications';
 import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
@@ -13,6 +12,7 @@ import { ExplorerView } from '../explorerView/ExplorerView';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { Telemetry } from '../helpers/Telemetry';
+import { ParsedFrontMatter } from '../parsers';
 
 
 export class Article {
@@ -103,7 +103,7 @@ export class Article {
    * Update the date in the front matter
    * @param article 
    */
-  public static updateDate(article: matter.GrayMatterFile<string>, forceCreate: boolean = false) {
+  public static updateDate(article: ParsedFrontMatter, forceCreate: boolean = false) {
     article.data = ArticleHelper.updateDates(article.data);   
     return article;
   }
@@ -125,7 +125,7 @@ export class Article {
 
     ArticleHelper.update(
       editor,
-      updatedArticle as matter.GrayMatterFile<string>
+      updatedArticle as ParsedFrontMatter
     );
   }
 
@@ -145,7 +145,7 @@ export class Article {
 
   private static setLastModifiedDateInner(
     document: vscode.TextDocument
-  ): matter.GrayMatterFile<string> | undefined {
+  ): ParsedFrontMatter | undefined {
     const article = ArticleHelper.getFrontMatterFromDocument(document);
 
     if (!article) {
@@ -343,7 +343,7 @@ export class Article {
   /**
    * Get the current article
    */
-  private static getCurrent(): matter.GrayMatterFile<string> | undefined {
+  private static getCurrent(): ParsedFrontMatter | undefined {
     const editor = vscode.window.activeTextEditor;
     if (!editor) {
       return;
@@ -364,7 +364,7 @@ export class Article {
    * @param field 
    * @param forceCreate 
    */
-  private static articleDate(article: matter.GrayMatterFile<string>, field: string, forceCreate: boolean) {
+  private static articleDate(article: ParsedFrontMatter, field: string, forceCreate: boolean) {
     if (typeof article.data[field] !== "undefined" || forceCreate) {
       article.data[field] = Article.formatDate(new Date());
     }
diff --git a/src/commands/Settings.ts b/src/commands/Settings.ts
index 4fbd5043..5f7b9538 100644
--- a/src/commands/Settings.ts
+++ b/src/commands/Settings.ts
@@ -1,10 +1,9 @@
 import * as vscode from 'vscode';
-import * as matter from 'gray-matter';
 import * as fs from 'fs';
 import { TaxonomyType } from "../models";
 import { SETTING_TAXONOMY_TAGS, SETTING_TAXONOMY_CATEGORIES, EXTENSION_NAME } from '../constants';
 import { ArticleHelper, Settings as SettingsHelper, FilesHelper } from '../helpers';
-import { TomlEngine, getFmLanguage, getFormatOpts } from '../helpers/TomlEngine';
+import { FrontMatterParser } from '../parsers';
 import { DumpOptions } from 'js-yaml';
 import { Notifications } from '../helpers/Notifications';
 
@@ -90,10 +89,6 @@ export class Settings {
       const progressNr = allMdFiles.length/100;
       progress.report({ increment: 0});
 
-      // Get language options
-      const language = getFmLanguage();
-      const langOpts = getFormatOpts(language);
-
       let i = 0;
       for (const file of allMdFiles) {
         progress.report({ increment: (++i/progressNr) });
@@ -102,10 +97,7 @@ export class Settings {
           const txtData = mdFile.getText();
           if (txtData) {
             try {
-              const article = matter(txtData, {
-                ...TomlEngine,
-                ...langOpts
-              });
+              const article = FrontMatterParser.fromFile(txtData);
               if (article && article.data) {
                 const { data } = article;
                 const mdTags = data["tags"];
@@ -218,13 +210,8 @@ export class Settings {
         progress.report({ increment: (++i/progressNr) });
         const mdFile = fs.readFileSync(file.path, { encoding: "utf8" });
         if (mdFile) {
-          const language = getFmLanguage();
-          const langOpts = getFormatOpts(language);
           try {
-            const article = matter(mdFile, {
-              ...TomlEngine,
-              ...langOpts
-            });
+            const article = FrontMatterParser.fromFile(mdFile);
             if (article && article.data) {
               const { data } = article;
               let taxonomies: string[] = data[matterProp];
@@ -239,9 +226,7 @@ export class Settings {
                   data[matterProp] = [...new Set(taxonomies)].sort();
                   const spaces = vscode.window.activeTextEditor?.options?.tabSize;
                   // Update the file
-                  fs.writeFileSync(file.path, matter.stringify(article.content, article.data, {
-                    ...TomlEngine,
-                    ...langOpts,
+                  fs.writeFileSync(file.path, FrontMatterParser.toFile(article.content, article.data, {
                     indent: spaces || 2
                   } as DumpOptions as any), { encoding: "utf8" });
                 }
diff --git a/src/helpers/ArticleHelper.ts b/src/helpers/ArticleHelper.ts
index d70293ba..bb84db7b 100644
--- a/src/helpers/ArticleHelper.ts
+++ b/src/helpers/ArticleHelper.ts
@@ -1,11 +1,10 @@
 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, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTINGS_CONTENT_PLACEHOLDERS, SETTINGS_CONTENT_SUPPORTED_FILETYPES, 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 { FrontMatterParser, ParsedFrontMatter } from '../parsers';
 import { Extension, Logger, Settings, SlugHelper } from '.';
 import { format, parse } from 'date-fns';
 import { Notifications } from './Notifications';
@@ -56,7 +55,7 @@ export class ArticleHelper {
    * @param editor 
    * @param article 
    */
-  public static async update(editor: vscode.TextEditor, article: matter.GrayMatterFile<string>) {
+  public static async update(editor: vscode.TextEditor, article: ParsedFrontMatter) {
     const update = this.generateUpdate(editor.document, article);
 
     await editor.edit(builder => builder.replace(update.range, update.newText));
@@ -66,7 +65,7 @@ export class ArticleHelper {
    * Generate the update to be applied to the article.
    * @param article 
    */
-  public static generateUpdate(document: vscode.TextDocument, article: matter.GrayMatterFile<string>): vscode.TextEdit {
+  public static generateUpdate(document: vscode.TextDocument, article: ParsedFrontMatter): 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[];
@@ -117,9 +116,6 @@ export class ArticleHelper {
     const indentArray = Settings.get(SETTING_INDENT_ARRAY) as boolean;
     const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
 
-    const language = getFmLanguage();
-    const langOpts = getFormatOpts(language);
-
     const spaces = vscode.window.activeTextEditor?.options?.tabSize;
 
     if (commaSeparated) {
@@ -130,9 +126,7 @@ export class ArticleHelper {
       }
     }
     
-    return matter.stringify(content, data, ({
-      ...TomlEngine,
-      ...langOpts,
+    return FrontMatterParser.toFile(content, data, ({
       noArrayIndent: !indentArray,
       skipInvalid: true,
       noCompatMode: true,
@@ -169,7 +163,7 @@ export class ArticleHelper {
   /**
    * Get date from front matter
    */ 
-  public static getDate(article: matter.GrayMatterFile<string> | null) {
+  public static getDate(article: ParsedFrontMatter | null) {
     if (!article) {
       return;
     }
@@ -358,17 +352,12 @@ export class ArticleHelper {
    * @param fileContents 
    * @returns 
    */
-  private static parseFile(fileContents: string, fileName: string): matter.GrayMatterFile<string> | null {
+  private static parseFile(fileContents: string, fileName: string): ParsedFrontMatter | null {
     try {
       const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
       
       if (fileContents) {
-        const language: string = getFmLanguage(); 
-        const langOpts = getFormatOpts(language);
-        let article: matter.GrayMatterFile<string> | null = matter(fileContents, {
-          ...TomlEngine,
-          ...langOpts
-        });
+        let article = FrontMatterParser.fromFile(fileContents);
   
         if (article?.data) {
           if (commaSeparated) {
diff --git a/src/helpers/CustomScript.ts b/src/helpers/CustomScript.ts
index ad0501f0..5ac4b9ea 100644
--- a/src/helpers/CustomScript.ts
+++ b/src/helpers/CustomScript.ts
@@ -3,13 +3,13 @@ import { window, env as vscodeEnv, ProgressLocation } from 'vscode';
 import { ArticleHelper } from '.';
 import { Folders } from '../commands/Folders';
 import { exec } from 'child_process';
-import matter = require('gray-matter');
 import * as os from 'os';
 import { join } from 'path';
 import { Notifications } from './Notifications';
 import ContentProvider from '../providers/ContentProvider';
 import { Dashboard } from '../commands/Dashboard';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
+import { ParsedFrontMatter } from '../parsers';
 
 export class CustomScript {
 
@@ -117,7 +117,7 @@ export class CustomScript {
     });
   }
 
-  private static async runScript(wsPath: string, article: matter.GrayMatterFile<string> | null, contentPath: string, script: ICustomScript): Promise<string | null> {
+  private static async runScript(wsPath: string, article: ParsedFrontMatter | null, contentPath: string, script: ICustomScript): Promise<string | null> {
     return new Promise((resolve, reject) => {
       let articleData = "";
       if (os.type() === "Windows_NT") {
diff --git a/src/helpers/SeoHelper.ts b/src/helpers/SeoHelper.ts
index 7e1b3487..2703cc4f 100644
--- a/src/helpers/SeoHelper.ts
+++ b/src/helpers/SeoHelper.ts
@@ -1,10 +1,10 @@
 import * as vscode from 'vscode';
 import { ArticleHelper } from '.';
-import matter = require('gray-matter');
+import { ParsedFrontMatter } from '../parsers';
 
 export class SeoHelper {
 
-  public static checkLength(editor: vscode.TextEditor, collection: vscode.DiagnosticCollection, article: matter.GrayMatterFile<string>, fieldName: string, length: number) {
+  public static checkLength(editor: vscode.TextEditor, collection: vscode.DiagnosticCollection, article: ParsedFrontMatter, fieldName: string, length: number) {
     const value = article.data[fieldName];
     if (value.length > length) {
       const text = editor.document.getText();
diff --git a/src/helpers/TomlEngine.ts b/src/helpers/TomlEngine.ts
deleted file mode 100644
index be0f4d97..00000000
--- a/src/helpers/TomlEngine.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as toml from '@iarna/toml';
-import { SETTING_FRONTMATTER_TYPE } from '../constants';
-import { Settings } from './SettingsHelper';
-
-export const getFmLanguage = (): string => {
-  const language = Settings.get(SETTING_FRONTMATTER_TYPE) as string || "YAML";
-  return language.toLowerCase();
-};
-
-export const getFormatOpts = (format: string): { language: string, delimiters: string | [string, string] | undefined } => {
-  const formats: { [prop: string]: { language: string, delimiters: string | [string, string] | undefined }} = {
-    yaml: { language: 'yaml', delimiters: '---' },
-    toml: { language: 'toml', delimiters: '+++' },
-    json: { language: 'json', delimiters: '---' },
-  };
-
-  return formats[format];
-};
-
-export const TomlEngine = {
-  engines: {
-    toml: {
-      parse: (value: string) => {
-        return toml.parse(value);
-      },
-      stringify: (value: any) => {
-        return toml.stringify(value);
-      }
-    }
-  }
-};
\ No newline at end of file
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
index 0942eda9..efc40674 100644
--- a/src/helpers/index.ts
+++ b/src/helpers/index.ts
@@ -9,6 +9,7 @@ export * from './FrameworkDetector';
 export * from './GroupBy';
 export * from './ImageHelper';
 export * from './Logger';
+export * from './MediaHelpers';
 export * from './MediaLibrary';
 export * from './MessageHelper';
 export * from './Notifications';
@@ -19,7 +20,7 @@ export * from './SettingsHelper';
 export * from './SlugHelper';
 export * from './Sorting';
 export * from './StringHelpers';
-export * from './TomlEngine';
+export * from './Telemetry';
 export * from './decodeBase64Image';
 export * from './getNonce';
 export * from './isValidFile';
diff --git a/src/parsers/FrontMatterParser.ts b/src/parsers/FrontMatterParser.ts
new file mode 100644
index 00000000..155678d4
--- /dev/null
+++ b/src/parsers/FrontMatterParser.ts
@@ -0,0 +1,51 @@
+import { Engines, getFormatOpts } from ".";
+import * as matter from "gray-matter";
+import { Settings } from "../helpers";
+import { SETTING_FRONTMATTER_TYPE } from "../constants";
+
+export interface Format {
+  language: string;
+  delimiters: string | [string, string] | undefined;
+}
+
+export interface ParsedFrontMatter {
+  data: { [key: string]: any };
+  content: string
+}
+
+export class FrontMatterParser {
+
+  public static fromFile(content: string): ParsedFrontMatter {
+    const format = getFormatOpts(this.getLanguage());
+    const result = matter(content, { ...Engines, ...format });
+    // in the absent of a body when serializing an entry we use an empty one
+    // when calling `toFile`, so we don't want to add it when parsing.
+
+    return {
+      data: { ...result.data },
+      content: (result.content.trim() && result.content)
+    };
+  }
+
+  public static toFile(
+    content: string,
+    metadata: Object,
+    options?: any
+  ) {
+    // Stringify to YAML if the format was not set
+    const format = getFormatOpts(this.getLanguage());
+
+    const trimLastLineBreak = content.slice(-1) !== '\n';
+    const file = matter.stringify(content, metadata, {
+      ...Engines,
+      ...options,
+      ...format
+    });
+    return trimLastLineBreak && file.slice(-1) === '\n' ? file.substring(0, file.length - 1) : file;
+  }
+
+  private static getLanguage() {
+    const language = Settings.get(SETTING_FRONTMATTER_TYPE) as string || "YAML";
+    return language.toLowerCase();
+  }
+}
\ No newline at end of file
diff --git a/src/parsers/ParserEngines.ts b/src/parsers/ParserEngines.ts
new file mode 100644
index 00000000..ab57f80c
--- /dev/null
+++ b/src/parsers/ParserEngines.ts
@@ -0,0 +1,25 @@
+import * as toml from '@iarna/toml';
+import { Format } from '.';
+
+export const getFormatOpts = (format: string): Format => {
+  const formats: { [prop: string]: Format} = {
+    yaml: { language: 'yaml', delimiters: '---' },
+    toml: { language: 'toml', delimiters: '+++' },
+    json: { language: 'json', delimiters: '---' },
+  };
+
+  return formats[format];
+};
+
+export const Engines = {
+  engines: {
+    toml: {
+      parse: (value: string) => {
+        return toml.parse(value);
+      },
+      stringify: (value: any) => {
+        return toml.stringify(value);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/parsers/index.ts b/src/parsers/index.ts
new file mode 100644
index 00000000..07a2f694
--- /dev/null
+++ b/src/parsers/index.ts
@@ -0,0 +1,2 @@
+export * from './FrontMatterParser';
+export * from './ParserEngines';

From 946d84a7a976e7c7a69d704885f7622425c142ef Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 10 Feb 2022 12:00:23 +0100
Subject: [PATCH 09/62] Data click optimization

---
 CHANGELOG.md                                              | 1 +
 src/dashboardWebView/components/DataView/SortableItem.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b684141..262f687a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -8,6 +8,7 @@
 
 ### ⚡️ Optimizations
 
+- Show the data item its details when clicking on the record
 - [#243](https://github.com/estruyf/vscode-front-matter/issues/243): Refactoring front matter parsing
 
 ### 🐞 Fixes
diff --git a/src/dashboardWebView/components/DataView/SortableItem.tsx b/src/dashboardWebView/components/DataView/SortableItem.tsx
index b68054db..94ac9564 100644
--- a/src/dashboardWebView/components/DataView/SortableItem.tsx
+++ b/src/dashboardWebView/components/DataView/SortableItem.tsx
@@ -24,7 +24,9 @@ export const SortableItem = SortableElement(({ value, selectedIndex, crntIndex,
   return (
     <>
       <li data-test={`${selectedIndex}-${crntIndex}`} className={`py-2 px-2 w-full flex justify-between content-center hover:bg-gray-200 dark:hover:bg-vulcan-400 ${selectedIndex === crntIndex ? `bg-gray-300 dark:bg-vulcan-300` : ``}`}>
-        <div className='flex items-center'>
+        <div 
+          className='flex items-center w-full'
+          onClick={() => onSelectedIndexChange(crntIndex)}>
           <DragHandle />
           <span>{value}</span>
         </div>

From f7f6f26997ac52afa4aedb1fa7fb34ceb3096ab0 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 10 Feb 2022 20:18:13 +0100
Subject: [PATCH 10/62] #176 - New collection field + uniform custom components

---
 package-lock.json                             |  78 +++++++++++
 package.json                                  |  28 +++-
 .../uniforms-frontmatter/AutoField.tsx        |  39 ++++++
 .../uniforms-frontmatter/AutoFields.tsx       |  29 ++++
 .../uniforms-frontmatter/AutoForm.tsx         |  13 ++
 .../uniforms-frontmatter/BaseForm.tsx         |  13 ++
 .../uniforms-frontmatter/BoolField.css        |  52 +++++++
 .../uniforms-frontmatter/BoolField.tsx        |  44 ++++++
 .../uniforms-frontmatter/DateField.tsx        |  57 ++++++++
 .../uniforms-frontmatter/ErrorField.tsx       |  19 +++
 .../uniforms-frontmatter/ErrorsField.css      |  14 ++
 .../uniforms-frontmatter/ErrorsField.tsx      |  23 +++
 .../uniforms-frontmatter/HiddenField.tsx      |  35 +++++
 .../uniforms-frontmatter/ListAddField.css     |  21 +++
 .../uniforms-frontmatter/ListAddField.tsx     |  63 +++++++++
 .../uniforms-frontmatter/ListDelField.css     |  27 ++++
 .../uniforms-frontmatter/ListDelField.tsx     |  63 +++++++++
 .../uniforms-frontmatter/ListField.css        |   7 +
 .../uniforms-frontmatter/ListField.tsx        |  50 +++++++
 .../uniforms-frontmatter/ListItemField.tsx    |  23 +++
 .../uniforms-frontmatter/LongTextField.tsx    |  41 ++++++
 .../uniforms-frontmatter/NestField.tsx        |  31 +++++
 .../uniforms-frontmatter/NumField.tsx         |  54 ++++++++
 .../uniforms-frontmatter/QuickForm.tsx        |  28 ++++
 .../uniforms-frontmatter/RadioField.tsx       |  62 +++++++++
 .../uniforms-frontmatter/SelectField.tsx      | 109 +++++++++++++++
 .../uniforms-frontmatter/SubmitField.tsx      |  29 ++++
 .../uniforms-frontmatter/TextField.tsx        |  48 +++++++
 .../uniforms-frontmatter/ValidatedForm.tsx    |  13 ++
 .../ValidatedQuickForm.tsx                    |   5 +
 .../uniforms-frontmatter/component-styles.ts  |   8 ++
 src/components/uniforms-frontmatter/index.ts  |  23 +++
 .../components/DataView/DataForm.tsx          |   5 +-
 src/explorerView/ExplorerView.ts              |   8 +-
 src/models/PanelSettings.ts                   |   7 +-
 .../DataCollection/DataCollectionControls.tsx |  25 ++++
 .../DataCollection/DataCollectionField.tsx    | 131 ++++++++++++++++++
 src/panelWebView/components/Metadata.tsx      |  22 +++
 src/panelWebView/index.tsx                    |   1 +
 src/panelWebView/styles.css                   |  94 +++++++++++++
 webpack/panel.config.js                       |   2 +-
 41 files changed, 1436 insertions(+), 8 deletions(-)
 create mode 100644 src/components/uniforms-frontmatter/AutoField.tsx
 create mode 100644 src/components/uniforms-frontmatter/AutoFields.tsx
 create mode 100644 src/components/uniforms-frontmatter/AutoForm.tsx
 create mode 100644 src/components/uniforms-frontmatter/BaseForm.tsx
 create mode 100644 src/components/uniforms-frontmatter/BoolField.css
 create mode 100644 src/components/uniforms-frontmatter/BoolField.tsx
 create mode 100644 src/components/uniforms-frontmatter/DateField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ErrorField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ErrorsField.css
 create mode 100644 src/components/uniforms-frontmatter/ErrorsField.tsx
 create mode 100644 src/components/uniforms-frontmatter/HiddenField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ListAddField.css
 create mode 100644 src/components/uniforms-frontmatter/ListAddField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ListDelField.css
 create mode 100644 src/components/uniforms-frontmatter/ListDelField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ListField.css
 create mode 100644 src/components/uniforms-frontmatter/ListField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ListItemField.tsx
 create mode 100644 src/components/uniforms-frontmatter/LongTextField.tsx
 create mode 100644 src/components/uniforms-frontmatter/NestField.tsx
 create mode 100644 src/components/uniforms-frontmatter/NumField.tsx
 create mode 100644 src/components/uniforms-frontmatter/QuickForm.tsx
 create mode 100644 src/components/uniforms-frontmatter/RadioField.tsx
 create mode 100644 src/components/uniforms-frontmatter/SelectField.tsx
 create mode 100644 src/components/uniforms-frontmatter/SubmitField.tsx
 create mode 100644 src/components/uniforms-frontmatter/TextField.tsx
 create mode 100644 src/components/uniforms-frontmatter/ValidatedForm.tsx
 create mode 100644 src/components/uniforms-frontmatter/ValidatedQuickForm.tsx
 create mode 100644 src/components/uniforms-frontmatter/component-styles.ts
 create mode 100644 src/components/uniforms-frontmatter/index.ts
 create mode 100644 src/panelWebView/components/DataCollection/DataCollectionControls.tsx
 create mode 100644 src/panelWebView/components/DataCollection/DataCollectionField.tsx
 create mode 100644 src/panelWebView/styles.css

diff --git a/package-lock.json b/package-lock.json
index 0aac2346..b3930fbf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,8 +22,11 @@
         "@sentry/tracing": "^6.13.3",
         "@tailwindcss/forms": "^0.3.3",
         "@types/glob": "7.1.3",
+        "@types/invariant": "^2.2.35",
         "@types/js-yaml": "3.12.1",
+        "@types/lodash.omit": "^4.5.6",
         "@types/lodash.uniqby": "4.7.6",
+        "@types/lodash.xor": "^4.5.6",
         "@types/mocha": "^5.2.6",
         "@types/node": "10.17.48",
         "@types/node-fetch": "^2.5.12",
@@ -47,8 +50,11 @@
         "html-loader": "1.3.2",
         "html-webpack-plugin": "4.5.0",
         "image-size": "^1.0.0",
+        "invariant": "^2.2.4",
         "lodash-es": "^4.17.21",
+        "lodash.omit": "^4.5.0",
         "lodash.uniqby": "4.7.0",
+        "lodash.xor": "^4.5.0",
         "mdast-util-from-markdown": "1.0.0",
         "node-json-db": "^1.3.0",
         "npm-run-all": "^4.1.5",
@@ -712,6 +718,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==",
+      "dev": true
+    },
     "node_modules/@types/js-yaml": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-3.12.1.tgz",
@@ -730,6 +742,15 @@
       "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
       "dev": true
     },
+    "node_modules/@types/lodash.omit": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.6.tgz",
+      "integrity": "sha512-KXPpOSNX2h0DAG2w7ajpk7TXvWF28ZHs5nJhOJyP0BQHkehgr948RVsToItMme6oi0XJkp19CbuNXkIX8FiBlQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/lodash.uniqby": {
       "version": "4.7.6",
       "resolved": "https://registry.npmjs.org/@types/lodash.uniqby/-/lodash.uniqby-4.7.6.tgz",
@@ -739,6 +760,15 @@
         "@types/lodash": "*"
       }
     },
+    "node_modules/@types/lodash.xor": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.xor/-/lodash.xor-4.5.6.tgz",
+      "integrity": "sha512-rD3zHQuR04SMUWEn6CHLGYNRHEFgakV4K9QhFFP/Ly5xdN2MWsy+gWFA4MxhY+sKKSSKjktjPVyBTo/6rUdTjA==",
+      "dev": true,
+      "dependencies": {
+        "@types/lodash": "*"
+      }
+    },
     "node_modules/@types/mdast": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -5182,6 +5212,12 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "dev": true
     },
+    "node_modules/lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=",
+      "dev": true
+    },
     "node_modules/lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@@ -5194,6 +5230,12 @@
       "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=",
       "dev": true
     },
+    "node_modules/lodash.xor": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.xor/-/lodash.xor-4.5.0.tgz",
+      "integrity": "sha1-TUjtfpgJWwYyWCunFNP/iuj7HbY=",
+      "dev": true
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -9755,6 +9797,12 @@
         "@types/node": "*"
       }
     },
+    "@types/invariant": {
+      "version": "2.2.35",
+      "resolved": "https://registry.npmjs.org/@types/invariant/-/invariant-2.2.35.tgz",
+      "integrity": "sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==",
+      "dev": true
+    },
     "@types/js-yaml": {
       "version": "3.12.1",
       "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-3.12.1.tgz",
@@ -9773,6 +9821,15 @@
       "integrity": "sha512-/BHF5HAx3em7/KkzVKm3LrsD6HZAXuXO1AJZQ3cRRBZj4oHZDviWPYu0aEplAqDFNHZPW6d3G7KN+ONcCCC7pw==",
       "dev": true
     },
+    "@types/lodash.omit": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.omit/-/lodash.omit-4.5.6.tgz",
+      "integrity": "sha512-KXPpOSNX2h0DAG2w7ajpk7TXvWF28ZHs5nJhOJyP0BQHkehgr948RVsToItMme6oi0XJkp19CbuNXkIX8FiBlQ==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/lodash.uniqby": {
       "version": "4.7.6",
       "resolved": "https://registry.npmjs.org/@types/lodash.uniqby/-/lodash.uniqby-4.7.6.tgz",
@@ -9782,6 +9839,15 @@
         "@types/lodash": "*"
       }
     },
+    "@types/lodash.xor": {
+      "version": "4.5.6",
+      "resolved": "https://registry.npmjs.org/@types/lodash.xor/-/lodash.xor-4.5.6.tgz",
+      "integrity": "sha512-rD3zHQuR04SMUWEn6CHLGYNRHEFgakV4K9QhFFP/Ly5xdN2MWsy+gWFA4MxhY+sKKSSKjktjPVyBTo/6rUdTjA==",
+      "dev": true,
+      "requires": {
+        "@types/lodash": "*"
+      }
+    },
     "@types/mdast": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.7.tgz",
@@ -13263,6 +13329,12 @@
       "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==",
       "dev": true
     },
+    "lodash.omit": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.omit/-/lodash.omit-4.5.0.tgz",
+      "integrity": "sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=",
+      "dev": true
+    },
     "lodash.topath": {
       "version": "4.5.2",
       "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
@@ -13275,6 +13347,12 @@
       "integrity": "sha1-2ZwHpmnp5tJOE2Lf4mbGdhavEwI=",
       "dev": true
     },
+    "lodash.xor": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.xor/-/lodash.xor-4.5.0.tgz",
+      "integrity": "sha1-TUjtfpgJWwYyWCunFNP/iuj7HbY=",
+      "dev": true
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
diff --git a/package.json b/package.json
index f247d802..387de0b3 100644
--- a/package.json
+++ b/package.json
@@ -632,7 +632,8 @@
                         "tags",
                         "categories",
                         "draft",
-                        "fields"
+                        "fields",
+                        "data-collection"
                       ],
                       "description": "Define the type of field"
                     },
@@ -698,6 +699,11 @@
                     },
                     "fields": {
                       "$ref": "#contenttypefield"
+                    },
+                    "dataType": {
+                      "type": "string",
+                      "default": "",
+                      "description": "The ID of your data type defined in the `frontMatter.data.types` setting"
                     }
                   },
                   "additionalProperties": false,
@@ -747,6 +753,20 @@
                           "fields"
                         ]
                       }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "data-collection"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "dataType"
+                        ]
+                      }
                     }
                   ]
                 }
@@ -1407,8 +1427,11 @@
     "@sentry/tracing": "^6.13.3",
     "@tailwindcss/forms": "^0.3.3",
     "@types/glob": "7.1.3",
+    "@types/invariant": "^2.2.35",
     "@types/js-yaml": "3.12.1",
+    "@types/lodash.omit": "^4.5.6",
     "@types/lodash.uniqby": "4.7.6",
+    "@types/lodash.xor": "^4.5.6",
     "@types/mocha": "^5.2.6",
     "@types/node": "10.17.48",
     "@types/node-fetch": "^2.5.12",
@@ -1432,8 +1455,11 @@
     "html-loader": "1.3.2",
     "html-webpack-plugin": "4.5.0",
     "image-size": "^1.0.0",
+    "invariant": "^2.2.4",
     "lodash-es": "^4.17.21",
+    "lodash.omit": "^4.5.0",
     "lodash.uniqby": "4.7.0",
+    "lodash.xor": "^4.5.0",
     "mdast-util-from-markdown": "1.0.0",
     "node-json-db": "^1.3.0",
     "npm-run-all": "^4.1.5",
diff --git a/src/components/uniforms-frontmatter/AutoField.tsx b/src/components/uniforms-frontmatter/AutoField.tsx
new file mode 100644
index 00000000..2b5f132c
--- /dev/null
+++ b/src/components/uniforms-frontmatter/AutoField.tsx
@@ -0,0 +1,39 @@
+import * as invariant from 'invariant';
+import { createAutoField } from 'uniforms';
+export { AutoFieldProps } from 'uniforms';
+
+import BoolField from './BoolField';
+import DateField from './DateField';
+import ListField from './ListField';
+import NestField from './NestField';
+import NumField from './NumField';
+import RadioField from './RadioField';
+import SelectField from './SelectField';
+import TextField from './TextField';
+
+const AutoField = createAutoField(props => {
+  if (props.allowedValues) {
+    return props.checkboxes && props.fieldType !== Array
+      ? RadioField
+      : SelectField;
+  }
+
+  switch (props.fieldType) {
+    case Array:
+      return ListField;
+    case Boolean:
+      return BoolField;
+    case Date:
+      return DateField;
+    case Number:
+      return NumField;
+    case Object:
+      return NestField;
+    case String:
+      return TextField;
+  }
+
+  return invariant(false, 'Unsupported field type: %s', props.fieldType);
+});
+
+export default AutoField;
diff --git a/src/components/uniforms-frontmatter/AutoFields.tsx b/src/components/uniforms-frontmatter/AutoFields.tsx
new file mode 100644
index 00000000..3e07ab3a
--- /dev/null
+++ b/src/components/uniforms-frontmatter/AutoFields.tsx
@@ -0,0 +1,29 @@
+import { ComponentType, createElement, Fragment } from 'react';
+import { useForm } from 'uniforms';
+
+import AutoField from './AutoField';
+
+export type AutoFieldsProps = {
+  autoField?: ComponentType<{ name: string }>;
+  element?: ComponentType | string;
+  fields?: string[];
+  omitFields?: string[];
+};
+
+export default function AutoFields({
+  autoField = AutoField,
+  element = Fragment,
+  fields,
+  omitFields = [],
+  ...props
+}: AutoFieldsProps) {
+  const { schema } = useForm();
+
+  return createElement(
+    element,
+    props,
+    (fields ?? schema.getSubfields())
+      .filter(field => !omitFields.includes(field))
+      .map(field => createElement(autoField, { key: field, name: field })),
+  );
+}
diff --git a/src/components/uniforms-frontmatter/AutoForm.tsx b/src/components/uniforms-frontmatter/AutoForm.tsx
new file mode 100644
index 00000000..ea832171
--- /dev/null
+++ b/src/components/uniforms-frontmatter/AutoForm.tsx
@@ -0,0 +1,13 @@
+import { AutoForm } from 'uniforms';
+
+import ValidatedQuickForm from './ValidatedQuickForm';
+
+function Auto(parent: any) {
+  class _ extends AutoForm.Auto(parent) {
+    static Auto = Auto;
+  }
+
+  return _ as unknown as AutoForm;
+}
+
+export default Auto(ValidatedQuickForm);
diff --git a/src/components/uniforms-frontmatter/BaseForm.tsx b/src/components/uniforms-frontmatter/BaseForm.tsx
new file mode 100644
index 00000000..3f83574c
--- /dev/null
+++ b/src/components/uniforms-frontmatter/BaseForm.tsx
@@ -0,0 +1,13 @@
+import { BaseForm } from 'uniforms';
+
+function Unstyled(parent: any) {
+  class _ extends parent {
+    static Unstyled = Unstyled;
+
+    static displayName = `Unstyled${parent.displayName}`;
+  }
+
+  return _ as unknown as typeof BaseForm;
+}
+
+export default Unstyled(BaseForm);
diff --git a/src/components/uniforms-frontmatter/BoolField.css b/src/components/uniforms-frontmatter/BoolField.css
new file mode 100644
index 00000000..9bdadbff
--- /dev/null
+++ b/src/components/uniforms-frontmatter/BoolField.css
@@ -0,0 +1,52 @@
+.field__toggle {
+  position: relative;
+  display: inline-block;
+  width: 50px;
+  height: 24px;
+}
+
+.field__toggle input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.field__toggle__slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--vscode-button-secondaryBackground);
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 34px;
+}
+
+.field__toggle__slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+  border-radius: 50%;
+}
+
+input:checked + .field__toggle__slider {
+  background-color: var(--vscode-button-background);
+}
+
+input:focus + .field__toggle__slider {
+  box-shadow: 0 0 1px var(--vscode-button-background);
+}
+
+input:checked + .field__toggle__slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/BoolField.tsx b/src/components/uniforms-frontmatter/BoolField.tsx
new file mode 100644
index 00000000..85aab276
--- /dev/null
+++ b/src/components/uniforms-frontmatter/BoolField.tsx
@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { Ref } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelStyles } from './component-styles';
+import './BoolField.css';
+
+export type BoolFieldProps = HTMLFieldProps<
+  boolean,
+  HTMLDivElement,
+  { inputRef?: Ref<HTMLInputElement> }
+>;
+
+function Bool({
+  disabled,
+  id,
+  inputRef,
+  label,
+  name,
+  onChange,
+  readOnly,
+  value,
+  ...props
+}: BoolFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+      
+      <label className="field__toggle">
+        <input
+          checked={value || false}
+          disabled={disabled}
+          id={id}
+          name={name}
+          onChange={() => !disabled && !readOnly && onChange(!value)}
+          ref={inputRef}
+          type="checkbox"
+        />
+        <span className="field__toggle__slider"></span>
+      </label>
+    </div>
+  );
+}
+
+export default connectField<BoolFieldProps>(Bool, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/DateField.tsx b/src/components/uniforms-frontmatter/DateField.tsx
new file mode 100644
index 00000000..6b115d79
--- /dev/null
+++ b/src/components/uniforms-frontmatter/DateField.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Ref } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+
+/* istanbul ignore next */
+const DateConstructor = (typeof global === 'object' ? global : window).Date;
+const dateFormat = (value?: Date) => value?.toISOString().slice(0, -8);
+
+export type DateFieldProps = HTMLFieldProps<
+  Date,
+  HTMLDivElement,
+  { inputRef?: Ref<HTMLInputElement>; max?: Date; min?: Date }
+>;
+
+function Date({
+  disabled,
+  id,
+  inputRef,
+  label,
+  max,
+  min,
+  name,
+  onChange,
+  placeholder,
+  readOnly,
+  value,
+  ...props
+}: DateFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label htmlFor={id}>{label}</label>}
+
+      <input
+        disabled={disabled}
+        id={id}
+        max={dateFormat(max)}
+        min={dateFormat(min)}
+        name={name}
+        onChange={event => {
+          const date = new DateConstructor(event.target.valueAsNumber);
+          if (date.getFullYear() < 10000) {
+            onChange(date);
+          } else if (isNaN(event.target.valueAsNumber)) {
+            onChange(undefined);
+          }
+        }}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        ref={inputRef}
+        type="datetime-local"
+        value={dateFormat(value) ?? ''}
+      />
+    </div>
+  );
+}
+
+export default connectField<DateFieldProps>(Date, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/ErrorField.tsx b/src/components/uniforms-frontmatter/ErrorField.tsx
new file mode 100644
index 00000000..eba97bff
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ErrorField.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+import { Override, connectField, filterDOMProps } from 'uniforms';
+
+export type ErrorFieldProps = Override<
+  Omit<HTMLProps<HTMLDivElement>, 'onChange'>,
+  { error?: any; errorMessage?: string }
+>;
+
+function Error({ children, error, errorMessage, ...props }: ErrorFieldProps) {
+  return !error ? null : (
+    <div {...filterDOMProps(props)}>{children || errorMessage}</div>
+  );
+}
+
+export default connectField<ErrorFieldProps>(Error, {
+  initialValue: false,
+  kind: 'leaf',
+});
diff --git a/src/components/uniforms-frontmatter/ErrorsField.css b/src/components/uniforms-frontmatter/ErrorsField.css
new file mode 100644
index 00000000..04a81f16
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ErrorsField.css
@@ -0,0 +1,14 @@
+
+
+.autoform-error {
+  background-color: var(--vscode-inputValidation-errorBackground);
+  border: 1px solid var(--vscode-inputValidation-errorBorder);
+  border-radius: 2px;
+  margin: 20px 0px;
+  padding: 10px;
+  color: var(--vscode-editor-foreground);
+
+  ul {
+    margin-bottom: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ErrorsField.tsx b/src/components/uniforms-frontmatter/ErrorsField.tsx
new file mode 100644
index 00000000..132d94a8
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ErrorsField.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { HTMLProps } from 'react';
+import { filterDOMProps, useForm } from 'uniforms';
+import './ErrorsField.css';
+
+export type ErrorsFieldProps = HTMLProps<HTMLDivElement>;
+
+export default function ErrorsField(props: ErrorsFieldProps) {
+  const { error, schema } = useForm();
+  return !error && !props.children ? null : (
+    <div className='autoform-error'>
+      <div {...filterDOMProps(props)}>
+        {props.children}
+
+        <ul>
+          {schema.getErrorMessages(error).map((message, index) => (
+            <li key={index}>{message}</li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/uniforms-frontmatter/HiddenField.tsx b/src/components/uniforms-frontmatter/HiddenField.tsx
new file mode 100644
index 00000000..d2a6d2fb
--- /dev/null
+++ b/src/components/uniforms-frontmatter/HiddenField.tsx
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { HTMLProps, Ref, useEffect } from 'react';
+import { Override, filterDOMProps, useField } from 'uniforms';
+
+export type HiddenFieldProps = Override<
+  HTMLProps<HTMLInputElement>,
+  {
+    inputRef?: Ref<HTMLInputElement>;
+    name: string;
+    noDOM?: boolean;
+    value?: any;
+  }
+>;
+
+export default function HiddenField({ value, ...rawProps }: HiddenFieldProps) {
+  const props = useField(rawProps.name, rawProps, { initialValue: false })[0];
+
+  useEffect(() => {
+    if (value !== undefined && value !== props.value) {
+      props.onChange(value);
+    }
+  });
+
+  return props.noDOM ? null : (
+    <input
+      disabled={props.disabled}
+      name={props.name}
+      readOnly={props.readOnly}
+      ref={props.inputRef}
+      type="hidden"
+      value={value ?? props.value ?? ''}
+      {...filterDOMProps(props)}
+    />
+  );
+}
diff --git a/src/components/uniforms-frontmatter/ListAddField.css b/src/components/uniforms-frontmatter/ListAddField.css
new file mode 100644
index 00000000..195d3934
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListAddField.css
@@ -0,0 +1,21 @@
+
+
+.autoform__list_add_field {
+  display: flex;
+  padding: 5px;
+  border: 1px dashed var(--vscode-editor-foreground);
+  width: 100%;
+  justify-content: center;
+  margin-top: .5rem;
+
+  &:hover {
+    border-color: var(--vscode-button-background);
+    color: var(--vscode-button-background);
+    cursor: pointer;
+  }
+
+  svg {
+    height: 1rem;
+    width: 1rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ListAddField.tsx b/src/components/uniforms-frontmatter/ListAddField.tsx
new file mode 100644
index 00000000..2c41d9ff
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListAddField.tsx
@@ -0,0 +1,63 @@
+import { PlusIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import {
+  HTMLFieldProps,
+  connectField,
+  filterDOMProps,
+  joinName,
+  useField,
+} from 'uniforms';
+import './ListAddField.css';
+
+export type ListAddFieldProps = HTMLFieldProps<
+  unknown,
+  HTMLSpanElement,
+  { initialCount?: number }
+>;
+
+function ListAdd({
+  disabled,
+  initialCount,
+  name,
+  readOnly,
+  value,
+  ...props
+}: ListAddFieldProps) {
+  const nameParts = joinName(null, name);
+  const parentName = joinName(nameParts.slice(0, -1));
+  const parent = useField<
+    { initialCount?: number; maxCount?: number },
+    unknown[]
+  >(parentName, { initialCount }, { absoluteName: true })[0];
+
+  const limitNotReached =
+    !disabled && !(parent.maxCount! <= parent.value!.length);
+
+  function onAction(event: React.KeyboardEvent | React.MouseEvent) {
+    if (
+      limitNotReached &&
+      !readOnly &&
+      (!('key' in event) || event.key === 'Enter')
+    ) {
+      parent.onChange(parent.value!.concat([Object.assign({}, value)]));
+    }
+  }
+
+  return (
+    <span
+      className='autoform__list_add_field'
+      {...filterDOMProps(props as any)}
+      onClick={onAction}
+      onKeyDown={onAction}
+      role="button"
+      tabIndex={0}
+    >
+      <PlusIcon />
+    </span>
+  );
+}
+
+export default connectField<ListAddFieldProps>(ListAdd, {
+  initialValue: false,
+  kind: 'leaf',
+});
diff --git a/src/components/uniforms-frontmatter/ListDelField.css b/src/components/uniforms-frontmatter/ListDelField.css
new file mode 100644
index 00000000..3bb458a2
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListDelField.css
@@ -0,0 +1,27 @@
+
+
+.autoform__list_del_field {
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  margin-top: .5rem;
+
+  &:hover {
+    border-color: var(--vscode-button-background);
+    color: var(--vscode-button-background);
+    cursor: pointer;
+  }
+
+  .line {
+    height: 1px;
+    background: var(--vscode-editor-foreground);
+    width: 100%;
+    margin-right: .5rem;
+    margin-top: .5rem;
+  }
+
+  svg {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ListDelField.tsx b/src/components/uniforms-frontmatter/ListDelField.tsx
new file mode 100644
index 00000000..ba165527
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListDelField.tsx
@@ -0,0 +1,63 @@
+import { TrashIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import {
+  HTMLFieldProps,
+  connectField,
+  filterDOMProps,
+  joinName,
+  useField,
+} from 'uniforms';
+import './ListDelField.css';
+
+export type ListDelFieldProps = HTMLFieldProps<unknown, HTMLSpanElement>;
+
+function ListDel({ disabled, name, readOnly, ...props }: ListDelFieldProps) {
+  const nameParts = joinName(null, name);
+  const nameIndex = +nameParts[nameParts.length - 1];
+  const parentName = joinName(nameParts.slice(0, -1));
+  const parent = useField<{ minCount?: number }, unknown[]>(
+    parentName,
+    {},
+    { absoluteName: true },
+  )[0];
+
+  const limitNotReached =
+    !disabled && !(parent.minCount! >= parent.value!.length);
+
+  function onAction(
+    event:
+      | React.KeyboardEvent<HTMLSpanElement>
+      | React.MouseEvent<HTMLSpanElement, MouseEvent>,
+  ) {
+    if (
+      limitNotReached &&
+      !readOnly &&
+      (!('key' in event) || event.key === 'Enter')
+    ) {
+      const value = parent.value!.slice();
+      value.splice(nameIndex, 1);
+      parent.onChange(value);
+    }
+  }
+
+  return (
+    <span
+      className='autoform__list_del_field'
+      {...filterDOMProps(props)}
+      onClick={onAction}
+      onKeyDown={onAction}
+      role="button"
+      tabIndex={0}
+    >
+      <div className='line'></div>
+      <TrashIcon />
+    </span>
+
+    
+  );
+}
+
+export default connectField<ListDelFieldProps>(ListDel, {
+  initialValue: false,
+  kind: 'leaf',
+});
diff --git a/src/components/uniforms-frontmatter/ListField.css b/src/components/uniforms-frontmatter/ListField.css
new file mode 100644
index 00000000..2942c151
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListField.css
@@ -0,0 +1,7 @@
+
+
+.autoform__list_field {
+  margin-bottom: 5px;
+  margin-top: 5px;
+  padding: 10px;
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ListField.tsx b/src/components/uniforms-frontmatter/ListField.tsx
new file mode 100644
index 00000000..7323e400
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListField.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelStyles } from './component-styles';
+
+import ListAddField from './ListAddField';
+import ListItemField from './ListItemField';
+
+import './ListField.css';
+
+export type ListFieldProps = HTMLFieldProps<
+  unknown[],
+  HTMLDivElement,
+  { initialCount?: number; itemProps?: object }
+>;
+
+function List({
+  children = <ListItemField name="$" />,
+  initialCount,
+  itemProps,
+  label,
+  value,
+  ...props
+}: ListFieldProps) {
+  return (
+    <div className="autoform__list_field" {...filterDOMProps(props)}>
+      {label && (
+        <div style={LabelStyles}>
+          {label}
+        </div>
+      )}
+
+      {value?.map((item, itemIndex) =>
+        Children.map(children, (child, childIndex) =>
+          isValidElement(child)
+            ? cloneElement(child, {
+                key: `${itemIndex}-${childIndex}`,
+                name: child.props.name?.replace('$', '' + itemIndex),
+                ...itemProps,
+              })
+            : child,
+        ),
+      )}
+
+      <ListAddField initialCount={initialCount} name="$" />
+    </div>
+  );
+}
+
+export default connectField<ListFieldProps>(List);
diff --git a/src/components/uniforms-frontmatter/ListItemField.tsx b/src/components/uniforms-frontmatter/ListItemField.tsx
new file mode 100644
index 00000000..ff2c3502
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListItemField.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import { connectField } from 'uniforms';
+
+import AutoField from './AutoField';
+import ListDelField from './ListDelField';
+
+export type ListItemFieldProps = { children?: ReactNode; value?: unknown };
+
+function ListItem({
+  children = <AutoField label={null} name="" />,
+}: ListItemFieldProps) {
+  return (
+    <div>
+      <ListDelField name="" />
+      {children}
+    </div>
+  );
+}
+
+export default connectField<ListItemFieldProps>(ListItem, {
+  initialValue: false,
+});
diff --git a/src/components/uniforms-frontmatter/LongTextField.tsx b/src/components/uniforms-frontmatter/LongTextField.tsx
new file mode 100644
index 00000000..69ce582e
--- /dev/null
+++ b/src/components/uniforms-frontmatter/LongTextField.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { Ref } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+
+export type LongTextFieldProps = HTMLFieldProps<
+  string,
+  HTMLDivElement,
+  { inputRef?: Ref<HTMLTextAreaElement> }
+>;
+
+function LongText({
+  disabled,
+  id,
+  inputRef,
+  label,
+  name,
+  onChange,
+  placeholder,
+  readOnly,
+  value,
+  ...props
+}: LongTextFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label htmlFor={id}>{label}</label>}
+
+      <textarea
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={event => onChange(event.target.value)}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        ref={inputRef}
+        value={value ?? ''}
+      />
+    </div>
+  );
+}
+
+export default connectField<LongTextFieldProps>(LongText, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/NestField.tsx b/src/components/uniforms-frontmatter/NestField.tsx
new file mode 100644
index 00000000..a548fdc2
--- /dev/null
+++ b/src/components/uniforms-frontmatter/NestField.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+
+import AutoField from './AutoField';
+import { LabelStyles } from './component-styles';
+
+export type NestFieldProps = HTMLFieldProps<
+  object,
+  HTMLDivElement,
+  { itemProps?: object }
+>;
+
+function Nest({
+  children,
+  fields,
+  itemProps,
+  label,
+  ...props
+}: NestFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label style={LabelStyles}>{label}</label>}
+      {children ||
+        fields.map(field => (
+          <AutoField key={field} name={field} {...itemProps} />
+        ))}
+    </div>
+  );
+}
+
+export default connectField<NestFieldProps>(Nest);
diff --git a/src/components/uniforms-frontmatter/NumField.tsx b/src/components/uniforms-frontmatter/NumField.tsx
new file mode 100644
index 00000000..09f2bc0d
--- /dev/null
+++ b/src/components/uniforms-frontmatter/NumField.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Ref } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelStyles } from './component-styles';
+
+export type NumFieldProps = HTMLFieldProps<
+  number,
+  HTMLDivElement,
+  { decimal?: boolean; inputRef?: Ref<HTMLInputElement> }
+>;
+
+function Num({
+  decimal,
+  disabled,
+  id,
+  inputRef,
+  label,
+  max,
+  min,
+  name,
+  onChange,
+  placeholder,
+  readOnly,
+  step,
+  value,
+  ...props
+}: NumFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+
+      <input
+        disabled={disabled}
+        id={id}
+        max={max}
+        min={min}
+        name={name}
+        onChange={event => {
+          const parse = decimal ? parseFloat : parseInt;
+          const value = parse(event.target.value);
+          onChange(isNaN(value) ? undefined : value);
+        }}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        ref={inputRef}
+        step={step || (decimal ? 0.01 : 1)}
+        type="number"
+        value={value ?? ''}
+      />
+    </div>
+  );
+}
+
+export default connectField<NumFieldProps>(Num, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/QuickForm.tsx b/src/components/uniforms-frontmatter/QuickForm.tsx
new file mode 100644
index 00000000..33abbfd3
--- /dev/null
+++ b/src/components/uniforms-frontmatter/QuickForm.tsx
@@ -0,0 +1,28 @@
+import { QuickForm } from 'uniforms';
+
+import AutoField from './AutoField';
+import BaseForm from './BaseForm';
+import ErrorsField from './ErrorsField';
+import SubmitField from './SubmitField';
+
+function Quick(parent: any) {
+  class _ extends QuickForm.Quick(parent) {
+    static Quick = Quick;
+
+    getAutoField() {
+      return AutoField;
+    }
+
+    getErrorsField() {
+      return ErrorsField;
+    }
+
+    getSubmitField() {
+      return SubmitField;
+    }
+  }
+
+  return _ as unknown as QuickForm;
+}
+
+export default Quick(BaseForm);
diff --git a/src/components/uniforms-frontmatter/RadioField.tsx b/src/components/uniforms-frontmatter/RadioField.tsx
new file mode 100644
index 00000000..1a1d1ed2
--- /dev/null
+++ b/src/components/uniforms-frontmatter/RadioField.tsx
@@ -0,0 +1,62 @@
+import omit = require('lodash.omit');
+import * as React from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelStyles } from './component-styles';
+
+const base64: typeof btoa =
+  typeof btoa === 'undefined'
+    ? /* istanbul ignore next */ x => Buffer.from(x).toString('base64')
+    : btoa;
+const escape = (x: string) => base64(encodeURIComponent(x)).replace(/=+$/, '');
+
+export type RadioFieldProps = HTMLFieldProps<
+  string,
+  HTMLDivElement,
+  {
+    allowedValues?: string[];
+    checkboxes?: boolean;
+    transform?: (value: string) => string;
+  }
+>;
+
+function Radio({
+  allowedValues,
+  disabled,
+  id,
+  label,
+  name,
+  onChange,
+  readOnly,
+  transform,
+  value,
+  ...props
+}: RadioFieldProps) {
+  return (
+    <div {...omit(filterDOMProps(props), ['checkboxes'])}>
+      {label && <label style={LabelStyles}>{label}</label>}
+
+      {allowedValues?.map(item => (
+        <div key={item}>
+          <input
+            checked={item === value}
+            disabled={disabled}
+            id={`${id}-${escape(item)}`}
+            name={name}
+            onChange={() => {
+              if (!readOnly) {
+                onChange(item);
+              }
+            }}
+            type="radio"
+          />
+
+          <label htmlFor={`${id}-${escape(item)}`}>
+            {transform ? transform(item) : item}
+          </label>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default connectField<RadioFieldProps>(Radio, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/SelectField.tsx b/src/components/uniforms-frontmatter/SelectField.tsx
new file mode 100644
index 00000000..31addad1
--- /dev/null
+++ b/src/components/uniforms-frontmatter/SelectField.tsx
@@ -0,0 +1,109 @@
+import xor = require('lodash.xor');
+import * as React from 'react';
+import { Ref } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelStyles } from './component-styles';
+
+const base64: typeof btoa =
+  typeof btoa === 'undefined'
+    ? /* istanbul ignore next */ x => Buffer.from(x).toString('base64')
+    : btoa;
+const escape = (x: string) => base64(encodeURIComponent(x)).replace(/=+$/, '');
+
+export type SelectFieldProps = HTMLFieldProps<
+  string | string[],
+  HTMLDivElement,
+  {
+    allowedValues?: string[];
+    checkboxes?: boolean;
+    disableItem?: (value: string) => boolean;
+    inputRef?: Ref<HTMLSelectElement>;
+    transform?: (value: string) => string;
+  }
+>;
+
+function Select({
+  allowedValues,
+  checkboxes,
+  disabled,
+  fieldType,
+  id,
+  inputRef,
+  label,
+  name,
+  onChange,
+  placeholder,
+  readOnly,
+  required,
+  disableItem,
+  transform,
+  value,
+  ...props
+}: SelectFieldProps) {
+  const multiple = fieldType === Array;
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+      
+      {checkboxes ? (
+        allowedValues!.map(item => (
+          <div key={item}>
+            <input
+              checked={
+                fieldType === Array ? value!.includes(item) : value === item
+              }
+              disabled={disableItem?.(item) ?? disabled}
+              id={`${id}-${escape(item)}`}
+              name={name}
+              onChange={() => {
+                if (!readOnly) {
+                  onChange(fieldType === Array ? xor([item], value) : item);
+                }
+              }}
+              type="checkbox"
+            />
+
+            <label htmlFor={`${id}-${escape(item)}`}>
+              {transform ? transform(item) : item}
+            </label>
+          </div>
+        ))
+      ) : (
+        <select
+          disabled={disabled}
+          id={id}
+          multiple={multiple}
+          name={name}
+          onChange={event => {
+            if (!readOnly) {
+              const item = event.target.value;
+              if (multiple) {
+                const clear = event.target.selectedIndex === -1;
+                onChange(clear ? [] : xor([item], value));
+              } else {
+                onChange(item !== '' ? item : undefined);
+              }
+            }
+          }}
+          ref={inputRef}
+          value={value ?? ''}
+          style={{ width: "100%", padding: "0.5rem" }}
+        >
+          {(!!placeholder || !required || value === undefined) && !multiple && (
+            <option value="" disabled={required} hidden={required}>
+              {placeholder || label}
+            </option>
+          )}
+
+          {allowedValues?.map(value => (
+            <option disabled={disableItem?.(value)} key={value} value={value}>
+              {transform ? transform(value) : value}
+            </option>
+          ))}
+        </select>
+      )}
+    </div>
+  );
+}
+
+export default connectField<SelectFieldProps>(Select, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/SubmitField.tsx b/src/components/uniforms-frontmatter/SubmitField.tsx
new file mode 100644
index 00000000..940b1ae4
--- /dev/null
+++ b/src/components/uniforms-frontmatter/SubmitField.tsx
@@ -0,0 +1,29 @@
+import { HTMLProps, Ref } from 'react';
+import * as React from 'react';
+import { Override, filterDOMProps, useForm } from 'uniforms';
+
+export type SubmitFieldProps = Override<
+  HTMLProps<HTMLInputElement>,
+  { inputRef?: Ref<HTMLInputElement>; value?: string }
+>;
+
+export default function SubmitField({
+  disabled,
+  inputRef,
+  readOnly,
+  value,
+  ...props
+}: SubmitFieldProps) {
+  const { error, state } = useForm();
+
+  return (
+    <input
+      disabled={disabled === undefined ? !!(error || state.disabled) : disabled}
+      readOnly={readOnly}
+      ref={inputRef}
+      type="submit"
+      {...(value ? { value } : {})}
+      {...filterDOMProps(props)}
+    />
+  );
+}
diff --git a/src/components/uniforms-frontmatter/TextField.tsx b/src/components/uniforms-frontmatter/TextField.tsx
new file mode 100644
index 00000000..c71f1839
--- /dev/null
+++ b/src/components/uniforms-frontmatter/TextField.tsx
@@ -0,0 +1,48 @@
+import { Ref } from 'react';
+import * as React from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelStyles } from './component-styles';
+
+export type TextFieldProps = HTMLFieldProps<
+  string,
+  HTMLDivElement,
+  { inputRef?: Ref<HTMLInputElement> }
+>;
+
+function Text({
+  autoComplete,
+  disabled,
+  id,
+  inputRef,
+  label,
+  name,
+  onChange,
+  placeholder,
+  readOnly,
+  type,
+  value,
+  ...props
+}: TextFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+
+      <input
+        autoComplete={autoComplete}
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={event => onChange(event.target.value)}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        ref={inputRef}
+        type={type}
+        value={value ?? ''}
+      />
+    </div>
+  );
+}
+
+Text.defaultProps = { type: 'text' };
+
+export default connectField<TextFieldProps>(Text, { kind: 'leaf' });
diff --git a/src/components/uniforms-frontmatter/ValidatedForm.tsx b/src/components/uniforms-frontmatter/ValidatedForm.tsx
new file mode 100644
index 00000000..e843022a
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ValidatedForm.tsx
@@ -0,0 +1,13 @@
+import { ValidatedForm } from 'uniforms';
+
+import BaseForm from './BaseForm';
+
+function Validated(parent: any) {
+  class _ extends ValidatedForm.Validated(parent) {
+    static Validated = Validated;
+  }
+
+  return _ as unknown as ValidatedForm;
+}
+
+export default Validated(BaseForm);
diff --git a/src/components/uniforms-frontmatter/ValidatedQuickForm.tsx b/src/components/uniforms-frontmatter/ValidatedQuickForm.tsx
new file mode 100644
index 00000000..554624af
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ValidatedQuickForm.tsx
@@ -0,0 +1,5 @@
+import BaseForm from './BaseForm';
+import QuickForm from './QuickForm';
+import ValidatedForm from './ValidatedForm';
+
+export default ValidatedForm.Validated(QuickForm.Quick(BaseForm));
diff --git a/src/components/uniforms-frontmatter/component-styles.ts b/src/components/uniforms-frontmatter/component-styles.ts
new file mode 100644
index 00000000..192f38fe
--- /dev/null
+++ b/src/components/uniforms-frontmatter/component-styles.ts
@@ -0,0 +1,8 @@
+
+
+export const LabelStyles: React.CSSProperties = { 
+  display: "block", 
+  marginBottom: ".5rem", 
+  marginTop: ".5rem", 
+  lineHeight: "16px", 
+  fontWeight: "bold" };
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/index.ts b/src/components/uniforms-frontmatter/index.ts
new file mode 100644
index 00000000..942c9729
--- /dev/null
+++ b/src/components/uniforms-frontmatter/index.ts
@@ -0,0 +1,23 @@
+export { default as AutoField, AutoFieldProps } from './AutoField';
+export { default as AutoFields, AutoFieldsProps } from './AutoFields';
+export { default as AutoForm } from './AutoForm';
+export { default as BaseForm } from './BaseForm';
+export { default as BoolField, BoolFieldProps } from './BoolField';
+export { default as DateField, DateFieldProps } from './DateField';
+export { default as ErrorField, ErrorFieldProps } from './ErrorField';
+export { default as ErrorsField, ErrorsFieldProps } from './ErrorsField';
+export { default as HiddenField, HiddenFieldProps } from './HiddenField';
+export { default as ListAddField, ListAddFieldProps } from './ListAddField';
+export { default as ListDelField, ListDelFieldProps } from './ListDelField';
+export { default as ListField, ListFieldProps } from './ListField';
+export { default as ListItemField, ListItemFieldProps } from './ListItemField';
+export { default as LongTextField, LongTextFieldProps } from './LongTextField';
+export { default as NestField, NestFieldProps } from './NestField';
+export { default as NumField, NumFieldProps } from './NumField';
+export { default as QuickForm } from './QuickForm';
+export { default as RadioField, RadioFieldProps } from './RadioField';
+export { default as SelectField, SelectFieldProps } from './SelectField';
+export { default as SubmitField, SubmitFieldProps } from './SubmitField';
+export { default as TextField, TextFieldProps } from './TextField';
+export { default as ValidatedForm } from './ValidatedForm';
+export { default as ValidatedQuickForm } from './ValidatedQuickForm';
diff --git a/src/dashboardWebView/components/DataView/DataForm.tsx b/src/dashboardWebView/components/DataView/DataForm.tsx
index f5e74956..c441d50a 100644
--- a/src/dashboardWebView/components/DataView/DataForm.tsx
+++ b/src/dashboardWebView/components/DataView/DataForm.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import Ajv from 'ajv';
 import { useEffect, useState } from 'react';
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
-import { AutoFields, AutoForm, ErrorsField } from 'uniforms-antd';
+import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
+// import { AutoFields, AutoForm, ErrorsField } from 'uniforms-antd';
 import { ErrorBoundary } from '@sentry/react';
 import { DataFormControls } from './DataFormControls';
 
@@ -52,7 +53,7 @@ export const DataForm: React.FunctionComponent<IDataFormProps> = ({ schema, mode
           schema={bridge} 
           model={model || {}}
           onSubmit={onSubmit}
-          ref={form => form?.reset()}>
+          ref={(form: any) => form?.reset()}>
           <div className={`fields`}>
             <AutoFields />
           </div>
diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts
index 1e8f3650..1384bc99 100644
--- a/src/explorerView/ExplorerView.ts
+++ b/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, SETTING_TAXONOMY_CUSTOM, CONTEXT, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, TelemetryEvent } 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, CONTEXT, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, TelemetryEvent, SETTINGS_DATA_TYPES } 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, ThemeIcon } from "vscode";
@@ -24,6 +24,7 @@ import { ImageHelper } from '../helpers/ImageHelper';
 import { CustomScript } from '../helpers/CustomScript';
 import { Link, Parent } from 'mdast-util-from-markdown/lib';
 import { Telemetry } from '../helpers/Telemetry';
+import { DataType } from '../models/DataType';
 
 const FILE_LIMIT = 10;
 
@@ -440,7 +441,8 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
         framework: Settings.get<string>(SETTINGS_FRAMEWORK_ID),
         commands: {
           start: Settings.get<string>(SETTINGS_FRAMEWORK_START)
-        }
+        },
+        dataTypes: Settings.get<DataType[]>(SETTINGS_DATA_TYPES),
       } as PanelSettings
     });
   }
@@ -787,7 +789,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     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://${localServerUrl} http://0.0.0.0:${localPort}`}`,
+      `script-src 'unsafe-eval' ${isProd ? `'nonce-${nonce}'` : `http://${localServerUrl} http://0.0.0.0:${localPort}`}`,
       `style-src ${webView.cspSource} 'self' 'unsafe-inline'`,
       `font-src ${webView.cspSource}`,
       `connect-src https://o1022172.ingest.sentry.io ${isProd ? `` : `ws://${localServerUrl} ws://0.0.0.0:${localPort} http://${localServerUrl} http://0.0.0.0:${localPort}`}`
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index e64c2a9f..e30c8235 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -2,6 +2,7 @@ import { FileStat } from "vscode";
 import { DraftField } from ".";
 import { Choice } from "./Choice";
 import { DashboardData } from "./DashboardData";
+import { DataType } from "./DataType";
 
 export interface PanelSettings {
   seo: SEO;
@@ -23,6 +24,7 @@ export interface PanelSettings {
   isBacker: boolean | undefined;
   framework: string | undefined;
   commands: FrameworkCommands;
+  dataTypes: DataType[] | undefined;
 }
 
 export interface FrameworkCommands {
@@ -38,10 +40,12 @@ export interface ContentType {
   pageBundle?: boolean;
 }
 
+export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "data-collection";
+
 export interface Field {
   title?: string;
   name: string;
-  type: "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields";
+  type: FieldType;
   choices?: string[] | Choice[];
   single?: boolean;
   multiple?: boolean;
@@ -50,6 +54,7 @@ export interface Field {
   taxonomyId?: string;
   default?: string;
   fields?: Field[];
+  dataType?: string;
 }
 
 export interface DateInfo {
diff --git a/src/panelWebView/components/DataCollection/DataCollectionControls.tsx b/src/panelWebView/components/DataCollection/DataCollectionControls.tsx
new file mode 100644
index 00000000..dc1a165d
--- /dev/null
+++ b/src/panelWebView/components/DataCollection/DataCollectionControls.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useForm } from 'uniforms';
+import { SubmitField } from 'uniforms-unstyled';
+
+export interface IDataCollectionControlsProps {
+  model: any | null;
+  onClear: () => void;
+}
+
+export const DataCollectionControls: React.FunctionComponent<IDataCollectionControlsProps> = ({ model, onClear }: React.PropsWithChildren<IDataCollectionControlsProps>) => {
+  const { formRef } = useForm();
+  
+  return (
+    <div className='data_controls__buttons'>
+      <SubmitField value={model ? `Update` : `Add`} />
+      
+      <button className='ml-4' onClick={() => {
+        if (onClear) {
+          onClear();
+        }
+        formRef.reset();
+      }}>Cancel</button>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataCollection/DataCollectionField.tsx b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
new file mode 100644
index 00000000..14db5d2b
--- /dev/null
+++ b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
@@ -0,0 +1,131 @@
+import Ajv from 'ajv';
+import * as React from 'react';
+import { useEffect, useState, useMemo, useCallback } from 'react';
+import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
+import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
+import { Field, PanelSettings } from '../../../models';
+import { DataCollectionControls } from './DataCollectionControls';
+import { PencilIcon, TrashIcon } from '@heroicons/react/outline';
+
+export interface IDataCollectionFieldProps {
+  settings: PanelSettings;
+  field: Field;
+  value: any;
+  onSubmit: (data: any) => void;
+}
+
+export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldProps> = ({ settings, field, value, onSubmit }: React.PropsWithChildren<IDataCollectionFieldProps>) => {
+  const [ schema, setSchema ] = useState<JSONSchemaBridge | null>(null);
+  const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
+  const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
+
+  const ajv = new Ajv({ allErrors: true, useDefaults: true });
+
+  const jsonValidator = (schema: object) => {
+    const validator = ajv.compile(schema);
+
+    return (crntModel: object) => {
+      validator(crntModel);
+      return validator.errors?.length ? { details: validator.errors } : null;
+    };
+  };
+
+  useEffect(() => {
+    if (schema) {
+      const schemaValidator = jsonValidator(schema);
+      const bridge = new JSONSchemaBridge(schema, schemaValidator);
+      setBridge(bridge);
+    }
+  }, [schema]);
+
+  useEffect(() => {
+    if (field?.dataType && settings.dataTypes) {
+      const crntSchema = settings.dataTypes.find(dataType => dataType.id === field.dataType);
+      if (crntSchema?.schema) {
+        setSchema(crntSchema.schema);
+      }
+    }
+  }, [settings?.dataTypes, field?.dataType]);
+
+  const model = useMemo(() => (value && selectedIndex !== null && selectedIndex !== undefined) ? value[selectedIndex] : null, [value, selectedIndex]);
+
+  const onUpdate = useCallback((data: any) => {
+    const dataClone: any[] = Object.assign([], value);
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      dataClone[selectedIndex] = data;
+    } else {
+      dataClone.push(data);
+    }
+    onSubmit(dataClone);
+  }, [value, selectedIndex, onSubmit]);
+
+  const deleteItem = useCallback((index: number) => {
+    const dataClone: any[] = Object.assign([], value);
+
+    if (!value) {
+      return;
+    }
+
+    dataClone.splice(index, 1);
+    onSubmit(dataClone);
+  }, [value, selectedIndex, onSubmit]);
+
+  if (!bridge) {
+    return null;
+  }
+  
+  return (
+    <div className='data_collection__field'>
+
+      <div className='autoform'>
+        <AutoForm 
+          schema={bridge} 
+          model={model || {}}
+          onSubmit={onUpdate}
+          ref={form => form?.reset()}>
+          {
+            (model && selectedIndex !== null) && (
+              <h3>Editing: Record {selectedIndex + 1}</h3>
+            )
+          }
+
+          <div className={`fields`}>
+            <AutoFields />
+          </div>
+          
+          <div className={`errors`}>
+            <ErrorsField />
+          </div>
+
+          <DataCollectionControls model={model} onClear={() => setSelectedIndex(null)} />
+        </AutoForm>
+      </div>
+
+      {
+        value && (
+          <div className='data_collection__list'>
+            <label>Data</label>
+            <ul>
+            {
+              value.map((v: any, i: number) => (
+                <li key={i}>
+                  <span>Record {i+1}</span>
+
+                  <button className='data_collection__list__button data_collection__list__button_edit' onClick={() => setSelectedIndex(i)}>
+                    <PencilIcon className='data_collection__list__button_icon' />
+                    <span className='sr-only'>Edit</span>
+                  </button>
+                  <button className='data_collection__list__button data_collection__list__button_delete' onClick={() => deleteItem(i)}>
+                    <TrashIcon className='data_collection__list__button_icon' />
+                    <span className='sr-only'>Delete</span>
+                  </button>
+                </li>
+              ))
+            }
+            </ul>
+          </div>
+        )
+      }
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index a6994840..dfdad1ab 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -20,6 +20,7 @@ import { DateHelper } from '../../helpers/DateHelper';
 import FieldBoundary from './ErrorBoundary/FieldBoundary';
 import { DraftField } from './Fields/DraftField';
 import { VsLabel } from './VscodeComponents';
+import { DataCollectionField } from './DataCollection/DataCollectionField';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -234,7 +235,28 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
         }
 
         return null;
+      } else if (field.type === 'data-collection') {
+        const collectionData = parent[field.name];
+
+        return (
+          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+            <div className={`metadata_field__box`}>
+              <VsLabel>
+                <div className={`metadata_field__label metadata_field__label_parent`}>
+                  <span style={{ lineHeight: "16px"}}>{field.title || field.name}</span>
+                </div>
+              </VsLabel>
+
+              <DataCollectionField
+                settings={settings}
+                field={field}
+                value={collectionData}
+                onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
+            </div>
+          </FieldBoundary>
+        );
       } else {
+        console.warn(`Unknown field type: ${field.type}`);
         return null;
       }
     });
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index 360f5120..bd076bcc 100644
--- a/src/panelWebView/index.tsx
+++ b/src/panelWebView/index.tsx
@@ -4,6 +4,7 @@ import { ViewPanel } from "./ViewPanel";
 import * as Sentry from "@sentry/react";
 import { Integrations } from "@sentry/tracing";
 import { SENTRY_LINK } from "../constants";
+import './styles.css';
 
 // require('@vscode/codicons/dist/codicon.css');
 import '@bendera/vscode-webview-elements/dist/vscode-table.js';
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
new file mode 100644
index 00000000..b083a701
--- /dev/null
+++ b/src/panelWebView/styles.css
@@ -0,0 +1,94 @@
+
+.data_collection__field {
+
+  .autoform {
+    background-color: transparent;
+    border: 2px dashed var(--vscode-button-background);
+    padding: 1.5rem;
+    filter: brightness(85%);
+  }
+
+  .fields > div {
+    margin-bottom: .5rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.data_controls__buttons {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin-top:1rem;
+
+  button, input {
+    display: inline;
+    width: auto;
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  input {
+    background: var(--vscode-button-background);
+    color: var(--vscode-button-foreground);
+    margin-right: 1rem;
+    cursor: pointer;
+
+    &:hover {
+      background: var(--vscode-button-hoverBackground);
+    }
+  }
+
+  button {
+    background: var(--vscode-button-secondaryBackground);
+    color: var(--vscode-button-secondaryForeground);
+
+    &:hover {
+      background: var(--vscode-button-secondaryHoverBackground);
+    }
+  }
+}
+
+.data_collection__list {
+  margin-top: 1rem;
+
+  label {
+    display: block;
+    margin-bottom: .5rem;
+    font-weight: bold;
+  }
+
+  li {
+    margin-bottom: .5rem;
+
+    span {
+      margin-right: .5rem;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.data_collection__list__button {
+  width: auto;
+  background: none;
+  color: var(--vscode-editor-foreground);
+
+  &:hover {
+    color: var(--vscode-button-secondaryForeground);
+    background: var(--vscode-button-secondaryHoverBackground);
+  }
+}
+
+.data_collection__list__button_icon {
+  height: 1rem;
+  width: 1rem;
+}
+
+.sr-only {
+  display: none;
+}
\ No newline at end of file
diff --git a/webpack/panel.config.js b/webpack/panel.config.js
index ae552b0e..10a63193 100644
--- a/webpack/panel.config.js
+++ b/webpack/panel.config.js
@@ -31,7 +31,7 @@ const config = [{
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader']
+        use: ['style-loader', 'css-loader', 'postcss-loader']
       },
       {
         test: /\.m?js/,

From 754570a9ecdb03cbb7a214ce27f02cc52b75a672 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 10 Feb 2022 22:04:47 +0100
Subject: [PATCH 11/62] #176 - Optimize styling of fields

---
 assets/media/styles.css                       |  8 ++--
 .../uniforms-frontmatter/BoolField.css        |  6 +--
 .../uniforms-frontmatter/ErrorsField.css      | 10 +++--
 .../uniforms-frontmatter/ListAddField.css     |  6 +--
 .../uniforms-frontmatter/ListField.css        |  5 ++-
 src/dashboardWebView/styles.css               | 40 +++++++++++++------
 .../DataCollection/DataCollectionField.tsx    | 10 ++++-
 src/panelWebView/components/Metadata.tsx      | 19 +++------
 src/panelWebView/styles.css                   |  7 +++-
 9 files changed, 68 insertions(+), 43 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index 518f898a..ab1c2d2e 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -448,17 +448,17 @@ input:checked + .field__toggle__slider:before {
 
 .vscode-dark .metadata_field__box {
   background: rgba(255, 255, 255, 0.1);
-  border: 2px dashed rgba(255, 255, 255, 0.2);
+  border: 1px dashed rgba(255, 255, 255, 0.2);
 }
 
 .vscode-light .metadata_field__box {
   background: rgba(0, 0, 0, 0.1);
-  border: 2px dashed rgba(0, 0, 0, 0.2);
+  border: 1px dashed rgba(0, 0, 0, 0.2);
 }
 
 .metadata_field__box {
   background: rgba(255, 255, 255, 0.1);
-  border: 2px dashed rgba(255, 255, 255, 0.2);
+  border: 1px dashed rgba(255, 255, 255, 0.2);
   margin-bottom: .5rem;
   padding: .5rem 1rem;
 }
@@ -634,7 +634,7 @@ input:checked + .field__toggle__slider:before {
 
 .metadata_field__preview_image__button {
   background-color: transparent;
-  border: 2px dashed var(--vscode-button-background);
+  border: 1px dashed var(--vscode-button-background);
   padding: 1.5rem;
   filter: brightness(85%);
 }
diff --git a/src/components/uniforms-frontmatter/BoolField.css b/src/components/uniforms-frontmatter/BoolField.css
index 9bdadbff..4776bf1e 100644
--- a/src/components/uniforms-frontmatter/BoolField.css
+++ b/src/components/uniforms-frontmatter/BoolField.css
@@ -18,7 +18,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--vscode-button-secondaryBackground);
+  background-color: var(--frontmatter-toggle-secondaryBackground, var(--vscode-button-secondaryBackground));
   -webkit-transition: .4s;
   transition: .4s;
   border-radius: 34px;
@@ -38,11 +38,11 @@
 }
 
 input:checked + .field__toggle__slider {
-  background-color: var(--vscode-button-background);
+  background-color: var(--frontmatter-toggle-background, var(--vscode-button-background));
 }
 
 input:focus + .field__toggle__slider {
-  box-shadow: 0 0 1px var(--vscode-button-background);
+  box-shadow: 0 0 1px var(--frontmatter-toggle-background, var(--vscode-button-background));
 }
 
 input:checked + .field__toggle__slider:before {
diff --git a/src/components/uniforms-frontmatter/ErrorsField.css b/src/components/uniforms-frontmatter/ErrorsField.css
index 04a81f16..972b4119 100644
--- a/src/components/uniforms-frontmatter/ErrorsField.css
+++ b/src/components/uniforms-frontmatter/ErrorsField.css
@@ -1,14 +1,18 @@
 
 
 .autoform-error {
-  background-color: var(--vscode-inputValidation-errorBackground);
-  border: 1px solid var(--vscode-inputValidation-errorBorder);
+  background-color: var(--frontmatter-error-background, var(--vscode-inputValidation-errorBackground));
+  border: 1px solid var(--frontmatter-error-border, var(--vscode-inputValidation-errorBorder));
   border-radius: 2px;
   margin: 20px 0px;
   padding: 10px;
-  color: var(--vscode-editor-foreground);
+  color: var(--frontmatter-error-foreground, var(--vscode-editor-foreground));
 
   ul {
     margin-bottom: 0;
   }
+
+  li {
+    text-transform: capitalize;
+  }
 }
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ListAddField.css b/src/components/uniforms-frontmatter/ListAddField.css
index 195d3934..fd10c316 100644
--- a/src/components/uniforms-frontmatter/ListAddField.css
+++ b/src/components/uniforms-frontmatter/ListAddField.css
@@ -3,14 +3,14 @@
 .autoform__list_add_field {
   display: flex;
   padding: 5px;
-  border: 1px dashed var(--vscode-editor-foreground);
+  border: 1px dashed var(--frontmatter-field-border, var(--vscode-editor-foreground));
   width: 100%;
   justify-content: center;
   margin-top: .5rem;
 
   &:hover {
-    border-color: var(--vscode-button-background);
-    color: var(--vscode-button-background);
+    border-color: var(--frontmatter-field-borderActive, var(--vscode-button-background));
+    color: var(--frontmatter-field-borderActive, var(--vscode-button-background));
     cursor: pointer;
   }
 
diff --git a/src/components/uniforms-frontmatter/ListField.css b/src/components/uniforms-frontmatter/ListField.css
index 2942c151..e362bbb8 100644
--- a/src/components/uniforms-frontmatter/ListField.css
+++ b/src/components/uniforms-frontmatter/ListField.css
@@ -1,7 +1,8 @@
 
 
 .autoform__list_field {
-  margin-bottom: 5px;
-  margin-top: 5px;
+  margin-bottom: 1rem;
+  margin-top: 1rem;
   padding: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
 }
\ No newline at end of file
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index e0f051aa..6d90b32b 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -2,6 +2,32 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+:root {
+  /* Bool field */
+  --frontmatter-toggle-background: #fafafa;
+  --frontmatter-toggle-secondaryBackground: #f5f5f5;
+
+  /* Errors field */
+  --frontmatter-error-background: rgba(255, 85, 0, 0.2);
+  --frontmatter-error-border: #f50;
+  --frontmatter-error-foreground: #0e131f;
+  
+  .vscode-dark {
+    --frontmatter-error-foreground: #fff;
+  }
+
+  /* List add field */
+  --frontmatter-field-border: #222733;
+  --frontmatter-field-borderActive: #15c2cb;
+
+  .vscode-dark {
+    --frontmatter-field-border: rgba(255, 255, 255, 0.5);
+    --frontmatter-field-borderActive: #009aa3;
+  }
+
+  /* List delete field */
+}
+
 
 .loader {
   border-top-color: #15c2cb;
@@ -80,15 +106,11 @@
 
     .errors {
       > div {
-        @apply border border-red-400 !important;
+        @apply border;
       }
       
       ul {
-        @apply list-disc pl-6 pr-4 py-4 bg-opacity-50 text-vulcan-500;
-      }
-
-      li {
-        @apply capitalize text-gray-900;
+        @apply list-disc pl-6 pr-4 py-4 bg-opacity-50;
       }
     }
 
@@ -276,12 +298,6 @@
     input[type="submit"] {
       @apply text-vulcan-500
     }
-
-    .errors {
-      li {
-        @apply text-white;
-      }
-    }
   }
 
   .ant-list.ant-list-bordered {
diff --git a/src/panelWebView/components/DataCollection/DataCollectionField.tsx b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
index 14db5d2b..c6f9cafa 100644
--- a/src/panelWebView/components/DataCollection/DataCollectionField.tsx
+++ b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
@@ -6,15 +6,17 @@ import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { Field, PanelSettings } from '../../../models';
 import { DataCollectionControls } from './DataCollectionControls';
 import { PencilIcon, TrashIcon } from '@heroicons/react/outline';
+import { VsLabel } from '../VscodeComponents';
 
 export interface IDataCollectionFieldProps {
+  label: string;
   settings: PanelSettings;
   field: Field;
   value: any;
   onSubmit: (data: any) => void;
 }
 
-export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldProps> = ({ settings, field, value, onSubmit }: React.PropsWithChildren<IDataCollectionFieldProps>) => {
+export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IDataCollectionFieldProps>) => {
   const [ schema, setSchema ] = useState<JSONSchemaBridge | null>(null);
   const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
@@ -77,6 +79,12 @@ export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldPr
   return (
     <div className='data_collection__field'>
 
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+
       <div className='autoform'>
         <AutoForm 
           schema={bridge} 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index dfdad1ab..38efbe1c 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -240,19 +240,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <div className={`metadata_field__box`}>
-              <VsLabel>
-                <div className={`metadata_field__label metadata_field__label_parent`}>
-                  <span style={{ lineHeight: "16px"}}>{field.title || field.name}</span>
-                </div>
-              </VsLabel>
-
-              <DataCollectionField
-                settings={settings}
-                field={field}
-                value={collectionData}
-                onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
-            </div>
+            <DataCollectionField
+              label={field.title || field.name}
+              settings={settings}
+              field={field}
+              value={collectionData}
+              onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else {
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index b083a701..b4fd8631 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -1,10 +1,13 @@
 
 .data_collection__field {
+  border: 1px dashed rgba(255, 255, 255, 0.2);
+  padding: .5rem 1rem;
+  margin-bottom: .5rem;
 
   .autoform {
     background-color: transparent;
-    border: 2px dashed var(--vscode-button-background);
-    padding: 1.5rem;
+    border: 1px dashed var(--vscode-button-background);
+    padding: 1rem;
     filter: brightness(85%);
   }
 

From 849af69ce23de7d3884ad30114f4ef8dd841abf3 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 11 Feb 2022 11:24:27 +0100
Subject: [PATCH 12/62] #176 - updated styles for the autoform fields

---
 .../uniforms-frontmatter/BoolField.tsx        |  4 +-
 .../uniforms-frontmatter/LabelField.css       | 14 +++++
 .../uniforms-frontmatter/LabelField.tsx       | 20 +++++++
 .../uniforms-frontmatter/ListDelField.css     |  2 +-
 .../uniforms-frontmatter/ListField.css        |  2 +-
 .../uniforms-frontmatter/ListField.tsx        |  8 +--
 .../uniforms-frontmatter/NestField.tsx        |  5 +-
 .../uniforms-frontmatter/NumField.tsx         |  4 +-
 .../uniforms-frontmatter/RadioField.tsx       |  4 +-
 .../uniforms-frontmatter/SelectField.css      |  5 ++
 .../uniforms-frontmatter/SelectField.tsx      |  7 ++-
 .../uniforms-frontmatter/TextField.tsx        |  7 ++-
 .../uniforms-frontmatter/component-styles.ts  |  8 ---
 src/dashboardWebView/styles.css               | 14 ++++-
 .../DataCollection/DataCollectionField.tsx    | 38 ++++---------
 .../DataCollection/DataCollectionRecord.tsx   | 27 +++++++++
 .../DataCollection/DataCollectionRecords.tsx  | 47 ++++++++++++++++
 src/panelWebView/styles.css                   | 55 +++++++++++++++++--
 18 files changed, 207 insertions(+), 64 deletions(-)
 create mode 100644 src/components/uniforms-frontmatter/LabelField.css
 create mode 100644 src/components/uniforms-frontmatter/LabelField.tsx
 create mode 100644 src/components/uniforms-frontmatter/SelectField.css
 delete mode 100644 src/components/uniforms-frontmatter/component-styles.ts
 create mode 100644 src/panelWebView/components/DataCollection/DataCollectionRecord.tsx
 create mode 100644 src/panelWebView/components/DataCollection/DataCollectionRecords.tsx

diff --git a/src/components/uniforms-frontmatter/BoolField.tsx b/src/components/uniforms-frontmatter/BoolField.tsx
index 85aab276..d328d10d 100644
--- a/src/components/uniforms-frontmatter/BoolField.tsx
+++ b/src/components/uniforms-frontmatter/BoolField.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Ref } from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { LabelStyles } from './component-styles';
 import './BoolField.css';
+import { LabelField } from './LabelField';
 
 export type BoolFieldProps = HTMLFieldProps<
   boolean,
@@ -23,7 +23,7 @@ function Bool({
 }: BoolFieldProps) {
   return (
     <div {...filterDOMProps(props)}>
-      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+      <LabelField label={label} id={id} required={props.required} />
       
       <label className="field__toggle">
         <input
diff --git a/src/components/uniforms-frontmatter/LabelField.css b/src/components/uniforms-frontmatter/LabelField.css
new file mode 100644
index 00000000..fe105d8c
--- /dev/null
+++ b/src/components/uniforms-frontmatter/LabelField.css
@@ -0,0 +1,14 @@
+
+
+.autoform__label {
+  display: block;
+  margin-bottom: 0.5rem;
+  margin-top: 0.5rem;
+  line-height: 16px;
+  font-weight: bold;
+
+  .autoform__label__required {
+    color: var(--vscode-inputValidation-errorBorder);
+    margin-left: 0.25rem;
+  }
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/LabelField.tsx b/src/components/uniforms-frontmatter/LabelField.tsx
new file mode 100644
index 00000000..d0dcf105
--- /dev/null
+++ b/src/components/uniforms-frontmatter/LabelField.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import './LabelField.css';
+
+export interface ILabelFieldProps {
+  id: string;
+  label: string | ReactNode;
+  required?: boolean;
+}
+
+export const LabelField: React.FunctionComponent<ILabelFieldProps> = ({ label, id, required }: React.PropsWithChildren<ILabelFieldProps>) => {
+  return (
+    label ? (
+      <label className="autoform__label" htmlFor={id}>
+        {label}
+        {required && <span title='Required field' className='autoform__label__required'>*</span>}
+      </label>
+    ) : null
+  );
+};
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ListDelField.css b/src/components/uniforms-frontmatter/ListDelField.css
index 3bb458a2..8886debc 100644
--- a/src/components/uniforms-frontmatter/ListDelField.css
+++ b/src/components/uniforms-frontmatter/ListDelField.css
@@ -14,7 +14,7 @@
 
   .line {
     height: 1px;
-    background: var(--vscode-editor-foreground);
+    background: var(--frontmatter-list-border, var(--vscode-editor-foreground));
     width: 100%;
     margin-right: .5rem;
     margin-top: .5rem;
diff --git a/src/components/uniforms-frontmatter/ListField.css b/src/components/uniforms-frontmatter/ListField.css
index e362bbb8..f9dce271 100644
--- a/src/components/uniforms-frontmatter/ListField.css
+++ b/src/components/uniforms-frontmatter/ListField.css
@@ -4,5 +4,5 @@
   margin-bottom: 1rem;
   margin-top: 1rem;
   padding: 10px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border: 1px solid var(--frontmatter-list-border, rgba(255, 255, 255, 0.2));
 }
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/ListField.tsx b/src/components/uniforms-frontmatter/ListField.tsx
index 7323e400..3e9e23a5 100644
--- a/src/components/uniforms-frontmatter/ListField.tsx
+++ b/src/components/uniforms-frontmatter/ListField.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { Children, cloneElement, isValidElement } from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { LabelStyles } from './component-styles';
 
 import ListAddField from './ListAddField';
 import ListItemField from './ListItemField';
 
 import './ListField.css';
+import { LabelField } from './LabelField';
 
 export type ListFieldProps = HTMLFieldProps<
   unknown[],
@@ -24,11 +24,7 @@ function List({
 }: ListFieldProps) {
   return (
     <div className="autoform__list_field" {...filterDOMProps(props)}>
-      {label && (
-        <div style={LabelStyles}>
-          {label}
-        </div>
-      )}
+      <LabelField label={label} id={props.id} required={props.required} />
 
       {value?.map((item, itemIndex) =>
         Children.map(children, (child, childIndex) =>
diff --git a/src/components/uniforms-frontmatter/NestField.tsx b/src/components/uniforms-frontmatter/NestField.tsx
index a548fdc2..26a786f3 100644
--- a/src/components/uniforms-frontmatter/NestField.tsx
+++ b/src/components/uniforms-frontmatter/NestField.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
 
 import AutoField from './AutoField';
-import { LabelStyles } from './component-styles';
+import { LabelField } from './LabelField';
 
 export type NestFieldProps = HTMLFieldProps<
   object,
@@ -19,7 +19,8 @@ function Nest({
 }: NestFieldProps) {
   return (
     <div {...filterDOMProps(props)}>
-      {label && <label style={LabelStyles}>{label}</label>}
+      <LabelField label={label} id={props.id} required={props.required} />
+
       {children ||
         fields.map(field => (
           <AutoField key={field} name={field} {...itemProps} />
diff --git a/src/components/uniforms-frontmatter/NumField.tsx b/src/components/uniforms-frontmatter/NumField.tsx
index 09f2bc0d..4af552a5 100644
--- a/src/components/uniforms-frontmatter/NumField.tsx
+++ b/src/components/uniforms-frontmatter/NumField.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Ref } from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { LabelStyles } from './component-styles';
+import { LabelField } from './LabelField';
 
 export type NumFieldProps = HTMLFieldProps<
   number,
@@ -27,7 +27,7 @@ function Num({
 }: NumFieldProps) {
   return (
     <div {...filterDOMProps(props)}>
-      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+      <LabelField label={label} id={id} required={props.required} />
 
       <input
         disabled={disabled}
diff --git a/src/components/uniforms-frontmatter/RadioField.tsx b/src/components/uniforms-frontmatter/RadioField.tsx
index 1a1d1ed2..608bacd7 100644
--- a/src/components/uniforms-frontmatter/RadioField.tsx
+++ b/src/components/uniforms-frontmatter/RadioField.tsx
@@ -1,7 +1,7 @@
 import omit = require('lodash.omit');
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { LabelStyles } from './component-styles';
+import { LabelField } from './LabelField';
 
 const base64: typeof btoa =
   typeof btoa === 'undefined'
@@ -33,7 +33,7 @@ function Radio({
 }: RadioFieldProps) {
   return (
     <div {...omit(filterDOMProps(props), ['checkboxes'])}>
-      {label && <label style={LabelStyles}>{label}</label>}
+      <LabelField label={label} id={id} required={props.required} />
 
       {allowedValues?.map(item => (
         <div key={item}>
diff --git a/src/components/uniforms-frontmatter/SelectField.css b/src/components/uniforms-frontmatter/SelectField.css
new file mode 100644
index 00000000..a4af6f2b
--- /dev/null
+++ b/src/components/uniforms-frontmatter/SelectField.css
@@ -0,0 +1,5 @@
+
+
+.autoform__select_field {
+  color: var(--frontmatter-select-foreground, var(--vscode-editor-foreground));
+}
\ No newline at end of file
diff --git a/src/components/uniforms-frontmatter/SelectField.tsx b/src/components/uniforms-frontmatter/SelectField.tsx
index 31addad1..09f4eb2a 100644
--- a/src/components/uniforms-frontmatter/SelectField.tsx
+++ b/src/components/uniforms-frontmatter/SelectField.tsx
@@ -2,7 +2,8 @@ import xor = require('lodash.xor');
 import * as React from 'react';
 import { Ref } from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { LabelStyles } from './component-styles';
+import { LabelField } from './LabelField';
+import './SelectField.css';
 
 const base64: typeof btoa =
   typeof btoa === 'undefined'
@@ -42,8 +43,8 @@ function Select({
 }: SelectFieldProps) {
   const multiple = fieldType === Array;
   return (
-    <div {...filterDOMProps(props)}>
-      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+    <div className='autoform__select_field' {...filterDOMProps(props)}>
+      <LabelField label={label} id={id} required={required} />
       
       {checkboxes ? (
         allowedValues!.map(item => (
diff --git a/src/components/uniforms-frontmatter/TextField.tsx b/src/components/uniforms-frontmatter/TextField.tsx
index c71f1839..1345ff9e 100644
--- a/src/components/uniforms-frontmatter/TextField.tsx
+++ b/src/components/uniforms-frontmatter/TextField.tsx
@@ -1,7 +1,7 @@
 import { Ref } from 'react';
 import * as React from 'react';
 import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
-import { LabelStyles } from './component-styles';
+import { LabelField } from './LabelField';
 
 export type TextFieldProps = HTMLFieldProps<
   string,
@@ -23,9 +23,12 @@ function Text({
   value,
   ...props
 }: TextFieldProps) {
+
+  console.log('TextFieldProps', props);
+
   return (
     <div {...filterDOMProps(props)}>
-      {label && <label htmlFor={id} style={LabelStyles}>{label}</label>}
+      <LabelField label={label} id={id} required={props.required} />
 
       <input
         autoComplete={autoComplete}
diff --git a/src/components/uniforms-frontmatter/component-styles.ts b/src/components/uniforms-frontmatter/component-styles.ts
deleted file mode 100644
index 192f38fe..00000000
--- a/src/components/uniforms-frontmatter/component-styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-
-
-export const LabelStyles: React.CSSProperties = { 
-  display: "block", 
-  marginBottom: ".5rem", 
-  marginTop: ".5rem", 
-  lineHeight: "16px", 
-  fontWeight: "bold" };
\ No newline at end of file
diff --git a/src/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index 6d90b32b..74b3d5c0 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -4,8 +4,8 @@
 
 :root {
   /* Bool field */
-  --frontmatter-toggle-background: #fafafa;
-  --frontmatter-toggle-secondaryBackground: #f5f5f5;
+  --frontmatter-toggle-background: #15c2cb;
+  --frontmatter-toggle-secondaryBackground: #ADADAD;
 
   /* Errors field */
   --frontmatter-error-background: rgba(255, 85, 0, 0.2);
@@ -25,7 +25,15 @@
     --frontmatter-field-borderActive: #009aa3;
   }
 
-  /* List delete field */
+  /* List field */
+  --frontmatter-list-border: #ADADAD;
+
+  .vscode-dark {
+    --frontmatter-list-border: #404551;
+  }
+
+  /* Select field */
+  --frontmatter-select-foreground: #0e131f;
 }
 
 
diff --git a/src/panelWebView/components/DataCollection/DataCollectionField.tsx b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
index c6f9cafa..64e1ce78 100644
--- a/src/panelWebView/components/DataCollection/DataCollectionField.tsx
+++ b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
@@ -5,8 +5,10 @@ import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-
 import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
 import { Field, PanelSettings } from '../../../models';
 import { DataCollectionControls } from './DataCollectionControls';
-import { PencilIcon, TrashIcon } from '@heroicons/react/outline';
+import { CollectionIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
 import { VsLabel } from '../VscodeComponents';
+import { DataCollectionRecord } from './DataCollectionRecord';
+import { DataCollectionRecords } from './DataCollectionRecords';
 
 export interface IDataCollectionFieldProps {
   label: string;
@@ -92,8 +94,10 @@ export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldPr
           onSubmit={onUpdate}
           ref={form => form?.reset()}>
           {
-            (model && selectedIndex !== null) && (
+            (model && selectedIndex !== null) ? (
               <h3>Editing: Record {selectedIndex + 1}</h3>
+            ) : (
+              <h3>Create a new record</h3>
             )
           }
 
@@ -109,31 +113,11 @@ export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldPr
         </AutoForm>
       </div>
 
-      {
-        value && (
-          <div className='data_collection__list'>
-            <label>Data</label>
-            <ul>
-            {
-              value.map((v: any, i: number) => (
-                <li key={i}>
-                  <span>Record {i+1}</span>
-
-                  <button className='data_collection__list__button data_collection__list__button_edit' onClick={() => setSelectedIndex(i)}>
-                    <PencilIcon className='data_collection__list__button_icon' />
-                    <span className='sr-only'>Edit</span>
-                  </button>
-                  <button className='data_collection__list__button data_collection__list__button_delete' onClick={() => deleteItem(i)}>
-                    <TrashIcon className='data_collection__list__button_icon' />
-                    <span className='sr-only'>Delete</span>
-                  </button>
-                </li>
-              ))
-            }
-            </ul>
-          </div>
-        )
-      }
+      <DataCollectionRecords
+        records={value}
+        onAdd={() => setSelectedIndex(null)}
+        onEdit={(index: number) => setSelectedIndex(index)}
+        onDelete={deleteItem} />
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/DataCollection/DataCollectionRecord.tsx b/src/panelWebView/components/DataCollection/DataCollectionRecord.tsx
new file mode 100644
index 00000000..8f9a1ab3
--- /dev/null
+++ b/src/panelWebView/components/DataCollection/DataCollectionRecord.tsx
@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { PencilIcon, TrashIcon } from '@heroicons/react/outline';
+
+export interface IDataCollectionRecordProps {
+  id: number;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+export const DataCollectionRecord: React.FunctionComponent<IDataCollectionRecordProps> = ({ id, onEdit, onDelete }: React.PropsWithChildren<IDataCollectionRecordProps>) => {
+  return (
+    <li>
+      <span>Record {id+1}</span>
+
+      <div>
+        <button title='Edit record' className='data_collection__list__button data_collection__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='data_collection__list__button_icon' />
+          <span className='sr-only'>Edit</span>
+        </button>
+        <button title='Delete record' className='data_collection__list__button data_collection__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='data_collection__list__button_icon' />
+          <span className='sr-only'>Delete</span>
+        </button>
+      </div>
+    </li>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataCollection/DataCollectionRecords.tsx b/src/panelWebView/components/DataCollection/DataCollectionRecords.tsx
new file mode 100644
index 00000000..d762805c
--- /dev/null
+++ b/src/panelWebView/components/DataCollection/DataCollectionRecords.tsx
@@ -0,0 +1,47 @@
+import { CollectionIcon, PlusIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { VsLabel } from '../VscodeComponents';
+import { DataCollectionRecord } from './DataCollectionRecord';
+
+export interface IDataCollectionRecordsProps {
+  records: any[];
+  onAdd: () => void;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+export const DataCollectionRecords: React.FunctionComponent<IDataCollectionRecordsProps> = ({ records, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataCollectionRecordsProps>) => {
+
+  if (!records || !records.length) {
+    return null;
+  }
+
+  return (
+    <div className='data_collection__list'>
+      <VsLabel>
+        <div className={`metadata_field__label`} >
+          <div>
+            <CollectionIcon style={{ width: "16px", height: "16px" }} />
+            <span style={{ lineHeight: "16px"}}>Records</span>
+          </div>
+
+          <button title='Add new record' className='data_collection__list__button' onClick={onAdd}>
+            <PlusIcon style={{ width: "16px", height: "16px" }} /> 
+          </button>
+        </div>
+      </VsLabel>
+
+      <ul>
+      {
+        records.map((v: any, i: number) => (
+          <DataCollectionRecord 
+            key={i} 
+            id={i} 
+            onEdit={onEdit}
+            onDelete={onDelete}  /> 
+        ))
+      }
+      </ul>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index b4fd8631..5f011dc7 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -1,6 +1,7 @@
 
 .data_collection__field {
-  border: 1px dashed rgba(255, 255, 255, 0.2);
+  border: 1px dashed var(--vscode-button-secondaryBackground);
+  color: var(--vscode--settings-headerForeground);
   padding: .5rem 1rem;
   margin-bottom: .5rem;
 
@@ -9,6 +10,12 @@
     border: 1px dashed var(--vscode-button-background);
     padding: 1rem;
     filter: brightness(85%);
+
+    h3 {
+      font-size: 1rem;
+      font-weight: bold;
+      text-align: center;
+    }
   }
 
   .fields > div {
@@ -63,27 +70,65 @@
     font-weight: bold;
   }
 
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
   li {
-    margin-bottom: .5rem;
+    border-bottom: 1px solid var(--vscode-button-secondaryBackground);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: .5rem 0;
 
     span {
       margin-right: .5rem;
     }
 
+    > div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      
+      button:last-child {
+        margin-left: .5rem;
+      }
+    }
+
     &:last-child {
       margin-bottom: 0;
+      border-bottom: 0;
     }
   }
 }
 
+.data_collection__list .metadata_field__label {
+  justify-content: space-between;
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  button svg {
+    margin-right: 0;
+  }
+}
+
 .data_collection__list__button {
   width: auto;
   background: none;
-  color: var(--vscode-editor-foreground);
+  color: inherit;
+  outline: none !important;
+  outline-offset: inherit !important;
+  padding: 0;
+  margin: 0;
 
   &:hover {
-    color: var(--vscode-button-secondaryForeground);
-    background: var(--vscode-button-secondaryHoverBackground);
+    color: var(--vscode-editor-foreground);
+    background: none;
   }
 }
 

From 70ea6a5a16f4de072f97524573b6d5012d345a60 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 11 Feb 2022 11:25:45 +0100
Subject: [PATCH 13/62] Updated changelog

---
 CHANGELOG.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 262f687a..eb6a7c20 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,10 @@
 
 ## [6.1.0] - 2022-02-xx
 
+### ✨ New features
+
+- [#176](https://github.com/estruyf/vscode-front-matter/issues/176): New `data collection` field type
+
 ### 🎨 Enhancements
 
 - Updated the activity bar icon for better visibility

From 1d5f940c94de35a4b26609d18ec46b0e90b6bd1c Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 11 Feb 2022 11:30:30 +0100
Subject: [PATCH 14/62] Remove logging

---
 src/components/uniforms-frontmatter/TextField.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/uniforms-frontmatter/TextField.tsx b/src/components/uniforms-frontmatter/TextField.tsx
index 1345ff9e..c77dc16f 100644
--- a/src/components/uniforms-frontmatter/TextField.tsx
+++ b/src/components/uniforms-frontmatter/TextField.tsx
@@ -24,8 +24,6 @@ function Text({
   ...props
 }: TextFieldProps) {
 
-  console.log('TextFieldProps', props);
-
   return (
     <div {...filterDOMProps(props)}>
       <LabelField label={label} id={id} required={props.required} />

From a31bca73e7be96c1fdb9cb150901639237517f23 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sat, 12 Feb 2022 10:03:40 +0100
Subject: [PATCH 15/62] Keep collapsible state

---
 CHANGELOG.md                                |   1 +
 package-lock.json                           | 215 ++++++--------------
 package.json                                |   2 +-
 src/helpers/MessageHelper.ts                |  21 +-
 src/panelWebView/ViewPanel.tsx              |   2 +-
 src/panelWebView/components/Collapsible.tsx |  12 +-
 src/panelWebView/index.tsx                  |   2 +-
 7 files changed, 92 insertions(+), 163 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index eb6a7c20..8ce1e98e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 ### 🎨 Enhancements
 
 - Updated the activity bar icon for better visibility
+- Storing the panel collapse section states
 
 ### ⚡️ Optimizations
 
diff --git a/package-lock.json b/package-lock.json
index b3930fbf..86c7540b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,7 +36,7 @@
         "@types/vscode": "^1.63.0",
         "@vscode/codicons": "0.0.20",
         "@vscode/extension-telemetry": "^0.4.7",
-        "@vscode/webview-ui-toolkit": "^0.8.1",
+        "@vscode/webview-ui-toolkit": "^0.9.1",
         "@webpack-cli/serve": "^1.6.0",
         "ajv": "^8.8.2",
         "array-move": "^4.0.0",
@@ -249,82 +249,45 @@
       "dev": true
     },
     "node_modules/@microsoft/fast-element": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.6.0.tgz",
-      "integrity": "sha512-ePTcBuCA99n7He0BYLIzFr5YOHYPSiBLJeDbDsyyQ5JUs4oXaZD0v54Pq0GAtSZuagnCGTDqcxEcBPUhTqLmQw==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.7.0.tgz",
+      "integrity": "sha512-2qpAWuiOSdQfH/XdO8ZtVhlvQVCjHlojWUPoGbvHJDizBccZib+4uGReG87RIBp2Fi0s7ngYPRUioS1Lr+Xe0A==",
       "dev": true
     },
     "node_modules/@microsoft/fast-foundation": {
-      "version": "1.24.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-1.24.8.tgz",
-      "integrity": "sha512-n4O9jPh8BBliF/Yl9FAVhrSoopsRCnva2L432s/fHwLelY9WUeswjO3DidVBFbzXD5u/gzC4LGWJScNe/ZGU4Q==",
+      "version": "2.33.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.33.2.tgz",
+      "integrity": "sha512-wTVo8u1eG9zUYSGDNPl4R+Yo9MTVJe7LvyI8sOqKmdggsbnYzhEa8wN0uBCnqo7W61nyhRL5FqPSh6WZGT5hUQ==",
       "dev": true,
       "dependencies": {
-        "@microsoft/fast-element": "^1.4.0",
-        "@microsoft/fast-web-utilities": "^4.8.0",
-        "@microsoft/tsdoc-config": "^0.13.4",
+        "@microsoft/fast-element": "^1.7.0",
+        "@microsoft/fast-web-utilities": "^5.1.0",
         "tabbable": "^5.2.0",
         "tslib": "^1.13.0"
       }
     },
-    "node_modules/@microsoft/fast-foundation/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
-    "node_modules/@microsoft/fast-web-utilities": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz",
-      "integrity": "sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA==",
+    "node_modules/@microsoft/fast-react-wrapper": {
+      "version": "0.1.29",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.29.tgz",
+      "integrity": "sha512-x8y/1qaKTv/UWPsLj3hyK1teSLLCSuKTctMzqBoWSoq5VfEVypm7fNGoHG4mi4AE8fIt865+R7I+QfYARYp5fQ==",
       "dev": true,
       "dependencies": {
-        "exenv-es6": "^1.0.0"
+        "@microsoft/fast-element": "^1.7.0",
+        "@microsoft/fast-foundation": "^2.33.2"
       },
       "peerDependencies": {
-        "lodash-es": "^4.17.10"
-      }
-    },
-    "node_modules/@microsoft/tsdoc": {
-      "version": "0.12.24",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
-      "integrity": "sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg==",
-      "dev": true
-    },
-    "node_modules/@microsoft/tsdoc-config": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
-      "integrity": "sha512-VqqZn+rT9f6XujFPFR2aN9XKF/fuir/IzKVzoxI0vXIzxysp4ee6S2jCakmlGFHEasibifFTsJr7IYmRPxfzYw==",
-      "dev": true,
-      "dependencies": {
-        "@microsoft/tsdoc": "0.12.24",
-        "ajv": "~6.12.6",
-        "jju": "~1.4.0",
-        "resolve": "~1.19.0"
+        "react": ">=16.9.0"
       }
     },
-    "node_modules/@microsoft/tsdoc-config/node_modules/ajv": {
-      "version": "6.12.6",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-      "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+    "node_modules/@microsoft/fast-web-utilities": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.1.0.tgz",
+      "integrity": "sha512-S2PCxI4XqtIxLM1N7i/NuIAgx+mJM01+mDzyB3vZlYibAkOT0bzp5YZCp+coXowokSin/nK5T2kqShMXEzI6Jg==",
       "dev": true,
       "dependencies": {
-        "fast-deep-equal": "^3.1.1",
-        "fast-json-stable-stringify": "^2.0.0",
-        "json-schema-traverse": "^0.4.1",
-        "uri-js": "^4.2.2"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/epoberezkin"
+        "exenv-es6": "^1.0.0"
       }
     },
-    "node_modules/@microsoft/tsdoc-config/node_modules/json-schema-traverse": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-      "dev": true
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -944,13 +907,17 @@
       }
     },
     "node_modules/@vscode/webview-ui-toolkit": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
-      "integrity": "sha512-SOgeaZ+/6yFDXLsgH+JvKcs4E0ThvuohNhkr9mvnggjl+OfFxc+Yqkyf5B4B5kuu3EppOCzEMiUwPC8APuLEGQ==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.9.1.tgz",
+      "integrity": "sha512-nCy9r2PpoLJW9Ie3T6V8zGUAYY1eL/K42eGVYYjwm5ogdYC3OynuiOf7tDBIgzJECRJlJvgVCPZ5S4ky1sjIGg==",
       "dev": true,
       "dependencies": {
-        "@microsoft/fast-element": "^1.2.0",
-        "@microsoft/fast-foundation": "^1.24.7"
+        "@microsoft/fast-element": "^1.6.2",
+        "@microsoft/fast-foundation": "^2.33.1",
+        "@microsoft/fast-react-wrapper": "^0.1.18"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0"
       }
     },
     "node_modules/@webassemblyjs/ast": {
@@ -5009,12 +4976,6 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
-    "node_modules/jju": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
-      "integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo=",
-      "dev": true
-    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -8381,9 +8342,9 @@
       }
     },
     "node_modules/tslib": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
     "node_modules/tslint": {
@@ -8426,12 +8387,6 @@
         "node": ">=0.3.1"
       }
     },
-    "node_modules/tslint/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-      "dev": true
-    },
     "node_modules/tsutils": {
       "version": "2.29.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
@@ -9384,77 +9339,40 @@
       "dev": true
     },
     "@microsoft/fast-element": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.6.0.tgz",
-      "integrity": "sha512-ePTcBuCA99n7He0BYLIzFr5YOHYPSiBLJeDbDsyyQ5JUs4oXaZD0v54Pq0GAtSZuagnCGTDqcxEcBPUhTqLmQw==",
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-element/-/fast-element-1.7.0.tgz",
+      "integrity": "sha512-2qpAWuiOSdQfH/XdO8ZtVhlvQVCjHlojWUPoGbvHJDizBccZib+4uGReG87RIBp2Fi0s7ngYPRUioS1Lr+Xe0A==",
       "dev": true
     },
     "@microsoft/fast-foundation": {
-      "version": "1.24.8",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-1.24.8.tgz",
-      "integrity": "sha512-n4O9jPh8BBliF/Yl9FAVhrSoopsRCnva2L432s/fHwLelY9WUeswjO3DidVBFbzXD5u/gzC4LGWJScNe/ZGU4Q==",
+      "version": "2.33.2",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-foundation/-/fast-foundation-2.33.2.tgz",
+      "integrity": "sha512-wTVo8u1eG9zUYSGDNPl4R+Yo9MTVJe7LvyI8sOqKmdggsbnYzhEa8wN0uBCnqo7W61nyhRL5FqPSh6WZGT5hUQ==",
       "dev": true,
       "requires": {
-        "@microsoft/fast-element": "^1.4.0",
-        "@microsoft/fast-web-utilities": "^4.8.0",
-        "@microsoft/tsdoc-config": "^0.13.4",
+        "@microsoft/fast-element": "^1.7.0",
+        "@microsoft/fast-web-utilities": "^5.1.0",
         "tabbable": "^5.2.0",
         "tslib": "^1.13.0"
-      },
-      "dependencies": {
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
-        }
       }
     },
-    "@microsoft/fast-web-utilities": {
-      "version": "4.8.1",
-      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-4.8.1.tgz",
-      "integrity": "sha512-P3xeyUwQ9nPkFrgAdmkOzaXxIq8YqMU5K+LXcoHgJddJCBCKfGWW9OZQOTigLddItTyVyfO8qsJpDQb1TskKHA==",
+    "@microsoft/fast-react-wrapper": {
+      "version": "0.1.29",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-react-wrapper/-/fast-react-wrapper-0.1.29.tgz",
+      "integrity": "sha512-x8y/1qaKTv/UWPsLj3hyK1teSLLCSuKTctMzqBoWSoq5VfEVypm7fNGoHG4mi4AE8fIt865+R7I+QfYARYp5fQ==",
       "dev": true,
       "requires": {
-        "exenv-es6": "^1.0.0"
+        "@microsoft/fast-element": "^1.7.0",
+        "@microsoft/fast-foundation": "^2.33.2"
       }
     },
-    "@microsoft/tsdoc": {
-      "version": "0.12.24",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc/-/tsdoc-0.12.24.tgz",
-      "integrity": "sha512-Mfmij13RUTmHEMi9vRUhMXD7rnGR2VvxeNYtaGtaJ4redwwjT4UXYJ+nzmVJF7hhd4pn/Fx5sncDKxMVFJSWPg==",
-      "dev": true
-    },
-    "@microsoft/tsdoc-config": {
-      "version": "0.13.9",
-      "resolved": "https://registry.npmjs.org/@microsoft/tsdoc-config/-/tsdoc-config-0.13.9.tgz",
-      "integrity": "sha512-VqqZn+rT9f6XujFPFR2aN9XKF/fuir/IzKVzoxI0vXIzxysp4ee6S2jCakmlGFHEasibifFTsJr7IYmRPxfzYw==",
+    "@microsoft/fast-web-utilities": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@microsoft/fast-web-utilities/-/fast-web-utilities-5.1.0.tgz",
+      "integrity": "sha512-S2PCxI4XqtIxLM1N7i/NuIAgx+mJM01+mDzyB3vZlYibAkOT0bzp5YZCp+coXowokSin/nK5T2kqShMXEzI6Jg==",
       "dev": true,
       "requires": {
-        "@microsoft/tsdoc": "0.12.24",
-        "ajv": "~6.12.6",
-        "jju": "~1.4.0",
-        "resolve": "~1.19.0"
-      },
-      "dependencies": {
-        "ajv": {
-          "version": "6.12.6",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
-          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.1",
-            "fast-json-stable-stringify": "^2.0.0",
-            "json-schema-traverse": "^0.4.1",
-            "uri-js": "^4.2.2"
-          }
-        },
-        "json-schema-traverse": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
-          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-          "dev": true
-        }
+        "exenv-es6": "^1.0.0"
       }
     },
     "@nodelib/fs.scandir": {
@@ -10019,13 +9937,14 @@
       "dev": true
     },
     "@vscode/webview-ui-toolkit": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.8.1.tgz",
-      "integrity": "sha512-SOgeaZ+/6yFDXLsgH+JvKcs4E0ThvuohNhkr9mvnggjl+OfFxc+Yqkyf5B4B5kuu3EppOCzEMiUwPC8APuLEGQ==",
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@vscode/webview-ui-toolkit/-/webview-ui-toolkit-0.9.1.tgz",
+      "integrity": "sha512-nCy9r2PpoLJW9Ie3T6V8zGUAYY1eL/K42eGVYYjwm5ogdYC3OynuiOf7tDBIgzJECRJlJvgVCPZ5S4ky1sjIGg==",
       "dev": true,
       "requires": {
-        "@microsoft/fast-element": "^1.2.0",
-        "@microsoft/fast-foundation": "^1.24.7"
+        "@microsoft/fast-element": "^1.6.2",
+        "@microsoft/fast-foundation": "^2.33.1",
+        "@microsoft/fast-react-wrapper": "^0.1.18"
       }
     },
     "@webassemblyjs/ast": {
@@ -13154,12 +13073,6 @@
         }
       }
     },
-    "jju": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/jju/-/jju-1.4.0.tgz",
-      "integrity": "sha1-o6vicYryQaKykE+EpiWXDzia4yo=",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -15625,9 +15538,9 @@
       }
     },
     "tslib": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
-      "integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
     "tslint": {
@@ -15656,12 +15569,6 @@
           "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
           "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
           "dev": true
-        },
-        "tslib": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-          "dev": true
         }
       }
     },
diff --git a/package.json b/package.json
index 387de0b3..249ee6ec 100644
--- a/package.json
+++ b/package.json
@@ -1441,7 +1441,7 @@
     "@types/vscode": "^1.63.0",
     "@vscode/codicons": "0.0.20",
     "@vscode/extension-telemetry": "^0.4.7",
-    "@vscode/webview-ui-toolkit": "^0.8.1",
+    "@vscode/webview-ui-toolkit": "^0.9.1",
     "@webpack-cli/serve": "^1.6.0",
     "ajv": "^8.8.2",
     "array-move": "^4.0.0",
diff --git a/src/helpers/MessageHelper.ts b/src/helpers/MessageHelper.ts
index 64597d19..cc5b255f 100644
--- a/src/helpers/MessageHelper.ts
+++ b/src/helpers/MessageHelper.ts
@@ -14,15 +14,30 @@ export class MessageHelper {
   private static vscode: ClientVsCode<any>;
   
   public static getVsCodeAPI() {
-    MessageHelper.vscode = acquireVsCodeApi();
+    if (!MessageHelper.vscode) {
+      MessageHelper.vscode = acquireVsCodeApi();
+    }
     return MessageHelper.vscode;
   }
   
   public static sendMessage = (command: CommandToCode | DashboardMessage, data?: any) => {    
+    const vscode = MessageHelper.getVsCodeAPI();
     if (data) {
-      MessageHelper.vscode.postMessage({ command, data });
+      vscode.postMessage({ command, data });
     } else {
-      MessageHelper.vscode.postMessage({ command });
+      vscode.postMessage({ command });
     }
   }
+
+  public static getState = () => {    
+    const vscode = MessageHelper.getVsCodeAPI();
+    return vscode.getState();
+  }
+
+  public static setState = (data: any) => {    
+    const vscode = MessageHelper.getVsCodeAPI();
+    vscode.setState({
+      ...data
+    });
+  }
 }
\ No newline at end of file
diff --git a/src/panelWebView/ViewPanel.tsx b/src/panelWebView/ViewPanel.tsx
index 201a9c1b..65166620 100644
--- a/src/panelWebView/ViewPanel.tsx
+++ b/src/panelWebView/ViewPanel.tsx
@@ -37,7 +37,7 @@ export const ViewPanel: React.FunctionComponent<IViewPanelProps> = (props: React
   }
 
   return (
-    <div className="frontmatter">
+    <div className="frontmatter">      
       <div className={`ext_actions`}>
         <GlobalSettings settings={settings} />
 
diff --git a/src/panelWebView/components/Collapsible.tsx b/src/panelWebView/components/Collapsible.tsx
index 93f6598d..e1524468 100644
--- a/src/panelWebView/components/Collapsible.tsx
+++ b/src/panelWebView/components/Collapsible.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useEffect } from 'react';
+import { MessageHelper } from '../../helpers/MessageHelper';
 import { Command } from '../Command';
 import { VsCollapsible } from './VscodeComponents';
 
@@ -15,8 +16,9 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
   const collapseKey = `collapse-${id}`;
 
   useEffect(() => {
-    const collapsed = window.localStorage.getItem(collapseKey);
-    if (collapsed === null || collapsed === 'true') {
+    const prevState = MessageHelper.getState();
+    console.log('prevState', prevState);
+    if (!prevState || !prevState[collapseKey] || prevState[collapseKey] === null || prevState[collapseKey] === 'true') {
       setIsOpen(true);
       updateStorage(true);
     }
@@ -31,7 +33,11 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
   }, ['']);
 
   const updateStorage = (value: boolean) => {
-    window.localStorage.setItem(collapseKey, value.toString());
+    const prevState = MessageHelper.getState();
+    MessageHelper.setState({
+      ...prevState,
+      [collapseKey]: value.toString()
+    });
   }
 
   // This is a work around for a lit-element issue of duplicate slot names
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index bd076bcc..ef242ab0 100644
--- a/src/panelWebView/index.tsx
+++ b/src/panelWebView/index.tsx
@@ -15,7 +15,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
 import '@bendera/vscode-webview-elements/dist/vscode-label.js';
-import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
+// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
 
 // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
 

From 131150f5a683adde7d39ad688b9383d8e6a06117 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sat, 12 Feb 2022 16:39:33 +0100
Subject: [PATCH 16/62] #176 - Sorting + multi-block type support

---
 assets/media/styles.css                       |   2 +-
 package.json                                  |  15 ++-
 .../components/DataView/SortableContainer.tsx |   2 +-
 .../components/DataView/SortableItem.tsx      |   2 +-
 src/models/PanelSettings.ts                   |   4 +-
 src/panelWebView/components/Collapsible.tsx   |   1 -
 .../DataBlockControls.tsx}                    |   6 +-
 .../components/DataBlock/DataBlockField.tsx   | 115 ++++++++++++++++
 .../components/DataBlock/DataBlockForm.tsx    |  66 ++++++++++
 .../components/DataBlock/DataBlockRecord.tsx  |  36 +++++
 .../components/DataBlock/DataBlockRecords.tsx |  56 ++++++++
 .../DataBlock/DataBlockSelector.tsx           |  64 +++++++++
 .../components/DataBlock/index.ts             |   6 +
 .../DataCollection/DataCollectionField.tsx    | 123 ------------------
 .../DataCollection/DataCollectionRecord.tsx   |  27 ----
 .../DataCollection/DataCollectionRecords.tsx  |  47 -------
 src/panelWebView/components/Metadata.tsx      |   6 +-
 src/panelWebView/styles.css                   |  87 +++++++++++--
 18 files changed, 442 insertions(+), 223 deletions(-)
 rename src/panelWebView/components/{DataCollection/DataCollectionControls.tsx => DataBlock/DataBlockControls.tsx} (62%)
 create mode 100644 src/panelWebView/components/DataBlock/DataBlockField.tsx
 create mode 100644 src/panelWebView/components/DataBlock/DataBlockForm.tsx
 create mode 100644 src/panelWebView/components/DataBlock/DataBlockRecord.tsx
 create mode 100644 src/panelWebView/components/DataBlock/DataBlockRecords.tsx
 create mode 100644 src/panelWebView/components/DataBlock/DataBlockSelector.tsx
 create mode 100644 src/panelWebView/components/DataBlock/index.ts
 delete mode 100644 src/panelWebView/components/DataCollection/DataCollectionField.tsx
 delete mode 100644 src/panelWebView/components/DataCollection/DataCollectionRecord.tsx
 delete mode 100644 src/panelWebView/components/DataCollection/DataCollectionRecords.tsx

diff --git a/assets/media/styles.css b/assets/media/styles.css
index ab1c2d2e..4f839e5d 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -30,7 +30,7 @@
 }
 
 .inherit {
-  position: inherit !important;
+  position: relative !important;
 }
 
 .z-10 { z-index: 10 !important; }
diff --git a/package.json b/package.json
index 249ee6ec..e28b4d69 100644
--- a/package.json
+++ b/package.json
@@ -633,7 +633,7 @@
                         "categories",
                         "draft",
                         "fields",
-                        "data-collection"
+                        "block"
                       ],
                       "description": "Define the type of field"
                     },
@@ -700,10 +700,13 @@
                     "fields": {
                       "$ref": "#contenttypefield"
                     },
-                    "dataType": {
-                      "type": "string",
+                    "blockType": {
+                      "type": ["string", "array"],
                       "default": "",
-                      "description": "The ID of your data type defined in the `frontMatter.data.types` setting"
+                      "description": "The ID(s) of your data type(s) defined in the `frontMatter.data.types` setting",
+                      "items": {
+                        "type": "string"
+                      }
                     }
                   },
                   "additionalProperties": false,
@@ -758,13 +761,13 @@
                       "if": {
                         "properties": {
                           "type": {
-                            "const": "data-collection"
+                            "const": "block"
                           }
                         }
                       },
                       "then": {
                         "required": [
-                          "dataType"
+                          "blockType"
                         ]
                       }
                     }
diff --git a/src/dashboardWebView/components/DataView/SortableContainer.tsx b/src/dashboardWebView/components/DataView/SortableContainer.tsx
index 1282a5d5..8cd67505 100644
--- a/src/dashboardWebView/components/DataView/SortableContainer.tsx
+++ b/src/dashboardWebView/components/DataView/SortableContainer.tsx
@@ -3,4 +3,4 @@ import { SortableContainer } from 'react-sortable-hoc';
 
 export interface ISortableContainerProps {}
 
-export const Container = SortableContainer(({ children }: React.PropsWithChildren<ISortableContainerProps>) => ( <ul className={`-mx-4 divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}>{children}</ul> ));
\ No newline at end of file
+export const Container = SortableContainer(({ children }: React.PropsWithChildren<ISortableContainerProps>) => ( <ul className={`-mx-4 divide-y divide-gray-200 dark:divide-vulcan-300 border-t border-b border-gray-200 dark:border-vulcan-300`}>{children}</ul>));
\ No newline at end of file
diff --git a/src/dashboardWebView/components/DataView/SortableItem.tsx b/src/dashboardWebView/components/DataView/SortableItem.tsx
index 94ac9564..daafc654 100644
--- a/src/dashboardWebView/components/DataView/SortableItem.tsx
+++ b/src/dashboardWebView/components/DataView/SortableItem.tsx
@@ -23,7 +23,7 @@ export const SortableItem = SortableElement(({ value, selectedIndex, crntIndex,
   
   return (
     <>
-      <li data-test={`${selectedIndex}-${crntIndex}`} className={`py-2 px-2 w-full flex justify-between content-center hover:bg-gray-200 dark:hover:bg-vulcan-400 ${selectedIndex === crntIndex ? `bg-gray-300 dark:bg-vulcan-300` : ``}`}>
+      <li data-test={`${selectedIndex}-${crntIndex}`} className={`sortable_item py-2 px-2 w-full flex justify-between content-center hover:bg-gray-200 dark:hover:bg-vulcan-400 ${selectedIndex === crntIndex ? `bg-gray-300 dark:bg-vulcan-300` : ``}`}>
         <div 
           className='flex items-center w-full'
           onClick={() => onSelectedIndexChange(crntIndex)}>
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index e30c8235..b405a240 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -40,7 +40,7 @@ export interface ContentType {
   pageBundle?: boolean;
 }
 
-export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "data-collection";
+export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "block";
 
 export interface Field {
   title?: string;
@@ -54,7 +54,7 @@ export interface Field {
   taxonomyId?: string;
   default?: string;
   fields?: Field[];
-  dataType?: string;
+  blockType?: string | string[];
 }
 
 export interface DateInfo {
diff --git a/src/panelWebView/components/Collapsible.tsx b/src/panelWebView/components/Collapsible.tsx
index e1524468..31b1803d 100644
--- a/src/panelWebView/components/Collapsible.tsx
+++ b/src/panelWebView/components/Collapsible.tsx
@@ -17,7 +17,6 @@ const Collapsible: React.FunctionComponent<ICollapsibleProps> = ({id, children,
 
   useEffect(() => {
     const prevState = MessageHelper.getState();
-    console.log('prevState', prevState);
     if (!prevState || !prevState[collapseKey] || prevState[collapseKey] === null || prevState[collapseKey] === 'true') {
       setIsOpen(true);
       updateStorage(true);
diff --git a/src/panelWebView/components/DataCollection/DataCollectionControls.tsx b/src/panelWebView/components/DataBlock/DataBlockControls.tsx
similarity index 62%
rename from src/panelWebView/components/DataCollection/DataCollectionControls.tsx
rename to src/panelWebView/components/DataBlock/DataBlockControls.tsx
index dc1a165d..e137c32a 100644
--- a/src/panelWebView/components/DataCollection/DataCollectionControls.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockControls.tsx
@@ -2,16 +2,16 @@ import * as React from 'react';
 import { useForm } from 'uniforms';
 import { SubmitField } from 'uniforms-unstyled';
 
-export interface IDataCollectionControlsProps {
+export interface IDataBlockControlsProps {
   model: any | null;
   onClear: () => void;
 }
 
-export const DataCollectionControls: React.FunctionComponent<IDataCollectionControlsProps> = ({ model, onClear }: React.PropsWithChildren<IDataCollectionControlsProps>) => {
+export const DataBlockControls: React.FunctionComponent<IDataBlockControlsProps> = ({ model, onClear }: React.PropsWithChildren<IDataBlockControlsProps>) => {
   const { formRef } = useForm();
   
   return (
-    <div className='data_controls__buttons'>
+    <div className='data_block__buttons'>
       <SubmitField value={model ? `Update` : `Add`} />
       
       <button className='ml-4' onClick={() => {
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
new file mode 100644
index 00000000..87d76938
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { Field, PanelSettings } from '../../../models';
+import { PencilIcon } from '@heroicons/react/outline';
+import { VsLabel } from '../VscodeComponents';
+import { DataBlockRecords, DataBlockForm, DataBlockSelector } from '.';
+import { SortEnd } from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+
+export interface IDataBlockFieldProps {
+  label: string;
+  settings: PanelSettings;
+  field: Field;
+  value: any;
+  onSubmit: (data: any) => void;
+}
+
+export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
+  const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
+  const [ selectedDataType, setSelectedDataType ] = useState<string | null>(null);
+  const [ selectedSchema, setSelectedSchema ] = useState<any | null>(null);
+
+  const onUpdate = useCallback((data: any) => {
+    const dataClone: any[] = Object.assign([], value);
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      dataClone[selectedIndex] = {
+        ...data,
+        blockType: selectedSchema?.id
+      };
+    } else {
+      dataClone.push({
+        ...data,
+        blockType: selectedSchema?.id
+      });
+    }
+    onSubmit(dataClone);
+  }, [value, selectedIndex, onSubmit, selectedSchema]);
+
+  const deleteItem = useCallback((index: number) => {
+    const dataClone: any[] = Object.assign([], value);
+
+    if (!value) {
+      return;
+    }
+
+    dataClone.splice(index, 1);
+    onSubmit(dataClone);
+  }, [value, selectedIndex, onSubmit]);
+
+  const onSetDataType = (dataType: string | null) => {
+    setSelectedDataType(dataType);
+
+    if (!dataType) {
+      setSelectedIndex(null);
+      setSelectedSchema(null);
+    }
+  }
+
+  const onSort = useCallback(({ oldIndex, newIndex }: SortEnd) => {
+    if (!value || value.length === 0) {
+      return null;
+    }
+
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      setSelectedIndex(newIndex);
+    }
+
+    const newEntries = arrayMoveImmutable(value, oldIndex, newIndex);
+    onSubmit(newEntries);
+  }, [value, selectedIndex]);
+
+  const model = useMemo(() => (value && selectedIndex !== null && selectedIndex !== undefined) ? value[selectedIndex] : null, [value, selectedIndex]);
+
+  useEffect(() => {
+    if (selectedIndex !== null && settings?.dataTypes) {
+      const blockType = model["blockType"];
+      const schema = settings?.dataTypes.find(dataType => dataType.id === blockType);
+      setSelectedSchema(schema);
+      setSelectedDataType(blockType);
+    }
+  }, [selectedIndex, model, settings?.dataTypes]);
+  
+  return (
+    <div className='data_block__field'>
+
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+
+      <DataBlockSelector
+        field={field}
+        selectedDataType={selectedDataType}
+        dataTypes={settings.dataTypes}
+        onSetDataType={onSetDataType}
+        onSchemaUpdate={setSelectedSchema} />
+
+      <DataBlockForm
+        label={(model && selectedIndex !== null) ? `Editing: Record ${selectedIndex + 1}` : `Create a new ${selectedSchema?.id}`}
+        model={model}
+        schema={selectedSchema?.schema}
+        onUpdate={onUpdate}
+        onClear={() => setSelectedIndex(null)} />
+
+      <DataBlockRecords
+        records={value}
+        selectedIndex={selectedIndex}
+        onAdd={() => setSelectedIndex(null)}
+        onSort={onSort}
+        onEdit={(index: number) => setSelectedIndex(index)}
+        onDelete={deleteItem} />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/DataBlockForm.tsx b/src/panelWebView/components/DataBlock/DataBlockForm.tsx
new file mode 100644
index 00000000..fda2408e
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockForm.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import JSONSchemaBridge from 'uniforms-bridge-json-schema';
+import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
+import { DataBlockControls } from './DataBlockControls';
+import { DataBlockRecord } from './DataBlockRecord';
+import { CollectionIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
+import Ajv from 'ajv';
+
+export interface IDataBlockFormProps {
+  label: string;
+  schema: any | null;
+  model: any | null;
+  onUpdate: (data: any) => void;
+  onClear: () => void;
+}
+
+export const DataBlockForm: React.FunctionComponent<IDataBlockFormProps> = ({ label, schema, model, onUpdate, onClear }: React.PropsWithChildren<IDataBlockFormProps>) => {
+  const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
+
+  const ajv = new Ajv({ allErrors: true, useDefaults: true });
+
+  const jsonValidator = (crntSchema: object) => {
+    const validator = ajv.compile(crntSchema);
+
+    return (crntModel: object) => {
+      validator(crntModel);
+      return validator.errors?.length ? { details: validator.errors } : null;
+    };
+  };
+
+  useEffect(() => {
+    if (schema) {
+      const schemaValidator = jsonValidator(schema);
+      const bridge = new JSONSchemaBridge(schema, schemaValidator);
+      setBridge(bridge);
+    }
+  }, [schema]);
+
+  if (!bridge || !schema) {
+    return null;
+  }
+  
+  return (
+    <div className='autoform'>
+      <AutoForm 
+        schema={bridge} 
+        model={model || {}}
+        onSubmit={onUpdate}
+        ref={form => form?.reset()}>
+
+        {  label && <h3>{label}</h3> }
+
+        <div className={`fields`}>
+          <AutoFields />
+        </div>
+        
+        <div className={`errors`}>
+          <ErrorsField />
+        </div>
+
+        <DataBlockControls model={model} onClear={onClear} />
+      </AutoForm>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecord.tsx b/src/panelWebView/components/DataBlock/DataBlockRecord.tsx
new file mode 100644
index 00000000..4298529b
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockRecord.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PencilIcon, SelectorIcon, TrashIcon } from '@heroicons/react/outline';
+import {  SortableHandle, SortableElement } from 'react-sortable-hoc';
+export interface IDataBlockRecordProps {
+  id: number;
+  index: number;
+  label: string;
+  isSelected?: boolean;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+const DragHandle = SortableHandle(() => <span className='drag_handler'><SelectorIcon /></span>);
+
+export const DataBlockRecord = SortableElement(({ label, id, onEdit, onDelete, isSelected }: React.PropsWithChildren<IDataBlockRecordProps>) => {
+  return (
+    <li className={`data_block__record ${isSelected ? `data_block__record_selected` : ``}`}>
+      <div>
+        <DragHandle />
+
+        <span>{label} - {id+1}</span>
+      </div>
+
+      <div>
+        <button title='Edit record' className='data_block__list__button data_block__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='data_block__list__button_icon' />
+          <span className='sr-only'>Edit</span>
+        </button>
+        <button title='Delete record' className='data_block__list__button data_block__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='data_block__list__button_icon' />
+          <span className='sr-only'>Delete</span>
+        </button>
+      </div>
+    </li>
+  );
+});
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
new file mode 100644
index 00000000..547110bc
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
@@ -0,0 +1,56 @@
+import { CollectionIcon, PlusIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { VsLabel } from '../VscodeComponents';
+import { DataBlockRecord } from '.';
+import { SortableContainer, SortEnd } from 'react-sortable-hoc';
+export interface IDataBlockRecordsProps {
+  records: any[];
+  selectedIndex: number | null;
+  onAdd: () => void;
+  onSort: (obj: SortEnd) => void;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+const Container = SortableContainer(({children}: React.PropsWithChildren<any>) => {
+  return <ul>{children}</ul>;
+});
+
+export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataBlockRecordsProps>) => {
+
+  if (!records || !records.length) {
+    return null;
+  }
+
+  return (
+    <div className='data_block__list'>
+      <VsLabel>
+        <div className={`metadata_field__label`} >
+          <div>
+            <CollectionIcon style={{ width: "16px", height: "16px" }} />
+            <span style={{ lineHeight: "16px"}}>Records</span>
+          </div>
+
+          <button title='Add new record' className='data_block__list__button' onClick={onAdd}>
+            <PlusIcon style={{ width: "16px", height: "16px" }} /> 
+          </button>
+        </div>
+      </VsLabel>
+
+      <Container onSortEnd={onSort} useDragHandle>
+      {
+        records.map((v: any, idx: number) => (
+          <DataBlockRecord 
+            key={idx} 
+            id={idx}
+            index={idx}
+            label={v?.blockType ?? 'Record'}
+            isSelected={idx === selectedIndex}
+            onEdit={onEdit}
+            onDelete={onDelete}  /> 
+        ))
+      }
+      </Container>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
new file mode 100644
index 00000000..442029cc
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { Field } from '../../../models';
+import { DataType } from '../../../models/DataType';
+
+export interface IDataBlockSelectorProps {
+  field: Field;
+  dataTypes: DataType[] | undefined;
+  selectedDataType: string | null;
+  onSetDataType: (dataType: string | null) => void;
+  onSchemaUpdate: (schema: any) => void;
+}
+
+const EMPTY_OPTION = "EMPTY_OPTION";
+
+export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, dataTypes, selectedDataType, onSetDataType, onSchemaUpdate }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
+  const [ options, setOptions ] = useState<string[]>([]);
+
+  useEffect(() => {
+    if (field.blockType && dataTypes) {
+      if (typeof field.blockType === "string") {
+        const schema = dataTypes.find(dataType => dataType.id === field.blockType);
+        onSchemaUpdate(schema);
+      } else {
+        setOptions([...field.blockType]);
+      }
+    }
+  }, [field.blockType, dataTypes, onSchemaUpdate]);
+
+  useEffect(() => {
+    if (dataTypes && selectedDataType) {
+      if (selectedDataType !== EMPTY_OPTION) {
+        const schema = dataTypes.find(dataType => dataType.id === selectedDataType);
+        onSchemaUpdate(schema);
+      } else {
+        onSchemaUpdate(null);
+      }
+    }
+  }, [selectedDataType, dataTypes, onSchemaUpdate])
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='data_block__selector'>
+      <h3>Block type</h3>
+      <select
+        value={selectedDataType ?? EMPTY_OPTION}
+        onChange={event => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        style={{
+          width: "100%",
+          marginBottom: "1rem"
+        }}>
+        <option value={EMPTY_OPTION}></option>
+        {
+          options.map((o) => (
+            <option key={o} value={o}>{o}</option>
+          ))
+        }
+      </select>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/index.ts b/src/panelWebView/components/DataBlock/index.ts
new file mode 100644
index 00000000..8075b3ca
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/index.ts
@@ -0,0 +1,6 @@
+export * from './DataBlockControls';
+export * from './DataBlockField';
+export * from './DataBlockForm';
+export * from './DataBlockRecord';
+export * from './DataBlockRecords';
+export * from './DataBlockSelector';
diff --git a/src/panelWebView/components/DataCollection/DataCollectionField.tsx b/src/panelWebView/components/DataCollection/DataCollectionField.tsx
deleted file mode 100644
index 64e1ce78..00000000
--- a/src/panelWebView/components/DataCollection/DataCollectionField.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import Ajv from 'ajv';
-import * as React from 'react';
-import { useEffect, useState, useMemo, useCallback } from 'react';
-import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
-import { JSONSchemaBridge } from 'uniforms-bridge-json-schema';
-import { Field, PanelSettings } from '../../../models';
-import { DataCollectionControls } from './DataCollectionControls';
-import { CollectionIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
-import { VsLabel } from '../VscodeComponents';
-import { DataCollectionRecord } from './DataCollectionRecord';
-import { DataCollectionRecords } from './DataCollectionRecords';
-
-export interface IDataCollectionFieldProps {
-  label: string;
-  settings: PanelSettings;
-  field: Field;
-  value: any;
-  onSubmit: (data: any) => void;
-}
-
-export const DataCollectionField: React.FunctionComponent<IDataCollectionFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IDataCollectionFieldProps>) => {
-  const [ schema, setSchema ] = useState<JSONSchemaBridge | null>(null);
-  const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
-  const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
-
-  const ajv = new Ajv({ allErrors: true, useDefaults: true });
-
-  const jsonValidator = (schema: object) => {
-    const validator = ajv.compile(schema);
-
-    return (crntModel: object) => {
-      validator(crntModel);
-      return validator.errors?.length ? { details: validator.errors } : null;
-    };
-  };
-
-  useEffect(() => {
-    if (schema) {
-      const schemaValidator = jsonValidator(schema);
-      const bridge = new JSONSchemaBridge(schema, schemaValidator);
-      setBridge(bridge);
-    }
-  }, [schema]);
-
-  useEffect(() => {
-    if (field?.dataType && settings.dataTypes) {
-      const crntSchema = settings.dataTypes.find(dataType => dataType.id === field.dataType);
-      if (crntSchema?.schema) {
-        setSchema(crntSchema.schema);
-      }
-    }
-  }, [settings?.dataTypes, field?.dataType]);
-
-  const model = useMemo(() => (value && selectedIndex !== null && selectedIndex !== undefined) ? value[selectedIndex] : null, [value, selectedIndex]);
-
-  const onUpdate = useCallback((data: any) => {
-    const dataClone: any[] = Object.assign([], value);
-    if (selectedIndex !== null && selectedIndex !== undefined) {
-      dataClone[selectedIndex] = data;
-    } else {
-      dataClone.push(data);
-    }
-    onSubmit(dataClone);
-  }, [value, selectedIndex, onSubmit]);
-
-  const deleteItem = useCallback((index: number) => {
-    const dataClone: any[] = Object.assign([], value);
-
-    if (!value) {
-      return;
-    }
-
-    dataClone.splice(index, 1);
-    onSubmit(dataClone);
-  }, [value, selectedIndex, onSubmit]);
-
-  if (!bridge) {
-    return null;
-  }
-  
-  return (
-    <div className='data_collection__field'>
-
-      <VsLabel>
-        <div className={`metadata_field__label`}>
-          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
-        </div>
-      </VsLabel>
-
-      <div className='autoform'>
-        <AutoForm 
-          schema={bridge} 
-          model={model || {}}
-          onSubmit={onUpdate}
-          ref={form => form?.reset()}>
-          {
-            (model && selectedIndex !== null) ? (
-              <h3>Editing: Record {selectedIndex + 1}</h3>
-            ) : (
-              <h3>Create a new record</h3>
-            )
-          }
-
-          <div className={`fields`}>
-            <AutoFields />
-          </div>
-          
-          <div className={`errors`}>
-            <ErrorsField />
-          </div>
-
-          <DataCollectionControls model={model} onClear={() => setSelectedIndex(null)} />
-        </AutoForm>
-      </div>
-
-      <DataCollectionRecords
-        records={value}
-        onAdd={() => setSelectedIndex(null)}
-        onEdit={(index: number) => setSelectedIndex(index)}
-        onDelete={deleteItem} />
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataCollection/DataCollectionRecord.tsx b/src/panelWebView/components/DataCollection/DataCollectionRecord.tsx
deleted file mode 100644
index 8f9a1ab3..00000000
--- a/src/panelWebView/components/DataCollection/DataCollectionRecord.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { PencilIcon, TrashIcon } from '@heroicons/react/outline';
-
-export interface IDataCollectionRecordProps {
-  id: number;
-  onEdit: (id: number) => void;
-  onDelete: (id: number) => void;
-}
-
-export const DataCollectionRecord: React.FunctionComponent<IDataCollectionRecordProps> = ({ id, onEdit, onDelete }: React.PropsWithChildren<IDataCollectionRecordProps>) => {
-  return (
-    <li>
-      <span>Record {id+1}</span>
-
-      <div>
-        <button title='Edit record' className='data_collection__list__button data_collection__list__button_edit' onClick={() => onEdit(id)}>
-          <PencilIcon className='data_collection__list__button_icon' />
-          <span className='sr-only'>Edit</span>
-        </button>
-        <button title='Delete record' className='data_collection__list__button data_collection__list__button_delete' onClick={() => onDelete(id)}>
-          <TrashIcon className='data_collection__list__button_icon' />
-          <span className='sr-only'>Delete</span>
-        </button>
-      </div>
-    </li>
-  );
-};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataCollection/DataCollectionRecords.tsx b/src/panelWebView/components/DataCollection/DataCollectionRecords.tsx
deleted file mode 100644
index d762805c..00000000
--- a/src/panelWebView/components/DataCollection/DataCollectionRecords.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { CollectionIcon, PlusIcon } from '@heroicons/react/outline';
-import * as React from 'react';
-import { VsLabel } from '../VscodeComponents';
-import { DataCollectionRecord } from './DataCollectionRecord';
-
-export interface IDataCollectionRecordsProps {
-  records: any[];
-  onAdd: () => void;
-  onEdit: (id: number) => void;
-  onDelete: (id: number) => void;
-}
-
-export const DataCollectionRecords: React.FunctionComponent<IDataCollectionRecordsProps> = ({ records, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataCollectionRecordsProps>) => {
-
-  if (!records || !records.length) {
-    return null;
-  }
-
-  return (
-    <div className='data_collection__list'>
-      <VsLabel>
-        <div className={`metadata_field__label`} >
-          <div>
-            <CollectionIcon style={{ width: "16px", height: "16px" }} />
-            <span style={{ lineHeight: "16px"}}>Records</span>
-          </div>
-
-          <button title='Add new record' className='data_collection__list__button' onClick={onAdd}>
-            <PlusIcon style={{ width: "16px", height: "16px" }} /> 
-          </button>
-        </div>
-      </VsLabel>
-
-      <ul>
-      {
-        records.map((v: any, i: number) => (
-          <DataCollectionRecord 
-            key={i} 
-            id={i} 
-            onEdit={onEdit}
-            onDelete={onDelete}  /> 
-        ))
-      }
-      </ul>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 38efbe1c..c57bae5c 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -20,7 +20,7 @@ import { DateHelper } from '../../helpers/DateHelper';
 import FieldBoundary from './ErrorBoundary/FieldBoundary';
 import { DraftField } from './Fields/DraftField';
 import { VsLabel } from './VscodeComponents';
-import { DataCollectionField } from './DataCollection/DataCollectionField';
+import { DataBlockField } from './DataBlock';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -235,12 +235,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
         }
 
         return null;
-      } else if (field.type === 'data-collection') {
+      } else if (field.type === 'block') {
         const collectionData = parent[field.name];
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DataCollectionField
+            <DataBlockField
               label={field.title || field.name}
               settings={settings}
               field={field}
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 5f011dc7..94cd48a8 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -1,5 +1,5 @@
 
-.data_collection__field {
+.data_block__field {
   border: 1px dashed var(--vscode-button-secondaryBackground);
   color: var(--vscode--settings-headerForeground);
   padding: .5rem 1rem;
@@ -22,12 +22,30 @@
     margin-bottom: .5rem;
 
     &:last-child {
+      .data_block__selector h3 {
+        font-size: 1rem;
+        font-weight: bold;
+        text-align: center;
+      }
+      
       margin-bottom: 0;
     }
   }
 }
 
-.data_controls__buttons {
+.data_block__selector {
+  h3 {
+    font-size: var(--vscode-font-size);
+    font-weight: bold;
+    text-align: left;
+  }
+
+  select {
+    padding: .5rem;
+  }
+}
+
+.data_block__buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -61,7 +79,7 @@
   }
 }
 
-.data_collection__list {
+.data_block__list {
   margin-top: 1rem;
 
   label {
@@ -76,7 +94,7 @@
     margin: 0;
   }
 
-  li {
+  li, .sortable_item {
     border-bottom: 1px solid var(--vscode-button-secondaryBackground);
     display: flex;
     justify-content: space-between;
@@ -89,8 +107,11 @@
 
     > div {
       display: flex;
-      justify-content: space-between;
       align-items: center;
+
+      svg {
+        margin-right: .5rem;
+      }
       
       button:last-child {
         margin-left: .5rem;
@@ -104,7 +125,7 @@
   }
 }
 
-.data_collection__list .metadata_field__label {
+.data_block__list .metadata_field__label {
   justify-content: space-between;
 
   > div {
@@ -117,7 +138,57 @@
   }
 }
 
-.data_collection__list__button {
+.data_block__record {
+  border-bottom: 1px solid var(--vscode-button-secondaryBackground);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: .5rem 0;
+
+  &.data_block__record_selected {
+    background-color: rgba(255, 255, 255, .1);
+    filter: brightness(100%);
+  }
+
+  span {
+    margin-right: .5rem;
+  }
+
+  > div {
+    display: flex;
+    align-items: center;
+
+    svg {
+      margin-right: .5rem;
+    }
+    
+    button:last-child {
+      margin-left: .5rem;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+    border-bottom: 0;
+  }
+
+  svg {
+    height: 1.25rem;
+    width: 1.25rem;
+  }
+}
+
+.drag_handler {
+
+  svg {
+    height: 1.25rem;
+    width: 1.25rem;
+    cursor: move;
+  }
+}
+
+.sortable_item button,
+.data_block__list__button {
   width: auto;
   background: none;
   color: inherit;
@@ -132,7 +203,7 @@
   }
 }
 
-.data_collection__list__button_icon {
+.data_block__list__button_icon {
   height: 1rem;
   width: 1rem;
 }

From cbb0d8f72b32856980b008562168fd356e269b17 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sat, 12 Feb 2022 17:58:59 +0100
Subject: [PATCH 17/62] Refactoring explorer view to listeners

---
 src/commands/Article.ts                       |   3 +-
 src/commands/Backers.ts                       |   3 +-
 src/commands/Dashboard.ts                     |  11 +-
 src/commands/Folders.ts                       |   2 +-
 src/commands/StatusListener.ts                |   5 +-
 src/commands/Template.ts                      |   2 +-
 src/explorerView/ExplorerView.ts              | 674 +-----------------
 src/extension.ts                              |  10 +-
 src/helpers/ArticleHelper.ts                  |  97 ++-
 src/helpers/ContentType.ts                    |   2 +-
 src/helpers/ImageHelper.ts                    |  54 ++
 src/helpers/MediaHelpers.ts                   |   7 +-
 src/helpers/PanelSettings.ts                  |  66 ++
 src/listeners/{ => dashboard}/BaseListener.ts |   8 +-
 .../{ => dashboard}/DashboardListener.ts      |  10 +-
 src/listeners/{ => dashboard}/DataListener.ts |  10 +-
 .../{ => dashboard}/ExtensionListener.ts      |   8 +-
 .../{ => dashboard}/MediaListener.ts          |  12 +-
 .../{ => dashboard}/PagesListener.ts          |  22 +-
 .../{ => dashboard}/SettingsListener.ts       |  12 +-
 .../{ => dashboard}/TelemetryListener.ts      |   4 +-
 src/listeners/{ => dashboard}/index.ts        |   1 -
 src/listeners/panel/ArticleListener.ts        |  27 +
 src/listeners/panel/BaseListener.ts           |  28 +
 src/listeners/panel/DataListener.ts           | 196 +++++
 src/listeners/panel/ExtensionListener.ts      |  83 +++
 src/listeners/panel/MediaListener.ts          |  43 ++
 src/listeners/panel/ScriptListener.ts         |  38 +
 src/listeners/panel/SettingsListener.ts       |  87 +++
 src/listeners/panel/TaxonomyListener.ts       | 130 ++++
 src/listeners/panel/index.ts                  |   8 +
 src/models/PanelSettings.ts                   |  12 +-
 src/models/index.ts                           |   3 +
 src/panelWebView/components/Metadata.tsx      |  10 +-
 34 files changed, 965 insertions(+), 723 deletions(-)
 create mode 100644 src/helpers/PanelSettings.ts
 rename src/listeners/{ => dashboard}/BaseListener.ts (61%)
 rename src/listeners/{ => dashboard}/DashboardListener.ts (70%)
 rename src/listeners/{ => dashboard}/DataListener.ts (89%)
 rename src/listeners/{ => dashboard}/ExtensionListener.ts (80%)
 rename src/listeners/{ => dashboard}/MediaListener.ts (89%)
 rename src/listeners/{ => dashboard}/PagesListener.ts (91%)
 rename src/listeners/{ => dashboard}/SettingsListener.ts (83%)
 rename src/listeners/{ => dashboard}/TelemetryListener.ts (77%)
 rename src/listeners/{ => dashboard}/index.ts (88%)
 create mode 100644 src/listeners/panel/ArticleListener.ts
 create mode 100644 src/listeners/panel/BaseListener.ts
 create mode 100644 src/listeners/panel/DataListener.ts
 create mode 100644 src/listeners/panel/ExtensionListener.ts
 create mode 100644 src/listeners/panel/MediaListener.ts
 create mode 100644 src/listeners/panel/ScriptListener.ts
 create mode 100644 src/listeners/panel/SettingsListener.ts
 create mode 100644 src/listeners/panel/TaxonomyListener.ts
 create mode 100644 src/listeners/panel/index.ts

diff --git a/src/commands/Article.ts b/src/commands/Article.ts
index 3fe20014..ac92a1f8 100644
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -13,6 +13,7 @@ import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { Telemetry } from '../helpers/Telemetry';
 import { ParsedFrontMatter } from '../parsers';
+import { MediaListener } from '../listeners/panel';
 
 
 export class Article {
@@ -337,7 +338,7 @@ export class Article {
     } as DashboardData);
 
     // Let the editor panel know you are selecting an image
-    ExplorerView.getInstance().getMediaSelection();
+    MediaListener.getMediaSelection();
 	}
 
   /**
diff --git a/src/commands/Backers.ts b/src/commands/Backers.ts
index 215a03eb..55ea0168 100644
--- a/src/commands/Backers.ts
+++ b/src/commands/Backers.ts
@@ -5,6 +5,7 @@ import { Credentials } from "../services/Credentials";
 import fetch from "node-fetch";
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { Dashboard } from './Dashboard';
+import { SettingsListener } from '../listeners/panel';
 
 export class Backers {
   private static creds: Credentials | null = null;
@@ -60,7 +61,7 @@ export class Backers {
       if (!prevData) {
         const explorerView = ExplorerView.getInstance();
         if (explorerView.visible) {
-          explorerView.getSettings();
+          SettingsListener.getSettings();
         }
     
         if (Dashboard.isOpen) {
diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts
index ac2f8a5b..a06c1b8d 100644
--- a/src/commands/Dashboard.ts
+++ b/src/commands/Dashboard.ts
@@ -1,5 +1,3 @@
-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";
@@ -10,7 +8,8 @@ import { WebviewHelper } from '@estruyf/vscode';
 import { DashboardData } from '../models/DashboardData';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { MediaLibrary } from '../helpers/MediaLibrary';
-import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener } from '../listeners';
+import { DashboardListener, MediaListener, SettingsListener, TelemetryListener, DataListener, PagesListener, ExtensionListener } from '../listeners/dashboard';
+import { MediaListener as PanelMediaListener } from '../listeners/panel'
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -115,8 +114,7 @@ export class Dashboard {
     Dashboard.webview.onDidChangeViewState(async () => {
       if (!this.webview?.visible) {
         Dashboard._viewData = undefined;
-        const panel = ExplorerView.getInstance(extensionUri);
-        panel.getMediaSelection();
+        PanelMediaListener.getMediaSelection();
 
         Dashboard.postWebviewMessage({ command: DashboardCommand.viewData, data: null });
       }
@@ -127,8 +125,7 @@ export class Dashboard {
     Dashboard.webview.onDidDispose(async () => {
       Dashboard.isDisposed = true;
       Dashboard._viewData = undefined;
-      const panel = ExplorerView.getInstance(extensionUri);
-      panel.getMediaSelection();
+      PanelMediaListener.getMediaSelection();
       await commands.executeCommand('setContext', CONTEXT.isDashboardOpen, false);
     });
 
diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts
index 47546262..c1efe2cb 100644
--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -12,7 +12,7 @@ import { format } from 'date-fns';
 import { Dashboard } from './Dashboard';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { MediaHelpers } from '../helpers/MediaHelpers';
-import { MediaListener, PagesListener } from '../listeners';
+import { MediaListener, PagesListener } from '../listeners/dashboard';
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
 import { Telemetry } from '../helpers/Telemetry';
 
diff --git a/src/commands/StatusListener.ts b/src/commands/StatusListener.ts
index e77b783e..7d1283df 100644
--- a/src/commands/StatusListener.ts
+++ b/src/commands/StatusListener.ts
@@ -4,6 +4,7 @@ import { ArticleHelper, SeoHelper, Settings } from '../helpers';
 import { ExplorerView } from '../explorerView/ExplorerView';
 import { DefaultFields } from '../constants';
 import { ContentType } from '../helpers/ContentType';
+import { DataListener } from '../listeners/panel';
 
 export class StatusListener {
   
@@ -58,7 +59,7 @@ export class StatusListener {
         
         const panel = ExplorerView.getInstance();
         if (panel && panel.visible) {
-          panel.pushMetadata(article!.data);
+          DataListener.pushMetadata(article!.data);
         }
 
         return;
@@ -68,7 +69,7 @@ export class StatusListener {
     } else {
       const panel = ExplorerView.getInstance();
       if (panel && panel.visible) {
-        panel.pushMetadata(null);
+        DataListener.pushMetadata(null);
       }
     }
 
diff --git a/src/commands/Template.ts b/src/commands/Template.ts
index 1e38c4f0..65d3b7f6 100644
--- a/src/commands/Template.ts
+++ b/src/commands/Template.ts
@@ -11,7 +11,7 @@ import { Project } from './Project';
 import { Folders } from './Folders';
 import { ContentType } from '../helpers/ContentType';
 import { ContentType as IContentType } from '../models';
-import { PagesListener } from '../listeners';
+import { PagesListener } from '../listeners/dashboard';
 import { extname } from 'path';
 import { Telemetry } from '../helpers/Telemetry';
 
diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts
index 1384bc99..7d5a97b3 100644
--- a/src/explorerView/ExplorerView.ts
+++ b/src/explorerView/ExplorerView.ts
@@ -1,32 +1,12 @@
-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, SETTING_TAXONOMY_CUSTOM, CONTEXT, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, TelemetryEvent, SETTINGS_DATA_TYPES } 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, ThemeIcon } from "vscode";
-import { ArticleHelper, Settings } from "../helpers";
+import { ArticleListener, ExtensionListener, MediaListener, ScriptListener, TaxonomyListener,  DataListener, SettingsListener } from './../listeners/panel';
+import { TelemetryEvent } from '../constants';
+import { CancellationToken, Disposable, Uri, Webview, WebviewView, WebviewViewProvider, WebviewViewResolveContext, window } from "vscode";
+import { Logger, Settings } from "../helpers";
 import { Command } from "../panelWebView/Command";
-import { CommandToCode } from '../panelWebView/CommandToCode';
-import { Article } from '../commands';
 import { TagType } from '../panelWebView/TagType';
-import { CustomTaxonomyData, DraftField, Field, ScriptType, TaxonomyType } from '../models';
-import { exec } from 'child_process';
-import { fromMarkdown } from 'mdast-util-from-markdown';
-import { Content } from 'mdast';
-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';
 import { WebviewHelper } from '@estruyf/vscode';
 import { Extension } from '../helpers/Extension';
-import { Dashboard } from '../commands/Dashboard';
-import { ImageHelper } from '../helpers/ImageHelper';
-import { CustomScript } from '../helpers/CustomScript';
-import { Link, Parent } from 'mdast-util-from-markdown/lib';
 import { Telemetry } from '../helpers/Telemetry';
-import { DataType } from '../models/DataType';
-
-const FILE_LIMIT = 10;
 
 export class ExplorerView implements WebviewViewProvider, Disposable {
   public static readonly viewType = "frontMatter.explorer";
@@ -65,6 +45,10 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     } 
 	}
 
+  public getWebview() {
+    return this.panel?.webview;
+  }
+
   /**
    * Default resolve webview panel
    * @param webviewView 
@@ -87,122 +71,15 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     );
     
     webviewView.webview.onDidReceiveMessage(async (msg) => {
-      switch(msg.command) {
-        case CommandToCode.getData:
-          this.getSettings();
-          this.getFoldersAndFiles();
-          this.getFileData();
-          break;
-        case CommandToCode.updateSlug:
-          Article.generateSlug();
-          break;
-        case CommandToCode.updateLastMod:
-          Article.setLastModifiedDate();
-          break;
-        case CommandToCode.publish:
-          Article.toggleDraft();
-          break;
-        case CommandToCode.updateTags:
-          this.updateTags(TagType.tags, msg.data?.values || [], msg.data?.parents || []);
-          break;
-        case CommandToCode.updateCategories:
-          this.updateTags(TagType.categories, msg.data?.values || [], msg.data?.parents || []);
-          break;
-        case CommandToCode.updateKeywords:
-          this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || []);
-          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:
-          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") {
-            commands.executeCommand('remote-wsl.revealInExplorer');
-          } else {
-            commands.executeCommand('revealFileInOS');
-          }
-          break;
-        case CommandToCode.runCustomScript:
-          this.runCustomScript(msg);
-          break;
-        case CommandToCode.openProject:
-          const wsFolder = Folders.getWorkspaceFolder();
-          if (wsFolder) {
-            const wsPath = wsFolder.fsPath;
-            if (os.type() === "Darwin") {
-              exec(`open ${wsPath}`);
-            } else if (os.type() === "Windows_NT") {
-              exec(`explorer ${wsPath}`);
-            } else if (os.type() === "Linux" && vscodeEnv.remoteName?.toLowerCase() === "wsl") {
-              exec('explorer.exe `wslpath -w "$PWD"`');
-            } else {
-              exec(`xdg-open ${wsPath}`);
-            }
-          }
-          break;
-        case CommandToCode.initProject:
-          await commands.executeCommand(COMMAND_NAME.init);
-          this.getSettings();
-          break;
-        case CommandToCode.createContent:
-          await commands.executeCommand(COMMAND_NAME.createContent);
-          break;
-        case CommandToCode.createTemplate:
-          await commands.executeCommand(COMMAND_NAME.createTemplate);
-          break;
-        case CommandToCode.updateModifiedUpdating:
-          this.updateSetting(SETTING_AUTO_UPDATE_DATE, msg.data || false);
-          break;
-        case CommandToCode.toggleWritingSettings:
-          this.toggleWritingSettings();
-          break;
-        case CommandToCode.updateFmHighlight:
-          this.updateSetting(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, (msg.data !== null && msg.data !== undefined) ? msg.data : false);
-          break;
-        case CommandToCode.toggleCenterMode:
-          await commands.executeCommand(`workbench.action.toggleCenteredLayout`);
-          break;
-        case CommandToCode.openPreview:
-          await commands.executeCommand(COMMAND_NAME.preview);
-          break;
-        case CommandToCode.openDashboard:
-          await commands.executeCommand(COMMAND_NAME.dashboard);
-          break;
-        case CommandToCode.updatePreviewUrl:
-          this.updateSetting(SETTING_PREVIEW_HOST, msg.data || "");
-          break;
-        case CommandToCode.openInEditor:
-          openFileInEditor(msg.data);
-          break;
-        case CommandToCode.updateMetadata:
-          this.updateMetadata(msg.data);
-          break;
-        case CommandToCode.selectImage:
-          await commands.executeCommand(COMMAND_NAME.dashboard, {
-            type: "media",
-            data: msg.data
-          } as DashboardData);
-          this.getMediaSelection();
-          break;
-        case CommandToCode.frameworkCommand:
-          this.openTerminalWithCommand(msg.data.command);
-          break;
-        case CommandToCode.updateStartCommand:
-          await this.updateSetting(SETTINGS_FRAMEWORK_START, msg.data || "");
-          break;
-      }
+      Logger.info(`Receiving message from webview to panel: ${msg.command}`);
+
+      ArticleListener.process(msg);
+      DataListener.process(msg);
+      ExtensionListener.process(msg);
+      MediaListener.process(msg);
+      ScriptListener.process(msg);
+      SettingsListener.process(msg);
+      TaxonomyListener.process(msg);
     });
 
     webviewView.onDidChangeVisibility(() => {
@@ -213,67 +90,24 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     });
 
     window.onDidChangeActiveTextEditor(() => {
-      this.postWebviewMessage({ command: Command.loading, data: true });
+      this.sendMessage({ command: Command.loading, data: true });
+
       if (this.visible) {
-        this.getFileData();
+        DataListener.getFileData();
       }
     }, this);
 
     Settings.onConfigChange((global?: any) => {
-      this.getSettings();
+      SettingsListener.getSettings();
     });
   }
 
   /**
-   * Triggers a metadata change in the panel
-   * @param metadata 
+   * Post data to the panel
+   * @param msg 
    */
-  public pushMetadata(metadata: any) {
-    const wsFolder = Folders.getWorkspaceFolder();
-    const filePath = window.activeTextEditor?.document.uri.fsPath;
-    const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
-    const contentTypes = Settings.get<string>(SETTING_TAXONOMY_CONTENT_TYPES);
-    
-    const articleDetails = this.getArticleDetails();
-
-    if (articleDetails) {
-      metadata.articleDetails = articleDetails;
-    }
-
-    let updatedMetadata = Object.assign({}, metadata);
-    if (commaSeparated) {
-      for (const key of commaSeparated) {
-        if (updatedMetadata[key] && typeof updatedMetadata[key] === "string") {
-          updatedMetadata[key] = updatedMetadata[key].split(",").map((s: string) => s.trim());
-        }
-      }
-    }
-
-    const keys = Object.keys(updatedMetadata);
-    if (keys.length > 0) {
-      updatedMetadata.filePath = filePath;
-    }
-
-    if (keys.length > 0 && contentTypes && wsFolder) {
-      // Get the current content type
-      const contentType = ArticleHelper.getContentType(updatedMetadata);
-      if (contentType) {
-        this.processImageFields(updatedMetadata, contentType.fields)
-      }
-    }
-
-    // Check slug
-    if (!updatedMetadata[DefaultFields.Slug]) {
-      const slug = Article.getSlug();
-
-      if (slug) {
-        updatedMetadata[DefaultFields.Slug] = slug;
-      }
-    }
-    
-    this.postWebviewMessage({ command: Command.metadata, data: {
-      ...updatedMetadata
-    }});
+  public sendMessage(msg: { command: Command, data?: any }) {
+    this.panel?.webview?.postMessage(msg);
   }
 
   /**
@@ -282,9 +116,9 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
    */
   public triggerInputFocus(tagType: TagType) {
     if (tagType === TagType.tags) {
-      this.postWebviewMessage({ command: Command.focusOnTags });
+      this.sendMessage({ command: Command.focusOnTags });
     } else {
-      this.postWebviewMessage({ command: Command.focusOnCategories });
+      this.sendMessage({ command: Command.focusOnCategories });
     }
   }
 
@@ -292,396 +126,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
    * Trigger all sections to close
    */
   public collapseAll() {
-    this.postWebviewMessage({ command: Command.closeSections });
-  }
-
-  /**
-   * Update the metadata of the article
-   */
-  public async updateMetadata({field, parents, value }: { field: string, value: any, parents?: string[], fieldData?: { multiple: boolean, value: string[] } }) {
-    if (!field) {
-      return;
-    }
-
-    const editor = window.activeTextEditor;
-    if (!editor) {
-      return;
-    }
-
-    const article = ArticleHelper.getFrontMatter(editor);
-    if (!article) {
-      return;
-    }
-
-    const contentType = ArticleHelper.getContentType(article.data);
-    const dateFields = contentType.fields.filter((field) => field.type === "datetime");
-    const imageFields = contentType.fields.filter((field) => field.type === "image" && field.multiple);
-
-    // Support multi-level fields
-    let parentObj = article.data;
-    for (const parent of parents || []) {
-      parentObj = parentObj[parent];
-    }
-
-    for (const dateField of dateFields) {
-      if ((field === dateField.name) && value) {
-        parentObj[field] = Article.formatDate(new Date(value));
-      } else if (!imageFields.find(f => f.name === field)) {
-        // Only override the field data if it is not an multiselect image field
-        parentObj[field] = value;
-      }
-    }
-
-    for (const imageField of imageFields) {
-      if (field === imageField.name) {
-        // If value is an array, it means it comes from the explorer view itself (deletion)
-        if (Array.isArray(value)) {
-          parentObj[field] = value || [];
-        } else { // Otherwise it is coming from the media dashboard (addition)
-          let fieldValue = parentObj[field];
-          if (fieldValue && !Array.isArray(fieldValue)) {
-            fieldValue = [fieldValue];
-          }
-          const crntData = Object.assign([], fieldValue);
-          const allRelPaths = [...(crntData || []), value];
-          parentObj[field] = [...new Set(allRelPaths)].filter(f => f);
-        }
-      }
-    }
-    
-    ArticleHelper.update(editor, article);
-    this.pushMetadata(article.data);
-  }
-
-  /**
-   * Open a terminal and run the passed command
-   * @param command 
-   */
-  private openTerminalWithCommand(command: string) {
-    if (command) {
-      let terminal = window.activeTerminal;
-  
-      if (!terminal || (terminal && terminal.state.isInteractedWith === true)) {
-        terminal = window.createTerminal({
-          name: `Starting local server`,
-          iconPath: new ThemeIcon('server-environment'),
-          message: `Starting local server`,
-        });
-      }
-  
-      if (terminal) {
-        terminal.sendText(command);
-        terminal.show(false);
-      }
-    }
-  }
-
-  /**
-   * Run a custom script
-   * @param msg 
-   */
-  private runCustomScript(msg: { command: string, data: any}) {
-    const scripts: ICustomScript[] | undefined = Settings.get(SETTING_CUSTOM_SCRIPTS);
-
-    if (msg?.data?.title && msg?.data?.script && scripts) {
-      const customScript = scripts.find((s: ICustomScript) => s.title === msg.data.title);
-      if (customScript?.script && customScript?.title) {
-        CustomScript.run(customScript);
-      }
-    }
-  }
-
-  /**
-   * Return the media selection
-   */
-  public async getMediaSelection() {
-    this.postWebviewMessage({
-      command: Command.mediaSelectionData,
-      data: Dashboard.viewData
-    });
-  }
-
-  /**
-   * Retrieve the extension settings
-   */
-  public async getSettings() {
-    this.postWebviewMessage({
-      command: Command.settings,
-      data: {
-        seo: {
-          title: Settings.get(SETTING_SEO_TITLE_LENGTH) as number || -1,
-          slug: Settings.get(SETTING_SEO_SLUG_LENGTH) as number || -1,
-          description: Settings.get(SETTING_SEO_DESCRIPTION_LENGTH) as number || -1,
-          content: Settings.get(SETTING_SEO_CONTENT_MIN_LENGTH) as number || -1,
-          descriptionField: Settings.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description
-        },
-        slug: {
-          prefix: Settings.get(SETTING_SLUG_PREFIX) || "",
-          suffix: Settings.get(SETTING_SLUG_SUFFIX) || "",
-          updateFileName: !!Settings.get<boolean>(SETTING_SLUG_UPDATE_FILE_NAME),
-        },
-        date: {
-          format: Settings.get(SETTING_DATE_FORMAT)
-        },
-        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<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,
-        fmHighlighting: Settings.get(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT),
-        preview: Preview.getSettings(),
-        commaSeparatedFields: Settings.get(SETTING_COMMA_SEPARATED_FIELDS) || [],
-        contentTypes: Settings.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
-        dashboardViewData: Dashboard.viewData,
-        draftField: Settings.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
-        isBacker: await Extension.getInstance().getState<boolean | undefined>(CONTEXT.backer, 'global'),
-        framework: Settings.get<string>(SETTINGS_FRAMEWORK_ID),
-        commands: {
-          start: Settings.get<string>(SETTINGS_FRAMEWORK_START)
-        },
-        dataTypes: Settings.get<DataType[]>(SETTINGS_DATA_TYPES),
-      } as PanelSettings
-    });
-  }
-
-  /**
-   * Retrieve the information about the registered folders and its files
-   */
-  public async getFoldersAndFiles() {
-    this.postWebviewMessage({
-      command: Command.folderInfo,
-      data: await Folders.getInfo(FILE_LIMIT) || null
-    });
-  }
-
-  /**
-   * Process the image fields in the content type
-   * @param updatedMetadata 
-   * @param fields 
-   * @param parents 
-   */
-  private processImageFields(updatedMetadata: any, fields: Field[], parents: string[] = []) {
-    const imageFields = fields.filter((field) => field.type === "image");
-    
-    // Support multi-level fields
-    let parentObj = updatedMetadata;
-    for (const parent of parents || []) {
-      parentObj = parentObj[parent];
-    }
-
-    // Process image fields
-    if (parentObj) {
-      for (const field of imageFields) {
-        if (parentObj[field.name]) {
-          const imageData = ImageHelper.allRelToAbs(field, parentObj[field.name])
-  
-          if (imageData) {
-            if (field.multiple && imageData instanceof Array) {
-              const preview = imageData.map(preview => preview && preview.absPath ? ({ 
-                ...preview,
-                webviewUrl: this.panel?.webview.asWebviewUri(preview.absPath).toString()
-              }) : null);
-  
-              parentObj[field.name] = preview || [];
-            } else if (!field.multiple && !Array.isArray(imageData) && imageData.absPath) {
-              const preview = this.panel?.webview.asWebviewUri(imageData.absPath);
-              parentObj[field.name] = {
-                ...imageData,
-                webviewUrl: preview ? preview.toString() : null
-              };
-            }
-          } else {
-            parentObj[field.name] = field.multiple ? [] : "";
-          }
-        }          
-      }
-  
-      // Check if there are sub-fields to process
-      const subFields = fields.filter((field) => field.type === "fields");
-      if (subFields?.length > 0) {
-        for (const field of subFields) {
-          this.processImageFields(updatedMetadata, field.fields || [], [...parents, field.name]);
-        }
-      }
-    }
-  }
-
-  /**
-   * Retrieve the file its front matter
-   */
-  private getFileData() {
-    const editor = window.activeTextEditor;
-    if (!editor) {
-      return "";
-    }
-
-    const article = ArticleHelper.getFrontMatter(editor);
-    if (article?.data) {
-      this.pushMetadata(article!.data);
-    }
-  }
-
-  /**
-   * Update the tags in the current document
-   * @param tagType 
-   * @param values 
-   */
-  private updateTags(tagType: TagType, values: string[], parents: string[]) {
-    const editor = window.activeTextEditor;
-    if (!editor) {
-      return "";
-    }
-
-    const article = ArticleHelper.getFrontMatter(editor);
-    if (article && article.data) {
-
-      // Support multi-level fields
-      let parentObj = article.data;
-      for (const parent of parents || []) {
-        parentObj = parentObj[parent];
-      }
-
-      parentObj[tagType.toLowerCase()] = values || [];
-      ArticleHelper.update(editor, article);
-      this.pushMetadata(article!.data);
-    }
-  }
-
-  /**
-   * 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) {
-
-      // Support multi-level fields
-      let parentObj = article.data;
-      for (const parent of data.parents || []) {
-        parentObj = parentObj[parent];
-      }
-
-      parentObj[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 
-   * @param value 
-   */
-  private async addTags(tagType: TagType, value: string) {
-    if (value) {
-      let options = tagType === TagType.tags ? Settings.get<string[]>(SETTING_TAXONOMY_TAGS, true) : Settings.get<string[]>(SETTING_TAXONOMY_CATEGORIES, true);
-
-      if (!options) {
-        options = [];
-      }
-
-      options.push(value);
-      const taxType = tagType === TagType.tags ? TaxonomyType.Tag : TaxonomyType.Category;
-      await Settings.updateTaxonomy(taxType, options);
-    }
-  }
-
-  /**
-   * Get article details
-   */
-  private getArticleDetails() {
-    const baseUrl = Settings.get<string>(SETTING_SITE_BASEURL);
-    const editor = window.activeTextEditor;
-    if (!editor) {
-      return null;
-    }
-
-    if (!ArticleHelper.isMarkdownFile()) {
-      return null;
-    }
-
-    const article = ArticleHelper.getFrontMatter(editor);
-
-    if (article && article.content) {
-      let content = article.content;
-      content = content.replace(/({{(.*?)}})/g, ''); // remove hugo shortcodes
-      
-      const mdTree = fromMarkdown(content);
-      const elms: Parent[] | Link[] = this.getAllElms(mdTree);
-
-      const headings = elms.filter(node => node.type === 'heading');
-      const paragraphs = elms.filter(node => node.type === 'paragraph').length;
-      const images = elms.filter(node => node.type === 'image').length;
-      const links: string[] = elms.filter(node => node.type === 'link').map(node => (node as Link).url);
-
-      const internalLinks = links.filter(link => !link.startsWith('http') || (baseUrl && link.toLowerCase().includes((baseUrl || "").toLowerCase()))).length;
-      let externalLinks = links.filter(link => link.startsWith('http'));
-      if (baseUrl) {
-        externalLinks = externalLinks.filter(link => !link.toLowerCase().includes(baseUrl.toLowerCase()));
-      }
-
-      const headers = [];
-      for (const header of headings) { 
-        const text = header?.children?.filter((node: any) => node.type === 'text').map((node: any) => node.value).join(" ");
-        if (text) {
-          headers.push(text);
-        }
-      }
-      
-      const wordCount = this.wordCount(0, mdTree);
-
-      return {
-        headings: headings.length,
-        headingsText: headers,
-        paragraphs,
-        images,
-        internalLinks,
-        externalLinks: externalLinks.length,
-        wordCount,
-        content: article.content
-      };
-    }
-
-    return null;
-  }
-
-  private getAllElms(node: Content | any, allElms?: any[]): any[] {
-    if (!allElms) {
-      allElms = [];
-    }
-
-    if (node.children?.length > 0) {
-      for (const child of node.children) {
-        allElms.push(Object.assign({}, child));
-        this.getAllElms(child, allElms);
-      }
-    }
-
-    return allElms;
+    this.sendMessage({ command: Command.closeSections });
   }
 
   private counts(acc: any, node: any) {
@@ -695,69 +140,6 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     );
   }
 
-  /**
-   * Get the word count for the current document
-   */
-  private wordCount(count: number, node: Content | any) {
-    if (node.type === "text") {
-      return count + node.value.split(" ").length;
-    } else {
-      return (node.children || []).reduce((childCount: number, childNode: any) => this.wordCount(childCount, childNode), count);
-    }
-  }
-
-  /**
-   * Toggle the writing settings
-   */
-  private async toggleWritingSettings() {
-    const config = workspace.getConfiguration("", { languageId: "markdown" });
-    const enabled = this.isWritingSettingsEnabled();
-    
-    await config.update("editor.fontSize", enabled ? undefined : 14, false, true);
-    await config.update("editor.lineHeight", enabled ? undefined : 26, false, true);
-    await config.update("editor.wordWrap", enabled ? undefined : "wordWrapColumn", false, true);
-    await config.update("editor.wordWrapColumn", enabled ? undefined : 64, false, true);
-    await config.update("editor.lineNumbers", enabled ? undefined : "off", false, true);
-    await config.update("editor.quickSuggestions", enabled ? undefined : false, false, true);
-    await config.update("editor.minimap.enabled", enabled ? undefined : false, false, true);
-
-    this.getSettings();
-  }
-
-  /**
-   * Check if the writing settings are enabled
-   */
-  private isWritingSettingsEnabled() {
-    const config = workspace.getConfiguration("", { languageId: "markdown" });
-    
-    const fontSize = config.get("editor.fontSize");
-    const lineHeight = config.get("editor.lineHeight");
-    const wordWrap = config.get("editor.wordWrap");
-    const wordWrapColumn = config.get("editor.wordWrapColumn");
-    const lineNumbers = config.get("editor.lineNumbers");
-    const quickSuggestions = config.get<boolean>("editor.quickSuggestions");
-
-    return fontSize && lineHeight && wordWrap && wordWrapColumn && lineNumbers && quickSuggestions !== undefined;
-  }
-
-  /**
-   * Updates a setting and refreshes the retrieved settings
-   * @param setting 
-   * @param value 
-   */
-  private async updateSetting(setting: string, value: any) {
-    await Settings.update(setting, value);
-    this.getSettings();
-  }
-
-  /**
-   * Post data to the panel
-   * @param msg 
-   */
-  private postWebviewMessage(msg: { command: Command, data?: any }) {
-    this.panel?.webview?.postMessage(msg);
-  }
-
   /**
    * Retrieve the webview HTML contents
    * @param webView 
diff --git a/src/extension.ts b/src/extension.ts
index 0381b7af..50b26c42 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -19,8 +19,9 @@ import { Content } from './commands/Content';
 import ContentProvider from './providers/ContentProvider';
 import { Wysiwyg } from './commands/Wysiwyg';
 import { Diagnostics } from './commands/Diagnostics';
-import { PagesListener } from './listeners';
+import { PagesListener } from './listeners/dashboard';
 import { Backers } from './commands/Backers';
+import { DataListener, SettingsListener } from './listeners/panel';
 
 let frontMatterStatusBar: vscode.StatusBarItem;
 let statusDebouncer: { (fnc: any, time: number): void; };
@@ -171,9 +172,8 @@ export async function activate(context: vscode.ExtensionContext) {
 		Template.init();
 		Preview.init();
 
-		const exView = ExplorerView.getInstance();
-		exView.getSettings();
-		exView.getFoldersAndFiles();	
+		SettingsListener.getSettings();
+		DataListener.getFoldersAndFiles();	
 		MarkdownFoldingProvider.triggerHighlighting();
 	});
 
@@ -197,7 +197,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	subscriptions.push(vscode.workspace.onDidSaveTextDocument((doc: vscode.TextDocument) => {
 		if (doc.languageId === 'markdown') {
 			// Optimize the list of recently changed files
-			ExplorerView.getInstance().getFoldersAndFiles();
+			DataListener.getFoldersAndFiles();
 		}
 	}));
 
diff --git a/src/helpers/ArticleHelper.ts b/src/helpers/ArticleHelper.ts
index bb84db7b..e950659f 100644
--- a/src/helpers/ArticleHelper.ts
+++ b/src/helpers/ArticleHelper.ts
@@ -2,7 +2,7 @@ import { MarkdownFoldingProvider } from './../providers/MarkdownFoldingProvider'
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ContentType';
 import * as vscode from 'vscode';
 import * as fs from "fs";
-import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTINGS_CONTENT_PLACEHOLDERS, SETTINGS_CONTENT_SUPPORTED_FILETYPES, 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, SETTINGS_CONTENT_PLACEHOLDERS, SETTINGS_CONTENT_SUPPORTED_FILETYPES, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_SITE_BASEURL, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { DumpOptions } from 'js-yaml';
 import { FrontMatterParser, ParsedFrontMatter } from '../parsers';
 import { Extension, Logger, Settings, SlugHelper } from '.';
@@ -17,6 +17,9 @@ import { ContentType } from '../models';
 import { DateHelper } from './DateHelper';
 import { DiagnosticSeverity, Position, window, Range } from 'vscode';
 import { DEFAULT_FILE_TYPES } from '../constants/DefaultFileTypes';
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { Link, Parent } from 'mdast-util-from-markdown/lib';
+import { Content } from 'mdast';
 
 export class ArticleHelper {
   private static notifiedFiles: string[] = [];
@@ -347,6 +350,98 @@ export class ArticleHelper {
     return value;
   }
 
+  /**
+   * Get the details of the current article
+   * @returns 
+   */
+  public static getDetails() {
+    const baseUrl = Settings.get<string>(SETTING_SITE_BASEURL);
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return null;
+    }
+
+    if (!ArticleHelper.isMarkdownFile()) {
+      return null;
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+
+    if (article && article.content) {
+      let content = article.content;
+      content = content.replace(/({{(.*?)}})/g, ''); // remove hugo shortcodes
+      
+      const mdTree = fromMarkdown(content);
+      const elms: Parent[] | Link[] = this.getAllElms(mdTree);
+
+      const headings = elms.filter(node => node.type === 'heading');
+      const paragraphs = elms.filter(node => node.type === 'paragraph').length;
+      const images = elms.filter(node => node.type === 'image').length;
+      const links: string[] = elms.filter(node => node.type === 'link').map(node => (node as Link).url);
+
+      const internalLinks = links.filter(link => !link.startsWith('http') || (baseUrl && link.toLowerCase().includes((baseUrl || "").toLowerCase()))).length;
+      let externalLinks = links.filter(link => link.startsWith('http'));
+      if (baseUrl) {
+        externalLinks = externalLinks.filter(link => !link.toLowerCase().includes(baseUrl.toLowerCase()));
+      }
+
+      const headers = [];
+      for (const header of headings) { 
+        const text = header?.children?.filter((node: any) => node.type === 'text').map((node: any) => node.value).join(" ");
+        if (text) {
+          headers.push(text);
+        }
+      }
+      
+      const wordCount = this.wordCount(0, mdTree);
+
+      return {
+        headings: headings.length,
+        headingsText: headers,
+        paragraphs,
+        images,
+        internalLinks,
+        externalLinks: externalLinks.length,
+        wordCount,
+        content: article.content
+      };
+    }
+
+    return null;
+  }
+
+  /**
+   * Retrieve all the elements from the markdown content
+   * @param node 
+   * @param allElms 
+   * @returns 
+   */
+  private static getAllElms(node: Content | any, allElms?: any[]): any[] {
+    if (!allElms) {
+      allElms = [];
+    }
+
+    if (node.children?.length > 0) {
+      for (const child of node.children) {
+        allElms.push(Object.assign({}, child));
+        this.getAllElms(child, allElms);
+      }
+    }
+
+    return allElms;
+  }
+
+  /**
+   * Get the word count for the current document
+   */
+  private static wordCount(count: number, node: Content | any) {
+    if (node.type === "text") {
+      return count + node.value.split(" ").length;
+    } else {
+      return (node.children || []).reduce((childCount: number, childNode: any) => this.wordCount(childCount, childNode), count);
+    }
+  }
+
   /**
    * Parse a markdown file and its front matter
    * @param fileContents 
diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts
index 6fbfd6ee..7ef56c7c 100644
--- a/src/helpers/ContentType.ts
+++ b/src/helpers/ContentType.ts
@@ -1,4 +1,4 @@
-import { PagesListener } from './../listeners/PagesListener';
+import { PagesListener } from './../listeners/dashboard';
 import { ArticleHelper, Settings } from ".";
 import { SETTINGS_CONTENT_DRAFT_FIELD, SETTING_TAXONOMY_CONTENT_TYPES, TelemetryEvent } from "../constants";
 import { ContentType as IContentType, DraftField, Field } from '../models';
diff --git a/src/helpers/ImageHelper.ts b/src/helpers/ImageHelper.ts
index 3bb402ac..adebc19f 100644
--- a/src/helpers/ImageHelper.ts
+++ b/src/helpers/ImageHelper.ts
@@ -1,3 +1,4 @@
+import { ExplorerView } from './../explorerView/ExplorerView';
 import { Uri, window } from 'vscode'; 
 import { dirname, join } from "path";
 import { Field } from '../models';
@@ -78,4 +79,57 @@ export class ImageHelper {
     }
     return relPath;
   }
+
+  /**
+   * Process the image fields in the content type
+   * @param updatedMetadata 
+   * @param fields 
+   * @param parents 
+   */
+  public static processImageFields(updatedMetadata: any, fields: Field[], parents: string[] = []) {
+    const imageFields = fields.filter((field) => field.type === "image");
+    const panel = ExplorerView.getInstance();
+    
+    // Support multi-level fields
+    let parentObj = updatedMetadata;
+    for (const parent of parents || []) {
+      parentObj = parentObj[parent];
+    }
+
+    // Process image fields
+    if (parentObj) {
+      for (const field of imageFields) {
+        if (parentObj[field.name]) {
+          const imageData = ImageHelper.allRelToAbs(field, parentObj[field.name])
+  
+          if (imageData) {
+            if (field.multiple && imageData instanceof Array) {
+              const preview = imageData.map(preview => preview && preview.absPath ? ({ 
+                ...preview,
+                webviewUrl: panel.getWebview()?.asWebviewUri(preview.absPath).toString()
+              }) : null);
+  
+              parentObj[field.name] = preview || [];
+            } else if (!field.multiple && !Array.isArray(imageData) && imageData.absPath) {
+              const preview = panel.getWebview()?.asWebviewUri(imageData.absPath);
+              parentObj[field.name] = {
+                ...imageData,
+                webviewUrl: preview ? preview.toString() : null
+              };
+            }
+          } else {
+            parentObj[field.name] = field.multiple ? [] : "";
+          }
+        }          
+      }
+  
+      // Check if there are sub-fields to process
+      const subFields = fields.filter((field) => field.type === "fields");
+      if (subFields?.length > 0) {
+        for (const field of subFields) {
+          this.processImageFields(updatedMetadata, field.fields || [], [...parents, field.name]);
+        }
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/helpers/MediaHelpers.ts b/src/helpers/MediaHelpers.ts
index 16c7eb69..13f2800c 100644
--- a/src/helpers/MediaHelpers.ts
+++ b/src/helpers/MediaHelpers.ts
@@ -11,6 +11,7 @@ import imageSize from "image-size";
 import { EditorHelper } from "@estruyf/vscode";
 import { ExplorerView } from "../explorerView/ExplorerView";
 import { SortOption } from "../dashboardWebView/constants/SortOption";
+import { DataListener, MediaListener } from "../listeners/panel";
 
 
 export class MediaHelpers {
@@ -301,10 +302,10 @@ export class MediaHelpers {
             }            
           });
         }
-        panel.getMediaSelection();
+        MediaListener.getMediaSelection();
       } else {
-        panel.getMediaSelection();
-        panel.updateMetadata({field: data.fieldName, value: data.image, parents: data.parents });
+        MediaListener.getMediaSelection();
+        DataListener.updateMetadata({field: data.fieldName, value: data.image, parents: data.parents });
       }
     }
   }
diff --git a/src/helpers/PanelSettings.ts b/src/helpers/PanelSettings.ts
new file mode 100644
index 00000000..f5a3c3b4
--- /dev/null
+++ b/src/helpers/PanelSettings.ts
@@ -0,0 +1,66 @@
+import { workspace } from "vscode"
+import { Extension, Settings } from "."
+import { Dashboard } from "../commands/Dashboard"
+import { Preview } from "../commands/Preview"
+import { Template } from "../commands/Template"
+import { CONTEXT, DefaultFields, SETTINGS_CONTENT_DRAFT_FIELD, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_DATA_TYPES, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_CUSTOM_SCRIPTS, SETTING_DATE_FORMAT, SETTING_PANEL_FREEFORM, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_SLUG_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TAXONOMY_CUSTOM, SETTING_TAXONOMY_TAGS } from "../constants"
+import { CustomScript, DataType, DraftField, PanelSettings as IPanelSettings, ScriptType } from "../models"
+
+export class PanelSettings {
+
+  public static async get(): Promise<IPanelSettings> {
+    return {
+      seo: {
+        title: Settings.get(SETTING_SEO_TITLE_LENGTH) as number || -1,
+        slug: Settings.get(SETTING_SEO_SLUG_LENGTH) as number || -1,
+        description: Settings.get(SETTING_SEO_DESCRIPTION_LENGTH) as number || -1,
+        content: Settings.get(SETTING_SEO_CONTENT_MIN_LENGTH) as number || -1,
+        descriptionField: Settings.get(SETTING_SEO_DESCRIPTION_FIELD) as string || DefaultFields.Description
+      },
+      slug: {
+        prefix: Settings.get(SETTING_SLUG_PREFIX) || "",
+        suffix: Settings.get(SETTING_SLUG_SUFFIX) || "",
+        updateFileName: !!Settings.get<boolean>(SETTING_SLUG_UPDATE_FILE_NAME),
+      },
+      date: {
+        format: Settings.get<string>(SETTING_DATE_FORMAT) || ""
+      },
+      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<CustomScript[]>(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,
+      fmHighlighting: Settings.get(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT),
+      preview: Preview.getSettings(),
+      commaSeparatedFields: Settings.get(SETTING_COMMA_SEPARATED_FIELDS) || [],
+      contentTypes: Settings.get(SETTING_TAXONOMY_CONTENT_TYPES) || [],
+      dashboardViewData: Dashboard.viewData,
+      draftField: Settings.get<DraftField>(SETTINGS_CONTENT_DRAFT_FIELD),
+      isBacker: await Extension.getInstance().getState<boolean | undefined>(CONTEXT.backer, 'global'),
+      framework: Settings.get<string>(SETTINGS_FRAMEWORK_ID),
+      commands: {
+        start: Settings.get<string>(SETTINGS_FRAMEWORK_START)
+      },
+      dataTypes: Settings.get<DataType[]>(SETTINGS_DATA_TYPES),
+    }
+  }
+
+  /**
+   * Check if the writing settings are enabled
+   */
+  public static isWritingSettingsEnabled(): boolean {
+    const config = workspace.getConfiguration("", { languageId: "markdown" });
+    
+    const fontSize = config.get("editor.fontSize");
+    const lineHeight = config.get("editor.lineHeight");
+    const wordWrap = config.get("editor.wordWrap");
+    const wordWrapColumn = config.get("editor.wordWrapColumn");
+    const lineNumbers = config.get("editor.lineNumbers");
+    const quickSuggestions = config.get<boolean>("editor.quickSuggestions");
+
+    return( fontSize && lineHeight && wordWrap && wordWrapColumn && lineNumbers && quickSuggestions !== undefined) as boolean;
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/BaseListener.ts b/src/listeners/dashboard/BaseListener.ts
similarity index 61%
rename from src/listeners/BaseListener.ts
rename to src/listeners/dashboard/BaseListener.ts
index 006885ea..bcdab00f 100644
--- a/src/listeners/BaseListener.ts
+++ b/src/listeners/dashboard/BaseListener.ts
@@ -1,7 +1,7 @@
-import { Dashboard } from "../commands/Dashboard";
-import { DashboardCommand } from "../dashboardWebView/DashboardCommand";
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
-import { Logger } from "../helpers/Logger";
+import { Dashboard } from "../../commands/Dashboard";
+import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { Logger } from "../../helpers/Logger";
 
 
 export abstract class BaseListener {
diff --git a/src/listeners/DashboardListener.ts b/src/listeners/dashboard/DashboardListener.ts
similarity index 70%
rename from src/listeners/DashboardListener.ts
rename to src/listeners/dashboard/DashboardListener.ts
index c737fe42..8c10aad2 100644
--- a/src/listeners/DashboardListener.ts
+++ b/src/listeners/dashboard/DashboardListener.ts
@@ -1,8 +1,8 @@
-import { Dashboard } from "../commands/Dashboard";
-import { ExtensionState } from "../constants";
-import { DashboardCommand } from "../dashboardWebView/DashboardCommand";
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
-import { Extension } from "../helpers";
+import { Dashboard } from "../../commands/Dashboard";
+import { ExtensionState } from "../../constants";
+import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { Extension } from "../../helpers";
 import { BaseListener } from "./BaseListener";
 
 
diff --git a/src/listeners/DataListener.ts b/src/listeners/dashboard/DataListener.ts
similarity index 89%
rename from src/listeners/DataListener.ts
rename to src/listeners/dashboard/DataListener.ts
index 7cc42c91..27e6c382 100644
--- a/src/listeners/DataListener.ts
+++ b/src/listeners/dashboard/DataListener.ts
@@ -1,12 +1,12 @@
-import { DataFile } from './../models/DataFile';
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
+import { DataFile } from './../../models/DataFile';
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
-import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
-import { Folders } from '../commands/Folders';
+import { DashboardCommand } from '../../dashboardWebView/DashboardCommand';
+import { Folders } from '../../commands/Folders';
 import { existsSync, readFileSync, writeFileSync, mkdirSync } from 'fs';
 import { dirname } from 'path';
 import * as yaml from 'js-yaml';
-import { Logger, Notifications } from '../helpers';
+import { Logger, Notifications } from '../../helpers';
 import { commands } from 'vscode';
 
 
diff --git a/src/listeners/ExtensionListener.ts b/src/listeners/dashboard/ExtensionListener.ts
similarity index 80%
rename from src/listeners/ExtensionListener.ts
rename to src/listeners/dashboard/ExtensionListener.ts
index 7132c85c..4c9ec7e5 100644
--- a/src/listeners/ExtensionListener.ts
+++ b/src/listeners/dashboard/ExtensionListener.ts
@@ -1,9 +1,9 @@
 import { commands, env } from "vscode";
 import { SettingsListener } from ".";
-import { COMMAND_NAME } from "../constants";
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
-import { CustomScript, Extension } from "../helpers";
-import { openFileInEditor } from "../helpers/openFileInEditor";
+import { COMMAND_NAME } from "../../constants";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { CustomScript, Extension } from "../../helpers";
+import { openFileInEditor } from "../../helpers/openFileInEditor";
 import { BaseListener } from "./BaseListener";
 
 
diff --git a/src/listeners/MediaListener.ts b/src/listeners/dashboard/MediaListener.ts
similarity index 89%
rename from src/listeners/MediaListener.ts
rename to src/listeners/dashboard/MediaListener.ts
index 42874088..21ad392c 100644
--- a/src/listeners/MediaListener.ts
+++ b/src/listeners/dashboard/MediaListener.ts
@@ -1,11 +1,11 @@
-import { Telemetry } from './../helpers/Telemetry';
-import { MediaHelpers } from './../helpers/MediaHelpers';
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
+import { Telemetry } from '../../helpers/Telemetry';
+import { MediaHelpers } from '../../helpers/MediaHelpers';
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
 import { BaseListener } from "./BaseListener";
-import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
-import { SortingOption } from '../dashboardWebView/models';
+import { DashboardCommand } from '../../dashboardWebView/DashboardCommand';
+import { SortingOption } from '../../dashboardWebView/models';
 import { commands, env, Uri } from 'vscode';
-import { COMMAND_NAME, TelemetryEvent } from '../constants';
+import { COMMAND_NAME, TelemetryEvent } from '../../constants';
 import * as os from 'os';
 
 
diff --git a/src/listeners/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts
similarity index 91%
rename from src/listeners/PagesListener.ts
rename to src/listeners/dashboard/PagesListener.ts
index f77ddc85..7487a345 100644
--- a/src/listeners/PagesListener.ts
+++ b/src/listeners/dashboard/PagesListener.ts
@@ -1,17 +1,17 @@
-import { isValidFile } from './../helpers/isValidFile';
+import { isValidFile } from '../../helpers/isValidFile';
 import { existsSync } from "fs";
 import { basename, dirname, join } from "path";
 import { commands, FileSystemWatcher, RelativePattern, Uri, workspace } from "vscode";
-import { Dashboard } from "../commands/Dashboard";
-import { Folders } from "../commands/Folders";
-import { COMMAND_NAME, DefaultFields, SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD } from "../constants";
-import { DashboardCommand } from "../dashboardWebView/DashboardCommand";
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
-import { Page } from "../dashboardWebView/models";
-import { ArticleHelper, Logger, Settings } from "../helpers";
-import { ContentType } from "../helpers/ContentType";
-import { DateHelper } from "../helpers/DateHelper";
-import { Notifications } from "../helpers/Notifications";
+import { Dashboard } from "../../commands/Dashboard";
+import { Folders } from "../../commands/Folders";
+import { COMMAND_NAME, DefaultFields, SETTINGS_CONTENT_STATIC_FOLDER, SETTING_DATE_FIELD, SETTING_SEO_DESCRIPTION_FIELD } from "../../constants";
+import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { Page } from "../../dashboardWebView/models";
+import { ArticleHelper, Logger, Settings } from "../../helpers";
+import { ContentType } from "../../helpers/ContentType";
+import { DateHelper } from "../../helpers/DateHelper";
+import { Notifications } from "../../helpers/Notifications";
 import { BaseListener } from "./BaseListener";
 
 
diff --git a/src/listeners/SettingsListener.ts b/src/listeners/dashboard/SettingsListener.ts
similarity index 83%
rename from src/listeners/SettingsListener.ts
rename to src/listeners/dashboard/SettingsListener.ts
index 09ef84d0..18be3859 100644
--- a/src/listeners/SettingsListener.ts
+++ b/src/listeners/dashboard/SettingsListener.ts
@@ -1,9 +1,9 @@
-import { SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_FRAMEWORK_ID } from "../constants";
-import { DashboardCommand } from "../dashboardWebView/DashboardCommand";
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
-import { DashboardSettings, Settings } from "../helpers";
-import { FrameworkDetector } from "../helpers/FrameworkDetector";
-import { Framework } from "../models";
+import { SETTINGS_CONTENT_STATIC_FOLDER, SETTINGS_FRAMEWORK_ID } from "../../constants";
+import { DashboardCommand } from "../../dashboardWebView/DashboardCommand";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { DashboardSettings, Settings } from "../../helpers";
+import { FrameworkDetector } from "../../helpers/FrameworkDetector";
+import { Framework } from "../../models";
 import { BaseListener } from "./BaseListener";
 
 
diff --git a/src/listeners/TelemetryListener.ts b/src/listeners/dashboard/TelemetryListener.ts
similarity index 77%
rename from src/listeners/TelemetryListener.ts
rename to src/listeners/dashboard/TelemetryListener.ts
index c603d16a..b482c2cd 100644
--- a/src/listeners/TelemetryListener.ts
+++ b/src/listeners/dashboard/TelemetryListener.ts
@@ -1,5 +1,5 @@
-import { DashboardMessage } from "../dashboardWebView/DashboardMessage";
-import { Telemetry } from "../helpers/Telemetry";
+import { DashboardMessage } from "../../dashboardWebView/DashboardMessage";
+import { Telemetry } from "../../helpers/Telemetry";
 import { BaseListener } from "./BaseListener";
 
 
diff --git a/src/listeners/index.ts b/src/listeners/dashboard/index.ts
similarity index 88%
rename from src/listeners/index.ts
rename to src/listeners/dashboard/index.ts
index 6a61ba18..ab3dbdfa 100644
--- a/src/listeners/index.ts
+++ b/src/listeners/dashboard/index.ts
@@ -1,4 +1,3 @@
-export * from './BaseListener';
 export * from './DashboardListener';
 export * from './DataListener';
 export * from './ExtensionListener';
diff --git a/src/listeners/panel/ArticleListener.ts b/src/listeners/panel/ArticleListener.ts
new file mode 100644
index 00000000..b602732f
--- /dev/null
+++ b/src/listeners/panel/ArticleListener.ts
@@ -0,0 +1,27 @@
+import { Article } from "../../commands";
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { BaseListener } from "./BaseListener";
+
+
+export class ArticleListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: any, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.updateSlug:
+        Article.generateSlug();
+        break;
+      case CommandToCode.updateLastMod:
+        Article.setLastModifiedDate();
+        break;
+      case CommandToCode.publish:
+        Article.toggleDraft();
+        break;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/BaseListener.ts b/src/listeners/panel/BaseListener.ts
new file mode 100644
index 00000000..0a0e87d2
--- /dev/null
+++ b/src/listeners/panel/BaseListener.ts
@@ -0,0 +1,28 @@
+import { Extension } from './../../helpers/Extension';
+import { ExplorerView } from './../../explorerView/ExplorerView';
+import { Logger } from "../../helpers";
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { Command } from '../../panelWebView/Command';
+
+
+export abstract class BaseListener {
+
+  public static process(msg: { command: CommandToCode, data: any }) {}
+  
+  /**
+   * Send a message to the webview
+   * @param command 
+   * @param data 
+   */
+  public static sendMsg(command: Command, data: any) {
+    Logger.info(`Sending message to panel: ${command}`);
+
+    const extPath = Extension.getInstance().extensionPath;
+    const panel = ExplorerView.getInstance(extPath);
+
+    panel.sendMessage({
+      command,
+      data
+    });
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts
new file mode 100644
index 00000000..7b2c64c7
--- /dev/null
+++ b/src/listeners/panel/DataListener.ts
@@ -0,0 +1,196 @@
+import { ImageHelper } from './../../helpers/ImageHelper';
+import { Folders } from "../../commands/Folders";
+import { Command } from "../../panelWebView/Command";
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { BaseListener } from "./BaseListener";
+import { commands, ThemeIcon, window } from 'vscode';
+import { ArticleHelper, Settings } from "../../helpers";
+import { COMMAND_NAME, DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_TAXONOMY_CONTENT_TYPES } from "../../constants";
+import { Article } from '../../commands';
+
+const FILE_LIMIT = 10;
+
+export class DataListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: CommandToCode, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.getData:
+        this.getFoldersAndFiles();
+        this.getFileData();
+        break;
+      case CommandToCode.createContent:
+        commands.executeCommand(COMMAND_NAME.createContent);
+        break;
+      case CommandToCode.createTemplate:
+        commands.executeCommand(COMMAND_NAME.createTemplate);
+        break;
+      case CommandToCode.updateMetadata:
+        this.updateMetadata(msg.data);
+        break;
+      case CommandToCode.frameworkCommand:
+        this.openTerminalWithCommand(msg.data.command);
+        break;
+    }
+  }
+
+  /**
+   * Retrieve the information about the registered folders and its files
+   */
+  public static async getFoldersAndFiles() {
+    const folders = await Folders.getInfo(FILE_LIMIT) || null;
+
+    this.sendMsg(Command.folderInfo, folders);
+  }
+
+  /**
+   * Triggers a metadata change in the panel
+   * @param metadata 
+   */
+   public static pushMetadata(metadata: any) {
+    const wsFolder = Folders.getWorkspaceFolder();
+    const filePath = window.activeTextEditor?.document.uri.fsPath;
+    const commaSeparated = Settings.get<string[]>(SETTING_COMMA_SEPARATED_FIELDS);
+    const contentTypes = Settings.get<string>(SETTING_TAXONOMY_CONTENT_TYPES);
+    
+    const articleDetails = ArticleHelper.getDetails();
+
+    if (articleDetails) {
+      metadata.articleDetails = articleDetails;
+    }
+
+    let updatedMetadata = Object.assign({}, metadata);
+    if (commaSeparated) {
+      for (const key of commaSeparated) {
+        if (updatedMetadata[key] && typeof updatedMetadata[key] === "string") {
+          updatedMetadata[key] = updatedMetadata[key].split(",").map((s: string) => s.trim());
+        }
+      }
+    }
+
+    const keys = Object.keys(updatedMetadata);
+    if (keys.length > 0) {
+      updatedMetadata.filePath = filePath;
+    }
+
+    if (keys.length > 0 && contentTypes && wsFolder) {
+      // Get the current content type
+      const contentType = ArticleHelper.getContentType(updatedMetadata);
+      if (contentType) {
+        ImageHelper.processImageFields(updatedMetadata, contentType.fields)
+      }
+    }
+
+    // Check slug
+    if (!updatedMetadata[DefaultFields.Slug]) {
+      const slug = Article.getSlug();
+
+      if (slug) {
+        updatedMetadata[DefaultFields.Slug] = slug;
+      }
+    }
+
+    this.sendMsg(Command.metadata, updatedMetadata);
+  }
+
+  /**
+   * Update the metadata of the article
+   */
+  public static async updateMetadata({field, parents, value }: { field: string, value: any, parents?: string[], fieldData?: { multiple: boolean, value: string[] } }) {
+    if (!field) {
+      return;
+    }
+
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return;
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (!article) {
+      return;
+    }
+
+    const contentType = ArticleHelper.getContentType(article.data);
+    const dateFields = contentType.fields.filter((field) => field.type === "datetime");
+    const imageFields = contentType.fields.filter((field) => field.type === "image" && field.multiple);
+
+    // Support multi-level fields
+    let parentObj = article.data;
+    for (const parent of parents || []) {
+      parentObj = parentObj[parent];
+    }
+
+    for (const dateField of dateFields) {
+      if ((field === dateField.name) && value) {
+        parentObj[field] = Article.formatDate(new Date(value));
+      } else if (!imageFields.find(f => f.name === field)) {
+        // Only override the field data if it is not an multiselect image field
+        parentObj[field] = value;
+      }
+    }
+
+    for (const imageField of imageFields) {
+      if (field === imageField.name) {
+        // If value is an array, it means it comes from the explorer view itself (deletion)
+        if (Array.isArray(value)) {
+          parentObj[field] = value || [];
+        } else { // Otherwise it is coming from the media dashboard (addition)
+          let fieldValue = parentObj[field];
+          if (fieldValue && !Array.isArray(fieldValue)) {
+            fieldValue = [fieldValue];
+          }
+          const crntData = Object.assign([], fieldValue);
+          const allRelPaths = [...(crntData || []), value];
+          parentObj[field] = [...new Set(allRelPaths)].filter(f => f);
+        }
+      }
+    }
+    
+    ArticleHelper.update(editor, article);
+    this.pushMetadata(article.data);
+  }
+
+  /**
+   * Retrieve the file its front matter
+   */
+  public static async getFileData() {
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return "";
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (article?.data) {
+      this.pushMetadata(article!.data);
+    }
+  }
+
+  /**
+   * Open a terminal and run the passed command
+   * @param command 
+   */
+  private static openTerminalWithCommand(command: string) {
+    if (command) {
+      let terminal = window.activeTerminal;
+  
+      if (!terminal || (terminal && terminal.state.isInteractedWith === true)) {
+        terminal = window.createTerminal({
+          name: `Starting local server`,
+          iconPath: new ThemeIcon('server-environment'),
+          message: `Starting local server`,
+        });
+      }
+  
+      if (terminal) {
+        terminal.sendText(command);
+        terminal.show(false);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/ExtensionListener.ts b/src/listeners/panel/ExtensionListener.ts
new file mode 100644
index 00000000..5061744c
--- /dev/null
+++ b/src/listeners/panel/ExtensionListener.ts
@@ -0,0 +1,83 @@
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { BaseListener } from "./BaseListener";
+import { commands, env as vscodeEnv } from 'vscode';
+import * as os from 'os';
+import { exec } from 'child_process';
+import { Folders } from "../../commands/Folders";
+import { COMMAND_NAME } from "../../constants";
+import { SettingsListener } from ".";
+import { openFileInEditor } from "../../helpers";
+
+
+export class ExtensionListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: any, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.openFile:
+        this.openFile();
+        break;
+      case CommandToCode.openProject:
+        this.openFolder();
+        break;
+      case CommandToCode.openInEditor:
+        openFileInEditor(msg.data);
+        break;
+      case CommandToCode.initProject:
+        this.initialize();
+        break;
+      case CommandToCode.toggleCenterMode:
+        commands.executeCommand(`workbench.action.toggleCenteredLayout`);
+        break;
+      case CommandToCode.openPreview:
+        commands.executeCommand(COMMAND_NAME.preview);
+        break;
+      case CommandToCode.openDashboard:
+        commands.executeCommand(COMMAND_NAME.dashboard);
+        break;
+    }
+  }
+
+  /**
+   * Initialize project
+   */
+  private static async initialize() {
+    await commands.executeCommand(COMMAND_NAME.init);
+    SettingsListener.getSettings();
+  }
+
+  /**
+   * Open the file in your explorer
+   */
+  private static openFile() {
+    if (os.type() === "Linux" && vscodeEnv.remoteName?.toLowerCase() === "wsl") {
+      commands.executeCommand('remote-wsl.revealInExplorer');
+    } else {
+      commands.executeCommand('revealFileInOS');
+    }
+  }
+
+  /**
+   * Opens the project folder
+   */
+  private static openFolder() {
+    const wsFolder = Folders.getWorkspaceFolder();
+    if (wsFolder) {
+      const wsPath = wsFolder.fsPath;
+      if (os.type() === "Darwin") {
+        exec(`open ${wsPath}`);
+      } else if (os.type() === "Windows_NT") {
+        exec(`explorer ${wsPath}`);
+      } else if (os.type() === "Linux" && vscodeEnv.remoteName?.toLowerCase() === "wsl") {
+        exec('explorer.exe `wslpath -w "$PWD"`');
+      } else {
+        exec(`xdg-open ${wsPath}`);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/MediaListener.ts b/src/listeners/panel/MediaListener.ts
new file mode 100644
index 00000000..bf87c224
--- /dev/null
+++ b/src/listeners/panel/MediaListener.ts
@@ -0,0 +1,43 @@
+import { commands } from "vscode";
+import { Dashboard } from "../../commands/Dashboard";
+import { COMMAND_NAME } from "../../constants";
+import { DashboardData } from "../../models";
+import { Command } from "../../panelWebView/Command";
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { BaseListener } from "./BaseListener";
+
+
+export class MediaListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: any, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.selectImage:
+        this.selectMedia(msg);
+        break;
+    }
+  }
+
+  /**
+   * Select a media file
+   */
+  private static async selectMedia(msg: { data: any }) {
+    await commands.executeCommand(COMMAND_NAME.dashboard, {
+      type: "media",
+      data: msg.data
+    } as DashboardData);
+    this.getMediaSelection();
+  }
+
+  /**
+   * Return the media selection
+   */
+  public static async getMediaSelection() {
+    this.sendMsg(Command.mediaSelectionData, Dashboard.viewData);
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/ScriptListener.ts b/src/listeners/panel/ScriptListener.ts
new file mode 100644
index 00000000..c630819e
--- /dev/null
+++ b/src/listeners/panel/ScriptListener.ts
@@ -0,0 +1,38 @@
+import { SETTING_CUSTOM_SCRIPTS } from "../../constants";
+import { CustomScript, Settings } from "../../helpers";
+import { CustomScript as ICustomScript } from "../../models";
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { BaseListener } from "./BaseListener";
+
+
+export class ScriptListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: any, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.runCustomScript:
+        this.runCustomScript(msg);
+        break;
+    }
+  }
+
+  /**
+   * Run a custom script
+   * @param msg 
+   */
+  private static runCustomScript(msg: { command: string, data: any}) {
+    const scripts: ICustomScript[] | undefined = Settings.get(SETTING_CUSTOM_SCRIPTS);
+
+    if (msg?.data?.title && msg?.data?.script && scripts) {
+      const customScript = scripts.find((s: ICustomScript) => s.title === msg.data.title);
+      if (customScript?.script && customScript?.title) {
+        CustomScript.run(customScript);
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/SettingsListener.ts b/src/listeners/panel/SettingsListener.ts
new file mode 100644
index 00000000..9bb9f414
--- /dev/null
+++ b/src/listeners/panel/SettingsListener.ts
@@ -0,0 +1,87 @@
+import { commands, workspace } from "vscode";
+import { EXTENSION_BETA_ID, EXTENSION_ID, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_PREVIEW_HOST } from "../../constants";
+import { Extension, Settings } from "../../helpers";
+import { PanelSettings } from "../../helpers/PanelSettings";
+import { Command } from "../../panelWebView/Command";
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { BaseListener } from "./BaseListener";
+
+
+export class SettingsListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: CommandToCode, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.getData:
+        this.getSettings();
+        break;
+      case CommandToCode.openSettings:
+        this.openVSCodeSettings();
+        break;
+      case CommandToCode.toggleWritingSettings:
+        this.toggleWritingSettings();
+        break;
+      case CommandToCode.updateModifiedUpdating:
+        this.updateSetting(SETTING_AUTO_UPDATE_DATE, msg.data || false);
+        break;
+      case CommandToCode.updateFmHighlight:
+        this.updateSetting(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, (msg.data !== null && msg.data !== undefined) ? msg.data : false);
+        break;
+      case CommandToCode.updatePreviewUrl:
+        this.updateSetting(SETTING_PREVIEW_HOST, msg.data || "");
+        break;
+      case CommandToCode.updateStartCommand:
+        this.updateSetting(SETTINGS_FRAMEWORK_START, msg.data || "");
+        break;
+    }
+  }
+
+  /**
+   * Retrieve the extension settings required to render the panel
+   */
+  public static async getSettings() {
+    const panelSettings = await PanelSettings.get();
+    this.sendMsg(Command.settings, panelSettings);
+  }
+
+  /**
+   * Open the settings view of VS Code
+   */
+  public static openVSCodeSettings() {
+    const isBeta = Extension.getInstance().isBetaVersion();
+    commands.executeCommand('workbench.action.openSettings', `@ext:${isBeta ? EXTENSION_BETA_ID : EXTENSION_ID}`);
+  }
+
+  /**
+   * Updates a setting and refreshes the retrieved settings
+   * @param setting 
+   * @param value 
+   */
+   private static async updateSetting(setting: string, value: any) {
+    await Settings.update(setting, value);
+    this.getSettings();
+  }
+
+  /**
+   * Toggle the writing settings
+   */
+  private static async toggleWritingSettings() {
+    const config = workspace.getConfiguration("", { languageId: "markdown" });
+    const enabled = PanelSettings.isWritingSettingsEnabled();
+    
+    await config.update("editor.fontSize", enabled ? undefined : 14, false, true);
+    await config.update("editor.lineHeight", enabled ? undefined : 26, false, true);
+    await config.update("editor.wordWrap", enabled ? undefined : "wordWrapColumn", false, true);
+    await config.update("editor.wordWrapColumn", enabled ? undefined : 64, false, true);
+    await config.update("editor.lineNumbers", enabled ? undefined : "off", false, true);
+    await config.update("editor.quickSuggestions", enabled ? undefined : false, false, true);
+    await config.update("editor.minimap.enabled", enabled ? undefined : false, false, true);
+
+    this.getSettings();
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/TaxonomyListener.ts b/src/listeners/panel/TaxonomyListener.ts
new file mode 100644
index 00000000..6b1fa5de
--- /dev/null
+++ b/src/listeners/panel/TaxonomyListener.ts
@@ -0,0 +1,130 @@
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { TagType } from "../../panelWebView/TagType";
+import { BaseListener } from "./BaseListener";
+import { window } from "vscode";
+import { ArticleHelper, Settings } from "../../helpers";
+import { CustomTaxonomyData, TaxonomyType } from "../../models";
+import { DataListener } from ".";
+import { SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS } from "../../constants";
+
+
+export class TaxonomyListener extends BaseListener {
+
+  /**
+   * Process the messages for the dashboard views
+   * @param msg 
+   */
+  public static process(msg: { command: any, data: any }) {
+    super.process(msg);
+
+    switch(msg.command) {
+      case CommandToCode.updateTags:
+        this.updateTags(TagType.tags, msg.data?.values || [], msg.data?.parents || []);
+        break;
+      case CommandToCode.updateCategories:
+        this.updateTags(TagType.categories, msg.data?.values || [], msg.data?.parents || []);
+        break;
+      case CommandToCode.updateKeywords:
+        this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || []);
+        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;
+    }
+  }
+
+  /**
+   * Update the tags in the current document
+   * @param tagType 
+   * @param values 
+   */
+   private static updateTags(tagType: TagType, values: string[], parents: string[]) {
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return "";
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (article && article.data) {
+
+      // Support multi-level fields
+      let parentObj = article.data;
+      for (const parent of parents || []) {
+        parentObj = parentObj[parent];
+      }
+
+      parentObj[tagType.toLowerCase()] = values || [];
+      ArticleHelper.update(editor, article);
+      DataListener.pushMetadata(article!.data);
+    }
+  }
+
+  /**
+   * Update the tags in the current document
+   * @param data 
+   */
+  private static 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) {
+
+      // Support multi-level fields
+      let parentObj = article.data;
+      for (const parent of data.parents || []) {
+        parentObj = parentObj[parent];
+      }
+
+      parentObj[data.name] = data.options || [];
+      ArticleHelper.update(editor, article);
+      DataListener.pushMetadata(article!.data);
+    }
+  }
+
+  /**
+   * Add tag to the settings
+   * @param data 
+   */
+  private static async addCustomTaxonomy(data: CustomTaxonomyData) {
+    if (!data?.id || !data?.option) {
+      return;
+    }
+
+    await Settings.updateCustomTaxonomy(data.id, data.option);
+  }
+
+  /**
+   * Add tag to the settings
+   * @param tagType 
+   * @param value 
+   */
+  private static async addTags(tagType: TagType, value: string) {
+    if (value) {
+      let options = tagType === TagType.tags ? Settings.get<string[]>(SETTING_TAXONOMY_TAGS, true) : Settings.get<string[]>(SETTING_TAXONOMY_CATEGORIES, true);
+
+      if (!options) {
+        options = [];
+      }
+
+      options.push(value);
+      const taxType = tagType === TagType.tags ? TaxonomyType.Tag : TaxonomyType.Category;
+      await Settings.updateTaxonomy(taxType, options);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/listeners/panel/index.ts b/src/listeners/panel/index.ts
new file mode 100644
index 00000000..d7c44fcc
--- /dev/null
+++ b/src/listeners/panel/index.ts
@@ -0,0 +1,8 @@
+export * from './ArticleListener';
+export * from './BaseListener';
+export * from './DataListener';
+export * from './ExtensionListener';
+export * from './MediaListener';
+export * from './ScriptListener';
+export * from './SettingsListener';
+export * from './TaxonomyListener';
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index b405a240..3da6353c 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -11,20 +11,21 @@ export interface PanelSettings {
   date: DateInfo;
   categories: string[];
   customTaxonomy: CustomTaxonomy[];
-  freeform: boolean;
+  freeform: boolean | undefined;
   scripts: CustomScript[];
   isInitialized: boolean;
   modifiedDateUpdate: boolean;
   writingSettingsEnabled: boolean;
-  fmHighlighting: boolean;
+  fmHighlighting: boolean | undefined;
   preview: PreviewSettings;
   contentTypes: ContentType[];
   dashboardViewData: DashboardData | undefined;
-  draftField: DraftField;
+  draftField: DraftField | undefined;
   isBacker: boolean | undefined;
   framework: string | undefined;
   commands: FrameworkCommands;
   dataTypes: DataType[] | undefined;
+  commaSeparatedFields: string[];
 }
 
 export interface FrameworkCommands {
@@ -70,8 +71,9 @@ export interface SEO {
 }
 
 export interface Slug {
-  prefix: number;
-  suffix: number;
+  prefix: number | string;
+  suffix: number | string;
+  updateFileName?: boolean;
 }
 
 export interface FolderInfo {
diff --git a/src/models/index.ts b/src/models/index.ts
index 6d34d5a8..d10b96b9 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -2,6 +2,9 @@ export * from './Choice';
 export * from './ContentFolder';
 export * from './CustomTaxonomyData';
 export * from './DashboardData';
+export * from './DataFile';
+export * from './DataFolder';
+export * from './DataType';
 export * from './DraftField';
 export * from './Framework';
 export * from './MediaPaths';
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index c57bae5c..fa5a6de1 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -161,7 +161,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               icon={<TagIcon />}
               crntSelected={parent[field.name] as string[] || []} 
               options={settings?.tags || []} 
-              freeform={settings.freeform} 
+              freeform={settings.freeform || false} 
               focussed={focusElm === TagType.tags}
               unsetFocus={unsetFocus}
               parents={parentFields} />
@@ -179,7 +179,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               icon={<ListUnorderedIcon />}
               crntSelected={selectedValues as string[] || []} 
               options={taxonomyData?.options || []} 
-              freeform={settings.freeform} 
+              freeform={settings.freeform || false} 
               focussed={focusElm === TagType.custom}
               unsetFocus={unsetFocus}
               fieldName={field.name}
@@ -196,7 +196,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               icon={<ListUnorderedIcon />}
               crntSelected={parent.categories as string[] || []} 
               options={settings.categories} 
-              freeform={settings.freeform} 
+              freeform={settings.freeform || false} 
               focussed={focusElm === TagType.categories}
               unsetFocus={unsetFocus}
               parents={parentFields} />
@@ -210,8 +210,8 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
             <DraftField
               label={field.title || field.name}
-              type={draftField.type}
-              choices={draftField.choices || []}
+              type={draftField?.type || "boolean"}
+              choices={draftField?.choices || []}
               value={value as boolean | string | null | undefined}
               onChanged={(value: boolean | string) => sendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>

From 15d89e34cfe232c6deccb25843dd09183bf41b3b Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sat, 12 Feb 2022 18:00:26 +0100
Subject: [PATCH 18/62] Fix checkbox

---
 src/panelWebView/components/VscodeComponents.ts | 3 ++-
 src/panelWebView/index.tsx                      | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/panelWebView/components/VscodeComponents.ts b/src/panelWebView/components/VscodeComponents.ts
index 2cddfe86..39dd67ba 100644
--- a/src/panelWebView/components/VscodeComponents.ts
+++ b/src/panelWebView/components/VscodeComponents.ts
@@ -9,6 +9,7 @@ export const VsTableRow = wrapWc(`vscode-table-row`);
 export const VsTableCell = wrapWc(`vscode-table-cell`);
 export const VsCollapsible = wrapWc(`vscode-collapsible`);
 export const VsLabel = wrapWc(`vscode-label`);
+export const VsCheckbox = wrapWc(`vscode-checkbox`);
 
 // @vscode/webview-ui-toolkit
-export const VsCheckbox = wrapWc(`vscode-checkbox`);
\ No newline at end of file
+// export const VsCheckbox = wrapWc(`vscode-checkbox`);
\ No newline at end of file
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index ef242ab0..bd076bcc 100644
--- a/src/panelWebView/index.tsx
+++ b/src/panelWebView/index.tsx
@@ -15,7 +15,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
 import '@bendera/vscode-webview-elements/dist/vscode-label.js';
-// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
+import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
 
 // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
 

From 4678189eabab2ae8573e38f1c872d695a9375394 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 08:26:01 -0800
Subject: [PATCH 19/62] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8ce1e98e..1af502aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 ### ⚡️ Optimizations
 
 - Show the data item its details when clicking on the record
+- Refactoring of the explorer view panel listeners
 - [#243](https://github.com/estruyf/vscode-front-matter/issues/243): Refactoring front matter parsing
 
 ### 🐞 Fixes

From 427245f211cdfa58167aeefdd209b4bc2ddf58bd Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 08:37:17 -0800
Subject: [PATCH 20/62] #176 - Select the first block type if single

---
 .../DataBlock/DataBlockSelector.tsx           | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
index 442029cc..5aa99fe4 100644
--- a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { Field } from '../../../models';
 import { DataType } from '../../../models/DataType';
 
@@ -16,11 +16,21 @@ const EMPTY_OPTION = "EMPTY_OPTION";
 export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, dataTypes, selectedDataType, onSetDataType, onSchemaUpdate }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
   const [ options, setOptions ] = useState<string[]>([]);
 
+  const onSchemaSet = useCallback((blockType: string) => {
+    if (dataTypes && blockType !== EMPTY_OPTION) {
+      const schema = dataTypes.find(dataType => dataType.id === blockType);
+      onSchemaUpdate(schema);
+    } else {
+      onSchemaUpdate(null);
+    }
+  }, []);
+
   useEffect(() => {
     if (field.blockType && dataTypes) {
       if (typeof field.blockType === "string") {
-        const schema = dataTypes.find(dataType => dataType.id === field.blockType);
-        onSchemaUpdate(schema);
+        onSchemaSet(field.blockType);
+      } else if (field.blockType instanceof Array && field.blockType.length === 1) {
+        onSchemaSet(field.blockType[0]);
       } else {
         setOptions([...field.blockType]);
       }
@@ -30,8 +40,7 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
   useEffect(() => {
     if (dataTypes && selectedDataType) {
       if (selectedDataType !== EMPTY_OPTION) {
-        const schema = dataTypes.find(dataType => dataType.id === selectedDataType);
-        onSchemaUpdate(schema);
+        onSchemaSet(selectedDataType);
       } else {
         onSchemaUpdate(null);
       }

From a1dbda0b230f8ee6ee913239528d53c5e31a92a2 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 08:55:08 -0800
Subject: [PATCH 21/62] #176 - update dropdown style

---
 .../components/DataBlock/DataBlockSelector.tsx        | 11 ++++++-----
 src/panelWebView/components/GlobalSettings.tsx        |  7 ++++---
 src/panelWebView/components/VscodeComponents.ts       |  6 +-----
 src/panelWebView/index.tsx                            |  2 +-
 4 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
index 5aa99fe4..ca758786 100644
--- a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
 import { Field } from '../../../models';
 import { DataType } from '../../../models/DataType';
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 
 export interface IDataBlockSelectorProps {
   field: Field;
@@ -54,20 +55,20 @@ export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps>
   return (
     <div className='data_block__selector'>
       <h3>Block type</h3>
-      <select
+      <VSCodeDropdown
         value={selectedDataType ?? EMPTY_OPTION}
-        onChange={event => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        onChange={(event: any) => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
         style={{
           width: "100%",
           marginBottom: "1rem"
         }}>
-        <option value={EMPTY_OPTION}></option>
+        <VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
         {
           options.map((o) => (
-            <option key={o} value={o}>{o}</option>
+            <VSCodeOption key={o} value={o}>{o}</VSCodeOption>
           ))
         }
-      </select>
+      </VSCodeDropdown>
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/panelWebView/components/GlobalSettings.tsx b/src/panelWebView/components/GlobalSettings.tsx
index ddcfce9b..bcd834a2 100644
--- a/src/panelWebView/components/GlobalSettings.tsx
+++ b/src/panelWebView/components/GlobalSettings.tsx
@@ -4,8 +4,9 @@ import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { useDebounce } from '../../hooks/useDebounce';
 import { Collapsible } from './Collapsible';
-import { VsCheckbox, VsLabel } from './VscodeComponents';
+import { VsLabel } from './VscodeComponents';
 import useStartCommand from '../hooks/useStartCommand';
+import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 
 export interface IGlobalSettingsProps {
   settings: PanelSettings | undefined;
@@ -69,11 +70,11 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({settings
       <Collapsible id={`${isBase ? "base_" : ""}settings`} className={`base__actions`} title="Global settings">
         <div className={`base__action`}>
           <VsLabel>Modified date</VsLabel>
-          <VsCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>Auto-update modified date</VsCheckbox>
+          <VSCodeCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>Auto-update modified date</VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VsLabel>Front Matter highlight</VsLabel>
-          <VsCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>Highlight Front Matter</VsCheckbox>
+          <VSCodeCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>Highlight Front Matter</VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VsLabel>Local preview</VsLabel>
diff --git a/src/panelWebView/components/VscodeComponents.ts b/src/panelWebView/components/VscodeComponents.ts
index 39dd67ba..cb22167b 100644
--- a/src/panelWebView/components/VscodeComponents.ts
+++ b/src/panelWebView/components/VscodeComponents.ts
@@ -8,8 +8,4 @@ export const VsTableBody = wrapWc(`vscode-table-body`);
 export const VsTableRow = wrapWc(`vscode-table-row`);
 export const VsTableCell = wrapWc(`vscode-table-cell`);
 export const VsCollapsible = wrapWc(`vscode-collapsible`);
-export const VsLabel = wrapWc(`vscode-label`);
-export const VsCheckbox = wrapWc(`vscode-checkbox`);
-
-// @vscode/webview-ui-toolkit
-// export const VsCheckbox = wrapWc(`vscode-checkbox`);
\ No newline at end of file
+export const VsLabel = wrapWc(`vscode-label`);
\ No newline at end of file
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index bd076bcc..ef242ab0 100644
--- a/src/panelWebView/index.tsx
+++ b/src/panelWebView/index.tsx
@@ -15,7 +15,7 @@ import '@bendera/vscode-webview-elements/dist/vscode-table-row.js';
 import '@bendera/vscode-webview-elements/dist/vscode-table-cell.js';
 import '@bendera/vscode-webview-elements/dist/vscode-collapsible.js';
 import '@bendera/vscode-webview-elements/dist/vscode-label.js';
-import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
+// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
 
 // import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
 

From 0decd84f7f42cc7df64cde0e6480f2ecbd6b1007 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 09:38:06 -0800
Subject: [PATCH 22/62] #247 - Fix front matter highlighting

---
 CHANGELOG.md                             |  1 +
 src/providers/MarkdownFoldingProvider.ts | 12 ++++++++----
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1af502aa..7114c1e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 
 ### 🐞 Fixes
 
+- [#247](https://github.com/estruyf/vscode-front-matter/issues/247): Fix the front matter highlighting in markdown documents
 
 ## [6.0.0] - 2022-01-25 - [Release Notes](https://beta.frontmatter.codes/updates/v6.0.0)
 
diff --git a/src/providers/MarkdownFoldingProvider.ts b/src/providers/MarkdownFoldingProvider.ts
index 4d00e04f..85224889 100644
--- a/src/providers/MarkdownFoldingProvider.ts
+++ b/src/providers/MarkdownFoldingProvider.ts
@@ -15,10 +15,6 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
 
     const range = MarkdownFoldingProvider.getFrontMatterRange(document);
     if (range) {
-      MarkdownFoldingProvider.start = null;
-      MarkdownFoldingProvider.end = null;
-      MarkdownFoldingProvider.endLine = null;
-
       MarkdownFoldingProvider.triggerHighlighting();
 
       ranges.push(new FoldingRange(range.start.line, range.end.line, FoldingRangeKind.Region));
@@ -65,16 +61,24 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
       let start = null;
       let end = null;
       let endLine = null;
+      
+      MarkdownFoldingProvider.start = null;
+      MarkdownFoldingProvider.end = null;
+      MarkdownFoldingProvider.endLine = null;
 
       for (let i = 0; i < lines.length; i++) {
         const line = lines[i];
         if (line.startsWith(lineStart) || line.startsWith(lineEnd)) {
           if (i === 0 && start === null) {
             start = i;
+            MarkdownFoldingProvider.start = start;
           } else if (start !== null && end === null) {
             end = i;
             endLine = line.length;
 
+            MarkdownFoldingProvider.end = end;
+            MarkdownFoldingProvider.endLine = endLine;  
+
             MarkdownFoldingProvider.triggerHighlighting();
 
             return new Range(new Position(start, 0), new Position(end, endLine));

From b6482546a5a8e352cd636f8f5feb1381aec35ac3 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 09:38:46 -0800
Subject: [PATCH 23/62] #248 - Highlighting support for other files added

---
 CHANGELOG.md                             |  1 +
 src/extension.ts                         |  4 +--
 src/providers/MarkdownFoldingProvider.ts | 42 +++++++++++++++++-------
 3 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7114c1e3..a3ebe44c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 - Updated the activity bar icon for better visibility
 - Storing the panel collapse section states
+- [#248](https://github.com/estruyf/vscode-front-matter/issues/248): Added support for front matter highlighting to all file types specified in `frontMatter.content.supportedFileTypes`
 
 ### ⚡️ Optimizations
 
diff --git a/src/extension.ts b/src/extension.ts
index 50b26c42..76aac326 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -28,8 +28,6 @@ let statusDebouncer: { (fnc: any, time: number): void; };
 let editDebounce: { (fnc: any, time: number): void; };
 let collection: vscode.DiagnosticCollection;
 
-const mdSelector: vscode.DocumentSelector = { language: 'markdown', scheme: 'file' };
-
 export async function activate(context: vscode.ExtensionContext) {
 	const { subscriptions, extensionUri, extensionPath } = context;
 
@@ -93,7 +91,7 @@ export async function activate(context: vscode.ExtensionContext) {
 	});
 
 	// Folding the front matter of markdown files
-	vscode.languages.registerFoldingRangeProvider(mdSelector, new MarkdownFoldingProvider());
+	MarkdownFoldingProvider.register();
 
 	const insertTags = vscode.commands.registerCommand(COMMAND_NAME.insertTags, async () => {
 		await vscode.commands.executeCommand('workbench.view.extension.frontmatter-explorer');
diff --git a/src/providers/MarkdownFoldingProvider.ts b/src/providers/MarkdownFoldingProvider.ts
index 85224889..fbf4235a 100644
--- a/src/providers/MarkdownFoldingProvider.ts
+++ b/src/providers/MarkdownFoldingProvider.ts
@@ -1,6 +1,7 @@
-import { TextEditorDecorationType } from 'vscode';
+import { ArticleHelper } from '../helpers';
+import { languages, TextEditorDecorationType } from 'vscode';
 import { CancellationToken, FoldingContext, FoldingRange, FoldingRangeKind, FoldingRangeProvider, Range, TextDocument, window, Position } from 'vscode';
-import { SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTING_FRONTMATTER_TYPE } from '../constants';
+import { SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_CONTENT_SUPPORTED_FILETYPES, SETTING_FRONTMATTER_TYPE } from '../constants';
 import { Settings } from '../helpers';
 import { FrontMatterDecorationProvider } from './FrontMatterDecorationProvider';
 
@@ -10,6 +11,18 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
   private static endLine: number | null = null;
   private static decType: TextEditorDecorationType | null = null;
 
+  public static register() {
+    const supportedFiles = Settings.get<string[]>(SETTINGS_CONTENT_SUPPORTED_FILETYPES);
+
+    languages.registerFoldingRangeProvider({ language: 'markdown', scheme: 'file' }, new MarkdownFoldingProvider());
+
+    for (const fileExt of (supportedFiles || [])) {
+      if (fileExt !== "md" && fileExt !== "markdown") {
+        languages.registerFoldingRangeProvider({ pattern: `**/*.${fileExt}`, scheme: 'file' }, new MarkdownFoldingProvider());
+      }
+    }
+  }
+
   public async provideFoldingRanges(document: TextDocument, context: FoldingContext, token: CancellationToken): Promise<FoldingRange[]> {
     const ranges: FoldingRange[] = [];
 
@@ -24,18 +37,23 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
   }
 
   public static triggerHighlighting() {
-    const fmHighlight = Settings.get<boolean>(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT);
+    const activeDoc = window.activeTextEditor?.document;
 
-    const range = this.getFrontMatterRange();
+    const isSupported = ArticleHelper.isMarkdownFile(activeDoc);
+    if (isSupported) {
+      const fmHighlight = Settings.get<boolean>(SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT);
 
-    if (range) {
-      if (MarkdownFoldingProvider.decType !== null) {
-        MarkdownFoldingProvider.decType.dispose();
-      }
+      const range = this.getFrontMatterRange();
+
+      if (range) {
+        if (MarkdownFoldingProvider.decType !== null) {
+          MarkdownFoldingProvider.decType.dispose();
+        }
 
-      if (fmHighlight) {
-        MarkdownFoldingProvider.decType = new FrontMatterDecorationProvider().get();
-        window.activeTextEditor?.setDecorations(MarkdownFoldingProvider.decType, [range]);
+        if (fmHighlight) {
+          MarkdownFoldingProvider.decType = new FrontMatterDecorationProvider().get();
+          window.activeTextEditor?.setDecorations(MarkdownFoldingProvider.decType, [range]);
+        }
       }
     }
   }
@@ -61,7 +79,7 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
       let start = null;
       let end = null;
       let endLine = null;
-      
+
       MarkdownFoldingProvider.start = null;
       MarkdownFoldingProvider.end = null;
       MarkdownFoldingProvider.endLine = null;

From 1f7519ee6061e1207fc147ec6cd240c5f0ebdd9d Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 09:38:53 -0800
Subject: [PATCH 24/62] Dependency updates

---
 package-lock.json | 987 +++++++++++++++++++++++++---------------------
 1 file changed, 538 insertions(+), 449 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 86c7540b..9a5ea084 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -624,6 +624,44 @@
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
       "dev": true
     },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.6.tgz",
@@ -656,6 +694,29 @@
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "node_modules/@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -741,6 +802,12 @@
         "@types/unist": "*"
       }
     },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
     "node_modules/@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -781,6 +848,18 @@
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
       "dev": true
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
     "node_modules/@types/react": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz",
@@ -818,6 +897,34 @@
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "dev": true
     },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -891,6 +998,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.2.2.tgz",
+      "integrity": "sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@vscode/codicons": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.20.tgz",
@@ -1204,6 +1320,18 @@
         }
       }
     },
+    "node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
     "node_modules/ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -2369,10 +2497,16 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2760,15 +2894,19 @@
       "dev": true
     },
     "node_modules/css-select": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
-      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
       "dev": true,
       "dependencies": {
-        "boolbase": "~1.0.0",
-        "css-what": "2.1",
-        "domutils": "1.5.1",
-        "nth-check": "~1.0.1"
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
     "node_modules/css-unit-converter": {
@@ -2778,12 +2916,15 @@
       "dev": true
     },
     "node_modules/css-what": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
       "dev": true,
       "engines": {
-        "node": "*"
+        "node": ">= 6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fb55"
       }
     },
     "node_modules/cssesc": {
@@ -3038,19 +3179,23 @@
       }
     },
     "node_modules/dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
       "dev": true,
       "dependencies": {
         "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
         "entities": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
       }
     },
-    "node_modules/dom-serializer/node_modules/domelementtype": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
-      "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
+    "node_modules/domelementtype": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
       "dev": true,
       "funding": [
         {
@@ -3059,29 +3204,33 @@
         }
       ]
     },
-    "node_modules/domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
-      "dev": true
-    },
     "node_modules/domhandler": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
       "dev": true,
       "dependencies": {
-        "domelementtype": "1"
+        "domelementtype": "^2.2.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
     "node_modules/domutils": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
       "dev": true,
       "dependencies": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
     "node_modules/dot-case": {
@@ -3674,9 +3823,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
       "dev": true,
       "funding": [
         {
@@ -4062,32 +4211,6 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/html-loader/node_modules/dom-serializer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
-      "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^2.0.1",
-        "domhandler": "^3.0.0",
-        "entities": "^2.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
-      }
-    },
-    "node_modules/html-loader/node_modules/domelementtype": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
-      "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/fb55"
-        }
-      ]
-    },
     "node_modules/html-loader/node_modules/domhandler": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
@@ -4103,20 +4226,6 @@
         "url": "https://github.com/fb55/domhandler?sponsor=1"
       }
     },
-    "node_modules/html-loader/node_modules/domutils": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
-      "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
-      "dev": true,
-      "dependencies": {
-        "dom-serializer": "^1.0.1",
-        "domelementtype": "^2.0.1",
-        "domhandler": "^3.3.0"
-      },
-      "funding": {
-        "url": "https://github.com/fb55/domutils?sponsor=1"
-      }
-    },
     "node_modules/html-loader/node_modules/htmlparser2": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
@@ -4158,12 +4267,6 @@
         "node": ">=8.9.0"
       }
     },
-    "node_modules/html-loader/node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
     "node_modules/html-minifier-terser": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz",
@@ -4227,37 +4330,22 @@
       }
     },
     "node_modules/htmlparser2": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
-      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
-      "dev": true,
-      "dependencies": {
-        "domelementtype": "^1.3.1",
-        "domhandler": "^2.3.0",
-        "domutils": "^1.5.1",
-        "entities": "^1.1.1",
-        "inherits": "^2.0.1",
-        "readable-stream": "^3.1.1"
-      }
-    },
-    "node_modules/htmlparser2/node_modules/entities": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-      "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
-      "dev": true
-    },
-    "node_modules/htmlparser2/node_modules/readable-stream": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
       "dev": true,
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
       "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
       }
     },
     "node_modules/http-deceiver": {
@@ -5035,12 +5123,6 @@
         "json5": "lib/cli.js"
       }
     },
-    "node_modules/json5/node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
     "node_modules/jsonfile": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -5260,9 +5342,9 @@
       }
     },
     "node_modules/memfs": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.0.tgz",
-      "integrity": "sha512-o/RfP0J1d03YwsAxyHxAYs2kyJp55AFkMazlFAZFR2I2IXkxiUTXRabJ6RmNNCQ83LAD2jy52Khj0m3OffpNdA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
+      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
       "dev": true,
       "dependencies": {
         "fs-monkey": "1.0.3"
@@ -5846,12 +5928,6 @@
         "mkdirp": "bin/cmd.js"
       }
     },
-    "node_modules/mkdirp/node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-      "dev": true
-    },
     "node_modules/modern-normalize": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
@@ -5909,9 +5985,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.1.25",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
-      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
       "dev": true,
       "bin": {
         "nanoid": "bin/nanoid.cjs"
@@ -5980,12 +6056,12 @@
       }
     },
     "node_modules/node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
+      "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
       "dev": true,
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 6.13.0"
       }
     },
     "node_modules/node-json-db": {
@@ -6092,12 +6168,15 @@
       }
     },
     "node_modules/nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
       "dev": true,
       "dependencies": {
-        "boolbase": "~1.0.0"
+        "boolbase": "^1.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/nth-check?sponsor=1"
       }
     },
     "node_modules/object-assign": {
@@ -6840,16 +6919,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -7197,16 +7266,16 @@
       }
     },
     "node_modules/renderkid": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.4.tgz",
-      "integrity": "sha512-K2eXrSOJdq+HuKzlcjOlGoOarUu5SDguDEhE7+Ah4zuOWL40j8A/oHvLlLob9PSTNvVnBd+/q0Er1QfpEuem5g==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
+      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
       "dev": true,
       "dependencies": {
-        "css-select": "^1.1.0",
-        "dom-converter": "^0.2",
-        "htmlparser2": "^3.3.0",
-        "lodash": "^4.17.20",
-        "strip-ansi": "^3.0.0"
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^3.0.1"
       }
     },
     "node_modules/renderkid/node_modules/ansi-regex": {
@@ -7444,12 +7513,15 @@
       "dev": true
     },
     "node_modules/selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.0.tgz",
+      "integrity": "sha512-cUdFiCbKoa1mZ6osuJs2uDHrs0k0oprsKveFiiaBKCNq3SYyb5gs2HxhQyDNLCmL51ZZThqi4YNDpCK6GOP1iQ==",
       "dev": true,
       "dependencies": {
-        "node-forge": "^0.10.0"
+        "node-forge": "^1.2.0"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/semver": {
@@ -8256,21 +8328,6 @@
         "node": ">=8.17.0"
       }
     },
-    "node_modules/tmp/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -8581,28 +8638,12 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
     "node_modules/url-join-ts": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/url-join-ts/-/url-join-ts-1.0.5.tgz",
       "integrity": "sha512-u+5gi7JyOwhj58ZKwkmkzFGHuepTpmwjqfUDGVjsJJstsCz63CJAINixgJaDcMbmuyWPJIxbtBpIfaDgOQ9KMQ==",
       "dev": true
     },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-      "dev": true
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8922,15 +8963,69 @@
         "node": ">= 10"
       }
     },
+    "node_modules/webpack-dev-middleware": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.1.tgz",
+      "integrity": "sha512-81EujCKkyles2wphtdrnPg/QqegC/AtqNH//mQkBYSMqwFVCQrxM6ktB2O/SPlZy7LqeEfTbV3cZARGQz6umhg==",
+      "dev": true,
+      "dependencies": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.1",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^4.0.0 || ^5.0.0"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
+    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
     "node_modules/webpack-dev-server": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.6.0.tgz",
-      "integrity": "sha512-oojcBIKvx3Ya7qs1/AVWHDgmP1Xml8rGsEBnSobxU/UJSX1xP1GPM3MwsAnDzvqcVmVki8tV7lbcsjEjk0PtYg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz",
+      "integrity": "sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==",
       "dev": true,
       "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
         "ansi-html-community": "^0.0.8",
         "bonjour": "^3.5.0",
-        "chokidar": "^3.5.2",
+        "chokidar": "^3.5.3",
         "colorette": "^2.0.10",
         "compression": "^1.7.4",
         "connect-history-api-fallback": "^1.6.0",
@@ -8945,14 +9040,13 @@
         "p-retry": "^4.5.0",
         "portfinder": "^1.0.28",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^1.10.11",
+        "selfsigned": "^2.0.0",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.21",
         "spdy": "^4.0.2",
         "strip-ansi": "^7.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^5.2.1",
-        "ws": "^8.1.0"
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
       },
       "bin": {
         "webpack-dev-server": "bin/webpack-dev-server.js"
@@ -8969,18 +9063,6 @@
         }
       }
     },
-    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-      "dev": true,
-      "dependencies": {
-        "fast-deep-equal": "^3.1.3"
-      },
-      "peerDependencies": {
-        "ajv": "^8.8.2"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/colorette": {
       "version": "2.0.16",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
@@ -9006,33 +9088,10 @@
         "url": "https://opencollective.com/webpack"
       }
     },
-    "node_modules/webpack-dev-server/node_modules/webpack-dev-middleware": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.2.2.tgz",
-      "integrity": "sha512-DjZyYrsHhkikAFNvSNKrpnziXukU1EChFAh9j4LAm6ndPLPW8cN0KhM7T+RAiOqsQ6ABfQ8hoKIs9IWMTjov+w==",
-      "dev": true,
-      "dependencies": {
-        "colorette": "^2.0.10",
-        "memfs": "^3.2.2",
-        "mime-types": "^2.1.31",
-        "range-parser": "^1.2.1",
-        "schema-utils": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 12.13.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/webpack"
-      },
-      "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
-      }
-    },
     "node_modules/webpack-dev-server/node_modules/ws": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
-      "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==",
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+      "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
       "dev": true,
       "engines": {
         "node": ">=10.0.0"
@@ -9658,6 +9717,44 @@
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
       "dev": true
     },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/debug": {
       "version": "4.1.6",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.6.tgz",
@@ -9690,6 +9787,29 @@
       "integrity": "sha512-C6N5s2ZFtuZRj54k2/zyRhNDjJwwcViAM3Nbm8zjBpbqAdZ00mr0CFxvSKeO8Y/e03WVFLpQMdHYVfUd6SB+Hw==",
       "dev": true
     },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -9775,6 +9895,12 @@
         "@types/unist": "*"
       }
     },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
     "@types/minimatch": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz",
@@ -9815,6 +9941,18 @@
       "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
       "dev": true
     },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
     "@types/react": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz",
@@ -9852,6 +9990,34 @@
       "integrity": "sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==",
       "dev": true
     },
+    "@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/source-list-map": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz",
@@ -9924,6 +10090,15 @@
         }
       }
     },
+    "@types/ws": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.2.2.tgz",
+      "integrity": "sha512-NOn5eIcgWLOo6qW8AcuLZ7G8PycXu0xTxxkS6Q18VWFxgPUSOwV0pBj2a/4viNZVu25i7RIB7GttdkAIUUXOOg==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@vscode/codicons": {
       "version": "0.0.20",
       "resolved": "https://registry.npmjs.org/@vscode/codicons/-/codicons-0.0.20.tgz",
@@ -10191,6 +10366,15 @@
         "ajv": "^8.0.0"
       }
     },
+    "ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^3.1.3"
+      }
+    },
     "ansi-html-community": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
@@ -11074,9 +11258,9 @@
       "dev": true
     },
     "chokidar": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
-      "integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
@@ -11391,15 +11575,16 @@
       }
     },
     "css-select": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
-      "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.1.tgz",
+      "integrity": "sha512-/aUslKhzkTNCQUB2qTX84lVmfia9NyjP3WpDGtj/WxhwBzWBYUV3DgUpurHTme8UTPcPlAD1DJ+b0nN/t50zDQ==",
       "dev": true,
       "requires": {
-        "boolbase": "~1.0.0",
-        "css-what": "2.1",
-        "domutils": "1.5.1",
-        "nth-check": "~1.0.1"
+        "boolbase": "^1.0.0",
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       }
     },
     "css-unit-converter": {
@@ -11409,9 +11594,9 @@
       "dev": true
     },
     "css-what": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz",
-      "integrity": "sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==",
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/css-what/-/css-what-5.1.0.tgz",
+      "integrity": "sha512-arSMRWIIFY0hV8pIxZMEfmMI47Wj3R/aWpZDDxWYCPEiOMv6tfOrnpDtgxBYPEQD4V0Y/958+1TdC3iWTFcUPw==",
       "dev": true
     },
     "cssesc": {
@@ -11612,46 +11797,40 @@
       }
     },
     "dom-serializer": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz",
-      "integrity": "sha512-2/xPb3ORsQ42nHYiSunXkDjPLBaEj/xTwUO4B7XCZQTRk7EBtTOPaygh10YAAh2OI1Qrp6NWfpAhzswj0ydt9g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.3.2.tgz",
+      "integrity": "sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==",
       "dev": true,
       "requires": {
         "domelementtype": "^2.0.1",
+        "domhandler": "^4.2.0",
         "entities": "^2.0.0"
-      },
-      "dependencies": {
-        "domelementtype": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
-          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
-          "dev": true
-        }
       }
     },
     "domelementtype": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz",
-      "integrity": "sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.2.0.tgz",
+      "integrity": "sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==",
       "dev": true
     },
     "domhandler": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
-      "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
       "dev": true,
       "requires": {
-        "domelementtype": "1"
+        "domelementtype": "^2.2.0"
       }
     },
     "domutils": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
-      "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz",
+      "integrity": "sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==",
       "dev": true,
       "requires": {
-        "dom-serializer": "0",
-        "domelementtype": "1"
+        "dom-serializer": "^1.0.1",
+        "domelementtype": "^2.2.0",
+        "domhandler": "^4.2.0"
       }
     },
     "dot-case": {
@@ -12137,9 +12316,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.6.tgz",
-      "integrity": "sha512-fhUl5EwSJbbl8AR+uYL2KQDxLkdSjZGR36xy46AO7cOMTrCMON6Sa28FmAnC2tRTDbd/Uuzz3aJBv7EBN7JH8A==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
       "dev": true
     },
     "form-data": {
@@ -12409,23 +12588,6 @@
         "schema-utils": "^3.0.0"
       },
       "dependencies": {
-        "dom-serializer": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.1.0.tgz",
-          "integrity": "sha512-ox7bvGXt2n+uLWtCRLybYx60IrOlWL/aCebWJk1T0d4m3y2tzf4U3ij9wBMUb6YJZpz06HCCYuyCDveE2xXmzQ==",
-          "dev": true,
-          "requires": {
-            "domelementtype": "^2.0.1",
-            "domhandler": "^3.0.0",
-            "entities": "^2.0.0"
-          }
-        },
-        "domelementtype": {
-          "version": "2.0.2",
-          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.2.tgz",
-          "integrity": "sha512-wFwTwCVebUrMgGeAwRL/NhZtHAUyT9n9yg4IMDwf10+6iCMxSkVq9MGCVEH+QZWo1nNidy8kNvwmv4zWHDTqvA==",
-          "dev": true
-        },
         "domhandler": {
           "version": "3.3.0",
           "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-3.3.0.tgz",
@@ -12435,17 +12597,6 @@
             "domelementtype": "^2.0.1"
           }
         },
-        "domutils": {
-          "version": "2.4.2",
-          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.2.tgz",
-          "integrity": "sha512-NKbgaM8ZJOecTZsIzW5gSuplsX2IWW2mIK7xVr8hTQF2v1CJWTmLZ1HOCh5sH+IzVPAGE5IucooOkvwBRAdowA==",
-          "dev": true,
-          "requires": {
-            "dom-serializer": "^1.0.1",
-            "domelementtype": "^2.0.1",
-            "domhandler": "^3.3.0"
-          }
-        },
         "htmlparser2": {
           "version": "4.1.0",
           "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-4.1.0.tgz",
@@ -12477,12 +12628,6 @@
             "emojis-list": "^3.0.0",
             "json5": "^2.1.2"
           }
-        },
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
         }
       }
     },
@@ -12533,36 +12678,15 @@
       }
     },
     "htmlparser2": {
-      "version": "3.10.1",
-      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz",
-      "integrity": "sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==",
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz",
+      "integrity": "sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==",
       "dev": true,
       "requires": {
-        "domelementtype": "^1.3.1",
-        "domhandler": "^2.3.0",
-        "domutils": "^1.5.1",
-        "entities": "^1.1.1",
-        "inherits": "^2.0.1",
-        "readable-stream": "^3.1.1"
-      },
-      "dependencies": {
-        "entities": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz",
-          "integrity": "sha512-f2LZMYl1Fzu7YSBKg+RoROelpOaNrcGmE9AZubeDfrCEia483oW4MI4VyFd5VNHIgQ/7qm1I0wUHK1eJnn2y2w==",
-          "dev": true
-        },
-        "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
-          "dev": true,
-          "requires": {
-            "inherits": "^2.0.3",
-            "string_decoder": "^1.1.1",
-            "util-deprecate": "^1.0.1"
-          }
-        }
+        "domelementtype": "^2.0.1",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.5.2",
+        "entities": "^2.0.0"
       }
     },
     "http-deceiver": {
@@ -13124,14 +13248,6 @@
       "dev": true,
       "requires": {
         "minimist": "^1.2.0"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        }
       }
     },
     "jsonfile": {
@@ -13315,9 +13431,9 @@
       "dev": true
     },
     "memfs": {
-      "version": "3.4.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.0.tgz",
-      "integrity": "sha512-o/RfP0J1d03YwsAxyHxAYs2kyJp55AFkMazlFAZFR2I2IXkxiUTXRabJ6RmNNCQ83LAD2jy52Khj0m3OffpNdA==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
+      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
       "dev": true,
       "requires": {
         "fs-monkey": "1.0.3"
@@ -13657,14 +13773,6 @@
       "dev": true,
       "requires": {
         "minimist": "^1.2.5"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.5",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-          "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
-          "dev": true
-        }
       }
     },
     "modern-normalize": {
@@ -13709,9 +13817,9 @@
       "dev": true
     },
     "nanoid": {
-      "version": "3.1.25",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.25.tgz",
-      "integrity": "sha512-rdwtIXaXCLFAQbnfqDRnI6jaRHp9fTcYBjtFKE8eezcZ7LuLjhUaQGNeMXf1HmRoCH32CLz6XwX0TtxEOS/A3Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.2.0.tgz",
+      "integrity": "sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==",
       "dev": true
     },
     "negotiator": {
@@ -13760,9 +13868,9 @@
       }
     },
     "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
+      "integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
       "dev": true
     },
     "node-json-db": {
@@ -13847,12 +13955,12 @@
       }
     },
     "nth-check": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz",
-      "integrity": "sha512-WeBOdju8SnzPN5vTUJYxYUxLeXpCaVP5i5e0LF8fg7WORF2Wd7wFX/pk0tYZk7s8T+J7VLy0Da6J1+wCT0AtHg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.1.tgz",
+      "integrity": "sha512-it1vE95zF6dTT9lBsYbxvqh0Soy4SPowchj0UBGj/V6cTPnXXtQOPUbhZ6CmGzAD/rW22LQK6E96pcdJXk4A4w==",
       "dev": true,
       "requires": {
-        "boolbase": "~1.0.0"
+        "boolbase": "^1.0.0"
       }
     },
     "object-assign": {
@@ -14384,12 +14492,6 @@
       "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
       "dev": true
     },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
-    },
     "queue": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/queue/-/queue-6.0.2.tgz",
@@ -14644,16 +14746,16 @@
       "dev": true
     },
     "renderkid": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.4.tgz",
-      "integrity": "sha512-K2eXrSOJdq+HuKzlcjOlGoOarUu5SDguDEhE7+Ah4zuOWL40j8A/oHvLlLob9PSTNvVnBd+/q0Er1QfpEuem5g==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.7.tgz",
+      "integrity": "sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==",
       "dev": true,
       "requires": {
-        "css-select": "^1.1.0",
-        "dom-converter": "^0.2",
-        "htmlparser2": "^3.3.0",
-        "lodash": "^4.17.20",
-        "strip-ansi": "^3.0.0"
+        "css-select": "^4.1.3",
+        "dom-converter": "^0.2.0",
+        "htmlparser2": "^6.1.0",
+        "lodash": "^4.17.21",
+        "strip-ansi": "^3.0.1"
       },
       "dependencies": {
         "ansi-regex": {
@@ -14834,12 +14936,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.0.tgz",
+      "integrity": "sha512-cUdFiCbKoa1mZ6osuJs2uDHrs0k0oprsKveFiiaBKCNq3SYyb5gs2HxhQyDNLCmL51ZZThqi4YNDpCK6GOP1iQ==",
       "dev": true,
       "requires": {
-        "node-forge": "^0.10.0"
+        "node-forge": "^1.2.0"
       }
     },
     "semver": {
@@ -15470,17 +15572,6 @@
       "dev": true,
       "requires": {
         "rimraf": "^3.0.0"
-      },
-      "dependencies": {
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        }
       }
     },
     "to-regex-range": {
@@ -15725,24 +15816,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-          "dev": true
-        }
-      }
-    },
     "url-join-ts": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/url-join-ts/-/url-join-ts-1.0.5.tgz",
@@ -16003,15 +16076,54 @@
         }
       }
     },
+    "webpack-dev-middleware": {
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.1.tgz",
+      "integrity": "sha512-81EujCKkyles2wphtdrnPg/QqegC/AtqNH//mQkBYSMqwFVCQrxM6ktB2O/SPlZy7LqeEfTbV3cZARGQz6umhg==",
+      "dev": true,
+      "requires": {
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.1",
+        "mime-types": "^2.1.31",
+        "range-parser": "^1.2.1",
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "colorette": {
+          "version": "2.0.16",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+          "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
+      }
+    },
     "webpack-dev-server": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.6.0.tgz",
-      "integrity": "sha512-oojcBIKvx3Ya7qs1/AVWHDgmP1Xml8rGsEBnSobxU/UJSX1xP1GPM3MwsAnDzvqcVmVki8tV7lbcsjEjk0PtYg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz",
+      "integrity": "sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==",
       "dev": true,
       "requires": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
         "ansi-html-community": "^0.0.8",
         "bonjour": "^3.5.0",
-        "chokidar": "^3.5.2",
+        "chokidar": "^3.5.3",
         "colorette": "^2.0.10",
         "compression": "^1.7.4",
         "connect-history-api-fallback": "^1.6.0",
@@ -16026,25 +16138,15 @@
         "p-retry": "^4.5.0",
         "portfinder": "^1.0.28",
         "schema-utils": "^4.0.0",
-        "selfsigned": "^1.10.11",
+        "selfsigned": "^2.0.0",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.21",
         "spdy": "^4.0.2",
         "strip-ansi": "^7.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^5.2.1",
-        "ws": "^8.1.0"
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
       },
       "dependencies": {
-        "ajv-keywords": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
-          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
-          "dev": true,
-          "requires": {
-            "fast-deep-equal": "^3.1.3"
-          }
-        },
         "colorette": {
           "version": "2.0.16",
           "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
@@ -16063,23 +16165,10 @@
             "ajv-keywords": "^5.0.0"
           }
         },
-        "webpack-dev-middleware": {
-          "version": "5.2.2",
-          "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.2.2.tgz",
-          "integrity": "sha512-DjZyYrsHhkikAFNvSNKrpnziXukU1EChFAh9j4LAm6ndPLPW8cN0KhM7T+RAiOqsQ6ABfQ8hoKIs9IWMTjov+w==",
-          "dev": true,
-          "requires": {
-            "colorette": "^2.0.10",
-            "memfs": "^3.2.2",
-            "mime-types": "^2.1.31",
-            "range-parser": "^1.2.1",
-            "schema-utils": "^4.0.0"
-          }
-        },
         "ws": {
-          "version": "8.3.0",
-          "resolved": "https://registry.npmjs.org/ws/-/ws-8.3.0.tgz",
-          "integrity": "sha512-Gs5EZtpqZzLvmIM59w4igITU57lrtYVFneaa434VROv4thzJyV6UjIL3D42lslWlI+D4KzLYnxSwtfuiO79sNw==",
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+          "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
           "dev": true,
           "requires": {}
         }

From 174c4b7734eee11d13178e740698a85410014d32 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sun, 13 Feb 2022 18:11:51 -0800
Subject: [PATCH 25/62] #176 - Block to JSON field type

---
 package.json                                  |  15 +++
 .../uniforms-frontmatter/AutoField.tsx        |   5 +
 src/models/PanelSettings.ts                   |   3 +-
 .../components/DataBlock/DataBlockForm.tsx    |  10 +-
 .../JsonField/JsonFieldControls.tsx           |  25 ++++
 .../components/JsonField/JsonFieldField.tsx   | 115 ++++++++++++++++++
 .../components/JsonField/JsonFieldForm.tsx    |  74 +++++++++++
 .../components/JsonField/JsonFieldRecord.tsx  |  36 ++++++
 .../components/JsonField/JsonFieldRecords.tsx |  56 +++++++++
 .../JsonField/JsonFieldSelector.tsx           |  74 +++++++++++
 .../components/JsonField/index.ts             |   6 +
 src/panelWebView/components/Metadata.tsx      |   5 +-
 12 files changed, 420 insertions(+), 4 deletions(-)
 create mode 100644 src/panelWebView/components/JsonField/JsonFieldControls.tsx
 create mode 100644 src/panelWebView/components/JsonField/JsonFieldField.tsx
 create mode 100644 src/panelWebView/components/JsonField/JsonFieldForm.tsx
 create mode 100644 src/panelWebView/components/JsonField/JsonFieldRecord.tsx
 create mode 100644 src/panelWebView/components/JsonField/JsonFieldRecords.tsx
 create mode 100644 src/panelWebView/components/JsonField/JsonFieldSelector.tsx
 create mode 100644 src/panelWebView/components/JsonField/index.ts

diff --git a/package.json b/package.json
index e28b4d69..45286a51 100644
--- a/package.json
+++ b/package.json
@@ -633,6 +633,7 @@
                         "categories",
                         "draft",
                         "fields",
+                        "json",
                         "block"
                       ],
                       "description": "Define the type of field"
@@ -770,6 +771,20 @@
                           "blockType"
                         ]
                       }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "json"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "dataType"
+                        ]
+                      }
                     }
                   ]
                 }
diff --git a/src/components/uniforms-frontmatter/AutoField.tsx b/src/components/uniforms-frontmatter/AutoField.tsx
index 2b5f132c..903ea11c 100644
--- a/src/components/uniforms-frontmatter/AutoField.tsx
+++ b/src/components/uniforms-frontmatter/AutoField.tsx
@@ -1,5 +1,6 @@
 import * as invariant from 'invariant';
 import { createAutoField } from 'uniforms';
+import { PreviewImageField } from '../../panelWebView/components/Fields/PreviewImageField';
 export { AutoFieldProps } from 'uniforms';
 
 import BoolField from './BoolField';
@@ -12,6 +13,7 @@ import SelectField from './SelectField';
 import TextField from './TextField';
 
 const AutoField = createAutoField(props => {
+
   if (props.allowedValues) {
     return props.checkboxes && props.fieldType !== Array
       ? RadioField
@@ -31,6 +33,9 @@ const AutoField = createAutoField(props => {
       return NestField;
     case String:
       return TextField;
+    case "image":
+      console.log(`You selected the image type`)
+      return PreviewImageField;
   }
 
   return invariant(false, 'Unsupported field type: %s', props.fieldType);
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index 3da6353c..afad15e2 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -41,7 +41,7 @@ export interface ContentType {
   pageBundle?: boolean;
 }
 
-export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "block";
+export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "json" | "block";
 
 export interface Field {
   title?: string;
@@ -56,6 +56,7 @@ export interface Field {
   default?: string;
   fields?: Field[];
   blockType?: string | string[];
+  dataType?: string | string[];
 }
 
 export interface DateInfo {
diff --git a/src/panelWebView/components/DataBlock/DataBlockForm.tsx b/src/panelWebView/components/DataBlock/DataBlockForm.tsx
index fda2408e..12907b89 100644
--- a/src/panelWebView/components/DataBlock/DataBlockForm.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockForm.tsx
@@ -18,7 +18,15 @@ export interface IDataBlockFormProps {
 export const DataBlockForm: React.FunctionComponent<IDataBlockFormProps> = ({ label, schema, model, onUpdate, onClear }: React.PropsWithChildren<IDataBlockFormProps>) => {
   const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
 
-  const ajv = new Ajv({ allErrors: true, useDefaults: true });
+  const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false });
+  ajv.addKeyword({
+    keyword: 'fieldType',
+    type: "string",
+    validate: (schema: any, data: any) => {
+      console.log(`ajv`);
+      return true;
+    }
+  });
 
   const jsonValidator = (crntSchema: object) => {
     const validator = ajv.compile(crntSchema);
diff --git a/src/panelWebView/components/JsonField/JsonFieldControls.tsx b/src/panelWebView/components/JsonField/JsonFieldControls.tsx
new file mode 100644
index 00000000..cecd7b56
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldControls.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useForm } from 'uniforms';
+import { SubmitField } from 'uniforms-unstyled';
+
+export interface IJsonFieldControlsProps {
+  model: any | null;
+  onClear: () => void;
+}
+
+export const JsonFieldControls: React.FunctionComponent<IJsonFieldControlsProps> = ({ model, onClear }: React.PropsWithChildren<IJsonFieldControlsProps>) => {
+  const { formRef } = useForm();
+  
+  return (
+    <div className='data_block__buttons'>
+      <SubmitField value={model ? `Update` : `Add`} />
+      
+      <button className='ml-4' onClick={() => {
+        if (onClear) {
+          onClear();
+        }
+        formRef.reset();
+      }}>Cancel</button>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/JsonField/JsonFieldField.tsx b/src/panelWebView/components/JsonField/JsonFieldField.tsx
new file mode 100644
index 00000000..012451b1
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldField.tsx
@@ -0,0 +1,115 @@
+import * as React from 'react';
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { Field, PanelSettings } from '../../../models';
+import { PencilIcon } from '@heroicons/react/outline';
+import { VsLabel } from '../VscodeComponents';
+import { JsonFieldRecords, JsonFieldForm, JsonFieldSelector } from '.';
+import { SortEnd } from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+
+export interface IJsonFieldFieldProps {
+  label: string;
+  settings: PanelSettings;
+  field: Field;
+  value: any;
+  onSubmit: (data: any) => void;
+}
+
+export const JsonFieldField: React.FunctionComponent<IJsonFieldFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IJsonFieldFieldProps>) => {
+  const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
+  const [ selectedDataType, setSelectedDataType ] = useState<string | null>(null);
+  const [ selectedSchema, setSelectedSchema ] = useState<any | null>(null);
+
+  const onUpdate = useCallback((data: any) => {
+    const dataClone: any[] = Object.assign([], value);
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      dataClone[selectedIndex] = {
+        ...data,
+        dataType: selectedSchema?.id
+      };
+    } else {
+      dataClone.push({
+        ...data,
+        dataType: selectedSchema?.id
+      });
+    }
+    onSubmit(dataClone);
+  }, [value, selectedIndex, onSubmit, selectedSchema]);
+
+  const deleteItem = useCallback((index: number) => {
+    const dataClone: any[] = Object.assign([], value);
+
+    if (!value) {
+      return;
+    }
+
+    dataClone.splice(index, 1);
+    onSubmit(dataClone);
+  }, [value, selectedIndex, onSubmit]);
+
+  const onSetDataType = (dataType: string | null) => {
+    setSelectedDataType(dataType);
+
+    if (!dataType) {
+      setSelectedIndex(null);
+      setSelectedSchema(null);
+    }
+  }
+
+  const onSort = useCallback(({ oldIndex, newIndex }: SortEnd) => {
+    if (!value || value.length === 0) {
+      return null;
+    }
+
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      setSelectedIndex(newIndex);
+    }
+
+    const newEntries = arrayMoveImmutable(value, oldIndex, newIndex);
+    onSubmit(newEntries);
+  }, [value, selectedIndex]);
+
+  const model = useMemo(() => (value && selectedIndex !== null && selectedIndex !== undefined) ? value[selectedIndex] : null, [value, selectedIndex]);
+
+  useEffect(() => {
+    if (selectedIndex !== null && settings?.dataTypes) {
+      const dataType = model["dataType"];
+      const schema = settings?.dataTypes.find(dt => dt.id === dataType);
+      setSelectedSchema(schema);
+      setSelectedDataType(dataType);
+    }
+  }, [selectedIndex, model, settings?.dataTypes]);
+  
+  return (
+    <div className='data_block__field'>
+
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+
+      <JsonFieldSelector
+        field={field}
+        selectedDataType={selectedDataType}
+        dataTypes={settings.dataTypes}
+        onSetDataType={onSetDataType}
+        onSchemaUpdate={setSelectedSchema} />
+
+      <JsonFieldForm
+        label={(model && selectedIndex !== null) ? `Editing: Record ${selectedIndex + 1}` : `Create a new ${selectedSchema?.id}`}
+        model={model}
+        schema={selectedSchema?.schema}
+        onUpdate={onUpdate}
+        onClear={() => setSelectedIndex(null)} />
+
+      <JsonFieldRecords
+        records={value}
+        selectedIndex={selectedIndex}
+        onAdd={() => setSelectedIndex(null)}
+        onSort={onSort}
+        onEdit={(index: number) => setSelectedIndex(index)}
+        onDelete={deleteItem} />
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/JsonField/JsonFieldForm.tsx b/src/panelWebView/components/JsonField/JsonFieldForm.tsx
new file mode 100644
index 00000000..e3cc1207
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldForm.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import JSONSchemaBridge from 'uniforms-bridge-json-schema';
+import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
+import { JsonFieldControls } from './JsonFieldControls';
+import { JsonFieldRecord } from './JsonFieldRecord';
+import { CollectionIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
+import Ajv from 'ajv';
+
+export interface IJsonFieldFormProps {
+  label: string;
+  schema: any | null;
+  model: any | null;
+  onUpdate: (data: any) => void;
+  onClear: () => void;
+}
+
+export const JsonFieldForm: React.FunctionComponent<IJsonFieldFormProps> = ({ label, schema, model, onUpdate, onClear }: React.PropsWithChildren<IJsonFieldFormProps>) => {
+  const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
+
+  const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false });
+  ajv.addKeyword({
+    keyword: 'fieldType',
+    type: "string",
+    validate: (schema: any, data: any) => {
+      console.log(`ajv`);
+      return true;
+    }
+  });
+
+  const jsonValidator = (crntSchema: object) => {
+    const validator = ajv.compile(crntSchema);
+
+    return (crntModel: object) => {
+      validator(crntModel);
+      return validator.errors?.length ? { details: validator.errors } : null;
+    };
+  };
+
+  useEffect(() => {
+    if (schema) {
+      const schemaValidator = jsonValidator(schema);
+      const bridge = new JSONSchemaBridge(schema, schemaValidator);
+      setBridge(bridge);
+    }
+  }, [schema]);
+
+  if (!bridge || !schema) {
+    return null;
+  }
+  
+  return (
+    <div className='autoform'>
+      <AutoForm 
+        schema={bridge} 
+        model={model || {}}
+        onSubmit={onUpdate}
+        ref={form => form?.reset()}>
+
+        {  label && <h3>{label}</h3> }
+
+        <div className={`fields`}>
+          <AutoFields />
+        </div>
+        
+        <div className={`errors`}>
+          <ErrorsField />
+        </div>
+
+        <JsonFieldControls model={model} onClear={onClear} />
+      </AutoForm>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/JsonField/JsonFieldRecord.tsx b/src/panelWebView/components/JsonField/JsonFieldRecord.tsx
new file mode 100644
index 00000000..a1ac9726
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldRecord.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { PencilIcon, SelectorIcon, TrashIcon } from '@heroicons/react/outline';
+import {  SortableHandle, SortableElement } from 'react-sortable-hoc';
+export interface IJsonFieldRecordProps {
+  id: number;
+  index: number;
+  label: string;
+  isSelected?: boolean;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+const DragHandle = SortableHandle(() => <span className='drag_handler'><SelectorIcon /></span>);
+
+export const JsonFieldRecord = SortableElement(({ label, id, onEdit, onDelete, isSelected }: React.PropsWithChildren<IJsonFieldRecordProps>) => {
+  return (
+    <li className={`data_block__record ${isSelected ? `data_block__record_selected` : ``}`}>
+      <div>
+        <DragHandle />
+
+        <span>{label} - {id+1}</span>
+      </div>
+
+      <div>
+        <button title='Edit record' className='data_block__list__button data_block__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='data_block__list__button_icon' />
+          <span className='sr-only'>Edit</span>
+        </button>
+        <button title='Delete record' className='data_block__list__button data_block__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='data_block__list__button_icon' />
+          <span className='sr-only'>Delete</span>
+        </button>
+      </div>
+    </li>
+  );
+});
\ No newline at end of file
diff --git a/src/panelWebView/components/JsonField/JsonFieldRecords.tsx b/src/panelWebView/components/JsonField/JsonFieldRecords.tsx
new file mode 100644
index 00000000..0d39d88b
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldRecords.tsx
@@ -0,0 +1,56 @@
+import { CollectionIcon, PlusIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+import { VsLabel } from '../VscodeComponents';
+import { JsonFieldRecord } from '.';
+import { SortableContainer, SortEnd } from 'react-sortable-hoc';
+export interface IJsonFieldRecordsProps {
+  records: any[];
+  selectedIndex: number | null;
+  onAdd: () => void;
+  onSort: (obj: SortEnd) => void;
+  onEdit: (id: number) => void;
+  onDelete: (id: number) => void;
+}
+
+const Container = SortableContainer(({children}: React.PropsWithChildren<any>) => {
+  return <ul>{children}</ul>;
+});
+
+export const JsonFieldRecords = ({ records, selectedIndex, onSort, onAdd, onEdit, onDelete }: React.PropsWithChildren<IJsonFieldRecordsProps>) => {
+
+  if (!records || !records.length) {
+    return null;
+  }
+
+  return (
+    <div className='data_block__list'>
+      <VsLabel>
+        <div className={`metadata_field__label`} >
+          <div>
+            <CollectionIcon style={{ width: "16px", height: "16px" }} />
+            <span style={{ lineHeight: "16px"}}>Records</span>
+          </div>
+
+          <button title='Add new record' className='data_block__list__button' onClick={onAdd}>
+            <PlusIcon style={{ width: "16px", height: "16px" }} /> 
+          </button>
+        </div>
+      </VsLabel>
+
+      <Container onSortEnd={onSort} useDragHandle>
+      {
+        records.map((v: any, idx: number) => (
+          <JsonFieldRecord 
+            key={idx} 
+            id={idx}
+            index={idx}
+            label={v?.dataType ?? 'Record'}
+            isSelected={idx === selectedIndex}
+            onEdit={onEdit}
+            onDelete={onDelete}  /> 
+        ))
+      }
+      </Container>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/JsonField/JsonFieldSelector.tsx b/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
new file mode 100644
index 00000000..81308a45
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { Field } from '../../../models';
+import { DataType } from '../../../models/DataType';
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
+
+export interface IJsonFieldSelectorProps {
+  field: Field;
+  dataTypes: DataType[] | undefined;
+  selectedDataType: string | null;
+  onSetDataType: (dataType: string | null) => void;
+  onSchemaUpdate: (schema: any) => void;
+}
+
+const EMPTY_OPTION = "EMPTY_OPTION";
+
+export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps> = ({ field, dataTypes, selectedDataType, onSetDataType, onSchemaUpdate }: React.PropsWithChildren<IJsonFieldSelectorProps>) => {
+  const [ options, setOptions ] = useState<string[]>([]);
+
+  const onSchemaSet = useCallback((dataType: string) => {
+    if (dataTypes && dataType !== EMPTY_OPTION) {
+      const schema = dataTypes.find(dt => dt.id === dataType);
+      onSchemaUpdate(schema);
+    } else {
+      onSchemaUpdate(null);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (field.dataType && dataTypes) {
+      if (typeof field.dataType === "string") {
+        onSchemaSet(field.dataType);
+      } else if (field.dataType instanceof Array && field.dataType.length === 1) {
+        onSchemaSet(field.dataType[0]);
+      } else {
+        setOptions([...field.dataType]);
+      }
+    }
+  }, [field.dataType, dataTypes, onSchemaUpdate]);
+
+  useEffect(() => {
+    if (dataTypes && selectedDataType) {
+      if (selectedDataType !== EMPTY_OPTION) {
+        onSchemaSet(selectedDataType);
+      } else {
+        onSchemaUpdate(null);
+      }
+    }
+  }, [selectedDataType, dataTypes, onSchemaUpdate])
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='data_block__selector'>
+      <h3>Block type</h3>
+      <VSCodeDropdown
+        value={selectedDataType ?? EMPTY_OPTION}
+        onChange={(event: any) => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        style={{
+          width: "100%",
+          marginBottom: "1rem"
+        }}>
+        <VSCodeOption value={EMPTY_OPTION}>&nbsp;</VSCodeOption>
+        {
+          options.map((o) => (
+            <VSCodeOption key={o} value={o}>{o}</VSCodeOption>
+          ))
+        }
+      </VSCodeDropdown>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/JsonField/index.ts b/src/panelWebView/components/JsonField/index.ts
new file mode 100644
index 00000000..dd3ab69c
--- /dev/null
+++ b/src/panelWebView/components/JsonField/index.ts
@@ -0,0 +1,6 @@
+export * from './JsonFieldControls';
+export * from './JsonFieldField';
+export * from './JsonFieldForm';
+export * from './JsonFieldRecord';
+export * from './JsonFieldRecords';
+export * from './JsonFieldSelector';
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index fa5a6de1..9b0a15b5 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -21,6 +21,7 @@ import FieldBoundary from './ErrorBoundary/FieldBoundary';
 import { DraftField } from './Fields/DraftField';
 import { VsLabel } from './VscodeComponents';
 import { DataBlockField } from './DataBlock';
+import { JsonFieldField } from './JsonField';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -235,12 +236,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
         }
 
         return null;
-      } else if (field.type === 'block') {
+      } else if (field.type === 'json') {
         const collectionData = parent[field.name];
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DataBlockField
+            <JsonFieldField
               label={field.title || field.name}
               settings={settings}
               field={field}

From bebde4de684845c6a762c9a33156fe49c81e0d15 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 09:18:44 -0800
Subject: [PATCH 26/62] #176 - Block field updated to support default fields

---
 .../uniforms-frontmatter/AutoField.tsx        |   3 -
 src/constants/settings.ts                     |   1 +
 src/helpers/PanelSettings.ts                  |   5 +-
 src/listeners/panel/DataListener.ts           |   5 +
 src/models/PanelSettings.ts                   |   8 +-
 .../DataBlock/DataBlockControls.tsx           |   2 +-
 .../components/DataBlock/DataBlockField.tsx   | 100 +++++++++++-------
 .../components/DataBlock/DataBlockForm.tsx    |  74 -------------
 .../components/DataBlock/DataBlockRecord.tsx  |  10 +-
 .../components/DataBlock/DataBlockRecords.tsx |   6 +-
 .../DataBlock/DataBlockSelector.tsx           |  62 ++++++-----
 .../components/DataBlock/index.ts             |   1 -
 .../{JsonFieldField.tsx => JsonField.tsx}     |   6 +-
 .../JsonField/JsonFieldControls.tsx           |   2 +-
 .../components/JsonField/JsonFieldForm.tsx    |   8 --
 .../components/JsonField/JsonFieldRecord.tsx  |  10 +-
 .../components/JsonField/JsonFieldRecords.tsx |   4 +-
 .../JsonField/JsonFieldSelector.tsx           |   2 +-
 .../components/JsonField/index.ts             |   2 +-
 src/panelWebView/components/Metadata.tsx      |  45 ++++++--
 src/panelWebView/styles.css                   |  27 +++--
 21 files changed, 184 insertions(+), 199 deletions(-)
 delete mode 100644 src/panelWebView/components/DataBlock/DataBlockForm.tsx
 rename src/panelWebView/components/JsonField/{JsonFieldField.tsx => JsonField.tsx} (93%)

diff --git a/src/components/uniforms-frontmatter/AutoField.tsx b/src/components/uniforms-frontmatter/AutoField.tsx
index 903ea11c..ea130f2a 100644
--- a/src/components/uniforms-frontmatter/AutoField.tsx
+++ b/src/components/uniforms-frontmatter/AutoField.tsx
@@ -33,9 +33,6 @@ const AutoField = createAutoField(props => {
       return NestField;
     case String:
       return TextField;
-    case "image":
-      console.log(`You selected the image type`)
-      return PreviewImageField;
   }
 
   return invariant(false, 'Unsupported field type: %s', props.fieldType);
diff --git a/src/constants/settings.ts b/src/constants/settings.ts
index b35bb22e..bac61155 100644
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@@ -7,6 +7,7 @@ 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_TAXONOMY_FIELD_GROUPS = "taxonomy.fieldGroups";
 
 export const SETTING_DATE_FORMAT = "taxonomy.dateFormat";
 export const SETTING_COMMA_SEPARATED_FIELDS = "taxonomy.commaSeparatedFields";
diff --git a/src/helpers/PanelSettings.ts b/src/helpers/PanelSettings.ts
index f5a3c3b4..3d860625 100644
--- a/src/helpers/PanelSettings.ts
+++ b/src/helpers/PanelSettings.ts
@@ -3,8 +3,8 @@ import { Extension, Settings } from "."
 import { Dashboard } from "../commands/Dashboard"
 import { Preview } from "../commands/Preview"
 import { Template } from "../commands/Template"
-import { CONTEXT, DefaultFields, SETTINGS_CONTENT_DRAFT_FIELD, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_DATA_TYPES, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_CUSTOM_SCRIPTS, SETTING_DATE_FORMAT, SETTING_PANEL_FREEFORM, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_SLUG_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TAXONOMY_CUSTOM, SETTING_TAXONOMY_TAGS } from "../constants"
-import { CustomScript, DataType, DraftField, PanelSettings as IPanelSettings, ScriptType } from "../models"
+import { CONTEXT, DefaultFields, SETTINGS_CONTENT_DRAFT_FIELD, SETTINGS_CONTENT_FRONTMATTER_HIGHLIGHT, SETTINGS_DATA_TYPES, SETTINGS_FRAMEWORK_ID, SETTINGS_FRAMEWORK_START, SETTING_AUTO_UPDATE_DATE, SETTING_COMMA_SEPARATED_FIELDS, SETTING_CUSTOM_SCRIPTS, SETTING_DATE_FORMAT, SETTING_PANEL_FREEFORM, SETTING_SEO_CONTENT_MIN_LENGTH, SETTING_SEO_DESCRIPTION_FIELD, SETTING_SEO_DESCRIPTION_LENGTH, SETTING_SEO_SLUG_LENGTH, SETTING_SEO_TITLE_LENGTH, SETTING_SLUG_PREFIX, SETTING_SLUG_SUFFIX, SETTING_SLUG_UPDATE_FILE_NAME, SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TAXONOMY_CUSTOM, SETTING_TAXONOMY_FIELD_GROUPS, SETTING_TAXONOMY_TAGS } from "../constants"
+import { CustomScript, DataType, DraftField, FieldGroup, PanelSettings as IPanelSettings, ScriptType } from "../models"
 
 export class PanelSettings {
 
@@ -45,6 +45,7 @@ export class PanelSettings {
         start: Settings.get<string>(SETTINGS_FRAMEWORK_START)
       },
       dataTypes: Settings.get<DataType[]>(SETTINGS_DATA_TYPES),
+      fieldGroups: Settings.get<FieldGroup[]>(SETTING_TAXONOMY_FIELD_GROUPS),
     }
   }
 
diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts
index 7b2c64c7..0c3d2b31 100644
--- a/src/listeners/panel/DataListener.ts
+++ b/src/listeners/panel/DataListener.ts
@@ -123,6 +123,11 @@ export class DataListener extends BaseListener {
     // Support multi-level fields
     let parentObj = article.data;
     for (const parent of parents || []) {
+      // If parent doesn't yet exists, it needs to be created
+      if (!parentObj[parent]) {
+        parentObj[parent] = {};
+      }
+
       parentObj = parentObj[parent];
     }
 
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index afad15e2..9e3ba636 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -25,9 +25,15 @@ export interface PanelSettings {
   framework: string | undefined;
   commands: FrameworkCommands;
   dataTypes: DataType[] | undefined;
+  fieldGroups: FieldGroup[] | undefined;
   commaSeparatedFields: string[];
 }
 
+export interface FieldGroup { 
+  id: string;
+  fields: Field[];
+}
+
 export interface FrameworkCommands {
   start: string | undefined;
 }
@@ -55,7 +61,7 @@ export interface Field {
   taxonomyId?: string;
   default?: string;
   fields?: Field[];
-  blockType?: string | string[];
+  fieldGroup?: string | string[];
   dataType?: string | string[];
 }
 
diff --git a/src/panelWebView/components/DataBlock/DataBlockControls.tsx b/src/panelWebView/components/DataBlock/DataBlockControls.tsx
index e137c32a..75e49531 100644
--- a/src/panelWebView/components/DataBlock/DataBlockControls.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockControls.tsx
@@ -11,7 +11,7 @@ export const DataBlockControls: React.FunctionComponent<IDataBlockControlsProps>
   const { formRef } = useForm();
   
   return (
-    <div className='data_block__buttons'>
+    <div className='json_data__buttons'>
       <SubmitField value={model ? `Update` : `Add`} />
       
       <button className='ml-4' onClick={() => {
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 87d76938..16762fae 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -1,40 +1,54 @@
 import * as React from 'react';
-import { useState, useMemo, useCallback, useEffect } from 'react';
-import { Field, PanelSettings } from '../../../models';
+import { useState, useCallback } from 'react';
+import { Field, FieldGroup, PanelSettings } from '../../../models';
 import { PencilIcon } from '@heroicons/react/outline';
 import { VsLabel } from '../VscodeComponents';
-import { DataBlockRecords, DataBlockForm, DataBlockSelector } from '.';
+import { DataBlockRecords, DataBlockSelector } from '.';
 import { SortEnd } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
+import { IMetadata } from '../Metadata';
 
 export interface IDataBlockFieldProps {
   label: string;
   settings: PanelSettings;
   field: Field;
+  parentFields: string[];
   value: any;
+  fieldsRenderer: (ctFields: Field[], parent: IMetadata, parentFields?: string[], onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void) => (JSX.Element | null)[] | undefined
   onSubmit: (data: any) => void;
 }
 
-export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
+export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, settings, field, parentFields = [], value, fieldsRenderer, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
-  const [ selectedDataType, setSelectedDataType ] = useState<string | null>(null);
-  const [ selectedSchema, setSelectedSchema ] = useState<any | null>(null);
+  const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
+  const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
 
-  const onUpdate = useCallback((data: any) => {
+  const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any) => {
     const dataClone: any[] = Object.assign([], value);
+
+    if (!crntField) {
+      return;
+    }
+    
     if (selectedIndex !== null && selectedIndex !== undefined) {
+      const data = Object.assign({}, dataClone[selectedIndex]);
       dataClone[selectedIndex] = {
         ...data,
-        blockType: selectedSchema?.id
+        [crntField]: crntValue,
+        fieldGroup: selectedGroup?.id
       };
     } else {
       dataClone.push({
-        ...data,
-        blockType: selectedSchema?.id
+        [crntField]: crntValue,
+        fieldGroup: selectedGroup?.id
       });
+
+      const newIndex = dataClone.length - 1;
+      setSelectedIndex(newIndex);
     }
+
     onSubmit(dataClone);
-  }, [value, selectedIndex, onSubmit, selectedSchema]);
+  }, [selectedGroup?.id, selectedIndex, value, onSubmit]);
 
   const deleteItem = useCallback((index: number) => {
     const dataClone: any[] = Object.assign([], value);
@@ -47,15 +61,32 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     onSubmit(dataClone);
   }, [value, selectedIndex, onSubmit]);
 
-  const onSetDataType = (dataType: string | null) => {
-    setSelectedDataType(dataType);
+  const onGroupChange = (group: FieldGroup | null | undefined) => {
+    setSelectedGroup(group);
 
-    if (!dataType) {
+    if (!group) {
       setSelectedIndex(null);
-      setSelectedSchema(null);
     }
   }
 
+  const onAdd = useCallback(() => {
+    setSelectedIndex(null);
+    setSelectedGroup(null);
+    setSelectedBlockData({});
+  }, [setSelectedIndex, setSelectedGroup, setSelectedBlockData]); 
+  
+  const onEdit = useCallback((index: number) => {
+    setSelectedIndex(index);
+
+    const fieldData = value[index];
+    if (index !== null && settings?.fieldGroups) {
+      const fieldGroup = fieldData?.fieldGroup;
+      const group = settings?.fieldGroups.find(group => group.id === fieldGroup);
+      setSelectedGroup(group);
+      setSelectedBlockData(fieldData);
+    }
+  }, [setSelectedIndex, setSelectedBlockData, value]);
+
   const onSort = useCallback(({ oldIndex, newIndex }: SortEnd) => {
     if (!value || value.length === 0) {
       return null;
@@ -68,20 +99,9 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     const newEntries = arrayMoveImmutable(value, oldIndex, newIndex);
     onSubmit(newEntries);
   }, [value, selectedIndex]);
-
-  const model = useMemo(() => (value && selectedIndex !== null && selectedIndex !== undefined) ? value[selectedIndex] : null, [value, selectedIndex]);
-
-  useEffect(() => {
-    if (selectedIndex !== null && settings?.dataTypes) {
-      const blockType = model["blockType"];
-      const schema = settings?.dataTypes.find(dataType => dataType.id === blockType);
-      setSelectedSchema(schema);
-      setSelectedDataType(blockType);
-    }
-  }, [selectedIndex, model, settings?.dataTypes]);
   
   return (
-    <div className='data_block__field'>
+    <div className='json_data__field'>
 
       <VsLabel>
         <div className={`metadata_field__label`}>
@@ -91,24 +111,24 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
       <DataBlockSelector
         field={field}
-        selectedDataType={selectedDataType}
-        dataTypes={settings.dataTypes}
-        onSetDataType={onSetDataType}
-        onSchemaUpdate={setSelectedSchema} />
-
-      <DataBlockForm
-        label={(model && selectedIndex !== null) ? `Editing: Record ${selectedIndex + 1}` : `Create a new ${selectedSchema?.id}`}
-        model={model}
-        schema={selectedSchema?.schema}
-        onUpdate={onUpdate}
-        onClear={() => setSelectedIndex(null)} />
+        selectedGroup={selectedGroup?.id}
+        fieldGroups={settings.fieldGroups}
+        onGroupChange={onGroupChange} />
+
+      {
+        selectedGroup?.fields && (
+          <div className='block_field__form'>
+            { fieldsRenderer(selectedGroup?.fields, selectedBlockData || {}, [...parentFields, field.name], onFieldUpdate) }
+          </div>
+        )
+      }
 
       <DataBlockRecords
         records={value}
         selectedIndex={selectedIndex}
-        onAdd={() => setSelectedIndex(null)}
+        onAdd={onAdd}
         onSort={onSort}
-        onEdit={(index: number) => setSelectedIndex(index)}
+        onEdit={onEdit}
         onDelete={deleteItem} />
     </div>
   );
diff --git a/src/panelWebView/components/DataBlock/DataBlockForm.tsx b/src/panelWebView/components/DataBlock/DataBlockForm.tsx
deleted file mode 100644
index 12907b89..00000000
--- a/src/panelWebView/components/DataBlock/DataBlockForm.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { useEffect, useMemo, useState } from 'react';
-import JSONSchemaBridge from 'uniforms-bridge-json-schema';
-import { AutoFields, AutoForm, ErrorsField } from '../../../components/uniforms-frontmatter';
-import { DataBlockControls } from './DataBlockControls';
-import { DataBlockRecord } from './DataBlockRecord';
-import { CollectionIcon, PencilIcon, TrashIcon } from '@heroicons/react/outline';
-import Ajv from 'ajv';
-
-export interface IDataBlockFormProps {
-  label: string;
-  schema: any | null;
-  model: any | null;
-  onUpdate: (data: any) => void;
-  onClear: () => void;
-}
-
-export const DataBlockForm: React.FunctionComponent<IDataBlockFormProps> = ({ label, schema, model, onUpdate, onClear }: React.PropsWithChildren<IDataBlockFormProps>) => {
-  const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
-
-  const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false });
-  ajv.addKeyword({
-    keyword: 'fieldType',
-    type: "string",
-    validate: (schema: any, data: any) => {
-      console.log(`ajv`);
-      return true;
-    }
-  });
-
-  const jsonValidator = (crntSchema: object) => {
-    const validator = ajv.compile(crntSchema);
-
-    return (crntModel: object) => {
-      validator(crntModel);
-      return validator.errors?.length ? { details: validator.errors } : null;
-    };
-  };
-
-  useEffect(() => {
-    if (schema) {
-      const schemaValidator = jsonValidator(schema);
-      const bridge = new JSONSchemaBridge(schema, schemaValidator);
-      setBridge(bridge);
-    }
-  }, [schema]);
-
-  if (!bridge || !schema) {
-    return null;
-  }
-  
-  return (
-    <div className='autoform'>
-      <AutoForm 
-        schema={bridge} 
-        model={model || {}}
-        onSubmit={onUpdate}
-        ref={form => form?.reset()}>
-
-        {  label && <h3>{label}</h3> }
-
-        <div className={`fields`}>
-          <AutoFields />
-        </div>
-        
-        <div className={`errors`}>
-          <ErrorsField />
-        </div>
-
-        <DataBlockControls model={model} onClear={onClear} />
-      </AutoForm>
-    </div>
-  );
-};
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecord.tsx b/src/panelWebView/components/DataBlock/DataBlockRecord.tsx
index 4298529b..c93d7981 100644
--- a/src/panelWebView/components/DataBlock/DataBlockRecord.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockRecord.tsx
@@ -14,7 +14,7 @@ const DragHandle = SortableHandle(() => <span className='drag_handler'><Selector
 
 export const DataBlockRecord = SortableElement(({ label, id, onEdit, onDelete, isSelected }: React.PropsWithChildren<IDataBlockRecordProps>) => {
   return (
-    <li className={`data_block__record ${isSelected ? `data_block__record_selected` : ``}`}>
+    <li className={`json_data__record ${isSelected ? `json_data__record_selected` : ``}`}>
       <div>
         <DragHandle />
 
@@ -22,12 +22,12 @@ export const DataBlockRecord = SortableElement(({ label, id, onEdit, onDelete, i
       </div>
 
       <div>
-        <button title='Edit record' className='data_block__list__button data_block__list__button_edit' onClick={() => onEdit(id)}>
-          <PencilIcon className='data_block__list__button_icon' />
+        <button title='Edit record' className='json_data__list__button json_data__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Edit</span>
         </button>
-        <button title='Delete record' className='data_block__list__button data_block__list__button_delete' onClick={() => onDelete(id)}>
-          <TrashIcon className='data_block__list__button_icon' />
+        <button title='Delete record' className='json_data__list__button json_data__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Delete</span>
         </button>
       </div>
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
index 547110bc..d56d6be4 100644
--- a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
@@ -23,7 +23,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
   }
 
   return (
-    <div className='data_block__list'>
+    <div className='json_data__list'>
       <VsLabel>
         <div className={`metadata_field__label`} >
           <div>
@@ -31,7 +31,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             <span style={{ lineHeight: "16px"}}>Records</span>
           </div>
 
-          <button title='Add new record' className='data_block__list__button' onClick={onAdd}>
+          <button title='Add new record' className='json_data__list__button' onClick={onAdd}>
             <PlusIcon style={{ width: "16px", height: "16px" }} /> 
           </button>
         </div>
@@ -44,7 +44,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             key={idx} 
             id={idx}
             index={idx}
-            label={v?.blockType ?? 'Record'}
+            label={v?.fieldGroup ?? 'Block'}
             isSelected={idx === selectedIndex}
             onEdit={onEdit}
             onDelete={onDelete}  /> 
diff --git a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
index ca758786..ec82135d 100644
--- a/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -1,63 +1,71 @@
 import * as React from 'react';
 import { useCallback, useEffect, useState } from 'react';
-import { Field } from '../../../models';
-import { DataType } from '../../../models/DataType';
+import { Field, FieldGroup } from '../../../models';
 import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
 
 export interface IDataBlockSelectorProps {
   field: Field;
-  dataTypes: DataType[] | undefined;
-  selectedDataType: string | null;
-  onSetDataType: (dataType: string | null) => void;
-  onSchemaUpdate: (schema: any) => void;
+  fieldGroups: FieldGroup[] | undefined;
+  selectedGroup: string | undefined;
+  onGroupChange: (group: FieldGroup | undefined | null) => void;
 }
 
 const EMPTY_OPTION = "EMPTY_OPTION";
 
-export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, dataTypes, selectedDataType, onSetDataType, onSchemaUpdate }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
+export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, fieldGroups, selectedGroup, onGroupChange }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
   const [ options, setOptions ] = useState<string[]>([]);
 
-  const onSchemaSet = useCallback((blockType: string) => {
-    if (dataTypes && blockType !== EMPTY_OPTION) {
-      const schema = dataTypes.find(dataType => dataType.id === blockType);
-      onSchemaUpdate(schema);
+  const onGroupSet = useCallback((fieldGroup: string) => {
+    if (fieldGroups && fieldGroup !== EMPTY_OPTION) {
+      const group = fieldGroups.find(group => group.id === fieldGroup);
+      onGroupChange(group);
     } else {
-      onSchemaUpdate(null);
+      onGroupChange(null);
     }
   }, []);
 
+  const onGroupSelect = useCallback((event: any) => {
+    const group = event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value;
+
+    if (group) {
+      onGroupSet(group);
+    } else {
+      onGroupChange(null);
+    }
+  } , [onGroupSet]);
+
   useEffect(() => {
-    if (field.blockType && dataTypes) {
-      if (typeof field.blockType === "string") {
-        onSchemaSet(field.blockType);
-      } else if (field.blockType instanceof Array && field.blockType.length === 1) {
-        onSchemaSet(field.blockType[0]);
+    if (field.fieldGroup && fieldGroups) {
+      if (typeof field.fieldGroup === "string") {
+        onGroupSet(field.fieldGroup);
+      } else if (field.fieldGroup instanceof Array && field.fieldGroup.length === 1) {
+        onGroupSet(field.fieldGroup[0]);
       } else {
-        setOptions([...field.blockType]);
+        setOptions([...field.fieldGroup]);
       }
     }
-  }, [field.blockType, dataTypes, onSchemaUpdate]);
+  }, [field.fieldGroup, fieldGroups, onGroupChange]);
 
   useEffect(() => {
-    if (dataTypes && selectedDataType) {
-      if (selectedDataType !== EMPTY_OPTION) {
-        onSchemaSet(selectedDataType);
+    if (fieldGroups && selectedGroup) {
+      if (selectedGroup !== EMPTY_OPTION) {
+        onGroupSet(selectedGroup);
       } else {
-        onSchemaUpdate(null);
+        onGroupChange(null);
       }
     }
-  }, [selectedDataType, dataTypes, onSchemaUpdate])
+  }, [selectedGroup, fieldGroups, onGroupChange])
 
   if (options.length === 0) {
     return null;
   }
 
   return (
-    <div className='data_block__selector'>
+    <div className='json_data__selector'>
       <h3>Block type</h3>
       <VSCodeDropdown
-        value={selectedDataType ?? EMPTY_OPTION}
-        onChange={(event: any) => onSetDataType(event.currentTarget.value === EMPTY_OPTION ? null : event.currentTarget.value)}
+        value={selectedGroup ?? EMPTY_OPTION}
+        onChange={onGroupSelect}
         style={{
           width: "100%",
           marginBottom: "1rem"
diff --git a/src/panelWebView/components/DataBlock/index.ts b/src/panelWebView/components/DataBlock/index.ts
index 8075b3ca..2d2b03cb 100644
--- a/src/panelWebView/components/DataBlock/index.ts
+++ b/src/panelWebView/components/DataBlock/index.ts
@@ -1,6 +1,5 @@
 export * from './DataBlockControls';
 export * from './DataBlockField';
-export * from './DataBlockForm';
 export * from './DataBlockRecord';
 export * from './DataBlockRecords';
 export * from './DataBlockSelector';
diff --git a/src/panelWebView/components/JsonField/JsonFieldField.tsx b/src/panelWebView/components/JsonField/JsonField.tsx
similarity index 93%
rename from src/panelWebView/components/JsonField/JsonFieldField.tsx
rename to src/panelWebView/components/JsonField/JsonField.tsx
index 012451b1..92c205f5 100644
--- a/src/panelWebView/components/JsonField/JsonFieldField.tsx
+++ b/src/panelWebView/components/JsonField/JsonField.tsx
@@ -7,7 +7,7 @@ import { JsonFieldRecords, JsonFieldForm, JsonFieldSelector } from '.';
 import { SortEnd } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 
-export interface IJsonFieldFieldProps {
+export interface IJsonFieldProps {
   label: string;
   settings: PanelSettings;
   field: Field;
@@ -15,7 +15,7 @@ export interface IJsonFieldFieldProps {
   onSubmit: (data: any) => void;
 }
 
-export const JsonFieldField: React.FunctionComponent<IJsonFieldFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IJsonFieldFieldProps>) => {
+export const JsonField: React.FunctionComponent<IJsonFieldProps> = ({ label, settings, field, value, onSubmit }: React.PropsWithChildren<IJsonFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
   const [ selectedDataType, setSelectedDataType ] = useState<string | null>(null);
   const [ selectedSchema, setSelectedSchema ] = useState<any | null>(null);
@@ -81,7 +81,7 @@ export const JsonFieldField: React.FunctionComponent<IJsonFieldFieldProps> = ({
   }, [selectedIndex, model, settings?.dataTypes]);
   
   return (
-    <div className='data_block__field'>
+    <div className='json_data__field'>
 
       <VsLabel>
         <div className={`metadata_field__label`}>
diff --git a/src/panelWebView/components/JsonField/JsonFieldControls.tsx b/src/panelWebView/components/JsonField/JsonFieldControls.tsx
index cecd7b56..90015b78 100644
--- a/src/panelWebView/components/JsonField/JsonFieldControls.tsx
+++ b/src/panelWebView/components/JsonField/JsonFieldControls.tsx
@@ -11,7 +11,7 @@ export const JsonFieldControls: React.FunctionComponent<IJsonFieldControlsProps>
   const { formRef } = useForm();
   
   return (
-    <div className='data_block__buttons'>
+    <div className='json_data__buttons'>
       <SubmitField value={model ? `Update` : `Add`} />
       
       <button className='ml-4' onClick={() => {
diff --git a/src/panelWebView/components/JsonField/JsonFieldForm.tsx b/src/panelWebView/components/JsonField/JsonFieldForm.tsx
index e3cc1207..564c2ff5 100644
--- a/src/panelWebView/components/JsonField/JsonFieldForm.tsx
+++ b/src/panelWebView/components/JsonField/JsonFieldForm.tsx
@@ -19,14 +19,6 @@ export const JsonFieldForm: React.FunctionComponent<IJsonFieldFormProps> = ({ la
   const [ bridge, setBridge ] = useState<JSONSchemaBridge | null>(null);
 
   const ajv = new Ajv({ allErrors: true, useDefaults: true, strict: false });
-  ajv.addKeyword({
-    keyword: 'fieldType',
-    type: "string",
-    validate: (schema: any, data: any) => {
-      console.log(`ajv`);
-      return true;
-    }
-  });
 
   const jsonValidator = (crntSchema: object) => {
     const validator = ajv.compile(crntSchema);
diff --git a/src/panelWebView/components/JsonField/JsonFieldRecord.tsx b/src/panelWebView/components/JsonField/JsonFieldRecord.tsx
index a1ac9726..8f51a445 100644
--- a/src/panelWebView/components/JsonField/JsonFieldRecord.tsx
+++ b/src/panelWebView/components/JsonField/JsonFieldRecord.tsx
@@ -14,7 +14,7 @@ const DragHandle = SortableHandle(() => <span className='drag_handler'><Selector
 
 export const JsonFieldRecord = SortableElement(({ label, id, onEdit, onDelete, isSelected }: React.PropsWithChildren<IJsonFieldRecordProps>) => {
   return (
-    <li className={`data_block__record ${isSelected ? `data_block__record_selected` : ``}`}>
+    <li className={`json_data__record ${isSelected ? `json_data__record_selected` : ``}`}>
       <div>
         <DragHandle />
 
@@ -22,12 +22,12 @@ export const JsonFieldRecord = SortableElement(({ label, id, onEdit, onDelete, i
       </div>
 
       <div>
-        <button title='Edit record' className='data_block__list__button data_block__list__button_edit' onClick={() => onEdit(id)}>
-          <PencilIcon className='data_block__list__button_icon' />
+        <button title='Edit record' className='json_data__list__button json_data__list__button_edit' onClick={() => onEdit(id)}>
+          <PencilIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Edit</span>
         </button>
-        <button title='Delete record' className='data_block__list__button data_block__list__button_delete' onClick={() => onDelete(id)}>
-          <TrashIcon className='data_block__list__button_icon' />
+        <button title='Delete record' className='json_data__list__button json_data__list__button_delete' onClick={() => onDelete(id)}>
+          <TrashIcon className='json_data__list__button_icon' />
           <span className='sr-only'>Delete</span>
         </button>
       </div>
diff --git a/src/panelWebView/components/JsonField/JsonFieldRecords.tsx b/src/panelWebView/components/JsonField/JsonFieldRecords.tsx
index 0d39d88b..0df9e2fb 100644
--- a/src/panelWebView/components/JsonField/JsonFieldRecords.tsx
+++ b/src/panelWebView/components/JsonField/JsonFieldRecords.tsx
@@ -23,7 +23,7 @@ export const JsonFieldRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
   }
 
   return (
-    <div className='data_block__list'>
+    <div className='json_data__list'>
       <VsLabel>
         <div className={`metadata_field__label`} >
           <div>
@@ -31,7 +31,7 @@ export const JsonFieldRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             <span style={{ lineHeight: "16px"}}>Records</span>
           </div>
 
-          <button title='Add new record' className='data_block__list__button' onClick={onAdd}>
+          <button title='Add new record' className='json_data__list__button' onClick={onAdd}>
             <PlusIcon style={{ width: "16px", height: "16px" }} /> 
           </button>
         </div>
diff --git a/src/panelWebView/components/JsonField/JsonFieldSelector.tsx b/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
index 81308a45..32c0b95e 100644
--- a/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
+++ b/src/panelWebView/components/JsonField/JsonFieldSelector.tsx
@@ -53,7 +53,7 @@ export const JsonFieldSelector: React.FunctionComponent<IJsonFieldSelectorProps>
   }
 
   return (
-    <div className='data_block__selector'>
+    <div className='json_data__selector'>
       <h3>Block type</h3>
       <VSCodeDropdown
         value={selectedDataType ?? EMPTY_OPTION}
diff --git a/src/panelWebView/components/JsonField/index.ts b/src/panelWebView/components/JsonField/index.ts
index dd3ab69c..97a6a59d 100644
--- a/src/panelWebView/components/JsonField/index.ts
+++ b/src/panelWebView/components/JsonField/index.ts
@@ -1,5 +1,5 @@
+export * from './JsonField';
 export * from './JsonFieldControls';
-export * from './JsonFieldField';
 export * from './JsonFieldForm';
 export * from './JsonFieldRecord';
 export * from './JsonFieldRecords';
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 9b0a15b5..f4a990ce 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -21,7 +21,7 @@ import FieldBoundary from './ErrorBoundary/FieldBoundary';
 import { DraftField } from './Fields/DraftField';
 import { VsLabel } from './VscodeComponents';
 import { DataBlockField } from './DataBlock';
-import { JsonFieldField } from './JsonField';
+import { JsonField } from './JsonField';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -57,11 +57,19 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
     return null;
   }
 
-  const renderFields = (ctFields: Field[], parent: IMetadata, parentFields: string[] = []) => {
+  const renderFields = (ctFields: Field[], parent: IMetadata, parentFields: string[] = [], onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void) => {
     if (!ctFields) {
       return;
     }
 
+    const onSendUpdate = (field: string | undefined, value: any, parents: string[]) => {
+      if (onFieldUpdate) {
+        onFieldUpdate(field, value, parents);
+      } else {
+        sendUpdate(field, value, parents);
+      }
+    };
+
     return ctFields.map(field => {
       if (field.hidden) {
         return null;
@@ -76,7 +84,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               label={field.title || field.name}
               date={dateValue}
               format={settings?.date?.format}
-              onChange={(date => sendUpdate(field.name, date, parentFields))} />
+              onChange={(date => onSendUpdate(field.name, date, parentFields))} />
           </FieldBoundary>
         );
       } else if (field.type === 'boolean') {
@@ -86,7 +94,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               key={field.name}
               label={field.title || field.name}
               checked={!!parent[field.name] as any} 
-              onChanged={(checked) => sendUpdate(field.name, checked, parentFields)} />
+              onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'string') {
@@ -106,7 +114,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               singleLine={field.single}
               limit={limit}
               rows={3}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)}
+              onChange={(value) => onSendUpdate(field.name, value, parentFields)}
               value={textValue as string || null} />
           </FieldBoundary>
         );
@@ -122,7 +130,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
             <NumberField 
               key={field.name}
               label={field.title || field.name}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)}
+              onChange={(value) => onSendUpdate(field.name, value, parentFields)}
               value={nrValue} />
           </FieldBoundary>
         );
@@ -136,7 +144,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               parents={parentFields}
               value={parent[field.name] as PreviewImageValue | PreviewImageValue[] | null}
               multiple={field.multiple}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)} />
+              onChange={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'choice') {
@@ -150,7 +158,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               selected={choiceValue as string}
               choices={choices}
               multiSelect={field.multiple}
-              onChange={(value => sendUpdate(field.name, value, parentFields))} />
+              onChange={(value => onSendUpdate(field.name, value, parentFields))} />
           </FieldBoundary>
         );
       } else if (field.type === 'tags') {
@@ -214,7 +222,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               type={draftField?.type || "boolean"}
               choices={draftField?.choices || []}
               value={value as boolean | string | null | undefined}
-              onChanged={(value: boolean | string) => sendUpdate(field.name, value, parentFields)} />
+              onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'fields') { 
@@ -241,12 +249,27 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <JsonFieldField
+            <JsonField
               label={field.title || field.name}
               settings={settings}
               field={field}
               value={collectionData}
-              onSubmit={(value) => sendUpdate(field.name, value, parentFields)} />
+              onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
+          </FieldBoundary>
+        );
+      } else if (field.type === 'block') {
+        const blockData = parent[field.name];
+
+        return (
+          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+            <DataBlockField
+              label={field.title || field.name}
+              settings={settings}
+              field={field}
+              value={blockData}
+              fieldsRenderer={renderFields}
+              parentFields={parentFields}
+              onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
       } else {
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 94cd48a8..129d190b 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -1,5 +1,12 @@
 
-.data_block__field {
+.block_field__form {
+  background-color: transparent;
+  border: 1px dashed var(--vscode-button-background);
+  padding: 1rem;
+  filter: brightness(85%);
+}
+
+.json_data__field {
   border: 1px dashed var(--vscode-button-secondaryBackground);
   color: var(--vscode--settings-headerForeground);
   padding: .5rem 1rem;
@@ -22,7 +29,7 @@
     margin-bottom: .5rem;
 
     &:last-child {
-      .data_block__selector h3 {
+      .json_data__selector h3 {
         font-size: 1rem;
         font-weight: bold;
         text-align: center;
@@ -33,7 +40,7 @@
   }
 }
 
-.data_block__selector {
+.json_data__selector {
   h3 {
     font-size: var(--vscode-font-size);
     font-weight: bold;
@@ -45,7 +52,7 @@
   }
 }
 
-.data_block__buttons {
+.json_data__buttons {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -79,7 +86,7 @@
   }
 }
 
-.data_block__list {
+.json_data__list {
   margin-top: 1rem;
 
   label {
@@ -125,7 +132,7 @@
   }
 }
 
-.data_block__list .metadata_field__label {
+.json_data__list .metadata_field__label {
   justify-content: space-between;
 
   > div {
@@ -138,14 +145,14 @@
   }
 }
 
-.data_block__record {
+.json_data__record {
   border-bottom: 1px solid var(--vscode-button-secondaryBackground);
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: .5rem 0;
 
-  &.data_block__record_selected {
+  &.json_data__record_selected {
     background-color: rgba(255, 255, 255, .1);
     filter: brightness(100%);
   }
@@ -188,7 +195,7 @@
 }
 
 .sortable_item button,
-.data_block__list__button {
+.json_data__list__button {
   width: auto;
   background: none;
   color: inherit;
@@ -203,7 +210,7 @@
   }
 }
 
-.data_block__list__button_icon {
+.json_data__list__button_icon {
   height: 1rem;
   width: 1rem;
 }

From cf6f051ee8368d2d7ec543af6c54c094e6e04618 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 11:38:13 -0800
Subject: [PATCH 27/62] Fix background color + labels

---
 src/panelWebView/components/Fields/ChoiceField.tsx | 2 +-
 src/panelWebView/styles.css                        | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/panelWebView/components/Fields/ChoiceField.tsx b/src/panelWebView/components/Fields/ChoiceField.tsx
index 3727c5d2..87b46673 100644
--- a/src/panelWebView/components/Fields/ChoiceField.tsx
+++ b/src/panelWebView/components/Fields/ChoiceField.tsx
@@ -92,7 +92,7 @@ export const ChoiceField: React.FunctionComponent<IChoiceFieldProps> = ({label,
                 className: `metadata_field__choice__toggle`,
                 disabled: availableChoices.length === 0 
               })}>
-              <span>{`Select your ${label} value`}</span>
+              <span>{`Select ${label}`}</span>
               <ChevronDownIcon className="icon" />
             </button>
 
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 129d190b..60cef643 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -3,7 +3,6 @@
   background-color: transparent;
   border: 1px dashed var(--vscode-button-background);
   padding: 1rem;
-  filter: brightness(85%);
 }
 
 .json_data__field {
@@ -16,7 +15,6 @@
     background-color: transparent;
     border: 1px dashed var(--vscode-button-background);
     padding: 1rem;
-    filter: brightness(85%);
 
     h3 {
       font-size: 1rem;

From e5a2194c23537234701dda814d138ec8ccde2f49 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 12:42:45 -0800
Subject: [PATCH 28/62] #176 - `Fields` field support

---
 .../components/DataBlock/DataBlockField.tsx   | 32 +++++++++++++++++--
 src/panelWebView/components/Metadata.tsx      | 10 ++++--
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 16762fae..c3478584 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -23,7 +23,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
   const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
   const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
 
-  const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any) => {
+  const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any, parents: string[]) => {
     const dataClone: any[] = Object.assign([], value);
 
     if (!crntField) {
@@ -32,14 +32,40 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     
     if (selectedIndex !== null && selectedIndex !== undefined) {
       const data = Object.assign({}, dataClone[selectedIndex]);
+
+      let parentObj: any = data;
+      if (parents.length > 1) {
+        parents.shift();
+        for (const parent of parents) {
+          if (!data[parent]) {
+            data[parent] = {};
+          }
+
+          parentObj = data[parent];
+        }
+      }
+
+      parentObj[crntField] = crntValue;
+
       dataClone[selectedIndex] = {
         ...data,
-        [crntField]: crntValue,
         fieldGroup: selectedGroup?.id
       };
     } else {
+      const data: any = {};
+      let parentObj: any = data;
+      if (parents.length > 1) {
+        parents.shift();
+        for (const parent of parents) {
+          data[parent] = {};
+          parentObj = data[parent];
+        }
+      }
+
+      parentObj[crntField] = crntValue;
+
       dataClone.push({
-        [crntField]: crntValue,
+        ...data,
         fieldGroup: selectedGroup?.id
       });
 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index f4a990ce..ed9c5584 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -225,8 +225,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
-      } else if (field.type === 'fields') { 
-        if (field.fields && parent && parent[field.name]) {
+      } else if (field.type === 'fields') {
+        if (field.fields && parent) {
+          if (!parent[field.name]) {
+            parent[field.name] = {};
+          }
+
           const subMetadata = parent[field.name] as IMetadata;
           return (
             <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -237,7 +241,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
                   </div>
                 </VsLabel>
 
-                { renderFields(field.fields, subMetadata, [...parentFields, field.name]) }
+                { renderFields(field.fields, subMetadata, [...parentFields, field.name], onFieldUpdate) }
               </div>
             </FieldBoundary>
           );

From 1aa2d41c9502076fec041b57524e71dc0637a901 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 15:45:16 -0800
Subject: [PATCH 29/62] #176 - Image field support added for block field

---
 .../components/Media/Item.tsx                 |  1 +
 .../components/Media/Media.tsx                |  7 +-
 src/helpers/MediaHelpers.ts                   |  7 +-
 src/listeners/panel/DataListener.ts           | 73 +++++++++++++++++--
 src/models/BlockFieldData.ts                  |  7 ++
 src/models/index.ts                           |  1 +
 .../components/DataBlock/DataBlockField.tsx   | 71 ++++++++++++++++--
 .../components/Fields/PreviewImageField.tsx   | 21 +++++-
 src/panelWebView/components/Metadata.tsx      | 18 +++--
 9 files changed, 176 insertions(+), 30 deletions(-)
 create mode 100644 src/models/BlockFieldData.ts

diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 35d5c6e8..54e259f8 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -81,6 +81,7 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
       multiple: viewData?.data?.multiple,
       value: viewData?.data?.value,
       position: viewData?.data?.position || null,
+      blockData: typeof viewData?.data?.blockData !== "undefined" ? viewData?.data?.blockData : undefined,
       alt: alt || "",
       caption: caption || ""
     });
diff --git a/src/dashboardWebView/components/Media/Media.tsx b/src/dashboardWebView/components/Media/Media.tsx
index 7263ac25..7f33f42e 100644
--- a/src/dashboardWebView/components/Media/Media.tsx
+++ b/src/dashboardWebView/components/Media/Media.tsx
@@ -1,11 +1,8 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { EventData } from '@estruyf/vscode/dist/models';
 import {UploadIcon} from '@heroicons/react/outline';
 import * as React from 'react';
-import { useRecoilState, useRecoilValue } from 'recoil';
-import { MediaInfo, MediaPaths } from '../../../models/MediaPaths';
-import { DashboardCommand } from '../../DashboardCommand';
-import { LoadingAtom, MediaFoldersAtom, MediaTotalAtom, SelectedMediaFolderAtom, SettingsSelector, ViewDataSelector } from '../../state';
+import { useRecoilValue } from 'recoil';
+import { LoadingAtom, MediaFoldersAtom, SelectedMediaFolderAtom, SettingsSelector, ViewDataSelector } from '../../state';
 import { Header } from '../Header';
 import { Spinner } from '../Spinner';
 import { SponsorMsg } from '../SponsorMsg';
diff --git a/src/helpers/MediaHelpers.ts b/src/helpers/MediaHelpers.ts
index 13f2800c..3383977b 100644
--- a/src/helpers/MediaHelpers.ts
+++ b/src/helpers/MediaHelpers.ts
@@ -305,7 +305,12 @@ export class MediaHelpers {
         MediaListener.getMediaSelection();
       } else {
         MediaListener.getMediaSelection();
-        DataListener.updateMetadata({field: data.fieldName, value: data.image, parents: data.parents });
+        DataListener.updateMetadata({
+          field: data.fieldName, 
+          value: data.image, 
+          parents: data.parents,
+          blockData: data.blockData
+        });
       }
     }
   }
diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts
index 0c3d2b31..b7902b6c 100644
--- a/src/listeners/panel/DataListener.ts
+++ b/src/listeners/panel/DataListener.ts
@@ -1,3 +1,4 @@
+import { BlockFieldData } from './../../models/BlockFieldData';
 import { ImageHelper } from './../../helpers/ImageHelper';
 import { Folders } from "../../commands/Folders";
 import { Command } from "../../panelWebView/Command";
@@ -101,7 +102,18 @@ export class DataListener extends BaseListener {
   /**
    * Update the metadata of the article
    */
-  public static async updateMetadata({field, parents, value }: { field: string, value: any, parents?: string[], fieldData?: { multiple: boolean, value: string[] } }) {
+  public static async updateMetadata({
+    field, 
+    parents, 
+    value, 
+    blockData 
+  }: { 
+    field: string, 
+    value: any, 
+    parents?: string[], 
+    blockData?: BlockFieldData,
+    fieldData?: { multiple: boolean, value: string[] } 
+  }) {
     if (!field) {
       return;
     }
@@ -117,18 +129,63 @@ export class DataListener extends BaseListener {
     }
 
     const contentType = ArticleHelper.getContentType(article.data);
-    const dateFields = contentType.fields.filter((field) => field.type === "datetime");
-    const imageFields = contentType.fields.filter((field) => field.type === "image" && field.multiple);
+    const dateFields = contentType.fields.filter((f) => f.type === "datetime");
+    const imageFields = contentType.fields.filter((f) => f.type === "image" && f.multiple);
 
     // Support multi-level fields
     let parentObj = article.data;
-    for (const parent of parents || []) {
-      // If parent doesn't yet exists, it needs to be created
-      if (!parentObj[parent]) {
-        parentObj[parent] = {};
+    let allParents = Object.assign([], parents);
+
+    // Add support for block fields
+    if (blockData?.parentFields) {
+      let crntField = null;
+      parentObj = article.data;
+
+      // Loop through the parents of the block field
+      for (const parent of blockData?.parentFields) {
+        if (!parentObj[parent]) {
+          parentObj[parent] = {};
+        }
+
+        if (allParents[0] && allParents[0] === parent) {
+          allParents.shift();
+        }
+        
+        parentObj = parentObj[parent];
+        crntField = contentType.fields.find(f => f.name === parent);
+      }
+
+      // Fetches the current block
+      if (blockData && crntField && crntField.type === 'block') {
+        if (typeof blockData.selectedIndex !== 'undefined') {
+          parentObj = parentObj[blockData.selectedIndex];
+        } else {
+          parentObj.push({
+            fieldGroup: blockData.blockType
+          });
+          parentObj = parentObj[parentObj.length - 1];
+        }
       }
 
-      parentObj = parentObj[parent];
+      // Check if there are parents left
+      if (allParents.length > 0) {
+        for (const parent of allParents) {
+          if (!parentObj[parent]) {
+            parentObj[parent] = {};
+          }
+
+          parentObj = parentObj[parent];
+        }
+      }
+    } else {
+      for (const parent of parents || []) {
+        // If parent doesn't yet exists, it needs to be created
+        if (!parentObj[parent]) {
+          parentObj[parent] = {};
+        }
+
+        parentObj = parentObj[parent];
+      }
     }
 
     for (const dateField of dateFields) {
diff --git a/src/models/BlockFieldData.ts b/src/models/BlockFieldData.ts
new file mode 100644
index 00000000..7e1cf785
--- /dev/null
+++ b/src/models/BlockFieldData.ts
@@ -0,0 +1,7 @@
+
+
+export interface BlockFieldData {
+  parentFields: string[] | undefined;
+  blockType: string | undefined;
+  selectedIndex: number | undefined;
+}
\ No newline at end of file
diff --git a/src/models/index.ts b/src/models/index.ts
index d10b96b9..680f6091 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -1,3 +1,4 @@
+export * from './BlockFieldData';
 export * from './Choice';
 export * from './ContentFolder';
 export * from './CustomTaxonomyData';
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index c3478584..ae60272f 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { useState, useCallback } from 'react';
-import { Field, FieldGroup, PanelSettings } from '../../../models';
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { BlockFieldData, Field, FieldGroup, PanelSettings } from '../../../models';
 import { PencilIcon } from '@heroicons/react/outline';
 import { VsLabel } from '../VscodeComponents';
 import { DataBlockRecords, DataBlockSelector } from '.';
 import { SortEnd } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 import { IMetadata } from '../Metadata';
+import { MessageHelper } from '../../../helpers/MessageHelper';
 
 export interface IDataBlockFieldProps {
   label: string;
@@ -14,22 +15,31 @@ export interface IDataBlockFieldProps {
   field: Field;
   parentFields: string[];
   value: any;
-  fieldsRenderer: (ctFields: Field[], parent: IMetadata, parentFields?: string[], onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void) => (JSX.Element | null)[] | undefined
+  filePath: string;
+  fieldsRenderer: (
+    ctFields: Field[], 
+    parent: IMetadata, 
+    parentFields?: string[], 
+    blockData?: BlockFieldData,
+    onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void
+  ) => (JSX.Element | null)[] | undefined
   onSubmit: (data: any) => void;
 }
 
-export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, settings, field, parentFields = [], value, fieldsRenderer, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
+export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
   const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
   const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
 
+  const stateKey = useMemo(() => `${filePath}-data_block-${field.name}`, [filePath, field.name]);
+
   const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any, parents: string[]) => {
     const dataClone: any[] = Object.assign([], value);
 
     if (!crntField) {
       return;
     }
-    
+
     if (selectedIndex !== null && selectedIndex !== undefined) {
       const data = Object.assign({}, dataClone[selectedIndex]);
 
@@ -71,6 +81,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
       const newIndex = dataClone.length - 1;
       setSelectedIndex(newIndex);
+      updateState(newIndex);
     }
 
     onSubmit(dataClone);
@@ -91,7 +102,8 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     setSelectedGroup(group);
 
     if (!group) {
-      setSelectedIndex(null);
+      // Clear the selected index
+      onAdd();
     }
   }
 
@@ -99,9 +111,13 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     setSelectedIndex(null);
     setSelectedGroup(null);
     setSelectedBlockData({});
+
+    updateState(undefined);
   }, [setSelectedIndex, setSelectedGroup, setSelectedBlockData]); 
   
   const onEdit = useCallback((index: number) => {
+    updateState(index);
+
     setSelectedIndex(index);
 
     const fieldData = value[index];
@@ -125,6 +141,31 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     const newEntries = arrayMoveImmutable(value, oldIndex, newIndex);
     onSubmit(newEntries);
   }, [value, selectedIndex]);
+
+  // Retrieving the state from local storage (does not need to be persistent)
+  const retrieveState = useCallback(() => {
+    const prevState = localStorage.getItem(stateKey);
+    return prevState ? parseInt(prevState) : undefined;
+  }, [stateKey]);
+
+  // Storing the state to local storage (does not need to be persistent)
+  const updateState = useCallback((value: number | undefined) => {
+    localStorage.setItem(stateKey, value as any);
+  }, [stateKey]);
+
+  useEffect(() => {
+    if (selectedIndex !== null) {
+      const fieldData = value[selectedIndex];
+      setSelectedBlockData(fieldData);
+    }
+  } , [selectedIndex, value, setSelectedBlockData]);
+
+  useEffect(() => {
+    const stateIdx = retrieveState();
+    if (stateIdx !== undefined) {
+      onEdit(stateIdx);
+    }
+  }, []);
   
   return (
     <div className='json_data__field'>
@@ -144,7 +185,23 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       {
         selectedGroup?.fields && (
           <div className='block_field__form'>
-            { fieldsRenderer(selectedGroup?.fields, selectedBlockData || {}, [...parentFields, field.name], onFieldUpdate) }
+            <h3>
+              {selectedIndex !== null ? `Editing: ${selectedGroup.id} ${selectedIndex + 1}` : `Create a new ${selectedGroup?.id}`}
+            </h3>
+
+            { 
+              fieldsRenderer(
+                selectedGroup?.fields, 
+                selectedBlockData || {}, 
+                [...parentFields, field.name], 
+                {
+                  parentFields: [...parentFields, field.name],
+                  blockType: selectedGroup?.id || undefined,
+                  selectedIndex: selectedIndex === null ? undefined : selectedIndex
+                }, 
+                onFieldUpdate
+              ) 
+            }
           </div>
         )
       }
diff --git a/src/panelWebView/components/Fields/PreviewImageField.tsx b/src/panelWebView/components/Fields/PreviewImageField.tsx
index 11100645..b8aefc6f 100644
--- a/src/panelWebView/components/Fields/PreviewImageField.tsx
+++ b/src/panelWebView/components/Fields/PreviewImageField.tsx
@@ -1,6 +1,8 @@
 import {PhotographIcon} from '@heroicons/react/outline';
 import * as React from 'react';
+import { useCallback } from 'react';
 import { MessageHelper } from '../../../helpers/MessageHelper';
+import { BlockFieldData } from '../../../models';
 import { CommandToCode } from '../../CommandToCode';
 import { VsLabel } from '../VscodeComponents';
 import { PreviewImage } from './PreviewImage';
@@ -17,21 +19,32 @@ export interface IPreviewImageFieldProps {
   filePath: string | null;
   parents?: string[];
   multiple?: boolean;
+  blockData?: BlockFieldData;
   onChange: (value: string | string[] | null) => void;
 }
 
-export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps> = ({label, fieldName, onChange, value, filePath, multiple, parents}: React.PropsWithChildren<IPreviewImageFieldProps>) => {
+export const PreviewImageField: React.FunctionComponent<IPreviewImageFieldProps> = ({
+  label, 
+  fieldName, 
+  blockData, 
+  onChange, 
+  value, 
+  filePath, 
+  multiple, 
+  parents
+}: React.PropsWithChildren<IPreviewImageFieldProps>) => {
 
-  const selectImage = () => {
+  const selectImage = useCallback(() => {
     MessageHelper.sendMessage(CommandToCode.selectImage, { 
       filePath: filePath,
       fieldName,
       value,
       multiple,
       metadataInsert: true,
-      parents
+      parents,
+      blockData
     });
-  };
+  }, [filePath, fieldName, value, multiple, parents]);
 
   const onImageRemove = (imageToRemove: string) => {
     const newValue = value && Array.isArray(value) ? value.filter(image => image.original !== imageToRemove).map(i => i.original) : null;
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index ed9c5584..a1940d7c 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Field, PanelSettings } from '../../models';
+import { BlockFieldData, Field, PanelSettings } from '../../models';
 import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { TagType } from '../TagType';
@@ -57,7 +57,13 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
     return null;
   }
 
-  const renderFields = (ctFields: Field[], parent: IMetadata, parentFields: string[] = [], onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void) => {
+  const renderFields = (
+    ctFields: Field[], 
+    parent: IMetadata, 
+    parentFields: string[] = [], 
+    blockData?: BlockFieldData,
+    onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void,
+  ) => {
     if (!ctFields) {
       return;
     }
@@ -144,6 +150,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               parents={parentFields}
               value={parent[field.name] as PreviewImageValue | PreviewImageValue[] | null}
               multiple={field.multiple}
+              blockData={blockData}
               onChange={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
@@ -241,7 +248,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
                   </div>
                 </VsLabel>
 
-                { renderFields(field.fields, subMetadata, [...parentFields, field.name], onFieldUpdate) }
+                { renderFields(field.fields, subMetadata, [...parentFields, field.name], blockData, onFieldUpdate) }
               </div>
             </FieldBoundary>
           );
@@ -262,8 +269,8 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           </FieldBoundary>
         );
       } else if (field.type === 'block') {
-        const blockData = parent[field.name];
-
+        const blockData = Object.assign([], parent[field.name]);
+        
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
             <DataBlockField
@@ -273,6 +280,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               value={blockData}
               fieldsRenderer={renderFields}
               parentFields={parentFields}
+              filePath={metadata.filePath as string}
               onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );

From 442261e6557e21c3a0cd997faf2816e3c776adab Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 16:07:59 -0800
Subject: [PATCH 30/62] #176 - Taxonomy field support added to block field

---
 assets/media/styles.css                   |  1 +
 src/listeners/panel/DataListener.ts       | 74 ++++++++++++++---------
 src/listeners/panel/TaxonomyListener.ts   | 22 +++----
 src/models/CustomTaxonomyData.ts          |  2 +
 src/panelWebView/components/Metadata.tsx  |  9 ++-
 src/panelWebView/components/TagPicker.tsx | 14 +++--
 6 files changed, 70 insertions(+), 52 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index 4f839e5d..ec9f85d4 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -143,6 +143,7 @@
 }
 
 .article__tags {
+  position: relative;
   margin-bottom: 1rem;
 }
 
diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts
index b7902b6c..33f301b2 100644
--- a/src/listeners/panel/DataListener.ts
+++ b/src/listeners/panel/DataListener.ts
@@ -8,6 +8,7 @@ import { commands, ThemeIcon, window } from 'vscode';
 import { ArticleHelper, Settings } from "../../helpers";
 import { COMMAND_NAME, DefaultFields, SETTING_COMMA_SEPARATED_FIELDS, SETTING_TAXONOMY_CONTENT_TYPES } from "../../constants";
 import { Article } from '../../commands';
+import { ParsedFrontMatter } from '../../parsers';
 
 const FILE_LIMIT = 10;
 
@@ -133,8 +134,50 @@ export class DataListener extends BaseListener {
     const imageFields = contentType.fields.filter((f) => f.type === "image" && f.multiple);
 
     // Support multi-level fields
-    let parentObj = article.data;
+    const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
+
+    for (const dateField of dateFields) {
+      if ((field === dateField.name) && value) {
+        parentObj[field] = Article.formatDate(new Date(value));
+      } else if (!imageFields.find(f => f.name === field)) {
+        // Only override the field data if it is not an multiselect image field
+        parentObj[field] = value;
+      }
+    }
+
+    for (const imageField of imageFields) {
+      if (field === imageField.name) {
+        // If value is an array, it means it comes from the explorer view itself (deletion)
+        if (Array.isArray(value)) {
+          parentObj[field] = value || [];
+        } else { // Otherwise it is coming from the media dashboard (addition)
+          let fieldValue = parentObj[field];
+          if (fieldValue && !Array.isArray(fieldValue)) {
+            fieldValue = [fieldValue];
+          }
+          const crntData = Object.assign([], fieldValue);
+          const allRelPaths = [...(crntData || []), value];
+          parentObj[field] = [...new Set(allRelPaths)].filter(f => f);
+        }
+      }
+    }
+    
+    ArticleHelper.update(editor, article);
+    this.pushMetadata(article.data);
+  }
+
+  /**
+   * Retrieve the parent object to update
+   * @param data 
+   * @param article 
+   * @param parents 
+   * @param blockData 
+   * @returns 
+   */
+  public static getParentObject(data: any, article: ParsedFrontMatter, parents: string[] | undefined, blockData?: BlockFieldData) {
+    let parentObj = data;
     let allParents = Object.assign([], parents);
+    const contentType = ArticleHelper.getContentType(article.data);
 
     // Add support for block fields
     if (blockData?.parentFields) {
@@ -188,34 +231,7 @@ export class DataListener extends BaseListener {
       }
     }
 
-    for (const dateField of dateFields) {
-      if ((field === dateField.name) && value) {
-        parentObj[field] = Article.formatDate(new Date(value));
-      } else if (!imageFields.find(f => f.name === field)) {
-        // Only override the field data if it is not an multiselect image field
-        parentObj[field] = value;
-      }
-    }
-
-    for (const imageField of imageFields) {
-      if (field === imageField.name) {
-        // If value is an array, it means it comes from the explorer view itself (deletion)
-        if (Array.isArray(value)) {
-          parentObj[field] = value || [];
-        } else { // Otherwise it is coming from the media dashboard (addition)
-          let fieldValue = parentObj[field];
-          if (fieldValue && !Array.isArray(fieldValue)) {
-            fieldValue = [fieldValue];
-          }
-          const crntData = Object.assign([], fieldValue);
-          const allRelPaths = [...(crntData || []), value];
-          parentObj[field] = [...new Set(allRelPaths)].filter(f => f);
-        }
-      }
-    }
-    
-    ArticleHelper.update(editor, article);
-    this.pushMetadata(article.data);
+    return parentObj;
   }
 
   /**
diff --git a/src/listeners/panel/TaxonomyListener.ts b/src/listeners/panel/TaxonomyListener.ts
index 6b1fa5de..675f3c88 100644
--- a/src/listeners/panel/TaxonomyListener.ts
+++ b/src/listeners/panel/TaxonomyListener.ts
@@ -3,7 +3,7 @@ import { TagType } from "../../panelWebView/TagType";
 import { BaseListener } from "./BaseListener";
 import { window } from "vscode";
 import { ArticleHelper, Settings } from "../../helpers";
-import { CustomTaxonomyData, TaxonomyType } from "../../models";
+import { BlockFieldData, CustomTaxonomyData, TaxonomyType } from "../../models";
 import { DataListener } from ".";
 import { SETTING_TAXONOMY_CATEGORIES, SETTING_TAXONOMY_TAGS } from "../../constants";
 
@@ -19,13 +19,13 @@ export class TaxonomyListener extends BaseListener {
 
     switch(msg.command) {
       case CommandToCode.updateTags:
-        this.updateTags(TagType.tags, msg.data?.values || [], msg.data?.parents || []);
+        this.updateTags(TagType.tags, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateCategories:
-        this.updateTags(TagType.categories, msg.data?.values || [], msg.data?.parents || []);
+        this.updateTags(TagType.categories, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateKeywords:
-        this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || []);
+        this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateCustomTaxonomy:
         this.updateCustomTaxonomy(msg.data);
@@ -47,7 +47,7 @@ export class TaxonomyListener extends BaseListener {
    * @param tagType 
    * @param values 
    */
-   private static updateTags(tagType: TagType, values: string[], parents: string[]) {
+   private static updateTags(tagType: TagType, values: string[], parents: string[], blockData?: BlockFieldData) {
     const editor = window.activeTextEditor;
     if (!editor) {
       return "";
@@ -56,11 +56,7 @@ export class TaxonomyListener extends BaseListener {
     const article = ArticleHelper.getFrontMatter(editor);
     if (article && article.data) {
 
-      // Support multi-level fields
-      let parentObj = article.data;
-      for (const parent of parents || []) {
-        parentObj = parentObj[parent];
-      }
+      const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
 
       parentObj[tagType.toLowerCase()] = values || [];
       ArticleHelper.update(editor, article);
@@ -85,11 +81,7 @@ export class TaxonomyListener extends BaseListener {
     const article = ArticleHelper.getFrontMatter(editor);
     if (article && article.data) {
 
-      // Support multi-level fields
-      let parentObj = article.data;
-      for (const parent of data.parents || []) {
-        parentObj = parentObj[parent];
-      }
+      const parentObj = DataListener.getParentObject(article.data, article, data.parents, data.blockData);
 
       parentObj[data.name] = data.options || [];
       ArticleHelper.update(editor, article);
diff --git a/src/models/CustomTaxonomyData.ts b/src/models/CustomTaxonomyData.ts
index f9b9f1b1..5862eecd 100644
--- a/src/models/CustomTaxonomyData.ts
+++ b/src/models/CustomTaxonomyData.ts
@@ -1,3 +1,4 @@
+import { BlockFieldData } from './BlockFieldData';
 
 export interface CustomTaxonomyData {
   id: string | undefined;
@@ -5,4 +6,5 @@ export interface CustomTaxonomyData {
   options?: string[] | undefined;
   option?: string | undefined;
   parents?: string[];
+  blockData?: BlockFieldData;
 }
\ No newline at end of file
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index a1940d7c..a075ab80 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -180,7 +180,8 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               freeform={settings.freeform || false} 
               focussed={focusElm === TagType.tags}
               unsetFocus={unsetFocus}
-              parents={parentFields} />
+              parents={parentFields}
+              blockData={blockData} />
           </FieldBoundary>
         );
       } else if (field.type === 'taxonomy') {
@@ -200,7 +201,8 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               unsetFocus={unsetFocus}
               fieldName={field.name}
               taxonomyId={field.taxonomyId}
-              parents={parentFields} />
+              parents={parentFields}
+              blockData={blockData} />
           </FieldBoundary>
         );
       } else if (field.type === 'categories') {
@@ -215,7 +217,8 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               freeform={settings.freeform || false} 
               focussed={focusElm === TagType.categories}
               unsetFocus={unsetFocus}
-              parents={parentFields} />
+              parents={parentFields}
+              blockData={blockData} />
           </FieldBoundary>
         );
       } else if (field.type === 'draft') {
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 3ce29307..7040e025 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -7,7 +7,7 @@ import Downshift from 'downshift';
 import { AddIcon } from './Icons/AddIcon';
 import { VsLabel } from './VscodeComponents';
 import { MessageHelper } from '../../helpers/MessageHelper';
-import { CustomTaxonomyData } from '../../models';
+import { BlockFieldData, CustomTaxonomyData } from '../../models';
 
 export interface ITagPickerProps {
   type: TagType;
@@ -19,6 +19,7 @@ export interface ITagPickerProps {
   unsetFocus: () => void;
 
   parents?: string[];
+  blockData?: BlockFieldData;
   label?: string;
   disableConfigurable?: boolean;
   fieldName?: string;
@@ -26,7 +27,7 @@ export interface ITagPickerProps {
 }
 
 const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
-  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents } = props;
+  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData } = props;
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
   const prevSelected = usePrevious(crntSelected);
@@ -69,12 +70,14 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
     if (type === TagType.tags) {
       MessageHelper.sendMessage(CommandToCode.updateTags, {
         values,
-        parents
+        parents,
+        blockData
       });
     } else if (type === TagType.categories) {
       MessageHelper.sendMessage(CommandToCode.updateCategories, {
         values,
-        parents
+        parents,
+        blockData
       });
     } else if (type === TagType.keywords) {
       MessageHelper.sendMessage(CommandToCode.updateKeywords, {
@@ -86,7 +89,8 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
         id: taxonomyId,
         name: fieldName,
         options: values,
-        parents
+        parents,
+        blockData
       } as CustomTaxonomyData);
     }
   };

From c9488e6661c79bcaa251c4b2bc59cf30f31466a1 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 14 Feb 2022 16:54:54 -0800
Subject: [PATCH 31/62] #176 - Fix image webview paths

---
 src/helpers/ImageHelper.ts                    |  5 ++-
 src/listeners/panel/MediaListener.ts          | 22 +++++++++++-
 src/panelWebView/Command.ts                   |  3 +-
 src/panelWebView/CommandToCode.ts             |  1 +
 .../components/Fields/PreviewImage.tsx        | 34 ++++++++++++++++++-
 5 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/helpers/ImageHelper.ts b/src/helpers/ImageHelper.ts
index adebc19f..d5567e51 100644
--- a/src/helpers/ImageHelper.ts
+++ b/src/helpers/ImageHelper.ts
@@ -55,11 +55,14 @@ export class ImageHelper {
 
     const staticPath = join(parseWinPath(wsFolder?.fsPath || ""), staticFolder || "", value);
     const contentFolderPath = filePath ? join(dirname(filePath), value) : null;
+    const workspaceFolderPath = wsFolder ? join(wsFolder.fsPath, value) : null;
 
     if (existsSync(staticPath)) {
       return Uri.file(staticPath);
     } else if (contentFolderPath && existsSync(contentFolderPath)) {
       return Uri.file(contentFolderPath);
+    } else if (workspaceFolderPath && existsSync(workspaceFolderPath)) {
+      return Uri.file(workspaceFolderPath);
     }
   }
 
@@ -100,7 +103,7 @@ export class ImageHelper {
     if (parentObj) {
       for (const field of imageFields) {
         if (parentObj[field.name]) {
-          const imageData = ImageHelper.allRelToAbs(field, parentObj[field.name])
+          const imageData = ImageHelper.allRelToAbs(field, parentObj[field.name]);
   
           if (imageData) {
             if (field.multiple && imageData instanceof Array) {
diff --git a/src/listeners/panel/MediaListener.ts b/src/listeners/panel/MediaListener.ts
index bf87c224..7df4cae0 100644
--- a/src/listeners/panel/MediaListener.ts
+++ b/src/listeners/panel/MediaListener.ts
@@ -1,6 +1,8 @@
-import { commands } from "vscode";
+import { ExplorerView } from './../../explorerView/ExplorerView';
+import { commands, window } from "vscode";
 import { Dashboard } from "../../commands/Dashboard";
 import { COMMAND_NAME } from "../../constants";
+import { ImageHelper } from "../../helpers";
 import { DashboardData } from "../../models";
 import { Command } from "../../panelWebView/Command";
 import { CommandToCode } from "../../panelWebView/CommandToCode";
@@ -20,6 +22,24 @@ export class MediaListener extends BaseListener {
       case CommandToCode.selectImage:
         this.selectMedia(msg);
         break;
+      case CommandToCode.getImageUrl:
+        this.generateUrl(msg.data);
+        break;
+    }
+  }
+
+  private static generateUrl(data: string) {
+    const filePath = window.activeTextEditor?.document.uri.fsPath;
+
+    const imgUrl = ImageHelper.relToAbs(filePath || "", data);
+    if (imgUrl) {
+      const viewUrl = ExplorerView.getInstance().getWebview()?.asWebviewUri(imgUrl);
+      if (viewUrl) {
+        this.sendMsg(Command.sendMediaUrl, {
+          original: data,
+          url: viewUrl.toString()
+        });
+      }
     }
   }
 
diff --git a/src/panelWebView/Command.ts b/src/panelWebView/Command.ts
index 7236f776..410a1cf4 100644
--- a/src/panelWebView/Command.ts
+++ b/src/panelWebView/Command.ts
@@ -6,5 +6,6 @@ export enum Command {
   focusOnCategories = "focusOnCategories",
   closeSections = "closeSections",
   folderInfo = "folderInfo",
-  mediaSelectionData = "mediaSelectionData"
+  mediaSelectionData = "mediaSelectionData",
+  sendMediaUrl = "sendMediaUrl",
 }
\ No newline at end of file
diff --git a/src/panelWebView/CommandToCode.ts b/src/panelWebView/CommandToCode.ts
index e55cf729..800c4942 100644
--- a/src/panelWebView/CommandToCode.ts
+++ b/src/panelWebView/CommandToCode.ts
@@ -30,4 +30,5 @@ export enum CommandToCode {
   addToCustomTaxonomy = "addToCustomTaxonomy",
   frameworkCommand = "framework-command",
   updateStartCommand = "update-start-command",
+  getImageUrl = "get-image-url",
 }
\ No newline at end of file
diff --git a/src/panelWebView/components/Fields/PreviewImage.tsx b/src/panelWebView/components/Fields/PreviewImage.tsx
index e9ba1c6c..7451c83a 100644
--- a/src/panelWebView/components/Fields/PreviewImage.tsx
+++ b/src/panelWebView/components/Fields/PreviewImage.tsx
@@ -1,4 +1,8 @@
 import * as React from 'react';
+import { useEffect, useState } from 'react';
+import { MessageHelper } from '../../../helpers/MessageHelper';
+import { Command } from '../../Command';
+import { CommandToCode } from '../../CommandToCode';
 import { ImageFallback } from './ImageFallback';
 import { PreviewImageValue } from './PreviewImageField';
 
@@ -8,10 +12,38 @@ export interface IPreviewImageProps {
 }
 
 export const PreviewImage: React.FunctionComponent<IPreviewImageProps> = ({ value, onRemove }: React.PropsWithChildren<IPreviewImageProps>) => {
+  const [ imgUrl, setImgUrl ] = useState("");
+
+  const listener = (event: any) => {
+    const message = event.data;
+
+    if (message.command === Command.sendMediaUrl) {
+      const data = message.data;
+      if (data?.original === value && data.url) {
+        setImgUrl(data.url);
+      }
+    }
+  }
+
+  useEffect(() => {
+    if (value?.webviewUrl) {
+      setImgUrl(value.webviewUrl);
+    } else {
+      MessageHelper.sendMessage(CommandToCode.getImageUrl, value)
+    }
+  }, [value]);
+
+  useEffect(() => {
+    window.addEventListener('message', listener);
+
+    return () => {
+      window.removeEventListener('message', listener);
+    }
+  }, []);
 
   return (
     <div className={`metadata_field__preview_image__preview`}>
-      <ImageFallback src={value.webviewUrl} />
+      <ImageFallback src={imgUrl} />
 
       <button type="button" onClick={() => onRemove(value.original)} className={`metadata_field__preview_image__remove`}>Remove image</button>
     </div>

From 2775b2051f4b4ca382a8e43e678f5d379db30c00 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 15 Feb 2022 07:41:52 -0800
Subject: [PATCH 32/62] #176 - Save + cancel button and fixes in data storage

---
 .../components/DataBlock/DataBlockField.tsx   | 174 ++++++++++++------
 src/panelWebView/components/Metadata.tsx      |   4 +
 src/panelWebView/styles.css                   |  36 ++++
 3 files changed, 153 insertions(+), 61 deletions(-)

diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index ae60272f..13e3e943 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -7,7 +7,6 @@ import { DataBlockRecords, DataBlockSelector } from '.';
 import { SortEnd } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 import { IMetadata } from '../Metadata';
-import { MessageHelper } from '../../../helpers/MessageHelper';
 
 export interface IDataBlockFieldProps {
   label: string;
@@ -21,17 +20,21 @@ export interface IDataBlockFieldProps {
     parent: IMetadata, 
     parentFields?: string[], 
     blockData?: BlockFieldData,
-    onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void
+    onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void,
+    parentBlock?: string | null
   ) => (JSX.Element | null)[] | undefined
   onSubmit: (data: any) => void;
+  parentBlock: string | null | undefined;
 }
 
-export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit }: React.PropsWithChildren<IDataBlockFieldProps>) => {
+export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({ label, filePath, settings, field, parentFields = [], value, fieldsRenderer, onSubmit, parentBlock }: React.PropsWithChildren<IDataBlockFieldProps>) => {
   const [ selectedIndex, setSelectedIndex ] = useState<number | null>(null);
   const [ selectedGroup, setSelectedGroup ] = useState<FieldGroup | undefined | null>(null);
   const [ selectedBlockData, setSelectedBlockData ] = useState<any | null>(null);
+  const [ hideSubBlock, setHideSubBlock ] = useState<boolean>(true);
 
-  const stateKey = useMemo(() => `${filePath}-data_block-${field.name}`, [filePath, field.name]);
+  const SELECTION_STATE_KEY = useMemo(() => `${filePath}-data-selection-${field.name}`, [filePath, field.name]);
+  const DATA_STATE_KEY = useMemo(() => `${filePath}-data-state-${field.name}`, [filePath, field.name]);
 
   const onFieldUpdate = useCallback((crntField: string | undefined, crntValue: any, parents: string[]) => {
     const dataClone: any[] = Object.assign([], value);
@@ -40,40 +43,21 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       return;
     }
 
+    let data: any = {};
     if (selectedIndex !== null && selectedIndex !== undefined) {
-      const data = Object.assign({}, dataClone[selectedIndex]);
-
-      let parentObj: any = data;
-      if (parents.length > 1) {
-        parents.shift();
-        for (const parent of parents) {
-          if (!data[parent]) {
-            data[parent] = {};
-          }
-
-          parentObj = data[parent];
-        }
-      }
+      data = Object.assign({}, dataClone[selectedIndex]);
+    }
+
+    let parentObj: any = data;
+    parentObj[crntField] = crntValue;
 
-      parentObj[crntField] = crntValue;
 
+    if (selectedIndex !== null && selectedIndex !== undefined) {
       dataClone[selectedIndex] = {
         ...data,
         fieldGroup: selectedGroup?.id
       };
     } else {
-      const data: any = {};
-      let parentObj: any = data;
-      if (parents.length > 1) {
-        parents.shift();
-        for (const parent of parents) {
-          data[parent] = {};
-          parentObj = data[parent];
-        }
-      }
-
-      parentObj[crntField] = crntValue;
-
       dataClone.push({
         ...data,
         fieldGroup: selectedGroup?.id
@@ -81,7 +65,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
       const newIndex = dataClone.length - 1;
       setSelectedIndex(newIndex);
-      updateState(newIndex);
+      updateSelectionState(newIndex);
     }
 
     onSubmit(dataClone);
@@ -96,6 +80,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
 
     dataClone.splice(index, 1);
     onSubmit(dataClone);
+    onAdd();
   }, [value, selectedIndex, onSubmit]);
 
   const onGroupChange = (group: FieldGroup | null | undefined) => {
@@ -107,19 +92,53 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
     }
   }
 
+  /**
+   * Store the current state + show the form
+   */
+  const onShowForm = () => {
+    const dataClone = Object.assign([], value);
+    localStorage.setItem(DATA_STATE_KEY, JSON.stringify(dataClone));
+    setHideSubBlock(false);
+  };
+
+  /**
+   * Reset the state back to the state before editing
+   */
+  const onCancelForm = () => {
+    const prevState = localStorage.getItem(DATA_STATE_KEY);
+    if (prevState) {
+      const dataClone = JSON.parse(prevState);
+      onSubmit(dataClone);
+    }
+    setHideSubBlock(true);
+    onAdd();
+  };
+
+  /**
+   * Remove the previous state and hide the form
+   */
+  const onSaveForm = () => {
+    localStorage.removeItem(DATA_STATE_KEY);
+    setHideSubBlock(true);
+    onAdd();
+  };
+
+
   const onAdd = useCallback(() => {
     setSelectedIndex(null);
     setSelectedGroup(null);
     setSelectedBlockData({});
 
-    updateState(undefined);
+    updateSelectionState(undefined);
   }, [setSelectedIndex, setSelectedGroup, setSelectedBlockData]); 
   
   const onEdit = useCallback((index: number) => {
-    updateState(index);
-
+    updateSelectionState(index);
     setSelectedIndex(index);
 
+    // Show the form
+    onShowForm();
+
     const fieldData = value[index];
     if (index !== null && settings?.fieldGroups) {
       const fieldGroup = fieldData?.fieldGroup;
@@ -143,15 +162,16 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
   }, [value, selectedIndex]);
 
   // Retrieving the state from local storage (does not need to be persistent)
-  const retrieveState = useCallback(() => {
-    const prevState = localStorage.getItem(stateKey);
-    return prevState ? parseInt(prevState) : undefined;
-  }, [stateKey]);
+  const retrieveSelectionState = useCallback(() => {
+    const prevState = localStorage.getItem(SELECTION_STATE_KEY);
+    const prevStateValue = prevState ? parseInt(prevState) : null;
+    return prevStateValue === null || isNaN(prevStateValue) ? undefined : prevStateValue;
+  }, [SELECTION_STATE_KEY]);
 
   // Storing the state to local storage (does not need to be persistent)
-  const updateState = useCallback((value: number | undefined) => {
-    localStorage.setItem(stateKey, value as any);
-  }, [stateKey]);
+  const updateSelectionState = useCallback((value: number | undefined) => {
+    localStorage.setItem(SELECTION_STATE_KEY, value as any);
+  }, [SELECTION_STATE_KEY]);
 
   useEffect(() => {
     if (selectedIndex !== null) {
@@ -161,11 +181,21 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
   } , [selectedIndex, value, setSelectedBlockData]);
 
   useEffect(() => {
-    const stateIdx = retrieveState();
+    if (parentBlock) {
+      onAdd();
+    }
+  }, [parentBlock]);
+  
+  useEffect(() => {
+    const stateIdx = retrieveSelectionState();
     if (stateIdx !== undefined) {
       onEdit(stateIdx);
     }
   }, []);
+
+  if (parentBlock === null) {
+    return null;
+  }
   
   return (
     <div className='json_data__field'>
@@ -176,33 +206,55 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
         </div>
       </VsLabel>
 
-      <DataBlockSelector
-        field={field}
-        selectedGroup={selectedGroup?.id}
-        fieldGroups={settings.fieldGroups}
-        onGroupChange={onGroupChange} />
-
       {
-        selectedGroup?.fields && (
+        (!hideSubBlock) ? (
           <div className='block_field__form'>
             <h3>
-              {selectedIndex !== null ? `Editing: ${selectedGroup.id} ${selectedIndex + 1}` : `Create a new ${selectedGroup?.id}`}
+              {
+                selectedGroup?.id ? (
+                  selectedIndex !== null ? `Editing: ${selectedGroup.id} ${selectedIndex + 1}` : `Create a new ${selectedGroup?.id}`
+                ) : (
+                  `Select a group`
+                )
+              }
             </h3>
 
+            <DataBlockSelector
+              field={field}
+              selectedGroup={selectedGroup?.id}
+              fieldGroups={settings.fieldGroups}
+              onGroupChange={onGroupChange} />
+
             { 
-              fieldsRenderer(
-                selectedGroup?.fields, 
-                selectedBlockData || {}, 
-                [...parentFields, field.name], 
-                {
-                  parentFields: [...parentFields, field.name],
-                  blockType: selectedGroup?.id || undefined,
-                  selectedIndex: selectedIndex === null ? undefined : selectedIndex
-                }, 
-                onFieldUpdate
-              ) 
+              selectedGroup?.fields && (
+                fieldsRenderer(
+                  selectedGroup?.fields, 
+                  selectedBlockData || {}, 
+                  [...parentFields, field.name], 
+                  {
+                    parentFields: [...parentFields, field.name],
+                    blockType: selectedGroup?.id || undefined,
+                    selectedIndex: selectedIndex === null ? undefined : selectedIndex
+                  }, 
+                  onFieldUpdate,
+                  selectedIndex === null ? null : `${field.name}-${selectedGroup?.id}-${selectedIndex}`
+                ) 
+              )
             }
+
+            <div className={`block_field__form__buttons`}>
+              <button 
+                className={`block_field__form__button__save`} 
+                title={`Save`} 
+                onClick={onSaveForm}>Save</button>
+              <button 
+                className={`block_field__form__button__cancel`} 
+                title={`Cancel`} 
+                onClick={onCancelForm}>Cancel</button>
+            </div>
           </div>
+        ) : (
+          <button onClick={onShowForm}>Add {field.name}</button>
         )
       }
 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index a075ab80..468035b9 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -63,6 +63,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
     parentFields: string[] = [], 
     blockData?: BlockFieldData,
     onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void,
+    parentBlock?: string | null
   ) => {
     if (!ctFields) {
       return;
@@ -106,6 +107,8 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
       } else if (field.type === 'string') {
         const textValue = parent[field.name];
 
+        console.log(textValue, parent, field)
+
         let limit = -1;
         if (field.name === 'title') {
           limit = settings?.seo.title;
@@ -284,6 +287,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               fieldsRenderer={renderFields}
               parentFields={parentFields}
               filePath={metadata.filePath as string}
+              parentBlock={parentBlock}
               onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 60cef643..11228c25 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -5,6 +5,42 @@
   padding: 1rem;
 }
 
+.block_field__form__buttons {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+
+  button {
+    margin: 0 1rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.block_field__form__button__save {
+  background-color: var(--vscode-button-background);
+  color: var(--vscode-button-foreground);
+
+  &:hover {
+    background-color: var(--vscode-button-hoverBackground);
+  }
+}
+
+.block_field__form__button__cancel {
+  background-color: var(--vscode-button-secondaryBackground);
+  color: var(--vscode-button-secondaryForeground);
+
+  &:hover {
+    background-color: var(--vscode-button-secondaryHoverBackground);
+  }
+}
+
 .json_data__field {
   border: 1px dashed var(--vscode-button-secondaryBackground);
   color: var(--vscode--settings-headerForeground);

From 6dcd89e9cda52956a679cbea1bf49d076ad85497 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 15 Feb 2022 11:13:46 -0800
Subject: [PATCH 33/62] #176 - label field support added to block fields

---
 src/models/PanelSettings.ts                   |  1 +
 .../components/DataBlock/DataBlockField.tsx   |  1 +
 .../components/DataBlock/DataBlockRecords.tsx | 22 +++++++++++++++++--
 3 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index 9e3ba636..16377739 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -31,6 +31,7 @@ export interface PanelSettings {
 
 export interface FieldGroup { 
   id: string;
+  labelField?: string;
   fields: Field[];
 }
 
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 13e3e943..898cc0b5 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -259,6 +259,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
       }
 
       <DataBlockRecords
+        fieldGroups={settings.fieldGroups}
         records={value}
         selectedIndex={selectedIndex}
         onAdd={onAdd}
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
index d56d6be4..10195aa0 100644
--- a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
@@ -3,7 +3,10 @@ import * as React from 'react';
 import { VsLabel } from '../VscodeComponents';
 import { DataBlockRecord } from '.';
 import { SortableContainer, SortEnd } from 'react-sortable-hoc';
+import { useCallback } from 'react';
+import { FieldGroup } from '../../../models';
 export interface IDataBlockRecordsProps {
+  fieldGroups?: FieldGroup[];
   records: any[];
   selectedIndex: number | null;
   onAdd: () => void;
@@ -16,7 +19,22 @@ const Container = SortableContainer(({children}: React.PropsWithChildren<any>) =
   return <ul>{children}</ul>;
 });
 
-export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataBlockRecordsProps>) => {
+export const DataBlockRecords = ({ fieldGroups, records, selectedIndex, onSort, onAdd, onEdit, onDelete }: React.PropsWithChildren<IDataBlockRecordsProps>) => {
+
+  const getLabel = useCallback((record: any) => {
+    if (record.fieldGroup) {
+      if (fieldGroups) {
+        const fieldGroup = fieldGroups.find(f => f.id === record.fieldGroup);
+        if (fieldGroup && fieldGroup.labelField && record[fieldGroup.labelField]) {
+          return record[fieldGroup.labelField];
+        }
+      }
+
+      return record.fieldGroup;
+    }
+    
+    return 'Block';
+  }, []);
 
   if (!records || !records.length) {
     return null;
@@ -44,7 +62,7 @@ export const DataBlockRecords = ({ records, selectedIndex, onSort, onAdd, onEdit
             key={idx} 
             id={idx}
             index={idx}
-            label={v?.fieldGroup ?? 'Block'}
+            label={getLabel(v)}
             isSelected={idx === selectedIndex}
             onEdit={onEdit}
             onDelete={onDelete}  /> 

From 6135e38fcecec7dad95aaaf492ce1198043676fe Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 16 Feb 2022 09:39:55 -0800
Subject: [PATCH 34/62] Added now placeholder

---
 CHANGELOG.md | 1 +
 package.json | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3ebe44c..e44cfd6e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 
 - Show the data item its details when clicking on the record
 - Refactoring of the explorer view panel listeners
+- Added `{{now}}` placeholder to the publishing date for content creation
 - [#243](https://github.com/estruyf/vscode-front-matter/issues/243): Refactoring front matter parsing
 
 ### 🐞 Fixes
diff --git a/package.json b/package.json
index 45286a51..59b3903f 100644
--- a/package.json
+++ b/package.json
@@ -827,7 +827,8 @@
                 {
                   "title": "Publishing date",
                   "name": "date",
-                  "type": "datetime"
+                  "type": "datetime",
+                  "default": "{{now}}"
                 },
                 {
                   "title": "Content preview",

From 6cabd6283bbd875725cc78851be1126f4e71b9ad Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 16 Feb 2022 17:35:49 -0800
Subject: [PATCH 35/62] #242 - Keep comments at front matter root

---
 package-lock.json                        | 38 ++++++++++-
 package.json                             |  9 ++-
 src/panelWebView/components/Metadata.tsx |  2 -
 src/parsers/FrontMatterParser.ts         |  2 +
 src/parsers/ParserEngines.ts             | 81 +++++++++++++++++++++++-
 5 files changed, 125 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 9a5ea084..50fee5f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -84,7 +84,9 @@
         "webpack": "^5.65.0",
         "webpack-bundle-analyzer": "^4.5.0",
         "webpack-cli": "^4.9.1",
-        "webpack-dev-server": "^4.6.0"
+        "webpack-dev-server": "^4.6.0",
+        "yaml": "^1.10.2",
+        "yawn-yaml": "^1.5.0"
       },
       "engines": {
         "vscode": "^1.63.0"
@@ -9263,6 +9265,23 @@
       "engines": {
         "node": ">= 6"
       }
+    },
+    "node_modules/yaml-js": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/yaml-js/-/yaml-js-0.1.5.tgz",
+      "integrity": "sha1-oBNpAQs1WNiq7SOUYV39B4D9j6w=",
+      "dev": true
+    },
+    "node_modules/yawn-yaml": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/yawn-yaml/-/yawn-yaml-1.5.0.tgz",
+      "integrity": "sha512-sH2zX9K1QiWhWh9U19pye660qlzrEAd5c4ebw/6lqz17LZw7xYi7nqXlBoVLVtc2FZFXDKiJIsvVcKGYbLVyFQ==",
+      "dev": true,
+      "dependencies": {
+        "js-yaml": "^3.4.2",
+        "lodash": "^4.17.11",
+        "yaml-js": "^0.1.3"
+      }
     }
   },
   "dependencies": {
@@ -16268,6 +16287,23 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
       "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
       "dev": true
+    },
+    "yaml-js": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/yaml-js/-/yaml-js-0.1.5.tgz",
+      "integrity": "sha1-oBNpAQs1WNiq7SOUYV39B4D9j6w=",
+      "dev": true
+    },
+    "yawn-yaml": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/yawn-yaml/-/yawn-yaml-1.5.0.tgz",
+      "integrity": "sha512-sH2zX9K1QiWhWh9U19pye660qlzrEAd5c4ebw/6lqz17LZw7xYi7nqXlBoVLVtc2FZFXDKiJIsvVcKGYbLVyFQ==",
+      "dev": true,
+      "requires": {
+        "js-yaml": "^3.4.2",
+        "lodash": "^4.17.11",
+        "yaml-js": "^0.1.3"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 59b3903f..b283746f 100644
--- a/package.json
+++ b/package.json
@@ -702,7 +702,10 @@
                       "$ref": "#contenttypefield"
                     },
                     "blockType": {
-                      "type": ["string", "array"],
+                      "type": [
+                        "string",
+                        "array"
+                      ],
                       "default": "",
                       "description": "The ID(s) of your data type(s) defined in the `frontMatter.data.types` setting",
                       "items": {
@@ -1508,7 +1511,9 @@
     "webpack": "^5.65.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.6.0"
+    "webpack-dev-server": "^4.6.0",
+    "yaml": "^1.10.2",
+    "yawn-yaml": "^1.5.0"
   },
   "dependencies": {
     "node-fetch": "^2.6.7"
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index 468035b9..d197ee8a 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -107,8 +107,6 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
       } else if (field.type === 'string') {
         const textValue = parent[field.name];
 
-        console.log(textValue, parent, field)
-
         let limit = -1;
         if (field.name === 'title') {
           limit = settings?.seo.title;
diff --git a/src/parsers/FrontMatterParser.ts b/src/parsers/FrontMatterParser.ts
index 155678d4..b26a1b4d 100644
--- a/src/parsers/FrontMatterParser.ts
+++ b/src/parsers/FrontMatterParser.ts
@@ -14,9 +14,11 @@ export interface ParsedFrontMatter {
 }
 
 export class FrontMatterParser {
+  public static currentContent: string | null = null;
 
   public static fromFile(content: string): ParsedFrontMatter {
     const format = getFormatOpts(this.getLanguage());
+    FrontMatterParser.currentContent = content;
     const result = matter(content, { ...Engines, ...format });
     // in the absent of a body when serializing an entry we use an empty one
     // when calling `toFile`, so we don't want to add it when parsing.
diff --git a/src/parsers/ParserEngines.ts b/src/parsers/ParserEngines.ts
index ab57f80c..24f2b0dc 100644
--- a/src/parsers/ParserEngines.ts
+++ b/src/parsers/ParserEngines.ts
@@ -1,5 +1,6 @@
+import * as yaml from 'yaml';
 import * as toml from '@iarna/toml';
-import { Format } from '.';
+import { Format, FrontMatterParser } from '.';
 
 export const getFormatOpts = (format: string): Format => {
   const formats: { [prop: string]: Format} = {
@@ -20,6 +21,82 @@ export const Engines = {
       stringify: (value: any) => {
         return toml.stringify(value);
       }
+    },
+    yaml: {
+      parse: (value: string) => {
+        return yaml.parse(value);
+      },
+      stringify: (obj: any, options?: any) => {
+        // Do our own parsing to keep the comments
+        if (FrontMatterParser.currentContent) {
+          const originalContent = FrontMatterParser.currentContent;
+          FrontMatterParser.currentContent = null;
+
+          const frontMatter = getMatter(originalContent);
+          if (frontMatter) {
+            const docYaml = yaml.parseDocument(frontMatter);
+
+            // Update all the new values
+            for (const key in obj) {
+              docYaml.set(key, obj[key]);
+            }
+
+            // Check if there are values to remove
+            for (const key in docYaml.toJSON()) {
+              if (!obj[key]) {
+                docYaml.delete(key);
+              }
+            }
+
+            return docYaml.toString();
+          }
+        }
+
+        return yaml.stringify(obj, options);
+      }
     }
   }
-}
\ No newline at end of file
+}
+
+/**
+ * Retrieve the front matter from the content
+ * @param value 
+ * @returns 
+ */
+const getMatter = (value: string): string | null => {
+  const open = "---";
+  const close = '\n' + "---";
+
+  let str = value;
+
+  // get the length of the opening delimiter
+  const openLen = open.length;
+  if (!startsWith(str, open, openLen)) {
+    return null;
+  }
+
+  // if the next character after the opening delimiter is
+  // a character from the delimiter, then it's not a front-
+  // matter delimiter
+  if (str.charAt(openLen) === open.slice(-1)) {
+    return null;
+  }
+
+  // strip the opening delimiter
+  str = str.slice(openLen);
+  const len = str.length;
+
+  // get the index of the closing delimiter
+  let closeIndex = str.indexOf(close);
+  if (closeIndex === -1) {
+    closeIndex = len;
+  }
+
+  // get the raw front-matter block
+  return str.slice(0, closeIndex);
+}
+
+const startsWith = (str: string, substr: string, len: number) => {
+  if (typeof len !== 'number') len = substr.length;
+  return str.slice(0, len) === substr;
+};
\ No newline at end of file

From 0e179f5fd715c1c85403b7068b47d9be18bd3c9c Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Wed, 16 Feb 2022 17:36:21 -0800
Subject: [PATCH 36/62] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e44cfd6e..46b386dc 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 - Updated the activity bar icon for better visibility
 - Storing the panel collapse section states
+- [#242](https://github.com/estruyf/vscode-front-matter/issues/242): Keep comments at the root of the front matter
 - [#248](https://github.com/estruyf/vscode-front-matter/issues/248): Added support for front matter highlighting to all file types specified in `frontMatter.content.supportedFileTypes`
 
 ### ⚡️ Optimizations

From cfe68e65e8d2fede75778bb751d87a6f0b1b4a41 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 10:59:02 -0800
Subject: [PATCH 37/62] Fix indent

---
 src/helpers/ContentType.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/ContentType.ts b/src/helpers/ContentType.ts
index 7ef56c7c..89693f95 100644
--- a/src/helpers/ContentType.ts
+++ b/src/helpers/ContentType.ts
@@ -141,7 +141,7 @@ export class ContentType {
     
     if (obj.fields) {
       for (const field of obj.fields) {
-      if (field.name === "title") {
+        if (field.name === "title") {
           if (field.default) {
             data[field.name] = ArticleHelper.processKnownPlaceholders(field.default, titleValue);
             data[field.name] = ArticleHelper.processCustomPlaceholders(data[field.name], titleValue);

From 8d705ff6c55b87848011330384a786ad11eb0b62 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 11:32:34 -0800
Subject: [PATCH 38/62] #176 #255 - Default block fields value

---
 CHANGELOG.md                                  |  1 +
 .../components/DataBlock/DataBlockField.tsx   |  2 +-
 src/panelWebView/components/Metadata.tsx      | 78 ++++++++++++++++---
 3 files changed, 70 insertions(+), 11 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 46b386dc..210baf0e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Storing the panel collapse section states
 - [#242](https://github.com/estruyf/vscode-front-matter/issues/242): Keep comments at the root of the front matter
 - [#248](https://github.com/estruyf/vscode-front-matter/issues/248): Added support for front matter highlighting to all file types specified in `frontMatter.content.supportedFileTypes`
+- [#255](https://github.com/estruyf/vscode-front-matter/issues/255): Added support for default values on block fields / data creation
 
 ### ⚡️ Optimizations
 
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 898cc0b5..630699d4 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -254,7 +254,7 @@ export const DataBlockField: React.FunctionComponent<IDataBlockFieldProps> = ({
             </div>
           </div>
         ) : (
-          <button onClick={onShowForm}>Add {field.name}</button>
+          <button title={`Add ${field.name}`} onClick={onShowForm}>Add {field.name}</button>
         )
       }
 
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index d197ee8a..b654de11 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -83,7 +83,11 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
       }
 
       if (field.type === 'datetime') {
-        const dateValue = parent[field.name] ? getDate(parent[field.name] as string) : null;
+        let dateValue = parent[field.name] ? getDate(parent[field.name] as string) : null;
+        if (!dateValue && typeof parent[field.name] === "undefined" && field.default) {
+          dateValue = getDate(field.default);
+          onSendUpdate(field.name, dateValue, parentFields);
+        }
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -95,17 +99,28 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           </FieldBoundary>
         );
       } else if (field.type === 'boolean') {
+        let toggleValue = parent[field.name];
+        if (!toggleValue && typeof parent[field.name] === "undefined" && parent[field.name]) {
+          toggleValue = field.default as any;
+          onSendUpdate(field.name, toggleValue, parentFields);
+        }
+
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
             <Toggle 
               key={field.name}
               label={field.title || field.name}
-              checked={!!parent[field.name] as any} 
+              checked={!!toggleValue} 
               onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
           </FieldBoundary>
         );
       } else if (field.type === 'string') {
-        const textValue = parent[field.name];
+        let textValue = parent[field.name];
+        
+        if (!textValue && typeof parent[field.name] === "undefined" && field.default) {
+          textValue = field.default;
+          onSendUpdate(field.name, textValue, parentFields);
+        }
 
         let limit = -1;
         if (field.name === 'title') {
@@ -126,7 +141,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           </FieldBoundary>
         );
       } else if (field.type === 'number') {
-        const fieldValue = parent[field.name];
+        let fieldValue = parent[field.name];
+        if (!fieldValue && typeof parent[field.name] === "undefined" && field.default) {
+          fieldValue = field.default;
+          onSendUpdate(field.name, fieldValue, parentFields);
+        }
+
         let nrValue: number | null = parseInt(fieldValue as string);
         if (isNaN(nrValue)) {
           nrValue = null;
@@ -142,6 +162,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           </FieldBoundary>
         );
       } else if (field.type === 'image') {
+        let imageValue = parent[field.name];
+        if (!imageValue && typeof parent[field.name] === "undefined" && field.default) {
+          imageValue = field.default;
+          onSendUpdate(field.name, imageValue, parentFields);
+        }
+        
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
             <PreviewImageField 
@@ -149,7 +175,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               fieldName={field.name}
               filePath={metadata.filePath as string}
               parents={parentFields}
-              value={parent[field.name] as PreviewImageValue | PreviewImageValue[] | null}
+              value={imageValue as PreviewImageValue | PreviewImageValue[] | null}
               multiple={field.multiple}
               blockData={blockData}
               onChange={(value) => onSendUpdate(field.name, value, parentFields)} />
@@ -157,7 +183,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
         );
       } else if (field.type === 'choice') {
         const choices = field.choices || [];
-        const choiceValue = parent[field.name];
+        let choiceValue = parent[field.name];
+
+        if (!choiceValue && typeof parent[field.name] === "undefined" && field.default) {
+          choiceValue = field.default;
+          onSendUpdate(field.name, choiceValue, parentFields);
+        }
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -170,6 +201,14 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           </FieldBoundary>
         );
       } else if (field.type === 'tags') {
+        let tagsValue = parent[field.name];
+        if (!tagsValue && typeof parent[field.name] === "undefined" && field.default) {
+          tagsValue = field.default;
+          onSendUpdate(field.name, tagsValue, parentFields);
+        } else {
+          tagsValue = [];
+        }
+
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
             <TagPicker 
@@ -187,7 +226,13 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
         );
       } else if (field.type === 'taxonomy') {
         const taxonomyData = settings.customTaxonomy.find(ct => ct.id === field.taxonomyId);
-        const selectedValues = parent[field.name] || [];
+        let selectedValues = parent[field.name];
+        if (!selectedValues && typeof parent[field.name] === "undefined" && field.default) {
+          selectedValues = field.default;
+          onSendUpdate(field.name, selectedValues, parentFields);
+        } else {
+          selectedValues = [];
+        }
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -207,13 +252,21 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
           </FieldBoundary>
         );
       } else if (field.type === 'categories') {
+        let selectedValues = parent[field.name];
+        if (!selectedValues && typeof parent[field.name] === "undefined" && field.default) {
+          selectedValues = field.default;
+          onSendUpdate(field.name, selectedValues, parentFields);
+        } else {
+          selectedValues = [];
+        }
+
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
             <TagPicker 
               type={TagType.categories}
               label={field.title || field.name}
               icon={<ListUnorderedIcon />}
-              crntSelected={parent.categories as string[] || []} 
+              crntSelected={selectedValues as string[] || []} 
               options={settings.categories} 
               freeform={settings.freeform || false} 
               focussed={focusElm === TagType.categories}
@@ -224,7 +277,12 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
         );
       } else if (field.type === 'draft') {
         const draftField = settings?.draftField;
-        const value = parent[field.name];
+        let draftValue = parent[field.name];
+
+        if (!draftValue && typeof parent[field.name] === "undefined" && field.default) {
+          draftValue = field.default;
+          onSendUpdate(field.name, draftValue, parentFields);
+        }
 
         return (
           <FieldBoundary key={field.name} fieldName={field.title || field.name}>
@@ -232,7 +290,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
               label={field.title || field.name}
               type={draftField?.type || "boolean"}
               choices={draftField?.choices || []}
-              value={value as boolean | string | null | undefined}
+              value={draftValue as boolean | string | null | undefined}
               onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
           </FieldBoundary>
         );

From 4c8ecdb344523c11502930adac7b7ddab68299d3 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 18:43:49 -0800
Subject: [PATCH 39/62] #255 - Implemented placeholder logic for WV to backend
 communication

---
 src/listeners/panel/DataListener.ts           |  12 +
 src/panelWebView/Command.ts                   |   1 +
 src/panelWebView/CommandToCode.ts             |   1 +
 .../components/DataBlock/DataBlockField.tsx   |   4 +-
 .../components/DataBlock/DataBlockRecords.tsx |   4 -
 .../components/Fields/WrapperField.tsx        | 337 ++++++++++++++++++
 src/panelWebView/components/Metadata.tsx      | 312 +---------------
 7 files changed, 371 insertions(+), 300 deletions(-)
 create mode 100644 src/panelWebView/components/Fields/WrapperField.tsx

diff --git a/src/listeners/panel/DataListener.ts b/src/listeners/panel/DataListener.ts
index 33f301b2..a15f05cc 100644
--- a/src/listeners/panel/DataListener.ts
+++ b/src/listeners/panel/DataListener.ts
@@ -38,6 +38,9 @@ export class DataListener extends BaseListener {
       case CommandToCode.frameworkCommand:
         this.openTerminalWithCommand(msg.data.command);
         break;
+      case CommandToCode.updatePlaceholder:
+        this.updatePlaceholder(msg?.data?.field, msg?.data?.value, msg?.data?.title);
+        break;
     }
   }
 
@@ -271,4 +274,13 @@ export class DataListener extends BaseListener {
       }
     }
   }
+
+  private static updatePlaceholder(field: string, value: string, title: string) {
+    if (field && value) {
+      value = ArticleHelper.processKnownPlaceholders(value, title || "");
+      value = ArticleHelper.processCustomPlaceholders(value, title || "");
+    }
+    
+    this.sendMsg(Command.updatePlaceholder, { field, value });
+  }
 }
\ No newline at end of file
diff --git a/src/panelWebView/Command.ts b/src/panelWebView/Command.ts
index 410a1cf4..c89e789e 100644
--- a/src/panelWebView/Command.ts
+++ b/src/panelWebView/Command.ts
@@ -8,4 +8,5 @@ export enum Command {
   folderInfo = "folderInfo",
   mediaSelectionData = "mediaSelectionData",
   sendMediaUrl = "sendMediaUrl",
+  updatePlaceholder = "updatePlaceholder",
 }
\ No newline at end of file
diff --git a/src/panelWebView/CommandToCode.ts b/src/panelWebView/CommandToCode.ts
index 800c4942..94ddb683 100644
--- a/src/panelWebView/CommandToCode.ts
+++ b/src/panelWebView/CommandToCode.ts
@@ -31,4 +31,5 @@ export enum CommandToCode {
   frameworkCommand = "framework-command",
   updateStartCommand = "update-start-command",
   getImageUrl = "get-image-url",
+  updatePlaceholder = "update-placeholder",
 }
\ No newline at end of file
diff --git a/src/panelWebView/components/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
index 630699d4..582900e1 100644
--- a/src/panelWebView/components/DataBlock/DataBlockField.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -18,11 +18,11 @@ export interface IDataBlockFieldProps {
   fieldsRenderer: (
     ctFields: Field[], 
     parent: IMetadata, 
-    parentFields?: string[], 
+    parentFields: string[], 
     blockData?: BlockFieldData,
     onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void,
     parentBlock?: string | null
-  ) => (JSX.Element | null)[] | undefined
+  ) => (JSX.Element | null)[] | undefined;
   onSubmit: (data: any) => void;
   parentBlock: string | null | undefined;
 }
diff --git a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
index 10195aa0..6796a8e8 100644
--- a/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
+++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
@@ -48,10 +48,6 @@ export const DataBlockRecords = ({ fieldGroups, records, selectedIndex, onSort,
             <CollectionIcon style={{ width: "16px", height: "16px" }} />
             <span style={{ lineHeight: "16px"}}>Records</span>
           </div>
-
-          <button title='Add new record' className='json_data__list__button' onClick={onAdd}>
-            <PlusIcon style={{ width: "16px", height: "16px" }} /> 
-          </button>
         </div>
       </VsLabel>
 
diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
new file mode 100644
index 00000000..a1b2e622
--- /dev/null
+++ b/src/panelWebView/components/Fields/WrapperField.tsx
@@ -0,0 +1,337 @@
+
+
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { DateHelper } from '../../../helpers/DateHelper';
+import { MessageHelper } from '../../../helpers/MessageHelper';
+import { BlockFieldData, Field, PanelSettings } from '../../../models';
+import { Command } from '../../Command';
+import { CommandToCode } from '../../CommandToCode';
+import { TagType } from '../../TagType';
+import { DataBlockField } from '../DataBlock';
+import FieldBoundary from '../ErrorBoundary/FieldBoundary';
+import { ListUnorderedIcon } from '../Icons/ListUnorderedIcon';
+import { TagIcon } from '../Icons/TagIcon';
+import { JsonField } from '../JsonField';
+import { IMetadata } from '../Metadata';
+import { TagPicker } from '../TagPicker';
+import { VsLabel } from '../VscodeComponents';
+import { ChoiceField } from './ChoiceField';
+import { DateTimeField } from './DateTimeField';
+import { DraftField } from './DraftField';
+import { NumberField } from './NumberField';
+import { PreviewImageField, PreviewImageValue } from './PreviewImageField';
+import { TextField } from './TextField';
+import { Toggle } from './Toggle';
+
+export interface IWrapperFieldProps {
+  field: Field;
+  parent: IMetadata;
+  parentFields: string[];
+  metadata: IMetadata;
+  settings: PanelSettings;
+  blockData: BlockFieldData | undefined;
+  focusElm: TagType | null;
+  parentBlock: string | null | undefined;
+  onSendUpdate: (field: string | undefined, value: any, parents: string[]) => void;
+  unsetFocus: () => void;
+  renderFields: (
+    ctFields: Field[], 
+    parent: IMetadata, 
+    parentFields: string[], 
+    blockData?: BlockFieldData, 
+    onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void, 
+    parentBlock?: string | null
+  ) => (JSX.Element | null)[] | undefined
+}
+
+export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({ 
+  field, parent, parentFields, metadata, settings, blockData, focusElm, parentBlock, onSendUpdate, unsetFocus, renderFields 
+}: React.PropsWithChildren<IWrapperFieldProps>) => {
+  const [ fieldValue, setFieldValue ] = useState<any | undefined>(undefined);
+
+  const listener = useCallback((event: any) => {
+    const message = event.data;
+
+    if (message.command === Command.updatePlaceholder) {
+      const data = message.data;
+      if (data.field === field.name) {
+        setFieldValue(data.value);
+        onSendUpdate(field.name, data.value, parentFields);
+      }
+    }
+  }, [field]);
+
+
+  const getDate = (date: string | Date): Date | null => {
+    const parsedDate = DateHelper.tryParse(date, settings?.date?.format);
+    return parsedDate || date as Date | null;
+  }
+
+  useEffect(() => {
+    let value: any = parent[field.name];
+    let shouldSetField = false;
+    
+    if (field.type === 'datetime') {
+      value = getDate(value) || undefined;
+    }
+
+    if (value === undefined && field.default) {
+      value = field.default;
+
+      if (field.type === 'datetime') {
+        value = getDate(value) || null;
+      }
+
+      onSendUpdate(field.name, value, parentFields);
+    } else {
+      if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
+        value = [];
+      }
+
+      shouldSetField = true;
+    }
+
+    // Check if the field value contains a placeholder
+    if (value && typeof value === "string" && value.includes(`{{`) && value.includes(`}}`)) {
+      window.addEventListener('message', listener);
+      MessageHelper.sendMessage(CommandToCode.updatePlaceholder, {
+        field: field.name,
+        title: metadata["title"],
+        value
+      });
+    } else {
+      // Did not contain a placeholder, so value can be set
+      if (fieldValue === undefined || value !== fieldValue) {
+        setFieldValue(value || null);
+      }
+    }
+
+    return () => {
+      window.removeEventListener('message', listener);
+    }
+  }, [field, parent]);
+
+  if (field.hidden || fieldValue === undefined) {
+    return null;
+  }
+
+  if (field.type === 'datetime') {
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <DateTimeField
+          label={field.title || field.name}
+          date={fieldValue}
+          format={settings?.date?.format}
+          onChange={(date => onSendUpdate(field.name, date, parentFields))} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'boolean') {
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <Toggle 
+          key={field.name}
+          label={field.title || field.name}
+          checked={!!fieldValue} 
+          onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'string') {
+
+    let limit = -1;
+    if (field.name === 'title') {
+      limit = settings?.seo.title;
+    } else if (field.name === settings.seo.descriptionField) {
+      limit = settings?.seo.description;
+    }
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <TextField 
+          label={field.title || field.name}
+          singleLine={field.single}
+          limit={limit}
+          rows={3}
+          onChange={(value) => onSendUpdate(field.name, value, parentFields)}
+          value={fieldValue as string || null} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'number') {
+    let nrValue: number | null = parseInt(fieldValue as string);
+    if (isNaN(nrValue)) {
+      nrValue = null;
+    }
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <NumberField 
+          key={field.name}
+          label={field.title || field.name}
+          onChange={(value) => onSendUpdate(field.name, value, parentFields)}
+          value={nrValue} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'image') {    
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <PreviewImageField 
+          label={field.title || field.name}
+          fieldName={field.name}
+          filePath={metadata.filePath as string}
+          parents={parentFields}
+          value={fieldValue as PreviewImageValue | PreviewImageValue[] | null}
+          multiple={field.multiple}
+          blockData={blockData}
+          onChange={(value) => onSendUpdate(field.name, value, parentFields)} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'choice') {
+    const choices = field.choices || [];
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <ChoiceField
+          label={field.title || field.name}
+          selected={fieldValue as string}
+          choices={choices}
+          multiSelect={field.multiple}
+          onChange={(value => onSendUpdate(field.name, value, parentFields))} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'tags') {
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <TagPicker 
+          type={TagType.tags} 
+          label={field.title || field.name}
+          icon={<TagIcon />}
+          crntSelected={fieldValue as string[] || []} 
+          options={settings?.tags || []} 
+          freeform={settings.freeform || false} 
+          focussed={focusElm === TagType.tags}
+          unsetFocus={unsetFocus}
+          parents={parentFields}
+          blockData={blockData} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'taxonomy') {
+    const taxonomyData = settings.customTaxonomy.find(ct => ct.id === field.taxonomyId);
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <TagPicker 
+          type={TagType.custom}
+          label={field.title || field.name}
+          icon={<ListUnorderedIcon />}
+          crntSelected={fieldValue as string[] || []} 
+          options={taxonomyData?.options || []} 
+          freeform={settings.freeform || false} 
+          focussed={focusElm === TagType.custom}
+          unsetFocus={unsetFocus}
+          fieldName={field.name}
+          taxonomyId={field.taxonomyId}
+          parents={parentFields}
+          blockData={blockData} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'categories') {
+    let selectedValues = parent[field.name];
+    if (!selectedValues && typeof parent[field.name] === "undefined" && field.default) {
+      selectedValues = field.default;
+      onSendUpdate(field.name, selectedValues, parentFields);
+    } else {
+      selectedValues = [];
+    }
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <TagPicker 
+          type={TagType.categories}
+          label={field.title || field.name}
+          icon={<ListUnorderedIcon />}
+          crntSelected={selectedValues as string[] || []} 
+          options={settings.categories} 
+          freeform={settings.freeform || false} 
+          focussed={focusElm === TagType.categories}
+          unsetFocus={unsetFocus}
+          parents={parentFields}
+          blockData={blockData} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'draft') {
+    const draftField = settings?.draftField;
+    let draftValue = parent[field.name];
+
+    if (!draftValue && typeof parent[field.name] === "undefined" && field.default) {
+      draftValue = field.default;
+      onSendUpdate(field.name, draftValue, parentFields);
+    }
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <DraftField
+          label={field.title || field.name}
+          type={draftField?.type || "boolean"}
+          choices={draftField?.choices || []}
+          value={draftValue as boolean | string | null | undefined}
+          onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'fields') {
+    if (field.fields && parent) {
+      if (!parent[field.name]) {
+        parent[field.name] = {};
+      }
+
+      const subMetadata = parent[field.name] as IMetadata;
+      return (
+        <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+          <div className={`metadata_field__box`}>
+            <VsLabel>
+              <div className={`metadata_field__label metadata_field__label_parent`}>
+                <span style={{ lineHeight: "16px"}}>{field.title || field.name}</span>
+              </div>
+            </VsLabel>
+
+            { renderFields(field.fields, subMetadata, [...parentFields, field.name], blockData, onSendUpdate) }
+          </div>
+        </FieldBoundary>
+      );
+    }
+
+    return null;
+  } else if (field.type === 'json') {
+    const collectionData = parent[field.name];
+
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <JsonField
+          label={field.title || field.name}
+          settings={settings}
+          field={field}
+          value={collectionData}
+          onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'block') {
+    const blockData = Object.assign([], parent[field.name]);
+    
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <DataBlockField
+          label={field.title || field.name}
+          settings={settings}
+          field={field}
+          value={blockData}
+          fieldsRenderer={renderFields}
+          parentFields={parentFields}
+          filePath={metadata.filePath as string}
+          parentBlock={parentBlock}
+          onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
+      </FieldBoundary>
+    );
+  } else {
+    console.warn(`Unknown field type: ${field.type}`);
+    return null;
+  }
+};
\ No newline at end of file
diff --git a/src/panelWebView/components/Metadata.tsx b/src/panelWebView/components/Metadata.tsx
index b654de11..f055be8c 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -4,24 +4,12 @@ import { CommandToCode } from '../CommandToCode';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { TagType } from '../TagType';
 import { Collapsible } from './Collapsible';
-import { Toggle } from './Fields/Toggle';
 import { SymbolKeywordIcon } from './Icons/SymbolKeywordIcon';
-import { TagIcon } from './Icons/TagIcon';
 import { TagPicker } from './TagPicker';
-import { DateTimeField } from './Fields/DateTimeField';
-import { TextField } from './Fields/TextField';
 import "react-datepicker/dist/react-datepicker.css";
-import { PreviewImageField, PreviewImageValue } from './Fields/PreviewImageField';
-import { ListUnorderedIcon } from './Icons/ListUnorderedIcon';
-import { NumberField } from './Fields/NumberField';
-import { ChoiceField } from './Fields/ChoiceField';
 import useContentType from '../../hooks/useContentType';
-import { DateHelper } from '../../helpers/DateHelper';
 import FieldBoundary from './ErrorBoundary/FieldBoundary';
-import { DraftField } from './Fields/DraftField';
-import { VsLabel } from './VscodeComponents';
-import { DataBlockField } from './DataBlock';
-import { JsonField } from './JsonField';
+import { WrapperField } from './Fields/WrapperField';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -48,11 +36,6 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
     });
   };
 
-  const getDate = (date: string | Date): Date | null => {
-    const parsedDate = DateHelper.tryParse(date, settings?.date?.format);
-    return parsedDate || date as Date | null;
-  }
-
   if (!settings) {
     return null;
   }
@@ -64,7 +47,7 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
     blockData?: BlockFieldData,
     onFieldUpdate?: (field: string | undefined, value: any, parents: string[]) => void,
     parentBlock?: string | null
-  ) => {
+  ) : (JSX.Element | null)[] | undefined => {
     if (!ctFields) {
       return;
     }
@@ -77,281 +60,22 @@ const Metadata: React.FunctionComponent<IMetadataProps> = ({settings, metadata,
       }
     };
 
-    return ctFields.map(field => {
-      if (field.hidden) {
-        return null;
-      }
-
-      if (field.type === 'datetime') {
-        let dateValue = parent[field.name] ? getDate(parent[field.name] as string) : null;
-        if (!dateValue && typeof parent[field.name] === "undefined" && field.default) {
-          dateValue = getDate(field.default);
-          onSendUpdate(field.name, dateValue, parentFields);
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DateTimeField
-              label={field.title || field.name}
-              date={dateValue}
-              format={settings?.date?.format}
-              onChange={(date => onSendUpdate(field.name, date, parentFields))} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'boolean') {
-        let toggleValue = parent[field.name];
-        if (!toggleValue && typeof parent[field.name] === "undefined" && parent[field.name]) {
-          toggleValue = field.default as any;
-          onSendUpdate(field.name, toggleValue, parentFields);
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <Toggle 
-              key={field.name}
-              label={field.title || field.name}
-              checked={!!toggleValue} 
-              onChanged={(checked) => onSendUpdate(field.name, checked, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'string') {
-        let textValue = parent[field.name];
-        
-        if (!textValue && typeof parent[field.name] === "undefined" && field.default) {
-          textValue = field.default;
-          onSendUpdate(field.name, textValue, parentFields);
-        }
-
-        let limit = -1;
-        if (field.name === 'title') {
-          limit = settings?.seo.title;
-        } else if (field.name === settings.seo.descriptionField) {
-          limit = settings?.seo.description;
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <TextField 
-              label={field.title || field.name}
-              singleLine={field.single}
-              limit={limit}
-              rows={3}
-              onChange={(value) => onSendUpdate(field.name, value, parentFields)}
-              value={textValue as string || null} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'number') {
-        let fieldValue = parent[field.name];
-        if (!fieldValue && typeof parent[field.name] === "undefined" && field.default) {
-          fieldValue = field.default;
-          onSendUpdate(field.name, fieldValue, parentFields);
-        }
-
-        let nrValue: number | null = parseInt(fieldValue as string);
-        if (isNaN(nrValue)) {
-          nrValue = null;
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <NumberField 
-              key={field.name}
-              label={field.title || field.name}
-              onChange={(value) => onSendUpdate(field.name, value, parentFields)}
-              value={nrValue} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'image') {
-        let imageValue = parent[field.name];
-        if (!imageValue && typeof parent[field.name] === "undefined" && field.default) {
-          imageValue = field.default;
-          onSendUpdate(field.name, imageValue, parentFields);
-        }
-        
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <PreviewImageField 
-              label={field.title || field.name}
-              fieldName={field.name}
-              filePath={metadata.filePath as string}
-              parents={parentFields}
-              value={imageValue as PreviewImageValue | PreviewImageValue[] | null}
-              multiple={field.multiple}
-              blockData={blockData}
-              onChange={(value) => onSendUpdate(field.name, value, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'choice') {
-        const choices = field.choices || [];
-        let choiceValue = parent[field.name];
-
-        if (!choiceValue && typeof parent[field.name] === "undefined" && field.default) {
-          choiceValue = field.default;
-          onSendUpdate(field.name, choiceValue, parentFields);
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <ChoiceField
-              label={field.title || field.name}
-              selected={choiceValue as string}
-              choices={choices}
-              multiSelect={field.multiple}
-              onChange={(value => onSendUpdate(field.name, value, parentFields))} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'tags') {
-        let tagsValue = parent[field.name];
-        if (!tagsValue && typeof parent[field.name] === "undefined" && field.default) {
-          tagsValue = field.default;
-          onSendUpdate(field.name, tagsValue, parentFields);
-        } else {
-          tagsValue = [];
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <TagPicker 
-              type={TagType.tags} 
-              label={field.title || field.name}
-              icon={<TagIcon />}
-              crntSelected={parent[field.name] as string[] || []} 
-              options={settings?.tags || []} 
-              freeform={settings.freeform || false} 
-              focussed={focusElm === TagType.tags}
-              unsetFocus={unsetFocus}
-              parents={parentFields}
-              blockData={blockData} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'taxonomy') {
-        const taxonomyData = settings.customTaxonomy.find(ct => ct.id === field.taxonomyId);
-        let selectedValues = parent[field.name];
-        if (!selectedValues && typeof parent[field.name] === "undefined" && field.default) {
-          selectedValues = field.default;
-          onSendUpdate(field.name, selectedValues, parentFields);
-        } else {
-          selectedValues = [];
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <TagPicker 
-              type={TagType.custom}
-              label={field.title || field.name}
-              icon={<ListUnorderedIcon />}
-              crntSelected={selectedValues as string[] || []} 
-              options={taxonomyData?.options || []} 
-              freeform={settings.freeform || false} 
-              focussed={focusElm === TagType.custom}
-              unsetFocus={unsetFocus}
-              fieldName={field.name}
-              taxonomyId={field.taxonomyId}
-              parents={parentFields}
-              blockData={blockData} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'categories') {
-        let selectedValues = parent[field.name];
-        if (!selectedValues && typeof parent[field.name] === "undefined" && field.default) {
-          selectedValues = field.default;
-          onSendUpdate(field.name, selectedValues, parentFields);
-        } else {
-          selectedValues = [];
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <TagPicker 
-              type={TagType.categories}
-              label={field.title || field.name}
-              icon={<ListUnorderedIcon />}
-              crntSelected={selectedValues as string[] || []} 
-              options={settings.categories} 
-              freeform={settings.freeform || false} 
-              focussed={focusElm === TagType.categories}
-              unsetFocus={unsetFocus}
-              parents={parentFields}
-              blockData={blockData} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'draft') {
-        const draftField = settings?.draftField;
-        let draftValue = parent[field.name];
-
-        if (!draftValue && typeof parent[field.name] === "undefined" && field.default) {
-          draftValue = field.default;
-          onSendUpdate(field.name, draftValue, parentFields);
-        }
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DraftField
-              label={field.title || field.name}
-              type={draftField?.type || "boolean"}
-              choices={draftField?.choices || []}
-              value={draftValue as boolean | string | null | undefined}
-              onChanged={(value: boolean | string) => onSendUpdate(field.name, value, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'fields') {
-        if (field.fields && parent) {
-          if (!parent[field.name]) {
-            parent[field.name] = {};
-          }
-
-          const subMetadata = parent[field.name] as IMetadata;
-          return (
-            <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-              <div className={`metadata_field__box`}>
-                <VsLabel>
-                  <div className={`metadata_field__label metadata_field__label_parent`}>
-                    <span style={{ lineHeight: "16px"}}>{field.title || field.name}</span>
-                  </div>
-                </VsLabel>
-
-                { renderFields(field.fields, subMetadata, [...parentFields, field.name], blockData, onFieldUpdate) }
-              </div>
-            </FieldBoundary>
-          );
-        }
-
-        return null;
-      } else if (field.type === 'json') {
-        const collectionData = parent[field.name];
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <JsonField
-              label={field.title || field.name}
-              settings={settings}
-              field={field}
-              value={collectionData}
-              onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'block') {
-        const blockData = Object.assign([], parent[field.name]);
-        
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DataBlockField
-              label={field.title || field.name}
-              settings={settings}
-              field={field}
-              value={blockData}
-              fieldsRenderer={renderFields}
-              parentFields={parentFields}
-              filePath={metadata.filePath as string}
-              parentBlock={parentBlock}
-              onSubmit={(value) => onSendUpdate(field.name, value, parentFields)} />
-          </FieldBoundary>
-        );
-      } else {
-        console.warn(`Unknown field type: ${field.type}`);
-        return null;
-      }
-    });
+    return ctFields.map(field => (
+      <WrapperField
+        key={field.name}
+        field={field}
+        parent={parent}
+        parentFields={parentFields}
+        metadata={metadata}
+        settings={settings}
+        blockData={blockData}
+        parentBlock={parentBlock}
+        focusElm={focusElm}
+        onSendUpdate={onSendUpdate}
+        unsetFocus={unsetFocus}
+        renderFields={renderFields}
+         />
+    ));
   };
 
   return (

From 489fc5ec9ee417544f002921183410d817fac8b9 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 18:57:59 -0800
Subject: [PATCH 40/62] #176 - fieldGroups setting added to schema

---
 package.json | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b283746f..cecd46cf 100644
--- a/package.json
+++ b/package.json
@@ -706,7 +706,7 @@
                         "string",
                         "array"
                       ],
-                      "default": "",
+                      "default": [],
                       "description": "The ID(s) of your data type(s) defined in the `frontMatter.data.types` setting",
                       "items": {
                         "type": "string"
@@ -858,6 +858,28 @@
           ],
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.fieldGroups": {
+          "type": "array",
+          "markdownDescription": "Define the field groups you want to use for your block fields.",
+          "default": [],
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "The name of the field group"
+              },
+              "fields": {
+                "$ref": "#contenttypefield"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "name",
+              "fields"
+            ]
+          }
+        },
         "frontMatter.taxonomy.customTaxonomy": {
           "type": "array",
           "markdownDescription": "Specify the custom taxonomy field data. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.tags)",

From 63f02f4f0ed5857d5ebdeffeb6b8ad71d5d8b4d7 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 18:59:34 -0800
Subject: [PATCH 41/62] Updated link

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cecd46cf..7368fe46 100644
--- a/package.json
+++ b/package.json
@@ -860,7 +860,7 @@
         },
         "frontMatter.taxonomy.fieldGroups": {
           "type": "array",
-          "markdownDescription": "Define the field groups you want to use for your block fields.",
+          "markdownDescription": "Define the field groups you want to use for your block fields. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.fieldgroups)",
           "default": [],
           "items": {
             "type": "object",

From 2e1faaa34f26dc2695c396dae25d05ab1dece1ae Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 19:01:58 -0800
Subject: [PATCH 42/62] Sort all settings

---
 package.json | 56 ++++++++++++++++++++++++++--------------------------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index 7368fe46..ad44c67f 100644
--- a/package.json
+++ b/package.json
@@ -858,28 +858,6 @@
           ],
           "scope": "Taxonomy"
         },
-        "frontMatter.taxonomy.fieldGroups": {
-          "type": "array",
-          "markdownDescription": "Define the field groups you want to use for your block fields. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.fieldgroups)",
-          "default": [],
-          "items": {
-            "type": "object",
-            "properties": {
-              "id": {
-                "type": "string",
-                "description": "The name of the field group"
-              },
-              "fields": {
-                "$ref": "#contenttypefield"
-              }
-            },
-            "additionalProperties": false,
-            "required": [
-              "name",
-              "fields"
-            ]
-          }
-        },
         "frontMatter.taxonomy.customTaxonomy": {
           "type": "array",
           "markdownDescription": "Specify the custom taxonomy field data. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.tags)",
@@ -916,6 +894,28 @@
           "markdownDescription": "Specify the date format for your articles. Check [date-fns formating](https://date-fns.org/v2.0.1/docs/format) for more information. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.taxonomy.dateformat)",
           "scope": "Taxonomy"
         },
+        "frontMatter.taxonomy.fieldGroups": {
+          "type": "array",
+          "markdownDescription": "Define the field groups you want to use for your block fields. [Check in the docs](https://frontmatter.codes/docs/settings#frontMatter.taxonomy.fieldgroups)",
+          "default": [],
+          "items": {
+            "type": "object",
+            "properties": {
+              "id": {
+                "type": "string",
+                "description": "The name of the field group"
+              },
+              "fields": {
+                "$ref": "#contenttypefield"
+              }
+            },
+            "additionalProperties": false,
+            "required": [
+              "name",
+              "fields"
+            ]
+          }
+        },
         "frontMatter.taxonomy.frontMatterType": {
           "type": "string",
           "default": "YAML",
@@ -1001,6 +1001,11 @@
           },
           "scope": "Taxonomy"
         },
+        "frontMatter.telemetry.disable": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Specify if you want to disable the telemetry. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.telemetry.disable)"
+        },
         "frontMatter.templates.folder": {
           "type": "string",
           "default": ".frontmatter/templates",
@@ -1012,11 +1017,6 @@
           "default": "yyyy-MM-dd",
           "markdownDescription": "Specify the prefix you want to add for your new article filenames. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.templates.prefix)",
           "scope": "Templates"
-        },
-        "frontMatter.telemetry.disable": {
-          "type": "boolean",
-          "default": false,
-          "markdownDescription": "Specify if you want to disable the telemetry. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.telemetry.disable)"
         }
       }
     },
@@ -1540,4 +1540,4 @@
   "dependencies": {
     "node-fetch": "^2.6.7"
   }
-}
+}
\ No newline at end of file

From 0ed41b7d7e77fa580832b961f2a1cbc2354b6473 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 19:12:05 -0800
Subject: [PATCH 43/62] #176 - Extra setting updates

---
 package.json                                  | 20 +++++++++++++++--
 src/models/PanelSettings.ts                   |  1 +
 .../components/Fields/WrapperField.tsx        | 22 ++++++-------------
 3 files changed, 26 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index ad44c67f..d2f78f7f 100644
--- a/package.json
+++ b/package.json
@@ -701,7 +701,18 @@
                     "fields": {
                       "$ref": "#contenttypefield"
                     },
-                    "blockType": {
+                    "fieldGroup": {
+                      "type": [
+                        "string",
+                        "array"
+                      ],
+                      "default": [],
+                      "description": "The ID(s) of your field group(s) defined in the `frontMatter.taxonomy.fieldGroups` setting",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
+                    "dataType": {
                       "type": [
                         "string",
                         "array"
@@ -711,6 +722,11 @@
                       "items": {
                         "type": "string"
                       }
+                    },
+                    "taxonomyLimit": {
+                      "type": "number",
+                      "default": 0,
+                      "description": "Limit the number of taxonomies to select. Set to 0 to allow unlimited."
                     }
                   },
                   "additionalProperties": false,
@@ -771,7 +787,7 @@
                       },
                       "then": {
                         "required": [
-                          "blockType"
+                          "fieldGroup"
                         ]
                       }
                     },
diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index 16377739..20201bc6 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -64,6 +64,7 @@ export interface Field {
   fields?: Field[];
   fieldGroup?: string | string[];
   dataType?: string | string[];
+  taxonomyLimit?: number | string[];
 }
 
 export interface DateInfo {
diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
index a1b2e622..c67e4eac 100644
--- a/src/panelWebView/components/Fields/WrapperField.tsx
+++ b/src/panelWebView/components/Fields/WrapperField.tsx
@@ -70,7 +70,6 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
 
   useEffect(() => {
     let value: any = parent[field.name];
-    let shouldSetField = false;
     
     if (field.type === 'datetime') {
       value = getDate(value) || undefined;
@@ -88,8 +87,6 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
         value = [];
       }
-
-      shouldSetField = true;
     }
 
     // Check if the field value contains a placeholder
@@ -211,7 +208,8 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           focussed={focusElm === TagType.tags}
           unsetFocus={unsetFocus}
           parents={parentFields}
-          blockData={blockData} />
+          blockData={blockData}
+          limit={field.taxonomyLimit} />
       </FieldBoundary>
     );
   } else if (field.type === 'taxonomy') {
@@ -231,31 +229,25 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
           fieldName={field.name}
           taxonomyId={field.taxonomyId}
           parents={parentFields}
-          blockData={blockData} />
+          blockData={blockData}
+          limit={field.taxonomyLimit} />
       </FieldBoundary>
     );
   } else if (field.type === 'categories') {
-    let selectedValues = parent[field.name];
-    if (!selectedValues && typeof parent[field.name] === "undefined" && field.default) {
-      selectedValues = field.default;
-      onSendUpdate(field.name, selectedValues, parentFields);
-    } else {
-      selectedValues = [];
-    }
-
     return (
       <FieldBoundary key={field.name} fieldName={field.title || field.name}>
         <TagPicker 
           type={TagType.categories}
           label={field.title || field.name}
           icon={<ListUnorderedIcon />}
-          crntSelected={selectedValues as string[] || []} 
+          crntSelected={fieldValue as string[] || []} 
           options={settings.categories} 
           freeform={settings.freeform || false} 
           focussed={focusElm === TagType.categories}
           unsetFocus={unsetFocus}
           parents={parentFields}
-          blockData={blockData} />
+          blockData={blockData}
+          limit={field.taxonomyLimit} />
       </FieldBoundary>
     );
   } else if (field.type === 'draft') {

From b17c7f888a35021a97770881b6e4b8307e113dac Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 19:21:16 -0800
Subject: [PATCH 44/62] #241 - Add taxonomy limit to limit the number of
 selections

---
 src/models/PanelSettings.ts               |  2 +-
 src/panelWebView/components/TagPicker.tsx | 17 ++++++++++++++---
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/models/PanelSettings.ts b/src/models/PanelSettings.ts
index 20201bc6..d547571d 100644
--- a/src/models/PanelSettings.ts
+++ b/src/models/PanelSettings.ts
@@ -64,7 +64,7 @@ export interface Field {
   fields?: Field[];
   fieldGroup?: string | string[];
   dataType?: string | string[];
-  taxonomyLimit?: number | string[];
+  taxonomyLimit?: number;
 }
 
 export interface DateInfo {
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 7040e025..3a3787a8 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -8,6 +8,7 @@ import { AddIcon } from './Icons/AddIcon';
 import { VsLabel } from './VscodeComponents';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { BlockFieldData, CustomTaxonomyData } from '../../models';
+import { useCallback } from 'react';
 
 export interface ITagPickerProps {
   type: TagType;
@@ -24,10 +25,11 @@ export interface ITagPickerProps {
   disableConfigurable?: boolean;
   fieldName?: string;
   taxonomyId?: string;
+  limit?: number;
 }
 
 const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsWithChildren<ITagPickerProps>) => {
-  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData } = props;
+  const { label, icon, type, crntSelected, options, freeform, focussed, unsetFocus, disableConfigurable, fieldName, taxonomyId, parents, blockData, limit } = props;
   const [ selected, setSelected ] = React.useState<string[]>([]);
   const [ inputValue, setInputValue ] = React.useState<string>("");
   const prevSelected = usePrevious(crntSelected);
@@ -145,6 +147,14 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
     return !selected.includes(option) && option.toLowerCase().includes((inputValue || "").toLowerCase());
   };
 
+  const checkIsDisabled = useCallback(() => {
+    if (!limit) {
+      return false;
+    }
+
+    return selected.length >= limit;
+  }, [limit, selected]);
+
   React.useEffect(() => {
     setTimeout(() => {
       triggerFocus();
@@ -185,7 +195,8 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
                               if (!inputValue) {
                                 clearSelection();
                               }
-                            }
+                            },
+                            disabled: checkIsDisabled()
                           })
                        }
                        placeholder={`Pick your ${label || type.toLowerCase()}`} />
@@ -194,7 +205,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
                   freeform && (
                     <button className={`article__tags__input__button`}
                             title={`Add the unknown tag`}
-                            disabled={!inputValue} 
+                            disabled={!inputValue || checkIsDisabled()} 
                             onClick={() => insertUnkownTag(closeMenu)}>
                       <AddIcon />
                     </button>

From e577ba591e1d5b4564f76ca8bfb2d8092022fef1 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 19:21:29 -0800
Subject: [PATCH 45/62] #176 - Fix for tax fields

---
 src/panelWebView/components/Fields/WrapperField.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
index c67e4eac..48469984 100644
--- a/src/panelWebView/components/Fields/WrapperField.tsx
+++ b/src/panelWebView/components/Fields/WrapperField.tsx
@@ -70,6 +70,11 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
 
   useEffect(() => {
     let value: any = parent[field.name];
+
+    if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
+      setFieldValue(value);
+      return;
+    };
     
     if (field.type === 'datetime') {
       value = getDate(value) || undefined;
@@ -83,10 +88,6 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
       }
 
       onSendUpdate(field.name, value, parentFields);
-    } else {
-      if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
-        value = [];
-      }
     }
 
     // Check if the field value contains a placeholder

From c084a15e082ca01576986a89ed891e0027f3e995 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 17 Feb 2022 19:22:19 -0800
Subject: [PATCH 46/62] updated changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 210baf0e..d8e4f102 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@
 
 - Updated the activity bar icon for better visibility
 - Storing the panel collapse section states
+- [#241](https://github.com/estruyf/vscode-front-matter/issues/241): Added taxonomy limit field property which allows you to limit the number of selections
 - [#242](https://github.com/estruyf/vscode-front-matter/issues/242): Keep comments at the root of the front matter
 - [#248](https://github.com/estruyf/vscode-front-matter/issues/248): Added support for front matter highlighting to all file types specified in `frontMatter.content.supportedFileTypes`
 - [#255](https://github.com/estruyf/vscode-front-matter/issues/255): Added support for default values on block fields / data creation

From eabdf00d3d4094b505356fad6ae82435aac3ff8b Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 18 Feb 2022 11:27:31 -0800
Subject: [PATCH 47/62] #257 - Allow preview images to be used in
 multi-dimensional fields

---
 CHANGELOG.md                                  |  1 +
 .../components/Contents/Item.tsx              | 13 +--
 src/hooks/useContentType.tsx                  |  4 +-
 src/listeners/dashboard/PagesListener.ts      | 94 ++++++++++++++-----
 4 files changed, 79 insertions(+), 33 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d8e4f102..1c80dfc7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -14,6 +14,7 @@
 - [#242](https://github.com/estruyf/vscode-front-matter/issues/242): Keep comments at the root of the front matter
 - [#248](https://github.com/estruyf/vscode-front-matter/issues/248): Added support for front matter highlighting to all file types specified in `frontMatter.content.supportedFileTypes`
 - [#255](https://github.com/estruyf/vscode-front-matter/issues/255): Added support for default values on block fields / data creation
+- [#257](https://github.com/estruyf/vscode-front-matter/issues/257): Allow preview images to be used in multi-dimensional fields
 
 ### ⚡️ Optimizations
 
diff --git a/src/dashboardWebView/components/Contents/Item.tsx b/src/dashboardWebView/components/Contents/Item.tsx
index 24bd6bc8..540efc99 100644
--- a/src/dashboardWebView/components/Contents/Item.tsx
+++ b/src/dashboardWebView/components/Contents/Item.tsx
@@ -3,21 +3,18 @@ import { useRecoilValue } from 'recoil';
 import { MarkdownIcon } from '../../../panelWebView/components/Icons/MarkdownIcon';
 import { DashboardMessage } from '../../DashboardMessage';
 import { Page } from '../../models/Page';
-import { SettingsSelector, ViewSelector } from '../../state';
+import { 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 {}
 
+const PREVIEW_IMAGE_FIELD = 'fmPreviewImage';
+
 export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, title, draft, description, type, ...pageData }: React.PropsWithChildren<IItemProps>) => {
   const view = useRecoilValue(ViewSelector);
-  const settings = useRecoilValue(SettingsSelector);
-  const contentType = useContentType(settings, { type });
-
-  const previewField = contentType.fields.find(field => field.isPreviewImage && field.type === "image")?.name || "preview";
   
   const openFile = () => {
     Messenger.send(DashboardMessage.openFile, fmFilePath);
@@ -30,8 +27,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({ fmFilePath, date, ti
                 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">
             {
-              previewField && pageData[previewField] ? (
-                <img src={`${pageData[previewField]}`} alt={title} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
+              pageData[PREVIEW_IMAGE_FIELD] ? (
+                <img src={`${pageData[PREVIEW_IMAGE_FIELD]}`} alt={title} className="absolute inset-0 h-full w-full object-cover" loading="lazy" />
               ) : (
                 <div className={`flex items-center justify-center bg-whisper-500 dark:bg-vulcan-200 dark:group-hover:bg-vulcan-100`}>
                   <MarkdownIcon className={`h-32 text-vulcan-100 dark:text-whisper-100`} />
diff --git a/src/hooks/useContentType.tsx b/src/hooks/useContentType.tsx
index 27b2975a..5ca5951f 100644
--- a/src/hooks/useContentType.tsx
+++ b/src/hooks/useContentType.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useCallback, useMemo } from 'react';
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from '../constants/ContentType';
 import { Settings } from '../dashboardWebView/models';
-import { ContentType, PanelSettings } from '../models';
+import { ContentType, Field, PanelSettings } from '../models';
 
 export default function useContentType(settings: PanelSettings | Settings | undefined | null, metadata: any) {
   const [contentType, setContentType] = useState<ContentType>(DEFAULT_CONTENT_TYPE);
diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts
index 7487a345..0c8b8c39 100644
--- a/src/listeners/dashboard/PagesListener.ts
+++ b/src/listeners/dashboard/PagesListener.ts
@@ -13,6 +13,7 @@ import { ContentType } from "../../helpers/ContentType";
 import { DateHelper } from "../../helpers/DateHelper";
 import { Notifications } from "../../helpers/Notifications";
 import { BaseListener } from "./BaseListener";
+import { Field } from '../../models';
 
 
 export class PagesListener extends BaseListener {
@@ -150,6 +151,7 @@ export class PagesListener extends BaseListener {
         fmFileName: fileName,
         fmDraft: ContentType.getDraftStatus(article?.data),
         fmYear: article?.data[dateField] ? DateHelper.tryParse(article?.data[dateField])?.getFullYear() : null,
+        fmPreviewImage: "",
         // Make sure these are always set
         title: article?.data.title,
         slug: article?.data.slug,
@@ -159,35 +161,59 @@ export class PagesListener extends BaseListener {
       };
 
       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;
-          }
+      let previewFieldParents = this.findPreviewField(contentType.fields);
+      if (previewFieldParents.length === 0) {
+        const previewField = contentType.fields.find(field => field.type === "image" && field.name === "preview");
+        if (previewField) {
+          previewFieldParents = ["preview"];
         }
+      }
 
-        // Revalidate as the array could have been empty
-        if (fieldValue) {
-          const staticPath = join(wsFolder.fsPath, staticFolder || "", fieldValue);
-          const contentFolderPath = join(dirname(filePath), fieldValue);
+      // Check if parent fields were retrieved, if not there was no image present
+      if (previewFieldParents.length > 0) {
+        let fieldValue = null;
+        let crntPageData = article?.data;
 
-          let previewUri = null;
-          if (existsSync(staticPath)) {
-            previewUri = Uri.file(staticPath);
-          } else if (existsSync(contentFolderPath)) {
-            previewUri = Uri.file(contentFolderPath);
-          }
+        for (let i = 0; i < previewFieldParents.length; i++) {
+          const previewField = previewFieldParents[i];
 
-          if (previewUri) {
-            const preview = Dashboard.getWebview()?.asWebviewUri(previewUri);
-            page[previewField] = preview?.toString() || "";
+          if (i === previewFieldParents.length - 1) {
+            fieldValue = crntPageData[previewField];
           } else {
-            page[previewField] = "";
+            if (!crntPageData[previewField]) {
+              continue;
+            }
+
+            crntPageData = crntPageData[previewField];
+          }
+        }
+
+        if (fieldValue && wsFolder) {
+          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(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.getWebview()?.asWebviewUri(previewUri);
+              page["fmPreviewImage"] = preview?.toString() || "";
+            }
           }
         }
       }
@@ -197,4 +223,26 @@ export class PagesListener extends BaseListener {
 
     return;
   }
+
+  /**
+   * Find the preview field in the fields
+   * @param ctFields 
+   * @param parents 
+   * @returns 
+   */
+  private static findPreviewField(ctFields: Field[], parents: string[] = []): string[] {
+    for (const field of ctFields) {
+      if (field.isPreviewImage && field.type === "image") {
+        parents = [...parents, field.name];
+        return parents;
+      } else if (field.type === "fields" && field.fields) {
+        const subFields = this.findPreviewField(field.fields);
+        if (subFields.length > 0) {
+          return [...parents, field.name, ...subFields];
+        }
+      }
+    }
+
+    return parents;
+  }
 }
\ No newline at end of file

From 65f77baf2b95c4e11bdc983ff5b06ac2fecc12cd Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Sat, 19 Feb 2022 17:32:32 +0100
Subject: [PATCH 48/62] #261 - Update tags and categories

---
 CHANGELOG.md                                  |  1 +
 src/dashboardWebView/hooks/usePages.tsx       |  4 +-
 src/dashboardWebView/models/Page.ts           |  3 +
 src/listeners/dashboard/PagesListener.ts      | 64 ++++++++++++++++++-
 src/listeners/panel/TaxonomyListener.ts       |  8 +--
 .../components/Fields/WrapperField.tsx        |  4 +-
 src/panelWebView/components/TagPicker.tsx     |  2 +
 7 files changed, 78 insertions(+), 8 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1c80dfc7..6e0c0623 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -26,6 +26,7 @@
 ### 🐞 Fixes
 
 - [#247](https://github.com/estruyf/vscode-front-matter/issues/247): Fix the front matter highlighting in markdown documents
+- [#261](https://github.com/estruyf/vscode-front-matter/issues/261): Fix to allow that tag and category fields can be renamed
 
 ## [6.0.0] - 2022-01-25 - [Release Notes](https://beta.frontmatter.codes/updates/v6.0.0)
 
diff --git a/src/dashboardWebView/hooks/usePages.tsx b/src/dashboardWebView/hooks/usePages.tsx
index f963a4a6..1fd405c2 100644
--- a/src/dashboardWebView/hooks/usePages.tsx
+++ b/src/dashboardWebView/hooks/usePages.tsx
@@ -100,12 +100,12 @@ export default function usePages(pages: Page[]) {
 
     // Filter by tag
     if (tag) {
-      pagesSorted = pagesSorted.filter(page => page.tags && page.tags.includes(tag));
+      pagesSorted = pagesSorted.filter(page => page.fmTags && page.fmTags.includes(tag));
     }
 
     // Filter by category
     if (category) {
-      pagesSorted = pagesSorted.filter(page => page.categories && page.categories.includes(category));
+      pagesSorted = pagesSorted.filter(page => page.fmCategories && page.fmCategories.includes(category));
     }
 
     setPageItems(pagesSorted);
diff --git a/src/dashboardWebView/models/Page.ts b/src/dashboardWebView/models/Page.ts
index d1e037bb..4c4a4fd9 100644
--- a/src/dashboardWebView/models/Page.ts
+++ b/src/dashboardWebView/models/Page.ts
@@ -7,6 +7,9 @@ export interface Page {
   fmModified: number;
   fmDraft: "Draft" | "Published",
   fmYear: number | null | undefined;
+  fmPreviewImage: string;
+  fmTags: string[];
+  fmCategories: string[];
 
   title: string;
   slug: string;
diff --git a/src/listeners/dashboard/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts
index 0c8b8c39..eeea4fe8 100644
--- a/src/listeners/dashboard/PagesListener.ts
+++ b/src/listeners/dashboard/PagesListener.ts
@@ -13,7 +13,7 @@ import { ContentType } from "../../helpers/ContentType";
 import { DateHelper } from "../../helpers/DateHelper";
 import { Notifications } from "../../helpers/Notifications";
 import { BaseListener } from "./BaseListener";
-import { Field } from '../../models';
+import { Field, FieldType } from '../../models';
 
 
 export class PagesListener extends BaseListener {
@@ -152,6 +152,8 @@ export class PagesListener extends BaseListener {
         fmDraft: ContentType.getDraftStatus(article?.data),
         fmYear: article?.data[dateField] ? DateHelper.tryParse(article?.data[dateField])?.getFullYear() : null,
         fmPreviewImage: "",
+        fmTags: [],
+        fmCategories: [],
         // Make sure these are always set
         title: article?.data.title,
         slug: article?.data.slug,
@@ -170,6 +172,16 @@ export class PagesListener extends BaseListener {
         }
       }
 
+      let tagParents = this.findFieldByType(contentType.fields, "tags");
+      if (tagParents.length !== 0) {
+        page.fmTags = this.getFieldValue(article.data, tagParents);
+      }
+
+      let categoryParents = this.findFieldByType(contentType.fields, "categories");
+      if (categoryParents.length !== 0) {
+        page.fmCategories = this.getFieldValue(article.data, categoryParents);
+      }
+
       // Check if parent fields were retrieved, if not there was no image present
       if (previewFieldParents.length > 0) {
         let fieldValue = null;
@@ -224,6 +236,56 @@ export class PagesListener extends BaseListener {
     return;
   }
 
+  /**
+   * Retrieve the field value
+   * @param data 
+   * @param parents 
+   * @returns 
+   */
+  private static getFieldValue(data: any, parents: string[]): string[] {
+    let fieldValue = [];
+    let crntPageData = data;
+
+    for (let i = 0; i < parents.length; i++) {
+      const crntField = parents[i];
+
+      if (i === parents.length - 1) {
+        fieldValue = crntPageData[crntField];
+      } else {
+        if (!crntPageData[crntField]) {
+          continue;
+        }
+
+        crntPageData = crntPageData[crntField];
+      }
+    }
+
+    return fieldValue;
+  }
+
+  /**
+   * Find the field by its type
+   * @param fields 
+   * @param type 
+   * @param parents 
+   * @returns 
+   */
+  private static findFieldByType(fields: Field[], type: FieldType, parents: string[] = []) {
+    for (const field of fields) {
+      if (field.type === type) {
+        parents = [...parents, field.name];
+        return parents;
+      } else if (field.type === "fields" && field.fields) {
+        const subFields = this.findPreviewField(field.fields);
+        if (subFields.length > 0) {
+          return [...parents, field.name, ...subFields];
+        }
+      }
+    }
+
+    return parents;
+  }
+
   /**
    * Find the preview field in the fields
    * @param ctFields 
diff --git a/src/listeners/panel/TaxonomyListener.ts b/src/listeners/panel/TaxonomyListener.ts
index 675f3c88..444a7513 100644
--- a/src/listeners/panel/TaxonomyListener.ts
+++ b/src/listeners/panel/TaxonomyListener.ts
@@ -19,10 +19,10 @@ export class TaxonomyListener extends BaseListener {
 
     switch(msg.command) {
       case CommandToCode.updateTags:
-        this.updateTags(TagType.tags, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        this.updateTags(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateCategories:
-        this.updateTags(TagType.categories, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        this.updateTags(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateKeywords:
         this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
@@ -47,7 +47,7 @@ export class TaxonomyListener extends BaseListener {
    * @param tagType 
    * @param values 
    */
-   private static updateTags(tagType: TagType, values: string[], parents: string[], blockData?: BlockFieldData) {
+   private static updateTags(fieldName: string, values: string[], parents: string[], blockData?: BlockFieldData) {
     const editor = window.activeTextEditor;
     if (!editor) {
       return "";
@@ -58,7 +58,7 @@ export class TaxonomyListener extends BaseListener {
 
       const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
 
-      parentObj[tagType.toLowerCase()] = values || [];
+      parentObj[fieldName] = values || [];
       ArticleHelper.update(editor, article);
       DataListener.pushMetadata(article!.data);
     }
diff --git a/src/panelWebView/components/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
index 48469984..728373a7 100644
--- a/src/panelWebView/components/Fields/WrapperField.tsx
+++ b/src/panelWebView/components/Fields/WrapperField.tsx
@@ -72,7 +72,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
     let value: any = parent[field.name];
 
     if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
-      setFieldValue(value);
+      setFieldValue(value || []);
       return;
     };
     
@@ -202,6 +202,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.tags} 
           label={field.title || field.name}
+          fieldName={field.name}
           icon={<TagIcon />}
           crntSelected={fieldValue as string[] || []} 
           options={settings?.tags || []} 
@@ -240,6 +241,7 @@ export const WrapperField: React.FunctionComponent<IWrapperFieldProps> = ({
         <TagPicker 
           type={TagType.categories}
           label={field.title || field.name}
+          fieldName={field.name}
           icon={<ListUnorderedIcon />}
           crntSelected={fieldValue as string[] || []} 
           options={settings.categories} 
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 3a3787a8..9232eeee 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -71,12 +71,14 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
   const sendUpdate = (values: string[]) => {    
     if (type === TagType.tags) {
       MessageHelper.sendMessage(CommandToCode.updateTags, {
+        fieldName,
         values,
         parents,
         blockData
       });
     } else if (type === TagType.categories) {
       MessageHelper.sendMessage(CommandToCode.updateCategories, {
+        fieldName,
         values,
         parents,
         blockData

From ed4b78cfdc20ee291b8fd41338ebaef2642f7c10 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 21 Feb 2022 18:06:41 +0100
Subject: [PATCH 49/62] #262 - Fix related to YAML comments

---
 src/parsers/ParserEngines.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/parsers/ParserEngines.ts b/src/parsers/ParserEngines.ts
index 24f2b0dc..eac1a954 100644
--- a/src/parsers/ParserEngines.ts
+++ b/src/parsers/ParserEngines.ts
@@ -43,7 +43,7 @@ export const Engines = {
 
             // Check if there are values to remove
             for (const key in docYaml.toJSON()) {
-              if (!obj[key]) {
+              if (typeof obj[key] === undefined) {
                 docYaml.delete(key);
               }
             }

From 0c1198c802c00b535963a8d2bebe87d71782a910 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 24 Feb 2022 10:27:37 +0000
Subject: [PATCH 50/62] #264 - Fix for windows paths on content folder
 registration

---
 CHANGELOG.md                |  1 +
 src/commands/Folders.ts     | 34 +++++++++++++++-------------------
 src/helpers/parseWinPath.ts |  4 ++--
 3 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6e0c0623..cf7241f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -27,6 +27,7 @@
 
 - [#247](https://github.com/estruyf/vscode-front-matter/issues/247): Fix the front matter highlighting in markdown documents
 - [#261](https://github.com/estruyf/vscode-front-matter/issues/261): Fix to allow that tag and category fields can be renamed
+- [#264](https://github.com/estruyf/vscode-front-matter/issues/264): Fix for Windows paths on content folder registration
 
 ## [6.0.0] - 2022-01-25 - [Release Notes](https://beta.frontmatter.codes/updates/v6.0.0)
 
diff --git a/src/commands/Folders.ts b/src/commands/Folders.ts
index c1efe2cb..ad664ce2 100644
--- a/src/commands/Folders.ts
+++ b/src/commands/Folders.ts
@@ -288,19 +288,6 @@ export class Folders {
       path: Folders.absWsFolder(folder, wsFolder)
     }));
   }
-
-  /**
-   * Retrieve the absolute file path
-   * @param filePath 
-   * @returns 
-   */
-  public static getAbsFilePath(filePath: string): string {
-    const wsFolder = Folders.getWorkspaceFolder();
-    const isWindows = process.platform === 'win32';
-    let absPath = filePath.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
-    absPath = isWindows ? absPath.split('/').join('\\') : absPath;
-    return absPath;
-  }
   
   /**
    * Update the folder settings
@@ -320,6 +307,19 @@ export class Folders {
     PagesListener.startWatchers();
   }
 
+  /**
+   * Retrieve the absolute file path
+   * @param filePath 
+   * @returns 
+   */
+  public static getAbsFilePath(filePath: string): string {
+    const wsFolder = Folders.getWorkspaceFolder();
+    const isWindows = process.platform === 'win32';
+    let absPath = filePath.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
+    absPath = isWindows ? absPath.split('/').join('\\') : absPath;
+    return absPath;
+  }
+
   /**
    * Generate the absolute URL for the workspace
    * @param folder 
@@ -328,7 +328,7 @@ export class Folders {
    */
   private static absWsFolder(folder: ContentFolder, wsFolder?: Uri) {
     const isWindows = process.platform === 'win32';
-    let absPath =  folder.path.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
+    let absPath = folder.path.replace(WORKSPACE_PLACEHOLDER, parseWinPath(wsFolder?.fsPath || ""));
     absPath = isWindows ? absPath.split('/').join('\\') : absPath;
     return absPath;
   }
@@ -341,12 +341,8 @@ export class Folders {
    */
   private static relWsFolder(folder: ContentFolder, wsFolder?: Uri) {
     const isWindows = process.platform === 'win32';
-    let absPath =  folder.path.replace(parseWinPath(wsFolder?.fsPath || ""), WORKSPACE_PLACEHOLDER);
+    let absPath = parseWinPath(folder.path).replace(parseWinPath(wsFolder?.fsPath || ""), WORKSPACE_PLACEHOLDER);
     absPath = isWindows ? absPath.split('\\').join('/') : absPath;
     return absPath;
   }
 }
-
-function SETTINGS_CONTENT_SUPPORTED_FILES<T>(SETTINGS_CONTENT_SUPPORTED_FILES: any) {
-  throw new Error('Function not implemented.');
-}
diff --git a/src/helpers/parseWinPath.ts b/src/helpers/parseWinPath.ts
index 6002e669..d9443f3f 100644
--- a/src/helpers/parseWinPath.ts
+++ b/src/helpers/parseWinPath.ts
@@ -1,3 +1,3 @@
 export const parseWinPath = (path: string | undefined): string => {
-    return path?.split(`\\`).join(`/`) || '';
-  }
\ No newline at end of file
+  return path?.split(`\\`).join(`/`) || '';
+}
\ No newline at end of file

From 32dc63b62adf183bb933818a1190888871ee34ba Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 24 Feb 2022 11:45:02 +0000
Subject: [PATCH 51/62] Fix for keywords

---
 src/listeners/panel/TaxonomyListener.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/listeners/panel/TaxonomyListener.ts b/src/listeners/panel/TaxonomyListener.ts
index 444a7513..94b83e74 100644
--- a/src/listeners/panel/TaxonomyListener.ts
+++ b/src/listeners/panel/TaxonomyListener.ts
@@ -25,7 +25,7 @@ export class TaxonomyListener extends BaseListener {
         this.updateTags(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateKeywords:
-        this.updateTags(TagType.keywords, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        this.updateTags(TagType.keywords.toLowerCase(), msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
         break;
       case CommandToCode.updateCustomTaxonomy:
         this.updateCustomTaxonomy(msg.data);

From c1161b95edd1bf63be68daee3598c33456b8d4ae Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 24 Feb 2022 17:12:42 +0100
Subject: [PATCH 52/62] #268 - Fix for panel not showing up after renaming

---
 CHANGELOG.md                           | 1 +
 src/explorerView/ExplorerView.ts       | 2 +-
 src/panelWebView/hooks/useMessages.tsx | 8 +++++++-
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cf7241f4..5cc165d5 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -28,6 +28,7 @@
 - [#247](https://github.com/estruyf/vscode-front-matter/issues/247): Fix the front matter highlighting in markdown documents
 - [#261](https://github.com/estruyf/vscode-front-matter/issues/261): Fix to allow that tag and category fields can be renamed
 - [#264](https://github.com/estruyf/vscode-front-matter/issues/264): Fix for Windows paths on content folder registration
+- [#268](https://github.com/estruyf/vscode-front-matter/issues/268): Fix for panel which only shows loading indicator
 
 ## [6.0.0] - 2022-01-25 - [Release Notes](https://beta.frontmatter.codes/updates/v6.0.0)
 
diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts
index 7d5a97b3..95fb9e00 100644
--- a/src/explorerView/ExplorerView.ts
+++ b/src/explorerView/ExplorerView.ts
@@ -85,7 +85,7 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     webviewView.onDidChangeVisibility(() => {
       if (this.visible) {
         Telemetry.send(TelemetryEvent.openExplorerView);
-        // this.getFileData();
+        DataListener.getFileData();
       }
     });
 
diff --git a/src/panelWebView/hooks/useMessages.tsx b/src/panelWebView/hooks/useMessages.tsx
index fd53af91..ccf96d9f 100644
--- a/src/panelWebView/hooks/useMessages.tsx
+++ b/src/panelWebView/hooks/useMessages.tsx
@@ -48,8 +48,14 @@ export default function useMessages() {
 
   useEffect(() => {    
     setLoading(true);
+
+    // Show what you got after 5 seconds
+    window.setTimeout(() => {
+      setLoading(false);
+    }, 5000);
+
     vscode.postMessage({ command: CommandToCode.getData });
-  }, ['']);
+  }, []);
 
   return {
     metadata,

From 57e93b91c5a7769160c7faff5f09e54158984a8e Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Thu, 24 Feb 2022 18:04:09 +0100
Subject: [PATCH 53/62] #268 - preserve casing of filename on creation

---
 package.json                 | 6 ++++++
 src/commands/Article.ts      | 1 -
 src/constants/settings.ts    | 2 ++
 src/helpers/ArticleHelper.ts | 5 +++--
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index d2f78f7f..208e5bf4 100644
--- a/package.json
+++ b/package.json
@@ -498,6 +498,12 @@
           },
           "scope": "Data"
         },
+        "frontMatter.file.preserveCasing": {
+          "type": "boolean",
+          "default": false,
+          "markdownDescription": "Specify if you want to preserve the casing of your file names from the title. [Check in the docs](https://frontmatter.codes/docs/settings#frontmatter.file.preservecasing)",
+          "scope": "File"
+        },
         "frontMatter.framework.id": {
           "type": "string",
           "default": "",
diff --git a/src/commands/Article.ts b/src/commands/Article.ts
index ac92a1f8..c737a136 100644
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -8,7 +8,6 @@ import { Notifications } from '../helpers/Notifications';
 import { extname, basename, parse, dirname } from 'path';
 import { COMMAND_NAME, DefaultFields } from '../constants';
 import { DashboardData } from '../models/DashboardData';
-import { ExplorerView } from '../explorerView/ExplorerView';
 import { DateHelper } from '../helpers/DateHelper';
 import { parseWinPath } from '../helpers/parseWinPath';
 import { Telemetry } from '../helpers/Telemetry';
diff --git a/src/constants/settings.ts b/src/constants/settings.ts
index bac61155..d6664e6f 100644
--- a/src/constants/settings.ts
+++ b/src/constants/settings.ts
@@ -64,6 +64,8 @@ export const SETTINGS_DATA_FILES = "data.files";
 export const SETTINGS_DATA_FOLDERS = "data.folders";
 export const SETTINGS_DATA_TYPES = "data.types";
 
+export const SETTINGS_FILE_PRESERVE_CASING = "file.preserveCasing";
+
 export const SETTINGS_FRAMEWORK_ID = "framework.id";
 export const SETTINGS_FRAMEWORK_START = "framework.startCommand";
 
diff --git a/src/helpers/ArticleHelper.ts b/src/helpers/ArticleHelper.ts
index e950659f..71ab9e66 100644
--- a/src/helpers/ArticleHelper.ts
+++ b/src/helpers/ArticleHelper.ts
@@ -2,7 +2,7 @@ import { MarkdownFoldingProvider } from './../providers/MarkdownFoldingProvider'
 import { DEFAULT_CONTENT_TYPE, DEFAULT_CONTENT_TYPE_NAME } from './../constants/ContentType';
 import * as vscode from 'vscode';
 import * as fs from "fs";
-import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTINGS_CONTENT_PLACEHOLDERS, SETTINGS_CONTENT_SUPPORTED_FILETYPES, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_SITE_BASEURL, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
+import { DefaultFields, SETTINGS_CONTENT_DEFAULT_FILETYPE, SETTINGS_CONTENT_PLACEHOLDERS, SETTINGS_CONTENT_SUPPORTED_FILETYPES, SETTINGS_FILE_PRESERVE_CASING, SETTING_COMMA_SEPARATED_FIELDS, SETTING_DATE_FIELD, SETTING_DATE_FORMAT, SETTING_INDENT_ARRAY, SETTING_REMOVE_QUOTES, SETTING_SITE_BASEURL, SETTING_TAXONOMY_CONTENT_TYPES, SETTING_TEMPLATES_PREFIX } from '../constants';
 import { DumpOptions } from 'js-yaml';
 import { FrontMatterParser, ParsedFrontMatter } from '../parsers';
 import { Extension, Logger, Settings, SlugHelper } from '.';
@@ -227,7 +227,8 @@ export class ArticleHelper {
    * @returns 
    */
   public static sanitize(value: string): string {
-    return sanitize(value.toLowerCase().replace(/ /g, "-"));
+    const preserveCasing = Settings.get(SETTINGS_FILE_PRESERVE_CASING) as boolean;
+    return sanitize((preserveCasing ? value : value.toLowerCase()).replace(/ /g, "-"));
   }
 
   /**

From ff38cf361ca1d63d790676b6b2433d8991de3259 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 25 Feb 2022 08:43:36 +0100
Subject: [PATCH 54/62] #241 - Enhanced the taxonomy field render

---
 assets/media/styles.css                   |  4 ++++
 src/panelWebView/components/TagPicker.tsx | 14 +++++++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/assets/media/styles.css b/assets/media/styles.css
index ec9f85d4..8f4fa3cf 100644
--- a/assets/media/styles.css
+++ b/assets/media/styles.css
@@ -166,6 +166,10 @@
   border: 1px solid var(--vscode-inputValidation-infoBorder);
 }
 
+.article__tags__input input:disabled {
+  border-color: transparent;
+}
+
 .article__tags__input.freeform {
   position: relative;
 }
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 9232eeee..9a75380d 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -8,7 +8,7 @@ import { AddIcon } from './Icons/AddIcon';
 import { VsLabel } from './VscodeComponents';
 import { MessageHelper } from '../../helpers/MessageHelper';
 import { BlockFieldData, CustomTaxonomyData } from '../../models';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 export interface ITagPickerProps {
   type: TagType;
@@ -157,6 +157,14 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
     return selected.length >= limit;
   }, [limit, selected]);
 
+  const inputPlaceholder = useMemo((): string => {
+    if (checkIsDisabled()) {
+      return `You have reached the limit of ${limit} ${label || type.toLowerCase()}`;
+    }
+
+    return `Pick your ${label || type.toLowerCase()}`;
+  }, [label, type, checkIsDisabled]); 
+
   React.useEffect(() => {
     setTimeout(() => {
       triggerFocus();
@@ -173,7 +181,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
     <div className={`article__tags`}>      
       <VsLabel>
         <div className={`metadata_field__label`}>
-          {icon} <span style={{ lineHeight: "16px"}}>{label || type}</span>
+          {icon} <span style={{ lineHeight: "16px"}}>{label || type}{(limit !== undefined && limit > 0) ? <>{` `}<span style={{fontWeight: "lighter"}}>(Max.: {limit})</span></> : ``}</span>
         </div>
       </VsLabel>
 
@@ -201,7 +209,7 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
                             disabled: checkIsDisabled()
                           })
                        }
-                       placeholder={`Pick your ${label || type.toLowerCase()}`} />
+                       placeholder={inputPlaceholder} />
                 
                 {
                   freeform && (

From 0ba3c227955f39523fce2f50cdee58c326744fe8 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 25 Feb 2022 10:39:52 +0100
Subject: [PATCH 55/62] #271 - Added image size placeholders for media snippets

---
 CHANGELOG.md                                   | 1 +
 src/dashboardWebView/components/Media/Item.tsx | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5cc165d5..75632be7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@
 - [#248](https://github.com/estruyf/vscode-front-matter/issues/248): Added support for front matter highlighting to all file types specified in `frontMatter.content.supportedFileTypes`
 - [#255](https://github.com/estruyf/vscode-front-matter/issues/255): Added support for default values on block fields / data creation
 - [#257](https://github.com/estruyf/vscode-front-matter/issues/257): Allow preview images to be used in multi-dimensional fields
+- [#271](https://github.com/estruyf/vscode-front-matter/issues/271): Added image size placeholders for media snippets
 
 ### ⚡️ Optimizations
 
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 54e259f8..9e7a651a 100644
--- a/src/dashboardWebView/components/Media/Item.tsx
+++ b/src/dashboardWebView/components/Media/Item.tsx
@@ -1,6 +1,6 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
 import { Menu } from '@headlessui/react';
-import { ClipboardIcon, CodeIcon, EyeIcon, PencilIcon, PhotographIcon, PlusIcon, TrashIcon } from '@heroicons/react/outline';
+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';
@@ -95,6 +95,8 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     snippet = snippet?.replace("{alt}", alt || "");
     snippet = snippet?.replace("{caption}", caption || "");
     snippet = snippet?.replace("{filename}", basename(relPath || ""));
+    snippet = snippet?.replace("{mediaWidth}", media?.dimensions?.width?.toString() || "");
+    snippet = snippet?.replace("{mediaHeight}", media?.dimensions?.height?.toString() || "");
 
     Messenger.send(DashboardMessage.insertPreviewImage, {
       image: parseWinPath(relPath) || "",

From f454266846a58b4b9b276857a33558a0cf8e4744 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Fri, 25 Feb 2022 18:21:07 +0100
Subject: [PATCH 56/62] Updated changelog

---
 CHANGELOG.md | 2 +-
 package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 75632be7..c387481c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,7 @@
 
 ### ✨ New features
 
-- [#176](https://github.com/estruyf/vscode-front-matter/issues/176): New `data collection` field type
+- [#176](https://github.com/estruyf/vscode-front-matter/issues/176): New `block` field type that allows you to you to define a group of fields which can be used to create a list of data
 
 ### 🎨 Enhancements
 
diff --git a/package.json b/package.json
index 208e5bf4..3e49d397 100644
--- a/package.json
+++ b/package.json
@@ -341,7 +341,7 @@
           "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."
+            "description": "Use the `{mediaUrl}`, `{caption}`, `{alt}`, `{filename}`, `{mediaHeight}`, and `{mediaWidth}` placeholders in your snippet to automatically insert the media information."
           },
           "scope": "dashboard"
         },

From f53e81e0cb62d3e2b6b7f44a799e1a4cec74cdaa Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 28 Feb 2022 13:45:52 +0100
Subject: [PATCH 57/62] Added release notes

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c387481c..0224c8d9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## [6.1.0] - 2022-02-xx
+## [6.1.0] - 2022-02-xx - [Release notes](https://beta.frontmatter.codes/updates/v6.1.0)
 
 ### ✨ New features
 

From baa56bc246680e42cd9e77b98cac8a2afc6df0ed Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 28 Feb 2022 15:29:10 +0100
Subject: [PATCH 58/62] Updated activation events

---
 package.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 3e49d397..65a07a3a 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,15 @@
     "url": "https://github.com/estruyf/vscode-front-matter"
   },
   "activationEvents": [
-    "*"
+    "workspaceContains:**/.frontmatter",
+    "workspaceContains:**/frontmatter.json",
+    "onCommand:frontMatter.init",
+    "onCommand:frontMatter.dashboard",
+    "onCommand:frontMatter.dashboard.data",
+    "onCommand:frontMatter.dashboard.media",
+    "onCommand:workbench.view.extension.frontmatter-explorer",
+    "onView:frontMatter.explorer",
+    "onStartupFinished"
   ],
   "main": "./dist/extension.js",
   "contributes": {

From 31a41e2a66d8d4868994d554c489a804fe7fa6d5 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 28 Feb 2022 15:56:13 +0100
Subject: [PATCH 59/62] Added version

---
 src/helpers/Telemetry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/Telemetry.ts b/src/helpers/Telemetry.ts
index 526adce1..2237d9f3 100644
--- a/src/helpers/Telemetry.ts
+++ b/src/helpers/Telemetry.ts
@@ -32,7 +32,7 @@ export class Telemetry {
       return;
     }
     
-    Telemetry.reporter?.sendTelemetryEvent(eventName, properties, measurements);
+    Telemetry.reporter?.sendTelemetryEvent(eventName, { version: Extension.getInstance().version, ...properties }, measurements);
   }
 
   public static dispose() {

From 9b92050af8cc94d3194d911afc6bd28f07b20dfa Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 28 Feb 2022 16:31:12 +0100
Subject: [PATCH 60/62] Undo version

---
 src/helpers/Telemetry.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/helpers/Telemetry.ts b/src/helpers/Telemetry.ts
index 2237d9f3..526adce1 100644
--- a/src/helpers/Telemetry.ts
+++ b/src/helpers/Telemetry.ts
@@ -32,7 +32,7 @@ export class Telemetry {
       return;
     }
     
-    Telemetry.reporter?.sendTelemetryEvent(eventName, { version: Extension.getInstance().version, ...properties }, measurements);
+    Telemetry.reporter?.sendTelemetryEvent(eventName, properties, measurements);
   }
 
   public static dispose() {

From c30f401c4f28128a8271697de57e853a4e91d9f2 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 28 Feb 2022 17:27:36 +0100
Subject: [PATCH 61/62] Updated changelog for v6.1.0 release

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0224c8d9..b5cc36a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 # Change Log
 
-## [6.1.0] - 2022-02-xx - [Release notes](https://beta.frontmatter.codes/updates/v6.1.0)
+## [6.1.0] - 2022-02-28 - [Release notes](https://beta.frontmatter.codes/updates/v6.1.0)
 
 ### ✨ New features
 

From c9c38ef10baaa75140d6dc92ba0bf96ae97e86f9 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 28 Feb 2022 17:34:53 +0100
Subject: [PATCH 62/62] Replace fix

---
 src/components/uniforms-frontmatter/ListField.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/uniforms-frontmatter/ListField.tsx b/src/components/uniforms-frontmatter/ListField.tsx
index 3e9e23a5..95d64d05 100644
--- a/src/components/uniforms-frontmatter/ListField.tsx
+++ b/src/components/uniforms-frontmatter/ListField.tsx
@@ -31,7 +31,7 @@ function List({
           isValidElement(child)
             ? cloneElement(child, {
                 key: `${itemIndex}-${childIndex}`,
-                name: child.props.name?.replace('$', '' + itemIndex),
+                name: (child.props.name || "").replace('$', '' + itemIndex),
                 ...itemProps,
               })
             : child,