fix(builder): combine characters together in all expressions (#2080)

* Combine characters together in all expressions

Call `tryCombineChars` in `buildExpression`

* update screenshots, exclude 'coverage' from lint

* update MathML snapshots

* don't combine two 'mbin's or two 'mord's

* update screenshots

* update screenshots

Co-authored-by: ylemkimon <y@ylem.kim>
Co-authored-by: Kevin Barabash <kevinb@khanacademy.org>

src/buildCommon.js

@@ -243,6 +243,15 @@ const canCombine = (prev: SymbolNode, next: SymbolNode) => {
         return false;
     }
 
+    // If prev and next both are just "mbin"s or "mord"s we don't combine them
+    // so that the proper spacing can be preserved.
+    if (prev.classes.length === 1) {
+        const cls = prev.classes[0];
+        if (cls === "mbin" || cls === "mord") {
+            return false;
+        }
+    }
+
     for (const style in prev.style) {
         if (prev.style.hasOwnProperty(style)
             && prev.style[style] !== next.style[style]) {
@@ -261,7 +270,7 @@ const canCombine = (prev: SymbolNode, next: SymbolNode) => {
 };
 
 /**
- * Combine consequetive domTree.symbolNodes into a single symbolNode.
+ * Combine consecutive domTree.symbolNodes into a single symbolNode.
  * Note: this function mutates the argument.
  */
 const tryCombineChars = (chars: HtmlDomNode[]): HtmlDomNode[] => {

src/buildHTML.js

@@ -74,6 +74,9 @@ export const buildExpression = function(
         }
     }
 
+    // Combine consecutive domTree.symbolNodes into a single symbolNode.
+    buildCommon.tryCombineChars(groups);
+
     // If `expression` is a partial group, let the parent handle spacings
     // to avoid processing groups multiple times.
     if (!isRealGroup) {

src/functions/op.js

@@ -93,8 +93,7 @@ export const htmlBuilder: HtmlBuilderSupSub<"op"> = (grp, options) => {
             base = inner[0];
             base.classes[0] = "mop"; // replace old mclass
         } else {
-            base = buildCommon.makeSpan(
-                ["mop"], buildCommon.tryCombineChars(inner), options);
+            base = buildCommon.makeSpan(["mop"], inner, options);
         }
     } else {
         // Otherwise, this is a text operator. Build the text from the

src/functions/text.js

@@ -63,8 +63,7 @@ defineFunction({
     htmlBuilder(group, options) {
         const newOptions = optionsWithFont(group, options);
         const inner = html.buildExpression(group.body, newOptions, true);
-        return buildCommon.makeSpan(
-            ["mord", "text"], buildCommon.tryCombineChars(inner), newOptions);
+        return buildCommon.makeSpan(["mord", "text"], inner, newOptions);
     },
     mathmlBuilder(group, options) {
         const newOptions = optionsWithFont(group, options);

test/__snapshots__/katex-spec.js.snap

@@ -413,22 +413,7 @@ exports[`A font parser \\boldsymbol should inherit mbin/mrel from argument 1`] =
             "skew": 0,
             "style": {
             },
-            "text": "+",
-            "width": 0.89444
-          },
-          {
-            "classes": [
-              "mord",
-              "mathbf"
-            ],
-            "depth": 0.13333,
-            "height": 0.63333,
-            "italic": 0,
-            "maxFontSize": 1,
-            "skew": 0,
-            "style": {
-            },
-            "text": "+",
+            "text": "++",
             "width": 0.89444
           }
         ],
@@ -489,21 +474,6 @@ exports[`A font parser \\boldsymbol should inherit mbin/mrel from argument 1`] =
         "attributes": {
         },
         "children": [
-          {
-            "classes": [
-              "mord",
-              "boldsymbol"
-            ],
-            "depth": 0,
-            "height": 0.44444,
-            "italic": 0,
-            "maxFontSize": 1,
-            "skew": 0,
-            "style": {
-            },
-            "text": "x",
-            "width": 0.65903
-          },
           {
             "classes": [
               "mord",
@@ -511,28 +481,13 @@ exports[`A font parser \\boldsymbol should inherit mbin/mrel from argument 1`] =
             ],
             "depth": 0.19444,
             "height": 0.44444,
-            "italic": 0.03704,
-            "maxFontSize": 1,
-            "skew": 0,
-            "style": {
-            },
-            "text": "y",
-            "width": 0.59028
-          },
-          {
-            "classes": [
-              "mord",
-              "boldsymbol"
-            ],
-            "depth": 0,
-            "height": 0.44444,
             "italic": 0.04213,
             "maxFontSize": 1,
             "skew": 0,
             "style": {
             },
-            "text": "z",
-            "width": 0.55509
+            "text": "xyz",
+            "width": 0.65903
           }
         ],
         "classes": [
@@ -1158,10 +1113,7 @@ exports[`Extending katex by new fonts and symbols Add new font class to new exte
                   <span class="sizing reset-size6 size3 mtight">
                     <span class="mord mtight">
                       <span class="mord mockEasternArabicFont-Regular mtight">
-                        ۱
-                      </span>
-                      <span class="mord mockEasternArabicFont-Regular mtight">
-                        ۱
+                        ۱۱
                       </span>
                     </span>
                   </span>