summaryrefslogtreecommitdiff
path: root/app/assets/javascripts/blob
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-03-09 09:07:45 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-03-09 09:07:45 +0000
commitf4186a753b86625a83e8499af14b5badd63a2ac2 (patch)
treeb960dd9f4255e9eee9f87d28e853f163836aa4c5 /app/assets/javascripts/blob
parent0221116862ee66024a03492b4fbbe4e069d84303 (diff)
downloadgitlab-ce-f4186a753b86625a83e8499af14b5badd63a2ac2.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'app/assets/javascripts/blob')
-rw-r--r--app/assets/javascripts/blob/components/blob_edit_content.vue49
-rw-r--r--app/assets/javascripts/blob/utils.js24
2 files changed, 73 insertions, 0 deletions
diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue
new file mode 100644
index 00000000000..83303a373f3
--- /dev/null
+++ b/app/assets/javascripts/blob/components/blob_edit_content.vue
@@ -0,0 +1,49 @@
+<script>
+import { initEditorLite } from '~/blob/utils';
+
+export default {
+ props: {
+ value: {
+ type: String,
+ required: true,
+ },
+ fileName: {
+ type: String,
+ required: false,
+ default: '',
+ },
+ },
+ data() {
+ return {
+ content: this.value,
+ editor: null,
+ };
+ },
+ watch: {
+ fileName(newVal) {
+ this.editor.updateModelLanguage(newVal);
+ },
+ },
+ mounted() {
+ this.editor = initEditorLite({
+ el: this.$refs.editor,
+ blobPath: this.fileName,
+ blobContent: this.content,
+ });
+ },
+ methods: {
+ triggerFileChange() {
+ const val = this.editor.getValue();
+ this.content = val;
+ this.$emit('input', val);
+ },
+ },
+};
+</script>
+<template>
+ <div class="file-content code">
+ <pre id="editor" ref="editor" data-editor-loading @focusout="triggerFileChange">{{
+ content
+ }}</pre>
+ </div>
+</template>
diff --git a/app/assets/javascripts/blob/utils.js b/app/assets/javascripts/blob/utils.js
new file mode 100644
index 00000000000..dc2ec642e59
--- /dev/null
+++ b/app/assets/javascripts/blob/utils.js
@@ -0,0 +1,24 @@
+/* global ace */
+import Editor from '~/editor/editor_lite';
+
+export function initEditorLite({ el, blobPath, blobContent }) {
+ if (!el) {
+ throw new Error(`"el" parameter is required to initialize Editor`);
+ }
+ let editor;
+
+ if (window?.gon?.features?.monacoSnippets) {
+ editor = new Editor();
+ editor.createInstance({
+ el,
+ blobPath,
+ blobContent,
+ });
+ } else {
+ editor = ace.edit(el);
+ }
+
+ return editor;
+}
+
+export default () => ({});