Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 50x 50x | <script> import { debounce, isEmpty } from 'lodash'; import { CONTENT_UPDATE_DEBOUNCE, EDITOR_READY_EVENT } from '~/editor/constants'; import Editor from '~/editor/source_editor'; import { markRaw } from '~/lib/utils/vue3compat/mark_raw'; function initSourceEditor({ el, ...args }) { const editor = new Editor({ scrollbar: { alwaysConsumeMouseWheel: false, }, }); return markRaw( editor.createInstance({ el, ...args, }), ); } export default { inheritAttrs: false, props: { value: { type: String, required: false, default: '', }, fileName: { type: String, required: false, default: '', }, // This is used to help uniquely create a monaco model // even if two blob's share a file path. fileGlobalId: { type: String, required: false, default: '', }, extensions: { type: [Object, Array], required: false, default: () => ({}), }, editorOptions: { type: Object, required: false, default: () => ({}), }, debounceValue: { type: Number, required: false, default: CONTENT_UPDATE_DEBOUNCE, }, }, data() { return { loading: true, editor: null, }; }, watch: { fileName(newVal) { this.editor.updateModelLanguage(newVal); }, value(newVal) { Iif (this.editor.getValue() !== newVal) { this.editor.setValue(newVal); } }, }, mounted() { this.editor = initSourceEditor({ el: this.$refs.editor, blobPath: this.fileName, blobContent: this.value, blobGlobalId: this.fileGlobalId, ...this.editorOptions, }); this.editor.onDidChangeModelContent(debounce(this.onFileChange.bind(this), this.debounceValue)); Iif (!isEmpty(this.extensions)) { this.editor.use(this.extensions); } }, beforeDestroy() { this.editor.dispose(); }, methods: { onFileChange() { this.$emit('input', this.editor.getValue()); }, getEditor() { return this.editor; }, }, readyEvent: EDITOR_READY_EVENT, }; </script> <template> <div :id="`source-editor-${fileGlobalId}`" ref="editor" data-editor-loading data-testid="source-editor-container" @[$options.readyEvent]="$emit($options.readyEvent, $event)" > <pre class="editor-loading-content">{{ value }}</pre> </div> </template> |