chore: edited playground to test highlighting

Author: ThimoDEV

package.json

@@ -44,7 +44,8 @@
     "@codemirror/state": "6.5.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@codemirror/view": "6.36.4",
-    "@nuxt/kit": "^3.16.0"
+    "@nuxt/kit": "^3.16.0",
+    "codemirror": "^6.0.1"
   },
   "devDependencies": {
     "@nuxt/devtools": "^2.2.1",
@@ -65,5 +66,5 @@
     "codemirror",
     "vue"
   ],
-  "packageManager": "pnpm@10.6.3"
+  "packageManager": "pnpm@10.6.5"
 }

playground/app.vue

@@ -1,61 +1,5 @@
-<script setup lang="ts">
-import { javascript } from '@codemirror/lang-javascript'
-import type { ViewUpdate } from '@codemirror/view'
-import { minimalSetup } from 'codemirror'
-import type { CodeMirrorRef, Statistics } from '../src/runtime/types/nuxt-codemirror'
-
-const code = ref('console.log("Hello, CodeMirror!");')
-// const theme = ref<'light' | 'dark' | 'none'>('light')
-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>
-
-<!-- Adding minimalSetup in the extensions array makes highlighting work, while it should work with basicSetup == true -->
-
 <template>
-  <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"
-  >
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

playground/nuxt.config.ts

@@ -1,9 +1,10 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
-  devtools: { enabled: true },
-  compatibilityDate: '2024-07-24',
-  nuxtCodemirror: {},
+  devtools: { enabled: false },
   devServer: {
     port: 4000,
   },
-})
+  compatibilityDate: '2024-07-24',
+  nuxtCodemirror: {},
+},
+)

playground/pages/index.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { javascript } from '@codemirror/lang-javascript'
+import type { ViewUpdate } from '@codemirror/view'
+// import { minimalSetup } from 'codemirror'
+
+const code = ref('console.log("Hello, CodeMirror!");')
+// const theme = ref<'light' | 'dark' | 'none'>('light')
+const codemirror = ref()
+
+const handleChange = (value: string, viewUpdate: ViewUpdate) => {
+  console.log('Value changed:', value)
+  console.log('View updated:', viewUpdate)
+}
+
+const handleStatistics = (stats: any) => {
+  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>
+
+<!-- Adding minimalSetup in the extensions array makes highlighting work, while it should work with basicSetup == true -->
+
+<template>
+  <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>

pnpm-lock.yaml

@@ -30,6 +30,7 @@ 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'
@@ -73,7 +74,7 @@ export interface DefaultExtensionsOptions {
   editable?: boolean
 }
 
-export const minimalSetup: Extension = (() => [
+export const minimalSetup2: Extension = (() => [
   highlightSpecialChars(),
   history(),
   drawSelection(),
@@ -154,7 +155,7 @@ export const getDefaultExtensions = (optios: DefaultExtensionsOptions = {}): Ext
       getExtensions.push(basicSetup())
     }
     else {
-      getExtensions.unshift(minimalSetup)
+      getExtensions.unshift(basicSetup(defaultBasicSetup))
     }
   }
   if (placeholderStr) {