@prismicio/react/dist/PrismicToolbar.js

React components and hooks to fetch and present Prismic content

"use client";
import { getToolbarSrc } from "@prismicio/client";
import { useEffect, useRef } from "react";
//#region src/PrismicToolbar.tsx
/**
* Renders the Prismic Toolbar script to support draft previews.
*
* @example
* 	```tsx
* 	<PrismicToolbar repositoryName="my-repo" />;
* 	```
*
* @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}
*/
const PrismicToolbar = (props) => {
	const { repositoryName, onPreviewUpdate, onPreviewEnd } = props;
	const src = getToolbarSrc(repositoryName);
	const onPreviewUpdateRef = useRef(onPreviewUpdate);
	onPreviewUpdateRef.current = onPreviewUpdate;
	const onPreviewEndRef = useRef(onPreviewEnd);
	onPreviewEndRef.current = onPreviewEnd;
	useEffect(() => {
		if (!document.querySelector(`script[src="${src}"]`)) {
			const script = document.createElement("script");
			script.src = src;
			script.defer = true;
			script.dataset.prismicToolbar = "";
			script.dataset.repositoryName = repositoryName;
			script._evaluateScript = false;
			document.body.appendChild(script);
		}
	}, [repositoryName, src]);
	useEffect(() => {
		const controller = new AbortController();
		window.addEventListener("prismicPreviewUpdate", (event) => onPreviewUpdateRef.current?.(event), { signal: controller.signal });
		window.addEventListener("prismicPreviewEnd", (event) => onPreviewEndRef.current?.(event), { signal: controller.signal });
		return () => controller.abort();
	}, []);
	return null;
};
//#endregion
export { PrismicToolbar };

//# sourceMappingURL=PrismicToolbar.js.map