chore: cleanup playground and module

Author: ThimoDEV

docs/package.json

@@ -31,6 +31,12 @@
   "pnpm": {
     "onlyBuiltDependencies": [
       "better-sqlite3"
+    ],
+    "ignoredBuiltDependencies": [
+      "@parcel/watcher",
+      "esbuild",
+      "vue-demi",
+      "workerd"
     ]
   },
   "packageManager": "pnpm@10.6.5"

playground/app.vue

@@ -1,5 +1,59 @@
+<script setup lang="ts">
+import { javascript } from '@codemirror/lang-javascript'
+import type { ViewUpdate } from '@codemirror/view'
+import type { CodeMirrorRef, Statistics } from '../src/runtime/types/nuxt-codemirror'
+
+const code = ref('console.log("Hello, CodeMirror!");')
+const codemirror = ref<CodeMirrorRef>()
+
+const handleChange = (value: string, viewUpdate: ViewUpdate) => {
+  console.log('Value changed:', value)
+  console.log('View updated:', viewUpdate)
+}
+
+const handleStatistics = (stats: Statistics) => {
+  console.log('Editor statistics:', stats)
+}
+
+const handleUpdate = (viewUpdate: ViewUpdate) => {
+  console.log('Editor updated:', viewUpdate)
+}
+
+onMounted(() => {
+  if (codemirror.value) {
+    console.log('Log editorRef', codemirror.value.editor)
+    console.log('Log containerRef', codemirror.value.container)
+  }
+
+  watchEffect(() => {
+    if (codemirror.value) {
+      console.log('Log StateRef', codemirror.value.state)
+      console.log('Log viewRef', codemirror.value.view)
+    }
+  })
+})
+</script>
+
 <template>
-  <NuxtLayout>
-    <NuxtPage />
-  </NuxtLayout>
+  <div>
+    <NuxtCodeMirror
+      ref="codemirror"
+      v-model="code"
+      style="width: 500px; height: 400px;"
+      placeholder="Enter your code here..."
+      :auto-focus="true"
+      :editable="true"
+      :extensions="[javascript()]"
+      :basic-setup="[true]"
+      :indent-with-tab="true"
+      @on-change="handleChange"
+      @statistics="handleStatistics"
+      @on-update="handleUpdate"
+    />
+    <div>{{ code }}</div>
+    <input
+      v-model="code"
+      type="text"
+    >
+  </div>
 </template>

playground/nuxt.config.ts

@@ -1,6 +1,6 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  devtools: { enabled: false },
+  devtools: { enabled: true },
   devServer: {
     port: 4000,
   },

playground/pages/index.vue

@@ -30,7 +30,6 @@ import {
   foldKeymap,
 } from '@codemirror/language'
 import { lintKeymap } from '@codemirror/lint'
-import { minimalSetup } from 'codemirror'
 import { defaultLightThemeOption } from './theme/light'
 
 export * from '@codemirror/theme-one-dark'
@@ -74,17 +73,6 @@ export interface DefaultExtensionsOptions {
   editable?: boolean
 }
 
-export const minimalSetup2: Extension = (() => [
-  highlightSpecialChars(),
-  history(),
-  drawSelection(),
-  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
-  keymap.of([
-    ...defaultKeymap,
-    ...historyKeymap,
-  ]),
-])()
-
 /**
  * Basic setup that includes standard CodeMirror extensions
  */