1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<script>
import { debounce } from 'lodash';
import { isDocument } from 'yaml';
import { CONTENT_UPDATE_DEBOUNCE } from '~/editor/constants';
import SourceEditor from '~/editor/source_editor';
import { YamlEditorExtension } from '~/editor/extensions/source_editor_yaml_ext';
import { SourceEditorExtension } from '~/editor/extensions/source_editor_extension_base';
export default {
name: 'YamlEditor',
props: {
doc: {
type: Object,
required: true,
validator: (d) => isDocument(d),
},
highlight: {
type: [String, Array],
required: false,
default: null,
},
filename: {
type: String,
required: true,
},
},
data() {
return {
editor: null,
isUpdating: false,
yamlEditorExtension: null,
};
},
watch: {
doc: {
handler() {
this.updateEditorContent();
},
deep: true,
},
highlight(v) {
this.requestHighlight(v);
},
},
mounted() {
this.editor = new SourceEditor().createInstance({
el: this.$el,
blobPath: this.filename,
language: 'yaml',
});
[, this.yamlEditorExtension] = this.editor.use([
{ definition: SourceEditorExtension },
{
definition: YamlEditorExtension,
setupOptions: {
highlightPath: this.highlight,
},
},
]);
this.editor.onDidChangeModelContent(
debounce(() => this.handleChange(), CONTENT_UPDATE_DEBOUNCE),
);
this.updateEditorContent();
this.emitValue();
},
methods: {
async updateEditorContent() {
this.isUpdating = true;
this.editor.setDoc(this.doc);
this.isUpdating = false;
this.requestHighlight(this.highlight);
},
handleChange() {
this.emitValue();
if (!this.isUpdating) {
this.handleTouch();
}
},
emitValue() {
this.$emit('update:yaml', this.editor.getValue());
},
handleTouch() {
this.$emit('touch');
},
requestHighlight(path) {
this.editor.highlight(path, true);
},
},
};
</script>
<template>
<div id="source-editor-yaml-editor"></div>
</template>
|
