diff --git a/CHANGELOG.md b/CHANGELOG.md
index 18d2e0cc..b5cc36a8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,36 @@
 # Change Log
 
+## [6.1.0] - 2022-02-28 - [Release notes](https://beta.frontmatter.codes/updates/v6.1.0)
+
+### ✨ New features
+
+- [#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
+
+- 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
+- [#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
+
+- 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
+
+- [#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)
 
 ### ✨ New features
diff --git a/assets/media/styles.css b/assets/media/styles.css
index 518f898a..8f4fa3cf 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; }
@@ -143,6 +143,7 @@
 }
 
 .article__tags {
+  position: relative;
   margin-bottom: 1rem;
 }
 
@@ -165,6 +166,10 @@
   border: 1px solid var(--vscode-inputValidation-infoBorder);
 }
 
+.article__tags__input input:disabled {
+  border-color: transparent;
+}
+
 .article__tags__input.freeform {
   position: relative;
 }
@@ -448,17 +453,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 +639,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/package-lock.json b/package-lock.json
index 85c9b40b..50fee5f4 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"
@@ -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",
@@ -32,7 +35,8 @@
         "@types/react-dom": "17.0.0",
         "@types/vscode": "^1.63.0",
         "@vscode/codicons": "0.0.20",
-        "@vscode/webview-ui-toolkit": "^0.8.1",
+        "@vscode/extension-telemetry": "^0.4.7",
+        "@vscode/webview-ui-toolkit": "^0.9.1",
         "@webpack-cli/serve": "^1.6.0",
         "ajv": "^8.8.2",
         "array-move": "^4.0.0",
@@ -46,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",
@@ -77,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"
@@ -242,82 +251,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",
@@ -654,6 +626,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",
@@ -686,6 +696,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",
@@ -711,6 +744,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",
@@ -729,6 +768,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",
@@ -738,6 +786,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",
@@ -747,6 +804,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",
@@ -787,6 +850,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",
@@ -824,6 +899,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",
@@ -897,20 +1000,42 @@
         "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",
       "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",
-      "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": {
@@ -1197,6 +1322,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",
@@ -2362,10 +2499,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",
@@ -2753,15 +2896,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": {
@@ -2771,12 +2918,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": {
@@ -3031,19 +3181,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": [
         {
@@ -3052,29 +3206,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": {
@@ -4055,32 +4213,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",
@@ -4096,20 +4228,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",
@@ -4151,12 +4269,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",
@@ -4220,37 +4332,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": {
@@ -4969,12 +5066,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",
@@ -5034,12 +5125,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",
@@ -5172,6 +5257,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",
@@ -5184,6 +5275,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",
@@ -5247,9 +5344,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"
@@ -5833,12 +5930,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",
@@ -5896,9 +5987,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"
@@ -5967,12 +6058,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": {
@@ -6079,12 +6170,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": {
@@ -6827,16 +6921,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",
@@ -7184,16 +7268,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": {
@@ -7431,12 +7515,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": {
@@ -8243,21 +8330,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",
@@ -8329,9 +8401,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": {
@@ -8374,12 +8446,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",
@@ -8574,28 +8640,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",
@@ -8915,15 +8965,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",
@@ -8938,14 +9042,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"
@@ -8962,18 +9065,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",
@@ -8999,33 +9090,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"
@@ -9197,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": {
@@ -9332,77 +9417,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": {
@@ -9688,6 +9736,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",
@@ -9720,6 +9806,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",
@@ -9745,6 +9854,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",
@@ -9763,6 +9878,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",
@@ -9772,6 +9896,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",
@@ -9781,6 +9914,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",
@@ -9821,6 +9960,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",
@@ -9858,6 +10009,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",
@@ -9930,20 +10109,36 @@
         }
       }
     },
+    "@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",
       "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",
-      "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": {
@@ -10190,6 +10385,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",
@@ -11073,9 +11277,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",
@@ -11390,15 +11594,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": {
@@ -11408,9 +11613,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": {
@@ -11611,46 +11816,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": {
@@ -12408,23 +12607,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",
@@ -12434,17 +12616,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",
@@ -12476,12 +12647,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
         }
       }
     },
@@ -12532,36 +12697,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": {
@@ -13072,12 +13216,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",
@@ -13129,14 +13267,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": {
@@ -13247,6 +13377,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",
@@ -13259,6 +13395,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",
@@ -13308,9 +13450,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"
@@ -13650,14 +13792,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": {
@@ -13702,9 +13836,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": {
@@ -13753,9 +13887,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": {
@@ -13840,12 +13974,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": {
@@ -14377,12 +14511,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",
@@ -14637,16 +14765,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": {
@@ -14827,12 +14955,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": {
@@ -15463,17 +15591,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": {
@@ -15531,9 +15648,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": {
@@ -15562,12 +15679,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
         }
       }
     },
@@ -15724,24 +15835,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",
@@ -16002,15 +16095,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",
@@ -16025,25 +16157,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",
@@ -16062,23 +16184,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": {}
         }
@@ -16178,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 17232b2e..65a07a3a 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": {
@@ -45,26 +45,15 @@
     "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",
+    "workspaceContains:**/.frontmatter",
+    "workspaceContains:**/frontmatter.json",
     "onCommand:frontMatter.init",
-    "onCommand:frontMatter.collapseSections",
-    "onCommand:frontMatter.preview",
     "onCommand:frontMatter.dashboard",
-    "onCommand:frontMatter.promoteSettings",
-    "onCommand:frontMatter.insertImage",
-    "onView:frontMatter.explorer"
+    "onCommand:frontMatter.dashboard.data",
+    "onCommand:frontMatter.dashboard.media",
+    "onCommand:workbench.view.extension.frontmatter-explorer",
+    "onView:frontMatter.explorer",
+    "onStartupFinished"
   ],
   "main": "./dist/extension.js",
   "contributes": {
@@ -73,7 +62,7 @@
         {
           "id": "frontmatter-explorer",
           "title": "FrontMatter",
-          "icon": "assets/frontmatter.svg"
+          "icon": "assets/frontmatter-short-min.svg"
         }
       ]
     },
@@ -82,7 +71,7 @@
         {
           "id": "frontMatter.explorer",
           "name": "FrontMatter",
-          "icon": "assets/frontmatter.svg",
+          "icon": "assets/frontmatter-short-min.svg",
           "contextualTitle": "FrontMatter",
           "type": "webview"
         }
@@ -360,7 +349,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"
         },
@@ -517,6 +506,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": "",
@@ -651,7 +646,9 @@
                         "tags",
                         "categories",
                         "draft",
-                        "fields"
+                        "fields",
+                        "json",
+                        "block"
                       ],
                       "description": "Define the type of field"
                     },
@@ -717,6 +714,33 @@
                     },
                     "fields": {
                       "$ref": "#contenttypefield"
+                    },
+                    "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"
+                      ],
+                      "default": [],
+                      "description": "The ID(s) of your data type(s) defined in the `frontMatter.data.types` setting",
+                      "items": {
+                        "type": "string"
+                      }
+                    },
+                    "taxonomyLimit": {
+                      "type": "number",
+                      "default": 0,
+                      "description": "Limit the number of taxonomies to select. Set to 0 to allow unlimited."
                     }
                   },
                   "additionalProperties": false,
@@ -766,6 +790,34 @@
                           "fields"
                         ]
                       }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "block"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "fieldGroup"
+                        ]
+                      }
+                    },
+                    {
+                      "if": {
+                        "properties": {
+                          "type": {
+                            "const": "json"
+                          }
+                        }
+                      },
+                      "then": {
+                        "required": [
+                          "dataType"
+                        ]
+                      }
                     }
                   ]
                 }
@@ -808,7 +860,8 @@
                 {
                   "title": "Publishing date",
                   "name": "date",
-                  "type": "datetime"
+                  "type": "datetime",
+                  "default": "{{now}}"
                 },
                 {
                   "title": "Content preview",
@@ -871,6 +924,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",
@@ -956,6 +1031,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",
@@ -1421,8 +1501,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",
@@ -1431,7 +1514,8 @@
     "@types/react-dom": "17.0.0",
     "@types/vscode": "^1.63.0",
     "@vscode/codicons": "0.0.20",
-    "@vscode/webview-ui-toolkit": "^0.8.1",
+    "@vscode/extension-telemetry": "^0.4.7",
+    "@vscode/webview-ui-toolkit": "^0.9.1",
     "@webpack-cli/serve": "^1.6.0",
     "ajv": "^8.8.2",
     "array-move": "^4.0.0",
@@ -1445,8 +1529,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",
@@ -1476,7 +1563,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/commands/Article.ts b/src/commands/Article.ts
index cfd5e11f..c737a136 100644
--- a/src/commands/Article.ts
+++ b/src/commands/Article.ts
@@ -1,17 +1,18 @@
 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";
 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';
 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';
+import { ParsedFrontMatter } from '../parsers';
+import { MediaListener } from '../listeners/panel';
 
 
 export class Article {
@@ -102,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;
   }
@@ -124,7 +125,7 @@ export class Article {
 
     ArticleHelper.update(
       editor,
-      updatedArticle as matter.GrayMatterFile<string>
+      updatedArticle as ParsedFrontMatter
     );
   }
 
@@ -144,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) {
@@ -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;
@@ -334,13 +337,13 @@ export class Article {
     } as DashboardData);
 
     // Let the editor panel know you are selecting an image
-    ExplorerView.getInstance().getMediaSelection();
+    MediaListener.getMediaSelection();
 	}
 
   /**
    * Get the current article
    */
-  private static getCurrent(): matter.GrayMatterFile<string> | undefined {
+  private static getCurrent(): ParsedFrontMatter | undefined {
     const editor = vscode.window.activeTextEditor;
     if (!editor) {
       return;
@@ -361,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/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 23e4900c..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,8 +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 } from '../listeners';
-import { DataListener } from '../listeners/DataListener';
+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;
@@ -116,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 });
       }
@@ -128,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);
     });
 
@@ -146,6 +142,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 99116690..ad664ce2 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";
@@ -12,8 +12,9 @@ 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';
 
 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);
     }
   }
 
@@ -281,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
@@ -313,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 
@@ -321,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;
   }
@@ -334,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/commands/Preview.ts b/src/commands/Preview.ts
index 4b559335..c7ae7132 100644
--- a/src/commands/Preview.ts
+++ b/src/commands/Preview.ts
@@ -1,4 +1,5 @@
-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";
@@ -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..b6dddbd2 100644
--- a/src/commands/Project.ts
+++ b/src/commands/Project.ts
@@ -1,3 +1,4 @@
+import { Telemetry } from './../helpers/Telemetry';
 import { workspace, Uri } from "vscode";
 import { join } from "path";
 import * as fs from "fs";
@@ -5,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 {
 
@@ -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/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/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 c63045c8..65d3b7f6 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';
@@ -11,8 +11,9 @@ 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';
 
 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/components/uniforms-frontmatter/AutoField.tsx b/src/components/uniforms-frontmatter/AutoField.tsx
new file mode 100644
index 00000000..ea130f2a
--- /dev/null
+++ b/src/components/uniforms-frontmatter/AutoField.tsx
@@ -0,0 +1,41 @@
+import * as invariant from 'invariant';
+import { createAutoField } from 'uniforms';
+import { PreviewImageField } from '../../panelWebView/components/Fields/PreviewImageField';
+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..4776bf1e
--- /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(--frontmatter-toggle-secondaryBackground, 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(--frontmatter-toggle-background, var(--vscode-button-background));
+}
+
+input:focus + .field__toggle__slider {
+  box-shadow: 0 0 1px var(--frontmatter-toggle-background, 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..d328d10d
--- /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 './BoolField.css';
+import { LabelField } from './LabelField';
+
+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)}>
+      <LabelField label={label} id={id} required={props.required} />
+      
+      <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..972b4119
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ErrorsField.css
@@ -0,0 +1,18 @@
+
+
+.autoform-error {
+  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(--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/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/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/ListAddField.css b/src/components/uniforms-frontmatter/ListAddField.css
new file mode 100644
index 00000000..fd10c316
--- /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(--frontmatter-field-border, var(--vscode-editor-foreground));
+  width: 100%;
+  justify-content: center;
+  margin-top: .5rem;
+
+  &:hover {
+    border-color: var(--frontmatter-field-borderActive, var(--vscode-button-background));
+    color: var(--frontmatter-field-borderActive, 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..8886debc
--- /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(--frontmatter-list-border, 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..f9dce271
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListField.css
@@ -0,0 +1,8 @@
+
+
+.autoform__list_field {
+  margin-bottom: 1rem;
+  margin-top: 1rem;
+  padding: 10px;
+  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
new file mode 100644
index 00000000..95d64d05
--- /dev/null
+++ b/src/components/uniforms-frontmatter/ListField.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+
+import ListAddField from './ListAddField';
+import ListItemField from './ListItemField';
+
+import './ListField.css';
+import { LabelField } from './LabelField';
+
+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)}>
+      <LabelField label={label} id={props.id} required={props.required} />
+
+      {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..26a786f3
--- /dev/null
+++ b/src/components/uniforms-frontmatter/NestField.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+
+import AutoField from './AutoField';
+import { LabelField } from './LabelField';
+
+export type NestFieldProps = HTMLFieldProps<
+  object,
+  HTMLDivElement,
+  { itemProps?: object }
+>;
+
+function Nest({
+  children,
+  fields,
+  itemProps,
+  label,
+  ...props
+}: NestFieldProps) {
+  return (
+    <div {...filterDOMProps(props)}>
+      <LabelField label={label} id={props.id} required={props.required} />
+
+      {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..4af552a5
--- /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 { LabelField } from './LabelField';
+
+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)}>
+      <LabelField label={label} id={id} required={props.required} />
+
+      <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..608bacd7
--- /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 { LabelField } from './LabelField';
+
+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'])}>
+      <LabelField label={label} id={id} required={props.required} />
+
+      {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.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
new file mode 100644
index 00000000..09f4eb2a
--- /dev/null
+++ b/src/components/uniforms-frontmatter/SelectField.tsx
@@ -0,0 +1,110 @@
+import xor = require('lodash.xor');
+import * as React from 'react';
+import { Ref } from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelField } from './LabelField';
+import './SelectField.css';
+
+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 className='autoform__select_field' {...filterDOMProps(props)}>
+      <LabelField label={label} id={id} required={required} />
+      
+      {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..c77dc16f
--- /dev/null
+++ b/src/components/uniforms-frontmatter/TextField.tsx
@@ -0,0 +1,49 @@
+import { Ref } from 'react';
+import * as React from 'react';
+import { HTMLFieldProps, connectField, filterDOMProps } from 'uniforms';
+import { LabelField } from './LabelField';
+
+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)}>
+      <LabelField label={label} id={id} required={props.required} />
+
+      <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/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/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/constants/settings.ts b/src/constants/settings.ts
index 31e2b535..d6664e6f 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";
@@ -32,6 +33,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";
@@ -61,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/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/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/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/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/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 b68054db..daafc654 100644
--- a/src/dashboardWebView/components/DataView/SortableItem.tsx
+++ b/src/dashboardWebView/components/DataView/SortableItem.tsx
@@ -23,8 +23,10 @@ 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'>
+      <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)}>
           <DragHandle />
           <span>{value}</span>
         </div>
diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx
index 35d5c6e8..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';
@@ -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 || ""
     });
@@ -94,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) || "",
diff --git a/src/dashboardWebView/components/Media/Media.tsx b/src/dashboardWebView/components/Media/Media.tsx
index 9b68ddf9..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';
@@ -13,11 +10,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 +44,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/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/dashboardWebView/styles.css b/src/dashboardWebView/styles.css
index e0f051aa..74b3d5c0 100644
--- a/src/dashboardWebView/styles.css
+++ b/src/dashboardWebView/styles.css
@@ -2,6 +2,40 @@
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
 
+:root {
+  /* Bool field */
+  --frontmatter-toggle-background: #15c2cb;
+  --frontmatter-toggle-secondaryBackground: #ADADAD;
+
+  /* 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 field */
+  --frontmatter-list-border: #ADADAD;
+
+  .vscode-dark {
+    --frontmatter-list-border: #404551;
+  }
+
+  /* Select field */
+  --frontmatter-select-foreground: #0e131f;
+}
+
 
 .loader {
   border-top-color: #15c2cb;
@@ -80,15 +114,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 +306,6 @@
     input[type="submit"] {
       @apply text-vulcan-500
     }
-
-    .errors {
-      li {
-        @apply text-white;
-      }
-    }
   }
 
   .ant-list.ant-list-bordered {
diff --git a/src/explorerView/ExplorerView.ts b/src/explorerView/ExplorerView.ts
index 7cb73195..95fb9e00 100644
--- a/src/explorerView/ExplorerView.ts
+++ b/src/explorerView/ExplorerView.ts
@@ -1,30 +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 } 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';
-
-const FILE_LIMIT = 10;
+import { Telemetry } from '../helpers/Telemetry';
 
 export class ExplorerView implements WebviewViewProvider, Disposable {
   public static readonly viewType = "frontMatter.explorer";
@@ -63,6 +45,10 @@ export class ExplorerView implements WebviewViewProvider, Disposable {
     } 
 	}
 
+  public getWebview() {
+    return this.panel?.webview;
+  }
+
   /**
    * Default resolve webview panel
    * @param webviewView 
@@ -85,192 +71,43 @@ 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(() => {
       if (this.visible) {
-        // this.getFileData();
+        Telemetry.send(TelemetryEvent.openExplorerView);
+        DataListener.getFileData();
       }
     });
 
     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);
   }
 
   /**
@@ -279,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 });
     }
   }
 
@@ -289,395 +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)
-        }
-      } 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) {
@@ -691,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 
@@ -785,7 +171,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/extension.ts b/src/extension.ts
index 102070bb..76aac326 100644
--- a/src/extension.ts
+++ b/src/extension.ts
@@ -1,3 +1,4 @@
+import { Telemetry } from './helpers/Telemetry';
 import { ContentType } from './helpers/ContentType';
 import { Dashboard } from './commands/Dashboard';
 import * as vscode from 'vscode';
@@ -6,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';
@@ -18,16 +19,15 @@ 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; };
 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;
 
@@ -43,6 +43,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 +55,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 +64,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();
 	}));
 
@@ -84,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');
@@ -151,7 +158,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, () => {
@@ -163,9 +170,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();
 	});
 
@@ -189,7 +195,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();
 		}
 	}));
 
@@ -234,7 +240,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/ArticleHelper.ts b/src/helpers/ArticleHelper.ts
index d70293ba..71ab9e66 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 { 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 { 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';
@@ -18,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[] = [];
@@ -56,7 +58,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 +68,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 +119,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 +129,7 @@ export class ArticleHelper {
       }
     }
     
-    return matter.stringify(content, data, ({
-      ...TomlEngine,
-      ...langOpts,
+    return FrontMatterParser.toFile(content, data, ({
       noArrayIndent: !indentArray,
       skipInvalid: true,
       noCompatMode: true,
@@ -169,7 +166,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;
     }
@@ -230,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, "-"));
   }
 
   /**
@@ -353,22 +351,109 @@ 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 
    * @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/ContentType.ts b/src/helpers/ContentType.ts
index c54e3e9e..89693f95 100644
--- a/src/helpers/ContentType.ts
+++ b/src/helpers/ContentType.ts
@@ -1,13 +1,14 @@
-import { PagesListener } from './../listeners/PagesListener';
+import { PagesListener } from './../listeners/dashboard';
 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 } 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();
   }
@@ -138,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);
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/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/ImageHelper.ts b/src/helpers/ImageHelper.ts
index 3bb402ac..d5567e51 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';
@@ -54,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);
     }
   }
 
@@ -78,4 +82,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..3383977b 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,15 @@ 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,
+          blockData: data.blockData
+        });
       }
     }
   }
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/helpers/PanelSettings.ts b/src/helpers/PanelSettings.ts
new file mode 100644
index 00000000..3d860625
--- /dev/null
+++ b/src/helpers/PanelSettings.ts
@@ -0,0 +1,67 @@
+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_FIELD_GROUPS, SETTING_TAXONOMY_TAGS } from "../constants"
+import { CustomScript, DataType, DraftField, FieldGroup, 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),
+      fieldGroups: Settings.get<FieldGroup[]>(SETTING_TAXONOMY_FIELD_GROUPS),
+    }
+  }
+
+  /**
+   * 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/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/SettingsHelper.ts b/src/helpers/SettingsHelper.ts
index b65cfcf4..f3902211 100644
--- a/src/helpers/SettingsHelper.ts
+++ b/src/helpers/SettingsHelper.ts
@@ -1,8 +1,9 @@
+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';
@@ -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..526adce1
--- /dev/null
+++ b/src/helpers/Telemetry.ts
@@ -0,0 +1,41 @@
+import TelemetryReporter, { TelemetryEventMeasurements, TelemetryEventProperties } from '@vscode/extension-telemetry';
+import { Extension, Settings } from '.';
+import { EXTENSION_BETA_ID, EXTENSION_ID, SETTING_TELEMETRY_DISABLE } from '../constants';
+
+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();
+    }
+
+    const isDisabled = Settings.get<boolean>(SETTING_TELEMETRY_DISABLE);
+    if (isDisabled) {
+      return;
+    }
+    
+    Telemetry.reporter?.sendTelemetryEvent(eventName, properties, measurements);
+  }
+
+  public static dispose() {
+    Telemetry.reporter?.dispose();
+  }
+}
\ No newline at end of file
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/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
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/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 82%
rename from src/listeners/MediaListener.ts
rename to src/listeners/dashboard/MediaListener.ts
index f85dcaa8..21ad392c 100644
--- a/src/listeners/MediaListener.ts
+++ b/src/listeners/dashboard/MediaListener.ts
@@ -1,10 +1,11 @@
-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 } from '../constants';
+import { COMMAND_NAME, TelemetryEvent } from '../../constants';
 import * as os from 'os';
 
 
@@ -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:
diff --git a/src/listeners/PagesListener.ts b/src/listeners/dashboard/PagesListener.ts
similarity index 52%
rename from src/listeners/PagesListener.ts
rename to src/listeners/dashboard/PagesListener.ts
index f77ddc85..eeea4fe8 100644
--- a/src/listeners/PagesListener.ts
+++ b/src/listeners/dashboard/PagesListener.ts
@@ -1,18 +1,19 @@
-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";
+import { Field, FieldType } from '../../models';
 
 
 export class PagesListener extends BaseListener {
@@ -150,6 +151,9 @@ export class PagesListener extends BaseListener {
         fmFileName: fileName,
         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,
@@ -159,35 +163,69 @@ 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);
+      let tagParents = this.findFieldByType(contentType.fields, "tags");
+      if (tagParents.length !== 0) {
+        page.fmTags = this.getFieldValue(article.data, tagParents);
+      }
 
-          let previewUri = null;
-          if (existsSync(staticPath)) {
-            previewUri = Uri.file(staticPath);
-          } else if (existsSync(contentFolderPath)) {
-            previewUri = Uri.file(contentFolderPath);
-          }
+      let categoryParents = this.findFieldByType(contentType.fields, "categories");
+      if (categoryParents.length !== 0) {
+        page.fmCategories = this.getFieldValue(article.data, categoryParents);
+      }
 
-          if (previewUri) {
-            const preview = Dashboard.getWebview()?.asWebviewUri(previewUri);
-            page[previewField] = preview?.toString() || "";
+      // Check if parent fields were retrieved, if not there was no image present
+      if (previewFieldParents.length > 0) {
+        let fieldValue = null;
+        let crntPageData = article?.data;
+
+        for (let i = 0; i < previewFieldParents.length; i++) {
+          const previewField = previewFieldParents[i];
+
+          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 +235,76 @@ 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 
+   * @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
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/dashboard/TelemetryListener.ts b/src/listeners/dashboard/TelemetryListener.ts
new file mode 100644
index 00000000..b482c2cd
--- /dev/null
+++ b/src/listeners/dashboard/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/dashboard/index.ts
similarity index 71%
rename from src/listeners/index.ts
rename to src/listeners/dashboard/index.ts
index a1799860..ab3dbdfa 100644
--- a/src/listeners/index.ts
+++ b/src/listeners/dashboard/index.ts
@@ -1,5 +1,7 @@
 export * from './DashboardListener';
+export * from './DataListener';
 export * from './ExtensionListener';
 export * from './MediaListener';
 export * from './PagesListener';
 export * from './SettingsListener';
+export * from './TelemetryListener';
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..a15f05cc
--- /dev/null
+++ b/src/listeners/panel/DataListener.ts
@@ -0,0 +1,286 @@
+import { BlockFieldData } from './../../models/BlockFieldData';
+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';
+import { ParsedFrontMatter } from '../../parsers';
+
+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;
+      case CommandToCode.updatePlaceholder:
+        this.updatePlaceholder(msg?.data?.field, msg?.data?.value, msg?.data?.title);
+        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, 
+    blockData 
+  }: { 
+    field: string, 
+    value: any, 
+    parents?: string[], 
+    blockData?: BlockFieldData,
+    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((f) => f.type === "datetime");
+    const imageFields = contentType.fields.filter((f) => f.type === "image" && f.multiple);
+
+    // Support multi-level fields
+    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) {
+      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];
+        }
+      }
+
+      // 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];
+      }
+    }
+
+    return parentObj;
+  }
+
+  /**
+   * 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);
+      }
+    }
+  }
+
+  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/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..7df4cae0
--- /dev/null
+++ b/src/listeners/panel/MediaListener.ts
@@ -0,0 +1,63 @@
+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";
+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;
+      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()
+        });
+      }
+    }
+  }
+
+  /**
+   * 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..94b83e74
--- /dev/null
+++ b/src/listeners/panel/TaxonomyListener.ts
@@ -0,0 +1,122 @@
+import { CommandToCode } from "../../panelWebView/CommandToCode";
+import { TagType } from "../../panelWebView/TagType";
+import { BaseListener } from "./BaseListener";
+import { window } from "vscode";
+import { ArticleHelper, Settings } from "../../helpers";
+import { BlockFieldData, 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(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        break;
+      case CommandToCode.updateCategories:
+        this.updateTags(msg.data?.fieldName, msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        break;
+      case CommandToCode.updateKeywords:
+        this.updateTags(TagType.keywords.toLowerCase(), msg.data?.values || [], msg.data?.parents || [], msg.data?.blockData);
+        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(fieldName: string, values: string[], parents: string[], blockData?: BlockFieldData) {
+    const editor = window.activeTextEditor;
+    if (!editor) {
+      return "";
+    }
+
+    const article = ArticleHelper.getFrontMatter(editor);
+    if (article && article.data) {
+
+      const parentObj = DataListener.getParentObject(article.data, article, parents, blockData);
+
+      parentObj[fieldName] = 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) {
+
+      const parentObj = DataListener.getParentObject(article.data, article, data.parents, data.blockData);
+
+      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/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/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/models/PanelSettings.ts b/src/models/PanelSettings.ts
index e64c2a9f..d547571d 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;
@@ -10,19 +11,28 @@ 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;
+  fieldGroups: FieldGroup[] | undefined;
+  commaSeparatedFields: string[];
+}
+
+export interface FieldGroup { 
+  id: string;
+  labelField?: string;
+  fields: Field[];
 }
 
 export interface FrameworkCommands {
@@ -38,10 +48,12 @@ export interface ContentType {
   pageBundle?: boolean;
 }
 
+export type FieldType = "string" | "number" | "datetime" | "boolean" | "image" | "choice" | "tags" | "categories" | "draft" | "taxonomy" | "fields" | "json" | "block";
+
 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 +62,9 @@ export interface Field {
   taxonomyId?: string;
   default?: string;
   fields?: Field[];
+  fieldGroup?: string | string[];
+  dataType?: string | string[];
+  taxonomyLimit?: number;
 }
 
 export interface DateInfo {
@@ -65,8 +80,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..680f6091 100644
--- a/src/models/index.ts
+++ b/src/models/index.ts
@@ -1,7 +1,11 @@
+export * from './BlockFieldData';
 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/Command.ts b/src/panelWebView/Command.ts
index 7236f776..c89e789e 100644
--- a/src/panelWebView/Command.ts
+++ b/src/panelWebView/Command.ts
@@ -6,5 +6,7 @@ export enum Command {
   focusOnCategories = "focusOnCategories",
   closeSections = "closeSections",
   folderInfo = "folderInfo",
-  mediaSelectionData = "mediaSelectionData"
+  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 e55cf729..94ddb683 100644
--- a/src/panelWebView/CommandToCode.ts
+++ b/src/panelWebView/CommandToCode.ts
@@ -30,4 +30,6 @@ export enum CommandToCode {
   addToCustomTaxonomy = "addToCustomTaxonomy",
   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/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..31b1803d 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,8 @@ 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();
+    if (!prevState || !prevState[collapseKey] || prevState[collapseKey] === null || prevState[collapseKey] === 'true') {
       setIsOpen(true);
       updateStorage(true);
     }
@@ -31,7 +32,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/components/DataBlock/DataBlockControls.tsx b/src/panelWebView/components/DataBlock/DataBlockControls.tsx
new file mode 100644
index 00000000..75e49531
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockControls.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { useForm } from 'uniforms';
+import { SubmitField } from 'uniforms-unstyled';
+
+export interface IDataBlockControlsProps {
+  model: any | null;
+  onClear: () => void;
+}
+
+export const DataBlockControls: React.FunctionComponent<IDataBlockControlsProps> = ({ model, onClear }: React.PropsWithChildren<IDataBlockControlsProps>) => {
+  const { formRef } = useForm();
+  
+  return (
+    <div className='json_data__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/DataBlock/DataBlockField.tsx b/src/panelWebView/components/DataBlock/DataBlockField.tsx
new file mode 100644
index 00000000..582900e1
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockField.tsx
@@ -0,0 +1,271 @@
+import * as React from 'react';
+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';
+
+export interface IDataBlockFieldProps {
+  label: string;
+  settings: PanelSettings;
+  field: Field;
+  parentFields: string[];
+  value: any;
+  filePath: string;
+  fieldsRenderer: (
+    ctFields: Field[], 
+    parent: IMetadata, 
+    parentFields: string[], 
+    blockData?: BlockFieldData,
+    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, 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 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);
+
+    if (!crntField) {
+      return;
+    }
+
+    let data: any = {};
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      data = Object.assign({}, dataClone[selectedIndex]);
+    }
+
+    let parentObj: any = data;
+    parentObj[crntField] = crntValue;
+
+
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      dataClone[selectedIndex] = {
+        ...data,
+        fieldGroup: selectedGroup?.id
+      };
+    } else {
+      dataClone.push({
+        ...data,
+        fieldGroup: selectedGroup?.id
+      });
+
+      const newIndex = dataClone.length - 1;
+      setSelectedIndex(newIndex);
+      updateSelectionState(newIndex);
+    }
+
+    onSubmit(dataClone);
+  }, [selectedGroup?.id, selectedIndex, value, onSubmit]);
+
+  const deleteItem = useCallback((index: number) => {
+    const dataClone: any[] = Object.assign([], value);
+
+    if (!value) {
+      return;
+    }
+
+    dataClone.splice(index, 1);
+    onSubmit(dataClone);
+    onAdd();
+  }, [value, selectedIndex, onSubmit]);
+
+  const onGroupChange = (group: FieldGroup | null | undefined) => {
+    setSelectedGroup(group);
+
+    if (!group) {
+      // Clear the selected index
+      onAdd();
+    }
+  }
+
+  /**
+   * 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({});
+
+    updateSelectionState(undefined);
+  }, [setSelectedIndex, setSelectedGroup, setSelectedBlockData]); 
+  
+  const onEdit = useCallback((index: number) => {
+    updateSelectionState(index);
+    setSelectedIndex(index);
+
+    // Show the form
+    onShowForm();
+
+    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;
+    }
+
+    if (selectedIndex !== null && selectedIndex !== undefined) {
+      setSelectedIndex(newIndex);
+    }
+
+    const newEntries = arrayMoveImmutable(value, oldIndex, newIndex);
+    onSubmit(newEntries);
+  }, [value, selectedIndex]);
+
+  // Retrieving the state from local storage (does not need to be persistent)
+  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 updateSelectionState = useCallback((value: number | undefined) => {
+    localStorage.setItem(SELECTION_STATE_KEY, value as any);
+  }, [SELECTION_STATE_KEY]);
+
+  useEffect(() => {
+    if (selectedIndex !== null) {
+      const fieldData = value[selectedIndex];
+      setSelectedBlockData(fieldData);
+    }
+  } , [selectedIndex, value, setSelectedBlockData]);
+
+  useEffect(() => {
+    if (parentBlock) {
+      onAdd();
+    }
+  }, [parentBlock]);
+  
+  useEffect(() => {
+    const stateIdx = retrieveSelectionState();
+    if (stateIdx !== undefined) {
+      onEdit(stateIdx);
+    }
+  }, []);
+
+  if (parentBlock === null) {
+    return null;
+  }
+  
+  return (
+    <div className='json_data__field'>
+
+      <VsLabel>
+        <div className={`metadata_field__label`}>
+          <PencilIcon style={{ width: "16px", height: "16px" }} /> <span style={{ lineHeight: "16px"}}>{label}</span>
+        </div>
+      </VsLabel>
+
+      {
+        (!hideSubBlock) ? (
+          <div className='block_field__form'>
+            <h3>
+              {
+                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} />
+
+            { 
+              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 title={`Add ${field.name}`} onClick={onShowForm}>Add {field.name}</button>
+        )
+      }
+
+      <DataBlockRecords
+        fieldGroups={settings.fieldGroups}
+        records={value}
+        selectedIndex={selectedIndex}
+        onAdd={onAdd}
+        onSort={onSort}
+        onEdit={onEdit}
+        onDelete={deleteItem} />
+    </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..c93d7981
--- /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={`json_data__record ${isSelected ? `json_data__record_selected` : ``}`}>
+      <div>
+        <DragHandle />
+
+        <span>{label} - {id+1}</span>
+      </div>
+
+      <div>
+        <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='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>
+    </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..6796a8e8
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockRecords.tsx
@@ -0,0 +1,70 @@
+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';
+import { useCallback } from 'react';
+import { FieldGroup } from '../../../models';
+export interface IDataBlockRecordsProps {
+  fieldGroups?: FieldGroup[];
+  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 = ({ 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;
+  }
+
+  return (
+    <div className='json_data__list'>
+      <VsLabel>
+        <div className={`metadata_field__label`} >
+          <div>
+            <CollectionIcon style={{ width: "16px", height: "16px" }} />
+            <span style={{ lineHeight: "16px"}}>Records</span>
+          </div>
+        </div>
+      </VsLabel>
+
+      <Container onSortEnd={onSort} useDragHandle>
+      {
+        records.map((v: any, idx: number) => (
+          <DataBlockRecord 
+            key={idx} 
+            id={idx}
+            index={idx}
+            label={getLabel(v)}
+            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..ec82135d
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/DataBlockSelector.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { Field, FieldGroup } from '../../../models';
+import { VSCodeDropdown, VSCodeOption } from '@vscode/webview-ui-toolkit/react';
+
+export interface IDataBlockSelectorProps {
+  field: Field;
+  fieldGroups: FieldGroup[] | undefined;
+  selectedGroup: string | undefined;
+  onGroupChange: (group: FieldGroup | undefined | null) => void;
+}
+
+const EMPTY_OPTION = "EMPTY_OPTION";
+
+export const DataBlockSelector: React.FunctionComponent<IDataBlockSelectorProps> = ({ field, fieldGroups, selectedGroup, onGroupChange }: React.PropsWithChildren<IDataBlockSelectorProps>) => {
+  const [ options, setOptions ] = useState<string[]>([]);
+
+  const onGroupSet = useCallback((fieldGroup: string) => {
+    if (fieldGroups && fieldGroup !== EMPTY_OPTION) {
+      const group = fieldGroups.find(group => group.id === fieldGroup);
+      onGroupChange(group);
+    } else {
+      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.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.fieldGroup]);
+      }
+    }
+  }, [field.fieldGroup, fieldGroups, onGroupChange]);
+
+  useEffect(() => {
+    if (fieldGroups && selectedGroup) {
+      if (selectedGroup !== EMPTY_OPTION) {
+        onGroupSet(selectedGroup);
+      } else {
+        onGroupChange(null);
+      }
+    }
+  }, [selectedGroup, fieldGroups, onGroupChange])
+
+  if (options.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className='json_data__selector'>
+      <h3>Block type</h3>
+      <VSCodeDropdown
+        value={selectedGroup ?? EMPTY_OPTION}
+        onChange={onGroupSelect}
+        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/DataBlock/index.ts b/src/panelWebView/components/DataBlock/index.ts
new file mode 100644
index 00000000..2d2b03cb
--- /dev/null
+++ b/src/panelWebView/components/DataBlock/index.ts
@@ -0,0 +1,5 @@
+export * from './DataBlockControls';
+export * from './DataBlockField';
+export * from './DataBlockRecord';
+export * from './DataBlockRecords';
+export * from './DataBlockSelector';
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/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>
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/Fields/WrapperField.tsx b/src/panelWebView/components/Fields/WrapperField.tsx
new file mode 100644
index 00000000..728373a7
--- /dev/null
+++ b/src/panelWebView/components/Fields/WrapperField.tsx
@@ -0,0 +1,332 @@
+
+
+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];
+
+    if (field.type === "tags" || field.type === "categories" || field.type === "taxonomy") {
+      setFieldValue(value || []);
+      return;
+    };
+    
+    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);
+    }
+
+    // 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}
+          fieldName={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}
+          limit={field.taxonomyLimit} />
+      </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}
+          limit={field.taxonomyLimit} />
+      </FieldBoundary>
+    );
+  } else if (field.type === 'categories') {
+    return (
+      <FieldBoundary key={field.name} fieldName={field.title || field.name}>
+        <TagPicker 
+          type={TagType.categories}
+          label={field.title || field.name}
+          fieldName={field.name}
+          icon={<ListUnorderedIcon />}
+          crntSelected={fieldValue as string[] || []} 
+          options={settings.categories} 
+          freeform={settings.freeform || false} 
+          focussed={focusElm === TagType.categories}
+          unsetFocus={unsetFocus}
+          parents={parentFields}
+          blockData={blockData}
+          limit={field.taxonomyLimit} />
+      </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/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/JsonField/JsonField.tsx b/src/panelWebView/components/JsonField/JsonField.tsx
new file mode 100644
index 00000000..92c205f5
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonField.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 IJsonFieldProps {
+  label: string;
+  settings: PanelSettings;
+  field: Field;
+  value: any;
+  onSubmit: (data: any) => void;
+}
+
+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);
+
+  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='json_data__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/JsonFieldControls.tsx b/src/panelWebView/components/JsonField/JsonFieldControls.tsx
new file mode 100644
index 00000000..90015b78
--- /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='json_data__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/JsonFieldForm.tsx b/src/panelWebView/components/JsonField/JsonFieldForm.tsx
new file mode 100644
index 00000000..564c2ff5
--- /dev/null
+++ b/src/panelWebView/components/JsonField/JsonFieldForm.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 { 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 });
+
+  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..8f51a445
--- /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={`json_data__record ${isSelected ? `json_data__record_selected` : ``}`}>
+      <div>
+        <DragHandle />
+
+        <span>{label} - {id+1}</span>
+      </div>
+
+      <div>
+        <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='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>
+    </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..0df9e2fb
--- /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='json_data__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='json_data__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..32c0b95e
--- /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='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)}
+        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..97a6a59d
--- /dev/null
+++ b/src/panelWebView/components/JsonField/index.ts
@@ -0,0 +1,6 @@
+export * from './JsonField';
+export * from './JsonFieldControls';
+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 a6994840..f055be8c 100644
--- a/src/panelWebView/components/Metadata.tsx
+++ b/src/panelWebView/components/Metadata.tsx
@@ -1,25 +1,15 @@
 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';
 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 { WrapperField } from './Fields/WrapperField';
 
 export interface IMetadata {
   [prop: string]: string[] | string | null | IMetadata;
@@ -46,198 +36,46 @@ 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;
   }
 
-  const renderFields = (ctFields: Field[], parent: IMetadata, parentFields: string[] = []) => {
+  const 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 => {
     if (!ctFields) {
       return;
     }
 
-    return ctFields.map(field => {
-      if (field.hidden) {
-        return null;
-      }
-
-      if (field.type === 'datetime') {
-        const dateValue = parent[field.name] ? getDate(parent[field.name] as string) : null;
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DateTimeField
-              label={field.title || field.name}
-              date={dateValue}
-              format={settings?.date?.format}
-              onChange={(date => sendUpdate(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={!!parent[field.name] as any} 
-              onChanged={(checked) => sendUpdate(field.name, checked, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'string') {
-        const textValue = parent[field.name];
-
-        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) => sendUpdate(field.name, value, parentFields)}
-              value={textValue as string || null} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'number') {
-        const fieldValue = parent[field.name];
-        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) => sendUpdate(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={parent[field.name] as PreviewImageValue | PreviewImageValue[] | null}
-              multiple={field.multiple}
-              onChange={(value) => sendUpdate(field.name, value, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'choice') {
-        const choices = field.choices || [];
-        const choiceValue = parent[field.name];
-
-        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 => sendUpdate(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={parent[field.name] as string[] || []} 
-              options={settings?.tags || []} 
-              freeform={settings.freeform} 
-              focussed={focusElm === TagType.tags}
-              unsetFocus={unsetFocus}
-              parents={parentFields} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'taxonomy') {
-        const taxonomyData = settings.customTaxonomy.find(ct => ct.id === field.taxonomyId);
-        const selectedValues = parent[field.name] || [];
-
-        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} 
-              focussed={focusElm === TagType.custom}
-              unsetFocus={unsetFocus}
-              fieldName={field.name}
-              taxonomyId={field.taxonomyId}
-              parents={parentFields} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'categories') {
-        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[] || []} 
-              options={settings.categories} 
-              freeform={settings.freeform} 
-              focussed={focusElm === TagType.categories}
-              unsetFocus={unsetFocus}
-              parents={parentFields} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'draft') {
-        const draftField = settings?.draftField;
-        const value = parent[field.name];
-
-        return (
-          <FieldBoundary key={field.name} fieldName={field.title || field.name}>
-            <DraftField
-              label={field.title || field.name}
-              type={draftField.type}
-              choices={draftField.choices || []}
-              value={value as boolean | string | null | undefined}
-              onChanged={(value: boolean | string) => sendUpdate(field.name, value, parentFields)} />
-          </FieldBoundary>
-        );
-      } else if (field.type === 'fields') { 
-        if (field.fields && parent && 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]) }
-              </div>
-            </FieldBoundary>
-          );
-        }
-
-        return null;
+    const onSendUpdate = (field: string | undefined, value: any, parents: string[]) => {
+      if (onFieldUpdate) {
+        onFieldUpdate(field, value, parents);
       } else {
-        return null;
+        sendUpdate(field, value, parents);
       }
-    });
+    };
+
+    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 (
diff --git a/src/panelWebView/components/TagPicker.tsx b/src/panelWebView/components/TagPicker.tsx
index 3ce29307..9a75380d 100644
--- a/src/panelWebView/components/TagPicker.tsx
+++ b/src/panelWebView/components/TagPicker.tsx
@@ -7,7 +7,8 @@ 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';
+import { useCallback, useMemo } from 'react';
 
 export interface ITagPickerProps {
   type: TagType;
@@ -19,14 +20,16 @@ export interface ITagPickerProps {
   unsetFocus: () => void;
 
   parents?: string[];
+  blockData?: BlockFieldData;
   label?: string;
   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 } = 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);
@@ -68,13 +71,17 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
   const sendUpdate = (values: string[]) => {    
     if (type === TagType.tags) {
       MessageHelper.sendMessage(CommandToCode.updateTags, {
+        fieldName,
         values,
-        parents
+        parents,
+        blockData
       });
     } else if (type === TagType.categories) {
       MessageHelper.sendMessage(CommandToCode.updateCategories, {
+        fieldName,
         values,
-        parents
+        parents,
+        blockData
       });
     } else if (type === TagType.keywords) {
       MessageHelper.sendMessage(CommandToCode.updateKeywords, {
@@ -86,7 +93,8 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
         id: taxonomyId,
         name: fieldName,
         options: values,
-        parents
+        parents,
+        blockData
       } as CustomTaxonomyData);
     }
   };
@@ -141,6 +149,22 @@ 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]);
+
+  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();
@@ -157,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>
 
@@ -181,16 +205,17 @@ const TagPicker: React.FunctionComponent<ITagPickerProps> = (props: React.PropsW
                               if (!inputValue) {
                                 clearSelection();
                               }
-                            }
+                            },
+                            disabled: checkIsDisabled()
                           })
                        }
-                       placeholder={`Pick your ${label || type.toLowerCase()}`} />
+                       placeholder={inputPlaceholder} />
                 
                 {
                   freeform && (
                     <button className={`article__tags__input__button`}
                             title={`Add the unknown tag`}
-                            disabled={!inputValue} 
+                            disabled={!inputValue || checkIsDisabled()} 
                             onClick={() => insertUnkownTag(closeMenu)}>
                       <AddIcon />
                     </button>
diff --git a/src/panelWebView/components/VscodeComponents.ts b/src/panelWebView/components/VscodeComponents.ts
index 2cddfe86..cb22167b 100644
--- a/src/panelWebView/components/VscodeComponents.ts
+++ b/src/panelWebView/components/VscodeComponents.ts
@@ -8,7 +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`);
-
-// @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/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,
diff --git a/src/panelWebView/index.tsx b/src/panelWebView/index.tsx
index 360f5120..ef242ab0 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';
@@ -14,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';
 
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
new file mode 100644
index 00000000..11228c25
--- /dev/null
+++ b/src/panelWebView/styles.css
@@ -0,0 +1,254 @@
+
+.block_field__form {
+  background-color: transparent;
+  border: 1px dashed var(--vscode-button-background);
+  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);
+  padding: .5rem 1rem;
+  margin-bottom: .5rem;
+
+  .autoform {
+    background-color: transparent;
+    border: 1px dashed var(--vscode-button-background);
+    padding: 1rem;
+
+    h3 {
+      font-size: 1rem;
+      font-weight: bold;
+      text-align: center;
+    }
+  }
+
+  .fields > div {
+    margin-bottom: .5rem;
+
+    &:last-child {
+      .json_data__selector h3 {
+        font-size: 1rem;
+        font-weight: bold;
+        text-align: center;
+      }
+      
+      margin-bottom: 0;
+    }
+  }
+}
+
+.json_data__selector {
+  h3 {
+    font-size: var(--vscode-font-size);
+    font-weight: bold;
+    text-align: left;
+  }
+
+  select {
+    padding: .5rem;
+  }
+}
+
+.json_data__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);
+    }
+  }
+}
+
+.json_data__list {
+  margin-top: 1rem;
+
+  label {
+    display: block;
+    margin-bottom: .5rem;
+    font-weight: bold;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li, .sortable_item {
+    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;
+      align-items: center;
+
+      svg {
+        margin-right: .5rem;
+      }
+      
+      button:last-child {
+        margin-left: .5rem;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+      border-bottom: 0;
+    }
+  }
+}
+
+.json_data__list .metadata_field__label {
+  justify-content: space-between;
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
+
+  button svg {
+    margin-right: 0;
+  }
+}
+
+.json_data__record {
+  border-bottom: 1px solid var(--vscode-button-secondaryBackground);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: .5rem 0;
+
+  &.json_data__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,
+.json_data__list__button {
+  width: auto;
+  background: none;
+  color: inherit;
+  outline: none !important;
+  outline-offset: inherit !important;
+  padding: 0;
+  margin: 0;
+
+  &:hover {
+    color: var(--vscode-editor-foreground);
+    background: none;
+  }
+}
+
+.json_data__list__button_icon {
+  height: 1rem;
+  width: 1rem;
+}
+
+.sr-only {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/parsers/FrontMatterParser.ts b/src/parsers/FrontMatterParser.ts
new file mode 100644
index 00000000..b26a1b4d
--- /dev/null
+++ b/src/parsers/FrontMatterParser.ts
@@ -0,0 +1,53 @@
+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 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.
+
+    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..eac1a954
--- /dev/null
+++ b/src/parsers/ParserEngines.ts
@@ -0,0 +1,102 @@
+import * as yaml from 'yaml';
+import * as toml from '@iarna/toml';
+import { Format, FrontMatterParser } 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);
+      }
+    },
+    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 (typeof obj[key] === undefined) {
+                docYaml.delete(key);
+              }
+            }
+
+            return docYaml.toString();
+          }
+        }
+
+        return yaml.stringify(obj, options);
+      }
+    }
+  }
+}
+
+/**
+ * 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
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';
diff --git a/src/providers/MarkdownFoldingProvider.ts b/src/providers/MarkdownFoldingProvider.ts
index 4d00e04f..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,15 +11,23 @@ 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[] = [];
 
     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));
@@ -28,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 (fmHighlight) {
-        MarkdownFoldingProvider.decType = new FrontMatterDecorationProvider().get();
-        window.activeTextEditor?.setDecorations(MarkdownFoldingProvider.decType, [range]);
+      if (range) {
+        if (MarkdownFoldingProvider.decType !== null) {
+          MarkdownFoldingProvider.decType.dispose();
+        }
+
+        if (fmHighlight) {
+          MarkdownFoldingProvider.decType = new FrontMatterDecorationProvider().get();
+          window.activeTextEditor?.setDecorations(MarkdownFoldingProvider.decType, [range]);
+        }
       }
     }
   }
@@ -66,15 +80,23 @@ export class MarkdownFoldingProvider implements FoldingRangeProvider {
       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));
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']
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/,