fix: mdx placedholder replacement

Author: maxprilutskiy

.changeset/sour-news-add.md

@@ -0,0 +1,5 @@
+---
+"lingo.dev": patch
+---
+
+mdx placeholder replacement

packages/cli/src/cli/loaders/mdx2/code-placeholder.spec.ts

@@ -20,22 +20,21 @@ describe("mdx code placeholder loader", () => {
       frontmatter: {},
       content: sampleMdxContent,
     });
-
     // expect two placeholders
     const placeholderKeys = Object.keys(result.codePlaceholders);
-    const placeholder1 = `__PLACEHOLDER_${md5("inline")}__`;
-    const placeholder2 = `__PLACEHOLDER_${md5('console.log("foo");')}__`;
+    const placeholder1 = `__PLACEHOLDER_${md5("`inline`")}__`;
+    const placeholder2 = `__PLACEHOLDER_${md5('```js\nconsole.log("foo");\n```')}__`;
     expect(placeholderKeys).toEqual([placeholder1, placeholder2]);
 
     // mapping values should equal original code snippets
-    const expectedInline = "inline";
-    const expectedBlock = 'console.log("foo");';
+    const expectedInline = "`inline`";
+    const expectedBlock = '```js\nconsole.log("foo");\n```';
     expect(Object.values(result.codePlaceholders).sort()).toEqual(
       [expectedBlock, expectedInline].sort(),
     );
 
     // content should have placeholders substituted exactly
-    const expectedContent = `Paragraph with some \`${placeholder1}\` code.\n\n\`\`\`js\n${placeholder2}\n\`\`\``;
+    const expectedContent = `Paragraph with some ${placeholder1} code.\n\n${placeholder2}`;
     expect(result.content.trim()).toBe(expectedContent.trim());
   });
 

packages/cli/src/cli/loaders/mdx2/code-placeholder.ts

@@ -35,34 +35,64 @@ function extractCodePlaceholders(content: string): {
   content: string;
   codePlaceholders: Record<string, string>;
 } {
-  const ast = parseMdast(content);
-  const placeholderableElements: (keyof RootContentMap)[] = [
-    "code",
-    "inlineCode",
-  ];
+  let shouldSearchForPlaceholders = true;
   let finalContent = content;
   const codePlaceholders: Record<string, string> = {};
 
-  traverseMdast(ast, (_node) => {
-    if (!placeholderableElements.includes(_node.type as any)) {
-      return;
-    }
-    const node = _node as Code | InlineCode;
-    const nodeContent = node.value;
+  while (shouldSearchForPlaceholders) {
+    const ast = parseMdast(finalContent);
 
-    const nodeContentHash = md5(nodeContent);
-    const placeholderId = `__PLACEHOLDER_${nodeContentHash}__`;
+    traverseMdast(ast, (_node) => {
+      shouldSearchForPlaceholders = false;
 
-    const nodeContentStart = node.position?.start.offset;
-    const nodeContentEnd = node.position?.end.offset;
+      if (_node.type === "code") {
+        const node = _node as Code;
 
-    if (!nodeContentStart || !nodeContentEnd) {
-      return;
-    }
+        const nodeContentStartLine = node.position?.start.line;
+        const nodeContentEndLine = node.position?.end.line;
 
-    codePlaceholders[placeholderId] = nodeContent;
-    finalContent = finalContent.split(nodeContent).join(placeholderId);
-  });
+        if (!nodeContentStartLine || !nodeContentEndLine) {
+          return;
+        }
+
+        const nodeContentPreStartLine = nodeContentStartLine - 1;
+        const nodeContentPostEndLine = nodeContentEndLine + 1;
+
+        const nodeContent = finalContent
+          .split("\n")
+          .slice(nodeContentPreStartLine, nodeContentPostEndLine)
+          .join("\n");
+
+        const nodeContentHash = md5(nodeContent);
+        const placeholderId = `__PLACEHOLDER_${nodeContentHash}__`;
+
+        codePlaceholders[placeholderId] = nodeContent;
+        finalContent = finalContent.replace(nodeContent, placeholderId);
+        shouldSearchForPlaceholders = true;
+      } else if (_node.type === "inlineCode") {
+        const node = _node as InlineCode;
+
+        const nodeContentStartIndex = node.position?.start.offset;
+        const nodeContentEndIndex = node.position?.end.offset;
+
+        if (!nodeContentStartIndex || !nodeContentEndIndex) {
+          return;
+        }
+
+        const nodeContent = finalContent.slice(
+          nodeContentStartIndex,
+          nodeContentEndIndex,
+        );
+
+        const nodeContentHash = md5(nodeContent);
+        const placeholderId = `__PLACEHOLDER_${nodeContentHash}__`;
+
+        codePlaceholders[placeholderId] = nodeContent;
+        finalContent = finalContent.replace(nodeContent, placeholderId);
+        shouldSearchForPlaceholders = true;
+      }
+    });
+  }
 
   return {
     content: finalContent,