add codemirror

package.json

@@ -8,8 +8,10 @@
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
+    "codemirror": "^6.0.1",
     "normalize.css": "^8.0.1",
     "vue": "^3.2.41",
+    "vue-codemirror": "^6.1.1",
     "vue-router": "^4.1.5"
   },
   "devDependencies": {

src/views/HomeView.vue

@@ -1,12 +1,66 @@
-<script setup>
+<script>
 
 import Worker from '../file.worker.js?worker';
 const worker = new Worker();
 
+// const lodash = await fetch('https://registry.npmjs.org/lodash');
+
+import { defineComponent, shallowRef } from 'vue'
+import { Codemirror } from 'vue-codemirror'
+// import { javascript } from '@codemirror/lang-javascript'
+// import { oneDark } from '@codemirror/theme-one-dark'
+
+export default defineComponent({
+  components: {
+    Codemirror
+  },
+  setup() {
+    const code = `console.log('Hello, world!')`;
+    const extensions = [];//[javascript(), oneDark]
+
+    // Codemirror EditorView instance ref
+    const view = shallowRef()
+    const handleReady = (payload) => {
+      view.value = payload.view
+    }
+
+    // Status is available at all times via Codemirror EditorView
+    const getCodemirrorStates = () => {
+      const state = view.value.state
+      const ranges = state.selection.ranges
+      const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
+      const cursor = ranges[0].anchor
+      const length = state.doc.length
+      const lines = state.doc.lines
+      // more state info ...
+      // return ...
+    }
+
+    return {
+      code,
+      extensions,
+      handleReady,
+      log: console.log,
+    }
+  }
+})
+
 </script>
 
 <template>
   <main>
-    Hello World!
+    <codemirror
+      v-model="code"
+      placeholder="Code goes here..."
+      :style="{ height: '400px' }"
+      :autofocus="true"
+      :indent-with-tab="true"
+      :tab-size="2"
+      :extensions="extensions"
+      @ready="handleReady"
+      @change="log('change', $event)"
+      @focus="log('focus', $event)"
+      @blur="log('blur', $event)"
+    />
   </main>
 </template>