@tinacms/astro 0.0.1 → 0.2.0

package/src/middleware.ts

@@ -0,0 +1,118 @@
+/**
+ * Astro middleware injected by the `tina()` integration.
+ *
+ * - Resolves `isEditMode(request)` once and stashes it on
+ *   `context.locals.tinaEdit` so pages and components can branch on edit
+ *   context without re-parsing headers.
+ * - Scopes the request and a per-request forms collector via
+ *   AsyncLocalStorage so `tina()` reads them implicitly — the caller
+ *   never threads `Astro.request` through their loaders.
+ * - In edit mode only, splices `<div data-tina-form>` payloads and a
+ *   `<script>` that loads `/_tina/bridge.js` before `</head>`. The user
+ *   writes nothing in their layout, and production HTML is byte-
+ *   identical to a Tina-free Astro app.
+ * - In edit mode only, refreshes the `__tina_edit` cookie so the session
+ *   survives in-iframe link clicks (whose Referer is the previous
+ *   preview page, not `/admin/`).
+ */
+import type { MiddlewareHandler } from 'astro';
+import { escapeAttr } from './internal/escape';
+import { type CollectedForm, formsStore } from './internal/forms-store';
+import { requestStore } from './internal/request-context';
+import { EDIT_COOKIE_HEADER, isEditMode } from './is-edit-mode';
+
+const HEAD_CLOSE = '</head>';
+
+export const onRequest: MiddlewareHandler = (context, next) => {
+  const editing = isEditMode(context.request);
+  (context.locals as { tinaEdit?: boolean }).tinaEdit = editing;
+
+  const forms: CollectedForm[] = [];
+  return requestStore.run(context.request, () =>
+    formsStore.run(forms, async () => {
+      const response = await next();
+      return editing ? injectEditMode(response, forms) : response;
+    })
+  );
+};
+
+export default onRequest;
+
+async function injectEditMode(
+  response: Response,
+  forms: CollectedForm[]
+): Promise<Response> {
+  const init = editModeInit(response);
+  const contentType = response.headers.get('content-type') ?? '';
+
+  // Redirects / JSON / assets — pass body through and just keep the cookie fresh.
+  if (!contentType.includes('text/html')) {
+    return new Response(response.body, init);
+  }
+
+  const html = await response.text();
+  const headEnd = html.indexOf(HEAD_CLOSE);
+  if (headEnd === -1) {
+    // No </head> to anchor against — return the body untouched.
+    return new Response(html, init);
+  }
+
+  const injection = renderInjection(forms);
+  return new Response(
+    html.slice(0, headEnd) + injection + html.slice(headEnd),
+    init
+  );
+}
+
+function editModeInit(response: Response): ResponseInit {
+  const headers = new Headers(response.headers);
+  // Body length changed; let the runtime re-compute it.
+  headers.delete('content-length');
+  headers.append('Set-Cookie', EDIT_COOKIE_HEADER);
+  return { status: response.status, statusText: response.statusText, headers };
+}
+
+function renderInjection(forms: CollectedForm[]): string {
+  const formDivs = forms
+    .map(
+      (form) =>
+        `<div data-tina-form="${escapeAttr(JSON.stringify(form))}" hidden></div>`
+    )
+    .join('');
+  return formDivs + bridgeScript();
+}
+
+function bridgeScript(): string {
+  const origins = adminOrigins();
+  const initArg = origins ? `{adminOrigin:${JSON.stringify(origins)}}` : '';
+  return (
+    `<script type="module">` +
+    `import{init,refreshForms}from"/_tina/bridge.js";` +
+    `init(${initArg});` +
+    `document.addEventListener("astro:page-load",refreshForms);` +
+    `</script>`
+  );
+}
+
+/**
+ * Read `PUBLIC_TINA_ADMIN_ORIGIN` (comma-separated for multi-origin setups)
+ * from Astro's `import.meta.env`. Returns null when unset so `bridge.init()`
+ * falls back to `window.location.origin` — the common same-host case.
+ *
+ * `import.meta.env` is cast inline because the package ships no `env.d.ts`
+ * to keep the public type surface free of Vite/Astro client-types coupling.
+ */
+function adminOrigins(): string[] | null {
+  const env = (
+    import.meta as ImportMeta & {
+      env?: Record<string, string | undefined>;
+    }
+  ).env;
+  const raw = env?.PUBLIC_TINA_ADMIN_ORIGIN;
+  if (!raw) return null;
+  const origins = raw
+    .split(',')
+    .map((s) => s.trim())
+    .filter(Boolean);
+  return origins.length > 0 ? origins : null;
+}

package/src/sanitize.ts

@@ -0,0 +1,64 @@
+/**
+ * Sanitizes a CMS-supplied href, returning a safe URL or the fallback.
+ * Blocks dangerous schemes (javascript:, data:, vbscript:) and
+ * protocol-relative URLs (//evil.com). Allows relative paths, http(s),
+ * and mailto:.
+ */
+export function sanitizeHref(value: unknown, fallback = '#'): string {
+  if (typeof value !== 'string') return fallback;
+  const trimmed = value.trim();
+  if (!trimmed) return fallback;
+  const lower = trimmed.toLowerCase();
+  if (
+    lower.startsWith('javascript:') ||
+    lower.startsWith('data:') ||
+    lower.startsWith('vbscript:')
+  ) {
+    return fallback;
+  }
+  if (
+    (trimmed.startsWith('/') && !trimmed.startsWith('//')) ||
+    trimmed.startsWith('./') ||
+    trimmed.startsWith('../') ||
+    trimmed.startsWith('#')
+  ) {
+    return trimmed;
+  }
+  try {
+    const url = new URL(trimmed);
+    if (
+      url.protocol === 'http:' ||
+      url.protocol === 'https:' ||
+      url.protocol === 'mailto:'
+    ) {
+      return trimmed;
+    }
+  } catch {
+    return fallback;
+  }
+  return fallback;
+}
+
+/**
+ * Validates a CMS-supplied image src, returning the src string if safe or ''
+ * if it is empty, not a string, or uses a non-http(s)/relative scheme.
+ */
+export function sanitizeImageSrc(src: unknown): string {
+  if (typeof src !== 'string') return '';
+  const trimmed = src.trim();
+  if (!trimmed) return '';
+  if (
+    trimmed.startsWith('./') ||
+    trimmed.startsWith('../') ||
+    (trimmed.startsWith('/') && !trimmed.startsWith('//'))
+  ) {
+    return trimmed;
+  }
+  try {
+    const url = new URL(trimmed);
+    if (url.protocol === 'http:' || url.protocol === 'https:') return trimmed;
+  } catch {
+    return '';
+  }
+  return '';
+}

package/src/tina-field.ts

@@ -0,0 +1 @@
+export * from '@tinacms/bridge/tina-field';

package/src/types.ts

@@ -0,0 +1,97 @@
+/**
+ * Plate AST node types Tina returns from rich-text fields. Mirrors the shape
+ * documented in `packages/@tinacms/mdx/src/parse/plate.ts` — kept inline so
+ * the Astro renderer can stay framework-free and not pull @tinacms/mdx into
+ * the page bundle.
+ */
+
+/**
+ * Astro doesn't publicly export `AstroComponentFactory`, so we use a
+ * structural placeholder. The consumer's Astro pipeline performs the real
+ * compile-time check that whatever they pass is a valid component.
+ */
+export type AstroComponent = (...args: never[]) => unknown;
+
+export type TinaRichTextRoot = {
+  type: 'root';
+  children: TinaRichTextNode[];
+};
+
+export type TinaRichTextNode =
+  | BlockElement
+  | InlineElement
+  | TextElement
+  | MdxElement;
+
+export type LinkElement = {
+  type: 'a';
+  url: string;
+  title?: string;
+  children: InlineElement[];
+};
+
+export type ImageElement = {
+  type: 'img';
+  url: string;
+  alt?: string;
+  caption?: string;
+};
+
+export type CodeBlockElement = {
+  type: 'code_block';
+  lang?: string;
+  value?: string;
+  children?: { children: TextElement[] }[];
+};
+
+export type BlockElement =
+  | { type: 'p'; children: InlineElement[] }
+  | {
+      type: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+      children: InlineElement[];
+    }
+  | { type: 'blockquote'; children: TinaRichTextNode[] }
+  | { type: 'ul' | 'ol'; children: TinaRichTextNode[] }
+  | { type: 'li'; children: TinaRichTextNode[] }
+  | { type: 'lic'; children: InlineElement[] }
+  | { type: 'hr' }
+  | { type: 'break' }
+  | ImageElement
+  | CodeBlockElement
+  | { type: 'maybe_mdx' }
+  | { type: 'html'; value: string }
+  | { type: 'invalid_markdown'; value: string };
+
+export type InlineElement =
+  | TextElement
+  | LinkElement
+  | { type: 'html_inline'; value: string }
+  | MdxElement;
+
+export type TextElement = {
+  type: 'text';
+  text: string;
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+  strikethrough?: boolean;
+  code?: boolean;
+  highlight?: boolean;
+  highlightColor?: string;
+};
+
+export type MdxElement = {
+  type: 'mdxJsxFlowElement' | 'mdxJsxTextElement';
+  name: string;
+  props: Record<string, unknown>;
+  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>;

package/dist/preview.d.ts

@@ -1 +0,0 @@
-export * from "../src/preview"

package/dist/preview.js

@@ -1 +0,0 @@
-export * from "@tinacms/bridge/preview";