Files Management + Editor Modal + Code Editor fixes

client/js/components/editor-codeblock.js

@@ -1,12 +1,6 @@
 
-let codeEditor = ace.edit("codeblock-editor");
-codeEditor.setTheme("ace/theme/tomorrow_night");
-codeEditor.getSession().setMode("ace/mode/markdown");
-codeEditor.setOption('fontSize', '14px');
-codeEditor.setOption('hScrollBarAlwaysVisible', false);
-codeEditor.setOption('wrap', true);
-
 let modelist = ace.require("ace/ext/modelist");
+let codeEditor = null;
 
 // ACE - Mode Loader
 
@@ -33,7 +27,8 @@ let vueCodeBlock = new Vue({
 	el: '#modal-editor-codeblock',
 	data: {
 		modes: modelist.modesByName,
-		modeSelected: 'text'
+		modeSelected: 'text',
+		initContent: ''
 	},
 	watch: {
 		modeSelected: (val, oldVal) => {
@@ -45,19 +40,28 @@ let vueCodeBlock = new Vue({
 	},
 	methods: {
 		open: (ev) => {
+
 			$('#modal-editor-codeblock').addClass('is-active');
 
 			_.delay(() => {
-				codeEditor.resize();
+				codeEditor = ace.edit("codeblock-editor");
+				codeEditor.setTheme("ace/theme/tomorrow_night");
+				codeEditor.getSession().setMode("ace/mode/" + vueCodeBlock.modeSelected);
+				codeEditor.setOption('fontSize', '14px');
+				codeEditor.setOption('hScrollBarAlwaysVisible', false);
+				codeEditor.setOption('wrap', true);
+
+				codeEditor.setValue(vueCodeBlock.initContent);
+
 				codeEditor.focus();
-				codeEditor.setAutoScrollEditorIntoView(true);
 				codeEditor.renderer.updateFull();
-			}, 1000);
+			}, 300);
 			
 		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
 			$('#modal-editor-codeblock').removeClass('is-active');
+			vueCodeBlock.initContent = '';
 		},
 		insertCode: (ev) => {