@draftbase/renderer 0.1.1 → 0.1.2

package/README.md

@@ -5,7 +5,7 @@
 **Framework-agnostic MDX renderer for [Draftbase](https://draftbase.co)** — the MDX-based headless CMS for React developers.
 
 [![npm](https://img.shields.io/npm/v/@draftbase/renderer)](https://www.npmjs.com/package/@draftbase/renderer)
-[![GitHub](https://img.shields.io/badge/GitHub-draftbase--monorepo-181717?logo=github)](https://github.com/draftbase-co/draftbase-monorepo/tree/main/packages/renderer)
+[![GitHub](https://img.shields.io/badge/GitHub-renderer-181717?logo=github)](https://github.com/draftbase-co/renderer)
 
 </div>
 
@@ -72,6 +72,16 @@ function Entry({ source }: { source: string }) {
 }
 ```
 
+`compiled.ok` only catches MDX _syntax_ errors. If the source references a JSX component you didn't pass in `components` (e.g. `<Callout>` without a `Callout` implementation), React throws while rendering `<Content>` — wrap it in the exported `MDXErrorBoundary` (React only, not React Native's non-DOM tree unless you supply an `errorTag`-equivalent fallback) to log it to the console and fail soft instead of crashing the page. `MDXContent` (the Next.js RSC helper above) already does this for you automatically.
+
+```tsx
+import { MDXErrorBoundary } from "@draftbase/renderer";
+
+<MDXErrorBoundary fallback={<Text>{source}</Text>}>
+  <Content components={{ p: Text, h1: Text /* ... */ }} />
+</MDXErrorBoundary>;
+```
+
 Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
 
 ## Astro
@@ -192,6 +202,27 @@ import { Callout, ImageBlock } from "@/components/content";
 
 Any standard markdown element (`h1`, `table`, `a`, ...) can also be overridden the same way, by key — **required** on non-DOM renderers like React Native, which have no intrinsic `div`/`p`/`a`/`img` tags.
 
+### Entry links
+
+The Draftbase editor can insert `<EntryLink id="...">Link text</EntryLink>` into rich text to link to another entry. It's a plain JSX component like any other — no special renderer support for the tag itself — so you must supply an `EntryLink` implementation the same way as `Callout`/`ImageBlock`. If `EntryLink` isn't supplied and the source contains one, rendering throws (same as any missing custom component).
+
+To route `id` correctly per content type, fetch the entry with `include=1` (via `@draftbase/sdk`) — the response includes an `entryLinks` map keyed by every `EntryLink` id found in that entry's richText fields, each with its `templateId`:
+
+```tsx
+const entry = await client.entries.get(entryId, undefined, 1);
+// entry.entryLinks = { "64f1a2b3c4d5e6f7a8b9c0d1": { id, templateId, title, status } }
+
+const ROUTE_BY_TEMPLATE: Record<string, string> = { blogPost: "/blog", product: "/products" };
+
+function EntryLink({ id, children }: { id: string; children: React.ReactNode }) {
+  const link = entry.entryLinks?.[id];
+  const base = ROUTE_BY_TEMPLATE[link?.templateId ?? ""] ?? "/entries";
+  return <a href={`${base}/${id}`}>{children}</a>;
+}
+
+<MDXContent source={entry.fields.body} components={{ EntryLink }} />;
+```
+
 ## Styling
 
 `@draftbase/renderer/styles.css` wraps output in a `.db-content` class with slim, sensible defaults (typography, tables, code blocks). Web-only, opt-in:
@@ -234,8 +265,8 @@ React (Next.js App Router/RSC, plain client React, React Native, Remix, Astro is
 ## Links
 
 - [npm](https://www.npmjs.com/package/@draftbase/renderer)
-- [Source (`packages/renderer`)](https://github.com/draftbase-co/draftbase-monorepo/tree/main/packages/renderer)
-- [Issues](https://github.com/draftbase-co/draftbase-monorepo/issues)
+- [Source](https://github.com/draftbase-co/renderer)
+- [Issues](https://github.com/draftbase-co/renderer/issues)
 - [`@draftbase/sdk`](https://www.npmjs.com/package/@draftbase/sdk) — fetches the content this package renders
 - [draftbase.co](https://draftbase.co) — product site
 - [Framework support](https://draftbase.co/frameworks) — per-framework rendering guide this README is based on

package/dist/MDXContent.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
 import { compileMDXCore } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
+import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
 /**
  * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions,
  * safe to call from a React Native loader, a client-side effect, or a Next.js Server
@@ -27,5 +28,5 @@ export async function MDXContent({ source, components, unstyled, className, wrap
         return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) }));
     }
     const { Content } = compiled;
-    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(Content, { components: components }) }));
+    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), children: _jsx(Content, { components: components }) }) }));
 }

package/dist/MDXErrorBoundary.d.ts

@@ -0,0 +1,17 @@
+import { Component, type ReactNode } from "react";
+interface MDXErrorBoundaryProps {
+    children: ReactNode;
+    fallback: ReactNode;
+}
+interface MDXErrorBoundaryState {
+    hasError: boolean;
+}
+export declare class MDXErrorBoundary extends Component<MDXErrorBoundaryProps, MDXErrorBoundaryState> {
+    state: MDXErrorBoundaryState;
+    static getDerivedStateFromError(): {
+        hasError: boolean;
+    };
+    componentDidCatch(error: unknown): void;
+    render(): ReactNode;
+}
+export {};

package/dist/MDXErrorBoundary.js

@@ -0,0 +1,18 @@
+"use client";
+import { Component } from "react";
+// Catches render-time errors from compiled MDX content — most commonly a JSX component
+// referenced in the source (e.g. `<Callout>`, `<EntryLink>`) that wasn't supplied in
+// `components`. Without this, that throws "Element type is invalid" and crashes the whole
+// page instead of just the content block.
+export class MDXErrorBoundary extends Component {
+    state = { hasError: false };
+    static getDerivedStateFromError() {
+        return { hasError: true };
+    }
+    componentDidCatch(error) {
+        console.error("MDX content failed to render", error);
+    }
+    render() {
+        return this.state.hasError ? this.props.fallback : this.props.children;
+    }
+}

package/dist/index.d.ts

@@ -1,3 +1,4 @@
 export { MDXContent, compileMDX } from "./MDXContent.js";
 export type { MDXContentProps, CompiledMDX, FailedMDX } from "./MDXContent.js";
 export { toHtml } from "./toHtml.js";
+export { MDXErrorBoundary } from "./MDXErrorBoundary.js";

package/dist/index.js

@@ -1,2 +1,3 @@
 export { MDXContent, compileMDX } from "./MDXContent.js";
 export { toHtml } from "./toHtml.js";
+export { MDXErrorBoundary } from "./MDXErrorBoundary.js";

package/dist/styles.css

@@ -25,6 +25,12 @@
   line-height: 1.25;
   margin: 1.5em 0 0.5em;
   color: inherit;
+  scroll-margin-top: 96px;
+}
+
+/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */
+.db-content :target {
+  background: var(--accent-subtle, rgba(127, 127, 127, 0.15));
 }
 
 .db-content h1 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",