Clean up the newChildren code

server/rehype-hljs-var.ts

@@ -100,10 +100,10 @@ export const rehypeVarInHLJS = (
         }
 
         let hljsSpanValue;
-        if ((el as Element).tagName == "span") {
-          hljsSpanValue = (el.children[0] as Text).value;
+        if ((el.children[i] as Element).tagName == "span") {
+          hljsSpanValue = (el.children[i].children[0] as Text).value;
         } else {
-          hljsSpanValue = el.value;
+          hljsSpanValue = el.children[i].value;
         }
 
         // This is an hljs span with only the placeholder as its child.
@@ -122,11 +122,6 @@ export const rehypeVarInHLJS = (
           continue;
         }
 
-        // TODO resume here. Clean this up so there's only one newChildren.push
-        // call. We need to call newChildren.push for placeholders and
-        // non-placeholders, depending on where the placeholders fall. We need
-        // to iterate through both placeholders and non-placeholders.
-
         // The element's text includes one or more Vars among other content, so
         // we need to replace the span with a series of spans separated by
         // Vars. Advance through the value we're splitting. If the current
@@ -144,62 +139,44 @@ export const rehypeVarInHLJS = (
 
         let valueIdx = 0;
         while (valueIdx < hljsSpanValue.length) {
+          // The current index is in a placeholder, so add the original Var
+          // component to newChildren.
           if (placeholderIndices.has(valueIdx)) {
             const placeholder = valueIdx + placeholderIndices.get(valueIdx);
             valueIdx += placeholder.length;
             newChildren.push(placeholdersToVars[placeholderValue]);
             continue;
           }
-        }
-
-        // If there is content before the first Var, separate it into a new hljs
-        // span.
-        if (placeholders[0].index > 0) {
+          // The current index is outside a placeholder, so assemble a text or
+          // span node and push that to newChildren.
+          let textVal = "";
+          while (
+            !placeholderIndices.has(valueIdx) &&
+            valueIdx < hljsSpanValue.length
+          ) {
+            textVal += hljsSpanValue[valueIdx];
+            valueIdx++;
+          }
+          if (el.children[i].type == "text") {
+            newChildren.push({
+              type: "text",
+              value: textVal,
+            });
+            continue;
+          }
           newChildren.push({
             tagName: "span",
             type: "element",
-            properties: el.properties,
+            properties: el.children[i].properties,
             children: [
               {
                 type: "text",
-                value: hljsSpanValue.substring(
-                  lastIndex,
-                  placeholders[0].index
-                ),
+                value: textVal,
               },
             ],
           });
-          lastIndex = placeholders[0].index;
         }
-        placeholders.forEach((ph, i) => {
-          const placeholderValue = ph[0];
-          newChildren.push(placeholdersToVars[placeholderValue]);
-          lastIndex += placeholderValue.length;
-
-          // Check if there is some non-Var text between either (a) this and the
-          // next Var or (b) between this Var and the end of the content. If
-          // so, add another span and advance the last index.
-          let nextIndex = 0;
-          if (i < placeholders.length - 1) {
-            nextIndex = placeholders[i + 1].index;
-          } else if (i == placeholders.length - 1) {
-            nextIndex = hljsSpanValue.length;
-          }
-          if (lastIndex < nextIndex) {
-            newChildren.push({
-              tagName: "span",
-              type: "element",
-              properties: el.properties,
-              children: [
-                {
-                  type: "text",
-                  value: hljsSpanValue.substring(lastIndex, nextIndex),
-                },
-              ],
-            });
-            lastIndex = nextIndex;
-          }
-        });
+
         // Delete the current span and replace it with the new children.
         (parent.children as Array<MdxJsxFlowElement | Element>).splice(
           index,