fix: debounce edition of code

Author: elevatebart

package.json

@@ -15,6 +15,7 @@
     "acorn": "^6.1.1",
     "buble": "^0.19.7",
     "core-js": "^2.6.5",
+    "lodash.debounce": "^4.0.8",
     "prismjs": "^1.16.0",
     "rewrite-imports": "^2.0.3",
     "vue": "^2.6.10",

src/VueLive.vue

@@ -1,7 +1,7 @@
 <template>
   <VueLiveLayout>
     <template v-slot:editor>
-      <PrismEditor v-model="model" :language="prismLang"/>
+      <PrismEditor :code="model" @change="updatePreview" :language="prismLang" :lineNumbers="true"/>
     </template>
     <template v-slot:preview>
       <Preview
@@ -24,6 +24,7 @@ import "prismjs/components/prism-jsx.min";
 
 import PrismEditor from "vue-prism-editor";
 import hash from "hash-sum";
+import debounce from "lodash.debounce";
 
 import Preview from "./Preview.vue";
 import VueLiveLayout from "./VueLiveDefaultLayout.vue";
@@ -73,7 +74,10 @@ export default {
   methods: {
     switchLanguage(newLang) {
       this.prismLang = LANG_TO_PRISM[newLang];
-    }
+    },
+    updatePreview: debounce(function(value) {
+      this.model = value;
+    }, 300)
   }
 };
 </script>

yarn.lock

@@ -6615,6 +6615,11 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+lodash.debounce@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
+
 lodash.defaultsdeep@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/lodash.defaultsdeep/-/lodash.defaultsdeep-4.6.0.tgz#bec1024f85b1bd96cbea405b23c14ad6443a6f81"