Adds code editor for user to specify custom CSS

src/components/Configuration/CustomCss.vue

@@ -1,11 +1,17 @@
 <template>
   <div class="json-editor-outer">
-    <textarea v-model="customCss"></textarea>
+    <prism-editor class="my-editor" v-model="customCss" :highlight="highlighter" line-numbers />
     <button class="save-button" @click="save()">Save Changes</button>
+    <p>Note, you will need to refresh the page for your changes to take effect</p>
   </div>
 </template>
 
 <script>
+import { PrismEditor } from 'vue-prism-editor';
+import { highlight, languages } from 'prismjs/components/prism-core';
+import 'prismjs/components/prism-css';
+import 'prismjs/themes/prism-funky.css';
+import 'vue-prism-editor/dist/prismeditor.min.css';
 
 import { localStorageKeys } from '@/utils/defaults';
 
@@ -14,18 +20,21 @@ export default {
   props: {
     config: Object,
   },
+  components: {
+    PrismEditor,
+  },
   data() {
     return {
-      customCss: this.config.appConfig.customCss || '',
+      customCss: this.config.appConfig.customCss || '\n\n\n\n\n',
     };
   },
   methods: {
-    validate() {
-      return true;
+    validate(css) {
+      return css.match(/((?:^\s*)([\w#.@*,:\-.:>,*\s]+)\s*{(?:[\s]*)((?:[A-Za-z\- \s]+[:]\s*['"0-9\w .,/()\-!%]+;?)*)*\s*}(?:\s*))/gmi);
     },
     save() {
       let msg = '';
-      if (this.validate()) {
+      if (this.validate(this.customCss)) {
         const appConfig = { ...this.config.appConfig };
         appConfig.customCss = this.customCss;
         localStorage.setItem(localStorageKeys.APP_CONFIG, JSON.stringify(appConfig));
@@ -42,6 +51,9 @@ export default {
       style.textContent = cleanedCss;
       document.head.append(style);
     },
+    highlighter(code) {
+      return highlight(code, languages.css);
+    },
   },
 };
 </script>
@@ -64,4 +76,13 @@ button.save-button {
   }
 }
 
+.prism-editor-wrapper {
+  min-height: 200px;
+  border: 1px solid var(--transparent-70);
+  border-radius: var(--curve-factor);
+  width: 90%;
+  margin: 0.5rem auto;
+  background: var(--transparent-50);
+}
+
 </style>