1-
2-
31# Nuxt CodeMirror
42
53[ ![ npm version] [ npm-version-src ]] [ npm-version-href ]
@@ -31,11 +29,12 @@ Read the CodeMirror Reference guide for more in depth information: [CodeMirror d
3129This component is auto imported and is the CodeMirror wrapper.
3230
3331Component props:
34- ```
32+
33+ ``` ts
3534interface NuxtCodeMirrorProps
3635 extends Omit <EditorStateConfig , ' doc' | ' extensions' > {
3736 /** value of the auto created model in the editor. Works as underlying logic of a V-Model */
38- modelValue?: string This is linked to a Vue V-Model
37+ modelValue? : string
3938 /** The height value of the editor. */
4039 height? : string
4140 /** The minimum height value of the editor. */
@@ -116,7 +115,7 @@ interface NuxtCodeMirrorProps
116115
117116The NuxtCodeMirror component accepts a Template ref and exposes The CodeMirror div element, the Editor view and the Editor State
118117
119- ```
118+ ``` ts
120119interface CodeMirrorRef {
121120 /** Container element of the CodeMirror instance */
122121 container: HTMLDivElement | null
@@ -136,26 +135,20 @@ An example on how to do this can be found here: [🏀 Online playground](https:/
136135If for some reason you want to write your own CodeMirror component then you can do that too :)
137136
138137### UseNuxtCodeMirror.ts
138+
139139This composable is the underlying magic of the NuxtCodeMirror component and is also auto imported.
140140
141141It requires minimum 3 Refs, one for the div element CodeMirror will connect to, one for the CodeMirror view, and one for the CodeMirror state
142142
143- Make sure you execute the composable in onMounted otherwise you will get an eror because codemirror can't be linked to the DOM.
144-
145- ```
146- /** The EditorView of the CodeMirror instance */
147- viewRef: Ref<EditorView | undefined>
148- /** The EditorState of the CodeMirror instance */
149- stateRef: Ref<EditorState | undefined>
150- /** Editor element of the CodeMirror instance */
151- containerRef: Ref<HTMLDivElement | null>
143+ Make sure you execute the composable in ` onMounted ` otherwise you will get an eror because codemirror can't be linked to the DOM.
152144
145+ ``` ts
153146const editor = ref <HTMLDivElement | null >(null )
154147const container = ref <HTMLDivElement | null >(null )
155148const view = ref <EditorView >()
156149const state = ref <EditorState >()
157150
158- onMounted(() => {
151+ onMounted (() => {
159152 useNuxtCodeMirror ({
160153 ... props ,
161154 container: editor .value ,
0 commit comments