@407dev/cms-astro 0.1.0

package/src/preview/origins.ts

@@ -0,0 +1,29 @@
+export const DEFAULT_EDITOR_ORIGINS: string[] = ['https://web.localhost', 'http://localhost:5173'];
+
+export function resolveEditorOrigins(explicit?: string[] | string): string[] {
+  if (explicit) {
+    if (Array.isArray(explicit) && explicit.length > 0) {
+      return explicit;
+    }
+    if (typeof explicit === 'string' && explicit.trim()) {
+      return [explicit.trim()];
+    }
+  }
+
+  const envVal =
+    typeof process !== 'undefined'
+      ? process.env?.CMS_EDITOR_ORIGINS || process.env?.EDITOR_ORIGIN
+      : undefined;
+
+  if (envVal) {
+    const parsed = envVal
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (parsed.length > 0) {
+      return parsed;
+    }
+  }
+
+  return DEFAULT_EDITOR_ORIGINS;
+}

package/src/preview.ts

@@ -0,0 +1,49 @@
+import type { CmsClient, ContentBundle } from './types';
+
+export * from './preview/origins';
+
+export interface GetPreviewDataOptions {
+  previewToken?: string | null;
+  client: CmsClient;
+  /** @deprecated Site hosts no longer verify preview tokens locally. */
+  previewSecret?: string;
+  siteId?: string;
+}
+
+export interface PreviewBundleResult {
+  ok: boolean;
+  status: number;
+  bundle?: ContentBundle;
+  error?: string;
+}
+
+/**
+ * Retrieves draft content bundle using preview token (verified by content-worker).
+ */
+export async function getPreviewData(options: GetPreviewDataOptions): Promise<PreviewBundleResult> {
+  const { previewToken, client } = options;
+
+  if (!previewToken) {
+    return {
+      ok: false,
+      status: 404,
+      error: 'Preview token is required',
+    };
+  }
+
+  // Fetch draft content bundle from CMS client (verified by content-worker)
+  try {
+    const bundle = await client.getBundle({ previewToken });
+    return {
+      ok: true,
+      status: 200,
+      bundle,
+    };
+  } catch (_err) {
+    return {
+      ok: false,
+      status: 404,
+      error: 'Preview token is not valid for this site',
+    };
+  }
+}

package/src/richtext/RichTextNode.astro

@@ -0,0 +1,130 @@
+---
+import { KNOWN_NODES, getLinkMarkAttrs, renderMarksOnly } from './render';
+import type { RichTextNodeShape } from './render';
+
+export interface RichTextComponents {
+  heading?: unknown;
+  bulletList?: unknown;
+  orderedList?: unknown;
+  listItem?: unknown;
+  blockquote?: unknown;
+  link?: unknown;
+  image?: unknown;
+}
+
+interface Props {
+  node: unknown;
+  components?: RichTextComponents;
+  depth?: number;
+  maxDepth?: number;
+}
+
+const { node, components, depth = 0, maxDepth = 50 } = Astro.props as Props;
+const isDev = import.meta.env.DEV;
+
+const n = (node && typeof node === 'object' ? node : {}) as RichTextNodeShape;
+const nodeType = n.type || '';
+const withinBudget = depth <= maxDepth;
+const known = withinBudget && KNOWN_NODES.has(nodeType);
+
+if (!known && withinBudget && isDev) {
+  console.warn(`[RichText] Skipped unknown node type: "${nodeType}"`);
+}
+
+const children = known && Array.isArray(n.content) ? n.content : [];
+
+const HeadingComponent = components?.heading;
+const level =
+  typeof n.attrs?.level === 'number' && n.attrs.level >= 1 && n.attrs.level <= 6
+    ? n.attrs.level
+    : 2;
+const HeadingTag = `h${level}`;
+
+const BulletListComponent = components?.bulletList;
+const OrderedListComponent = components?.orderedList;
+const orderStart =
+  typeof n.attrs?.start === 'number' && n.attrs.start !== 1 ? n.attrs.start : undefined;
+
+const ListItemComponent = components?.listItem;
+const BlockquoteComponent = components?.blockquote;
+
+const ImageComponent = components?.image;
+const imageSrc = typeof n.attrs?.src === 'string' ? n.attrs.src : '';
+const imageAlt = typeof n.attrs?.alt === 'string' ? n.attrs.alt : '';
+
+const LinkComponent = components?.link;
+const linkAttrs = nodeType === 'text' ? getLinkMarkAttrs(n.marks) : null;
+const markedText = nodeType === 'text' ? renderMarksOnly(n.text || '', n.marks) : '';
+
+const codeLang = typeof n.attrs?.language === 'string' ? n.attrs.language : undefined;
+---
+
+{!known ? null : nodeType === 'doc' ? (
+  children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)
+) : nodeType === 'paragraph' ? (
+  <p>{children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}</p>
+) : nodeType === 'heading' ? (
+  HeadingComponent ? (
+    <HeadingComponent level={level}>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </HeadingComponent>
+  ) : (
+    <HeadingTag>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </HeadingTag>
+  )
+) : nodeType === 'bulletList' ? (
+  BulletListComponent ? (
+    <BulletListComponent>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </BulletListComponent>
+  ) : (
+    <ul>{children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}</ul>
+  )
+) : nodeType === 'orderedList' ? (
+  OrderedListComponent ? (
+    <OrderedListComponent start={orderStart}>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </OrderedListComponent>
+  ) : (
+    <ol start={orderStart}>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </ol>
+  )
+) : nodeType === 'listItem' ? (
+  ListItemComponent ? (
+    <ListItemComponent>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </ListItemComponent>
+  ) : (
+    <li>{children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}</li>
+  )
+) : nodeType === 'blockquote' ? (
+  BlockquoteComponent ? (
+    <BlockquoteComponent>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </BlockquoteComponent>
+  ) : (
+    <blockquote>
+      {children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}
+    </blockquote>
+  )
+) : nodeType === 'codeBlock' ? (
+  <pre><code data-language={codeLang}>{children.map((c) => <Astro.self node={c} components={components} depth={depth + 1} maxDepth={maxDepth} />)}</code></pre>
+) : nodeType === 'hardBreak' ? (
+  <br />
+) : nodeType === 'horizontalRule' ? (
+  <hr />
+) : nodeType === 'image' ? (
+  ImageComponent ? <ImageComponent src={imageSrc} alt={imageAlt} /> : null
+) : nodeType === 'text' ? (
+  linkAttrs && LinkComponent ? (
+    <LinkComponent href={linkAttrs.href} title={linkAttrs.title} target={linkAttrs.target} rel={linkAttrs.rel}>
+      <Fragment set:html={markedText} />
+    </LinkComponent>
+  ) : linkAttrs ? (
+    <a href={linkAttrs.href} title={linkAttrs.title} target={linkAttrs.target} rel={linkAttrs.rel} set:html={markedText} />
+  ) : (
+    <Fragment set:html={markedText} />
+  )
+) : null}

package/src/richtext/render.ts

@@ -0,0 +1,248 @@
+import { isValidLinkHref } from '@407dev/field-types';
+
+export interface RichTextRenderOptions {
+  components?: Record<string, unknown>;
+  maxDepth?: number;
+}
+
+export function escapeHtml(str: string): string {
+  if (typeof str !== 'string') return '';
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+export const KNOWN_NODES = new Set([
+  'doc',
+  'paragraph',
+  'heading',
+  'bulletList',
+  'orderedList',
+  'listItem',
+  'blockquote',
+  'codeBlock',
+  'hardBreak',
+  'horizontalRule',
+  'text',
+  'image',
+]);
+
+const KNOWN_MARKS = new Set(['bold', 'italic', 'underline', 'strike', 'code', 'link']);
+
+export interface RichTextNodeShape {
+  type?: string;
+  text?: string;
+  attrs?: Record<string, unknown>;
+  marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+  content?: unknown[];
+}
+
+export interface LinkMarkAttrs {
+  href: string;
+  target?: string;
+  rel?: string;
+  title?: string;
+}
+
+/** Parses a richtext value (doc object or JSON string) into a doc root, or null if invalid/empty. */
+export function parseRichTextDoc(value: unknown): { type?: string; content?: unknown[] } | null {
+  if (!value) return null;
+  let parsed: unknown = value;
+  if (typeof value === 'string') {
+    try {
+      parsed = JSON.parse(value);
+    } catch {
+      return null;
+    }
+  }
+  if (typeof parsed !== 'object' || parsed === null) return null;
+  const root = parsed as { type?: string; content?: unknown[] };
+  if (root.type !== 'doc' && !Array.isArray(root.content)) return null;
+  return root;
+}
+
+/** Applies non-link marks to escaped text; `link` is resolved separately via getLinkMarkAttrs so callers can swap in a component. */
+export function renderMarksOnly(
+  text: string,
+  marks: Array<{ type: string; attrs?: Record<string, unknown> }> | undefined,
+): string {
+  let out = escapeHtml(text || '');
+  if (!Array.isArray(marks)) return out;
+  for (const mark of marks) {
+    if (!mark || typeof mark !== 'object' || mark.type === 'link' || !KNOWN_MARKS.has(mark.type)) {
+      continue;
+    }
+    if (mark.type === 'bold') out = `<strong>${out}</strong>`;
+    else if (mark.type === 'italic') out = `<em>${out}</em>`;
+    else if (mark.type === 'underline') out = `<u>${out}</u>`;
+    else if (mark.type === 'strike') out = `<s>${out}</s>`;
+    else if (mark.type === 'code') out = `<code>${out}</code>`;
+  }
+  return out;
+}
+
+export function getLinkMarkAttrs(
+  marks: Array<{ type: string; attrs?: Record<string, unknown> }> | undefined,
+): LinkMarkAttrs | null {
+  if (!Array.isArray(marks)) return null;
+  const linkMark = marks.find((m) => m && typeof m === 'object' && m.type === 'link');
+  if (!linkMark) return null;
+
+  const rawHref = linkMark.attrs?.href;
+  if (typeof rawHref !== 'string' || !isValidLinkHref(rawHref)) return null;
+
+  const target = typeof linkMark.attrs?.target === 'string' ? linkMark.attrs.target : undefined;
+  const rel =
+    typeof linkMark.attrs?.rel === 'string'
+      ? linkMark.attrs.rel
+      : target === '_blank'
+        ? 'noopener noreferrer'
+        : undefined;
+  const title = typeof linkMark.attrs?.title === 'string' ? linkMark.attrs.title : undefined;
+
+  return { href: rawHref, target, rel, title };
+}
+
+export function renderRichTextHtml(doc: unknown, options: RichTextRenderOptions = {}): string {
+  if (!doc) return '';
+
+  let parsedDoc: unknown = doc;
+  if (typeof doc === 'string') {
+    try {
+      parsedDoc = JSON.parse(doc);
+    } catch {
+      return `<p>${escapeHtml(doc)}</p>`;
+    }
+  }
+
+  if (typeof parsedDoc !== 'object' || parsedDoc === null) {
+    return '';
+  }
+
+  const root = parsedDoc as { type?: string; content?: unknown[] };
+  if (root.type !== 'doc' && !Array.isArray(root.content)) {
+    return '';
+  }
+
+  const isDev = typeof process !== 'undefined' && process.env?.NODE_ENV === 'development';
+  const maxDepth = options.maxDepth ?? 50;
+
+  function renderNode(node: unknown, depth = 0): string {
+    if (depth > maxDepth) return '';
+    if (!node || typeof node !== 'object') return '';
+
+    const n = node as {
+      type?: string;
+      text?: string;
+      attrs?: Record<string, unknown>;
+      marks?: Array<{ type: string; attrs?: Record<string, unknown> }>;
+      content?: unknown[];
+    };
+
+    const nodeType = n.type || '';
+    if (!KNOWN_NODES.has(nodeType)) {
+      if (isDev) {
+        console.warn(`[RichText] Skipped unknown node type: "${nodeType}"`);
+      }
+      return '';
+    }
+
+    if (nodeType === 'text') {
+      let text = escapeHtml(n.text || '');
+      if (Array.isArray(n.marks)) {
+        for (const mark of n.marks) {
+          if (!mark || typeof mark !== 'object') continue;
+          const markType = mark.type;
+          if (!KNOWN_MARKS.has(markType)) {
+            if (isDev) {
+              console.warn(`[RichText] Skipped unknown mark type: "${markType}"`);
+            }
+            continue;
+          }
+
+          if (markType === 'bold') {
+            text = `<strong>${text}</strong>`;
+          } else if (markType === 'italic') {
+            text = `<em>${text}</em>`;
+          } else if (markType === 'underline') {
+            text = `<u>${text}</u>`;
+          } else if (markType === 'strike') {
+            text = `<s>${text}</s>`;
+          } else if (markType === 'code') {
+            text = `<code>${text}</code>`;
+          } else if (markType === 'link') {
+            const rawHref = mark.attrs?.href;
+            if (typeof rawHref === 'string' && isValidLinkHref(rawHref)) {
+              const href = escapeHtml(rawHref);
+              const target =
+                typeof mark.attrs?.target === 'string'
+                  ? ` target="${escapeHtml(mark.attrs.target)}"`
+                  : '';
+              const rel =
+                typeof mark.attrs?.rel === 'string'
+                  ? ` rel="${escapeHtml(mark.attrs.rel)}"`
+                  : target.includes('_blank')
+                    ? ' rel="noopener noreferrer"'
+                    : '';
+              text = `<a href="${href}"${target}${rel}>${text}</a>`;
+            }
+          }
+        }
+      }
+      return text;
+    }
+
+    const children = Array.isArray(n.content)
+      ? n.content.map((c) => renderNode(c, depth + 1)).join('')
+      : '';
+
+    switch (nodeType) {
+      case 'doc':
+        return children;
+      case 'paragraph':
+        return `<p>${children}</p>`;
+      case 'heading': {
+        const rawLevel = n.attrs?.level;
+        const level = typeof rawLevel === 'number' && rawLevel >= 1 && rawLevel <= 6 ? rawLevel : 2;
+        return `<h${level}>${children}</h${level}>`;
+      }
+      case 'bulletList':
+        return `<ul>${children}</ul>`;
+      case 'orderedList': {
+        const start = n.attrs?.start || n.attrs?.order;
+        const startAttr = typeof start === 'number' && start !== 1 ? ` start="${start}"` : '';
+        return `<ol${startAttr}>${children}</ol>`;
+      }
+      case 'listItem':
+        return `<li>${children}</li>`;
+      case 'blockquote':
+        return `<blockquote>${children}</blockquote>`;
+      case 'codeBlock': {
+        const lang =
+          typeof n.attrs?.language === 'string'
+            ? ` data-language="${escapeHtml(n.attrs.language)}"`
+            : '';
+        return `<pre><code${lang}>${children}</code></pre>`;
+      }
+      case 'hardBreak':
+        return '<br />';
+      case 'horizontalRule':
+        return '<hr />';
+      case 'image': {
+        if (options.components?.image) {
+          const src = typeof n.attrs?.src === 'string' ? escapeHtml(n.attrs.src) : '';
+          const alt = typeof n.attrs?.alt === 'string' ? escapeHtml(n.attrs.alt) : '';
+          return `<img src="${src}" alt="${alt}" />`;
+        }
+        return '';
+      }
+      default:
+        return children;
+    }
+  }
+
+  return renderNode(root);
+}

package/src/richtext.test.ts

@@ -0,0 +1,139 @@
+import { describe, expect, it, vi } from 'vitest';
+import { renderRichTextHtml } from './richtext/render';
+
+describe('RichText Defensive Rendering', () => {
+  it('renders standard ProseMirror nodes and marks to valid HTML', () => {
+    const doc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 1 },
+          content: [{ type: 'text', text: 'Hello World' }],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'This is ' },
+            {
+              type: 'text',
+              text: 'bold and linked',
+              marks: [
+                { type: 'bold' },
+                {
+                  type: 'link',
+                  attrs: { href: 'https://example.com', target: '_blank' },
+                },
+              ],
+            },
+            { type: 'text', text: '.' },
+          ],
+        },
+      ],
+    };
+
+    const html = renderRichTextHtml(doc);
+    expect(html).toBe(
+      '<h1>Hello World</h1><p>This is <a href="https://example.com" target="_blank" rel="noopener noreferrer"><strong>bold and linked</strong></a>.</p>',
+    );
+  });
+
+  it('safely escapes script-shaped text content', () => {
+    const doc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: '<script>alert("xss")</script>' }],
+        },
+      ],
+    };
+
+    const html = renderRichTextHtml(doc);
+    expect(html).toBe('<p>&lt;script&gt;alert(&quot;xss&quot;)&lt;/script&gt;</p>');
+    expect(html).not.toContain('<script>');
+  });
+
+  it('rejects javascript: and protocol-relative links', () => {
+    const doc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Malicious Link',
+              marks: [{ type: 'link', attrs: { href: 'javascript:alert(1)' } }],
+            },
+            {
+              type: 'text',
+              text: 'Protocol Relative',
+              marks: [{ type: 'link', attrs: { href: '//evil.com' } }],
+            },
+          ],
+        },
+      ],
+    };
+
+    const html = renderRichTextHtml(doc);
+    // Invalid href links should omit the <a> wrapper
+    expect(html).toBe('<p>Malicious LinkProtocol Relative</p>');
+    expect(html).not.toContain('href');
+  });
+
+  it('skips unknown node types with warning', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const doc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'unsupportedNode',
+          content: [{ type: 'text', text: 'Mystery' }],
+        },
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: 'Normal' }],
+        },
+      ],
+    };
+
+    const html = renderRichTextHtml(doc);
+    expect(html).toBe('<p>Normal</p>');
+    warnSpy.mockRestore();
+  });
+
+  it('skips unknown mark types with warning', () => {
+    const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    const doc = {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Decorated',
+              marks: [{ type: 'glitterMark' }],
+            },
+          ],
+        },
+      ],
+    };
+
+    const html = renderRichTextHtml(doc);
+    expect(html).toBe('<p>Decorated</p>');
+    warnSpy.mockRestore();
+  });
+
+  it('handles deeply nested docs without blowing call stack', () => {
+    let current: Record<string, unknown> = { type: 'text', text: 'Deep text' };
+    for (let i = 0; i < 60; i++) {
+      current = { type: 'blockquote', content: [current] };
+    }
+    const doc = { type: 'doc', content: [current] };
+
+    const html = renderRichTextHtml(doc, { maxDepth: 10 });
+    expect(html).not.toContain('Deep text');
+  });
+});

package/src/runtime/bundle.ts

@@ -0,0 +1,28 @@
+import type { ContentBundle } from '../types';
+import { getActiveBundle, setBuildBundle } from './store';
+
+let resolveBundleReady: ((bundle: ContentBundle) => void) | null = null;
+let isReady = false;
+
+export const bundleReady = new Promise<ContentBundle>((resolve) => {
+  const active = getActiveBundle();
+  if (active) {
+    isReady = true;
+    resolve(active);
+  } else {
+    resolveBundleReady = resolve;
+  }
+});
+
+export function markBundleReady(bundle: ContentBundle): void {
+  setBuildBundle(bundle);
+  isReady = true;
+  if (resolveBundleReady) {
+    resolveBundleReady(bundle);
+    resolveBundleReady = null;
+  }
+}
+
+export function isBundleReady(): boolean {
+  return isReady || getActiveBundle() !== null;
+}