gitlab-org--gitlab-foss/app/assets/javascripts/repo/components/repo_editor.vue

<script>
/* global monaco */
import Store from '../stores/repo_store';
import Service from '../services/repo_service';
import Helper from '../helpers/repo_helper';

const RepoEditor = {
  data() {
    return Store;
  },

  destroyed() {
    if (Helper.monacoInstance) {
      Helper.monacoInstance.destroy();
    }
  },

  mounted() {
    if (!this.activeFile.tempFile) {
      Service.getRaw(this.activeFile.raw_path)
        .then((rawResponse) => {
          Store.blobRaw = rawResponse.data;
          Store.activeFile.plain = rawResponse.data;

          this.createMonacoInstance();
        })
        .catch(Helper.loadingError);
    } else {
      this.createMonacoInstance();
    }
  },

  methods: {
    createMonacoInstance() {
      const monacoInstance = Helper.monaco.editor.create(this.$el, {
        model: null,
        readOnly: false,
        contextmenu: true,
        scrollBeyondLastLine: false,
      });

      Helper.monacoInstance = monacoInstance;

      this.addMonacoEvents();

      this.setupEditor();
    },
    setupEditor() {
      this.showHide();

      Helper.setMonacoModelFromLanguage();
    },

    showHide() {
      if (!this.openedFiles.length || (this.binary && !this.activeFile.raw)) {
        this.$el.style.display = 'none';
      } else {
        this.$el.style.display = 'inline-block';
      }
    },

    addMonacoEvents() {
      Helper.monacoInstance.onMouseUp(this.onMonacoEditorMouseUp);
      Helper.monacoInstance.onKeyUp(this.onMonacoEditorKeysPressed.bind(this));
    },

    onMonacoEditorKeysPressed() {
      Store.setActiveFileContents(Helper.monacoInstance.getValue());
    },

    onMonacoEditorMouseUp(e) {
      if (!e.target.position) return;
      const lineNumber = e.target.position.lineNumber;
      if (e.target.element.classList.contains('line-numbers')) {
        location.hash = `L${lineNumber}`;
        Store.setActiveLine(lineNumber);
      }
    },
  },

  watch: {
    dialog: {
      handler(obj) {
        const newObj = obj;
        if (newObj.status) {
          newObj.status = false;
          this.openedFiles = this.openedFiles.map((file) => {
            const f = file;
            if (f.active) {
              this.blobRaw = f.plain;
            }
            f.changed = false;
            delete f.newContent;

            return f;
          });
          this.editMode = false;
          Store.toggleBlobView();
        }
      },
      deep: true,
    },

    blobRaw() {
      if (Helper.monacoInstance) {
        this.setupEditor();
      }
    },

    activeLine() {
      if (Helper.monacoInstance) {
        Helper.monacoInstance.setPosition({
          lineNumber: this.activeLine,
          column: 1,
        });
      }
    },
  },
  computed: {
    shouldHideEditor() {
      return !this.openedFiles.length || (this.binary && !this.activeFile.raw);
    },
  },
};

export default RepoEditor;
</script>

<template>
<div id="ide" v-if='!shouldHideEditor'></div>
</template>