fix(vuepress): fix Vuepress live preview plugin configuration based o…

…n latest version

With the shift to the monorepo setup, this repository now runs on Node 14.x (due to the need for npm
7+). Switching to this version of Node JS has resulted in some packages (mainly vuepress-plugin-live
and it's internal dependency vue-live) getting upgraded to newer versions. Currently, this
repository's Vuepress implementation includes a custom template (www/.vuepress/previewLayout.vue)
that over-rides vue-live's default template. This over-ride template was based on vue-live 0.3.0.
The updated version of vue-live (1.3.0) uses a very different method to render a live code editor
and hence it's template differs slightly - this difference in the template caused a
visual/functional bug in the live-preview parts of the website's UI. This patch updates the
over-ride template in accordance with the default template of vue-live 1.3.0 to fix this issue.

www/.vuepress/config.js

@@ -62,6 +62,7 @@ module.exports = {
       "live",
       {
         layout: path.resolve(__dirname, "./previewLayout.vue"),
+        squiggles: false
       },
     ],
     ["@vuepress/active-header-links"],

www/.vuepress/previewLayout.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="container">
-    <div class="preview-container">
+    <div class="preview block preview-container">
       <slot name="preview"></slot>
       <div class="seeCode" @click="toggle">{{showCode ? 'Hide Code' : 'Show Code'}}</div>
     </div>
-    <div class="code" v-if="showCode">
+    <div :class="`language-jsx editor block code`" v-if="showCode">
       <slot name="editor" ></slot>
       <div class="copy" ref="copyBtn" @click="copyToClipboard">Copy</div>
     </div>
   </div>
 </template>
 
 <script>
+import "prismjs/themes/prism-tomorrow.css";
+import "vue-prism-editor/dist/prismeditor.min.css";
 export default {
+  squiggles: false,
   data() {
     return {
       showCode: false
@@ -23,7 +26,7 @@ export default {
       this.showCode =!this.showCode;
     },
     async copyToClipboard() {
-      const code =  this.$slots['editor'].reduce((code, node) => code + node.data.model.value, '');
+      const code =  this.$slots['editor'].reduce((code, node) => code + node.context.model, '');
       const el = document.createElement('textarea');
       el.value = code;
       document.body.appendChild(el);
@@ -40,6 +43,51 @@ export default {
 }
 </script>
 
+<style lang="scss">
+  .VueLive-squiggles-wrapper {
+    display: none;
+  }
+
+  .VueLive-error {
+    padding: 1.25rem 1.5rem;
+    border-radius: 6px;
+    overflow: hidden;
+    color: #fff;
+    font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
+    font-size: 0.85em;
+    text-align: left;
+    white-space: pre-wrap;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.65;
+  }
+
+  .prism-editor-wrapper {
+    background-color: #002540;
+    .prism-editor__editor, .prism-editor__textarea {
+      padding: 1.25rem 1.5rem;
+      border-radius: 6px;
+      overflow: hidden;
+      color: #fff;
+      font-family: Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;
+      font-size: 0.85em;
+      text-align: left;
+      white-space: pre-wrap;
+      word-spacing: normal;
+      word-break: normal;
+      word-wrap: normal;
+      line-height: 1.65;
+      -moz-tab-size: 4;
+      -o-tab-size: 4;
+      tab-size: 4;
+      -webkit-hyphens: none;
+      -ms-hyphens: none;
+      hyphens: none;
+    }
+  }
+</style>
+
 <style lang="scss" scoped>
 .container {
   margin: 20px 0;
@@ -57,15 +105,13 @@ export default {
   }
   @media screen and (prefers-reduced-motion: reduce) {
     .code {
-        position: relative;
-        margin-top: -14px;
-        transition: none;
+      position: relative;
+      transition: none;
     }
   }
 
   .code {
     position: relative;
-    margin-top: -14px;
     transition: all 0.25s ease;
   }
 
@@ -112,5 +158,4 @@ export default {
     background: #8e44ad;
   }
 }
-
 </style>