feat: tables

__tests__/browser/markdown.test.js

@@ -19,6 +19,7 @@ describe('visual regression tests', () => {
       // 'headings',
       // 'images',
       // 'lists',
+      'mdxComponents',
       // 'tables',
       // 'tablesTests',
       'codeBlockTests',

__tests__/compilers/tables.test.js

@@ -1,99 +1,40 @@
 import { mdast, mdx } from '../../index';
+import { visit } from 'unist-util-visit';
 
-describe.skip('table compiler', () => {
-  it('converts to markdown syntax', () => {
+describe('table compiler', () => {
+  it('writes to markdown syntax', () => {
     const markdown = `
-[block:parameters]
-{
-  "data": {
-    "h-0": "th 1",
-    "h-1": "th 2",
-    "0-0": "cell 1",
-    "0-1": "cell 2"
-  },
-  "cols": 2,
-  "rows": 1,
-  "align": [
-    "center",
-    "center"
-  ]
-}
-[/block]
+|  th 1  |  th 2  |
+| :----: | :----: |
+| cell 1 | cell 2 |
 `;
 
     expect(mdx(mdast(markdown))).toBe(
       `|  th 1  |  th 2  |
 | :----: | :----: |
 | cell 1 | cell 2 |
-`
+`,
     );
   });
 
-  it('saves to magic block syntax if there are breaks', () => {
-    const markdown = `
-[block:parameters]
-{
-  "data": {
-    "h-0": "th 1",
-    "h-1": "th 2",
-    "0-0": "cell 1\\nextra line",
-    "0-1": "cell 2"
-  },
-  "cols": 2,
-  "rows": 1,
-  "align": [
-    "center",
-    "center"
-  ]
-}
-[/block]
-`;
-
-    expect(mdx(mdast(markdown))).toBe(`[block:parameters]
-{
-  "data": {
-    "h-0": "th 1",
-    "h-1": "th 2",
-    "0-0": "cell 1  \\nextra line",
-    "0-1": "cell 2"
-  },
-  "cols": 2,
-  "rows": 1,
-  "align": [
-    "center",
-    "center"
-  ]
-}
-[/block]
-`);
-  });
-
-  it('converts to magic block syntax if there are breaks', () => {
+  it.skip('saves to MDX if there are breaks', () => {
     const markdown = `
 |  th 1  |  th 2  |
 | :----: | :----: |
 | cell 1 | cell 2 |
 `;
-    const nodes = mdast(markdown);
-    const cell = nodes.children[0].children[1].children[0];
-    cell.children = [...cell.children, { type: 'break' }, { type: 'text', value: 'extra line' }];
 
-    expect(mdx(nodes)).toBe(`[block:parameters]
-{
-  "data": {
-    "h-0": "th 1",
-    "h-1": "th 2",
-    "0-0": "cell 1  \\nextra line",
-    "0-1": "cell 2"
-  },
-  "cols": 2,
-  "rows": 1,
-  "align": [
-    "center",
-    "center"
-  ]
-}
-[/block]
-`);
+    const tree = mdast(markdown);
+
+    visit(tree, 'tableCell', cell => {
+      cell.children.push({ type: 'break' }, { type: 'text', value: 'inserted' });
+    });
+
+    expect(mdx(tree)).toMatchInlineSnapshot(`
+      "|  th 1 inserted  |  th 2 inserted  |
+      | :-------------: | :-------------: |
+      | cell 1 inserted | cell 2 inserted |
+      "
+    `);
   });
 });

components/Table/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+interface Props extends JSX.IntrinsicAttributes {
+  align?: ('left' | 'center' | 'right')[];
+  children: [React.ReactElement<HTMLTableCaptionElement | HTMLTableSectionElement | HTMLTableRowElement>];
+  rows?: any[][];
+}
+
+interface TableContentProps {
+  align?: Props['align'];
+  rows: Props['rows'];
+}
+
+const TableContent = ({ rows, align = [] }: TableContentProps) => {
+  const [head, ...body] = rows;
+
+  return (
+    <>
+      <thead>
+        <tr>
+          {head.map((cell, index) => (
+            <th style={{ textAlign: align[index] || 'center' }}>{cell}</th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {body.map(row => (
+          <tr>
+            {row.map((cell, index) => (
+              <td style={{ textAlign: align[index] || 'center' }}>{cell}</td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </>
+  );
+};
+
+const Table = (props: Props) => {
+  const { children, rows, align } = props;
+
+  return (
+    <div className="rdmd-table">
+      <div className="rdmd-table-inner">
+        <table>{rows ? <TableContent align={align} rows={rows} /> : children}</table>
+      </div>
+    </div>
+  );
+};
+
+export default Table;

docs/mdx-components.mdx

@@ -0,0 +1,23 @@
+## Tables
+
+If you have some tabular data, it may be easier to write it with mdx:
+
+```jsx MDX
+export const table = [
+  ['Left', 'Center', 'Right'],
+  ['L0', '**bold**', '$1600'],
+  ['L1', '`code`', '$12'],
+  ['L2', '_italic_', '$1'],
+];
+
+<Table align={['left', 'center', 'right']} rows={table} />;
+```
+
+export const table = [
+  ['Left', 'Center', 'Right'],
+  ['L0', '**bold**', '$1600'],
+  ['L1', '`code`', '$12'],
+  ['L2', '_italic_', '$1'],
+];
+
+<Table align={['left', 'center', 'right']} rows={table} />

docs/tables.md

@@ -1,8 +1,9 @@
 ---
-title: "Tables"
+title: 'Tables'
 category: 5fdf7610134322007389a6ed
 hidden: false
 ---
+
 ## Syntax
 
     | Left |  Center  | Right |
@@ -20,7 +21,7 @@ hidden: false
 This example also shows off custom theming!
 
 | Left |  Center  | Right |
-|:-----|:--------:|------:|
+| :--- | :------: | ----: |
 | L0   | **bold** | $1600 |
 | L1   |  `code`  |   $12 |
 | L2   | _italic_ |    $1 |
@@ -35,25 +36,32 @@ Tables have been simplified to mirror a more standard implementation. We've also
   --table-head: #5b1c9f;
   --table-head-text: white;
   --table-stripe: #f0eaf7;
-  --table-edges: rgba(34, 5, 64, .5);
+  --table-edges: rgba(34, 5, 64, 0.5);
   --table-row: white;
 }
 ```
+
 ```scss CSS Selectors
 /* Table
  */
-.markdown-body .rdmd-table table {}
+.markdown-body .rdmd-table table {
+}
 
 /* Rows
  */
-.markdown-body .rdmd-table tr {}
-.markdown-body .rdmd-table thead tr {} /* header row's background */
-.markdown-body .rdmd-table tr:nth-child(2n) {} /* striped rows' background */
+.markdown-body .rdmd-table tr {
+}
+.markdown-body .rdmd-table thead tr {
+} /* header row's background */
+.markdown-body .rdmd-table tr:nth-child(2n) {
+} /* striped rows' background */
 
 /* Cells
  */
-.markdown-body .rdmd-table th {}
-.markdown-body .rdmd-table td {}
+.markdown-body .rdmd-table th {
+}
+.markdown-body .rdmd-table td {
+}
 ```
 
 <style>

errors/mdx-syntax-error.ts

@@ -0,0 +1,26 @@
+import { VFileMessage } from 'vfile-message';
+
+export default class MdxSyntaxError extends SyntaxError {
+  original: VFileMessage = null;
+
+  constructor(error: VFileMessage, doc: string) {
+    const { message, line, column, url } = error;
+
+    const messages = [
+      `Uh oh! We ran into a syntax error at { line: ${line}, column: ${column} }, please see this url for more details: ${url}`,
+    ];
+
+    if (typeof line !== 'undefined') {
+      messages.push(doc.split('\n')[line - 1]);
+
+      if (typeof column !== 'undefined') {
+        const prefix = new Array(column).map(() => '').join(' ');
+        messages.push(`${prefix}↑ ${message}`);
+      }
+    }
+
+    super(messages.join('\n'));
+
+    this.original = error;
+  }
+}

example/Doc.tsx

@@ -15,6 +15,7 @@ const Doc = () => {
     fixture === 'edited' ? [fixture, searchParams.get('edit') || ''] : [docs[fixture].name, docs[fixture].doc];
 
   const [Content, setContent] = useState<FunctionComponent>(null);
+  const [error, setError] = useState<string>(null);
 
   useEffect(() => {
     const render = async () => {
@@ -23,10 +24,15 @@ const Doc = () => {
         safeMode,
       };
 
-      const code = mdx.compile(doc, opts);
-      const content = await mdx.run(code);
+      try {
+        const code = mdx.compile(doc, opts);
+        const content = await mdx.run(code);
 
-      setContent(() => content);
+        setError(() => null);
+        setContent(() => content);
+      } catch (e) {
+        setError(() => e.message);
+      }
     };
 
     render();
@@ -38,7 +44,7 @@ const Doc = () => {
         <section id="hub-content">
           {!ci && <h2 className="rdmd-demo--markdown-header">{name}</h2>}
           <div id="content-container">
-            <RenderError>
+            <RenderError error={error}>
               <div className="markdown-body">{Content && <Content />}</div>
             </RenderError>
           </div>

example/RenderError.tsx

@@ -1,6 +1,8 @@
 import React, { PropsWithChildren } from 'react';
 
-interface Props {}
+interface Props {
+  error?: string;
+}
 
 interface State {
   hasError: boolean;
@@ -19,13 +21,13 @@ class RenderError extends React.Component<PropsWithChildren<Props>, State> {
   }
 
   render() {
-    const { children } = this.props;
+    const { children, error } = this.props;
     const { hasError, message } = this.state;
 
-    return hasError ? (
+    return hasError || error ? (
       <div className="error">
         <pre>
-          <code>{message}</code>
+          <code>{message || error}</code>
         </pre>
       </div>
     ) : (

example/docs.ts

@@ -19,6 +19,8 @@ import images from '../docs/images.md';
 // @ts-ignore
 import lists from '../docs/lists.md';
 // @ts-ignore
+import mdxComponents from '../docs/mdx-components.mdx';
+// @ts-ignore
 import sanitizingTests from '../docs/sanitizing-tests.md';
 // @ts-ignore
 import tableOfContentsTests from '../docs/table-of-contents-tests.md';
@@ -43,6 +45,7 @@ const fixtures = Object.entries({
   headings,
   images,
   lists,
+  mdxComponents,
   sanitizingTests,
   tableOfContentsTests,
   tables,