1
- <script lang="ts">
2
- import { loadMonacoEnv , loadWasm } from ' ./env'
3
-
4
- let init = false
5
- </script >
6
-
7
1
<script lang="ts" setup>
8
2
import {
9
3
onMounted ,
10
4
onBeforeUnmount ,
11
5
ref ,
12
6
shallowRef ,
13
7
nextTick ,
14
- watchEffect ,
15
8
inject ,
16
9
watch ,
17
10
computed ,
18
11
} from ' vue'
19
12
import * as monaco from ' monaco-editor-core'
13
+ import { initMonaco } from ' ./env'
20
14
import { getOrCreateModel } from ' ./utils'
21
15
import { loadGrammars , loadTheme } from ' monaco-volar'
22
16
import { Store } from ' ../store'
@@ -34,46 +28,16 @@ const props = withDefaults(
34
28
}
35
29
)
36
30
37
- const emits = defineEmits <{
31
+ const emit = defineEmits <{
38
32
(e : ' change' , value : string ): void
39
33
}>()
40
34
41
- const containerRef = ref <HTMLDivElement | null >()
35
+ const containerRef = ref <HTMLDivElement >()
42
36
const ready = ref (false )
43
- const editor = shallowRef <monaco .editor .IStandaloneCodeEditor | undefined >(
44
- undefined
45
- )
46
- const store = inject (' store' ) as Store
37
+ const editor = shallowRef <monaco .editor .IStandaloneCodeEditor >()
38
+ const store = inject <Store >(' store' )!
47
39
48
- if (! init ) {
49
- init = true
50
- loadMonacoEnv (store )
51
- loadWasm ()
52
- }
53
-
54
- if (! props .readonly ) {
55
- watchEffect (() => {
56
- // create a model for each file in the store
57
- for (const filename in store .state .files ) {
58
- const file = store .state .files [filename ]
59
- if (monaco .editor .getModel (monaco .Uri .parse (` file:///${filename } ` )))
60
- continue
61
- getOrCreateModel (
62
- monaco .Uri .parse (` file:///${filename } ` ),
63
- file .language ,
64
- file .code
65
- )
66
- }
67
-
68
- // dispose of any models that are not in the store
69
- for (const model of monaco .editor .getModels ()) {
70
- if (store .state .files [model .uri .toString ().substring (' file:///' .length )])
71
- continue
72
- if (model .uri .toString ().startsWith (' file:///node_modules/' )) continue
73
- model .dispose ()
74
- }
75
- })
76
- }
40
+ initMonaco (store )
77
41
78
42
const lang = computed (() => (props .mode === ' css' ? ' css' : ' javascript' ))
79
43
@@ -106,22 +70,6 @@ onMounted(async () => {
106
70
})
107
71
editor .value = editorInstance
108
72
109
- // Support for go to definition
110
- monaco .editor .registerEditorOpener ({
111
- openCodeEditor(_ , resource ) {
112
- const path = resource .path
113
- if (/ ^ \/ / .test (path ) && ! / ^ \/ node_modules/ .test (path )) {
114
- const fileName = path .replace (' /' , ' ' )
115
- if (fileName !== store .state .activeFile .filename ) {
116
- store .setActive (fileName )
117
- return true
118
- }
119
- }
120
-
121
- return false
122
- },
123
- })
124
-
125
73
// Support for semantic highlighting
126
74
const t = (editorInstance as any )._themeService ._theme
127
75
t .getTokenStyleMetadata = (
@@ -182,7 +130,7 @@ onMounted(async () => {
182
130
})
183
131
184
132
editorInstance .onDidChangeModelContent (() => {
185
- emits (' change' , editorInstance .getValue ())
133
+ emit (' change' , editorInstance .getValue ())
186
134
})
187
135
188
136
editorInstance .onDidChangeCursorSelection ((e ) => {
0 commit comments