@tinacms/astro 0.0.1 → 0.3.0

package/src/ImageNode.astro

@@ -0,0 +1,17 @@
+---
+import { sanitizeImageSrc } from './sanitize';
+import type { CustomComponentsMap, ImageElement } from './types';
+
+interface Props {
+  node: ImageElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+const Override = components.img;
+---
+{Override ? (
+  <Override url={node.url} alt={node.alt} caption={node.caption} />
+) : (
+  <img src={sanitizeImageSrc(node.url)} alt={node.alt ?? ''} />
+)}

package/src/LinkNode.astro

@@ -0,0 +1,22 @@
+---
+import TinaMarkdown from './TinaMarkdown.astro';
+import { sanitizeHref } from './sanitize';
+import type { CustomComponentsMap, LinkElement } from './types';
+
+interface Props {
+  node: LinkElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+const Override = components.a;
+---
+{Override ? (
+  <Override url={node.url}>
+    <TinaMarkdown content={node.children} components={components} />
+  </Override>
+) : (
+  <a href={sanitizeHref(node.url)}>
+    <TinaMarkdown content={node.children} components={components} />
+  </a>
+)}

package/src/MdxNode.astro

@@ -0,0 +1,24 @@
+---
+/**
+ * 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.
+ */
+import type { CustomComponentsMap, MdxElement } from './types';
+
+interface Props {
+  node: MdxElement;
+  components: CustomComponentsMap;
+}
+
+const { node, components } = Astro.props;
+const MdxComponent = components[node.name];
+---
+{MdxComponent ? (
+  <MdxComponent {...(node.props ?? {})} />
+) : (
+  <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}
+  </span>
+)}

package/src/Node.astro

@@ -13,7 +13,10 @@ import Leaf from './Leaf.astro';
 import LinkNode from './LinkNode.astro';
 import MdxNode from './MdxNode.astro';
 import type {
+  CodeBlockElement,
   CustomComponentsMap,
+  ImageElement,
+  LinkElement,
   MdxElement,
   TextElement,
   TinaRichTextNode,
@@ -46,11 +49,11 @@ const containerTypes = new Set([
 {containerTypes.has(t) ? (
   <Container node={node as TinaRichTextNode & { children: TinaRichTextNode[] }} components={components} />
 ) : t === 'a' ? (
-  <LinkNode node={node as { url: string; children: TinaRichTextNode[] }} components={components} />
+  <LinkNode node={node as LinkElement} components={components} />
 ) : t === 'img' ? (
-  <ImageNode node={node as { url: string; alt?: string; caption?: string }} components={components} />
+  <ImageNode node={node as ImageElement} components={components} />
 ) : t === 'code_block' ? (
-  <CodeBlockNode node={node as { value?: string; lang?: string; children?: { children: TextElement[] }[] }} components={components} />
+  <CodeBlockNode node={node as CodeBlockElement} components={components} />
 ) : t === 'text' ? (
   <Leaf node={node as TextElement} />
 ) : t === 'mdxJsxFlowElement' || t === 'mdxJsxTextElement' ? (
@@ -60,7 +63,11 @@ const containerTypes = new Set([
 ) : t === 'break' ? (
   Override ? <Override /> : <br />
 ) : t === 'html' || t === 'html_inline' ? (
-  <Fragment set:html={(node as { value: string }).value} />
+  Override ? (
+    <Override value={(node as { value: string }).value} />
+  ) : (
+    (node as { value: string }).value
+  )
 ) : t === 'invalid_markdown' ? (
   <pre>{(node as { value: string }).value}</pre>
 ) : null}

package/src/TinaIsland.astro

@@ -0,0 +1,44 @@
+---
+import { adminOrigins } from './internal/admin-origin';
+
+interface Props {
+  name: string;
+  wrapper: { tag: string; className?: string };
+  params?: Record<string, string | number>;
+  /** Mark at most one `<TinaIsland>` per page as the primary editable
+   *  region so the admin opens it on load instead of the multi-document
+   *  picker. SSR pages don't need this — the first `requestWithMetadata()`
+   *  is treated as primary automatically. */
+  primary?: boolean;
+}
+
+const { name, wrapper, params, primary } = Astro.props;
+const search = params
+  ? `?${new URLSearchParams(
+      Object.fromEntries(
+        Object.entries(params).map(([key, value]) => [key, String(value)])
+      )
+    ).toString()}`
+  : '';
+const marker = `/tina-island/${name}${search}`;
+const Tag = wrapper.tag as keyof HTMLElementTagNameMap;
+const adminOrigin = adminOrigins();
+---
+<!-- In-iframe bridge bootstrap for prerendered pages (the middleware only
+     injects on SSR responses). No-op outside the admin iframe; the
+     window flag dedupes across multiple <TinaIsland> on one page. -->
+<script is:inline type="module" define:vars={{ adminOrigin }}>
+  if (window.self !== window.top && !window.__tinaBootstrap) {
+    window.__tinaBootstrap = 1;
+    const { init, refreshForms } = await import('/admin/bridge.js');
+    init(adminOrigin ? { adminOrigin } : undefined);
+    document.addEventListener('astro:page-load', refreshForms);
+  }
+</script>
+<Tag
+  class={wrapper.className}
+  data-tina-island={marker}
+  data-tina-island-primary={primary ? '' : undefined}
+>
+  <slot />
+</Tag>

package/src/TinaMarkdown.astro

@@ -8,7 +8,15 @@
  * (mdxJsxFlowElement / mdxJsxTextElement). Default tags (p, h1-h6, ul, ol,
  * li, blockquote, etc.) can be overridden by registering the tag name on
  * the same map. Recurses via this same component for nested rich-text.
+ *
+ * This file is also the package's main runtime entry — Astro projects
+ * import `TinaMarkdown` (default) plus the `tina` / `tinaField` helpers
+ * from the same subpath. Re-exporting from the .astro file lets named
+ * imports resolve through the same path that serves the component.
  */
+export { requestWithMetadata } from './data';
+export { tinaField } from './tina-field';
+
 import Node from './Node.astro';
 import type { CustomComponentsMap, TinaRichTextContent } from './types';
 

package/src/__tests__/IslandStub.astro

@@ -0,0 +1,8 @@
+---
+// Minimal component for island-route tests — echoes the prop it's given.
+interface Props {
+  value: unknown;
+}
+const { value } = Astro.props;
+---
+<span data-value={JSON.stringify(value)}>stub</span>

package/src/__tests__/TinaIsland.test.ts

@@ -0,0 +1,60 @@
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { beforeEach, describe, expect, it } from 'vitest';
+import TinaIsland from '../TinaIsland.astro';
+
+let container: AstroContainer;
+
+beforeEach(async () => {
+  container = await AstroContainer.create();
+});
+
+const wrapper = { tag: 'article', className: 'prose' };
+
+describe('TinaIsland', () => {
+  it('emits the data-tina-island marker with encoded params', async () => {
+    const html = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper, params: { slug: 'hello-world' } },
+      slots: { default: 'BODY' },
+    });
+    expect(html).toContain(
+      'data-tina-island="/tina-island/post?slug=hello-world"'
+    );
+    expect(html).toContain('BODY');
+    expect(html).toContain('class="prose"');
+  });
+
+  it('emits the guarded in-iframe bootstrap script', async () => {
+    const html = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper },
+      slots: { default: 'BODY' },
+    });
+    expect(html).toContain('window.__tinaBootstrap');
+    expect(html).toContain("import('/admin/bridge.js')");
+    expect(html).toContain('window.self !== window.top');
+  });
+
+  it('threads the resolved admin origin through define:vars', async () => {
+    const html = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper },
+      slots: { default: 'BODY' },
+    });
+    // `define:vars` emits the value resolved from PUBLIC_TINA_ADMIN_ORIGIN —
+    // `null` here since it's unset in the test env.
+    expect(html).toContain('adminOrigin = null');
+    expect(html).toContain('init(adminOrigin ? { adminOrigin } : undefined)');
+  });
+
+  it('marks the wrapper data-tina-island-primary only when primary is set', async () => {
+    const withoutPrimary = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper },
+      slots: { default: 'BODY' },
+    });
+    expect(withoutPrimary).not.toContain('data-tina-island-primary');
+
+    const withPrimary = await container.renderToString(TinaIsland, {
+      props: { name: 'post', wrapper, primary: true },
+      slots: { default: 'BODY' },
+    });
+    expect(withPrimary).toContain('data-tina-island-primary');
+  });
+});

package/src/__tests__/TinaMarkdown.test.ts

@@ -0,0 +1,112 @@
+import { experimental_AstroContainer as AstroContainer } from 'astro/container';
+import { beforeEach, describe, expect, it } from 'vitest';
+import TinaMarkdown from '../TinaMarkdown.astro';
+import basicKitchenSink from './fixtures/basic-kitchen-sink.json';
+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';
+
+let container: AstroContainer;
+
+beforeEach(async () => {
+  container = await AstroContainer.create();
+});
+
+/**
+ * Astro injects dev-only `data-astro-source-file` / `data-astro-source-loc`
+ * attributes for editor source-mapping. Strip them so snapshots and string
+ * assertions stay stable across Astro versions and dev/prod modes.
+ */
+const stripDevAttrs = (html: string) =>
+  html.replace(/\s+data-astro-source-(?:file|loc)="[^"]*"/g, '');
+
+const render = async (props: Parameters<typeof container.renderToString>[1]) =>
+  stripDevAttrs(await container.renderToString(TinaMarkdown, props));
+
+describe('TinaMarkdown', () => {
+  it('renders the basic kitchen-sink fixture', async () => {
+    const html = await render({ props: { content: basicKitchenSink } });
+    expect(html).toMatchSnapshot();
+  });
+
+  it('renders nested leaf-mark formatting', async () => {
+    const html = await render({ props: { content: leafMarks } });
+    expect(html).toMatchSnapshot();
+    expect(html).toContain('<strong>');
+    expect(html).toContain('<em>');
+    expect(html).toContain('<code>inline code</code>');
+  });
+
+  it('renders code blocks with language class', async () => {
+    const html = await render({ props: { content: codeBlock } });
+    expect(html).toMatchSnapshot();
+    expect(html).toMatch(/<pre><code class="language-javascript">/);
+  });
+
+  it('falls back to a placeholder when an mdxJsx component is unregistered', async () => {
+    const html = await render({ props: { content: mdxJsxFlow } });
+    expect(html).toContain('No component provided for someFeature');
+  });
+
+  it('falls back to a placeholder for unregistered inline mdxJsx', async () => {
+    const html = await render({ props: { content: mdxJsxText } });
+    expect(html).toMatch(/No component provided for/);
+  });
+
+  it('renders an empty array when content is null', async () => {
+    const html = await render({ props: { content: null } });
+    expect(html.trim()).toBe('');
+  });
+
+  it('accepts a bare array of nodes (not wrapped in root)', async () => {
+    const nodes = [{ type: 'p', children: [{ type: 'text', text: 'hello' }] }];
+    const html = await render({ props: { content: nodes } });
+    expect(html).toContain('<p>hello</p>');
+  });
+
+  it('renders sanitized hrefs on link nodes', async () => {
+    const nodes = [
+      {
+        type: 'p',
+        children: [
+          {
+            type: 'a',
+            url: 'javascript:alert(1)',
+            children: [{ type: 'text', text: 'click' }],
+          },
+        ],
+      },
+    ];
+    const html = await render({ props: { content: nodes } });
+    expect(html).not.toContain('javascript:');
+    expect(html).toContain('href="#"');
+  });
+});
+
+describe('TinaMarkdown — components map', () => {
+  it('dispatches a registered mdxJsx component by name', async () => {
+    const MyFeature = await import('./fixtures/MyFeature.astro');
+    const html = await render({
+      props: {
+        content: mdxJsxFlow,
+        components: { someFeature: MyFeature.default },
+      },
+    });
+    expect(html).toContain('<section data-test="my-feature">');
+    expect(html).not.toContain('No component provided for someFeature');
+  });
+
+  it('overrides a default tag (h1) when registered on the components map', async () => {
+    const FancyHeading = await import('./fixtures/FancyHeading.astro');
+    const nodes = [{ type: 'h1', children: [{ type: 'text', text: 'hello' }] }];
+    const html = await render({
+      props: {
+        content: nodes,
+        components: { h1: FancyHeading.default },
+      },
+    });
+    expect(html).toContain('class="fancy"');
+    expect(html).toContain('hello');
+  });
+});

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TinaMarkdown > renders code blocks with language class 1`] = `"<pre><code class="language-javascript">const test = 123</code></pre><pre><code>some random code</code></pre>"`;
+
+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>"`;

package/src/__tests__/fixtures/FancyHeading.astro

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

package/src/__tests__/fixtures/MyFeature.astro

@@ -0,0 +1,4 @@
+---
+const props = Astro.props;
+---
+<section data-test="my-feature">{JSON.stringify(props)}</section>

package/src/__tests__/fixtures/basic-kitchen-sink.json

@@ -0,0 +1,60 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "h1",
+      "children": [{ "type": "text", "text": "Heading" }]
+    },
+    {
+      "type": "p",
+      "children": [{ "type": "text", "text": "A paragraph." }]
+    },
+    {
+      "type": "blockquote",
+      "children": [{ "type": "text", "text": "A quote." }]
+    },
+    {
+      "type": "ul",
+      "children": [
+        {
+          "type": "li",
+          "children": [
+            {
+              "type": "lic",
+              "children": [{ "type": "text", "text": "An item" }]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "hr",
+      "children": [{ "type": "text", "text": "" }]
+    },
+    {
+      "type": "p",
+      "children": [
+        { "type": "text", "text": "A " },
+        {
+          "type": "a",
+          "url": "http://example.com",
+          "title": "Example",
+          "children": [{ "type": "text", "text": "link" }]
+        },
+        { "type": "text", "text": "." }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "img",
+          "url": "https://get.svg.workers.dev",
+          "alt": "Alt Text",
+          "caption": "Image Title",
+          "children": [{ "type": "text", "text": "" }]
+        }
+      ]
+    }
+  ]
+}

package/src/__tests__/fixtures/code-block.json

@@ -0,0 +1,34 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "code_block",
+      "lang": "javascript",
+      "value": "const test = 123",
+      "children": [
+        {
+          "type": "code_line",
+          "children": [
+            {
+              "text": "const test = 123"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "code_block",
+      "value": "some random code",
+      "children": [
+        {
+          "type": "code_line",
+          "children": [
+            {
+              "text": "some random code"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/__tests__/fixtures/leaf-marks.json

@@ -0,0 +1,199 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Some "
+        },
+        {
+          "type": "text",
+          "text": "bold",
+          "bold": true
+        },
+        {
+          "type": "text",
+          "text": " text"
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Some "
+        },
+        {
+          "type": "text",
+          "text": "bold and emphasized",
+          "italic": true,
+          "bold": true
+        },
+        {
+          "type": "text",
+          "text": " text"
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Marks with "
+        },
+        {
+          "type": "text",
+          "text": "emphasized text nesting ",
+          "italic": true
+        },
+        {
+          "type": "text",
+          "text": "bold",
+          "italic": true,
+          "bold": true
+        },
+        {
+          "type": "text",
+          "text": " text",
+          "italic": true
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Hello ",
+          "bold": true
+        },
+        {
+          "type": "text",
+          "text": "world",
+          "bold": true,
+          "italic": true
+        },
+        {
+          "type": "text",
+          "text": ", again",
+          "bold": true
+        },
+        {
+          "type": "text",
+          "text": " "
+        },
+        {
+          "type": "text",
+          "text": "here",
+          "italic": true
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Some "
+        },
+        {
+          "type": "text",
+          "text": "inline code",
+          "code": true
+        },
+        {
+          "type": "text",
+          "text": " examples"
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Hello ",
+          "italic": true
+        },
+        {
+          "type": "text",
+          "text": "some code",
+          "code": true,
+          "italic": true
+        },
+        {
+          "type": "text",
+          "text": ", again",
+          "italic": true
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Hello ",
+          "bold": true
+        },
+        {
+          "type": "a",
+          "url": "https://example.com",
+          "title": "Example Site",
+          "children": [
+            {
+              "type": "text",
+              "text": "world",
+              "bold": true
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "Hello ",
+          "italic": true,
+          "bold": true
+        },
+        {
+          "type": "a",
+          "url": "https://example.com",
+          "title": "Example Site",
+          "children": [
+            {
+              "type": "text",
+              "text": "world",
+              "italic": true,
+              "bold": true
+            }
+          ]
+        },
+        {
+          "type": "text",
+          "text": " And some other text, which has a ",
+          "italic": true
+        },
+        {
+          "type": "a",
+          "url": "https://something.com",
+          "title": null,
+          "children": [
+            {
+              "type": "text",
+              "text": "link to something",
+              "italic": true
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}