@prismicio/react/dist/PrismicRichText.js

React components and hooks to fetch and present Prismic content

import { devMsg } from "./lib/devMsg.js";
import { PrismicLink } from "./PrismicLink.js";
import { isFilled } from "@prismicio/client";
import { DEV } from "esm-env";
import { Fragment, cloneElement, isValidElement } from "react";
import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
import { composeSerializers, serialize, wrapMapSerializer } from "@prismicio/client/richtext";
//#region src/PrismicRichText.tsx
const getDir = (node) => {
	if ("direction" in node && node.direction === "rtl") return "rtl";
};
const createDefaultSerializer = (args) => wrapMapSerializer({
	heading1: ({ node, children, key }) => /* @__PURE__ */ jsx("h1", {
		dir: getDir(node),
		children
	}, key),
	heading2: ({ node, children, key }) => /* @__PURE__ */ jsx("h2", {
		dir: getDir(node),
		children
	}, key),
	heading3: ({ node, children, key }) => /* @__PURE__ */ jsx("h3", {
		dir: getDir(node),
		children
	}, key),
	heading4: ({ node, children, key }) => /* @__PURE__ */ jsx("h4", {
		dir: getDir(node),
		children
	}, key),
	heading5: ({ node, children, key }) => /* @__PURE__ */ jsx("h5", {
		dir: getDir(node),
		children
	}, key),
	heading6: ({ node, children, key }) => /* @__PURE__ */ jsx("h6", {
		dir: getDir(node),
		children
	}, key),
	paragraph: ({ node, children, key }) => /* @__PURE__ */ jsx("p", {
		dir: getDir(node),
		children
	}, key),
	preformatted: ({ node, key }) => /* @__PURE__ */ jsx("pre", { children: node.text }, key),
	strong: ({ children, key }) => /* @__PURE__ */ jsx("strong", { children }, key),
	em: ({ children, key }) => /* @__PURE__ */ jsx("em", { children }, key),
	listItem: ({ node, children, key }) => /* @__PURE__ */ jsx("li", {
		dir: getDir(node),
		children
	}, key),
	oListItem: ({ node, children, key }) => /* @__PURE__ */ jsx("li", {
		dir: getDir(node),
		children
	}, key),
	list: ({ children, key }) => /* @__PURE__ */ jsx("ul", { children }, key),
	oList: ({ children, key }) => /* @__PURE__ */ jsx("ol", { children }, key),
	image: ({ node, key }) => {
		const img = /* @__PURE__ */ jsx("img", {
			src: node.url,
			alt: node.alt ?? void 0,
			"data-copyright": node.copyright ? node.copyright : void 0
		});
		return /* @__PURE__ */ jsx("p", {
			className: "block-img",
			children: node.linkTo ? /* @__PURE__ */ jsx(PrismicLink, {
				linkResolver: args.linkResolver,
				internalComponent: args.internalLinkComponent,
				externalComponent: args.externalLinkComponent,
				field: node.linkTo,
				children: img
			}) : img
		}, key);
	},
	embed: ({ node, key }) => /* @__PURE__ */ jsx("div", {
		"data-oembed": node.oembed.embed_url,
		"data-oembed-type": node.oembed.type,
		"data-oembed-provider": node.oembed.provider_name,
		dangerouslySetInnerHTML: { __html: node.oembed.html ?? "" }
	}, key),
	hyperlink: ({ node, children, key }) => /* @__PURE__ */ jsx(PrismicLink, {
		field: node.data,
		linkResolver: args.linkResolver,
		internalComponent: args.internalLinkComponent,
		externalComponent: args.externalLinkComponent,
		children
	}, key),
	label: ({ node, children, key }) => /* @__PURE__ */ jsx("span", {
		className: node.data.label,
		children
	}, key),
	span: ({ text, key }) => {
		const result = [];
		let i = 0;
		for (const line of text.split("\n")) {
			if (i > 0) result.push(/* @__PURE__ */ jsx("br", {}, `${i}__break`));
			result.push(/* @__PURE__ */ jsx(Fragment, { children: line }, `${i}__line`));
			i++;
		}
		return /* @__PURE__ */ jsx(Fragment, { children: result }, key);
	}
});
/**
* Renders content from a Prismic rich text field as React components.
*
* @example
* 	```tsx
* 	<PrismicRichText field={slice.primary.text} />;
* 	```
*
* @see Learn how to style rich text, use custom components, and use labels for custom formatting: {@link https://prismic.io/docs/fields/rich-text}
*/
const PrismicRichText = (props) => {
	const { linkResolver, field, fallback, components, externalLinkComponent, internalLinkComponent, ...restProps } = props;
	if (DEV) {
		if ("className" in restProps) console.warn(`[PrismicRichText] className cannot be passed to <PrismicRichText> since it renders an array without a wrapping component. For more details, see ${devMsg("classname-is-not-a-valid-prop")}.`, field);
	}
	if (!isFilled.richText(field)) return fallback != null ? /* @__PURE__ */ jsx(Fragment$1, { children: fallback }) : null;
	const serializer = composeSerializers(typeof components === "object" ? wrapMapSerializer(components) : components, createDefaultSerializer({
		linkResolver,
		internalLinkComponent,
		externalLinkComponent
	}));
	const serialized = serialize(field, (type, node, text, children, key) => {
		const result = serializer(type, node, text, children, key);
		if (isValidElement(result) && result.key == null) return cloneElement(result, { key });
		else return result;
	});
	if (!serialized) return fallback != null ? /* @__PURE__ */ jsx(Fragment$1, { children: fallback }) : null;
	return /* @__PURE__ */ jsx(Fragment$1, { children: serialized });
};
//#endregion
export { PrismicRichText };

//# sourceMappingURL=PrismicRichText.js.map