summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/vue_shared/components/editor_lite.vue
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/javascripts/vue_shared/components/editor_lite.vue')
-rw-r--r--app/assets/javascripts/vue_shared/components/editor_lite.vue103
1 files changed, 0 insertions, 103 deletions
diff --git a/app/assets/javascripts/vue_shared/components/editor_lite.vue b/app/assets/javascripts/vue_shared/components/editor_lite.vue
deleted file mode 100644
index c3bddabea21..00000000000
--- a/app/assets/javascripts/vue_shared/components/editor_lite.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<script>
-import { debounce } from 'lodash';
-import { CONTENT_UPDATE_DEBOUNCE, EDITOR_READY_EVENT } from '~/editor/constants';
-import Editor from '~/editor/editor_lite';
-
-function initEditorLite({ el, ...args }) {
- const editor = new Editor({
- scrollbar: {
- alwaysConsumeMouseWheel: false,
- },
- });
-
- return editor.createInstance({
- el,
- ...args,
- });
-}
-
-export default {
- inheritAttrs: false,
- props: {
- value: {
- type: String,
- required: false,
- default: '',
- },
- fileName: {
- type: String,
- required: false,
- default: '',
- },
- // This is used to help uniquely create a monaco model
- // even if two blob's share a file path.
- fileGlobalId: {
- type: String,
- required: false,
- default: '',
- },
- extensions: {
- type: [String, Array],
- required: false,
- default: () => null,
- },
- editorOptions: {
- type: Object,
- required: false,
- default: () => ({}),
- },
- },
- data() {
- return {
- loading: true,
- editor: null,
- };
- },
- watch: {
- fileName(newVal) {
- this.editor.updateModelLanguage(newVal);
- },
- value(newVal) {
- if (this.editor.getValue() !== newVal) {
- this.editor.setValue(newVal);
- }
- },
- },
- mounted() {
- this.editor = initEditorLite({
- el: this.$refs.editor,
- blobPath: this.fileName,
- blobContent: this.value,
- blobGlobalId: this.fileGlobalId,
- extensions: this.extensions,
- ...this.editorOptions,
- });
-
- this.editor.onDidChangeModelContent(
- debounce(this.onFileChange.bind(this), CONTENT_UPDATE_DEBOUNCE),
- );
- },
- beforeDestroy() {
- this.editor.dispose();
- },
- methods: {
- onFileChange() {
- this.$emit('input', this.editor.getValue());
- },
- getEditor() {
- return this.editor;
- },
- },
- readyEvent: EDITOR_READY_EVENT,
-};
-</script>
-<template>
- <div
- :id="`editor-lite-${fileGlobalId}`"
- ref="editor"
- data-editor-loading
- @[$options.readyEvent]="$emit($options.readyEvent)"
- >
- <pre class="editor-loading-content">{{ value }}</pre>
- </div>
-</template>