add basic live demo component

docs/gridsome.config.js

@@ -44,6 +44,7 @@ module.exports = {
       },
     },
   ],
+  runtimeCompiler: true,
   chainWebpack(config) {
     // Load variables for all vue-files
     const types = ['vue-modules', 'vue', 'normal-modules', 'normal']

docs/package.json

@@ -23,6 +23,7 @@
     "remark-toc": "^7.0.0",
     "typescript": "^4.0.3",
     "vue-github-button": "^1.1.2",
+    "vue-live": "^1.14.0",
     "y-indexeddb": "^9.0.5",
     "y-webrtc": "^10.1.6",
     "yjs": "^13.3.2"

docs/src/components/Demo/style.scss

@@ -64,7 +64,7 @@
   }
 
   &__link {
-    text-align: right;
+    // text-align: right;
   }
 
   &__error {
@@ -72,4 +72,4 @@
     color: $colorRed;
     background-color: rgba($colorRed, 0.1);
   }
-}
+}

docs/src/components/LiveDemo/CustomLayout.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="live-demo">
+    <div class="live-demo__preview">
+      <slot name="preview" />
+    </div>
+    <div class="live-demo__editor">
+      <slot name="editor" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  mounted() {
+    let firstLoad = true
+    const pre = this.$el.getElementsByClassName('prism-editor__editor')[0]
+    const textarea = this.$el.getElementsByClassName('prism-editor__textarea')[0]
+
+    const resizeObserver = new ResizeObserver(() => {
+      const width = pre.scrollWidth
+      const height = pre.scrollHeight
+      textarea.style.width = `${width}px`
+      textarea.style.height = `${height}px`
+
+      if (!firstLoad) {
+        textarea.blur()
+        textarea.focus()
+      }
+
+      firstLoad = false
+    })
+
+    resizeObserver.observe(pre)
+
+    this.$once('hook:beforeDestroy', () => {
+      resizeObserver.unobserve(pre)
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.live-demo {
+  background-color: $colorWhite;
+  overflow: hidden;
+  border-radius: 0.5rem;
+
+  &__preview {
+    padding: 1.5rem;
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-width: 0;
+  }
+
+  &__editor {
+    background-color: rgba($colorBlack, 0.9);
+    color: rgba($colorWhite, 0.7);
+  }
+
+  &__editor ::v-deep {
+    .prism-editor-wrapper {
+      overflow: auto;
+      max-height: unquote("max(300px, 60vh)");
+      padding: 1.5rem;
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba($colorWhite, 0.25);
+      }
+    }
+
+    .prism-editor__container {
+      position: relative;
+    }
+
+    .prism-editor__textarea {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      z-index: 1;
+      resize: none;
+      -webkit-text-fill-color: transparent;
+      overflow: hidden;
+    }
+  }
+}
+</style>

docs/src/components/LiveDemo/index.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="live-demo">
+    <template v-if="mainFile">
+      <div class="live-demo__preview">
+        <vue-live
+          :code="mainFile.content"
+          :layout="CustomLayout"
+          :requires="requires"
+          @error="(e) => handleError(e)"
+        />
+      </div>
+      <div class="live-demo__source" v-if="showSource">
+        <div class="live-demo__tabs" v-if="showFileNames">
+          <button
+            class="live-demo__tab"
+            :class="{ 'is-active': currentIndex === index}"
+            v-for="(file, index) in files"
+            :key="index"
+            @click="currentIndex = index"
+          >
+            {{ file.name }}
+          </button>
+        </div>
+        <div class="live-demo__code" v-if="activeFile" :key="activeFile.path">
+          <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
+        </div>
+      </div>
+      <div class="live-demo__meta">
+        <div class="live-demo__name">
+          Demo/{{ name }}
+        </div>
+        <a class="live-demo__link" :href="githubUrl" target="_blank">
+          Edit on GitHub →
+        </a>
+      </div>
+    </template>
+    <div v-else class="live-demo__error">
+      Could not find a demo called “{{ name }}”.
+    </div>
+  </div>
+</template>
+
+<script>
+import collect from 'collect.js'
+import { VueLive } from 'vue-live'
+import * as starterKit from '@tiptap/vue-starter-kit'
+import Prism from '~/components/Prism'
+import CustomLayout from './CustomLayout'
+
+export default {
+  components: {
+    Prism,
+    VueLive,
+  },
+
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+
+    showSource: {
+      type: Boolean,
+      default: true,
+    },
+  },
+
+  data() {
+    return {
+      files: [],
+      content: null,
+      currentIndex: 0,
+      CustomLayout,
+      syntax: {
+        vue: 'markup',
+      },
+      requires: {
+        '@tiptap/vue-starter-kit': starterKit,
+      },
+    }
+  },
+
+  computed: {
+    mainFile() {
+      const file = this.files
+        .find(item => item.path.endsWith('.vue') || item.path.endsWith('.jsx'))
+
+      if (!file) {
+        return
+      }
+
+      return file
+
+      // return require(`~/demos/${file.path}`).default
+    },
+
+    showFileNames() {
+      return this.files.length > 1
+    },
+
+    activeFile() {
+      return this.files[this.currentIndex]
+    },
+
+    githubUrl() {
+      return `https://github.com/ueberdosis/tiptap-next/tree/main/docs/src/demos/${this.name}`
+    },
+  },
+
+  mounted() {
+    this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
+      .filter(path => path.startsWith(`./${this.name}`))
+      .map(path => path.replace('./', ''))
+      .map(path => {
+        const extension = path.split('.').pop()
+
+        return {
+          path,
+          name: path.replace(`${this.name}/`, ''),
+          content: require(`!!raw-loader!~/demos/${path}`).default,
+          extension,
+          highlight: this.syntax[extension] || extension,
+        }
+      })
+      .filter(item => {
+        return ['vue', 'jsx', 'scss'].includes(item.extension)
+      })
+      .sortBy(item => item.path.split('/').length)
+      .toArray()
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss" scoped />

docs/src/components/LiveDemo/style.scss

@@ -0,0 +1,75 @@
+.live-demo {
+  background-color: $colorWhite;
+  overflow: hidden;
+  border-radius: 0.5rem;
+
+  &__preview {
+    padding: 1.5rem;
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-width: 0;
+  }
+
+  &__source {
+    // background-color: $colorBlack;
+  }
+
+  &__tabs {
+    padding: 1rem 1.5rem 0 1.5rem;
+    background-color: rgba($colorBlack, 0.9);
+  }
+
+  &__tab {
+    display: inline-flex;
+    position: relative;
+    background-color: transparent;
+    color: rgba($colorWhite, 0.7);
+    padding: 0.1rem 0.5rem;
+    border-radius: 5px;
+    font-weight: 500;
+    border: none;
+    margin-right: 0.5rem;
+
+    &:first-child {
+      margin-left: -0.5rem;
+    }
+
+    &.is-active,
+    &:hover {
+      color: $colorWhite;
+      background-color: rgba($colorWhite, 0.1);
+    }
+  }
+
+  &__code {
+    pre {
+      margin: 0;
+      border-radius: 0;
+    }
+  }
+
+  &__meta {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    padding: 0.5rem 1.5rem;
+    border: 1px solid rgba($colorWhite, 0.1);
+    border: 1px solid rgba($colorBlack, 0.1);
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+    border-top-width: 0;
+    background-color: rgba($colorBlack, 0.9);
+    color: $colorWhite;
+  }
+
+  &__link {
+    // text-align: right;
+  }
+
+  &__error {
+    padding: 1rem 1.5rem;
+    color: $colorRed;
+    background-color: rgba($colorRed, 0.1);
+  }
+}

docs/src/docPages/examples/basic.md

@@ -1,3 +1,4 @@
 # Basic
 
-<demo name="Examples/Basic" />
+<live-demo name="Examples/Basic" />
+<demo name="Examples/Basic" />

docs/src/layouts/App/prism.scss

@@ -9,6 +9,13 @@ $codeBlue: #89ddff;
 $codeTeal: #80cbc4;
 $codePurple: #c792ea;
 
+.prism-editor__textarea {
+  background: transparent;
+  border: 0;
+}
+
+.prism-editor__textarea,
+.prism-editor__editor,
 code[class*="language-"],
 pre[class*="language-"] {
   position: relative;
@@ -221,4 +228,4 @@ pre[class*="language-"].language-scss > code {
   &::after {
     display: none;
   }
-}
+}

docs/src/main.js

@@ -4,12 +4,14 @@ import 'prismjs/components/prism-jsx.js'
 import 'prismjs/components/prism-scss.js'
 import App from '~/layouts/App'
 import Demo from '~/components/Demo'
+import LiveDemo from '~/components/LiveDemo'
 import Tab from '~/components/Tab'
 import ReactRenderer from '~/components/ReactRenderer'
 
 export default function (Vue) {
   Vue.component('Layout', App)
   Vue.component('Demo', Demo)
+  Vue.component('LiveDemo', LiveDemo)
   Vue.component('Tab', Tab)
   Vue.component('ReactRenderer', ReactRenderer)
 }

packages/vue/src/components/EditorContent.ts

@@ -1,6 +1,8 @@
 import Vue from 'vue'
 
 export default Vue.extend({
+  name: 'EditorContent',
+
   props: {
     editor: {
       default: null,

yarn.lock

@@ -939,7 +939,7 @@
     "@babel/plugin-transform-react-jsx-source" "^7.10.4"
     "@babel/plugin-transform-react-pure-annotations" "^7.10.4"
 
-"@babel/runtime@^7.11.0", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.0", "@babel/runtime@^7.11.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -2620,6 +2620,25 @@
     "@vue/babel-plugin-transform-vue-jsx" "^1.1.2"
     camelcase "^5.0.0"
 
+"@vue/compiler-core@3.0.0", "@vue/compiler-core@^3.0.0-rc.5":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.0.tgz#25e4f079cf6c39f83bad23700f814c619105a0f2"
+  integrity sha512-XqPC7vdv4rFE77S71oCHmT1K4Ks3WE2Gi6Lr4B5wn0Idmp+NyQQBUHsCNieMDRiEpgtJrw+yOHslrsV0AfAsfQ==
+  dependencies:
+    "@babel/parser" "^7.11.5"
+    "@babel/types" "^7.11.5"
+    "@vue/shared" "3.0.0"
+    estree-walker "^2.0.1"
+    source-map "^0.6.1"
+
+"@vue/compiler-dom@^3.0.0-rc.5":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.0.tgz#4cbb48fcf1f852daef2babcf9953b681ac463526"
+  integrity sha512-ukDEGOP8P7lCPyStuM3F2iD5w2QPgUu2xwCW2XNeqPjFKIlR2xMsWjy4raI/cLjN6W16GtlMFaZdK8tLj5PRog==
+  dependencies:
+    "@vue/compiler-core" "3.0.0"
+    "@vue/shared" "3.0.0"
+
 "@vue/component-compiler-utils@^2.5.2":
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-2.6.0.tgz#aa46d2a6f7647440b0b8932434d22f12371e543b"
@@ -2651,6 +2670,11 @@
   optionalDependencies:
     prettier "^1.18.2"
 
+"@vue/shared@3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.0.tgz#ec089236629ecc0f10346b92f101ff4339169f1a"
+  integrity sha512-4XWL/avABGxU2E2ZF1eZq3Tj7fvksCMssDZUHOykBIMmh5d+KcAnQMC5XHMhtnA0NAvktYsA2YpdsVwVmhWzvA==
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -2841,6 +2865,11 @@ accepts@^1.3.7, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+acorn-dynamic-import@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
+  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
+
 acorn-globals@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-6.0.0.tgz#46cdd39f0f8ff08a876619b55f5ac8a6dc770b45"
@@ -2849,7 +2878,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.2.0:
+acorn-jsx@^5.0.1, acorn-jsx@^5.2.0:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==
@@ -2859,7 +2888,7 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^6.4.1:
+acorn@^6.1.1, acorn@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
@@ -3174,6 +3203,11 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
+ast-types@0.13.3:
+  version "0.13.3"
+  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.3.tgz#50da3f28d17bdbc7969a3a2d83a0e4a72ae755a7"
+  integrity sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==
+
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3612,6 +3646,20 @@ btoa-lite@^1.0.0:
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
   integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc=
 
+buble@^0.19.7:
+  version "0.19.8"
+  resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.8.tgz#d642f0081afab66dccd897d7b6360d94030b9d3d"
+  integrity sha512-IoGZzrUTY5fKXVkgGHw3QeXFMUNBFv+9l8a4QJKG1JhG3nCMHTdEX1DCOg8568E2Q9qvAQIiSokv6Jsgx8p2cA==
+  dependencies:
+    acorn "^6.1.1"
+    acorn-dynamic-import "^4.0.0"
+    acorn-jsx "^5.0.1"
+    chalk "^2.4.2"
+    magic-string "^0.25.3"
+    minimist "^1.2.0"
+    os-homedir "^2.0.0"
+    regexpu-core "^4.5.4"
+
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -4942,6 +4990,11 @@ de-indent@^1.0.2:
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
   integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
 
+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@2, debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5830,7 +5883,7 @@ espree@^7.3.0:
     acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.3.0"
 
-esprima@^4.0.0, esprima@^4.0.1:
+esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -7227,6 +7280,11 @@ hash-sum@^1.0.2:
   resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
   integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
 
+hash-sum@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-2.0.0.tgz#81d01bb5de8ea4a214ad5d6ead1b523460b0b45a"
+  integrity sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==
+
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/hash.js/-/hash.js-1.1.7.tgz#0babca538e8d4ee4a0f8988d68866537a003cf42"
@@ -8988,7 +9046,7 @@ magic-string@^0.22.4:
   dependencies:
     vlq "^0.2.2"
 
-magic-string@^0.25.2, magic-string@^0.25.7:
+magic-string@^0.25.2, magic-string@^0.25.3, magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
   integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
@@ -10177,6 +10235,11 @@ os-homedir@^1.0.0:
   resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
   integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
 
+os-homedir@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-2.0.0.tgz#a0c76bb001a8392a503cbd46e7e650b3423a923c"
+  integrity sha512-saRNz0DSC5C/I++gFIaJTXoFJMRwiP5zHar5vV3xQ2TkgEw6hDCcU5F272JjUylpiVgBrZNQHnfjkLabTfb92Q==
+
 os-name@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/os-name/-/os-name-3.1.0.tgz#dec19d966296e1cd62d701a5a66ee1ddeae70801"
@@ -11180,13 +11243,18 @@ pretty-error@^2.0.2:
     renderkid "^2.0.1"
     utila "~0.4"
 
-prismjs@^1.15.0:
+prismjs@^1.15.0, prismjs@^1.21.0:
   version "1.21.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.21.0.tgz#36c086ec36b45319ec4218ee164c110f9fc015a3"
   integrity sha512-uGdSIu1nk3kej2iZsLyDoJ7e9bnPzIgY0naW/HdknGj61zScaprVEVGHrPoXqI+M9sP0NDnTK2jpkvmldpuqDw==
   optionalDependencies:
     clipboard "^2.0.0"
 
+private@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/private/-/private-0.1.8.tgz#2381edb3689f7a53d653190060fcf822d2f368ff"
+  integrity sha512-VvivMrbvd2nKkiG38qjULzlc+4Vx4wm/whI9pQD35YrARNnhxeiRktSOhSukRLFNlzg6Br/cJPet5J/u19r/mg==
+
 probe-image-size@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/probe-image-size/-/probe-image-size-4.1.1.tgz#c836c53154b6dd04dbcf66af2bbd50087b15e1dc"
@@ -11761,6 +11829,16 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
+recast@^0.19.1:
+  version "0.19.1"
+  resolved "https://registry.yarnpkg.com/recast/-/recast-0.19.1.tgz#555f3612a5a10c9f44b9a923875c51ff775de6c8"
+  integrity sha512-8FCjrBxjeEU2O6I+2hyHyBFH1siJbMBLwIRvVr1T3FD2cL754sOaJDsJ/8h3xYltasbJ8jqWRIhMuDGBSiSbjw==
+  dependencies:
+    ast-types "0.13.3"
+    esprima "~4.0.0"
+    private "^0.1.8"
+    source-map "~0.6.1"
+
 rechoir@^0.6.2:
   version "0.6.2"
   resolved "https://registry.yarnpkg.com/rechoir/-/rechoir-0.6.2.tgz#85204b54dba82d5742e28c96756ef43af50e3384"
@@ -11829,7 +11907,7 @@ regexpp@^3.0.0, regexpp@^3.1.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
   integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
-regexpu-core@^4.7.0:
+regexpu-core@^4.5.4, regexpu-core@^4.7.0:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
   integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
@@ -14372,6 +14450,43 @@ vue-hot-reload-api@^2.3.0:
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
   integrity sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==
 
+vue-inbrowser-compiler-utils@^4.32.1:
+  version "4.32.1"
+  resolved "https://registry.yarnpkg.com/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.32.1.tgz#d8774a4b7e91677d4d17d441485f5eafc77bc65d"
+  integrity sha512-IL8rBV3lCyHErqD8sBdQhWz3zJ/wLzG6JfoSzZ3K6HShS5QqIQfJN0GESvzIos6EGvmtByEf4TTJnjm12b51VQ==
+  dependencies:
+    camelcase "^5.3.1"
+
+vue-inbrowser-compiler@^4.32.1:
+  version "4.32.1"
+  resolved "https://registry.yarnpkg.com/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.32.1.tgz#8f19ba7b999f418e53839b6e2a36a1dcbac8ac14"
+  integrity sha512-eHNJ6fenrTISxS2t540eB6K7O4AcZX7x73ZHHkK78sGAFeRDaxB17gEqtPPY2mgSi124gEy1I0MzFo+cHEJNSA==
+  dependencies:
+    acorn "^6.1.1"
+    acorn-jsx "^5.0.1"
+    buble "^0.19.7"
+    camelcase "^5.3.1"
+    vue-inbrowser-compiler-utils "^4.32.1"
+    walkes "^0.2.1"
+
+vue-live@^1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/vue-live/-/vue-live-1.14.0.tgz#bcc0c9a069008e61586d5c6c003c847ddd574c63"
+  integrity sha512-DTY2iqk4GgZ/f3P8VcVjlB2MvU8/rNBtYREaD42vaedaHzq4/53lvqkCFsqrY9cmVJVxwc8aEp/qw81kLy1wyQ==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@vue/compiler-core" "^3.0.0-rc.5"
+    "@vue/compiler-dom" "^3.0.0-rc.5"
+    acorn "^7.4.0"
+    core-js "^3.6.5"
+    debounce "^1.2.0"
+    hash-sum "^2.0.0"
+    prismjs "^1.21.0"
+    recast "^0.19.1"
+    vue-inbrowser-compiler "^4.32.1"
+    vue-prism-editor "^1.2.2"
+    vue-template-compiler "^2.6.12"
+
 vue-loader@^15.7.1:
   version "15.9.3"
   resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-15.9.3.tgz#0de35d9e555d3ed53969516cac5ce25531299dda"
@@ -14390,6 +14505,11 @@ vue-meta@^2.2.2:
   dependencies:
     deepmerge "^4.2.2"
 
+vue-prism-editor@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/vue-prism-editor/-/vue-prism-editor-1.2.2.tgz#023cfd4329848f191aac851f2f5e6c7a8c2e059f"
+  integrity sha512-Lq2VgVygTx3Whn/tC8gD4m1ajA4lzSyCTqPLZA1Dq/ErbBaZA93FWRblwCoDR7AD2nXhGWuiTzb5ih3guzB7DA==
+
 vue-router@^3.1.3:
   version "3.4.3"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.4.3.tgz#fa93768616ee338aa174f160ac965167fa572ffa"
@@ -14417,7 +14537,7 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
-vue-template-compiler@^2.6.10:
+vue-template-compiler@^2.6.10, vue-template-compiler@^2.6.12:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
   integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg==
@@ -14454,6 +14574,11 @@ w3c-xmlserializer@^2.0.0:
   dependencies:
     xml-name-validator "^3.0.0"
 
+walkes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/walkes/-/walkes-0.2.1.tgz#7eca144fe67ed32782fffe6e8e95fb4481864796"
+  integrity sha1-fsoUT+Z+0yeC//5ujpX7RIGGR5Y=
+
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"