Added code editor mode selection

client/js/components/editor.js

@@ -5,15 +5,30 @@
 
 if($('#mk-editor').length === 1) {
 
-	require.config({paths: { "ace" : "/assets/js/ace"}});
+	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 scEditor = ace.edit("codeblock-editor");
+	let modelist = ace.require("ace/ext/modelist");
-	scEditor.setTheme("ace/theme/tomorrow_night");
-	scEditor.getSession().setMode("ace/mode/markdown");
-	scEditor.setOption('hScrollBarAlwaysVisible', false);
-	scEditor.setOption('wrap', true);
 
-	var 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);
+				});
+			}
+		}
+	});
 
 	var mde = new SimpleMDE({
 		autofocus: true,
@@ -115,8 +130,8 @@ if($('#mk-editor').length === 1) {
 				name: "code-block",
 				action: (editor) => {
 					$('#modal-editor-codeblock').slideDown(400, () => {
-						scEditor.resize();
+						codeEditor.resize();
-						scEditor.focus();
+						codeEditor.focus();
 					});
 				},
 				className: "fa fa-code",
@@ -167,3 +182,22 @@ $('.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);
+		}
+	});
+}

gulpfile.js

@@ -100,10 +100,8 @@ gulp.task("scripts-libs", function () {
 	return merge(
 
 		gulp.src(paths.scriptlibs)
-		.pipe(plumber())
 		.pipe(concat('libs.js'))
 		.pipe(uglify({ mangle: false }))
-		.pipe(plumber.stop())
 		.pipe(gulp.dest("./assets/js")),
 
 		gulp.src(paths.scriptlibs_acemodes)

package.json

@@ -112,7 +112,6 @@
     "mocha": "^3.0.2",
     "mocha-lcov-reporter": "^1.2.0",
     "nodemon": "^1.10.2",
-    "requirejs": "^2.3.1",
     "sticky-js": "^1.0.5",
     "twemoji-awesome": "^1.0.4",
     "vue": "^1.0.26"

views/modals/editor-codeblock.pug

@@ -8,9 +8,8 @@
 			.column.is-narrow
 				p.control
 					span.select
-						select(style={width: '300px'})
+						select(style={width: '300px'}, v-model='modeSelected')
-							option Plain text
+							option(v-for="mode in modes" v-bind:value='mode.name') {{ mode.caption }}
-							option C#
 			.column.is-narrow
 				a.button.is-warning.is-outlined Cancel
 			.column.is-narrow

views/pages/create.pug

@@ -18,6 +18,7 @@ block rootNavRight
 block content
 
 	#page-type-create(data-entrypath=pageData.meta.path)
-		textarea#mk-editor= pageData.markdown
+		.editor-area
+			textarea#mk-editor= pageData.markdown
 
 	include ../modals/create-discard.pug

views/pages/edit.pug

@@ -18,7 +18,8 @@ block rootNavRight
 block content
 
 	#page-type-edit(data-entrypath=pageData.meta.path)
-		textarea#mk-editor= pageData.markdown
+		.editor-area
+			textarea#mk-editor= pageData.markdown
 
 	include ../modals/edit-discard.pug
 	include ../modals/editor-link.pug