feat: migrate contents inside comments (#1229)

[![PR App][icn]][demo] | Fix RM-XYZ
:-------------------:|:----------:

## 🧰 Changes

In the migrate function, recursively call the base migrate on contents
inside comment blocks

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].


[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

Author: eaglethrost

__tests__/migration/html-comments.test.ts

@@ -5,13 +5,13 @@ describe('migrating html comments', () => {
     const md = `
 <!--
 
- 
+
 
 ## Walkthrough
 
 [block:html]
 {
-  "html": "<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>"
+  "html": "<div style=\\"position: relative; padding-bottom: 56.25%; height: 0;\\"><iframe src=\\"https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18\\" frameborder=\\"0\\" webkitallowfullscreen mozallowfullscreen allowfullscreen style=\\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\\"></iframe></div>"
 }
 [/block]
 
@@ -25,20 +25,41 @@ describe('migrating html comments', () => {
     expect(mdx).toMatchInlineSnapshot(`
       "{/*
 
-       
+
 
       ## Walkthrough
 
+      <HTMLBlock>{\`
+      <div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
+      \`}</HTMLBlock>
 
-      [block:html]
-      {
-        "html": "<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/53dd194717bb4965a8e838b95715ff18" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>"
-      }
-      [/block]
+      <br />
 
 
+      */}
+      "
+    `);
+  });
+
+  it('converts markdown within html comments', () => {
+    const md = `
+<!--
+
+### Heading inside comment
+
+- a **list** item
+
+-->
+`;
+
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "{/*
+
+      ### Heading inside comment
+
+      * a **list** item
 
-      <br />
 
       */}
       "

lib/migrate.ts

@@ -4,18 +4,23 @@ import migrateLinkReferences from '../processor/transform/migrate-link-reference
 
 import mdastV6 from './mdastV6';
 import mdx from './mdx';
+import migrateComments from './utils/migrateComments';
 
-const migrate = (doc: string, { rdmd }): string => {
+const migrateDoc = (doc: string, { rdmd }): string => {
   const ast = mdastV6(doc, { rdmd });
 
-  return (
-    mdx(ast, { remarkTransformers: [migrateCallouts, [migrateLinkReferences, { rdmd }], migrateHtmlTags], file: doc })
-      .replaceAll(/ /g, ' ')
-      // @note: I'm not sure what's happening, but I think mdx is converting an
-      // 'a' to 'a' as a means of escaping it. I think this helps with
-      // parsing weird cases.
-      .replaceAll(/a/g, 'a')
-  );
+  return mdx(ast, { remarkTransformers: [migrateCallouts, [migrateLinkReferences, { rdmd }], migrateHtmlTags], file: doc })
+    .replaceAll(/ /g, ' ')
+    // @note: I'm not sure what's happening, but I think mdx is converting an
+    // 'a' to 'a' as a means of escaping it. I think this helps with
+    // parsing weird cases.
+    .replaceAll(/a/g, 'a');
+};
+
+const migrate = (doc: string, opts): string => {
+  const migratedDoc = migrateDoc(doc, opts);
+  const migratedDocAndComments = migrateComments(migratedDoc, migrateDoc, opts);
+  return migratedDocAndComments;
 };
 
 export default migrate;

lib/utils/migrateComments.ts

@@ -0,0 +1,32 @@
+const COMMENT_BLOCK_REGEX = /{\/\*([\s\S]*?)\*\/}/g;
+
+const migrateComments = (doc: string, migrateDoc: (doc: string, opts) => string, opts): string => {
+  return doc.replace(COMMENT_BLOCK_REGEX, (match, contents: string) => {
+    // Preserve leading and trailing whitespace
+    const leadingWhitespace = contents.match(/^\s*/)?.[0] ?? '';
+    const trailingWhitespace = contents.match(/\s*$/)?.[0] ?? '';
+    const inner = contents.slice(leadingWhitespace.length, contents.length - trailingWhitespace.length);
+
+    // Skip empty comments
+    if (!inner.trim()) return match;
+
+    // Compile the inner content through the migration pipeline
+    let compiled: string;
+    try {
+      compiled = migrateDoc(inner, opts);
+      // Trim trailing whitespace only if inner content had no newlines
+      if (!/\r|\n/.test(inner)) {
+        compiled = compiled.trimEnd();
+      }
+    } catch {
+      return match;
+    }
+
+    // Recursively process any nested comments
+    const processed = migrateComments(compiled, migrateDoc, opts);
+
+    return `{/*${leadingWhitespace}${processed}${trailingWhitespace}*/}`;
+  });
+};
+
+export default migrateComments;