Add spacing functions

Summary: Add \qquad, \quad, \;, etc. Fixes T7

Test Plan:
Add some spacings. Make sure that they look reasonable widths.
Especially, if you add a space (`\space`), make sure that it doesn't disappear
because the spacing disappears.

Reviewers: spicyj

Reviewed By: spicyj

Maniphest Tasks: T7

Differential Revision: http://phabricator.benalpert.com/D46

MJLite.js

@@ -66,6 +66,20 @@ var buildGroup = function(group, prev) {
         return makeSpan("mord mfrac", [numer, mid, denom]);
     } else if (group.type === "color") {
         return makeSpan("mord " + group.value.color, buildExpression(group.value.value));
+    } else if (group.type === "spacing") {
+        if (group.value === "\\ " || group.value === "\\space") {
+            return makeSpan("mord mspace", textit(group.value));
+        } else {
+            var spacingClassMap = {
+                "\\qquad": "qquad",
+                "\\quad": "quad",
+                "\\;": "thickspace",
+                "\\:": "mediumspace",
+                "\\,": "thinspace"
+            };
+
+            return makeSpan("mord mspace " + spacingClassMap[group.value]);
+        }
     } else {
         console.log("Unknown type:", group.type);
     }
@@ -83,7 +97,9 @@ var charLookup = {
     "\\geq": "\u2265",
     "\\neq": "\u2260",
     "\\nleq": "\u2270",
-    "\\ngeq": "\u2271"
+    "\\ngeq": "\u2271",
+    "\\ ": "\u00a0",
+    "\\space": "\u00a0"
 };
 
 var textit = function(value) {

lexer.js

@@ -20,6 +20,8 @@ var funcs = [
     'leq', 'geq', 'neq', 'nleq', 'ngeq',
     // Open/close symbols
     'lvert', 'rvert',
+    // Spacing symbols
+    'qquad', 'quad', ' ', 'space', ',', ':', ';',
     // Colors
     'blue', 'orange', 'pink', 'red', 'green', 'gray', 'purple',
     // Other functions
@@ -52,6 +54,10 @@ Lexer.prototype.lex = function() {
 
     if ((match = this._input.match(anyFunc))) {
         this.doMatch(match[0]);
+
+        if (match[1] === " ") {
+            return "space";
+        }
         return match[1];
     } else {
         for (var i = 0; i < normals.length; i++) {

parser.jison

@@ -62,6 +62,18 @@ func
         {$$ = [{type: 'rel', value: yytext}];}
     | 'ngeq'
         {$$ = [{type: 'rel', value: yytext}];}
+    | 'qquad'
+        {$$ = [{type: 'spacing', value: yytext}];}
+    | 'quad'
+        {$$ = [{type: 'spacing', value: yytext}];}
+    | 'space'
+        {$$ = [{type: 'spacing', value: yytext}];}
+    | ','
+        {$$ = [{type: 'spacing', value: yytext}];}
+    | ':'
+        {$$ = [{type: 'spacing', value: yytext}];}
+    | ';'
+        {$$ = [{type: 'spacing', value: yytext}];}
     | 'blue' group
         {$$ = [{type: 'color', value: {color: 'blue', value: $2}}];}
     | 'orange' group

static/style.css

@@ -115,6 +115,31 @@ input {
     vertical-align: bottom;
 }
 
+.mspace {
+    display: inline-block;
+}
+
+.mspace.thinspace {
+    width: 0.16667em;
+}
+
+.mspace.mediumspace {
+    width: 0.22222em;
+}
+
+.mspace.thickspace {
+    width: 0.27778em;
+}
+
+.mspace.quad {
+    width: 1em;
+}
+
+.mspace.qquad {
+    width: 2em;
+}
+
+
 .mord.blue { color: #6495ed; }
 .mord.orange { color: #ffa500; }
 .mord.pink { color: #ff00af; }