@fusion.dev/helix 0.108.2 → 0.109.1

package/dist/rehype.d.ts

@@ -1,11 +1,12 @@
 /**
- * **A rehype plugin that gives Markdown's two missing constructs their Helix
+ * **A rehype plugin that gives Markdown's fences, alerts and tables their Helix
  * elements, and parses nothing.** Your Markdown library turns `###` into
- * `<h3>`, and `data-prose` styles the HTML it writes. Two constructs carry
+ * `<h3>`, and `data-prose` styles the HTML it writes. Three constructs carry
  * what plain HTML cannot: a code fence, which a reader copies and which has a
- * language, and a GitHub alert, which says how much a passage matters. This
- * rewrites those two in the tree your parser already built, after your own
- * sanitizing, and leaves everything else as it is.
+ * language; a GitHub alert, which says how much a passage matters; and a
+ * table, whose values must stay whole on a narrow screen. This rewrites those
+ * three in the tree your parser already built, after your own sanitizing, and
+ * leaves everything else as it is.
  *
  * - A fence becomes `helix-code-block`, labeled with its language. What is
  *   inside the code is kept, so a highlighter that ran before this has its
@@ -14,6 +15,13 @@
  *   note is `info`, a tip `success`, a warning `warning`, and a caution
  *   `danger`. An important passage has no tone, since none of the four says
  *   it. Each keeps its kind as its heading, as GitHub shows it.
+ * - A table becomes `helix-table`: its header row becomes its columns, each
+ *   aligned as the Markdown aligned it, and every other row a
+ *   `helix-table-row` of `helix-table-cell`. The table sizes its columns from
+ *   what they hold, so a column of values stays whole and a column of
+ *   sentences wraps. A table the grid cannot draw as written, with a caption,
+ *   a cell spanning more than one column or row, or a heading cell outside the
+ *   one header row, stays a table.
  *
  * Any pipeline that reaches rehype takes it: `remark` with `remark-rehype`,
  * `react-markdown`, and MDX.
@@ -45,10 +53,13 @@ export interface RehypeHelixOptions {
     fences?: boolean | undefined;
     /** An alert's heading by its kind, for a page in another language. English by default. */
     headings?: Partial<Record<AlertKind, string>> | undefined;
+    /** Whether tables become Helix tables. `true` by default. */
+    tables?: boolean | undefined;
 }
 /**
  * The plugin: rewrites the tree in place, from the top down, so a fence
- * inside an alert becomes a code block inside a callout.
+ * inside an alert becomes a code block inside a callout, and a table inside
+ * one a Helix table.
  */
 export default function rehypeHelix(options?: RehypeHelixOptions): (tree: HastNode) => void;
 export { rehypeHelix };

package/dist/rehype.js

@@ -77,6 +77,48 @@ const calloutOf = (node, headings) => {
         type: 'element',
     };
 };
+const EDGES = {
+    center: 'center',
+    left: 'start',
+    right: 'end',
+};
+const spans = (cell) => Number(cell.properties?.colSpan ?? 1) > 1 || Number(cell.properties?.rowSpan ?? 1) > 1;
+const helix = (tagName, children, properties = {}) => ({
+    children,
+    properties,
+    tagName,
+    type: 'element',
+});
+const tableOf = (node) => {
+    if (node.tagName !== 'table') {
+        return undefined;
+    }
+    const head = [];
+    const body = [];
+    for (const group of elements(node)) {
+        const rows = group.tagName === 'tr' ? [group] : elements(group);
+        if (!['tbody', 'tfoot', 'thead', 'tr'].includes(group.tagName ?? '') ||
+            rows.some((row) => row.tagName !== 'tr')) {
+            return undefined;
+        }
+        ;
+        (group.tagName === 'thead' ? head : body).push(...rows);
+    }
+    const [heading] = head;
+    const headings = heading ? elements(heading) : [];
+    const cells = body.map((row) => elements(row));
+    if (head.length !== 1 ||
+        headings.some((cell) => cell.tagName !== 'th' || spans(cell)) ||
+        cells.some((row) => row.some((cell) => cell.tagName !== 'td' || spans(cell)))) {
+        return undefined;
+    }
+    const columns = headings.map((cell) => {
+        const edge = EDGES[String(cell.properties?.align)];
+        return helix('helix-table-column', cell.children ?? [], edge ? { 'text-align': edge } : {});
+    });
+    const rows = cells.map((row) => helix('helix-table-row', row.map((cell) => helix('helix-table-cell', cell.children ?? []))));
+    return helix('helix-table', [...columns, ...rows]);
+};
 export default function rehypeHelix(options = {}) {
     const headings = { ...HEADINGS, ...options.headings };
     const rewrite = (node) => {
@@ -86,7 +128,8 @@ export default function rehypeHelix(options = {}) {
         }
         children.forEach((child, index) => {
             const replaced = (options.fences !== false ? codeBlockOf(child) : undefined) ??
-                (options.alerts !== false ? calloutOf(child, headings) : undefined);
+                (options.alerts !== false ? calloutOf(child, headings) : undefined) ??
+                (options.tables !== false ? tableOf(child) : undefined);
             if (replaced) {
                 children[index] = replaced;
             }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fusion.dev/helix",
   "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
-  "version": "0.108.2",
+  "version": "0.109.1",
   "license": "MIT",
   "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
   "repository": {
@@ -51,18 +51,19 @@
   },
   "bugs": "https://github.com/project-fusion/fusion/issues",
   "dependencies": {
-    "@fusion.dev/helix-core": "0.108.2",
-    "@fusion.dev/helix-headless": "0.108.2",
-    "@fusion.dev/helix-styles": "0.108.2"
+    "@fusion.dev/helix-core": "0.109.1",
+    "@fusion.dev/helix-headless": "0.109.1",
+    "@fusion.dev/helix-styles": "0.109.1"
   },
   "devDependencies": {
-    "@fusion.dev/helix-cem": "0.108.2",
-    "@fusion.dev/helix-testing": "0.108.2",
+    "@fusion.dev/helix-cem": "0.109.1",
+    "@fusion.dev/helix-testing": "0.109.1",
     "@fusion.dev/scripts": "0.0.0-dev",
     "@happy-dom/global-registrator": "^20.0.0",
     "@lit-labs/ssr": "^4.1.0",
     "@types/bun": "^1.3.0",
     "lit": "^3.2.1",
+    "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5"