fix: v-model not updating codemirror instance if changed externally

Author: ThimoDEV

playground/app.vue

@@ -57,4 +57,8 @@ onMounted(() => {
     @on-update="handleUpdate"
   />
   <div>{{ code }}</div>
+  <input
+    v-model="code"
+    type="text"
+  >
 </template>

src/runtime/components/NuxtCodeMirror.vue

@@ -34,7 +34,7 @@ const emit = defineEmits<{
 onMounted(() => {
   useNuxtCodeMirror({
     ...props,
-    modelValue: modelValue.value,
+    modelValue: modelValue,
     onChange: (value, viewUpdate) => {
       modelValue.value = value
       emit('onChange', value, viewUpdate)

src/runtime/composables/useNuxtCodeMirror.ts

@@ -11,7 +11,7 @@ const emptyExtensions: Extension[] = []
 
 export function useNuxtCodeMirror(props: UseCodeMirrorProps) {
   const {
-    modelValue: value = '',
+    modelValue: value,
     selection,
     onChange,
     onStatistics,
@@ -58,7 +58,7 @@ export function useNuxtCodeMirror(props: UseCodeMirrorProps) {
     if (
       viewUpdate.docChanged
       && typeof onChange === 'function'
-      // Fix echoing of the remote changes:
+      // Fix echoing/ infinite update loops of the remote changes:
       // If transaction is market as remote we don't have to call `onChange` handler again
       && !viewUpdate.transactions.some(tr => tr.annotation(External))
     ) {
@@ -98,7 +98,7 @@ export function useNuxtCodeMirror(props: UseCodeMirrorProps) {
   watchEffect(() => {
     if (containerRef.value && !stateRef?.value) {
       const config = {
-        doc: value,
+        doc: value?.value,
         selection,
         extensions: getExtensions,
       }
@@ -158,9 +158,9 @@ export function useNuxtCodeMirror(props: UseCodeMirrorProps) {
     }
 
     const currentValue = viewRef.value ? viewRef.value.state.doc.toString() : ''
-    if (viewRef.value && value !== currentValue) {
+    if (viewRef.value && value.value !== currentValue) {
       viewRef.value.dispatch({
-        changes: { from: 0, to: currentValue.length, insert: value || '' },
+        changes: { from: 0, to: currentValue.length, insert: value.value || '' },
         annotations: [External.of(true)],
       })
     }

src/runtime/types/nuxt-codemirror.d.ts

@@ -1,12 +1,13 @@
 import type { EditorState, EditorStateConfig, Extension, StateField, EditorSelection, SelectionRange, Line } from '@codemirror/state'
 import type { EditorView, ViewUpdate } from '@codemirror/view'
 import type { BasicSetupOptions } from '@uiw/codemirror-extensions-basic-setup'
+import type { ModelRef } from 'vue'
 import type { Ref } from '#imports'
 
 export interface NuxtCodeMirrorProps
   extends Omit<EditorStateConfig, 'doc' | 'extensions'> {
   /** value of the auto created model in the editor. Works as underlying logic of a V-Model */
-  modelValue?: string
+  modelValue?: ModelRef<string | undefined, string>
   /** The height value of the editor. */
   height?: string
   /** The minimum height value of the editor. */