Markdown editor improvements

2016-09-10 22:53:21 -04:00
parent 492bb9efa6
commit 97602b51c8
160 changed files with 558 additions and 123 deletions
--- a/client/js/app.js
+++ b/client/js/app.js
@@ -8,7 +8,7 @@ jQuery( document ).ready(function( $ ) {

 	$('a').smoothScroll({
 		speed: 400,
-		offset: -20
+		offset: -70
 	});

 	var sticky = new Sticky('.stickyscroll');
@@ -33,25 +33,6 @@ jQuery( document ).ready(function( $ ) {
 		});
 	}

-	// ====================================
-	// Markdown Editor
-	// ====================================
-
-	if($('#mk-editor').length === 1) {
-
-		var mde = new SimpleMDE({
-			autofocus: true,
-			autoDownloadFontAwesome: false,
-			element: $("#mk-editor").get(0),
-			hideIcons: ['heading', 'quote'],
-			placeholder: 'Enter Markdown formatted content here...',
-			showIcons: ['strikethrough', 'heading-1', 'heading-2', 'heading-3', 'code', 'table', 'horizontal-rule'],
-			spellChecker: false,
-			status: false
-		});
-
-	}
-
 	// ====================================
 	// Establish WebSocket connection
 	// ====================================
--- a/client/js/components/editor.js
+++ b/client/js/components/editor.js
@@ -0,0 +1,169 @@
+
+// ====================================
+// Markdown Editor
+// ====================================
+
+if($('#mk-editor').length === 1) {
+
+	require.config({paths: { "ace" : "/assets/js/ace"}});
+
+	let scEditor = ace.edit("codeblock-editor");
+	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");
+
+	var mde = new SimpleMDE({
+		autofocus: true,
+		autoDownloadFontAwesome: false,
+		element: $("#mk-editor").get(0),
+		placeholder: 'Enter Markdown formatted content here...',
+		spellChecker: false,
+		status: false,
+		toolbar: [{
+				name: "bold",
+				action: SimpleMDE.toggleBold,
+				className: "fa fa-bold",
+				title: "Bold",
+			},
+			{
+				name: "italic",
+				action: SimpleMDE.toggleItalic,
+				className: "fa fa-italic",
+				title: "Italic",
+			},
+			{
+				name: "strikethrough",
+				action: SimpleMDE.toggleStrikethrough,
+				className: "fa fa-strikethrough",
+				title: "Strikethrough",
+			},
+			'|',
+			{
+				name: "heading-1",
+				action: SimpleMDE.toggleHeading1,
+				className: "fa fa-header fa-header-x fa-header-1",
+				title: "Big Heading",
+			},
+			{
+				name: "heading-2",
+				action: SimpleMDE.toggleHeading2,
+				className: "fa fa-header fa-header-x fa-header-2",
+				title: "Medium Heading",
+			},
+			{
+				name: "heading-3",
+				action: SimpleMDE.toggleHeading3,
+				className: "fa fa-header fa-header-x fa-header-3",
+				title: "Small Heading",
+			},
+			{
+				name: "quote",
+				action: SimpleMDE.toggleBlockquote,
+				className: "fa fa-quote-left",
+				title: "Quote",
+			},
+			'|',
+			{
+				name: "unordered-list",
+				action: SimpleMDE.toggleUnorderedList,
+				className: "fa fa-list-ul",
+				title: "Bullet List",
+			},
+			{
+				name: "ordered-list",
+				action: SimpleMDE.toggleOrderedList,
+				className: "fa fa-list-ol",
+				title: "Numbered List",
+			},
+			'|',
+			{
+				name: "link",
+				action: (editor) => {
+					$('#modal-editor-link').slideToggle();
+				},
+				className: "fa fa-link",
+				title: "Insert Link",
+			},
+			{
+				name: "image",
+				action: (editor) => {
+					//todo
+				},
+				className: "fa fa-image",
+				title: "Insert Image",
+			},
+			'|',
+			{
+				name: "inline-code",
+				action: (editor) => {
+					if(!editor.codemirror.doc.somethingSelected()) {
+						return alerts.pushError('Invalid selection','You must select at least 1 character first.');
+					}
+					let curSel = editor.codemirror.doc.getSelections();
+					curSel = _.map(curSel, (s) => {
+						return '`' + s + '`';
+					});
+					editor.codemirror.doc.replaceSelections(curSel);
+				},
+				className: "fa fa-terminal",
+				title: "Inline Code",
+			},
+			{
+				name: "code-block",
+				action: (editor) => {
+					$('#modal-editor-codeblock').slideDown(400, () => {
+						scEditor.resize();
+						scEditor.focus();
+					});
+				},
+				className: "fa fa-code",
+				title: "Code Block",
+			},
+			'|',
+			{
+				name: "table",
+				action: (editor) => {
+					//todo
+				},
+				className: "fa fa-table",
+				title: "Insert Table",
+			},
+			{
+				name: "horizontal-rule",
+				action: SimpleMDE.drawHorizontalRule,
+				className: "fa fa-minus",
+				title: "Horizontal Rule",
+			}
+		],
+		shortcuts: {
+			"toggleBlockquote": null,
+			"toggleFullScreen": null
+		}
+	});
+
+}
+
+//-> Save
+
+$('.btn-edit-save').on('click', (ev) => {
+
+	$.ajax(window.location.href, {
+		data: {
+			markdown: mde.value()
+		},
+		dataType: 'json',
+		method: 'PUT'
+	}).then((rData, rStatus, rXHR) => {
+		if(rData.ok) {
+			window.location.assign('/' + pageEntryPath);
+		} else {
+			alerts.pushError('Something went wrong', rData.error);
+		}
+	}, (rXHR, rStatus, err) => {
+		alerts.pushError('Something went wrong', 'Save operation failed.');
+	});
+
+});
--- a/client/js/pages/create.js
+++ b/client/js/pages/create.js
@@ -1,32 +1,14 @@

 if($('#page-type-create').length) {

+	let pageEntryPath = $('#page-type-create').data('entrypath');
+
 	//-> Discard

 	$('.btn-create-discard').on('click', (ev) => {
 		$('#modal-create-discard').toggleClass('is-active');
 	});

-	//-> Save
-
-	$('.btn-create-save').on('click', (ev) => {
-
-		$.ajax(window.location.href, {
-			data: {
-				markdown: mde.value()
-			},
-			dataType: 'json',
-			method: 'PUT'
-		}).then((rData, rStatus, rXHR) => {
-			if(rData.ok) {
-				window.location.assign('/' + $('#page-type-create').data('entrypath'));
-			} else {
-				alerts.pushError('Something went wrong', rData.error);
-			}
-		}, (rXHR, rStatus, err) => {
-			alerts.pushError('Something went wrong', 'Save operation failed.');
-		});
-
-	});
+	//=include ../components/editor.js

 }
--- a/client/js/pages/edit.js
+++ b/client/js/pages/edit.js
@@ -1,8 +1,7 @@

 if($('#page-type-edit').length) {

-	$('.editor-toolbar').attr('data-margin-top', $('#header').height());
-	var editorToolbarSticky = new Sticky('.editor-toolbar');
+	let pageEntryPath = $('#page-type-edit').data('entrypath');

 	//-> Discard

@@ -10,26 +9,6 @@ if($('#page-type-edit').length) {
 		$('#modal-edit-discard').toggleClass('is-active');
 	});

-	//-> Save
-
-	$('.btn-edit-save').on('click', (ev) => {
-
-		$.ajax(window.location.href, {
-			data: {
-				markdown: mde.value()
-			},
-			dataType: 'json',
-			method: 'PUT'
-		}).then((rData, rStatus, rXHR) => {
-			if(rData.ok) {
-				window.location.assign('/' + $('#page-type-edit').data('entrypath'));
-			} else {
-				alerts.pushError('Something went wrong', rData.error);
-			}
-		}, (rXHR, rStatus, err) => {
-			alerts.pushError('Something went wrong', 'Save operation failed.');
-		});
-
-	});
+	//=include ../components/editor.js

 }
--- a/client/scss/components/_editor.scss
+++ b/client/scss/components/_editor.scss
@@ -1,25 +1,61 @@

 .editor-toolbar {
 	z-index: 2;
-	background-color: #FFF;
+	background-color: rgba(0,0,0,0.65);
 	border: none;
 	border-top-left-radius: 0;
 	border-top-right-radius: 0;
-	opacity: 0.9;
+	opacity: 1;
+	position: fixed;
+	top: 52px;
+	left: 0;
+	width: 100%;

 	&:hover {
 		opacity: 1;
 	}

+	a {
+		color: #FFF !important;
+
+		&.active, &:hover {
+			background-color: rgba(0,0,0,0.5);
+			border-color: #888;
+		}
+
+	}
+
+	i.separator {
+		margin-top: 5px;
+		border-left-color: #000;
+		border-right-color: #AAA;
+	}
+
 }

 .CodeMirror {
 	border-left: none;
 	border-right: none;
+	padding-top: 52px;
 }

-.editor-toolbar i.separator {
-	margin-top: 5px;
+.CodeMirror .CodeMirror-code .cm-url {
+	color: #00ACC1;
+}
+.CodeMirror .CodeMirror-code .cm-header-1 {
+	color: #635c8c;
+	font-size: 2em;
+	font-weight: 400;
+}
+.CodeMirror .CodeMirror-code .cm-header-2 {
+	color: #222324;
+	font-size: 1.75em;
+	font-weight: 300;
+}
+.CodeMirror .CodeMirror-code .cm-header-3 {
+	color: #222324;
+	font-size: 1.5em;
+	font-weight: 300;
 }

 .editor-toolbar .fa {
@@ -28,13 +64,43 @@

 .ace-container {
 	position: relative;
+}
+
+#page-type-source .ace-container {
 	min-height: 95vh;
 }

-#source-display {
+#modal-editor-codeblock .ace-container {
+	height: 400px;
+}
+
+#source-display, #codeblock-editor {
 	position: absolute;
 	top: 0;
 	left: 0;
 	bottom: 0;
 	right: 0;
+}
+
+.modallayer {
+	position: fixed;
+	top: 100px;
+	width: 100%;
+	background-color: rgba(255,255,255,0.95);
+	border-bottom: 1px solid $grey-light;
+	z-index: 6;
+	padding: 20px;
+	border-bottom: 1px solid #CCC;
+	box-shadow: 0 2px 3px rgba(17,17,17,.1);
+	display: none;
+
+	> h3, .column > h3 {
+		color: $grey-dark;
+		font-size: 24px;
+		font-weight: 300;
+	}
+
+}
+
+.modallayer-content {
 }
--- a/client/scss/layout/_base.scss
+++ b/client/scss/layout/_base.scss
@@ -5,6 +5,10 @@ html {
  box-sizing: inherit;
 }

+#root {
+	padding-top: 52px;
+}
+
 //$family-sans-serif: "Roboto", "Helvetica", "Arial", sans-serif;
 $family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

--- a/client/scss/layout/_header.scss
+++ b/client/scss/layout/_header.scss
@@ -1,4 +1,12 @@

+#header-container {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	z-index: 4;
+}
+
 #header {
 	z-index: 5;
 }