fix: add html case

Author: zenHeart

playground/scenarios/html/_meta.js

@@ -0,0 +1,6 @@
+export default {
+  mainFile: 'index.html',
+  ReplOptions: {
+    theme: 'dark',
+  },
+}

playground/scenarios/html/import-map.json

@@ -0,0 +1,5 @@
+{
+  "imports": {
+    "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+  }
+}

playground/scenarios/html/index.html

@@ -0,0 +1,41 @@
+<script type="module">
+  import { createApp } from 'vue'
+
+  // give each todo a unique id
+  let id = 0
+
+  createApp({
+    data() {
+      return {
+        newTodo: '',
+        todos: [
+          { id: id++, text: 'Learn HTML' },
+          { id: id++, text: 'Learn JavaScript' },
+          { id: id++, text: 'Learn Vue' },
+        ],
+      }
+    },
+    methods: {
+      addTodo() {
+        this.todos.push({ id: id++, text: this.newTodo })
+        this.newTodo = ''
+      },
+      removeTodo(todo) {
+        this.todos = this.todos.filter((t) => t !== todo)
+      },
+    },
+  }).mount('#app')
+</script>
+
+<div id="app">
+  <form @submit.prevent="addTodo">
+    <input v-model="newTodo" required placeholder="new todo" />
+    <button>Add Todo</button>
+  </form>
+  <ul>
+    <li v-for="todo in todos" :key="todo.id">
+      {{ todo.text }}
+      <button @click="removeTodo(todo)">X</button>
+    </li>
+  </ul>
+</div>

playground/src/App.vue

@@ -12,7 +12,7 @@
 <script setup lang="ts">
 import { Repl, useStore } from '../../src'
 import ScenarioSelector from './ScenarioSelector.vue'
-import MonacoEditor from '../../src/editor/MonacoEditor.vue'
+import CodeMirrorEditor from '../../src/editor/CodeMirrorEditor.vue'
 // @ts-ignore
 import playgroundFiles from 'virtual:playground-files'
 import { ref, computed, watchEffect } from 'vue'
@@ -41,7 +41,7 @@ const store = useStore()
 
 const replConfigs = computed(() => ({
   store,
-  editor: MonacoEditor,
+  editor: CodeMirrorEditor,
   editorOptions: {
     autoSaveText: '💾',
   },