2017-07-29 14:17:48 -04:00
|
|
|
<script>
|
2017-07-24 12:15:41 -04:00
|
|
|
/* global monaco */
|
2017-10-26 06:14:31 -04:00
|
|
|
import { mapGetters, mapActions } from 'vuex';
|
|
|
|
import flash from '../../flash';
|
2017-10-26 10:12:34 -04:00
|
|
|
import monacoLoader from '../monaco_loader';
|
2017-11-21 09:22:33 -05:00
|
|
|
import Editor from '../lib/editor';
|
2017-07-24 12:15:41 -04:00
|
|
|
|
2017-10-26 06:14:31 -04:00
|
|
|
export default {
|
2017-08-03 22:11:14 -04:00
|
|
|
destroyed() {
|
2017-11-21 09:22:33 -05:00
|
|
|
this.editor.dispose();
|
2017-08-03 22:11:14 -04:00
|
|
|
},
|
2017-07-24 12:15:41 -04:00
|
|
|
mounted() {
|
2017-10-26 10:12:34 -04:00
|
|
|
if (this.monaco) {
|
|
|
|
this.initMonaco();
|
|
|
|
} else {
|
2017-11-17 05:46:26 -05:00
|
|
|
monacoLoader(['vs/editor/editor.main'], () => {
|
2017-11-22 08:39:16 -05:00
|
|
|
this.editor = Editor.create(monaco);
|
|
|
|
|
2017-10-26 10:12:34 -04:00
|
|
|
this.initMonaco();
|
|
|
|
});
|
|
|
|
}
|
2017-10-19 06:55:27 -04:00
|
|
|
},
|
|
|
|
methods: {
|
2017-10-26 06:14:31 -04:00
|
|
|
...mapActions([
|
|
|
|
'getRawFileData',
|
|
|
|
'changeFileContent',
|
|
|
|
]),
|
|
|
|
initMonaco() {
|
2017-11-01 09:03:19 -04:00
|
|
|
if (this.shouldHideEditor) return;
|
|
|
|
|
2017-11-21 09:22:33 -05:00
|
|
|
this.editor.clearEditor();
|
2017-08-15 15:53:41 -04:00
|
|
|
|
2017-10-26 06:14:31 -04:00
|
|
|
this.getRawFileData(this.activeFile)
|
|
|
|
.then(() => {
|
2017-11-21 09:22:33 -05:00
|
|
|
this.editor.createInstance(this.$el);
|
2017-10-26 06:14:31 -04:00
|
|
|
})
|
2017-11-17 05:46:26 -05:00
|
|
|
.then(() => this.setupEditor())
|
2017-11-22 08:39:16 -05:00
|
|
|
.catch((e) => { throw e;flash('Error setting up monaco. Please try again.'); });
|
2017-07-30 13:34:53 -04:00
|
|
|
},
|
2017-10-26 06:14:31 -04:00
|
|
|
setupEditor() {
|
2017-10-26 11:44:26 -04:00
|
|
|
if (!this.activeFile) return;
|
2017-11-16 07:55:01 -05:00
|
|
|
|
2017-11-21 09:22:33 -05:00
|
|
|
const model = this.editor.createModel(this.activeFile);
|
2017-11-16 07:55:01 -05:00
|
|
|
|
2017-11-21 09:22:33 -05:00
|
|
|
this.editor.attachModel(model);
|
2017-11-17 05:46:26 -05:00
|
|
|
model.onChange((m) => {
|
2017-10-26 06:14:31 -04:00
|
|
|
this.changeFileContent({
|
|
|
|
file: this.activeFile,
|
2017-11-17 05:46:26 -05:00
|
|
|
content: m.getValue(),
|
2017-10-05 05:54:46 -04:00
|
|
|
});
|
2017-10-26 06:14:31 -04:00
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
activeFile(oldVal, newVal) {
|
2017-10-27 13:16:28 -04:00
|
|
|
if (newVal && !newVal.active) {
|
2017-10-26 06:14:31 -04:00
|
|
|
this.initMonaco();
|
2017-10-05 05:54:46 -04:00
|
|
|
}
|
|
|
|
},
|
2017-07-24 12:15:41 -04:00
|
|
|
},
|
2017-08-15 14:16:42 -04:00
|
|
|
computed: {
|
2017-10-26 06:14:31 -04:00
|
|
|
...mapGetters([
|
|
|
|
'activeFile',
|
|
|
|
'activeFileExtension',
|
|
|
|
]),
|
2017-08-15 14:16:42 -04:00
|
|
|
shouldHideEditor() {
|
2017-10-26 06:14:31 -04:00
|
|
|
return this.activeFile.binary && !this.activeFile.raw;
|
2017-08-15 14:16:42 -04:00
|
|
|
},
|
|
|
|
},
|
2017-07-24 12:15:41 -04:00
|
|
|
};
|
2017-07-29 14:17:48 -04:00
|
|
|
</script>
|
2017-07-24 12:15:41 -04:00
|
|
|
|
2017-07-29 14:17:48 -04:00
|
|
|
<template>
|
2017-10-30 10:36:24 -04:00
|
|
|
<div
|
|
|
|
id="ide"
|
|
|
|
class="blob-viewer-container blob-editor-container"
|
|
|
|
>
|
2017-11-01 09:03:19 -04:00
|
|
|
<div
|
|
|
|
v-if="shouldHideEditor"
|
|
|
|
v-html="activeFile.html"
|
|
|
|
>
|
|
|
|
</div>
|
2017-10-30 10:36:24 -04:00
|
|
|
</div>
|
2017-07-29 14:17:48 -04:00
|
|
|
</template>
|