All files / app/assets/javascripts/vue_shared/components source_editor.vue

15.38% Statements 2/13
0% Branches 0/2
9.09% Functions 1/11
15.38% Lines 2/13

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>