feat: add regex to fix <br> (#1210)

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

## 🧰 Changes

Add another regex in the migrator to replace unclosed <br> tags to
closed <br/> tags

## 🧬 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-tags.test.ts

@@ -0,0 +1,47 @@
+import { migrate } from '../helpers';
+
+describe('migrating html tags', () => {
+  describe('br tags', () => {
+    it('converts unclosed br tags to self-closing', () => {
+      const md = `This is a line with a break<br>and another line.
+Multiple breaks<br><br>in sequence.
+Already closed<br />should remain unchanged.`;
+
+      const mdx = migrate(md);
+      expect(mdx).toMatchInlineSnapshot(`
+        "This is a line with a break<br />and another line.\\
+        Multiple breaks<br /><br />in sequence.\\
+        Already closed<br />should remain unchanged.
+        "
+      `);
+    });
+
+    it('handles br tags with attributes', () => {
+      const md = 'Line with styled break<br class="clear">and more text.';
+
+      const mdx = migrate(md);
+      expect(mdx).toMatchInlineSnapshot(`
+        "Line with styled break<br class="clear" />and more text.
+        "
+      `);
+    });
+
+    it('does not change br tags inside code blocks', () => {
+      const md = `Not a \`<br>\` tag.
+
+\`\`\`
+Also not a \`<br>\` tag.
+\`\`\``;
+
+      const mdx = migrate(md);
+      expect(mdx).toMatchInlineSnapshot(`
+        "Not a \`<br>\` tag.
+
+        \`\`\`
+        Also not a \`<br>\` tag.
+        \`\`\`
+        "
+      `);
+    });
+  });
+});

lib/migrate.ts

@@ -1,4 +1,5 @@
 import migrateCallouts from '../processor/transform/migrate-callouts';
+import migrateHtmlTags from '../processor/transform/migrate-html-tags';
 import migrateLinkReferences from '../processor/transform/migrate-link-references';
 
 import mdastV6 from './mdastV6';
@@ -8,7 +9,7 @@ const migrate = (doc: string, { rdmd }): string => {
   const ast = mdastV6(doc, { rdmd });
 
   return (
-    mdx(ast, { remarkTransformers: [migrateCallouts, migrateLinkReferences], file: doc })
+    mdx(ast, { remarkTransformers: [migrateCallouts, migrateLinkReferences, 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

processor/transform/migrate-html-tags.ts

@@ -0,0 +1,13 @@
+import type { Root } from 'mdast';
+
+import { visit } from 'unist-util-visit';
+
+// Add more visits to migrate other HTML tags here
+const migrateHtmlTags = () => (tree: Root) => {
+  // A common issue is that <br> tags are not properly closed
+  visit(tree, 'html', htmlNode => {
+    htmlNode.value = htmlNode.value.replaceAll(/<br(?!\s*\/>)([^>]*?)>/g, '<br$1 />');
+  });
+};
+
+export default migrateHtmlTags;