Commit a3eb39a1 authored by Alfredo Sumaran's avatar Alfredo Sumaran

Replace textarea with Ace editor

parent 26f658de
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
template: '#diff-file-editor', template: '#diff-file-editor',
data() { data() {
return { return {
originalState: '', originalContent: '',
saved: false, saved: false,
loading: false, loading: false,
fileLoaded: false fileLoaded: false
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
loadFile(val) { loadFile(val) {
const self = this; const self = this;
this.resetEditorContent();
if (!val || this.fileLoaded || this.loading) { if (!val || this.fileLoaded || this.loading) {
return return
} }
...@@ -31,10 +33,19 @@ ...@@ -31,10 +33,19 @@
$.get(this.file.content_path) $.get(this.file.content_path)
.done((file) => { .done((file) => {
$(self.$el).find('textarea').val(file.content);
self.originalState = file.content; let content = self.$el.querySelector('pre');
let fileContent = document.createTextNode(file.content);
content.textContent = fileContent.textContent;
self.originalContent = file.content;
self.fileLoaded = true; self.fileLoaded = true;
self.editor = ace.edit(content);
self.editor.$blockScrolling = Infinity; // Turn off annoying warning
self.editor.on('change', () => {
self.saveDiffResolution();
});
self.saveDiffResolution(); self.saveDiffResolution();
}) })
.fail(() => { .fail(() => {
...@@ -50,12 +61,14 @@ ...@@ -50,12 +61,14 @@
this.saved = true; this.saved = true;
// This probably be better placed in the data provider // This probably be better placed in the data provider
this.file.content = this.$el.querySelector('textarea').value; this.file.content = this.editor.getValue();
this.file.resolveEditChanged = this.file.content !== this.originalState; this.file.resolveEditChanged = this.file.content !== this.originalContent;
this.file.promptDiscardConfirmation = false; this.file.promptDiscardConfirmation = false;
}, },
onInput() { resetEditorContent() {
this.saveDiffResolution(); if (this.fileLoaded) {
this.editor.setValue(this.originalContent, -1);
}
} }
} }
}); });
......
...@@ -255,6 +255,13 @@ $colors: ( ...@@ -255,6 +255,13 @@ $colors: (
.editor { .editor {
border-top: solid 1px yellow; border-top: solid 1px yellow;
pre {
height: 350px;
border: none;
border-radius: 0;
margin-bottom: 0;
}
} }
.loading-text { .loading-text {
......
...@@ -6,6 +6,8 @@ ...@@ -6,6 +6,8 @@
'unselected': line.isUnselected }" 'unselected': line.isUnselected }"
- page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests" - page_title "Merge Conflicts", "#{@merge_request.title} (#{@merge_request.to_reference}", "Merge Requests"
- content_for :page_specific_javascripts do
= page_specific_javascript_tag('lib/ace.js')
= render "projects/merge_requests/show/mr_title" = render "projects/merge_requests/show/mr_title"
.merge-request-details.issuable-details .merge-request-details.issuable-details
......
...@@ -3,4 +3,4 @@ ...@@ -3,4 +3,4 @@
.editor-wrap{ ":class" => "classObject" } .editor-wrap{ ":class" => "classObject" }
%p.loading-text Loading... %p.loading-text Loading...
.editor .editor
%textarea{ "@input" => "onInput", cols: '80', rows: '20' } %pre{ "style" => "height: 350px" }
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment