fix: duplicate codemirror/state causing extensions not working

Author: ThimoDEV

package.json

@@ -30,7 +30,6 @@
   },
   "dependencies": {
     "@codemirror/commands": "^6.6.0",
-    "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/state": "6.4.1",
     "@codemirror/theme-one-dark": "^6.1.1",
     "@codemirror/view": "6.28.1",

playground/app.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { javascript } from '@codemirror/lang-javascript'
+import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative'
 
 import type { ViewUpdate } from '@codemirror/view'
 import type { CodeMirrorRef, Statistics } from '../src/runtime/types/nuxt-codemirror'
@@ -8,7 +9,7 @@ const code = ref('console.log("Hello, CodeMirror!");')
 const theme = ref<'light' | 'dark' | 'none'>('light')
 const codemirror = ref<CodeMirrorRef>()
 
-const extensions = [javascript({ jsx: true, typescript: true })]
+const extensions = [lineNumbersRelative, javascript({ jsx: true, typescript: true })]
 
 const handleChange = (value: string, viewUpdate: ViewUpdate) => {
   console.log('Value changed:', value)
@@ -23,23 +24,19 @@ const handleUpdate = (viewUpdate: ViewUpdate) => {
   console.log('Editor updated:', viewUpdate)
 }
 
-onMounted(async () => {
-  await nextTick()
-
-  watchEffect(() => {
-    if (codemirror.value) {
-      console.log('blaaaaa', codemirror.value.editor)
-    }
-  })
+onMounted(() => {
+  if (codemirror.value) {
+    console.log('blaaaaa', codemirror.value.editor)
+  }
 })
 </script>
 
 <template>
   <NuxtCodeMirror
     ref="codemirror"
     v-model="code"
-    style="width: 500px; height: 400px;"
     :extensions="extensions"
+    style="width: 500px; height: 400px;"
     :theme="theme"
     placeholder="Enter your code here..."
     :auto-focus="true"

playground/package.json

@@ -8,15 +8,17 @@
     "generate": "nuxi generate"
   },
   "dependencies": {
-    "nuxt": "^3.12.4",
-    "@nuxt/kit": "^3.12.4"
+    "@codemirror/lang-javascript": "^6.2.2",
+    "@nuxt/kit": "^3.12.4",
+    "@uiw/codemirror-extensions-line-numbers-relative": "^4.23.0",
+    "nuxt": "^3.12.4"
   },
-  "resolutions": {
-    "@codemirror/commands": "^6.6.0",
+  "overrides": {
     "@codemirror/lang-javascript": "^6.2.2",
+    "@codemirror/commands": "^6.6.0",
     "@codemirror/state": "6.4.1",
-    "@codemirror/theme-one-dark": "^6.1.1",
+    "@codemirror/theme-one-dark": "6.1.1",
     "@codemirror/view": "6.28.1",
-    "@uiw/codemirror-extensions-basic-setup": "^4.23.0"
+    "@uiw/codemirror-extensions-basic-setup": "4.23.0"
   }
 }