fix: migrating html with backticks

__tests__/migration/html-blocks.test.ts

@@ -0,0 +1,39 @@
+import { migrate } from '../helpers';
+
+describe('migrating html blocks', () => {
+  it('correctly escapes back ticks', () => {
+    const md = `
+[block:html]
+{
+  "html": "<a href=\\"example.com\\">\`example.com\`</a>"
+}
+[/block]
+`;
+
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "<HTMLBlock>{\`
+      <a href="example.com">${'\\`example.com\\`'}</a>
+      \`}</HTMLBlock>
+      "
+    `);
+  });
+
+  it('does not escape already escaped backticks', () => {
+    const md = `
+[block:html]
+{
+  "html": "<a href=\\"example.com\\">${'\\\\`example.com\\\\`'}</a>"
+}
+[/block]
+`;
+
+    const mdx = migrate(md);
+    expect(mdx).toMatchInlineSnapshot(`
+      "<HTMLBlock>{\`
+      <a href="example.com">${'\\`example.com\\`'}</a>
+      \`}</HTMLBlock>
+      "
+    `);
+  });
+});

processor/compile/compatibility.ts

@@ -1,8 +1,5 @@
 import { Html, Image, Node } from 'mdast';
-import { fromHtml } from 'hast-util-from-html';
 import { toMarkdown } from 'mdast-util-to-markdown';
-import { toXast } from 'hast-util-to-xast';
-import { toXml } from 'xast-util-to-xml';
 import { NodeTypes } from '../../enums';
 import { formatProps } from '../utils';
 

processor/transform/readme-to-mdx.ts

@@ -92,6 +92,7 @@ const readmeToMdx = (): Transform => tree => {
     const html = node.value;
     const isScriptOrStyleTag = [!!html.match(/^<(?:style|script)/i), !!html.match(/<\/(?:style|script)>$/i)];
     if (!isScriptOrStyleTag.includes(true)) return;
+
     parent.children.splice(index, 1, {
       type: 'html-block',
       children: [{ type: 'text', value: html }],

processor/utils.ts

@@ -115,7 +115,7 @@ export const isMDXElement = (node: Node): node is MdxJsxFlowElement | MdxJsxText
  */
 export const isMDXEsm = (node: Node): node is MdxjsEsm => {
   return node.type === 'mdxjsEsm';
-}
+};
 
 /**
  * Takes an HTML string and formats it for display in the editor. Removes leading/trailing newlines
@@ -153,7 +153,7 @@ export const formatHTML = (html: string): string => {
  */
 export const reformatHTML = (html: string, indent: number = 2): string => {
   // Remove leading/trailing newlines
-  const cleaned = html.replace(/^\s*\n|\n\s*$/g, '');
+  const cleaned = html.replace(/^\s*\n|\n\s*$/g, '').replaceAll(/(?<!\\(\\\\)*)`/g, '\\`');
 
   // // Create a tab/indent with the specified number of spaces
   // const tab = ' '.repeat(indent);