@tinacms/astro 0.4.0 → 0.5.0

package/dist/integration.d.ts

@@ -1,5 +1,12 @@
 import type { AstroIntegration } from 'astro';
 export interface TinaIntegrationOptions {
     middlewareOrder?: 'pre' | 'post';
+    /**
+     * Force the Cloudflare Workers (workerd) `import.meta.url` workaround on or
+     * off. When omitted, it is applied automatically whenever the
+     * `@astrojs/cloudflare` adapter is detected. Set `false` to opt out, or
+     * `true` to force it for a custom Cloudflare setup.
+     */
+    cloudflareWorkers?: boolean;
 }
 export default function tina(options?: TinaIntegrationOptions): AstroIntegration;

package/dist/integration.js

@@ -4,9 +4,13 @@ import { createRequire } from "node:module";
 import { join } from "node:path";
 import { fileURLToPath } from "node:url";
 var BRIDGE_ROUTE = "/admin/bridge.js";
+var CLOUDFLARE_ADAPTER_NAME = "@astrojs/cloudflare";
+var WORKERD_IMPORT_META_URL = JSON.stringify("file:///worker.mjs");
+var SERVER_ENVIRONMENTS = /* @__PURE__ */ new Set(["ssr", "astro"]);
 function tina(options = {}) {
   const { middlewareOrder = "pre" } = options;
   let clientDir;
+  let isCloudflareAdapter = false;
   return {
     name: "@tinacms/astro",
     hooks: {
@@ -15,10 +19,18 @@ function tina(options = {}) {
           entrypoint: "@tinacms/astro/middleware",
           order: middlewareOrder
         });
-        updateConfig({ vite: { plugins: [bridgeDevPlugin()] } });
+        updateConfig({
+          vite: {
+            plugins: [
+              bridgeDevPlugin(),
+              cloudflareImportMetaUrlPlugin(() => isCloudflareAdapter)
+            ]
+          }
+        });
       },
       "astro:config:done": ({ config }) => {
         clientDir = config.build.client;
+        isCloudflareAdapter = options.cloudflareWorkers ?? config.adapter?.name === CLOUDFLARE_ADAPTER_NAME;
       },
       "astro:build:done": ({ logger }) => {
         if (!clientDir) return;
@@ -54,6 +66,18 @@ function bridgeDevPlugin() {
     }
   };
 }
+function cloudflareImportMetaUrlPlugin(isCloudflare) {
+  const define = { "import.meta.url": WORKERD_IMPORT_META_URL };
+  return {
+    name: "@tinacms/astro:cloudflare-import-meta-url",
+    // No `apply`: the define is needed in both the build (ssr) and dev envs.
+    configEnvironment(name) {
+      if (!isCloudflare()) return;
+      if (!SERVER_ENVIRONMENTS.has(name)) return;
+      return { define };
+    }
+  };
+}
 function emitBridgeAsset(adminDir, logger) {
   try {
     mkdirSync(adminDir, { recursive: true });

package/dist/types.d.ts

@@ -35,10 +35,54 @@ export type CodeBlockElement = {
         children: TextElement[];
     }[];
 };
-export type BlockElement = {
+/** Per-column horizontal alignment for table cells. */
+export type TableAlign = 'left' | 'right' | 'center';
+/** A paragraph — the block wrapper Tina puts around inline content. */
+export type ParagraphElement = {
     type: 'p';
     children: InlineElement[];
-} | {
+};
+/** A single table cell. Its content is wrapped in a paragraph by the parser. */
+export type TableCellElement = {
+    type: 'td';
+    children: ParagraphElement[];
+};
+export type TableRowElement = {
+    type: 'tr';
+    children: TableCellElement[];
+};
+/**
+ * Native markdown table node (the shape `@tinacms/mdx` emits from a GFM
+ * table). Rows/cells are plain `tr`/`td`; per-column text-align lives on
+ * `props.align`. Mirrors `TableElement` in
+ * `packages/@tinacms/mdx/src/parse/plate.ts`.
+ */
+export type TableElement = {
+    type: 'table';
+    props?: {
+        align?: TableAlign[];
+    };
+    children: TableRowElement[];
+};
+/** A cell in the legacy MDX-flow table; its `value` is itself rich text. */
+export type MdxTableCell = {
+    value: TinaRichTextContent;
+};
+export type MdxTableRow = {
+    tableCells: MdxTableCell[];
+};
+/**
+ * Props of the legacy MDX-flow table — an `mdxJsxFlowElement` named `table`
+ * whose cells live on `props.tableRows` rather than as `tr`/`td` child nodes.
+ * Older editors produced this shape; `MdxTableNode.astro` still renders it.
+ */
+export type MdxTableProps = {
+    align?: TableAlign[];
+    /** When true, the first row is rendered as a `<thead>` of `<th>`. */
+    firstRowHeader?: boolean;
+    tableRows?: MdxTableRow[];
+};
+export type BlockElement = ParagraphElement | {
     type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     children: InlineElement[];
 } | {
@@ -57,7 +101,7 @@ export type BlockElement = {
     type: 'hr';
 } | {
     type: 'break';
-} | ImageElement | CodeBlockElement | {
+} | ImageElement | CodeBlockElement | TableElement | {
     type: 'maybe_mdx';
 } | {
     type: 'html';
@@ -88,5 +132,86 @@ export type MdxElement = {
     children?: TinaRichTextNode[];
 };
 export type TinaRichTextContent = TinaRichTextRoot | TinaRichTextNode[] | null | undefined;
-/** A map of mdxJsx name (or default tag override) → Astro component. */
-export type CustomComponentsMap = Record<string, AstroComponent>;
+/**
+ * An Astro (or framework) component that accepts props `P`. Astro's language
+ * server types an imported `.astro` component as `(props: Props) => any`, so
+ * this both accepts such a component and checks that its `Props` match what
+ * the renderer passes to the override.
+ */
+export type AstroComponentWithProps<P> = (props: P) => any;
+/** Props passed to an `a` (link) override. */
+export interface LinkComponentProps {
+    url: string;
+}
+/** Props passed to an `img` (image) override. */
+export interface ImageComponentProps {
+    url: string;
+    alt?: string;
+    caption?: string;
+}
+/** Props passed to a `code_block` override. */
+export interface CodeBlockComponentProps {
+    value: string;
+    lang?: string;
+}
+/** Props passed to `html` / `html_inline` overrides. */
+export interface HtmlComponentProps {
+    value: string;
+}
+/** Props passed to a `table` override (native table node). */
+export interface TableComponentProps {
+    node: TableElement;
+}
+/** Props passed to `td` / `th` overrides. */
+export interface TableCellComponentProps {
+    align?: TableAlign;
+}
+/**
+ * Map of component name → Astro component, passed to `<TinaMarkdown>`.
+ *
+ * The built-in keys below are suggested by editor autocomplete and override
+ * the matching default element/tag; the named-prop overrides are typed with
+ * the exact props the renderer passes (e.g. `code_block` receives
+ * `{ value, lang }`).
+ *
+ * Custom rich-text **templates** render as mdxJsx nodes dispatched by `name`,
+ * with their fields passed as props. Register one under its template name.
+ * By default a custom key accepts any component; supply the optional `Custom`
+ * type param to type them precisely and have the registration checked:
+ *
+ * ```ts
+ * // template `cta` with a `title: string` field
+ * const components: CustomComponentsMap<{ cta: { title: string } }> = {
+ *   cta: Cta, // ← Cta's Props must be assignable from `{ title: string }`
+ * };
+ * ```
+ */
+export type CustomComponentsMap<Custom extends Record<string, object> = Record<never, never>> = {
+    p?: AstroComponent;
+    h1?: AstroComponent;
+    h2?: AstroComponent;
+    h3?: AstroComponent;
+    h4?: AstroComponent;
+    h5?: AstroComponent;
+    h6?: AstroComponent;
+    ul?: AstroComponent;
+    ol?: AstroComponent;
+    li?: AstroComponent;
+    lic?: AstroComponent;
+    blockquote?: AstroComponent;
+    tr?: AstroComponent;
+    hr?: AstroComponent;
+    break?: AstroComponent;
+    a?: AstroComponentWithProps<LinkComponentProps>;
+    img?: AstroComponentWithProps<ImageComponentProps>;
+    code_block?: AstroComponentWithProps<CodeBlockComponentProps>;
+    html?: AstroComponentWithProps<HtmlComponentProps>;
+    html_inline?: AstroComponentWithProps<HtmlComponentProps>;
+    table?: AstroComponentWithProps<TableComponentProps>;
+    td?: AstroComponentWithProps<TableCellComponentProps>;
+    th?: AstroComponentWithProps<TableCellComponentProps>;
+} & {
+    [K in keyof Custom]?: AstroComponentWithProps<Custom[K]>;
+} & {
+    [name: string]: AstroComponent | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tinacms/astro",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "main": "src/TinaMarkdown.astro",
   "types": "dist/index.d.ts",

package/src/MdxNode.astro

@@ -2,9 +2,13 @@
 /**
  * mdxJsx{Flow,Text}Element nodes are dispatched by `node.name` — registered
  * components on the `components` map render with the node's props spread in.
- * Unregistered names emit a visible placeholder so missing registrations
- * surface during development.
+ *
+ * When no component is registered for the name, an `mdxJsxFlowElement` named
+ * `table` renders the built-in legacy table (`MdxTableNode`), mirroring the
+ * React renderer. Any other unregistered name emits a visible placeholder so
+ * missing registrations surface during development.
  */
+import MdxTableNode from './MdxTableNode.astro';
 import type { CustomComponentsMap, MdxElement } from './types';
 
 interface Props {
@@ -13,10 +17,17 @@ interface Props {
 }
 
 const { node, components } = Astro.props;
+// Single place that guarantees mdx props are an object, so neither the
+// component spread nor the legacy-table renderer downstream needs its own
+// guard. Parsed content always sets props; this only defends malformed nodes.
+const props: Record<string, unknown> = node.props ?? {};
 const MdxComponent = components[node.name];
+const isLegacyTable = !MdxComponent && node.name === 'table';
 ---
 {MdxComponent ? (
-  <MdxComponent {...(node.props ?? {})} />
+  <MdxComponent {...props} />
+) : isLegacyTable ? (
+  <MdxTableNode node={{ ...node, props }} components={components} />
 ) : (
   <span style="display:inline-block;padding:0.25rem 0.5rem;background:#fee;color:#900;border-radius:0.25rem;font-family:monospace;font-size:0.85em;">
     No component provided for {node.name}

package/src/MdxTableNode.astro

@@ -0,0 +1,84 @@
+---
+/**
+ * Renders the legacy MDX-flow table shape — an `mdxJsxFlowElement` named
+ * `table` whose cells live on `props.tableRows` (rather than as `tr`/`td`
+ * child nodes). Mirrors the matching branch of
+ * `packages/tinacms/src/rich-text/index.tsx`: when `props.firstRowHeader` is
+ * set the first row becomes a `<thead>` of `<th>` and the rest are `<td>` in
+ * `<tbody>`. Per-column alignment comes from `props.align`, and the `th` / `td`
+ * overrides apply. The `table` / `tr` overrides are intentionally NOT honored
+ * here: the `table` override is typed to receive a native `{ node:
+ * TableElement }`, which this legacy `MdxElement`-based shape can't provide.
+ */
+import TinaMarkdown from './TinaMarkdown.astro';
+import type {
+  CustomComponentsMap,
+  InlineElement,
+  MdxElement,
+  MdxTableProps,
+  TinaRichTextContent,
+} from './types';
+
+interface Props {
+  node: MdxElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+// `node.props` is guaranteed to be an object — MdxNode defaults it before
+// dispatching here — so no further guard is needed at this layer.
+const props = node.props as MdxTableProps;
+
+const align = props.align ?? [];
+const allRows = props.tableRows ?? [];
+const header = props.firstRowHeader ? allRows.at(0) : undefined;
+const bodyRows = props.firstRowHeader ? allRows.slice(1) : allRows;
+
+const ThOverride = components.th;
+const TdOverride = components.td;
+
+// A cell `value` is rich text; unwrap each wrapping paragraph to its inline
+// nodes so a cell renders `<td>text</td>` rather than `<td><p>text</p></td>`.
+const cellInline = (value: TinaRichTextContent): InlineElement[] => {
+  const nodes = Array.isArray(value) ? value : (value?.children ?? []);
+  return nodes.flatMap((n) => (n.type === 'p' ? n.children : []));
+};
+
+const cellStyle = (i: number) => `text-align:${align[i] ?? 'auto'}`;
+---
+<table>
+  {header && (
+    <thead>
+      <tr>
+        {(header.tableCells ?? []).map((cell, i) =>
+          ThOverride ? (
+            <ThOverride align={align[i]}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </ThOverride>
+          ) : (
+            <th style={cellStyle(i)}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </th>
+          )
+        )}
+      </tr>
+    </thead>
+  )}
+  <tbody>
+    {bodyRows.map((row) => (
+      <tr>
+        {(row?.tableCells ?? []).map((cell, i) =>
+          TdOverride ? (
+            <TdOverride align={align[i]}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </TdOverride>
+          ) : (
+            <td style={cellStyle(i)}>
+              <TinaMarkdown content={cellInline(cell.value)} components={components} />
+            </td>
+          )
+        )}
+      </tr>
+    ))}
+  </tbody>
+</table>

package/src/Node.astro

@@ -12,12 +12,14 @@ import ImageNode from './ImageNode.astro';
 import Leaf from './Leaf.astro';
 import LinkNode from './LinkNode.astro';
 import MdxNode from './MdxNode.astro';
+import TableNode from './TableNode.astro';
 import type {
   CodeBlockElement,
   CustomComponentsMap,
   ImageElement,
   LinkElement,
   MdxElement,
+  TableElement,
   TextElement,
   TinaRichTextNode,
 } from './types';
@@ -54,6 +56,8 @@ const containerTypes = new Set([
   <ImageNode node={node as ImageElement} components={components} />
 ) : t === 'code_block' ? (
   <CodeBlockNode node={node as CodeBlockElement} components={components} />
+) : t === 'table' ? (
+  <TableNode node={node as TableElement} components={components} />
 ) : t === 'text' ? (
   <Leaf node={node as TextElement} />
 ) : t === 'mdxJsxFlowElement' || t === 'mdxJsxTextElement' ? (

package/src/TableNode.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * Renders a native markdown `table` node. Mirrors the `case 'table'` branch
+ * in `packages/tinacms/src/rich-text/index.tsx`: every row goes into a single
+ * `<tbody>` as `<td>` cells (the first row is NOT promoted to a header — that
+ * matches the React renderer's native-table path), per-column alignment comes
+ * from `node.props.align`, and `components.table` / `.tr` / `.td` override the
+ * default tags. Each cell's content is the inline content of its paragraph,
+ * rendered without a wrapping `<p>` (the equivalent of React's `p` → `td`
+ * override).
+ */
+import TinaMarkdown from './TinaMarkdown.astro';
+import type {
+  CustomComponentsMap,
+  InlineElement,
+  TableCellElement,
+  TableElement,
+} from './types';
+
+interface Props {
+  node: TableElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+
+const TableOverride = components.table;
+const TrOverride = components.tr;
+const TdOverride = components.td;
+
+const align = node.props?.align ?? [];
+const rows = node.children ?? [];
+
+const TABLE_STYLE = 'border:1px solid #EDECF3';
+const tdStyle = (i: number) =>
+  `text-align:${align[i] ?? 'auto'};border:1px solid #EDECF3;padding:0.25rem`;
+
+// A cell wraps its content in a paragraph; unwrap to the inline nodes so the
+// cell renders `<td>text</td>` rather than `<td><p>text</p></td>`.
+const cellContent = (cell: TableCellElement): InlineElement[] =>
+  (cell?.children ?? []).flatMap((paragraph) => paragraph?.children ?? []);
+
+const Table = TableOverride ?? 'table';
+const tableProps = TableOverride ? { node } : { style: TABLE_STYLE };
+const Tr = TrOverride ?? 'tr';
+---
+<Table {...tableProps}>
+  <tbody>
+    {rows.map((row) => (
+      <Tr>
+        {(row?.children ?? []).map((cell, i) =>
+          TdOverride ? (
+            <TdOverride align={align[i]}>
+              <TinaMarkdown content={cellContent(cell)} components={components} />
+            </TdOverride>
+          ) : (
+            <td style={tdStyle(i)}>
+              <TinaMarkdown content={cellContent(cell)} components={components} />
+            </td>
+          )
+        )}
+      </Tr>
+    ))}
+  </tbody>
+</Table>

package/src/__tests__/TinaMarkdown.test.ts

@@ -6,6 +6,8 @@ import codeBlock from './fixtures/code-block.json';
 import leafMarks from './fixtures/leaf-marks.json';
 import mdxJsxFlow from './fixtures/mdx-jsx-flow.json';
 import mdxJsxText from './fixtures/mdx-jsx-text.json';
+import mdxTable from './fixtures/mdx-table.json';
+import table from './fixtures/table.json';
 
 let container: AstroContainer;
 
@@ -84,6 +86,51 @@ describe('TinaMarkdown', () => {
   });
 });
 
+describe('TinaMarkdown — tables', () => {
+  it('renders a native table node with rows, cells and column alignment', async () => {
+    const html = await render({ props: { content: table } });
+    expect(html).toMatchSnapshot();
+    expect(html).toContain('<table');
+    expect(html).toContain('<tbody>');
+    expect(html).toContain('<tr>');
+    expect(html).toContain('<td');
+    // Per-column alignment from props.align.
+    expect(html).toContain('text-align:left');
+    expect(html).toContain('text-align:center');
+    expect(html).toContain('text-align:right');
+    // Inline marks render inside cells.
+    expect(html).toContain('<strong>Ada</strong>');
+    // No <thead>/<th> on the native path (matches the React renderer).
+    expect(html).not.toContain('<thead>');
+    expect(html).not.toContain('<th');
+    // Cell content is not wrapped in an extra <p>.
+    expect(html).not.toMatch(/<td[^>]*><p[\s>]/);
+  });
+
+  it('overrides the table tag via components.table', async () => {
+    const FancyTable = await import('./fixtures/FancyTable.astro');
+    const html = await render({
+      props: { content: table, components: { table: FancyTable.default } },
+    });
+    expect(html).toContain('class="fancy-table"');
+    expect(html).toContain('Name');
+    expect(html).toContain('Eng');
+  });
+
+  it('renders the legacy mdx-flow table with a header row', async () => {
+    const html = await render({ props: { content: mdxTable } });
+    expect(html).toMatchSnapshot();
+    expect(html).toContain('<thead>');
+    expect(html).toContain('<th');
+    expect(html).toContain('Header A');
+    expect(html).toContain('<tbody>');
+    expect(html).toContain('a1');
+    expect(html).toContain('text-align:left');
+    expect(html).toContain('text-align:right');
+    expect(html).not.toContain('No component provided for table');
+  });
+});
+
 describe('TinaMarkdown — components map', () => {
   it('dispatches a registered mdxJsx component by name', async () => {
     const MyFeature = await import('./fixtures/MyFeature.astro');

package/src/__tests__/__snapshots__/TinaMarkdown.test.ts.snap

@@ -5,3 +5,7 @@ exports[`TinaMarkdown > renders code blocks with language class 1`] = `"<pre><co
 exports[`TinaMarkdown > renders nested leaf-mark formatting 1`] = `"<p>Some <strong>bold</strong> text</p><p>Some <strong><em>bold and emphasized</em></strong> text</p><p>Marks with <em>emphasized text nesting </em><strong><em>bold</em></strong><em> text</em></p><p><strong>Hello </strong><strong><em>world</em></strong><strong>, again</strong> <em>here</em></p><p>Some <code>inline code</code> examples</p><p><em>Hello </em><em><code>some code</code></em><em>, again</em></p><p><strong>Hello </strong><a href="https://example.com"><strong>world</strong></a></p><p><strong><em>Hello </em></strong><a href="https://example.com"><strong><em>world</em></strong></a><em> And some other text, which has a </em><a href="https://something.com"><em>link to something</em></a></p>"`;
 
 exports[`TinaMarkdown > renders the basic kitchen-sink fixture 1`] = `"<h1>Heading</h1><p>A paragraph.</p><blockquote>A quote.</blockquote><ul><li><div>An item</div></li></ul><hr><p>A <a href="http://example.com">link</a>.</p><p><img src="https://get.svg.workers.dev" alt="Alt Text"></p>"`;
+
+exports[`TinaMarkdown — tables > renders a native table node with rows, cells and column alignment 1`] = `"<table style="border:1px solid #EDECF3"> <tbody> <tr><td style="text-align:left;border:1px solid #EDECF3;padding:0.25rem"> Name </td><td style="text-align:center;border:1px solid #EDECF3;padding:0.25rem"> Role </td><td style="text-align:right;border:1px solid #EDECF3;padding:0.25rem"> Score </td></tr><tr><td style="text-align:left;border:1px solid #EDECF3;padding:0.25rem"> <strong>Ada</strong> </td><td style="text-align:center;border:1px solid #EDECF3;padding:0.25rem"> Eng </td><td style="text-align:right;border:1px solid #EDECF3;padding:0.25rem"> 99 </td></tr> </tbody> </table>"`;
+
+exports[`TinaMarkdown — tables > renders the legacy mdx-flow table with a header row 1`] = `"<table> <thead> <tr> <th style="text-align:left"> Header A </th><th style="text-align:right"> Header B </th> </tr> </thead> <tbody> <tr> <td style="text-align:left"> a1 </td><td style="text-align:right"> b1 </td> </tr> </tbody> </table>"`;

package/src/__tests__/fixtures/FancyTable.astro

@@ -0,0 +1,3 @@
+---
+---
+<table class="fancy-table"><slot /></table>

package/src/__tests__/fixtures/mdx-table.json

@@ -0,0 +1,44 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "mdxJsxFlowElement",
+      "name": "table",
+      "props": {
+        "firstRowHeader": true,
+        "align": ["left", "right"],
+        "tableRows": [
+          {
+            "tableCells": [
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "Header A" }] }
+                ]
+              },
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "Header B" }] }
+                ]
+              }
+            ]
+          },
+          {
+            "tableCells": [
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "a1" }] }
+                ]
+              },
+              {
+                "value": [
+                  { "type": "p", "children": [{ "type": "text", "text": "b1" }] }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      "children": [{ "type": "text", "text": "" }]
+    }
+  ]
+}

package/src/__tests__/fixtures/table.json

@@ -0,0 +1,60 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "table",
+      "props": { "align": ["left", "center", "right"] },
+      "children": [
+        {
+          "type": "tr",
+          "children": [
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Name" }] }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Role" }] }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Score" }] }
+              ]
+            }
+          ]
+        },
+        {
+          "type": "tr",
+          "children": [
+            {
+              "type": "td",
+              "children": [
+                {
+                  "type": "p",
+                  "children": [{ "type": "text", "text": "Ada", "bold": true }]
+                }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "Eng" }] }
+              ]
+            },
+            {
+              "type": "td",
+              "children": [
+                { "type": "p", "children": [{ "type": "text", "text": "99" }] }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/__tests__/integration.test.ts

@@ -12,11 +12,11 @@ type ConfigSetupArg = Parameters<NonNullable<Hooks['astro:config:setup']>>[0];
 type ConfigDoneArg = Parameters<NonNullable<Hooks['astro:config:done']>>[0];
 type BuildDoneArg = Parameters<NonNullable<Hooks['astro:build:done']>>[0];
 
-function runConfigSetup() {
+function runConfigSetup(options?: Parameters<typeof tina>[0]) {
   const addMiddleware = vi.fn();
   const updateConfig = vi.fn();
   const logger = { warn: vi.fn(), info: vi.fn() };
-  const integration = tina();
+  const integration = tina(options);
   (
     integration.hooks['astro:config:setup'] as NonNullable<
       Hooks['astro:config:setup']
@@ -28,6 +28,34 @@ function runConfigSetup() {
   return { integration, addMiddleware, updateConfig, logger, plugins };
 }
 
+// Drive the astro:config:done hook with a chosen adapter so the integration can
+// resolve whether the Cloudflare workaround should apply.
+function runConfigDone(integration: AstroIntegration, adapterName?: string) {
+  (
+    integration.hooks['astro:config:done'] as NonNullable<
+      Hooks['astro:config:done']
+    >
+  )({
+    config: {
+      build: { client: pathToFileURL('/tmp/tina-client/') },
+      adapter: adapterName ? { name: adapterName, hooks: {} } : undefined,
+    },
+  } as unknown as ConfigDoneArg);
+}
+
+const cfPlugin = (plugins: VitePlugin[]) =>
+  plugins.find(
+    (p) => p.name === '@tinacms/astro:cloudflare-import-meta-url'
+  ) as VitePlugin;
+
+// Invoke a plugin's `configEnvironment` hook (a function in our plugin) without
+// a real Vite environment — it only branches on the environment name.
+function runConfigEnvironment(plugin: VitePlugin, name: string) {
+  const hook = plugin.configEnvironment as any;
+  const fn = typeof hook === 'function' ? hook : hook?.handler;
+  return fn?.call({}, name, {}, {});
+}
+
 // Drive a Vite plugin's `configureServer` and capture the request handler it
 // registers, so we can exercise it without a real dev server.
 function devHandler(plugin: VitePlugin) {
@@ -96,6 +124,82 @@ describe('tina() integration — bridge dev plugin', () => {
   });
 });
 
+describe('tina() integration — cloudflare import.meta.url plugin', () => {
+  const EXPECTED = JSON.stringify('file:///worker.mjs');
+
+  it('injects a valid import.meta.url define for the workerd server envs under the cloudflare adapter', () => {
+    const { integration, plugins } = runConfigSetup();
+    runConfigDone(integration, '@astrojs/cloudflare');
+    const plugin = cfPlugin(plugins);
+    expect(plugin).toBeDefined();
+
+    for (const env of ['ssr', 'astro']) {
+      const result = runConfigEnvironment(plugin, env);
+      expect(result?.define?.['import.meta.url']).toBe(EXPECTED);
+      // The placeholder must itself be a valid absolute URL.
+      expect(
+        () => new URL(JSON.parse(result.define['import.meta.url']))
+      ).not.toThrow();
+    }
+  });
+
+  it('never injects the define into the client or prerender envs', () => {
+    const { integration, plugins } = runConfigSetup();
+    runConfigDone(integration, '@astrojs/cloudflare');
+    const plugin = cfPlugin(plugins);
+    // `client` keeps the real import.meta.url; `prerender` may run in Node.
+    expect(runConfigEnvironment(plugin, 'client')).toBeUndefined();
+    expect(runConfigEnvironment(plugin, 'prerender')).toBeUndefined();
+  });
+
+  it('does not inject the define for non-cloudflare adapters', () => {
+    for (const adapter of ['@astrojs/node', '@astrojs/vercel']) {
+      const { integration, plugins } = runConfigSetup();
+      runConfigDone(integration, adapter);
+      const plugin = cfPlugin(plugins);
+      for (const env of ['ssr', 'prerender', 'astro', 'client']) {
+        expect(runConfigEnvironment(plugin, env)).toBeUndefined();
+      }
+    }
+  });
+
+  it('does not inject the define when no adapter is configured', () => {
+    const { integration, plugins } = runConfigSetup();
+    runConfigDone(integration);
+    expect(runConfigEnvironment(cfPlugin(plugins), 'ssr')).toBeUndefined();
+  });
+
+  it('reads the adapter flag lazily, after config:done', () => {
+    const { integration, plugins } = runConfigSetup();
+    const plugin = cfPlugin(plugins);
+    // Before config:done the flag is false, so the plugin is inert.
+    expect(runConfigEnvironment(plugin, 'ssr')).toBeUndefined();
+    // The same plugin instance picks up the adapter once config:done runs.
+    runConfigDone(integration, '@astrojs/cloudflare');
+    expect(
+      runConfigEnvironment(plugin, 'ssr')?.define?.['import.meta.url']
+    ).toBe(EXPECTED);
+  });
+
+  it('honours the cloudflareWorkers option override', () => {
+    // Force on, even with a Node adapter.
+    const forcedOn = runConfigSetup({ cloudflareWorkers: true });
+    runConfigDone(forcedOn.integration, '@astrojs/node');
+    expect(
+      runConfigEnvironment(cfPlugin(forcedOn.plugins), 'ssr')?.define?.[
+        'import.meta.url'
+      ]
+    ).toBe(EXPECTED);
+
+    // Force off, even with the Cloudflare adapter.
+    const forcedOff = runConfigSetup({ cloudflareWorkers: false });
+    runConfigDone(forcedOff.integration, '@astrojs/cloudflare');
+    expect(
+      runConfigEnvironment(cfPlugin(forcedOff.plugins), 'ssr')
+    ).toBeUndefined();
+  });
+});
+
 describe('tina() integration — astro:build:done', () => {
   it('emits bridge.js into the client output dir', () => {
     const clientDir = mkdtempSync(join(tmpdir(), 'tina-client-'));

package/src/integration.ts

@@ -7,11 +7,32 @@ import type { Plugin as VitePlugin } from 'vite';
 
 export interface TinaIntegrationOptions {
   middlewareOrder?: 'pre' | 'post';
+  /**
+   * Force the Cloudflare Workers (workerd) `import.meta.url` workaround on or
+   * off. When omitted, it is applied automatically whenever the
+   * `@astrojs/cloudflare` adapter is detected. Set `false` to opt out, or
+   * `true` to force it for a custom Cloudflare setup.
+   */
+  cloudflareWorkers?: boolean;
 }
 
 /** Where the injected bridge bootstrap imports the bridge bundle from. */
 const BRIDGE_ROUTE = '/admin/bridge.js';
 
+const CLOUDFLARE_ADAPTER_NAME = '@astrojs/cloudflare';
+/** A valid absolute URL that stands in for `import.meta.url` in server bundles. */
+const WORKERD_IMPORT_META_URL = JSON.stringify('file:///worker.mjs');
+/**
+ * The Vite environments that run on workerd under `@astrojs/cloudflare` and
+ * therefore need the placeholder: `ssr` (the on-demand server build) and `astro`
+ * (the dev SSR runtime). The `client` bundle is excluded so the browser keeps
+ * the real `import.meta.url`, and `prerender` is excluded because it runs in
+ * real Node when `prerenderEnvironment: 'node'` (faking the URL there would
+ * break genuine file resolution) — and the island route is `prerender: false`,
+ * so it never renders during prerendering anyway.
+ */
+const SERVER_ENVIRONMENTS = new Set(['ssr', 'astro']);
+
 export default function tina(
   options: TinaIntegrationOptions = {}
 ): AstroIntegration {
@@ -19,6 +40,10 @@ export default function tina(
   // Resolved client output dir, captured at config:done and consumed at
   // build:done (only then is the final output location known).
   let clientDir: URL | undefined;
+  // Whether the Cloudflare adapter is in use, resolved at config:done. The
+  // injected Vite plugin reads it lazily (via a thunk) because the plugin is
+  // constructed at config:setup, before the adapter is known.
+  let isCloudflareAdapter = false;
 
   return {
     name: '@tinacms/astro',
@@ -32,10 +57,23 @@ export default function tina(
         // it into the user's source tree — config-time writes churn
         // public/admin on every `astro dev`/`astro build`, break on read-only
         // or sandboxed filesystems, and can race `tinacms build`.
-        updateConfig({ vite: { plugins: [bridgeDevPlugin()] } });
+        updateConfig({
+          vite: {
+            plugins: [
+              bridgeDevPlugin(),
+              cloudflareImportMetaUrlPlugin(() => isCloudflareAdapter),
+            ],
+          },
+        });
       },
       'astro:config:done': ({ config }) => {
         clientDir = config.build.client;
+        // config:done runs before Vite is created and after every integration
+        // (including a late-registered adapter) has resolved, so config.adapter
+        // is reliable here.
+        isCloudflareAdapter =
+          options.cloudflareWorkers ??
+          config.adapter?.name === CLOUDFLARE_ADAPTER_NAME;
       },
       'astro:build:done': ({ logger }) => {
         // Build: emit the bridge next to the admin SPA in the *output* tree.
@@ -82,6 +120,36 @@ function bridgeDevPlugin(): VitePlugin {
   };
 }
 
+/**
+ * Cloudflare Workers (workerd) runs the server bundle in a runtime where the
+ * bundled `import.meta.url` is not a valid absolute URL. Astro's experimental
+ * Container API — used by the on-demand island route — calls
+ * `new URL(import.meta.url)` while building its manifest, which throws
+ * "Invalid URL string" and 500s the island render in production. The paths it
+ * seeds from that URL are never dereferenced for an in-memory render, so a
+ * valid placeholder is harmless. We inject it as a Vite `define`, but only in
+ * the server environments (never the client bundle, which needs the real value)
+ * and only under the Cloudflare adapter (faking it on a Node server would break
+ * real file resolution).
+ *
+ * TODO: remove once Astro guards the unconditional `new URL(import.meta.url)` in
+ * createManifest (tracked upstream in withastro/astro).
+ */
+function cloudflareImportMetaUrlPlugin(
+  isCloudflare: () => boolean
+): VitePlugin {
+  const define = { 'import.meta.url': WORKERD_IMPORT_META_URL };
+  return {
+    name: '@tinacms/astro:cloudflare-import-meta-url',
+    // No `apply`: the define is needed in both the build (ssr) and dev envs.
+    configEnvironment(name) {
+      if (!isCloudflare()) return;
+      if (!SERVER_ENVIRONMENTS.has(name)) return;
+      return { define };
+    },
+  };
+}
+
 function emitBridgeAsset(adminDir: string, logger: AstroIntegrationLogger) {
   try {
     mkdirSync(adminDir, { recursive: true });

package/src/types.ts

@@ -44,8 +44,57 @@ export type CodeBlockElement = {
   children?: { children: TextElement[] }[];
 };
 
+/** Per-column horizontal alignment for table cells. */
+export type TableAlign = 'left' | 'right' | 'center';
+
+/** A paragraph — the block wrapper Tina puts around inline content. */
+export type ParagraphElement = {
+  type: 'p';
+  children: InlineElement[];
+};
+
+/** A single table cell. Its content is wrapped in a paragraph by the parser. */
+export type TableCellElement = {
+  type: 'td';
+  children: ParagraphElement[];
+};
+
+export type TableRowElement = {
+  type: 'tr';
+  children: TableCellElement[];
+};
+
+/**
+ * Native markdown table node (the shape `@tinacms/mdx` emits from a GFM
+ * table). Rows/cells are plain `tr`/`td`; per-column text-align lives on
+ * `props.align`. Mirrors `TableElement` in
+ * `packages/@tinacms/mdx/src/parse/plate.ts`.
+ */
+export type TableElement = {
+  type: 'table';
+  props?: { align?: TableAlign[] };
+  children: TableRowElement[];
+};
+
+/** A cell in the legacy MDX-flow table; its `value` is itself rich text. */
+export type MdxTableCell = { value: TinaRichTextContent };
+
+export type MdxTableRow = { tableCells: MdxTableCell[] };
+
+/**
+ * Props of the legacy MDX-flow table — an `mdxJsxFlowElement` named `table`
+ * whose cells live on `props.tableRows` rather than as `tr`/`td` child nodes.
+ * Older editors produced this shape; `MdxTableNode.astro` still renders it.
+ */
+export type MdxTableProps = {
+  align?: TableAlign[];
+  /** When true, the first row is rendered as a `<thead>` of `<th>`. */
+  firstRowHeader?: boolean;
+  tableRows?: MdxTableRow[];
+};
+
 export type BlockElement =
-  | { type: 'p'; children: InlineElement[] }
+  | ParagraphElement
   | {
       type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
       children: InlineElement[];
@@ -58,6 +107,7 @@ export type BlockElement =
   | { type: 'break' }
   | ImageElement
   | CodeBlockElement
+  | TableElement
   | { type: 'maybe_mdx' }
   | { type: 'html'; value: string }
   | { type: 'invalid_markdown'; value: string };
@@ -93,5 +143,94 @@ export type TinaRichTextContent =
   | null
   | undefined;
 
-/** A map of mdxJsx name (or default tag override) → Astro component. */
-export type CustomComponentsMap = Record<string, AstroComponent>;
+/**
+ * An Astro (or framework) component that accepts props `P`. Astro's language
+ * server types an imported `.astro` component as `(props: Props) => any`, so
+ * this both accepts such a component and checks that its `Props` match what
+ * the renderer passes to the override.
+ */
+export type AstroComponentWithProps<P> = (props: P) => any;
+
+/** Props passed to an `a` (link) override. */
+export interface LinkComponentProps {
+  url: string;
+}
+/** Props passed to an `img` (image) override. */
+export interface ImageComponentProps {
+  url: string;
+  alt?: string;
+  caption?: string;
+}
+/** Props passed to a `code_block` override. */
+export interface CodeBlockComponentProps {
+  value: string;
+  lang?: string;
+}
+/** Props passed to `html` / `html_inline` overrides. */
+export interface HtmlComponentProps {
+  value: string;
+}
+/** Props passed to a `table` override (native table node). */
+export interface TableComponentProps {
+  node: TableElement;
+}
+/** Props passed to `td` / `th` overrides. */
+export interface TableCellComponentProps {
+  align?: TableAlign;
+}
+
+/**
+ * Map of component name → Astro component, passed to `<TinaMarkdown>`.
+ *
+ * The built-in keys below are suggested by editor autocomplete and override
+ * the matching default element/tag; the named-prop overrides are typed with
+ * the exact props the renderer passes (e.g. `code_block` receives
+ * `{ value, lang }`).
+ *
+ * Custom rich-text **templates** render as mdxJsx nodes dispatched by `name`,
+ * with their fields passed as props. Register one under its template name.
+ * By default a custom key accepts any component; supply the optional `Custom`
+ * type param to type them precisely and have the registration checked:
+ *
+ * ```ts
+ * // template `cta` with a `title: string` field
+ * const components: CustomComponentsMap<{ cta: { title: string } }> = {
+ *   cta: Cta, // ← Cta's Props must be assignable from `{ title: string }`
+ * };
+ * ```
+ */
+export type CustomComponentsMap<
+  Custom extends Record<string, object> = Record<never, never>,
+> = {
+  // Block/inline overrides whose content comes through the default slot.
+  p?: AstroComponent;
+  h1?: AstroComponent;
+  h2?: AstroComponent;
+  h3?: AstroComponent;
+  h4?: AstroComponent;
+  h5?: AstroComponent;
+  h6?: AstroComponent;
+  ul?: AstroComponent;
+  ol?: AstroComponent;
+  li?: AstroComponent;
+  lic?: AstroComponent;
+  blockquote?: AstroComponent;
+  tr?: AstroComponent;
+  hr?: AstroComponent;
+  break?: AstroComponent;
+  // Overrides that receive named props.
+  a?: AstroComponentWithProps<LinkComponentProps>;
+  img?: AstroComponentWithProps<ImageComponentProps>;
+  code_block?: AstroComponentWithProps<CodeBlockComponentProps>;
+  html?: AstroComponentWithProps<HtmlComponentProps>;
+  html_inline?: AstroComponentWithProps<HtmlComponentProps>;
+  table?: AstroComponentWithProps<TableComponentProps>;
+  td?: AstroComponentWithProps<TableCellComponentProps>;
+  th?: AstroComponentWithProps<TableCellComponentProps>;
+} & {
+  // Custom templates declared via the `Custom` param — typed by their props.
+  [K in keyof Custom]?: AstroComponentWithProps<Custom[K]>;
+} & {
+  // Any other custom mdxJsx component name (matched by `node.name`).
+  [name: string]: AstroComponent | undefined;
+};