@draftbase/renderer 0.4.1 → 0.5.1

package/README.md

@@ -232,6 +232,31 @@ import { toHtml } from "@draftbase/renderer";
 const html = await toHtml(entry.fields.body);
 ```
 
+By default, custom tags in the source (`<Callout>`, `<EntryLink>`, ...) pass through as literal HTML — `toHtml` produces a plain string, not a React tree, so there's no component tree to substitute into. Pass `components` to render one to an HTML string instead, keyed by tag name (case-insensitive):
+
+```ts
+const html = await toHtml(entry.fields.body, {
+  components: {
+    Callout: (props, childrenHtml) => `<div class="callout-${props.type}">${childrenHtml}</div>`,
+  },
+  externalLinks: true, // adds target="_blank" rel="noopener noreferrer" to off-site <a> tags
+});
+```
+
+Unlike a React `components` map, each prop always arrives as a string — real HTML parsing, not JSX evaluation, so `count="3"` is `"3"`, never `3`. `childrenHtml` is the tag's contents already rendered to HTML, with any nested custom tags resolved first.
+
+`EntryLink` gets a default (`<a href="/entries/{id}">`) the moment `components` is passed at all, same as the React renderer's default — override it the same way as any other tag:
+
+```ts
+const html = await toHtml(entry.fields.body, {
+  components: {
+    EntryLink: (props, childrenHtml) => `<a href="/blog/${props.id}">${childrenHtml}</a>`,
+  },
+});
+```
+
+Omit `components` entirely and every custom tag, `EntryLink` included, stays literal HTML (previous behavior); omit `externalLinks` and links are left as-is.
+
 ## Custom components
 
 Content can invoke JSX components by name inside the MDX source (e.g. `<Callout type="warning">...</Callout>`). Pass the implementations:

package/dist/MDXContent.d.ts

@@ -9,21 +9,17 @@ export interface CompiledMDX {
 }
 export type { FailedMDX };
 /**
- * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions,
- * safe to call from a client-side effect or a Next.js Server Component (the
- * `MDXContent` component below does the latter). Standard markdown elements (`p`,
- * `h1`, `table`, ...) render via real DOM tags with zero setup; only a JSX component
- * with no built-in default (e.g. `<Callout>`) needs `components`.
+ * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions, safe for client effects or RSC.
+ * Standard markdown elements render via real DOM tags with zero setup; only a JSX component with no built-in default needs `components`.
  */
 export declare function compileMDX(source: string): Promise<CompiledMDX | FailedMDX>;
 export interface MDXContentProps {
     /** Raw MDX/markdown string, e.g. an entry's rich text field. */
     source: string;
-    /** Custom components available by name inside the MDX source (e.g. `<Callout>`), and/or
-     * overrides for standard markdown elements (`p`, `h1`, `a`, `img`, ...) — required on
-     * non-DOM renderers such as React Native, which have no intrinsic `div`/`p`/`a` tags. */
+    /** Custom components available by name inside the MDX source, and/or overrides for standard markdown elements —
+     * required on non-DOM renderers such as React Native, which have no intrinsic `div`/`p`/`a` tags. */
     components?: MDXComponents;
-    /** Skip the default `db-content` styling class. */
+    /** Skip the default `db-content` styling class and its inlined styles. */
     unstyled?: boolean;
     /** Extra class name(s) merged onto the wrapper element. */
     className?: string;
@@ -33,10 +29,13 @@ export interface MDXContentProps {
     /** Element/component used to render the fallback plain-text output when `source` fails to
      * compile as MDX. Defaults to `"p"`; pass React Native's `Text`. */
     errorTag?: ElementType;
+    /** Called (in addition to `console.error`) when `source` fails to compile, or a component
+     * throws while rendering. Either way the fallback plain-text output still renders instead of
+     * crashing. */
+    onError?: (error: unknown) => void;
 }
 /**
- * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React (client-side
- * web, React Native, Remix, ...), call `compileMDX` directly from your own data loader/effect
- * and render `Content` yourself — `await` inside a component body only works as an RSC.
+ * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React, call `compileMDX` directly instead —
+ * `await` inside a component body only works as an RSC.
  */
-export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, }: MDXContentProps): Promise<ReactNode>;
+export declare function MDXContent({ source, components, unstyled, className, wrapperTag, errorTag, onError, }: MDXContentProps): Promise<ReactNode>;

package/dist/MDXContent.js

@@ -1,35 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
 import { compileMDXCore, makeDefaultEntryLink } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
 import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
+import { CSS_TEXT } from "./cssText.js";
 const defaultComponents = { EntryLink: makeDefaultEntryLink(runtime) };
 /**
- * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions,
- * safe to call from a client-side effect or a Next.js Server Component (the
- * `MDXContent` component below does the latter). Standard markdown elements (`p`,
- * `h1`, `table`, ...) render via real DOM tags with zero setup; only a JSX component
- * with no built-in default (e.g. `<Callout>`) needs `components`.
+ * Compiles raw MDX/markdown into a renderable React component — no DOM assumptions, safe for client effects or RSC.
+ * Standard markdown elements render via real DOM tags with zero setup; only a JSX component with no built-in default needs `components`.
  */
 export async function compileMDX(source) {
     return compileMDXCore(source, runtime, defaultComponents);
 }
 /**
- * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React (client-side
- * web, React Native, Remix, ...), call `compileMDX` directly from your own data loader/effect
- * and render `Content` yourself — `await` inside a component body only works as an RSC.
+ * Next.js Server Component wrapper around {@link compileMDX}. For non-RSC React, call `compileMDX` directly instead —
+ * `await` inside a component body only works as an RSC.
  */
-export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", }) {
+export async function MDXContent({ source, components, unstyled, className, wrapperTag = "div", errorTag = "p", onError, }) {
     const Wrapper = wrapperTag;
     const ErrorTag = errorTag;
     const wrapperClass = wrapperClassName(unstyled, className);
+    // `href` + `precedence` make React DOM treat this as a de-duplicated, hoisted stylesheet
+    // resource (React 19+) instead of a plain inline tag repeated per render.
+    const styles = unstyled ? null : (_jsx("style", { href: "db-content-styles", precedence: "default", children: CSS_TEXT }));
     const compiled = await compileMDX(source);
     if (!compiled.ok) {
         // Source isn't valid MDX/JSX (e.g. stray `<`/`{` in prose) — fail soft instead
         // of crashing the page; render it as plain text so the copy still shows.
         console.error("MDX compile failed, rendering as plain text", compiled.error);
-        return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) }));
+        onError?.(compiled.error);
+        return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(ErrorTag, { children: source }) })] }));
     }
     const { Content } = compiled;
-    return (_jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), children: _jsx(Content, { components: components }) }) }));
+    return (_jsxs(_Fragment, { children: [styles, _jsx(Wrapper, { className: wrapperClass, children: _jsx(MDXErrorBoundary, { fallback: _jsx(ErrorTag, { children: source }), onError: onError, children: _jsx(Content, { components: components }) }) })] }));
 }

package/dist/MDXContent.test.js

@@ -1,20 +1,33 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { MDXContent } from "./MDXContent.js";
-// Smoke test for the Next.js App Router / RSC entry point — MDXContent is an async
-// Server Component; call it directly (as React's RSC runtime would) and inspect the
-// element tree it returns, same style as compileMDX.test.ts.
+// MDXContent is an async Server Component; call it directly (as React's RSC runtime would) and inspect
+// the returned element tree. It returns a fragment: [inlined <style> | null, the wrapper element].
+function wrapperOf(fragment) {
+    const [, wrapper] = fragment.props.children;
+    return wrapper;
+}
 test("MDXContent wraps compiled MDX in the styled wrapper element", async () => {
-    const element = (await MDXContent({ source: "# Hello" }));
+    const fragment = (await MDXContent({ source: "# Hello" }));
+    const [styles] = fragment.props.children;
+    assert.equal(styles.type, "style");
+    const element = wrapperOf(fragment);
     assert.equal(element.type, "div");
     assert.equal(element.props.className, "db-content");
 });
-test("unstyled drops the db-content class", async () => {
-    const element = (await MDXContent({ source: "# Hello", unstyled: true }));
+test("unstyled drops the db-content class and the inlined styles", async () => {
+    const fragment = (await MDXContent({
+        source: "# Hello",
+        unstyled: true,
+    }));
+    const [styles] = fragment.props.children;
+    assert.equal(styles, null);
+    const element = wrapperOf(fragment);
     assert.equal(element.props.className, undefined);
 });
 test("falls back to plain text when the source fails to compile as MDX", async () => {
-    const element = (await MDXContent({ source: "<broken" }));
+    const fragment = (await MDXContent({ source: "<broken" }));
+    const element = wrapperOf(fragment);
     const fallback = element.props.children;
     assert.equal(fallback.type, "p");
     assert.equal(fallback.props.children, "<broken");

package/dist/MDXErrorBoundary.d.ts

@@ -2,6 +2,7 @@ import { Component, type ReactNode } from "react";
 interface MDXErrorBoundaryProps {
     children: ReactNode;
     fallback: ReactNode;
+    onError?: (error: unknown) => void;
 }
 interface MDXErrorBoundaryState {
     hasError: boolean;

package/dist/MDXErrorBoundary.js

@@ -1,9 +1,7 @@
 "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.
+// Catches render-time errors from compiled MDX content — most commonly a JSX component referenced in the
+// source but missing from `components`, which otherwise throws and crashes the whole page.
 export class MDXErrorBoundary extends Component {
     state = { hasError: false };
     static getDerivedStateFromError() {
@@ -11,6 +9,7 @@ export class MDXErrorBoundary extends Component {
     }
     componentDidCatch(error) {
         console.error("MDX content failed to render", error);
+        this.props.onError?.(error);
     }
     render() {
         return this.state.hasError ? this.props.fallback : this.props.children;

package/dist/compileMDX.test.js

@@ -3,10 +3,8 @@ import test from "node:test";
 import { compileMDX as compileReactMDX } from "./MDXContent.js";
 import { compileMDX as compileVueMDX } from "./vue.js";
 const SOURCE = "# Hello\n\nWorld";
-/** compileMDX's Content is wrapped to merge in default components (see core.ts) —
- * unwrap by directly invoking each function-typed element until reaching real output,
- * same "call it like a plain function" style as the rest of these tests (no renderer
- * mounted). */
+/** Content is wrapped to merge in default components (see core.ts) — unwrap by invoking each
+ * function-typed element until reaching real output (no renderer mounted). */
 function resolve(element) {
     return typeof element.type === "function"
         ? resolve(element.type(element.props))

package/dist/core.d.ts

@@ -9,19 +9,12 @@ export interface FailedMDX {
     error: unknown;
 }
 /**
- * Shared MDX-to-component evaluation. Parameterized by JSX runtime (React's
- * `react/jsx-runtime`, a Vue `h()`-based shim, ...) so each framework entry point
- * supplies its own without duplicating the remark/rehype pipeline.
- *
- * `defaultComponents`, when given, are merged underneath whatever the caller passes
- * as `Content`'s own `components` prop (caller always wins per-tag) — this is what
- * lets a framework entry point ship working defaults (e.g. a default `EntryLink`,
- * or React Native's Text/View mapping) without requiring a mapping up front.
+ * Shared MDX-to-component evaluation, parameterized by JSX runtime so each framework entry point avoids duplicating
+ * the remark/rehype pipeline. `defaultComponents`, when given, are merged underneath the caller's own `components` (caller always wins per-tag).
  */
 export declare function compileMDXCore<TComponent>(source: string, jsxRuntime: JsxRuntime, defaultComponents?: Record<string, unknown>): Promise<CompiledMDX<TComponent> | FailedMDX>;
-/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`.
- * Covers the common case (a plain link to the entry's default route); apps that
- * route entries differently still override it by passing `components.EntryLink`. */
+/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`; apps that
+ * route entries differently override it by passing `components.EntryLink`. */
 export declare function makeDefaultEntryLink(jsxRuntime: JsxRuntime): ({ id, children }: {
     id?: string;
     children?: unknown;

package/dist/core.js

@@ -2,14 +2,8 @@ import { evaluate } from "@mdx-js/mdx";
 import remarkGfm from "remark-gfm";
 import rehypeSlug from "rehype-slug";
 /**
- * Shared MDX-to-component evaluation. Parameterized by JSX runtime (React's
- * `react/jsx-runtime`, a Vue `h()`-based shim, ...) so each framework entry point
- * supplies its own without duplicating the remark/rehype pipeline.
- *
- * `defaultComponents`, when given, are merged underneath whatever the caller passes
- * as `Content`'s own `components` prop (caller always wins per-tag) — this is what
- * lets a framework entry point ship working defaults (e.g. a default `EntryLink`,
- * or React Native's Text/View mapping) without requiring a mapping up front.
+ * Shared MDX-to-component evaluation, parameterized by JSX runtime so each framework entry point avoids duplicating
+ * the remark/rehype pipeline. `defaultComponents`, when given, are merged underneath the caller's own `components` (caller always wins per-tag).
  */
 export async function compileMDXCore(source, jsxRuntime, defaultComponents) {
     try {
@@ -37,9 +31,8 @@ function withDefaultComponents(Content, defaults, jsxRuntime) {
         });
     };
 }
-/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`.
- * Covers the common case (a plain link to the entry's default route); apps that
- * route entries differently still override it by passing `components.EntryLink`. */
+/** Default `EntryLink` for a given JSX runtime — renders `<a href="/entries/{id}">`; apps that
+ * route entries differently override it by passing `components.EntryLink`. */
 export function makeDefaultEntryLink(jsxRuntime) {
     return function EntryLink({ id, children }) {
         return jsxRuntime.jsx("a", { href: id ? `/entries/${id}` : undefined, children });

package/dist/cssText.d.ts

@@ -0,0 +1 @@
+export declare const CSS_TEXT = "/* Slim default typography for Draftbase MDX content.\n   Opt-in: import \"@draftbase/renderer/styles.css\".\n   Disable per-render: <MDXContent unstyled /> or toHtml(source, { unstyled: true }).\n   Theme via custom properties: --db-heading-color, --db-link-color, --db-accent-border,\n   --db-target-bg. Override further: target \".db-content\" with higher-specificity or\n   later-loaded rules. */\n\n.db-content {\n  line-height: 1.6;\n  color: inherit;\n  overflow-wrap: break-word;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  color: var(--db-heading-color, inherit);\n}\n\n.db-content a {\n  color: var(--db-link-color, inherit);\n}\n\n/* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden\n   without the consumer needing Tailwind or their own utility. */\n.db-content .sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.db-content > :first-child {\n  margin-top: 0;\n}\n.db-content > :last-child {\n  margin-bottom: 0;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 1.5em 0 0.5em;\n}\n\n/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */\n.db-content :target {\n  background: var(--db-target-bg, rgba(127, 127, 127, 0.15));\n}\n\n.db-content h1 {\n  font-size: 2.25em;\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: -0.025em;\n  margin-top: 1.25em;\n}\n\n.db-content h2 {\n  font-size: 1.5em;\n  line-height: 1.25;\n  letter-spacing: -0.02em;\n  margin-top: 1.75em;\n}\n\n.db-content h3 {\n  font-size: 1.25em;\n  line-height: 1.3;\n}\n\n.db-content h4 {\n  font-size: 1.125em;\n  line-height: 1.35;\n}\n\n.db-content h5 {\n  font-size: 1em;\n  line-height: 1.4;\n}\n\n.db-content h6 {\n  font-size: 0.875em;\n  line-height: 1.4;\n}\n\n@media (max-width: 640px) {\n  .db-content h1 {\n    font-size: 1.875em;\n  }\n  .db-content h2 {\n    font-size: 1.25em;\n  }\n  .db-content h3 {\n    font-size: 1.125em;\n  }\n}\n\n.db-content p,\n.db-content ul,\n.db-content ol,\n.db-content blockquote,\n.db-content pre,\n.db-content table {\n  margin: 0 0 1em;\n}\n\n.db-content ul,\n.db-content ol {\n  padding-left: 1.5em;\n}\n\n.db-content ul {\n  list-style-type: disc;\n}\n\n.db-content ol {\n  list-style-type: decimal;\n}\n\n.db-content ul ul {\n  list-style-type: circle;\n}\n\n.db-content ol ol {\n  list-style-type: lower-alpha;\n}\n\n.db-content ul ul ul,\n.db-content ol ol ol {\n  list-style-type: square;\n}\n\n.db-content li {\n  margin: 0.25em 0;\n}\n.db-content li > ul,\n.db-content li > ol {\n  margin: 0.25em 0 0;\n}\n.db-content li > p {\n  margin: 0;\n}\n\n.db-content ul.contains-task-list {\n  list-style: none;\n  padding-left: 0.25em;\n}\n.db-content li.task-list-item {\n  list-style: none;\n  margin-left: 0;\n}\n.db-content li.task-list-item input[type=\"checkbox\"] {\n  margin-right: 0.5em;\n}\n\n.db-content strong {\n  font-weight: 600;\n}\n.db-content em {\n  font-style: italic;\n}\n.db-content del {\n  text-decoration: line-through;\n  opacity: 0.75;\n}\n\n.db-content blockquote {\n  margin-left: 0;\n  padding-left: 1em;\n  border-left: 3px solid var(--db-accent-border, currentColor);\n  opacity: 0.85;\n}\n\n.db-content code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.9em;\n  padding: 0.15em 0.35em;\n  background: rgba(127, 127, 127, 0.15);\n  border-radius: 4px;\n}\n\n.db-content pre {\n  padding: 1em;\n  overflow-x: auto;\n  background: rgba(127, 127, 127, 0.1);\n  border-radius: 8px;\n}\n.db-content pre code {\n  padding: 0;\n  background: none;\n}\n\n/* display:block so wide tables scroll instead of overflowing the page on mobile;\n   costs full-bleed stretch for narrow tables. */\n.db-content table {\n  border-collapse: collapse;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n.db-content th,\n.db-content td {\n  border: 1px solid rgba(127, 127, 127, 0.3);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.db-content th {\n  background: rgba(127, 127, 127, 0.08);\n  font-weight: 600;\n}\n\n.db-content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\n.db-content a {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.db-content a:hover {\n  opacity: 0.8;\n}\n\n.db-content hr {\n  border: none;\n  border-top: 1px solid rgba(127, 127, 127, 0.3);\n  margin: 2em 0;\n}\n";

package/dist/cssText.js

@@ -0,0 +1,2 @@
+// Generated from styles.css by scripts/generate-css-text.mjs — do not edit directly.
+export const CSS_TEXT = "/* Slim default typography for Draftbase MDX content.\n   Opt-in: import \"@draftbase/renderer/styles.css\".\n   Disable per-render: <MDXContent unstyled /> or toHtml(source, { unstyled: true }).\n   Theme via custom properties: --db-heading-color, --db-link-color, --db-accent-border,\n   --db-target-bg. Override further: target \".db-content\" with higher-specificity or\n   later-loaded rules. */\n\n.db-content {\n  line-height: 1.6;\n  color: inherit;\n  overflow-wrap: break-word;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  color: var(--db-heading-color, inherit);\n}\n\n.db-content a {\n  color: var(--db-link-color, inherit);\n}\n\n/* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden\n   without the consumer needing Tailwind or their own utility. */\n.db-content .sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n\n.db-content > :first-child {\n  margin-top: 0;\n}\n.db-content > :last-child {\n  margin-bottom: 0;\n}\n\n.db-content h1,\n.db-content h2,\n.db-content h3,\n.db-content h4,\n.db-content h5,\n.db-content h6 {\n  font-weight: 600;\n  line-height: 1.25;\n  margin: 1.5em 0 0.5em;\n}\n\n/* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */\n.db-content :target {\n  background: var(--db-target-bg, rgba(127, 127, 127, 0.15));\n}\n\n.db-content h1 {\n  font-size: 2.25em;\n  font-weight: 700;\n  line-height: 1.2;\n  letter-spacing: -0.025em;\n  margin-top: 1.25em;\n}\n\n.db-content h2 {\n  font-size: 1.5em;\n  line-height: 1.25;\n  letter-spacing: -0.02em;\n  margin-top: 1.75em;\n}\n\n.db-content h3 {\n  font-size: 1.25em;\n  line-height: 1.3;\n}\n\n.db-content h4 {\n  font-size: 1.125em;\n  line-height: 1.35;\n}\n\n.db-content h5 {\n  font-size: 1em;\n  line-height: 1.4;\n}\n\n.db-content h6 {\n  font-size: 0.875em;\n  line-height: 1.4;\n}\n\n@media (max-width: 640px) {\n  .db-content h1 {\n    font-size: 1.875em;\n  }\n  .db-content h2 {\n    font-size: 1.25em;\n  }\n  .db-content h3 {\n    font-size: 1.125em;\n  }\n}\n\n.db-content p,\n.db-content ul,\n.db-content ol,\n.db-content blockquote,\n.db-content pre,\n.db-content table {\n  margin: 0 0 1em;\n}\n\n.db-content ul,\n.db-content ol {\n  padding-left: 1.5em;\n}\n\n.db-content ul {\n  list-style-type: disc;\n}\n\n.db-content ol {\n  list-style-type: decimal;\n}\n\n.db-content ul ul {\n  list-style-type: circle;\n}\n\n.db-content ol ol {\n  list-style-type: lower-alpha;\n}\n\n.db-content ul ul ul,\n.db-content ol ol ol {\n  list-style-type: square;\n}\n\n.db-content li {\n  margin: 0.25em 0;\n}\n.db-content li > ul,\n.db-content li > ol {\n  margin: 0.25em 0 0;\n}\n.db-content li > p {\n  margin: 0;\n}\n\n.db-content ul.contains-task-list {\n  list-style: none;\n  padding-left: 0.25em;\n}\n.db-content li.task-list-item {\n  list-style: none;\n  margin-left: 0;\n}\n.db-content li.task-list-item input[type=\"checkbox\"] {\n  margin-right: 0.5em;\n}\n\n.db-content strong {\n  font-weight: 600;\n}\n.db-content em {\n  font-style: italic;\n}\n.db-content del {\n  text-decoration: line-through;\n  opacity: 0.75;\n}\n\n.db-content blockquote {\n  margin-left: 0;\n  padding-left: 1em;\n  border-left: 3px solid var(--db-accent-border, currentColor);\n  opacity: 0.85;\n}\n\n.db-content code {\n  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n  font-size: 0.9em;\n  padding: 0.15em 0.35em;\n  background: rgba(127, 127, 127, 0.15);\n  border-radius: 4px;\n}\n\n.db-content pre {\n  padding: 1em;\n  overflow-x: auto;\n  background: rgba(127, 127, 127, 0.1);\n  border-radius: 8px;\n}\n.db-content pre code {\n  padding: 0;\n  background: none;\n}\n\n/* display:block so wide tables scroll instead of overflowing the page on mobile;\n   costs full-bleed stretch for narrow tables. */\n.db-content table {\n  border-collapse: collapse;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow-x: auto;\n}\n\n.db-content th,\n.db-content td {\n  border: 1px solid rgba(127, 127, 127, 0.3);\n  padding: 0.5em 0.75em;\n  text-align: left;\n}\n\n.db-content th {\n  background: rgba(127, 127, 127, 0.08);\n  font-weight: 600;\n}\n\n.db-content img {\n  max-width: 100%;\n  height: auto;\n  border-radius: 8px;\n}\n\n.db-content a {\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n.db-content a:hover {\n  opacity: 0.8;\n}\n\n.db-content hr {\n  border: none;\n  border-top: 1px solid rgba(127, 127, 127, 0.3);\n  margin: 2em 0;\n}\n";

package/dist/reactNative.d.ts

@@ -10,21 +10,8 @@ export interface CompiledMDX {
 }
 export type { FailedMDX };
 /**
- * Wires up a React Native `compileMDX` with default Text/View/Image mappings for
- * every standard markdown element (and `EntryLink`), so a project sets up its RN
- * primitives once instead of mapping every tag on every call:
- *
- * ```ts
- * import { Text, View, Image } from "react-native";
- * import { createReactNativeRenderer } from "@draftbase/renderer/react-native";
- *
- * const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
- * ```
- *
- * Ships default styling that mirrors the web look (heading scale, link color, table
- * layout, ...) — pass `styleOptions.unstyled` to drop it, or `styleOptions.styles` to
- * override specific tags (`{ h1: { fontSize: 32 } }`). Pass `components` on the
- * returned `Content` to override individual tags' component, same as the web entry point.
+ * Wires up a React Native `compileMDX` with default Text/View/Image mappings for every standard markdown element
+ * (and `EntryLink`), so a project sets up its RN primitives once instead of mapping every tag on every call.
  */
 export declare function createReactNativeRenderer(primitives: ReactNativePrimitives, styleOptions?: ReactNativeStyleOptions): {
     compileMDX: (source: string) => Promise<CompiledMDX | FailedMDX>;

package/dist/reactNative.js

@@ -2,26 +2,44 @@ import * as runtime from "react/jsx-runtime";
 import { compileMDXCore } from "./core.js";
 import { buildReactNativeComponents, } from "./reactNativeComponents.js";
 /**
- * Wires up a React Native `compileMDX` with default Text/View/Image mappings for
- * every standard markdown element (and `EntryLink`), so a project sets up its RN
- * primitives once instead of mapping every tag on every call:
- *
- * ```ts
- * import { Text, View, Image } from "react-native";
- * import { createReactNativeRenderer } from "@draftbase/renderer/react-native";
- *
- * const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
- * ```
- *
- * Ships default styling that mirrors the web look (heading scale, link color, table
- * layout, ...) — pass `styleOptions.unstyled` to drop it, or `styleOptions.styles` to
- * override specific tags (`{ h1: { fontSize: 32 } }`). Pass `components` on the
- * returned `Content` to override individual tags' component, same as the web entry point.
+ * Wires up a React Native `compileMDX` with default Text/View/Image mappings for every standard markdown element
+ * (and `EntryLink`), so a project sets up its RN primitives once instead of mapping every tag on every call.
  */
 export function createReactNativeRenderer(primitives, styleOptions) {
     const defaultComponents = buildReactNativeComponents(primitives, styleOptions);
     async function compileMDX(source) {
-        return compileMDXCore(source, runtime, defaultComponents);
+        const result = await compileMDXCore(source, runtime, defaultComponents);
+        if (!result.ok)
+            return result;
+        // MDX bakes the source's literal inter-block whitespace into the compiled output as bare
+        // "\n" string children of the root Fragment (e.g. between a heading and the paragraph after
+        // it). React Native throws on a bare string child that isn't inside a <Text>, so those need
+        // stripping here — element-mapped tags already handle it themselves (see reactNativeComponents.ts).
+        const Content = result.Content;
+        // withDefaultComponents (core.ts) wraps the compiled MDX component in one props-forwarding
+        // layer, so unwrap exactly that to reach the actual root element (a Fragment for a multi-block
+        // document, or a single mapped element like Text/View otherwise) before stripping whitespace.
+        // Calling any further would start invoking the RN primitives (Text/View/Image) themselves.
+        const RootWithoutWhitespace = (props) => {
+            const wrapped = Content(props);
+            const rootElement = typeof wrapped.type === "function"
+                ? wrapped.type(wrapped.props)
+                : wrapped;
+            return stripWhitespaceRootChildren(rootElement);
+        };
+        return {
+            ok: true,
+            Content: RootWithoutWhitespace,
+        };
     }
     return { compileMDX };
 }
+function stripWhitespaceRootChildren(element) {
+    const children = element.props?.children;
+    if (!Array.isArray(children))
+        return element;
+    const filtered = children.filter((child) => typeof child !== "string" || child.trim() !== "");
+    if (filtered.length === children.length)
+        return element;
+    return runtime.jsxs(element.type, { ...element.props, children: filtered }, element.key ?? undefined);
+}

package/dist/reactNative.test.js

@@ -6,9 +6,8 @@ const Text = () => null;
 const View = () => null;
 const Image = () => null;
 const LEAVES = [Text, View, Image];
-/** Unwraps nested function-component elements (the default-components wrapper, the
- * per-tag style wrapper, ...) down to the RN primitive actually used, without calling
- * into the primitive itself (Text/View/Image are opaque leaves here, not JSX). */
+/** Unwraps nested function-component elements down to the RN primitive actually used,
+ * without calling into it (Text/View/Image are opaque leaves here, not JSX). */
 function resolve(element) {
     return typeof element.type === "function" && !LEAVES.includes(element.type)
         ? resolve(element.type(element.props))

package/dist/reactNativeComponents.d.ts

@@ -25,12 +25,8 @@ export interface ReactNativeStyleOptions {
     styles?: Partial<Record<string, Record<string, unknown>>>;
 }
 /**
- * Default MDX `components` map for React Native, built from its Text/View/Image
- * primitives. RN has no intrinsic host tags for `p`/`h1`/`a`/etc the way web React
- * does, so every standard markdown element needs an explicit mapping — this covers
- * the common ones, styled to match the web default look (heading scale, link color,
- * table layout, ...), so a project only wires up the three RN primitives once (via
- * `createReactNativeRenderer`) instead of mapping and styling every tag itself.
+ * Default MDX `components` map for React Native, built from its Text/View/Image primitives. RN has no intrinsic
+ * host tags for `p`/`h1`/`a`/etc the way web React does, so every standard markdown element needs an explicit mapping.
  */
 export declare function buildReactNativeComponents({ Text, View, Image }: ReactNativePrimitives, { unstyled, styles }?: ReactNativeStyleOptions): {
     p: ComponentType<{
@@ -138,27 +134,18 @@ export declare function buildReactNativeComponents({ Text, View, Image }: ReactN
         children?: ReactNode;
         style?: unknown;
     }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
-    ul: ComponentType<{
+    ul: (props: {
         children?: ReactNode;
         style?: unknown;
-    }> | ((props: {
-        children?: ReactNode;
-        style?: unknown;
-    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
-    ol: ComponentType<{
-        children?: ReactNode;
-        style?: unknown;
-    }> | ((props: {
-        children?: ReactNode;
-        style?: unknown;
-    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
-    blockquote: ComponentType<{
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    ol: (props: {
         children?: ReactNode;
         style?: unknown;
-    }> | ((props: {
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    blockquote: (props: {
         children?: ReactNode;
         style?: unknown;
-    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
     hr: ComponentType<{
         children?: ReactNode;
         style?: unknown;

package/dist/reactNativeComponents.js

@@ -1,12 +1,8 @@
 import * as runtime from "react/jsx-runtime";
 import { defaultReactNativeStyles } from "./reactNativeStyles.js";
 /**
- * Default MDX `components` map for React Native, built from its Text/View/Image
- * primitives. RN has no intrinsic host tags for `p`/`h1`/`a`/etc the way web React
- * does, so every standard markdown element needs an explicit mapping — this covers
- * the common ones, styled to match the web default look (heading scale, link color,
- * table layout, ...), so a project only wires up the three RN primitives once (via
- * `createReactNativeRenderer`) instead of mapping and styling every tag itself.
+ * Default MDX `components` map for React Native, built from its Text/View/Image primitives. RN has no intrinsic
+ * host tags for `p`/`h1`/`a`/etc the way web React does, so every standard markdown element needs an explicit mapping.
  */
 export function buildReactNativeComponents({ Text, View, Image }, { unstyled, styles } = {}) {
     const styleFor = (tag) => unstyled ? styles?.[tag] : { ...defaultReactNativeStyles[tag], ...styles?.[tag] };
@@ -16,6 +12,19 @@ export function buildReactNativeComponents({ Text, View, Image }, { unstyled, st
             return Base;
         return (props) => runtime.jsx(Base, { ...props, style: props.style ? [style, props.style] : style });
     }
+    // MDX bakes the source's literal formatting whitespace ("\n" between block elements) into the
+    // compiled JSX as string children, even though structurally these tags never hold real text.
+    // React Native's Text/View don't tolerate a bare string child of View, so container tags need it
+    // stripped — Text-mapped tags (p, li, td, ...) keep it, since inline whitespace there is real content.
+    function stripWhitespaceChildren(children) {
+        if (Array.isArray(children))
+            return children.filter((child) => typeof child !== "string" || child.trim() !== "");
+        return typeof children === "string" && children.trim() === "" ? undefined : children;
+    }
+    function container(Base, tag) {
+        const Styled = styled(Base, tag);
+        return (props) => runtime.jsx(Styled, { ...props, children: stripWhitespaceChildren(props.children) });
+    }
     const Img = ({ src, alt }) => runtime.jsx(Image, {
         source: { uri: src },
         accessibilityLabel: alt,
@@ -38,9 +47,9 @@ export function buildReactNativeComponents({ Text, View, Image }, { unstyled, st
         li: styled(Text, "li"),
         th: styled(Text, "th"),
         td: styled(Text, "td"),
-        ul: styled(View, "ul"),
-        ol: styled(View, "ol"),
-        blockquote: styled(View, "blockquote"),
+        ul: container(View, "ul"),
+        ol: container(View, "ol"),
+        blockquote: container(View, "blockquote"),
         hr: styled(View, "hr"),
         table: styled(View, "table"),
         thead: View,

package/dist/reactNativeComponents.test.js

@@ -1,9 +1,8 @@
 import assert from "node:assert/strict";
 import test from "node:test";
 import { buildReactNativeComponents } from "./reactNativeComponents.js";
-// Stand-ins for react-native's Text/View/Image — this package doesn't depend on
-// react-native itself (it only resolves inside Metro, not plain Node), so the mapping
-// logic is tested against fakes with the same shape.
+// Stand-ins for react-native's Text/View/Image — this package doesn't depend on react-native itself
+// (it only resolves inside Metro, not plain Node), so the mapping is tested against fakes with the same shape.
 const Text = () => null;
 const View = () => null;
 const Image = () => null;

package/dist/reactNativeStyles.d.ts

@@ -1,4 +1,3 @@
-/** Default per-tag style objects for the React Native preset — mirrors `styles.css`'s
- * web defaults (heading scale, link color/underline, code/blockquote treatment, list
- * spacing) so RN output looks like the web default instead of unstyled plain text. */
+/** Default per-tag style objects for the React Native preset — mirrors `styles.css`'s web defaults
+ * so RN output looks like the web default instead of unstyled plain text. */
 export declare const defaultReactNativeStyles: Record<string, Record<string, unknown>>;

package/dist/reactNativeStyles.js

@@ -1,6 +1,5 @@
-/** Default per-tag style objects for the React Native preset — mirrors `styles.css`'s
- * web defaults (heading scale, link color/underline, code/blockquote treatment, list
- * spacing) so RN output looks like the web default instead of unstyled plain text. */
+/** Default per-tag style objects for the React Native preset — mirrors `styles.css`'s web defaults
+ * so RN output looks like the web default instead of unstyled plain text. */
 export const defaultReactNativeStyles = {
     p: { marginBottom: 12, lineHeight: 22 },
     h1: { fontSize: 28, fontWeight: "700", marginTop: 20, marginBottom: 10 },

package/dist/styles.css

@@ -1,7 +1,9 @@
 /* Slim default typography for Draftbase MDX content.
-   Opt-in: import "@draftbase/react/styles.css".
-   Disable per-render: <MDXContent unstyled />.
-   Override: target ".db-content" with higher-specificity or later-loaded rules. */
+   Opt-in: import "@draftbase/renderer/styles.css".
+   Disable per-render: <MDXContent unstyled /> or toHtml(source, { unstyled: true }).
+   Theme via custom properties: --db-heading-color, --db-link-color, --db-accent-border,
+   --db-target-bg. Override further: target ".db-content" with higher-specificity or
+   later-loaded rules. */
 
 .db-content {
   line-height: 1.6;
@@ -9,6 +11,19 @@
   overflow-wrap: break-word;
 }
 
+.db-content h1,
+.db-content h2,
+.db-content h3,
+.db-content h4,
+.db-content h5,
+.db-content h6 {
+  color: var(--db-heading-color, inherit);
+}
+
+.db-content a {
+  color: var(--db-link-color, inherit);
+}
+
 /* remark-gfm emits the footnotes label as .sr-only; define it so it stays hidden
    without the consumer needing Tailwind or their own utility. */
 .db-content .sr-only {
@@ -38,7 +53,6 @@
   font-weight: 600;
   line-height: 1.25;
   margin: 1.5em 0 0.5em;
-  color: inherit;
 }
 
 /* Highlights a footnote/citation anchor when the URL hash lands on it, e.g. #fn-1. */
@@ -165,7 +179,7 @@
 .db-content blockquote {
   margin-left: 0;
   padding-left: 1em;
-  border-left: 3px solid currentColor;
+  border-left: 3px solid var(--db-accent-border, currentColor);
   opacity: 0.85;
 }
 
@@ -217,7 +231,6 @@
 }
 
 .db-content a {
-  color: inherit;
   text-decoration: underline;
   text-underline-offset: 2px;
 }

package/dist/toHtml.d.ts

@@ -1,7 +1,29 @@
-/**
- * Renders raw MDX/markdown to a static HTML string — no React, no JSX component
- * evaluation. For contexts that need plain HTML (email, RSS, non-React embeds),
- * not a mounted React tree; use `compileMDX`/`MDXContent` for that instead.
- * JSX inside the source (e.g. `<Callout>`) is passed through as literal HTML tags.
- */
-export declare function toHtml(source: string): Promise<string>;
+/** Renders a custom JSX tag to an HTML string. `props` values are always strings (HTML parsing,
+ * not JSX). `childrenHtml` is the tag's contents, already rendered, nested tags resolved first. */
+export type ToHtmlComponent = (props: Record<string, string>, childrenHtml: string) => string;
+export interface ToHtmlOptions {
+    /** Renders custom tags (e.g. `<Callout>`, `<EntryLink id>`) by tag name, case-insensitive.
+     * `EntryLink` defaults to `<a href="/entries/{id}">` unless overridden. */
+    components?: Record<string, ToHtmlComponent>;
+    /** Adds `target`/`rel` to links whose `href` has a URL scheme (`https:`, `mailto:`, ...).
+     * `true` uses `target="_blank" rel="noopener noreferrer"`; pass an object to override. */
+    externalLinks?: boolean | {
+        target?: string;
+        rel?: string;
+    };
+    /** Skip wrapping the output in a `db-content`-classed `<div>` and the inlined default
+     * styles (see below). Same semantics as `MDXContent`'s `unstyled` prop. */
+    unstyled?: boolean;
+    /** Extra class name(s) merged onto the wrapper `<div>`. */
+    className?: string;
+    /** Called (in addition to `console.error`) when a custom component (from `components`) throws
+     * while rendering. The tag is left as literal HTML instead of failing the whole render. */
+    onError?: (error: unknown, tagName: string) => void;
+}
+/** Renders MDX/markdown to a static, self-contained HTML string: pre-wrapped in
+ * `<div class="db-content">` with the default styles inlined as a `<style>` tag ahead of it —
+ * no separate `styles.css` import needed. Calling `toHtml` more than once on the same page
+ * repeats that `<style>` tag (harmless, just redundant bytes); pass `unstyled: true` and load
+ * `@draftbase/renderer/styles.css` yourself once if that matters. No React, no mounted tree —
+ * use `compileMDX`/`MDXContent` instead when you need a React tree. */
+export declare function toHtml(source: string, options?: ToHtmlOptions): Promise<string>;

package/dist/toHtml.js

@@ -2,21 +2,91 @@ import { unified } from "unified";
 import remarkParse from "remark-parse";
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
+import rehypeRaw from "rehype-raw";
 import rehypeSlug from "rehype-slug";
 import rehypeStringify from "rehype-stringify";
-/**
- * Renders raw MDX/markdown to a static HTML string — no React, no JSX component
- * evaluation. For contexts that need plain HTML (email, RSS, non-React embeds),
- * not a mounted React tree; use `compileMDX`/`MDXContent` for that instead.
- * JSX inside the source (e.g. `<Callout>`) is passed through as literal HTML tags.
- */
-export async function toHtml(source) {
-    const file = await unified()
+import { toHtml as hastToHtml } from "hast-util-to-html";
+import { wrapperClassName } from "./wrapperClassName.js";
+import { CSS_TEXT } from "./cssText.js";
+const SCHEME_HREF = /^[a-z][a-z0-9+.-]*:/i;
+const defaultEntryLink = (props, childrenHtml) => `<a href="/entries/${props.id ?? ""}">${childrenHtml}</a>`;
+function hastPropsToStrings(properties) {
+    const props = {};
+    for (const [key, value] of Object.entries(properties ?? {})) {
+        if (typeof value === "string")
+            props[key] = value;
+        else if (Array.isArray(value))
+            props[key] = value.join(" ");
+    }
+    return props;
+}
+function rehypeDraftbase(options) {
+    const componentsByTag = options.components
+        ? new Map(Object.entries({ EntryLink: defaultEntryLink, ...options.components }).map(([name, render]) => [name.toLowerCase(), render]))
+        : undefined;
+    return (tree) => {
+        function transform(node) {
+            for (const child of node.children ?? [])
+                transform(child);
+            if (node.type !== "element" || !node.tagName)
+                return;
+            const tagName = node.tagName;
+            const render = componentsByTag?.get(tagName);
+            if (render) {
+                try {
+                    const childrenHtml = hastToHtml({ type: "root", children: node.children ?? [] }, { allowDangerousHtml: true });
+                    node.value = render(hastPropsToStrings(node.properties), childrenHtml);
+                    node.type = "raw";
+                    node.tagName = undefined;
+                    node.properties = undefined;
+                    node.children = undefined;
+                }
+                catch (error) {
+                    // Leave the tag as literal HTML instead of failing the whole render.
+                    console.error(`Draftbase component "${tagName}" failed to render`, error);
+                    options.onError?.(error, tagName);
+                }
+                return;
+            }
+            if (node.tagName === "a" && options.externalLinks) {
+                const href = node.properties?.href;
+                if (typeof href !== "string" || !SCHEME_HREF.test(href))
+                    return;
+                const overrides = typeof options.externalLinks === "object" ? options.externalLinks : {};
+                node.properties = {
+                    ...node.properties,
+                    target: overrides.target ?? "_blank",
+                    rel: overrides.rel ?? "noopener noreferrer",
+                };
+            }
+        }
+        transform(tree);
+    };
+}
+/** Renders MDX/markdown to a static, self-contained HTML string: pre-wrapped in
+ * `<div class="db-content">` with the default styles inlined as a `<style>` tag ahead of it —
+ * no separate `styles.css` import needed. Calling `toHtml` more than once on the same page
+ * repeats that `<style>` tag (harmless, just redundant bytes); pass `unstyled: true` and load
+ * `@draftbase/renderer/styles.css` yourself once if that matters. No React, no mounted tree —
+ * use `compileMDX`/`MDXContent` instead when you need a React tree. */
+export async function toHtml(source, options = {}) {
+    const needsRawParse = Boolean(options.components);
+    const processor = unified()
         .use(remarkParse)
         .use(remarkGfm)
-        .use(remarkRehype, { allowDangerousHtml: true })
+        .use(remarkRehype, { allowDangerousHtml: true });
+    if (needsRawParse)
+        processor.use(rehypeRaw);
+    processor
         .use(rehypeSlug)
-        .use(rehypeStringify, { allowDangerousHtml: true })
-        .process(source);
-    return String(file);
+        .use(rehypeDraftbase, options)
+        .use(rehypeStringify, { allowDangerousHtml: true });
+    const file = await processor.process(source);
+    const html = String(file);
+    const wrapperClass = wrapperClassName(options.unstyled, options.className);
+    if (!wrapperClass)
+        return html;
+    return options.unstyled
+        ? `<div class="${wrapperClass}">${html}</div>`
+        : `<style>${CSS_TEXT}</style><div class="${wrapperClass}">${html}</div>`;
 }

package/dist/toHtml.test.js

@@ -1,12 +1,80 @@
 import assert from "node:assert/strict";
 import { test } from "node:test";
 import { toHtml } from "./toHtml.js";
+import { CSS_TEXT } from "./cssText.js";
 test("renders markdown to html", async () => {
     const html = await toHtml("# Title\n\nSome **bold** text.");
     assert.match(html, /<h1 id="title">Title<\/h1>/);
     assert.match(html, /<strong>bold<\/strong>/);
 });
+test("wraps output in a db-content div with inlined styles by default", async () => {
+    const html = await toHtml("hi");
+    assert.equal(html, `<style>${CSS_TEXT}</style><div class="db-content"><p>hi</p></div>`);
+});
+test("unstyled skips the wrapper div and the inlined styles", async () => {
+    const html = await toHtml("hi", { unstyled: true });
+    assert.equal(html, "<p>hi</p>");
+});
+test("className merges onto the wrapper div, styles still inlined", async () => {
+    const html = await toHtml("hi", { className: "prose" });
+    assert.equal(html, `<style>${CSS_TEXT}</style><div class="db-content prose"><p>hi</p></div>`);
+});
 test("supports gfm tables", async () => {
     const html = await toHtml("| a | b |\n| - | - |\n| 1 | 2 |");
     assert.match(html, /<table>/);
 });
+test("leaves custom tags as literal HTML when components isn't passed", async () => {
+    const html = await toHtml('<EntryLink id="abc">Post</EntryLink><Callout>hi</Callout>');
+    assert.match(html, /<EntryLink id="abc">Post<\/EntryLink>/);
+    assert.match(html, /<Callout>hi<\/Callout>/);
+});
+test("EntryLink defaults to /entries/{id} once components is passed", async () => {
+    const html = await toHtml('<EntryLink id="abc">Post</EntryLink>', { components: {} });
+    assert.match(html, /<a href="\/entries\/abc">Post<\/a>/);
+});
+test("components renders a custom tag, keyed case-insensitively, with string props", async () => {
+    const html = await toHtml('<Callout type="warning">Careful</Callout>', {
+        components: {
+            Callout: (props, childrenHtml) => `<div class="callout-${props.type}">${childrenHtml}</div>`,
+        },
+    });
+    assert.match(html, /<div class="callout-warning">Careful<\/div>/);
+});
+test("components overrides the default EntryLink", async () => {
+    const html = await toHtml('<EntryLink id="abc">Post</EntryLink>', {
+        components: {
+            EntryLink: (props, childrenHtml) => `<a href="/blog/${props.id}">${childrenHtml}</a>`,
+        },
+    });
+    assert.match(html, /<a href="\/blog\/abc">Post<\/a>/);
+});
+test("components resolves nested custom tags before serializing the parent's children", async () => {
+    const html = await toHtml('<Callout><EntryLink id="abc">Post</EntryLink></Callout>', {
+        components: {
+            Callout: (_props, childrenHtml) => `<div>${childrenHtml}</div>`,
+        },
+    });
+    assert.match(html, /<div><a href="\/entries\/abc">Post<\/a><\/div>/);
+});
+test("a component that throws leaves the tag as literal HTML and calls onError", async () => {
+    const errors = [];
+    const html = await toHtml('<Callout type="warning">Careful</Callout>', {
+        components: {
+            Callout: () => {
+                throw new Error("boom");
+            },
+        },
+        onError: (error, tagName) => errors.push([error, tagName]),
+    });
+    assert.match(html, /<callout type="warning">Careful<\/callout>/);
+    assert.equal(errors.length, 1);
+    assert.equal(errors[0][0].message, "boom");
+    assert.equal(errors[0][1], "callout");
+});
+test("adds target/rel to external links when externalLinks is true", async () => {
+    const html = await toHtml("[ext](https://example.com) and [rel](/local)", {
+        externalLinks: true,
+    });
+    assert.match(html, /<a href="https:\/\/example\.com" target="_blank" rel="noopener noreferrer">ext<\/a>/);
+    assert.match(html, /<a href="\/local">rel<\/a>/);
+});

package/dist/vue.d.ts

@@ -6,9 +6,7 @@ export interface CompiledMDX {
 }
 export type { FailedMDX };
 /**
- * Compiles raw MDX/markdown into a renderable Vue component. Vue has no RSC-style
- * async component, so call this from `setup()`/a composable and render the result
- * yourself: `h(Content, props)` or `<component :is="Content" />`. Standard markdown
- * elements render via real DOM tags with zero setup.
+ * Compiles raw MDX/markdown into a renderable Vue component. Vue has no RSC-style async component, so call this
+ * from `setup()`/a composable and render the result yourself: `h(Content, props)`.
  */
 export declare function compileMDX(source: string): Promise<CompiledMDX | FailedMDX>;

package/dist/vue.js

@@ -2,10 +2,8 @@ import { compileMDXCore, makeDefaultEntryLink } from "./core.js";
 import { vueJsxRuntime } from "./vueRuntime.js";
 const defaultComponents = { EntryLink: makeDefaultEntryLink(vueJsxRuntime) };
 /**
- * Compiles raw MDX/markdown into a renderable Vue component. Vue has no RSC-style
- * async component, so call this from `setup()`/a composable and render the result
- * yourself: `h(Content, props)` or `<component :is="Content" />`. Standard markdown
- * elements render via real DOM tags with zero setup.
+ * Compiles raw MDX/markdown into a renderable Vue component. Vue has no RSC-style async component, so call this
+ * from `setup()`/a composable and render the result yourself: `h(Content, props)`.
  */
 export async function compileMDX(source) {
     return compileMDXCore(source, vueJsxRuntime, defaultComponents);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",
@@ -40,8 +40,8 @@
     "README.md"
   ],
   "scripts": {
-    "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
-    "lint": "tsc --noEmit",
+    "build": "node scripts/generate-css-text.mjs && tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
+    "lint": "node scripts/generate-css-text.mjs && tsc --noEmit",
     "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js dist/reactNativeComponents.test.js dist/reactNative.test.js dist/MDXContent.test.js"
   },
   "peerDependencies": {
@@ -61,7 +61,9 @@
     "remark-gfm": "^4.0.0",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "rehype-raw": "^7.0.0",
     "rehype-slug": "^6.0.0",
+    "hast-util-to-html": "^9.0.0",
     "rehype-stringify": "^10.0.1",
     "unified": "^11.0.5"
   },