Insert Code Block feature completed

client/js/components/editor-codeblock.js

@@ -0,0 +1,61 @@
+
+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 vueCodeBlock = new Vue({
+	el: '#modal-editor-codeblock',
+	data: {
+		modes: modelist.modesByName,
+		modeSelected: 'text'
+	},
+	watch: {
+		modeSelected: (val, oldVal) => {
+			loadAceMode(val).done(() => {
+				ace.require("ace/mode/" + val);
+				codeEditor.getSession().setMode("ace/mode/" + val);
+			});
+		}
+	},
+	methods: {
+		cancel: (ev) => {
+			mdeModalOpenState = false;
+			$('#modal-editor-codeblock').slideUp();
+		},
+		insertCode: (ev) => {
+
+			if(mde.codemirror.doc.somethingSelected()) {
+				mde.codemirror.execCommand('singleSelection');
+			}
+			let codeBlockText = '```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```';
+
+			mde.codemirror.doc.replaceSelection(codeBlockText);
+			vueCodeBlock.cancel();
+
+		}
+	}
+});
+
+// ACE - Mode Loader
+
+let modelistLoaded = [];
+let loadAceMode = (m) => {
+	return $.ajax({
+		url: '/js/ace/mode-' + m + '.js',
+		dataType: "script",
+		cache: true,
+		beforeSend: () => {
+			if(_.includes(modelistLoaded, m)) {
+				return false;
+			}
+		},
+		success: () => {
+			modelistLoaded.push(m);
+		}
+	});
+}

client/js/components/editor.js

@@ -5,30 +5,10 @@
 
 if($('#mk-editor').length === 1) {
 
-	let codeEditor = ace.edit("codeblock-editor");
+	let mdeModalOpenState = false;
-	codeEditor.setTheme("ace/theme/tomorrow_night");
+	let mdeCurrentEditor = null;
-	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");
+	//=include editor-codeblock.js
-
-	let vueCodeBlock = new Vue({
-		el: '#modal-editor-codeblock',
-		data: {
-			modes: modelist.modesByName,
-			modeSelected: 'text'
-		},
-		watch: {
-			modeSelected: (val, oldVal) => {
-				loadAceMode(val).done(() => {
-					ace.require("ace/mode/" + val);
-					codeEditor.getSession().setMode("ace/mode/" + val);
-				});
-			}
-		}
-	});
 
 	var mde = new SimpleMDE({
 		autofocus: true,
@@ -97,7 +77,10 @@ if($('#mk-editor').length === 1) {
 			{
 				name: "link",
 				action: (editor) => {
-					$('#modal-editor-link').slideToggle();
+					if(!mdeModalOpenState) {
+						mdeModalOpenState = true;
+						$('#modal-editor-link').slideToggle();
+					}
 				},
 				className: "fa fa-link",
 				title: "Insert Link",
@@ -114,6 +97,7 @@ if($('#mk-editor').length === 1) {
 			{
 				name: "inline-code",
 				action: (editor) => {
+
 					if(!editor.codemirror.doc.somethingSelected()) {
 						return alerts.pushError('Invalid selection','You must select at least 1 character first.');
 					}
@@ -122,6 +106,7 @@ if($('#mk-editor').length === 1) {
 						return '`' + s + '`';
 					});
 					editor.codemirror.doc.replaceSelections(curSel);
+					
 				},
 				className: "fa fa-terminal",
 				title: "Inline Code",
@@ -129,10 +114,21 @@ if($('#mk-editor').length === 1) {
 			{
 				name: "code-block",
 				action: (editor) => {
-					$('#modal-editor-codeblock').slideDown(400, () => {
+					if(!mdeModalOpenState) {
-						codeEditor.resize();
+						mdeModalOpenState = true;
-						codeEditor.focus();
+
-					});
+						if(mde.codemirror.doc.somethingSelected()) {
+							codeEditor.setValue(mde.codemirror.doc.getSelection());
+						} else {
+							codeEditor.setValue('');
+						}
+
+						$('#modal-editor-codeblock').slideDown(400, () => {
+							codeEditor.resize();
+							codeEditor.focus();
+						});
+
+					}
 				},
 				className: "fa fa-code",
 				title: "Code Block",
@@ -182,22 +178,3 @@ $('.btn-edit-save').on('click', (ev) => {
 	});
 
 });
-
-// ACE - Mode Loader
-
-let modelistLoaded = [];
-let loadAceMode = (m) => {
-	return $.ajax({
-		url: '/js/ace/mode-' + m + '.js',
-		dataType: "script",
-		cache: true,
-		beforeSend: () => {
-			if(_.includes(modelistLoaded, m)) {
-				return false;
-			}
-		},
-		success: () => {
-			modelistLoaded.push(m);
-		}
-	});
-}

views/modals/editor-codeblock.pug

@@ -11,9 +11,9 @@
 						select(style={width: '300px'}, v-model='modeSelected')
 							option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
 			.column.is-narrow
-				a.button.is-warning.is-outlined Cancel
+				a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
 			.column.is-narrow
-				a.button.is-primary.is-outlined Insert Code Block
+				a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
 
 		.ace-container(style={'border-radius':'5px'})
 			#codeblock-editor