Skip to content

Commit

Permalink
fix: tables (#938)
Browse files Browse the repository at this point in the history
| [![PR App][icn]][demo] | RM-9793 |
| :--------------------: | :-----: |

## 🧰 Changes

Changes how tables are saved as JSX.

The align attribute is stored on the `Table` component, as well as the
table cells:

```
<Table align={["center", "center"]}>
  <thead>
    <tr>
      <th style={{ textAlign: 'center' }}>Hi!</th>
      <th style={{ textAlign: 'center' }}>Hello!</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style={{ textAlign: 'center' }}>Bye!</td>
      <td style={{ textAlign: 'center' }}>Bye Bye!</td>
    </tr>
  </tbody>
</Table>
```

It also includes some cleanup of code that's not being used, namely
`html`, `esast`, and `hastFromHtml`. `hastFromHtml` was going to be used
for search indexing, but I think we're going to switch to much simpler
parsing of just the `hast`.

## 🧬 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
  • Loading branch information
kellyjosephprice authored Jul 12, 2024
1 parent 5dd4fa5 commit 1cbb175
Show file tree
Hide file tree
Showing 21 changed files with 357 additions and 160 deletions.
26 changes: 11 additions & 15 deletions __tests__/compilers/tables.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,38 +27,34 @@ describe('table compiler', () => {
const tree = mdast(markdown);

visit(tree, 'tableCell', cell => {
cell.children = [{ type: 'text', value: `${cell.children[0].value}\n\n🦉` }];
cell.children = [{ type: 'text', value: `${cell.children[0].value}\n🦉` }];
});

expect(mdx(tree)).toMatchInlineSnapshot(`
"<Table>
"<Table align={["center","center"]}>
<thead>
<tr>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
th 1
🦉
</th>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
th 2
🦉
</th>
</tr>
</thead>
<tbody>
<tr>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
cell 1
🦉
</th>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
cell 2
🦉
</th>
</tr>
Expand Down Expand Up @@ -88,28 +84,28 @@ describe('table compiler', () => {
});

expect(mdx(tree)).toMatchInlineSnapshot(`
"<Table>
"<Table align={["center","center"]}>
<thead>
<tr>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
* 1
* 2
* 3
</th>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
th 2
</th>
</tr>
</thead>
<tbody>
<tr>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
cell 1
</th>
<th style={{ align: "center" }}>
<th style={{ textAlign: "center" }}>
cell 2
</th>
</tr>
Expand Down
14 changes: 0 additions & 14 deletions __tests__/lib/hast.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,3 @@ describe('hast transformer', () => {
expect(hast(md, { components })).toStrictEqualExceptPosition(expected);
});
});

describe('hastFromHtml', () => {
it('parses html', () => {
const html = '<div><span>Nice</span></div>';
const tree = hastFromHtml(html);

// @ts-ignore
expect(tree.children[0].tagName).toBe('html');
// @ts-ignore
expect(tree.children[0].children[1].children[0].tagName).toBe('div');
// @ts-ignore
expect(tree.children[0].children[1].children[0].children[0].tagName).toBe('span');
});
});
13 changes: 0 additions & 13 deletions __tests__/lib/mdast.test.ts

This file was deleted.

21 changes: 21 additions & 0 deletions __tests__/lib/mdast/index.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { mdast } from '../../../lib';
import { readdir, readFile } from 'node:fs/promises';

describe('mdast transformer', async () => {
const cases = await Promise.all(
(await readdir(__dirname))
.filter(name => !name.match(/.[tj]sx?/))
.map(async dirname => {
return {
name: dirname,
mdx: await readFile(`${__dirname}/${dirname}/in.mdx`, { encoding: 'utf8' }),
ast: JSON.parse(await readFile(`${__dirname}/${dirname}/out.json`, { encoding: 'utf8' })),
};
}),
);

it.each(cases)('parses $name', ({ mdx, ast }) => {
// @ts-ignore
expect(mdast(mdx)).toStrictEqualExceptPosition(ast);
});
});
28 changes: 28 additions & 0 deletions __tests__/lib/mdast/tables/in.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<Table align={["center","center"]}>
<thead>
<tr>
<th>
Heading One
</th>

<th>
Heading Two
</th>
</tr>

</thead>

<tbody>
<tr>
<td>
* list item
* list item
</td>

<td>
:shrug:
</td>
</tr>

</tbody>
</Table>
109 changes: 109 additions & 0 deletions __tests__/lib/mdast/tables/out.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
{
"type": "root",
"children": [
{
"align": ["center", "center"],
"children": [
{
"children": [
{
"children": [
{
"children": [
{
"type": "text",
"value": "Heading One"
}
],
"type": "paragraph"
}
],
"type": "tableCell"
},
{
"children": [
{
"children": [
{
"type": "text",
"value": "Heading Two"
}
],
"type": "paragraph"
}
],
"type": "tableCell"
}
],
"type": "tableRow"
},
{
"children": [
{
"children": [
{
"children": [
{
"checked": null,
"children": [
{
"children": [
{
"type": "text",
"value": "list item"
}
],
"type": "paragraph"
}
],
"spread": false,
"type": "listItem"
},
{
"checked": null,
"children": [
{
"children": [
{
"type": "text",
"value": "list item"
}
],
"type": "paragraph"
}
],
"spread": false,
"type": "listItem"
}
],
"ordered": false,
"spread": false,
"start": null,
"type": "list"
}
],
"type": "tableCell"
},
{
"children": [
{
"children": [
{
"name": "shrug",
"type": "gemoji",
"value": "🤷"
}
],
"type": "paragraph"
}
],
"type": "tableCell"
}
],
"type": "tableRow"
}
],
"type": "tableau"
}
]
}
1 change: 1 addition & 0 deletions __tests__/lib/mdast/variables/in.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Hello, {user.name}
72 changes: 72 additions & 0 deletions __tests__/lib/mdast/variables/out.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
{
"children": [
{
"children": [
{
"position": {
"end": {
"column": 8,
"line": 1,
"offset": 7
},
"start": {
"column": 1,
"line": 1,
"offset": 0
}
},
"type": "text",
"value": "Hello, "
},
{
"data": {
"hName": "Variable",
"hProperties": {
"name": "name"
}
},
"position": {
"end": {
"column": 19,
"line": 1,
"offset": 18
},
"start": {
"column": 8,
"line": 1,
"offset": 7
}
},
"type": "readme-variable",
"value": "{user.name}"
}
],
"position": {
"end": {
"column": 19,
"line": 1,
"offset": 18
},
"start": {
"column": 1,
"line": 1,
"offset": 0
}
},
"type": "paragraph"
}
],
"position": {
"end": {
"column": 1,
"line": 2,
"offset": 19
},
"start": {
"column": 1,
"line": 1,
"offset": 0
}
},
"type": "root"
}
21 changes: 1 addition & 20 deletions __tests__/transformers/readme-components.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ describe('Readme Components Transformer', () => {
{ md: '<Code />', type: 'code' },
{ md: '<CodeTabs />', type: 'code-tabs' },
{ md: '<Image />', type: 'image-block' },
{ md: '<Table />', type: 'table' },
{ md: '<Table />', type: 'tableau' },
{ md: '<TutorialTile />', type: 'tutorial-tile' },
];

Expand Down Expand Up @@ -52,25 +52,6 @@ Second
md: `![](http://placekitten.com/600/200)`,
mdx: `<Image src="http://placekitten.com/600/200" />`,
},
table: {
md: `
| h1 | h2 |
| --- | --- |
| a1 | a2 |
`,
// @todo there's text nodes that get inserted between the td's. Pretty sure
// they'd get filtered out by rehype, but lets keep the tests easy.
mdx: `
<Table>
<tr>
<td>h1</td><td>h2</td>
</tr>
<tr>
<td>a1</td><td>a2</td>
</tr>
</Table>
`,
},
};
it.each(Object.entries(docs))('matches the equivalent markdown for %s', (type, { md, mdx }) => {
let mdTree = mdast(md);
Expand Down
1 change: 1 addition & 0 deletions components/Table/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';

interface Props extends JSX.IntrinsicAttributes {
align: ('left' | 'center' | 'right')[];
children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
}

Expand Down
1 change: 1 addition & 0 deletions enums.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export enum NodeTypes {
i = 'i',
imageBlock = 'image-block',
reusableContent = 'reusable-content',
tableau = 'tableau',
tutorialTile = 'tutorial-tile',
variable = 'readme-variable',
}
Loading

0 comments on commit 1cbb175

Please sign in to comment.