diff options
author | Phil Hughes <me@iamphill.com> | 2018-03-20 14:12:48 +0000 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2018-03-20 14:12:48 +0000 |
commit | f527e6e1855f30cf5ca5cb834b2d20438299a70e (patch) | |
tree | 9d5dd3e33f86cf43c0b445822341896e20027f94 /app/assets/javascripts/ide/components/repo_editor.vue | |
parent | 68b914c9371e6e3fffc6afde23ca77a77ca688f2 (diff) | |
download | gitlab-ce-f527e6e1855f30cf5ca5cb834b2d20438299a70e.tar.gz |
Move IDE to CE
This also makes the IDE generally available
Diffstat (limited to 'app/assets/javascripts/ide/components/repo_editor.vue')
-rw-r--r-- | app/assets/javascripts/ide/components/repo_editor.vue | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue new file mode 100644 index 00000000000..e73d1ce839f --- /dev/null +++ b/app/assets/javascripts/ide/components/repo_editor.vue @@ -0,0 +1,161 @@ +<script> +/* global monaco */ +import { mapState, mapActions } from 'vuex'; +import flash from '~/flash'; +import monacoLoader from '../monaco_loader'; +import Editor from '../lib/editor'; + +export default { + props: { + file: { + type: Object, + required: true, + }, + }, + computed: { + ...mapState([ + 'leftPanelCollapsed', + 'rightPanelCollapsed', + 'viewer', + 'delayViewerUpdated', + ]), + shouldHideEditor() { + return this.file && this.file.binary && !this.file.raw; + }, + }, + watch: { + file(oldVal, newVal) { + if (newVal.path !== this.file.path) { + this.initMonaco(); + } + }, + leftPanelCollapsed() { + this.editor.updateDimensions(); + }, + rightPanelCollapsed() { + this.editor.updateDimensions(); + }, + viewer() { + this.createEditorInstance(); + }, + }, + beforeDestroy() { + this.editor.dispose(); + }, + mounted() { + if (this.editor && monaco) { + this.initMonaco(); + } else { + monacoLoader(['vs/editor/editor.main'], () => { + this.editor = Editor.create(monaco); + + this.initMonaco(); + }); + } + }, + methods: { + ...mapActions([ + 'getRawFileData', + 'changeFileContent', + 'setFileLanguage', + 'setEditorPosition', + 'setFileEOL', + 'updateViewer', + 'updateDelayViewerUpdated', + ]), + initMonaco() { + if (this.shouldHideEditor) return; + + this.editor.clearEditor(); + + this.getRawFileData(this.file) + .then(() => { + const viewerPromise = this.delayViewerUpdated ? this.updateViewer('editor') : Promise.resolve(); + + return viewerPromise; + }) + .then(() => { + this.updateDelayViewerUpdated(false); + this.createEditorInstance(); + }) + .catch((err) => { + flash('Error setting up monaco. Please try again.', 'alert', document, null, false, true); + throw err; + }); + }, + createEditorInstance() { + this.editor.dispose(); + + this.$nextTick(() => { + if (this.viewer === 'editor') { + this.editor.createInstance(this.$refs.editor); + } else { + this.editor.createDiffInstance(this.$refs.editor); + } + + this.setupEditor(); + }); + }, + setupEditor() { + if (!this.file || !this.editor.instance) return; + + this.model = this.editor.createModel(this.file); + + this.editor.attachModel(this.model); + + this.model.onChange((model) => { + const { file } = model; + + if (file.active) { + this.changeFileContent({ + path: file.path, + content: model.getModel().getValue(), + }); + } + }); + + // Handle Cursor Position + this.editor.onPositionChange((instance, e) => { + this.setEditorPosition({ + editorRow: e.position.lineNumber, + editorColumn: e.position.column, + }); + }); + + this.editor.setPosition({ + lineNumber: this.file.editorRow, + column: this.file.editorColumn, + }); + + // Handle File Language + this.setFileLanguage({ + fileLanguage: this.model.language, + }); + + // Get File eol + this.setFileEOL({ + eol: this.model.eol, + }); + }, + }, +}; +</script> + +<template> + <div + id="ide" + class="blob-viewer-container blob-editor-container" + > + <div + v-if="shouldHideEditor" + v-html="file.html" + > + </div> + <div + v-show="!shouldHideEditor" + ref="editor" + class="multi-file-editor-holder" + > + </div> + </div> +</template> |