diff options
Diffstat (limited to 'app/assets/javascripts/repo/components/repo_editor.vue')
-rw-r--r-- | app/assets/javascripts/repo/components/repo_editor.vue | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/app/assets/javascripts/repo/components/repo_editor.vue b/app/assets/javascripts/repo/components/repo_editor.vue new file mode 100644 index 00000000000..96d6a75bb61 --- /dev/null +++ b/app/assets/javascripts/repo/components/repo_editor.vue @@ -0,0 +1,117 @@ +<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> |