From f1d3001058b4ca9ec5d6d19db08ff445a507d46d Mon Sep 17 00:00:00 2001
From: Rowan Cockett <rowanc1@gmail.com>
Date: Wed, 29 Nov 2023 21:07:50 -0700
Subject: [PATCH] =?UTF-8?q?=F0=9F=8D=BD=20Improve=20styling=20of=20table?=
 =?UTF-8?q?=20and=20table=20legend?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/dull-socks-yell.md        |  5 +++++
 .changeset/old-cherries-add.md       |  5 +++++
 packages/myst-to-react/src/basic.tsx | 16 ++++++++++++----
 3 files changed, 22 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/dull-socks-yell.md
 create mode 100644 .changeset/old-cherries-add.md

diff --git a/.changeset/dull-socks-yell.md b/.changeset/dull-socks-yell.md
new file mode 100644
index 000000000..c181eba07
--- /dev/null
+++ b/.changeset/dull-socks-yell.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Add legend handler for containers
diff --git a/.changeset/old-cherries-add.md b/.changeset/old-cherries-add.md
new file mode 100644
index 000000000..d3c6e01b0
--- /dev/null
+++ b/.changeset/old-cherries-add.md
@@ -0,0 +1,5 @@
+---
+'myst-to-react': patch
+---
+
+Table styles and classes added
diff --git a/packages/myst-to-react/src/basic.tsx b/packages/myst-to-react/src/basic.tsx
index df877db20..9486dce6c 100644
--- a/packages/myst-to-react/src/basic.tsx
+++ b/packages/myst-to-react/src/basic.tsx
@@ -58,6 +58,7 @@ type BasicNodeRenderers = {
   listItem: NodeRenderer<spec.ListItem & { checked?: boolean }>;
   container: NodeRenderer<spec.Container>;
   caption: NodeRenderer<spec.Caption>;
+  legend: NodeRenderer<spec.Legend>;
   blockquote: NodeRenderer<spec.Blockquote>;
   thematicBreak: NodeRenderer<spec.ThematicBreak>;
   subscript: NodeRenderer<spec.Subscript>;
@@ -229,6 +230,13 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
       </figcaption>
     );
   },
+  legend({ node }) {
+    return (
+      <figcaption className="text-sm">
+        <MyST ast={node.children} />
+      </figcaption>
+    );
+  },
   blockquote({ node }) {
     return (
       <blockquote id={node.html_id}>
@@ -254,7 +262,7 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   table({ node }) {
     // TODO: actually render the tbody on the server if it isn't included here.
     return (
-      <table>
+      <table className={node.class} style={node.style}>
         <tbody>
           <MyST ast={node.children} />
         </tbody>
@@ -263,7 +271,7 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
   },
   tableRow({ node }) {
     return (
-      <tr>
+      <tr className={node.class} style={node.style}>
         <MyST ast={node.children} />
       </tr>
     );
@@ -276,12 +284,12 @@ const BASIC_RENDERERS: BasicNodeRenderers = {
     };
     if (node.header)
       return (
-        <th {...attrs}>
+        <th className={node.class} style={node.style} {...attrs}>
           <MyST ast={node.children} />
         </th>
       );
     return (
-      <td {...attrs}>
+      <td className={node.class} style={node.style} {...attrs}>
         <MyST ast={node.children} />
       </td>
     );