Code Block editor fixes + Image editor UI

client/js/components/editor-codeblock.js

@@ -32,7 +32,7 @@ let vueCodeBlock = new Vue({
 			if(mde.codemirror.doc.somethingSelected()) {
 				mde.codemirror.execCommand('singleSelection');
 			}
-			let codeBlockText = '```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```';
+			let codeBlockText = '\n```' + vueCodeBlock.modeSelected + '\n' + codeEditor.getValue() + '\n```\n';
 
 			mde.codemirror.doc.replaceSelection(codeBlockText);
 			vueCodeBlock.cancel();

client/js/components/editor.js

@@ -88,11 +88,19 @@ if($('#mk-editor').length === 1) {
 			{
 				name: "image",
 				action: (editor) => {
-					//todo
+					$('#modal-editor-image').slideDown();
 				},
 				className: "fa fa-image",
 				title: "Insert Image",
 			},
+			{
+				name: "file",
+				action: (editor) => {
+					//todo
+				},
+				className: "fa fa-file-text-o",
+				title: "Insert File",
+			},
 			'|',
 			{
 				name: "inline-code",

package.json

@@ -77,6 +77,7 @@
     "remove-markdown": "^0.1.0",
     "search-index": "^0.8.15",
     "serve-favicon": "^2.3.0",
+    "sharp": "^0.16.0",
     "simplemde": "^1.11.2",
     "snyk": "^1.19.1",
     "socket.io": "^1.4.8",

views/modals/editor-codeblock.pug

@@ -11,9 +11,11 @@
 						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(v-on:click="cancel") Cancel
-			.column.is-narrow
-				a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
+				.control.is-grouped
+					p.control
+						a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
+					p.control
+						a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Code Block
 
 		.ace-container(style={'border-radius':'5px'})
 			#codeblock-editor

views/modals/editor-image.pug

@@ -0,0 +1,35 @@
+
+.modallayer#modal-editor-image
+	.modallayer-content
+		
+		.columns
+			.column
+				h3 Image
+			.column.is-narrow
+				.control.is-grouped
+					p.control
+						a.button.is-dark.is-outlined(v-on:click="cancel")
+							span.icon.is-small: i.fa.fa-folder
+							span New Folder
+					.control.has-addons
+						a.button.is-info.is-outlined(v-on:click="cancel")
+							span.icon.is-small: i.fa.fa-upload
+							span Upload Image
+						a.button.is-info.is-outlined(v-on:click="cancel")
+							span.icon.is-small: i.fa.fa-download
+							span Fetch from URL
+			.column.is-narrow
+				.control.is-grouped
+					p.control
+						a.button.is-warning.is-outlined(v-on:click="cancel") Cancel
+					p.control
+						a.button.is-primary.is-outlined(v-on:click="insertCode") Insert Image
+
+		.columns
+			.column.is-one-quarter(style={'max-width':'350px'})
+				.box
+					| Folders
+			.column
+				| Files
+
+		

views/pages/edit.pug

@@ -23,4 +23,5 @@ block content
 
 	include ../modals/edit-discard.pug
 	include ../modals/editor-link.pug
+	include ../modals/editor-image.pug
 	include ../modals/editor-codeblock.pug