fix: Seems highlighting works now

Author: ThimoDEV

package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.10",
+    "@codemirror/lang-javascript": "^6.2.3",
     "@codemirror/autocomplete": "^6.18.6",
     "@codemirror/commands": "^6.8.0",
     "@codemirror/language": "^6.10.8",

playground/app.vue

@@ -2,6 +2,7 @@
 import { javascript } from '@codemirror/lang-javascript'
 import type { ViewUpdate } from '@codemirror/view'
 import { lineNumbersRelative } from '@uiw/codemirror-extensions-line-numbers-relative'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
 import type { CodeMirrorRef, Statistics } from '../src/runtime/types/nuxt-codemirror'
 
 const code = ref('console.log("Hello, CodeMirror!");')
@@ -37,23 +38,23 @@ onMounted(() => {
 </script>
 
 <template>
-    <NuxtCodeMirror
-      ref="codemirror"
-      v-model="code"
-      :extensions="[lineNumbersRelative, javascript()]"
-      style="width: 500px; height: 400px;"
-      placeholder="Enter your code here..."
-      :auto-focus="true"
-      :basic-setup="true"
-      :editable="true"
-      :indent-with-tab="true"
-      @on-change="handleChange"
-      @statistics="handleStatistics"
-      @on-update="handleUpdate"
-    />
-    <div>{{ code }}</div>
-    <input
-      v-model="code"
-      type="text"
-    >
+  <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"
+  >
 </template>

playground/package.json

@@ -19,7 +19,6 @@
     "@codemirror/search": "^6.5.10",
     "@codemirror/state": "6.5.2",
     "@codemirror/view": "6.36.4",
-    "codemirror": "^6.0.1",
     "nuxt": "^3.16.0"
   }
 }

playground/pnpm-lock.yaml

@@ -1,9 +1,11 @@
+import { javascript } from '@codemirror/lang-javascript';
 import { Annotation, EditorState, StateEffect, type Extension } from '@codemirror/state'
 import { EditorView, type ViewUpdate } from '@codemirror/view'
 import { getDefaultExtensions } from '../getDefaultExtensions'
 import type { UseCodeMirrorProps } from '../types/nuxt-codemirror'
 import { getStatistics } from '../utils/utils'
 import { watch, watchEffect } from '#imports'
+import { defaultHighlightStyle, syntaxHighlighting } from '@codemirror/language'
 
 const External = Annotation.define<boolean>()
 
@@ -88,11 +90,14 @@ export function useNuxtCodeMirror(props: UseCodeMirrorProps) {
     basicSetup: defaultBasicSetup,
   })
 
-  let getExtensions = [updateListener, defaultThemeOption, ...defaultExtensions]
+  // const x = syntaxHighlighting(defaultHighlightStyle)
+
+  let getExtensions = [defaultExtensions, updateListener, defaultThemeOption]
 
   if (onUpdate && typeof onUpdate === 'function') {
     getExtensions.push(EditorView.updateListener.of(onUpdate))
   }
+
   getExtensions = getExtensions.concat(extensions)
 
   watchEffect(() => {

pnpm-lock.yaml

@@ -77,11 +77,11 @@ export const minimalSetup: Extension = (() => [
   highlightSpecialChars(),
   history(),
   drawSelection(),
-  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),
+  syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
   keymap.of([
     ...defaultKeymap,
     ...historyKeymap,
-  ])
+  ]),
 ])()
 
 /**
@@ -122,7 +122,7 @@ export const basicSetup = (options: BasicSetupOptions = {}): Extension[] => {
   if (options.allowMultipleSelections !== false) extensions.push(EditorState.allowMultipleSelections.of(true))
   if (options.indentOnInput !== false) extensions.push(indentOnInput())
   if (options.syntaxHighlighting !== false)
-    extensions.push(syntaxHighlighting(defaultHighlightStyle, { fallback: true }))
+    extensions.push(syntaxHighlighting(defaultHighlightStyle))
   if (options.bracketMatching !== false) extensions.push(bracketMatching())
   if (options.closeBrackets !== false) extensions.push(closeBrackets())
   if (options.autocompletion !== false) extensions.push(autocompletion())
@@ -151,10 +151,10 @@ export const getDefaultExtensions = (optios: DefaultExtensionsOptions = {}): Ext
   }
   if (defaultBasicSetup) {
     if (typeof defaultBasicSetup === 'boolean') {
-      getExtensions.unshift(...basicSetup())
+      getExtensions.push(basicSetup())
     }
     else {
-      getExtensions.unshift(...basicSetup(defaultBasicSetup))
+      getExtensions.unshift(minimalSetup)
     }
   }
   if (placeholderStr) {
@@ -180,5 +180,5 @@ export const getDefaultExtensions = (optios: DefaultExtensionsOptions = {}): Ext
     getExtensions.push(EditorState.readOnly.of(true))
   }
 
-  return [...getExtensions]
+  return getExtensions
 }