Insert Code Block feature completed

assets/js/app.js

@@ -1 +1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,a){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=a;else if(document.selection&&document.selection.createRange){e.select();var o=document.selection.createRange();o.collapse(!0),o.moveEnd("character",a),o.moveStart("character",t),o.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-70});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;alertsData&&_.forEach(alertsData,function(e){t.push(e)});var a=io(ioHost);if(jQuery(document).ready(function(e){if(e("#search-input").length){e("#search-input").focus(),Vue.transition("slide",{enterClass:"slideInDown",leaveClass:"fadeOutUp"}),e(".searchresults").css("display","block");var t=new Vue({el:"#header-container",data:{searchq:"",searchres:[],searchsuggest:[],searchload:0,searchactive:!1,searchmoveidx:0,searchmovekey:"",searchmovearr:[]},watch:{searchq:function(e,o){t.searchmoveidx=0,e.length>=3?(t.searchactive=!0,t.searchload++,a.emit("search",{terms:e},function(e){t.searchres=e.match,t.searchsuggest=e.suggest,t.searchmovearr=_.concat([],t.searchres,t.searchsuggest),t.searchload>0&&t.searchload--})):(t.searchactive=!1,t.searchres=[],t.searchsuggest=[],t.searchmovearr=[],t.searchload=0)},searchmoveidx:function(e,a){e>0?t.searchmovekey=t.searchmovearr[e-1].document?"res."+t.searchmovearr[e-1].document.entryPath:"sug."+t.searchmovearr[e-1]:t.searchmovekey=""}},methods:{useSuggestion:function(e){t.searchq=e},closeSearch:function(){t.searchq=""},moveSelectSearch:function(){if(!(t.searchmoveidx<1)){var e=t.searchmoveidx-1;t.searchmovearr[e].document?window.location.assign("/"+t.searchmovearr[e].document.entryPath):t.searchq=t.searchmovearr[e]}},moveDownSearch:function(){t.searchmoveidx<t.searchmovearr.length&&t.searchmoveidx++},moveUpSearch:function(){t.searchmoveidx>0&&t.searchmoveidx--}}});e("main").on("click",t.closeSearch)}}),e("#page-type-view").length&&!function(){var a="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",o=a+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(o),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),a.length+1,o.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var a=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(a)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+a))}),""!==a&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(a,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(a),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,a.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(o){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===a||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,a,o){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,a,o){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var o;!function(){var a=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var a=ace.edit("codeblock-editor");a.setTheme("ace/theme/tomorrow_night"),a.getSession().setMode("ace/mode/markdown"),a.setOption("fontSize","14px"),a.setOption("hScrollBarAlwaysVisible",!1),a.setOption("wrap",!0);var n=ace.require("ace/ext/modelist");new Vue({el:"#modal-editor-codeblock",data:{modes:n.modesByName,modeSelecLine truncated
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function setInputSelection(e,t,a){if(e.focus(),"undefined"!=typeof e.selectionStart)e.selectionStart=t,e.selectionEnd=a;else if(document.selection&&document.selection.createRange){e.select();var o=document.selection.createRange();o.collapse(!0),o.moveEnd("character",a),o.moveStart("character",t),o.select()}}function makeSafePath(e){var t=_.split(_.trim(e),"/");return t=_.map(t,function(e){return _.kebabCase(_.deburr(_.trim(e)))}),_.join(_.filter(t,function(e){return!_.isEmpty(e)}),"/")}var _createClass=function(){function e(e,t){for(var a=0;a<t.length;a++){var o=t[a];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,a,o){return a&&e(t.prototype,a),o&&e(t,o),t}}();jQuery(document).ready(function(e){e("a").smoothScroll({speed:400,offset:-70});new Sticky(".stickyscroll");e(window).bind("beforeunload",function(){e("#notifload").addClass("active")}),e(document).ajaxSend(function(){e("#notifload").addClass("active")}).ajaxComplete(function(){e("#notifload").removeClass("active")});var t=new Alerts;alertsData&&_.forEach(alertsData,function(e){t.push(e)});var a=io(ioHost);if(jQuery(document).ready(function(e){if(e("#search-input").length){e("#search-input").focus(),Vue.transition("slide",{enterClass:"slideInDown",leaveClass:"fadeOutUp"}),e(".searchresults").css("display","block");var t=new Vue({el:"#header-container",data:{searchq:"",searchres:[],searchsuggest:[],searchload:0,searchactive:!1,searchmoveidx:0,searchmovekey:"",searchmovearr:[]},watch:{searchq:function(e,o){t.searchmoveidx=0,e.length>=3?(t.searchactive=!0,t.searchload++,a.emit("search",{terms:e},function(e){t.searchres=e.match,t.searchsuggest=e.suggest,t.searchmovearr=_.concat([],t.searchres,t.searchsuggest),t.searchload>0&&t.searchload--})):(t.searchactive=!1,t.searchres=[],t.searchsuggest=[],t.searchmovearr=[],t.searchload=0)},searchmoveidx:function(e,a){e>0?t.searchmovekey=t.searchmovearr[e-1].document?"res."+t.searchmovearr[e-1].document.entryPath:"sug."+t.searchmovearr[e-1]:t.searchmovekey=""}},methods:{useSuggestion:function(e){t.searchq=e},closeSearch:function(){t.searchq=""},moveSelectSearch:function(){if(!(t.searchmoveidx<1)){var e=t.searchmoveidx-1;t.searchmovearr[e].document?window.location.assign("/"+t.searchmovearr[e].document.entryPath):t.searchq=t.searchmovearr[e]}},moveDownSearch:function(){t.searchmoveidx<t.searchmovearr.length&&t.searchmoveidx++},moveUpSearch:function(){t.searchmoveidx>0&&t.searchmoveidx--}}});e("main").on("click",t.closeSearch)}}),e("#page-type-view").length&&!function(){var a="home"!==e("#page-type-view").data("entrypath")?e("#page-type-view").data("entrypath"):"",o=a+"/new-page";e(".btn-create-prompt").on("click",function(t){e("#txt-create-prompt").val(o),e("#modal-create-prompt").toggleClass("is-active"),setInputSelection(e("#txt-create-prompt").get(0),a.length+1,o.length),e("#txt-create-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-create-prompt").on("keypress",function(t){13===t.which&&e(".btn-create-go").trigger("click")}),e(".btn-create-go").on("click",function(t){var a=makeSafePath(e("#txt-create-prompt").val());_.isEmpty(a)?e("#txt-create-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-create-prompt").parent().addClass("is-loading"),window.location.assign("/create/"+a))}),""!==a&&e(".btn-move-prompt").removeClass("is-hidden");var n=_.lastIndexOf(a,"/")+1;e(".btn-move-prompt").on("click",function(t){e("#txt-move-prompt").val(a),e("#modal-move-prompt").toggleClass("is-active"),setInputSelection(e("#txt-move-prompt").get(0),n,a.length),e("#txt-move-prompt").removeClass("is-danger").next().addClass("is-hidden")}),e("#txt-move-prompt").on("keypress",function(t){13===t.which&&e(".btn-move-go").trigger("click")}),e(".btn-move-go").on("click",function(o){var n=makeSafePath(e("#txt-move-prompt").val());_.isEmpty(n)||n===a||"home"===n?e("#txt-move-prompt").addClass("is-danger").next().removeClass("is-hidden"):(e("#txt-move-prompt").parent().addClass("is-loading"),e.ajax(window.location.href,{data:{move:n},dataType:"json",method:"PUT"}).then(function(e,a,o){e.ok?window.location.assign("/"+n):t.pushError("Something went wrong",e.error)},function(e,a,o){t.pushError("Something went wrong","Save operation failed.")}))})}(),e("#page-type-create").length){var o;!function(){var a=e("#page-type-create").data("entrypath");e(".btn-create-discard").on("click",function(t){e("#modal-create-discard").toggleClass("is-active")}),1===e("#mk-editor").length&&!function(){var a=!1,n=ace.edit("codeblock-editor");n.setTheme("ace/theme/tomorrow_night"),n.getSession().setMode("ace/mode/markdown"),n.setOption("fontSize","14px"),n.setOption("hScrollBarAlwaysVisible",!1),n.setOption("wrap",!0);var i=ace.require("ace/ext/modelist"),r=new Vue({el:"#modal-editor-codeblock",data:{modes:i.modesByName,moLine truncated

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",
@@ -181,23 +177,4 @@ $('.btn-edit-save').on('click', (ev) => {
 		alerts.pushError('Something went wrong', 'Save operation failed.');
 	});
 
-});
+});
-
-// 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