28
28
</div >
29
29
</template >
30
30
31
- <script lang="ts">
32
- import type { Ref , PropType } from " vue" ;
31
+ <script lang="ts"></script >
32
+ <script lang="ts" setup>
33
+ import type { Ref , PropType , Component } from " vue" ;
33
34
import type { Editor , EditorConfiguration } from " codemirror" ;
34
35
import {
35
- defineComponent ,
36
36
ref ,
37
+ shallowRef ,
37
38
getCurrentInstance ,
38
39
watch ,
39
40
onBeforeUnmount ,
41
+ unref ,
42
+ defineExpose ,
40
43
} from " vue" ;
41
-
42
- // base style
43
44
import " codemirror/lib/codemirror.css" ;
44
- // component
45
45
import Default from " ./presetMode/default/index.vue" ;
46
46
import Merge from " ./presetMode/Merge/index.vue" ;
47
47
import FcLog from " ./presetMode/log/index.vue" ;
48
-
49
- // hooks
50
48
import { useEvents } from " ../hooks/useEvents" ;
51
49
import { useViewControl } from " ../hooks/useViewControl" ;
52
-
53
- // config
54
50
import { componentsEvts , getCmEvts , DEFAULT_OPTIONS } from " ../config/index" ;
55
51
56
- // pollfill
57
52
if (typeof Object .assign !== " function" ) {
58
53
Object .defineProperty (Object , " assign" , {
59
54
value(target : any , varArgs : any ) {
@@ -80,192 +75,179 @@ if (typeof Object.assign !== "function") {
80
75
});
81
76
}
82
77
83
- export default defineComponent ({
84
- name: " CodemirrorEditor" ,
85
- components: {
86
- Default ,
87
- Merge ,
88
- FcLog ,
78
+ const props = defineProps ({
79
+ value: {
80
+ type: String as PropType <string >,
81
+ default: " " ,
89
82
},
90
- props: {
91
- value: {
92
- type: String as PropType <string >,
93
- default: " " ,
94
- },
95
- options: {
96
- type: Object as PropType <EditorConfiguration >,
97
- default : () => DEFAULT_OPTIONS ,
98
- },
99
- globalOptions: {
100
- type: Object as PropType <EditorConfiguration >,
101
- default : () => DEFAULT_OPTIONS ,
102
- },
103
- placeholder: {
104
- type: String as PropType <string >,
105
- default: " " ,
106
- },
107
- border: {
108
- type: Boolean as PropType <boolean >,
109
- default: false ,
110
- },
111
- width: {
112
- type: [String , Number ] as PropType <string | number | null >,
113
- default: null ,
114
- },
115
- height: {
116
- type: [String , Number ] as PropType <string | number | null >,
117
- default: null ,
118
- },
119
- keepCursorInEnd: {
120
- type: Boolean as PropType <boolean >,
121
- default: false ,
122
- },
123
- merge: {
124
- type: Boolean as PropType <boolean >,
125
- default: false ,
126
- },
127
- name: {
128
- type: String as PropType <string >,
129
- default: " " ,
130
- },
131
- marker: {
132
- type: Function as PropType <() => HTMLElement >,
133
- default : () => null ,
134
- },
135
- unseenLines: {
136
- type: Array as PropType <Array <any >>,
137
- default : () => [],
138
- },
83
+ options: {
84
+ type: Object as PropType <EditorConfiguration >,
85
+ default : () => DEFAULT_OPTIONS ,
139
86
},
140
- emits: { ... componentsEvts , ... getCmEvts () },
141
-
142
- setup(props , { emit }) {
143
- const cminstance = ref <Nullable <Editor >>(null );
144
- const content = ref (" " );
145
- const presetModeName = ref <" Default" | " Merge" | " FcLog" >(" Default" );
146
- const cmOptions = ref <any >({
147
- ... DEFAULT_OPTIONS ,
148
- ... props .globalOptions ,
149
- ... props .options ,
150
- });
151
-
152
- const internalInstance = getCurrentInstance ();
153
- const presetRef = ref (null );
154
-
155
- const { refresh, resize, destroy, containerHeight, reviseStyle } =
156
- useViewControl ({
157
- props ,
158
- cminstance ,
159
- presetRef ,
160
- });
161
-
162
- const { listenerEvents } = useEvents ({
163
- props ,
164
- cminstance: cminstance as Ref <Editor >,
165
- emit ,
166
- internalInstance ,
167
- content ,
168
- });
169
-
170
- const unseenLineMarkers = () => {
171
- if (props .unseenLines !== undefined && props .marker !== undefined ) {
172
- props .unseenLines .forEach ((line ) => {
173
- const info = cminstance .value ?.lineInfo (line );
174
- cminstance .value ?.setGutterMarker (
175
- line ,
176
- " breakpoints" ,
177
- info ?.gutterMarkers ? null : props .marker ()
178
- );
179
- });
180
- }
181
- };
182
-
183
- const onCodeChange = (newVal : string ) => {
184
- const CM_VALUE = cminstance .value ?.getValue ();
185
- if (newVal !== CM_VALUE ) {
186
- cminstance .value ?.setValue (newVal );
187
- content .value = newVal ;
188
- reviseStyle ();
189
- }
190
- unseenLineMarkers ();
191
- };
87
+ globalOptions: {
88
+ type: Object as PropType <EditorConfiguration >,
89
+ default : () => DEFAULT_OPTIONS ,
90
+ },
91
+ placeholder: {
92
+ type: String as PropType <string >,
93
+ default: " " ,
94
+ },
95
+ border: {
96
+ type: Boolean as PropType <boolean >,
97
+ default: false ,
98
+ },
99
+ width: {
100
+ type: [String , Number ] as PropType <string | number | null >,
101
+ default: null ,
102
+ },
103
+ height: {
104
+ type: [String , Number ] as PropType <string | number | null >,
105
+ default: null ,
106
+ },
107
+ keepCursorInEnd: {
108
+ type: Boolean as PropType <boolean >,
109
+ default: false ,
110
+ },
111
+ merge: {
112
+ type: Boolean as PropType <boolean >,
113
+ default: false ,
114
+ },
115
+ name: {
116
+ type: String as PropType <string >,
117
+ default: " " ,
118
+ },
119
+ marker: {
120
+ type: Function as PropType <() => HTMLElement >,
121
+ default : () => null ,
122
+ },
123
+ unseenLines: {
124
+ type: Array as PropType <Array <any >>,
125
+ default : () => [],
126
+ },
127
+ });
128
+ const emit = defineEmits ({ ... componentsEvts , ... getCmEvts () });
129
+
130
+ const cminstance = ref <Nullable <Editor >>(null );
131
+ const content = ref (" " );
132
+ const presetModeName = shallowRef <Component >(Default );
133
+ const cmOptions = ref <any >({
134
+ ... DEFAULT_OPTIONS ,
135
+ ... props .globalOptions ,
136
+ ... props .options ,
137
+ });
138
+ const internalInstance = getCurrentInstance ();
139
+ const instanceName =
140
+ props .name || internalInstance ?.parent ?.type ?.name || undefined ;
141
+ const presetRef = ref (null );
142
+
143
+ const { refresh, resize, destroy, containerHeight, reviseStyle } =
144
+ useViewControl ({
145
+ props ,
146
+ cminstance ,
147
+ presetRef ,
148
+ });
192
149
193
- /** @description */
194
- const ready = () => {
195
- listenerEvents ();
196
- unseenLineMarkers ();
150
+ const { listenerEvents } = useEvents ({
151
+ props ,
152
+ cminstance: cminstance as Ref <Editor >,
153
+ emit ,
154
+ internalInstance ,
155
+ content ,
156
+ });
197
157
198
- // prevents funky dynamic rendering
199
- resize ();
200
- emit (" ready" , cminstance .value as Editor );
201
- watch (
202
- [() => props .width , () => props .height ],
203
- ([width , height ]) => {
204
- resize (width , height );
205
- },
206
- { deep: true }
158
+ const unseenLineMarkers = () => {
159
+ if (props .unseenLines !== undefined && props .marker !== undefined ) {
160
+ props .unseenLines .forEach ((line ) => {
161
+ const info = cminstance .value ?.lineInfo (line );
162
+ cminstance .value ?.setGutterMarker (
163
+ line ,
164
+ " breakpoints" ,
165
+ info ?.gutterMarkers ? null : props .marker ()
207
166
);
208
- };
209
-
210
- const handlePresetModeName = () => {
211
- if (props .options .mode === " fclog" || props .options .mode === " log" ) {
212
- presetModeName .value = " FcLog" ;
213
- return ;
214
- }
215
- if (props .merge ) {
216
- presetModeName .value = " Merge" ;
217
- return ;
218
- }
219
- presetModeName .value = " Default" ;
220
- };
221
-
222
- watch (
223
- () => props .options ,
224
- (val ) => {
225
- // eslint-disable-next-line guard-for-in
226
- for (const key in props .options ) {
227
- cminstance .value ?.setOption (
228
- key as keyof EditorConfiguration ,
229
- val [key as keyof EditorConfiguration ]
230
- );
231
- }
232
- },
233
- { deep: true }
234
- );
235
-
236
- watch (
237
- () => props .value ,
238
- (val ) => {
239
- onCodeChange (val );
240
- }
241
- );
242
-
243
- watch (
244
- () => props .merge ,
245
- (val ) => {
246
- handlePresetModeName ();
247
- },
248
- { immediate: true }
249
- );
250
-
251
- onBeforeUnmount (() => {
252
- destroy ();
253
167
});
254
-
255
- return {
256
- presetModeName ,
257
- cmOptions ,
258
- cminstance ,
259
- content ,
260
- ready ,
261
- resize ,
262
- refresh ,
263
- containerHeight ,
264
- instanceName:
265
- props .name || internalInstance ?.parent ?.type ?.name || undefined ,
266
- presetRef ,
267
- };
168
+ }
169
+ };
170
+
171
+ const onCodeChange = (newVal : string ) => {
172
+ const CM_VALUE = cminstance .value ?.getValue ();
173
+ if (newVal !== CM_VALUE ) {
174
+ cminstance .value ?.setValue (newVal );
175
+ content .value = newVal ;
176
+ reviseStyle ();
177
+ }
178
+ unseenLineMarkers ();
179
+ };
180
+
181
+ /** @description */
182
+ const ready = () => {
183
+ listenerEvents ();
184
+ unseenLineMarkers ();
185
+
186
+ // prevents funky dynamic rendering
187
+ resize ();
188
+ emit (" ready" , cminstance .value as Editor );
189
+ watch (
190
+ [() => props .width , () => props .height ],
191
+ ([width , height ]) => {
192
+ resize (width , height );
193
+ },
194
+ { deep: true }
195
+ );
196
+ };
197
+
198
+ const handlePresetModeName = () => {
199
+ if (props .options .mode === " fclog" || props .options .mode === " log" ) {
200
+ presetModeName .value = FcLog ;
201
+ return ;
202
+ }
203
+ if (props .merge ) {
204
+ presetModeName .value = Merge ;
205
+ return ;
206
+ }
207
+ presetModeName .value = Default ;
208
+ };
209
+
210
+ watch (
211
+ () => props .options ,
212
+ (val ) => {
213
+ const realCm = props .merge
214
+ ? (unref (cminstance ) as any )?.editor ()
215
+ : unref (cminstance );
216
+
217
+ // eslint-disable-next-line guard-for-in
218
+ for (const key in props .options ) {
219
+ realCm .setOption (
220
+ key as keyof EditorConfiguration ,
221
+ unref (val [key as keyof EditorConfiguration ])
222
+ );
223
+ }
268
224
},
225
+ { deep: true }
226
+ );
227
+
228
+ watch (
229
+ () => props .value ,
230
+ (val ) => {
231
+ onCodeChange (val );
232
+ }
233
+ );
234
+
235
+ watch (
236
+ () => props .merge ,
237
+ (val ) => {
238
+ handlePresetModeName ();
239
+ },
240
+ { immediate: true }
241
+ );
242
+
243
+ onBeforeUnmount (() => {
244
+ destroy ();
245
+ });
246
+ defineExpose ({
247
+ cminstance ,
248
+ resize ,
249
+ refresh ,
250
+ destroy ,
269
251
});
270
252
</script >
271
253
0 commit comments