fix: migrating magic block tables with breaks (#976)

[![PR App][icn]][demo] | Ref CX-1112 :-------------------:|:----------: ## 🧰 Changes Fixes breaks in magic block tables. ## 🧬 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
readmeio · Sep 27, 2024 · b5092f2 · b5092f2
1 parent 26b9b8d
commit b5092f2
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 0 deletions.
diff --git a/__tests__/compilers/compatability.test.tsx b/__tests__/compilers/compatability.test.tsx
@@ -330,4 +330,66 @@ This is an image: <img src="http://example.com/#\\>" >
       "
     `);
   });
+
+  it('compiles parameter magic blocks with breaks to jsx', () => {
+    const md = `
+[block:parameters]
+${JSON.stringify(
+  {
+    data: {
+      'h-0': 'Term',
+      'h-1': 'Definition',
+      '0-0': 'Events',
+      '0-1': 'Pseudo-list:  \n● One  \n● Two',
+    },
+    cols: 2,
+    rows: 1,
+    align: ['left', 'left'],
+  },
+  null,
+  2,
+)}
+[/block]
+`;
+
+    const rmdx = mdx(rdmd.mdast(md));
+    expect(rmdx).toMatchInlineSnapshot(`
+      "<Table align={["left","left"]}>
+        <thead>
+          <tr>
+            <th style={{ textAlign: "left" }}>
+              Term
+            </th>
+
+            <th style={{ textAlign: "left" }}>
+              Definition
+            </th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr>
+            <td style={{ textAlign: "left" }}>
+              Events
+            </td>
+
+            <td style={{ textAlign: "left" }}>
+              Pseudo-list:
+
+
+
+
+              ● One
+
+
+
+
+              ● Two
+            </td>
+          </tr>
+        </tbody>
+      </Table>
+      "
+    `);
+  });
 });
diff --git a/processor/transform/tables-to-jsx.ts b/processor/transform/tables-to-jsx.ts
@@ -28,6 +28,12 @@ const visitor = (table: Table, index: number, parent: Parents) => {
         ? (cell.children[0] as unknown as Paragraph).children[0]
         : cell.children[0];
 
+    // @note: Compatibility with RDMD. Ideally, I'd put this in a separate
+    // transformer, but then there'd be some duplication.
+    visit(cell, 'break', (_, index, parent) => {
+      parent.children.splice(index, 1, { type: 'text', value: '\n' });
+    });
+
     if (!phrasing(content)) {
       hasFlowContent = true;
       return EXIT;