🍽 Improve styling of table and table legend (#293)

jupyter-book · Nov 30, 2023 · b6601f7 · b6601f7
1 parent 3426738
commit b6601f7
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/.changeset/dull-socks-yell.md 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
@@ -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
@@ -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>
     );