fixing up formatting bar to not be highlightable (and not have an outline

when the span is focused on), also tweaked the formatting options to
behave a little more smartly when text is currently highlighted when it is
invoked.

public/css/style.less

@@ -1,4 +1,3 @@
-
 .caret-left {
 	border-left: 0;
 	border-right: 4px solid black;
@@ -6,7 +5,14 @@
 	border-bottom: 4px solid transparent;
 }
 
-
+.no-select {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
 
 .pointer {
 	cursor: pointer;
@@ -586,3 +592,11 @@ footer.footer {
 a:hover {
   text-decoration:none;
 }
+
+.formatting-bar {
+	.no-select;
+
+	span:focus {
+		outline: none;
+	}
+}

public/src/app.js

@@ -280,26 +280,46 @@ var socket,
 		}, false);
 
 		// Posting
-		var	formattingBar = document.getElementById('formatting-bar'),
+		var	formattingBar = document.querySelector('.formatting-bar'),
 			postContentEl = document.getElementById('post_content');
 		jQuery('#post_window').slideToggle(0);
 		formattingBar.addEventListener('click', function(e) {
-			if (e.target.nodeName === 'I') {
-				switch(e.target.className) {
+			if (e.target.nodeName === 'I' || e.target.nodeName === 'SPAN') {
+				var	cursorEnd = postContentEl.value.length,
+					selectionStart = postContentEl.selectionStart,
+					selectionEnd = postContentEl.selectionEnd,
+					target;
+				if (e.target.nodeName === 'I') target = e.target;
+				else if (e.target.nodeName === 'SPAN') target = e.target.querySelector('i');
+				switch(target.className) {
 					case 'icon-bold':
-						var cursorEnd = postContentEl.value.length;
-						postContentEl.value = postContentEl.value + '**bolded text**';
-						postContentEl.selectionStart = cursorEnd+2;
-						postContentEl.selectionEnd = postContentEl.value.length - 2;
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '**bolded text**';
+							postContentEl.selectionStart = cursorEnd+2;
+							postContentEl.selectionEnd = postContentEl.value.length - 2;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '**' + postContentEl.value.slice(selectionStart, selectionEnd) + '**' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + 2;
+							postContentEl.selectionEnd = selectionEnd + 2;
+						}
 					break;
 					case 'icon-italic':
-						var cursorEnd = postContentEl.value.length;
-						postContentEl.value = postContentEl.value + '*italicised text*';
-						postContentEl.selectionStart = cursorEnd+1;
-						postContentEl.selectionEnd = postContentEl.value.length - 1;
+						if (selectionStart === selectionEnd) {
+							// Nothing selected
+							postContentEl.value = postContentEl.value + '*italicised text*';
+							postContentEl.selectionStart = cursorEnd+1;
+							postContentEl.selectionEnd = postContentEl.value.length - 1;
+						} else {
+							// Text selected
+							postContentEl.value = postContentEl.value.slice(0, selectionStart) + '*' + postContentEl.value.slice(selectionStart, selectionEnd) + '*' + postContentEl.value.slice(selectionEnd);
+							postContentEl.selectionStart = selectionStart + 1;
+							postContentEl.selectionEnd = selectionEnd + 1;
+						}
 					break;
 					case 'icon-list':
-						var cursorEnd = postContentEl.value.length;
+						// Nothing selected
 						postContentEl.value = postContentEl.value + "\n\n* list item";
 						postContentEl.selectionStart = cursorEnd+4;
 						postContentEl.selectionEnd = postContentEl.value.length;

public/templates/header.tpl

@@ -61,7 +61,7 @@
 			<div class="container">
 
 				<div class="btn-toolbar">
-					<div class="btn-group" id="formatting-bar">
+					<div class="btn-group formatting-bar">
 						<span class="btn btn-link" tabindex="-1"><i class="icon-bold"></i></span>
 						<span class="btn btn-link" tabindex="-1"><i class="icon-italic"></i></span>
 						<!-- <span class="btn btn-link" tabindex="-1"><i class="icon-font"></i></span> -->