Editor - Codeblock UI

client/js/components/editor-codeblock.js

@@ -44,9 +44,20 @@ let vueCodeBlock = new Vue({
 		}
 	},
 	methods: {
+		open: (ev) => {
+			$('#modal-editor-codeblock').addClass('is-active');
+
+			_.delay(() => {
+				codeEditor.resize();
+				codeEditor.focus();
+				codeEditor.setAutoScrollEditorIntoView(true);
+				codeEditor.renderer.updateFull();
+			}, 1000);
+			
+		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
-			$('#modal-editor-codeblock').slideUp();
+			$('#modal-editor-codeblock').removeClass('is-active');
 		},
 		insertCode: (ev) => {
 

client/js/components/editor-image.js

@@ -27,12 +27,12 @@ let vueImage = new Vue({
 
 		open: () => {
 			mdeModalOpenState = true;
-			$('#modal-editor-image').slideDown();
+			$('#modal-editor-image').addClass('is-active');
 			vueImage.refreshFolders();
 		},
 		cancel: (ev) => {
 			mdeModalOpenState = false;
-			$('#modal-editor-image').slideUp();
+			$('#modal-editor-image').removeClass('is-active');
 		},
 
 		// -------------------------------------------

client/js/components/editor.js

@@ -138,10 +138,7 @@ if($('#mk-editor').length === 1) {
 							codeEditor.setValue('');
 						}
 
-						$('#modal-editor-codeblock').slideDown(400, () => {
-							codeEditor.resize();
-							codeEditor.focus();
-						});
+						vueCodeBlock.open();
 
 					}
 				},