@tinacms/astro 0.0.1 → 0.2.0

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,42 @@
+---
+/**
+ * Marker wrapper for an editable region. Emits the `data-tina-island`
+ * attribute the bridge looks for, with the wrapper element/className taken
+ * from the registry entry — so the page-side element matches the server's
+ * `IslandConfig.wrapper` automatically.
+ *
+ * Usage:
+ *
+ * ```astro
+ * import TinaIsland from '@tinacms/astro/TinaIsland.astro';
+ * import { islands } from '../lib/islands';
+ *
+ * <TinaIsland name="post" wrapper={islands.post.wrapper} params={{ slug }}>
+ *   <PostBody data={data} />
+ * </TinaIsland>
+ * ```
+ *
+ * `name` must match a key in the `IslandRegistry` you passed to
+ * `experimental_createIslandRoute`. `params` is encoded as URL search
+ * params and forwarded to the route handler.
+ */
+interface Props {
+  name: string;
+  wrapper: { tag: string; className?: string };
+  params?: Record<string, string | number>;
+}
+
+const { name, wrapper, params } = 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;
+---
+<Tag class={wrapper.className} data-tina-island={marker}>
+  <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__/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
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}

package/src/__tests__/fixtures/mdx-jsx-flow.json

@@ -0,0 +1,40 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "h1",
+      "children": [
+        {
+          "type": "text",
+          "text": "hello"
+        }
+      ]
+    },
+    {
+      "type": "mdxJsxFlowElement",
+      "name": "someFeature",
+      "children": [
+        {
+          "type": "text",
+          "text": ""
+        }
+      ],
+      "props": {
+        "children": {
+          "type": "root",
+          "children": [
+            {
+              "type": "p",
+              "children": [
+                {
+                  "type": "text",
+                  "text": "Testing this thing"
+                }
+              ]
+            }
+          ]
+        }
+      }
+    }
+  ]
+}

package/src/__tests__/fixtures/mdx-jsx-text.json

@@ -0,0 +1,53 @@
+{
+  "type": "root",
+  "children": [
+    {
+      "type": "h1",
+      "children": [
+        {
+          "type": "text",
+          "text": "hello "
+        },
+        {
+          "type": "mdxJsxTextElement",
+          "name": "someFeature",
+          "children": [
+            {
+              "type": "text",
+              "text": ""
+            }
+          ],
+          "props": {
+            "_value": "abc"
+          }
+        }
+      ]
+    },
+    {
+      "type": "p",
+      "children": [
+        {
+          "type": "text",
+          "text": "When not separated by whitespace"
+        },
+        {
+          "type": "mdxJsxTextElement",
+          "name": "someFeature",
+          "children": [
+            {
+              "type": "text",
+              "text": ""
+            }
+          ],
+          "props": {
+            "_value": "123"
+          }
+        },
+        {
+          "type": "text",
+          "text": "it still works"
+        }
+      ]
+    }
+  ]
+}