Improve behavior of formatting buttons

* Synthesize an input event to trigger a preview update.
* Slightly tweak the algorithm.

files/assets/js/formatting.js

@@ -1,57 +1,55 @@
-
+(function() {
-function makeBold(form) {
+	var event = InputEvent
-	var text = document.getElementById(form);
+		? function(type, attrs) {
-	var startIndex = text.selectionStart,
+			return new InputEvent(type, attrs);
-	endIndex = text.selectionEnd;
+		}
-	var selectedText = text.value.substring(startIndex, endIndex);
+		: function(type) {
-
+			e = document.createEvent('event');
-	var format = '**'
+			e.initEvent(type, false, false);
-
+			return e;
-	if (selectedText.includes('**')) {
+		};
-		text.value = selectedText.replace(/\*/g, '');
+	var escape = function(str) {
-	}
+		return str.replace(/./g, '[$&]').replace(/[\\^]|]]/g, '\\$&');
-	else if (selectedText.length == 0) {
+	};
-		text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex);
+	var wrap = function(cb) {
-	}
+		return function(id) {
-	else {
+			var form = document.getElementById(id);
-		text.value = text.value.substring(0, startIndex) + format + selectedText + format + text.value.substring(endIndex);
+			if (cb(form)) {
-	}
+				var e = event('input', { inputType: 'insertReplacementText' });
-}
+				form.dispatchEvent(e);
-
+			}
-function makeItalics(form) {
+		}
-	var text = document.getElementById(form);
+	};
-	var startIndex = text.selectionStart,
+	var select = function(cb) {
-	endIndex = text.selectionEnd;
+		return function(form) {
-	var selectedText = text.value.substring(startIndex, endIndex);
+			var begin = form.selectionStart, end = form.selectionEnd;
-
+			if (begin == end)
-	var format = '*'
+				return false;
-
+			form.value = form.value.substring(0, begin)
-	if (selectedText.includes('*')) {
+				+ cb(form.value.substring(begin, end))
-		text.value = selectedText.replace(/\*/g, '');
+				+ form.value.substring(end);
-	}
+			return true;
-	else if (selectedText.length == 0) {
+		};
-		text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex);
+	};
-	}
+	var enclose = function(mark) {
-	else {
+		var re = new RegExp(escape(mark) + '(\\S.*?\\S|\\S)' + escape(mark), 'g');
-		text.value = text.value.substring(0, startIndex) + format + selectedText + format + text.value.substring(endIndex);
+		return select(function(selection) {
-	}
+			var replacement = selection.replace(re, '$1');
-}
+			if (replacement.length == selection.length)
-
+				replacement = mark + replacement + mark;
-function makeQuote(form) {
+			return replacement;
-	var text = document.getElementById(form);
+		});
-	var startIndex = text.selectionStart,
+	};
-	endIndex = text.selectionEnd;
+	var quote = select(function(selection) {
-	var selectedText = text.value.substring(startIndex, endIndex);
+		var lines = selection.split('\n');
-
+		if (lines.some(function(line) { return /^\s*[^\s>]/.test(line) }))
-	var format = '>'
+			return '>' + lines.join('\n>');
-
+		else
-	if (selectedText.includes('>')) {
+			return lines.map(function(line) {
-		text.value = text.value.substring(0, startIndex) + selectedText.replace(/\>/g, '') + text.value.substring(endIndex);
+				return line.substring(line.indexOf('>') + 1);
-	}
+			}).join('\n');
-	else if (selectedText.length == 0) {
+	});
-		text.value = text.value.substring(0, startIndex) + selectedText + text.value.substring(endIndex);
+	makeItalics = wrap(enclose('*'));
-	}
+	makeBold = wrap(enclose('**'));
-	else {
+	makeQuote = wrap(quote);
-		text.value = text.value.substring(0, startIndex) + format + selectedText + text.value.substring(endIndex);
+})()
-	}
-}