@draftbase/renderer 0.3.2 → 0.4.3

package/README.md

@@ -21,13 +21,16 @@ pnpm add @draftbase/renderer
 
 Every framework entry point exposes the **same API shape** — `compileMDX(source)` resolving to `{ ok: true, Content }` or `{ ok: false, error }` — so switching frameworks (or supporting several in one monorepo) means changing the import path, not the calling code:
 
-| Framework                                        | Import                                    | `Content` is a...                           |
-| ------------------------------------------------ | ----------------------------------------- | ------------------------------------------- |
-| React, Next.js, React Native, Remix, Astro, Vite | `@draftbase/renderer`                     | React component                             |
-| Vue                                              | `@draftbase/renderer/vue`                 | Vue component                               |
-| Anything else (Svelte, plain HTML, email, RSS)   | `toHtml` (below), from either entry point | — (returns an HTML string, not a component) |
+| Framework                                      | Import                                    | `Content` is a...                           |
+| ---------------------------------------------- | ----------------------------------------- | ------------------------------------------- |
+| React, Next.js, Remix, Astro, Vite             | `@draftbase/renderer`                     | React component                             |
+| React Native                                   | `@draftbase/renderer/react-native`        | React component                             |
+| Vue, Nuxt                                      | `@draftbase/renderer/vue`                 | Vue component                               |
+| Anything else (Svelte, plain HTML, email, RSS) | `toHtml` (below), from either entry point | — (returns an HTML string, not a component) |
 
-Only import the entry point for the framework you use — each pulls in just that framework's peer dependency (React or Vue), never both, so an app using one never bundles code for the other.
+Only import the entry point for the framework you use — each pulls in just that framework's peer dependency (React or Vue), never both, so an app using one never bundles code for the other. The `/react-native` entry point never imports the `react-native` package itself (see its section below), so a Vue or web-only React project never pulls it in either.
+
+Every entry point renders standard markdown (`p`, `h1`-`h6`, tables, lists, links, ...) **with zero component mapping** — web React/Vue use real DOM elements automatically, and the React Native entry ships default Text/View/Image mappings (see below). You only ever need to pass `components` for content-specific custom JSX tags (e.g. `<Callout>`) that have no sensible default — and even `EntryLink` (the CMS's entry-link tag) has a default (`<a href="/entries/{id}">`) unless you override it.
 
 ## ⚛️ Next.js App Router
 
@@ -44,14 +47,51 @@ export default async function Page() {
 
 `MDXContent` is an `async` Server Component — it only works where React can await inside a component body (Next.js RSC).
 
-## Other React (client-side web, React Native, Remix, ...)
+## Other React (client-side web, Remix, ...)
 
 Call `compileMDX` yourself from a loader/effect and render the result — no RSC required:
 
 ```tsx
 import { useEffect, useState } from "react";
 import { compileMDX } from "@draftbase/renderer";
+
+function Entry({ source }: { source: string }) {
+  const [compiled, setCompiled] = useState<Awaited<ReturnType<typeof compileMDX>>>();
+
+  useEffect(() => {
+    compileMDX(source).then(setCompiled);
+  }, [source]);
+
+  if (!compiled) return null;
+  if (!compiled.ok) return <p>{source}</p>;
+
+  const { Content } = compiled;
+  return <Content />; // standard markdown renders as real DOM elements, no components map needed
+}
+```
+
+`compiled.ok` only catches MDX _syntax_ errors. If the source references a custom 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` 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={<p>{source}</p>}>
+  <Content />
+</MDXErrorBoundary>;
+```
+
+Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
+
+## React Native
+
+RN has no intrinsic host tags for `p`/`h1`/`a`/etc the way web React has real DOM elements, so it can't render standard markdown for free the way the web entry point does. Instead of mapping every tag yourself, wire up RN's three core primitives **once** via `@draftbase/renderer/react-native` and every markdown element — including a styled default `EntryLink` — works out of the box from there:
+
+```tsx
+import { useEffect, useState } from "react";
 import { View, Text } from "react-native";
+import { createReactNativeRenderer } from "@draftbase/renderer/react-native";
+
+const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
 
 function Entry({ source }: { source: string }) {
   const [compiled, setCompiled] = useState<Awaited<ReturnType<typeof compileMDX>>>();
@@ -66,23 +106,25 @@ function Entry({ source }: { source: string }) {
   const { Content } = compiled;
   return (
     <View>
-      <Content components={{ p: Text, h1: Text /* ... */ }} />
+      <Content /> {/* p, h1-h6, a, table, EntryLink, ... all render already-styled */}
     </View>
   );
 }
 ```
 
-`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.
+Default styling mirrors the web look (heading scale, blue underlined links, monospace code, table borders and row layout, ...). Override or disable it via a second argument:
 
 ```tsx
-import { MDXErrorBoundary } from "@draftbase/renderer";
+// override specific tags
+createReactNativeRenderer({ Text, View, Image }, { styles: { h1: { fontSize: 32 } } });
 
-<MDXErrorBoundary fallback={<Text>{source}</Text>}>
-  <Content components={{ p: Text, h1: Text /* ... */ }} />
-</MDXErrorBoundary>;
+// drop all default styling
+createReactNativeRenderer({ Text, View, Image }, { unstyled: true });
 ```
 
-Extended markdown (tables, strikethrough, task lists, autolinks) is supported out of the box via `remark-gfm`.
+`components` on the returned `Content` still works the same way, per-tag, for anything you want to swap out entirely (e.g. a tappable `EntryLink` that actually navigates — the default renders a plain styled `Text`, since navigation is app-specific).
+
+This package never imports the `react-native` package itself — you pass its `Text`/`View`/`Image` in, so nothing RN-specific ends up in a web or Vue bundle.
 
 ## Astro
 
@@ -190,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,17 +9,15 @@ export interface CompiledMDX {
 }
 export type { FailedMDX };
 /**
- * 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
- * Component (the `MDXContent` component below does the latter).
+ * 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. */
     unstyled?: boolean;
@@ -33,8 +31,7 @@ export interface MDXContentProps {
     errorTag?: ElementType;
 }
 /**
- * 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>;

package/dist/MDXContent.js

@@ -1,20 +1,19 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as runtime from "react/jsx-runtime";
-import { compileMDXCore } from "./core.js";
+import { compileMDXCore, makeDefaultEntryLink } from "./core.js";
 import { wrapperClassName } from "./wrapperClassName.js";
 import { MDXErrorBoundary } from "./MDXErrorBoundary.js";
+const defaultComponents = { EntryLink: makeDefaultEntryLink(runtime) };
 /**
- * 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
- * Component (the `MDXContent` component below does the latter).
+ * 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);
+    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", }) {
     const Wrapper = wrapperTag;

package/dist/MDXContent.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/MDXContent.test.js

@@ -0,0 +1,19 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { MDXContent } from "./MDXContent.js";
+// MDXContent is an async Server Component; call it directly (as React's RSC runtime would) and inspect the returned element tree.
+test("MDXContent wraps compiled MDX in the styled wrapper element", async () => {
+    const element = (await MDXContent({ source: "# Hello" }));
+    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 }));
+    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 fallback = element.props.children;
+    assert.equal(fallback.type, "p");
+    assert.equal(fallback.props.children, "<broken");
+});

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() {

package/dist/compileMDX.test.js

@@ -3,14 +3,19 @@ import test from "node:test";
 import { compileMDX as compileReactMDX } from "./MDXContent.js";
 import { compileMDX as compileVueMDX } from "./vue.js";
 const SOURCE = "# Hello\n\nWorld";
+/** 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))
+        : element;
+}
 test("react compileMDX evaluates MDX into a React element tree", async () => {
     const result = await compileReactMDX(SOURCE);
     assert.equal(result.ok, true);
     if (!result.ok)
         return;
-    assert.equal(typeof result.Content, "function");
-    const render = result.Content;
-    const element = render({});
+    const element = resolve(result.Content({}));
     assert.equal(element.props.children[0].type, "h1");
 });
 test("vue compileMDX evaluates the same MDX source into a Vue vnode tree", async () => {
@@ -18,7 +23,35 @@ test("vue compileMDX evaluates the same MDX source into a Vue vnode tree", async
     assert.equal(result.ok, true);
     if (!result.ok)
         return;
-    assert.equal(typeof result.Content, "function");
-    const vnode = result.Content({});
+    const vnode = resolve(result.Content({}));
     assert.equal(vnode.children[0].type, "h1");
 });
+test("react EntryLink renders as a link to /entries/{id} with no components map supplied", async () => {
+    const result = await compileReactMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const link = resolve(result.Content({}));
+    assert.equal(link.type, "a");
+    assert.equal(link.props.href, "/entries/abc123");
+});
+test("vue EntryLink renders as a link to /entries/{id} with no components map supplied", async () => {
+    const result = await compileVueMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const link = resolve(result.Content({}));
+    assert.equal(link.type, "a");
+    assert.equal(link.props.href, "/entries/abc123");
+});
+test("a supplied EntryLink override still wins over the default", async () => {
+    const result = await compileReactMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const CustomEntryLink = () => ({ type: "custom-entry-link", props: {} });
+    const link = resolve(result.Content({
+        components: { EntryLink: CustomEntryLink },
+    }));
+    assert.equal(link.type, "custom-entry-link");
+});

package/dist/core.d.ts

@@ -9,8 +9,13 @@ 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.
+ * 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): Promise<CompiledMDX<TComponent> | FailedMDX>;
+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}">`; apps that
+ * route entries differently override it by passing `components.EntryLink`. */
+export declare function makeDefaultEntryLink(jsxRuntime: JsxRuntime): ({ id, children }: {
+    id?: string;
+    children?: unknown;
+}) => JSX.Element;

package/dist/core.js

@@ -2,22 +2,39 @@ 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.
+ * 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) {
+export async function compileMDXCore(source, jsxRuntime, defaultComponents) {
     try {
         const { default: Content } = await evaluate(source, {
             ...jsxRuntime,
             remarkPlugins: [remarkGfm],
             rehypePlugins: [rehypeSlug],
         });
+        const OutputContent = defaultComponents
+            ? withDefaultComponents(Content, defaultComponents, jsxRuntime)
+            : Content;
         // evaluate()'s return type assumes React's JSX types regardless of the runtime
         // passed in; TComponent reflects the actual shape for the calling framework.
-        return { ok: true, Content: Content };
+        return { ok: true, Content: OutputContent };
     }
     catch (error) {
         return { ok: false, error };
     }
 }
+function withDefaultComponents(Content, defaults, jsxRuntime) {
+    return function ContentWithDefaults(props) {
+        return jsxRuntime.jsx(Content, {
+            ...props,
+            components: { ...defaults, ...props?.components },
+        });
+    };
+}
+/** 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/reactNative.d.ts

@@ -0,0 +1,18 @@
+import type { MDXComponents } from "mdx/types";
+import type { ComponentType } from "react";
+import { type FailedMDX } from "./core.js";
+import { type ReactNativePrimitives, type ReactNativeStyleOptions } from "./reactNativeComponents.js";
+export interface CompiledMDX {
+    ok: true;
+    Content: ComponentType<{
+        components?: MDXComponents;
+    }>;
+}
+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.
+ */
+export declare function createReactNativeRenderer(primitives: ReactNativePrimitives, styleOptions?: ReactNativeStyleOptions): {
+    compileMDX: (source: string) => Promise<CompiledMDX | FailedMDX>;
+};

package/dist/reactNative.js

@@ -0,0 +1,45 @@
+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.
+ */
+export function createReactNativeRenderer(primitives, styleOptions) {
+    const defaultComponents = buildReactNativeComponents(primitives, styleOptions);
+    async function compileMDX(source) {
+        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.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/reactNative.test.js

@@ -0,0 +1,35 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createReactNativeRenderer } from "./reactNative.js";
+// Fakes standing in for react-native's Text/View/Image — see reactNativeComponents.test.ts.
+const Text = () => null;
+const View = () => null;
+const Image = () => null;
+const LEAVES = [Text, View, Image];
+/** 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))
+        : element;
+}
+test("React Native smoke test: renders standard markdown through Text/View with zero setup beyond the three primitives", async () => {
+    const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
+    const result = await compileMDX("# Hello\n\nWorld");
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const element = resolve(result.Content({}));
+    const heading = resolve(element.props.children[0]);
+    assert.equal(heading.type, Text);
+    assert.equal(heading.props.style.fontSize, 28);
+});
+test("React Native EntryLink renders out of the box (no components map)", async () => {
+    const { compileMDX } = createReactNativeRenderer({ Text, View, Image });
+    const result = await compileMDX('<EntryLink id="abc123">Read more</EntryLink>');
+    assert.equal(result.ok, true);
+    if (!result.ok)
+        return;
+    const element = resolve(result.Content({}));
+    assert.equal(element.type, Text);
+});

package/dist/reactNativeComponents.d.ts

@@ -0,0 +1,196 @@
+import type { ComponentType, ReactNode } from "react";
+export interface ReactNativePrimitives {
+    Text: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    View: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    Image: ComponentType<{
+        source: {
+            uri?: string;
+        };
+        accessibilityLabel?: string;
+        style?: unknown;
+    }>;
+}
+export interface ReactNativeStyleOptions {
+    /** Skip the built-in default styles (heading scale, link color, table borders, ...)
+     * entirely — components render with no `style` unless `styles` supplies one. */
+    unstyled?: boolean;
+    /** Per-tag style overrides, merged on top of the defaults (or used as-is under
+     * `unstyled`). Same tag keys as the components map, e.g. `{ h1: { fontSize: 32 } }`. */
+    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.
+ */
+export declare function buildReactNativeComponents({ Text, View, Image }: ReactNativePrimitives, { unstyled, styles }?: ReactNativeStyleOptions): {
+    p: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h1: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h2: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h3: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h4: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h5: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    h6: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    strong: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    em: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    del: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    code: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    pre: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    li: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    th: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    td: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    ul: (props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    ol: (props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    blockquote: (props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+    hr: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    table: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    thead: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    tbody: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }>;
+    tr: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    a: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    EntryLink: ComponentType<{
+        children?: ReactNode;
+        style?: unknown;
+    }> | ((props: {
+        children?: ReactNode;
+        style?: unknown;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>);
+    img: ({ src, alt }: {
+        src?: string;
+        alt?: string;
+    }) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+};

package/dist/reactNativeComponents.js

@@ -0,0 +1,62 @@
+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.
+ */
+export function buildReactNativeComponents({ Text, View, Image }, { unstyled, styles } = {}) {
+    const styleFor = (tag) => unstyled ? styles?.[tag] : { ...defaultReactNativeStyles[tag], ...styles?.[tag] };
+    function styled(Base, tag) {
+        const style = styleFor(tag);
+        if (!style || Object.keys(style).length === 0)
+            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,
+        style: styleFor("img"),
+    });
+    const Link = styled(({ children, style }) => runtime.jsx(Text, { children, style }), "a");
+    return {
+        p: styled(Text, "p"),
+        h1: styled(Text, "h1"),
+        h2: styled(Text, "h2"),
+        h3: styled(Text, "h3"),
+        h4: styled(Text, "h4"),
+        h5: styled(Text, "h5"),
+        h6: styled(Text, "h6"),
+        strong: styled(Text, "strong"),
+        em: styled(Text, "em"),
+        del: styled(Text, "del"),
+        code: styled(Text, "code"),
+        pre: styled(Text, "pre"),
+        li: styled(Text, "li"),
+        th: styled(Text, "th"),
+        td: styled(Text, "td"),
+        ul: container(View, "ul"),
+        ol: container(View, "ol"),
+        blockquote: container(View, "blockquote"),
+        hr: styled(View, "hr"),
+        table: styled(View, "table"),
+        thead: View,
+        tbody: View,
+        tr: styled(View, "tr"),
+        a: Link,
+        EntryLink: Link,
+        img: Img,
+    };
+}

package/dist/reactNativeComponents.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/reactNativeComponents.test.js

@@ -0,0 +1,43 @@
+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 is tested against fakes with the same shape.
+const Text = () => null;
+const View = () => null;
+const Image = () => null;
+test("maps standard markdown elements onto Text/View, with default styling applied", () => {
+    const components = buildReactNativeComponents({ Text, View, Image });
+    const h1 = components.h1({});
+    assert.equal(h1.type, Text);
+    assert.equal(h1.props.style.fontSize, 28);
+    const table = components.table({});
+    assert.equal(table.type, View);
+    const tr = components.tr({});
+    assert.equal(tr.props.style.flexDirection, "row");
+});
+test("unstyled drops the defaults", () => {
+    const components = buildReactNativeComponents({ Text, View, Image }, { unstyled: true });
+    assert.equal(components.h1, Text); // no style to apply -> returns the primitive directly
+});
+test("styles option overrides a specific tag without needing unstyled", () => {
+    const components = buildReactNativeComponents({ Text, View, Image }, { styles: { h1: { fontSize: 40 } } });
+    const h1 = components.h1({});
+    assert.equal(h1.props.style.fontSize, 40);
+    assert.equal(h1.props.style.fontWeight, "700"); // default still applied
+});
+test("img wrapper passes src through as Image's source.uri", () => {
+    const components = buildReactNativeComponents({ Text, View, Image });
+    const element = components.img({ src: "https://example.com/a.png", alt: "a" });
+    const props = element.props;
+    assert.equal(props.source.uri, "https://example.com/a.png");
+    assert.equal(props.accessibilityLabel, "a");
+});
+test("a and EntryLink both render as styled Text", () => {
+    const components = buildReactNativeComponents({ Text, View, Image });
+    assert.equal(components.EntryLink, components.a);
+    const element = components.a({ children: "hi" });
+    const inner = element.type(element.props);
+    assert.equal(inner.type, Text);
+    assert.equal(inner.props.style.color, "#2563eb");
+});

package/dist/reactNativeStyles.d.ts

@@ -0,0 +1,3 @@
+/** 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

@@ -0,0 +1,45 @@
+/** 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 },
+    h2: { fontSize: 24, fontWeight: "700", marginTop: 18, marginBottom: 8 },
+    h3: { fontSize: 20, fontWeight: "700", marginTop: 16, marginBottom: 8 },
+    h4: { fontSize: 18, fontWeight: "600", marginTop: 14, marginBottom: 6 },
+    h5: { fontSize: 16, fontWeight: "600", marginTop: 12, marginBottom: 6 },
+    h6: { fontSize: 14, fontWeight: "600", marginTop: 12, marginBottom: 6 },
+    strong: { fontWeight: "700" },
+    em: { fontStyle: "italic" },
+    del: { textDecorationLine: "line-through" },
+    code: {
+        fontFamily: "Courier",
+        backgroundColor: "#f2f2f2",
+        paddingHorizontal: 4,
+        borderRadius: 3,
+    },
+    pre: {
+        fontFamily: "Courier",
+        backgroundColor: "#f2f2f2",
+        padding: 12,
+        borderRadius: 6,
+        marginBottom: 12,
+    },
+    blockquote: {
+        borderLeftWidth: 3,
+        borderLeftColor: "#d0d0d0",
+        paddingLeft: 12,
+        marginBottom: 12,
+        opacity: 0.85,
+    },
+    li: { marginBottom: 4 },
+    ul: { marginBottom: 12 },
+    ol: { marginBottom: 12 },
+    hr: { borderBottomWidth: 1, borderBottomColor: "#d0d0d0", marginVertical: 16 },
+    table: { borderWidth: 1, borderColor: "#d0d0d0", marginBottom: 12 },
+    // RN has no native table layout — `tr` lays cells out as a row (flex), `th`/`td` split
+    // the row evenly; only a bottom rule separates rows (no per-cell borders, unlike web).
+    tr: { flexDirection: "row", borderBottomWidth: 1, borderColor: "#d0d0d0" },
+    th: { flex: 1, fontWeight: "700", padding: 6 },
+    td: { flex: 1, padding: 6 },
+    a: { color: "#2563eb", textDecorationLine: "underline" },
+};

package/dist/toHtml.d.ts

@@ -1,7 +1,17 @@
-/**
- * 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;
+    };
+}
+/** Renders MDX/markdown to a static HTML string — 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,73 @@ 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";
+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 render = componentsByTag?.get(node.tagName);
+            if (render) {
+                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;
+                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 HTML string — 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);
+        .use(rehypeDraftbase, options)
+        .use(rehypeStringify, { allowDangerousHtml: true });
+    const file = await processor.process(source);
     return String(file);
 }

package/dist/toHtml.test.js

@@ -10,3 +10,43 @@ 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("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,8 +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" />`.
+ * 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

@@ -1,10 +1,10 @@
-import { compileMDXCore } from "./core.js";
+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" />`.
+ * 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);
+    return compileMDXCore(source, vueJsxRuntime, defaultComponents);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@draftbase/renderer",
-  "version": "0.3.2",
+  "version": "0.4.3",
   "description": "Framework-agnostic MDX renderer for Draftbase content (React, Next.js RSC, React Native, Astro, Vite, Vue)",
   "keywords": [
     "draftbase",
@@ -31,6 +31,7 @@
   "exports": {
     ".": "./dist/index.js",
     "./vue": "./dist/vue.js",
+    "./react-native": "./dist/reactNative.js",
     "./styles.css": "./dist/styles.css"
   },
   "files": [
@@ -41,7 +42,7 @@
   "scripts": {
     "build": "tsc -p tsconfig.json && cp src/styles.css dist/styles.css",
     "lint": "tsc --noEmit",
-    "test": "node --test dist/wrapperClassName.test.js dist/toHtml.test.js dist/compileMDX.test.js"
+    "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": {
     "react": ">=18",
@@ -60,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"
   },