@prismicio/react 3.3.0 → 3.4.0

package/dist/PrismicToolbar.d.ts

@@ -8,6 +8,26 @@ type PrismicToolbarProps = {
    * repository URL is `my-repo.prismic.io`.
    */
   repositoryName: string;
+  /**
+   * Called when the Prismic toolbar triggers a preview update. This happens
+   * when the previewed content changes.
+   *
+   * The new ref can be read from `event.detail.ref`.
+   *
+   * The default page reload behavior can be cancelled with
+   * `event.preventDefault()`.
+   */
+  onPreviewUpdate?: (event: CustomEvent<{
+    ref: string;
+  }>) => void;
+  /**
+   * Called when the Prismic toolbar triggers a preview end. This happens when
+   * a preview session is closed.
+   *
+   * The default page reload behavior can be cancelled with
+   * `event.preventDefault()`.
+   */
+  onPreviewEnd?: (event: CustomEvent<null>) => void;
 };
 /**
  * Renders the Prismic Toolbar script to support draft previews.

package/dist/PrismicToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicToolbar.d.ts","names":[],"sources":["../src/PrismicToolbar.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,mBAAA;EAAA;AAmBZ;;;;;;;;;;;;;;;;cAAa,gBAAgB,GAAG"}
+{"version":3,"file":"PrismicToolbar.d.ts","names":[],"sources":["../src/PrismicToolbar.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,mBAAA;EAAA;AAuCZ;;;;;;;;;;;;;4BAvB2B;;;;;;;;;;yBASH;;;;;;;;;;;;;cAcX,gBAAgB,GAAG"}

package/dist/PrismicToolbar.js

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { getToolbarSrc } from "@prismicio/client";
 
 //#region src/PrismicToolbar.tsx
@@ -16,8 +16,12 @@ import { getToolbarSrc } from "@prismicio/client";
 * @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 } = 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");
@@ -29,6 +33,12 @@ const PrismicToolbar = (props) => {
 			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;
 };
 

package/dist/PrismicToolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrismicToolbar.js","names":[],"sources":["../src/PrismicToolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { type FC, useEffect } from \"react\";\nimport { getToolbarSrc } from \"@prismicio/client\";\n\n/** Props for `<PrismicToolbar>`. */\nexport type PrismicToolbarProps = {\n\t/**\n\t * The name of the Prismic repository. For example, `\"my-repo\"` if the\n\t * repository URL is `my-repo.prismic.io`.\n\t */\n\trepositoryName: string;\n};\n\n/**\n * Renders the Prismic Toolbar script to support draft previews.\n *\n * @example\n *\n * ```tsx\n * <PrismicToolbar repositoryName=\"my-repo\" />;\n * ```\n *\n * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}\n */\nexport const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {\n\tconst { repositoryName } = props;\n\n\tconst src = getToolbarSrc(repositoryName);\n\n\tuseEffect(() => {\n\t\tconst existingScript = document.querySelector(`script[src=\"${src}\"]`);\n\n\t\tif (!existingScript) {\n\t\t\tconst script = document.createElement(\"script\");\n\t\t\tscript.src = src;\n\t\t\tscript.defer = true;\n\n\t\t\t// Used to distinguish the toolbar element from other elements.\n\t\t\tscript.dataset.prismicToolbar = \"\";\n\t\t\tscript.dataset.repositoryName = repositoryName;\n\n\t\t\t// Disable Happy DOM `<script>` evaluation during tests.\n\t\t\t// @ts-expect-error - `_evaluateScript` is a Happy DOM-specific property.\n\t\t\tscript._evaluateScript = false;\n\n\t\t\tdocument.body.appendChild(script);\n\t\t}\n\t}, [repositoryName, src]);\n\n\treturn null;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAa,kBAA2C,UAAU;CACjE,MAAM,EAAE,mBAAmB;CAE3B,MAAM,MAAM,cAAc,eAAe;AAEzC,iBAAgB;AAGf,MAAI,CAFmB,SAAS,cAAc,eAAe,IAAI,IAAI,EAEhD;GACpB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,UAAO,MAAM;AACb,UAAO,QAAQ;AAGf,UAAO,QAAQ,iBAAiB;AAChC,UAAO,QAAQ,iBAAiB;AAIhC,UAAO,kBAAkB;AAEzB,YAAS,KAAK,YAAY,OAAO;;IAEhC,CAAC,gBAAgB,IAAI,CAAC;AAEzB,QAAO"}
+{"version":3,"file":"PrismicToolbar.js","names":[],"sources":["../src/PrismicToolbar.tsx"],"sourcesContent":["\"use client\";\n\nimport { getToolbarSrc } from \"@prismicio/client\";\nimport { type FC, useEffect, useRef } from \"react\";\n\n/** Props for `<PrismicToolbar>`. */\nexport type PrismicToolbarProps = {\n\t/**\n\t * The name of the Prismic repository. For example, `\"my-repo\"` if the\n\t * repository URL is `my-repo.prismic.io`.\n\t */\n\trepositoryName: string;\n\n\t/**\n\t * Called when the Prismic toolbar triggers a preview update. This happens\n\t * when the previewed content changes.\n\t *\n\t * The new ref can be read from `event.detail.ref`.\n\t *\n\t * The default page reload behavior can be cancelled with\n\t * `event.preventDefault()`.\n\t */\n\tonPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void;\n\n\t/**\n\t * Called when the Prismic toolbar triggers a preview end. This happens when\n\t * a preview session is closed.\n\t *\n\t * The default page reload behavior can be cancelled with\n\t * `event.preventDefault()`.\n\t */\n\tonPreviewEnd?: (event: CustomEvent<null>) => void;\n};\n\n/**\n * Renders the Prismic Toolbar script to support draft previews.\n *\n * @example\n *\n * ```tsx\n * <PrismicToolbar repositoryName=\"my-repo\" />;\n * ```\n *\n * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}\n */\nexport const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {\n\tconst { repositoryName, onPreviewUpdate, onPreviewEnd } = props;\n\n\tconst src = getToolbarSrc(repositoryName);\n\n\tconst onPreviewUpdateRef = useRef(onPreviewUpdate);\n\tonPreviewUpdateRef.current = onPreviewUpdate;\n\n\tconst onPreviewEndRef = useRef(onPreviewEnd);\n\tonPreviewEndRef.current = onPreviewEnd;\n\n\tuseEffect(() => {\n\t\tconst existingScript = document.querySelector(`script[src=\"${src}\"]`);\n\n\t\tif (!existingScript) {\n\t\t\tconst script = document.createElement(\"script\");\n\t\t\tscript.src = src;\n\t\t\tscript.defer = true;\n\n\t\t\t// Used to distinguish the toolbar element from other elements.\n\t\t\tscript.dataset.prismicToolbar = \"\";\n\t\t\tscript.dataset.repositoryName = repositoryName;\n\n\t\t\t// Disable Happy DOM `<script>` evaluation during tests.\n\t\t\t// @ts-expect-error - `_evaluateScript` is a Happy DOM-specific property.\n\t\t\tscript._evaluateScript = false;\n\n\t\t\tdocument.body.appendChild(script);\n\t\t}\n\t}, [repositoryName, src]);\n\n\tuseEffect(() => {\n\t\tconst controller = new AbortController();\n\n\t\twindow.addEventListener(\n\t\t\t\"prismicPreviewUpdate\",\n\t\t\t(event) =>\n\t\t\t\tonPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),\n\t\t\t{ signal: controller.signal },\n\t\t);\n\n\t\twindow.addEventListener(\n\t\t\t\"prismicPreviewEnd\",\n\t\t\t(event) => onPreviewEndRef.current?.(event as CustomEvent<null>),\n\t\t\t{ signal: controller.signal },\n\t\t);\n\n\t\treturn () => controller.abort();\n\t}, []);\n\n\treturn null;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AA6CA,MAAa,kBAA2C,UAAU;CACjE,MAAM,EAAE,gBAAgB,iBAAiB,iBAAiB;CAE1D,MAAM,MAAM,cAAc,eAAe;CAEzC,MAAM,qBAAqB,OAAO,gBAAgB;AAClD,oBAAmB,UAAU;CAE7B,MAAM,kBAAkB,OAAO,aAAa;AAC5C,iBAAgB,UAAU;AAE1B,iBAAgB;AAGf,MAAI,CAFmB,SAAS,cAAc,eAAe,IAAI,IAAI,EAEhD;GACpB,MAAM,SAAS,SAAS,cAAc,SAAS;AAC/C,UAAO,MAAM;AACb,UAAO,QAAQ;AAGf,UAAO,QAAQ,iBAAiB;AAChC,UAAO,QAAQ,iBAAiB;AAIhC,UAAO,kBAAkB;AAEzB,YAAS,KAAK,YAAY,OAAO;;IAEhC,CAAC,gBAAgB,IAAI,CAAC;AAEzB,iBAAgB;EACf,MAAM,aAAa,IAAI,iBAAiB;AAExC,SAAO,iBACN,yBACC,UACA,mBAAmB,UAAU,MAAsC,EACpE,EAAE,QAAQ,WAAW,QAAQ,CAC7B;AAED,SAAO,iBACN,sBACC,UAAU,gBAAgB,UAAU,MAA2B,EAChE,EAAE,QAAQ,WAAW,QAAQ,CAC7B;AAED,eAAa,WAAW,OAAO;IAC7B,EAAE,CAAC;AAEN,QAAO"}

package/dist/package.js

@@ -1,5 +1,5 @@
 //#region package.json
-var version = "3.3.0";
+var version = "3.4.0";
 
 //#endregion
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/react",
-	"version": "3.3.0",
+	"version": "3.4.0",
 	"description": "React components and hooks to fetch and present Prismic content",
 	"keywords": [
 		"typescript",

package/src/PrismicToolbar.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { type FC, useEffect } from "react";
 import { getToolbarSrc } from "@prismicio/client";
+import { type FC, useEffect, useRef } from "react";
 
 /** Props for `<PrismicToolbar>`. */
 export type PrismicToolbarProps = {
@@ -10,6 +10,26 @@ export type PrismicToolbarProps = {
 	 * repository URL is `my-repo.prismic.io`.
 	 */
 	repositoryName: string;
+
+	/**
+	 * Called when the Prismic toolbar triggers a preview update. This happens
+	 * when the previewed content changes.
+	 *
+	 * The new ref can be read from `event.detail.ref`.
+	 *
+	 * The default page reload behavior can be cancelled with
+	 * `event.preventDefault()`.
+	 */
+	onPreviewUpdate?: (event: CustomEvent<{ ref: string }>) => void;
+
+	/**
+	 * Called when the Prismic toolbar triggers a preview end. This happens when
+	 * a preview session is closed.
+	 *
+	 * The default page reload behavior can be cancelled with
+	 * `event.preventDefault()`.
+	 */
+	onPreviewEnd?: (event: CustomEvent<null>) => void;
 };
 
 /**
@@ -24,10 +44,16 @@ export type PrismicToolbarProps = {
  * @see Learn how to set up preview functionality and the toolbar's role in preview sessions: {@link https://prismic.io/docs/previews}
  */
 export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
-	const { repositoryName } = 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(() => {
 		const existingScript = document.querySelector(`script[src="${src}"]`);
 
@@ -48,5 +74,24 @@ export const PrismicToolbar: FC<PrismicToolbarProps> = (props) => {
 		}
 	}, [repositoryName, src]);
 
+	useEffect(() => {
+		const controller = new AbortController();
+
+		window.addEventListener(
+			"prismicPreviewUpdate",
+			(event) =>
+				onPreviewUpdateRef.current?.(event as CustomEvent<{ ref: string }>),
+			{ signal: controller.signal },
+		);
+
+		window.addEventListener(
+			"prismicPreviewEnd",
+			(event) => onPreviewEndRef.current?.(event as CustomEvent<null>),
+			{ signal: controller.signal },
+		);
+
+		return () => controller.abort();
+	}, []);
+
 	return null;
 };