import type { Ref , WritableComputedRef } from 'vue' ; import { watch } from 'vue' ; import CodeMirror from 'codemirror' ; import 'codemirror/mode/javascript/javascript' ; import 'codemirror/mode/css/css' ; import 'codemirror/mode/xml/xml' ; import 'codemirror/mode/htmlmixed/htmlmixed' ; import 'codemirror/mode/jsx/jsx' ; import 'codemirror/addon/display/placeholder' ; import 'codemirror/lib/codemirror.css' ; import 'codemirror-theme-vars/base.css' ; export function useCodeMirror ( textarea , input , options = { } ) { const cm = CodeMirror . fromTextArea ( textarea . value ! , { theme : 'vars' , ... options , } ) ; let skip = false ; cm . on ( 'change' , ( ) => { if ( skip ) { skip = false ; return ; } input . value = cm . getValue ( ) ; } ) ; watch ( input , ( v ) => { if ( v !== cm . getValue ( ) ) { skip = true ; const selections = cm . listSelections ( ) ; cm . replaceRange ( v , cm . posFromIndex ( 0 ) , cm . posFromIndex ( Infinity ) ) ; cm . setSelections ( selections ) ; } } , { immediate : true } ) ; return cm ; }