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: () => Store,

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

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

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

        Helper.monacoInstance = monacoInstance;

        this.addMonacoEvents();

        this.setupEditor();
      })
      .catch(Helper.loadingError);
  },

  methods: {
    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.activeLine = lineNumber;

        Helper.monacoInstance.setPosition({
          lineNumber: this.activeLine,
          column: 1,
        });
      }
    },
  },

  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.isTree) {
        this.setupEditor();
      }
    },
  },
  computed: {
    shouldHideEditor() {
      return !this.openedFiles.length || (this.binary && !this.activeFile.raw);
    },
  },
};

export default RepoEditor;
</script>

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