@roottale/cms-renderer-next 0.2.0 → 0.2.1

package/src/block-to-react.tsx

@@ -1,199 +0,0 @@
-// ADR-0034 §1.5 amended — Block JSON → React elements
-//
-// Next/RSC public renderer 가 본 함수로 block tree 를 server-side React element
-// 로 변환. cms-renderer-astro 의 `block-to-html.ts` 와 1:1 대응 (같은 7 + α
-// block 핸들러). `BlockDefinition.nextRender` 정합.
-//
-// 알려지지 않은 block 은 rawHtml 출력 (codex v3 verdict #4, opaque atom
-// round-trip 보존).
-
-import type { ReactElement, ReactNode } from "react";
-
-import type { Block } from "@roottale/cms-core";
-
-function isString(value: unknown): value is string {
-  return typeof value === "string";
-}
-
-function htmlContent(html: string): { __html: string } {
-  // React 의 dangerouslySetInnerHTML 표면. Block 의 rawHtml/content 는 이미
-  // 서버측에서 받은 후 별도 sanitize 가 필요할 수 있음 (cms-core sanitize).
-  return { __html: html };
-}
-
-function renderInner(blocks: readonly Block[]): ReactElement[] {
-  return blocks.map((b, i) => renderBlock(b, i));
-}
-
-/**
- * 단일 block 을 ReactElement 로 변환. `block-to-html.ts` 와 동일 분기.
- */
-export function renderBlock(block: Block, key: number = 0): ReactElement {
-  const dataBlockId = block._id;
-
-  switch (block.name) {
-    case "core/paragraph": {
-      const text = isString(block.attributes.content)
-        ? block.attributes.content
-        : block.rawHtml ?? "";
-      return (
-        <p
-          key={key}
-          data-block-id={dataBlockId}
-          dangerouslySetInnerHTML={htmlContent(text)}
-        />
-      );
-    }
-    case "core/heading": {
-      const levelRaw = block.attributes.level;
-      const level =
-        typeof levelRaw === "number" && levelRaw >= 1 && levelRaw <= 6
-          ? levelRaw
-          : 2;
-      const text = isString(block.attributes.content)
-        ? block.attributes.content
-        : block.rawHtml ?? "";
-      const props = {
-        "data-block-id": dataBlockId,
-        dangerouslySetInnerHTML: htmlContent(text),
-      } as const;
-      if (level === 1) return <h1 key={key} {...props} />;
-      if (level === 2) return <h2 key={key} {...props} />;
-      if (level === 3) return <h3 key={key} {...props} />;
-      if (level === 4) return <h4 key={key} {...props} />;
-      if (level === 5) return <h5 key={key} {...props} />;
-      return <h6 key={key} {...props} />;
-    }
-    case "core/image": {
-      const src = isString(block.attributes.url) ? block.attributes.url : "";
-      const alt = isString(block.attributes.alt) ? block.attributes.alt : "";
-      const caption = isString(block.attributes.caption)
-        ? block.attributes.caption
-        : null;
-      return (
-        <figure key={key} data-block-id={dataBlockId}>
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img src={src} alt={alt} loading="lazy" />
-          {caption && <figcaption>{caption}</figcaption>}
-        </figure>
-      );
-    }
-    case "core/list": {
-      const ordered = block.attributes.ordered === true;
-      const items = (block.innerBlocks ?? []).map(
-        (item, i): ReactNode =>
-          item.rawHtml ? (
-            <li
-              key={i}
-              dangerouslySetInnerHTML={htmlContent(item.rawHtml)}
-            />
-          ) : (
-            <li key={i}>{renderInner(item.innerBlocks ?? [])}</li>
-          ),
-      );
-      return ordered ? (
-        <ol key={key} data-block-id={dataBlockId}>
-          {items}
-        </ol>
-      ) : (
-        <ul key={key} data-block-id={dataBlockId}>
-          {items}
-        </ul>
-      );
-    }
-    case "core/quote": {
-      const inner = renderInner(block.innerBlocks ?? []);
-      const citation = isString(block.attributes.citation)
-        ? block.attributes.citation
-        : null;
-      return (
-        <blockquote key={key} data-block-id={dataBlockId}>
-          {inner}
-          {citation && <cite>{citation}</cite>}
-        </blockquote>
-      );
-    }
-    case "core/code": {
-      const code = isString(block.attributes.content)
-        ? block.attributes.content
-        : block.rawHtml ?? "";
-      const lang = isString(block.attributes.language)
-        ? block.attributes.language
-        : undefined;
-      return (
-        <pre
-          key={key}
-          data-block-id={dataBlockId}
-          data-language={lang}
-        >
-          <code>{code}</code>
-        </pre>
-      );
-    }
-    case "core/columns": {
-      return (
-        <div
-          key={key}
-          className="rt-columns"
-          data-block-id={dataBlockId}
-        >
-          {renderInner(block.innerBlocks ?? [])}
-        </div>
-      );
-    }
-    case "core/separator":
-      return <hr key={key} data-block-id={dataBlockId} />;
-    case "core/spacer": {
-      const heightRaw = block.attributes.height;
-      const height = isString(heightRaw) ? heightRaw : "32px";
-      return (
-        <div
-          key={key}
-          className="rt-spacer"
-          data-block-id={dataBlockId}
-          style={{ height }}
-        />
-      );
-    }
-    case "core/group": {
-      return (
-        <div
-          key={key}
-          className="rt-group"
-          data-block-id={dataBlockId}
-        >
-          {renderInner(block.innerBlocks ?? [])}
-        </div>
-      );
-    }
-    default: {
-      const rawHtml = block.rawHtml;
-      if (rawHtml) {
-        return (
-          <div
-            key={key}
-            className="rt-unknown-block"
-            data-block-id={dataBlockId}
-            data-block-name={block.name}
-            dangerouslySetInnerHTML={htmlContent(rawHtml)}
-          />
-        );
-      }
-      return (
-        <div
-          key={key}
-          className="rt-unknown-block"
-          data-block-id={dataBlockId}
-          data-block-name={block.name}
-        >
-          {renderInner(block.innerBlocks ?? [])}
-        </div>
-      );
-    }
-  }
-}
-
-/** Block tree 전체를 React element 배열로 직렬화. */
-export function renderBlocks(blocks: readonly Block[]): ReactElement[] {
-  return blocks.map((b, i) => renderBlock(b, i));
-}

package/src/index.ts

@@ -1,7 +0,0 @@
-// Default entry is intentionally empty. External customers use
-// `@roottale/cms-renderer-next/server` for SSR-only components and
-// `@roottale/cms-renderer-next/styles` for the scoped CSS bundle.
-//
-// Astro 사이트는 `@roottale/cms-renderer-astro` (동등 surface) 사용.
-// 두 패키지 모두 1급 public renderer (ADR-0034 §1.5 amended).
-export {};

package/src/server.tsx

@@ -1,338 +0,0 @@
-/**
- * `@roottale/cms-renderer-next/server` — RootTale CMS public-render React Server Components.
- *
- * Drop into any RSC-capable framework (Next.js App Router, Astro server islands,
- * React Router server). Single-line import, SSR-only, no `'use client'` boundary.
- *
- * ```tsx
- * import { RootTaleBlogList } from "@roottale/cms-renderer-next/server";
- *
- * export default function BlogPage() {
- *   return <RootTaleBlogList apiKey={process.env.ROOTTALE_API_KEY!} />;
- * }
- * ```
- *
- * Customer site MUST keep `apiKey` server-side. Browser bundle ships zero
- * RootTale credentials (ADR-0023 §5.1 #15).
- *
- * Design tokens auto-apply via the CSS import below. Customers can override
- * any class with their own CSS or Tailwind utilities — scoped selectors use
- * `:where()` to keep specificity at zero (ADR-0023 §5.1 #10).
- */
-
-import type { CSSProperties, ReactElement } from "react";
-import {
-  type CmsPostContent,
-  type CmsPostType,
-  fetchPost,
-  fetchPosts,
-} from "@roottale/cms-client/server";
-// Note: tokens.css is intentionally NOT imported here. cms-renderer-next is
-// shipped as an independent npm package — every `--rt-*` variable referenced
-// in cms-public.css has a static fallback. Customers who use @roottale/tokens
-// can layer it on top, but the package works without it.
-import "./styles/cms-public.css";
-
-import { RootTalePostCard } from "./PostCard.js";
-import { RootTaleTableOfContents } from "./TableOfContents.js";
-import { attachHeadingIds, extractToc } from "./toc.js";
-
-export { RootTalePostCard, type RootTalePostCardProps } from "./PostCard.js";
-export {
-  RootTaleTableOfContents,
-  type RootTaleTableOfContentsProps,
-} from "./TableOfContents.js";
-export {
-  RootTaleFloatingCta,
-  type RootTaleFloatingCtaProps,
-  type CtaButton,
-  type CtaButtonType,
-  type FloatingCtaPosition,
-} from "./FloatingCta.js";
-export {
-  RootTaleLeadForm,
-  type RootTaleLeadFormProps,
-  type LeadFormVertical,
-} from "./LeadForm.js";
-export { renderBlock, renderBlocks } from "./block-to-react.js";
-export {
-  attachHeadingIds,
-  extractToc,
-  headingToId,
-  type TocEntry,
-} from "./toc.js";
-
-export type RootTaleBlogListProps = {
-  apiKey: string;
-  baseUrl?: string;
-  limit?: number;
-  /** Filter by post type (`post` or `page`). Default = `post` only (blog list 의도). */
-  type?: CmsPostType;
-  /** Build a customer-side URL for a single post. Defaults to `/blog/${slug}`. */
-  postHref?: (post: CmsPostContent) => string;
-  /** Rendered when the tenant has no published posts yet. */
-  emptyMessage?: string;
-};
-
-export async function RootTaleBlogList(
-  props: RootTaleBlogListProps,
-): Promise<ReactElement> {
-  const {
-    apiKey,
-    baseUrl,
-    limit,
-    type = "post",
-    postHref = defaultPostHref,
-    emptyMessage = "아직 발행된 글이 없습니다.",
-  } = props;
-  const page = await fetchPosts({ apiKey, baseUrl, limit, type });
-
-  if (page.items.length === 0) {
-    return (
-      <div data-roottale-cms="list">
-        <p className="rt-cms-empty">{emptyMessage}</p>
-      </div>
-    );
-  }
-
-  return (
-    <div data-roottale-cms="list">
-      <ul className="rt-cms-list">
-        {page.items.map((post) => (
-          <li key={post.id} className="rt-cms-list-item">
-            <RootTalePostCard post={post} href={postHref} />
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-}
-
-export type RootTaleBlogPostProps = {
-  apiKey: string;
-  slugOrId: string;
-  baseUrl?: string;
-  /** Rendered when the slug is not found or not published. */
-  notFoundElement?: ReactElement;
-  /**
-   * When true, prepends an auto-derived `<RootTaleTableOfContents>` before
-   * the article body (H2/H3 headings only). Default: false — keep markup
-   * stable for customers who already control their own layout.
-   */
-  showTableOfContents?: boolean;
-  /** Title shown above the TOC (only when `showTableOfContents`). */
-  tableOfContentsTitle?: string;
-};
-
-export async function RootTaleBlogPost(
-  props: RootTaleBlogPostProps,
-): Promise<ReactElement> {
-  const {
-    apiKey,
-    slugOrId,
-    baseUrl,
-    notFoundElement,
-    showTableOfContents = false,
-    tableOfContentsTitle,
-  } = props;
-  const post = await fetchPost({ apiKey, slugOrId, baseUrl });
-
-  if (!post) {
-    return (
-      notFoundElement ?? (
-        <div data-roottale-cms="post-missing">
-          <p className="rt-cms-empty">글을 찾을 수 없습니다.</p>
-        </div>
-      )
-    );
-  }
-
-  const toc = showTableOfContents ? extractToc(post.bodyJson) : [];
-  const renderDoc =
-    toc.length > 0 ? attachHeadingIds(post.bodyJson, toc) : post.bodyJson;
-
-  return (
-    <article data-roottale-cms="post" className="rt-cms-article">
-      <header>
-        <p className="rt-cms-meta">{formatPublishedDate(post.publishedAt)}</p>
-        <h1 className="rt-cms-title">{post.title}</h1>
-        {post.excerpt ? <p className="rt-cms-excerpt">{post.excerpt}</p> : null}
-      </header>
-      {toc.length > 0 ? (
-        <RootTaleTableOfContents entries={toc} title={tableOfContentsTitle} />
-      ) : null}
-      <RenderTiptap doc={renderDoc} />
-    </article>
-  );
-}
-
-function defaultPostHref(post: CmsPostContent): string {
-  return `/blog/${post.slug}`;
-}
-
-function formatPublishedDate(iso: string): string {
-  const d = new Date(iso);
-  if (Number.isNaN(d.getTime())) return "";
-  return new Intl.DateTimeFormat("ko-KR", {
-    year: "numeric",
-    month: "2-digit",
-    day: "2-digit",
-  }).format(d);
-}
-
-/**
- * Minimal Tiptap doc renderer. Walks the Tiptap doc tree and emits semantic
- * HTML. This is intentionally tiny — richer extensions (image asset URL
- * resolution, TableOfContents, FloatingCta) belong in followup §5.7 #5.
- *
- * Browser-side sanitization is unnecessary here because output is rendered
- * server-side from data the customer-trusted API returned. If the customer
- * site federates with untrusted authors later, layer a sanitizer in front
- * of this component.
- */
-function RenderTiptap({ doc }: { doc: Record<string, unknown> }): ReactElement {
-  const rawContent = (doc as TiptapDoc).content;
-  const content: TiptapNode[] = Array.isArray(rawContent) ? rawContent : [];
-  return <>{content.map((node, i) => renderNode(node, i))}</>;
-}
-
-type TiptapDoc = { type?: string; content?: TiptapNode[] };
-
-type TiptapMark = { type?: string; attrs?: Record<string, unknown> };
-
-type TiptapNode = {
-  type?: string;
-  text?: string;
-  attrs?: Record<string, unknown>;
-  content?: TiptapNode[];
-  marks?: TiptapMark[];
-};
-
-/**
- * Defense-in-depth: even though admin LinkButton.normalizeUrl filters input,
- * legacy imports / direct DB / external tenants can still emit unsafe href.
- * Allow only http(s)/mailto/tel/root-relative/fragment/query — falls back to "#".
- */
-function isSafeHref(value: unknown): value is string {
-  if (typeof value !== "string") return false;
-  const v = value.trim();
-  if (v.length === 0) return false;
-  if (v.startsWith("/") || v.startsWith("#") || v.startsWith("?")) return true;
-  return /^(https?:|mailto:|tel:)/i.test(v);
-}
-
-function alignStyle(node: TiptapNode): CSSProperties | undefined {
-  const align = node.attrs?.textAlign;
-  if (typeof align !== "string" || align === "" || align === "left") return undefined;
-  if (align === "center" || align === "right" || align === "justify") {
-    return { textAlign: align };
-  }
-  return undefined;
-}
-
-function renderNode(node: TiptapNode, key: number): ReactElement | string | null {
-  if (!node || typeof node !== "object") return null;
-  const children = Array.isArray(node.content)
-    ? node.content.map((child, i) => renderNode(child, i))
-    : undefined;
-
-  switch (node.type) {
-    case "paragraph":
-      return <p key={key} style={alignStyle(node)}>{children}</p>;
-    case "heading": {
-      const level = Math.min(Math.max(Number(node.attrs?.level ?? 2), 1), 3);
-      const idAttr = node.attrs?.id;
-      const id = typeof idAttr === "string" && idAttr.length > 0 ? idAttr : undefined;
-      const style = alignStyle(node);
-      if (level === 1) return <h1 key={key} id={id} style={style}>{children}</h1>;
-      if (level === 2) return <h2 key={key} id={id} style={style}>{children}</h2>;
-      return <h3 key={key} id={id} style={style}>{children}</h3>;
-    }
-    case "bulletList":
-      return <ul key={key}>{children}</ul>;
-    case "orderedList":
-      return <ol key={key}>{children}</ol>;
-    case "listItem":
-      return <li key={key}>{children}</li>;
-    case "blockquote":
-      return <blockquote key={key}>{children}</blockquote>;
-    case "codeBlock":
-      return (
-        <pre key={key}>
-          <code>{children}</code>
-        </pre>
-      );
-    case "horizontalRule":
-      return <hr key={key} />;
-    case "hardBreak":
-      return <br key={key} />;
-    case "image": {
-      const src = node.attrs?.src;
-      if (typeof src !== "string" || src.length === 0) return null;
-      const alt = typeof node.attrs?.alt === "string" ? node.attrs.alt : "";
-      const title = typeof node.attrs?.title === "string" ? node.attrs.title : undefined;
-      // eslint-disable-next-line @next/next/no-img-element
-      return <img key={key} src={src} alt={alt} title={title} loading="lazy" />;
-    }
-    case "columns":
-      return <div key={key} className="rt-columns">{children}</div>;
-    case "column":
-      return <div key={key} className="rt-column">{children}</div>;
-    case "text":
-      return renderText(node, key);
-    default:
-      return children ? <span key={key}>{children}</span> : null;
-  }
-}
-
-function renderText(node: TiptapNode, key: number): ReactElement | string {
-  const text = node.text ?? "";
-  const marks = node.marks ?? [];
-  if (marks.length === 0) return text;
-  let element: ReactElement | string = text;
-  for (const mark of marks) {
-    element = applyMark(mark, element);
-  }
-  return <span key={key}>{element}</span>;
-}
-
-function applyMark(mark: TiptapMark, child: ReactElement | string): ReactElement {
-  switch (mark.type) {
-    case "bold":
-      return <strong>{child}</strong>;
-    case "italic":
-      return <em>{child}</em>;
-    case "underline":
-      return <u>{child}</u>;
-    case "strike":
-      return <s>{child}</s>;
-    case "code":
-      return <code>{child}</code>;
-    case "highlight": {
-      const color = mark.attrs?.color;
-      const style =
-        typeof color === "string" && color.length > 0
-          ? { background: color }
-          : undefined;
-      return <mark style={style}>{child}</mark>;
-    }
-    case "textStyle": {
-      const color = mark.attrs?.color;
-      const style =
-        typeof color === "string" && color.length > 0 ? { color } : undefined;
-      if (!style) return <>{child}</>;
-      return <span style={style}>{child}</span>;
-    }
-    case "link": {
-      const raw = mark.attrs?.href;
-      const href = isSafeHref(raw) ? raw : "#";
-      return (
-        <a href={href} rel="noopener noreferrer" target="_blank">
-          {child}
-        </a>
-      );
-    }
-    default:
-      return <span>{child}</span>;
-  }
-}

package/src/toc.ts

@@ -1,95 +0,0 @@
-/**
- * `@roottale/cms-renderer/toc` — Tiptap doc → TOC entries + heading id injection.
- *
- * Server-only utility. Walks a Tiptap JSON doc, extracts H2/H3 headings, and
- * derives stable kebab-case ids (Korean-safe). The companion `attachHeadingIds`
- * mutates a shallow clone of the doc so renderers can emit `<h2 id="...">`
- * anchors that match what `<RootTaleTableOfContents>` links to.
- *
- * Internal ancestor: `roottale-internal/packages/cms-renderer/src/toc.ts`
- * (HTML-string based, vendored snapshot). Ported to Tiptap-JSON because the
- * platform renderer no longer round-trips through HTML before render.
- */
-
-export interface TocEntry {
-  level: 2 | 3;
-  text: string;
-  id: string;
-}
-
-type TiptapNode = {
-  type?: string;
-  text?: string;
-  attrs?: Record<string, unknown>;
-  content?: TiptapNode[];
-  marks?: { type?: string }[];
-};
-
-type TiptapDoc = { type?: string; content?: TiptapNode[] };
-
-export function headingToId(text: string): string {
-  return text
-    .trim()
-    .toLowerCase()
-    .replace(/[^\p{L}\p{N}\s-]/gu, "")
-    .replace(/\s+/g, "-")
-    .replace(/-+/g, "-")
-    .replace(/^-|-$/g, "");
-}
-
-function textOf(node: TiptapNode): string {
-  if (typeof node.text === "string") return node.text;
-  if (!Array.isArray(node.content)) return "";
-  return node.content.map(textOf).join("");
-}
-
-export function extractToc(doc: Record<string, unknown>): TocEntry[] {
-  const root = doc as TiptapDoc;
-  const content = Array.isArray(root.content) ? root.content : [];
-  const entries: TocEntry[] = [];
-  const idCounts = new Map<string, number>();
-
-  for (const node of content) {
-    if (node?.type !== "heading") continue;
-    const rawLevel = Number(node.attrs?.level ?? 2);
-    if (rawLevel !== 2 && rawLevel !== 3) continue;
-    const text = textOf(node).trim();
-    if (!text) continue;
-
-    const base = headingToId(text) || "heading";
-    const count = idCounts.get(base) ?? 0;
-    const id = count === 0 ? base : `${base}-${count}`;
-    idCounts.set(base, count + 1);
-
-    entries.push({ level: rawLevel, text, id });
-  }
-
-  return entries;
-}
-
-/**
- * Returns a shallow-cloned Tiptap doc where each H2/H3 carries the matching
- * `attrs.id` from `entries` (same order as `extractToc` returns). Existing
- * `id` attrs are overwritten so renderer + TOC always agree on anchors.
- */
-export function attachHeadingIds(
-  doc: Record<string, unknown>,
-  entries: TocEntry[],
-): Record<string, unknown> {
-  const root = doc as TiptapDoc;
-  const content = Array.isArray(root.content) ? root.content : [];
-  let cursor = 0;
-  const nextContent = content.map((node) => {
-    if (node?.type !== "heading") return node;
-    const rawLevel = Number(node.attrs?.level ?? 2);
-    if (rawLevel !== 2 && rawLevel !== 3) return node;
-    if (!textOf(node).trim()) return node;
-    const entry = entries[cursor++];
-    if (!entry) return node;
-    return {
-      ...node,
-      attrs: { ...(node.attrs ?? {}), id: entry.id },
-    };
-  });
-  return { ...(root as Record<string, unknown>), content: nextContent };
-}