Stack Exchange HTML math editor

HTML_math_editor.user.js

// ==UserScript==
// @name        Stack Exchange HTML math editor
// @author      Camil Staps <info@camilstaps.nl>
// @namespace   nl.camilstaps.htmlmath
// @description Adds a math bar to the Stack Exchange editor
// @include     /^https?:\/\/(.*\.)?stackoverflow\.com/.*$/
// @include     /^https?:\/\/(.*\.)?serverfault\.com/.*$/
// @include     /^https?:\/\/(.*\.)?superuser\.com/.*$/
// @include     /^https?:\/\/(.*\.)?stackexchange\.com/.*$/
// @include     /^https?:\/\/(.*\.)?askubuntu\.com/.*$/
// @include     /^https?:\/\/(.*\.)?mathoverflow\.com/.*$/
// @include     /^https?:\/\/discuss\.area51\.stackexchange\.com/.*$/
// @include     /^https?:\/\/stackapps\.com/.*$/
// @version     1.0.0
// @grant       none
// ==/UserScript==

var script = document.createElement('script');
script.setAttribute('src', 'https://unpkg.com/stack-exchange-html-math-editor/math_editor.js');
document.head.appendChild(script);

math_editor.js

var insertOrSurroundWith = function(field, prefix, suffix) {
	return function() {
		if (document.selection) {
			field.focus();
			var sel = document.selection.createRange();
			sel.text = prefix + sel.text + suffix;
		} else if (field.selectionStart || field.selectionStart == '0') {
			var start = field.selectionStart;
			var end = field.selectionEnd;

			field.value = field.value.substring(0, start)
				+ prefix + field.value.substring(start, end) + suffix
				+ field.value.substring(end, field.value.length);

			field.selectionStart = start + prefix.length;
			field.selectionEnd = end + prefix.length;
		} else {
			field.value += prefix + suffix;
		}
		field.onpaste();
		field.focus();
	};
};

var insert = function(field, text) {
	return function() {
		if (document.selection) {
			field.focus();
			var sel = document.selection.createRange();
			sel.text = text;
		} else if (field.selectionStart || field.selectionStart == '0') {
			var start = field.selectionStart;
			var end = field.selectionEnd;

			field.value = field.value.substring(0, start)
				+ text + field.value.substring(end, field.value.length);

			field.selectionStart = start + text.length;
			field.selectionEnd = start + text.length;
		} else {
			field.value += text;
		}
		field.onpaste();
		field.focus();
	};
};

var addButton = function(row, label, title, func) {
	var button = $('<li></li>')
		.addClass('wmd-button')
		.attr('title', title)
		.css('padding', '4px')
		.css('height', 'inherit')
		.html(label)
		.click(func);

	row.append(button);
};

var addSpacer = function(row) {
	var spacer = $('<li></li>')
		.addClass('wmd-spacer')
		.css('height', 'inherit');

	row.append(spacer);
};

var addMathEditor = function(id) {
	var bar = $('#wmd-button-bar' + (typeof id == 'undefined' ? '' : '-' + id));
	var row = bar.find('.wmd-button-row');

	if (row.length == 0)
		return;

	var bar = row.parent();
	var field = bar.parent().find('.wmd-input')[0];

	clearInterval(mathEditorTimer);

	var button_math = $('<li></li>')
	.attr('id', 'wmd-math-button')
	.addClass('wmd-button')
	.attr('title', 'Show math toolbar')
	.css('left', '400px')
	.html('&radic;x')
	.click(function(){
		bar.css('height', 'auto');

		var newRow = function() {
			return $('<ul></ul>')
				.addClass('wmd-button-row')
				.css('height', 24)
				.css('justify-content', 'flex-start')
				.appendTo(bar);
		}

		var rows = [newRow(), newRow(), newRow()];

		addButton(rows[0], '&ne;', 'Not equal to', insert(field, '&ne;'));
		addButton(rows[0], '&le;', 'Less than or equal to', insert(field, '&le;'));
		addButton(rows[0], '&ge;', 'Greater than or equal to', insert(field, '&ge;'));

		addSpacer(rows[0]);

		addButton(rows[0], 'x<sup>2</sup>', 'Superscript', insertOrSurroundWith(field, '<sup>', '</sup>'));
		addButton(rows[0], 'x<sub>2</sub>', 'Subscript', insertOrSurroundWith(field, '<sub>', '</sub>'));

		addSpacer(rows[0]);

		addButton(rows[0], '&sum;', 'Sum', insert(field, '&sum;'));
		addButton(rows[0], '&prod;', 'Product', insert(field, '&prod;'));

		addSpacer(rows[0]);

		addButton(rows[0], '&naturals;', 'Naturals', insert(field, '&naturals;'));
		addButton(rows[0], '&integers;', 'Integers', insert(field, '&integers;'));
		addButton(rows[0], '&rationals;', 'Rationals', insert(field, '&rationals;'));
		addButton(rows[0], '&reals;', 'Reals', insert(field, '&reals;'));

		addSpacer(rows[0]);

		addButton(rows[0], '&mid;', 'Divides', insert(field, '&mid;'));
		addButton(rows[0], '&nmid;', 'Does not divide', insert(field, '&nmid;'));
		addButton(rows[0], '&radic;', 'Radic', insert(field, '&radic;'));
		addButton(rows[0], '&infin;', 'Infinity', insert(field, '&infin;'));

		addButton(rows[1], '&empty;', 'Empty set', insert(field, '&empty;'));
		addButton(rows[1], '&isin;', 'Element of', insert(field, '&isin;'));
		addButton(rows[1], '&notin;', 'Not an element of', insert(field, '&notin;'));
		addButton(rows[1], '&cap;', 'Intersection', insert(field, '&cap;'));
		addButton(rows[1], '&cup;', 'Union', insert(field, '&cup;'));
		addButton(rows[1], '&sube;', 'Subset of', insert(field, '&sube;'));
		addButton(rows[1], '&supe;', 'Superset of', insert(field, '&supe;'));
		addButton(rows[1], '&sub;', 'Strict subset of', insert(field, '&sub;'));
		addButton(rows[1], '&sup;', 'Strict superset of', insert(field, '&sup;'));
		addButton(rows[1], '&nsube;', 'Not a subset of', insert(field, '&nsube;'));
		addButton(rows[1], '&nsupe;', 'Not a superset of', insert(field, '&nsupe;'));
		addButton(rows[1], '&nsub;', 'Not a strict subset of', insert(field, '&nsub;'));
		addButton(rows[1], '&nsup;', 'Not a strict superset of', insert(field, '&nsup;'));

		addSpacer(rows[1]);

		addButton(rows[1], '&forall;', 'For all', insert(field, '&forall;'));
		addButton(rows[1], '&exist;', 'There exists', insert(field, '&exist;'));
		addButton(rows[1], '&nexist;', 'There does not exist', insert(field, '&nexist;'));

		addButton(rows[2], '&not;', 'Negation', insert(field, '&not;'));
		addButton(rows[2], '&rarr;', 'Implication', insert(field, '&rarr;'));
		addButton(rows[2], '&harr;', 'Equivalence', insert(field, '&harr;'));
		addButton(rows[2], '&and;', 'Conjunction', insert(field, '&and;'));
		addButton(rows[2], '&or;', 'Disjunction', insert(field, '&or;'));

		addSpacer(rows[2]);

		addButton(rows[2], '&equiv;', 'Equivalent to', insert(field, '&equiv;'));
		addButton(rows[2], '&nequiv;', 'Not equivalent to', insert(field, '&nequiv;'));

		addSpacer(rows[2]);

		addButton(rows[2], '&vdash;', 'Entails', insert(field, '&vdash;'));
		addButton(rows[2], '&vDash;', 'Tautology', insert(field, '&vDash;'));
		addButton(rows[2], '&top;', 'Down tee', insert(field, '&top;'));
		addButton(rows[2], '&bot;', 'Up tee', insert(field, '&bot;'));

		addSpacer(rows[2]);

		addButton(rows[2], '&square;', 'Necessarily', insert(field, '&square;'));
		addButton(rows[2], '&loz;', 'Possibly', insert(field, '&loz;'));

		var spacer = $('<li></li>').addClass('wmd-spacer wmd-spacer-max');
		rows[2].append(spacer);
		var credits = $('<li></li>')
		.addClass('wmd-button')
		.css('padding', '0 3em 0 0');
		var link = $('<a></a>')
		.attr('href', 'https://gist.github.com/camilstaps/40b62910f0206ef97d50822014870884/')
		.attr('title', 'See source code')
		.attr('target', '_blank')
		.text('source');
		credits.append(link);
		rows[2].append(credits);

		$(this).remove();

		field.focus();
	});

	var spacer = $('<li></li>')
	.addClass('wmd-spacer');

	var maxspacer = row.find('.wmd-spacer-max');

	spacer.insertBefore(maxspacer);
	button_math.insertBefore(maxspacer);
};

var bar = $('.wmd-button-bar');

if (bar.length)
	var mathEditorTimer = setInterval(addMathEditor, 100);

$('a.edit-post').click(function(){
	var id = /\/posts\/(\d+)\/edit/.exec($(this).attr('href'))[1];
	mathEditorTimer = setInterval(addMathEditor, 100, id);
});

package.json

{
  "name": "stack-exchange-html-math-editor",
  "version": "1.0.0",
  "description": "Stack Exchange HTML math editor",
  "main": "HTML_math_editor.user.js",
  "repository": {
    "type": "git",
    "url": "git+https://gist.github.com/40b62910f0206ef97d50822014870884.git"
  },
  "keywords": [
    "StackExchange",
    "Stack",
    "Exchange",
    "userscript",
    "HTML",
    "math",
    "mathematics",
    "symbols"
  ],
  "author": "",
  "license": "UNLICENSED",
  "homepage": "https://gist.github.com/40b62910f0206ef97d50822014870884"
}